:root {
    --sans_family: Avenir, 'Lucida Grande', Lucida, Verdana, sans-serif;
    --serif_family: Palatino, Georgia, serif;
    --fixed_family: Courier, monospace;
    --fancy_family: 'Fabled Flourish', 'Apple Chancery', 'Hoefler Text', 'Lucida Calligraphy',
        'Monotype Corsiva', cursive;
}

body {
    font-family: var(--serif_family);
    line-height: 1.2;
    background: #ffffff;
	font-size: 30px;
}

h1 {font-size: 48px;}
h2 {font-size: 42px;}

.avatar {height: 250px;}

p {margin: 9px 0;}
p + p {margin-top: 9px;}

.wrap {
    margin: 0 auto;
    overflow: visible;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px; /* though it's mostly controlled by width of day-image */
}

.day-header .day-image {max-width: 525px;}  /* arbitrary: 75% of 700px day-image */

.day-image { max-width: 700px; }
.lamp-image { max-width: 250px; }

.day-header > img:first-child {margin-right: auto;}
.day-header > img:last-child {margin-left: auto;}

.day-footer {margin-top: 20px;}

h1,
.preface-footer,
.day-footer {
    color: #3C3B6E; /* US flag blue */
    border-top: 4px solid #B22234; /* US flag red */
    padding-top: 10px;
    margin-top: 20px;
}

.bubble,
.thought-bubble {
    border-radius: 16px;
    border: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    font-family: var(--sans_family);
    margin: 1rem 3rem;  /* top/bottom then left/right */
    padding: 0.5rem;
    position: relative;
    width: fit-content;
}

.thought-bubble {margin-top: 2rem;}

.bubble {background-color: #e1fdee;}
.thought-bubble {background-color: #e6f3ff;}

.bubble::before,
.thought-bubble::before {
    font-style: normal;
    position: absolute;
    left: -44px;
    top: -10px;
}

.bubble::before {content: "\01F4AC";}
.thought-bubble::before {content: "\01F4AD";}

/* SEE ALSO in detective & Tin Man: interlude, overlay */
.narration {
    font-family: var(--serif_family);
    font-style: italic;
    /* font-size: 1.25rem; */
    margin-top: 25px;
    max-width: 25ch;
}

.day-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.lamp-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.closing-line {margin-top: 25px;}