/* The Pencil Reply world: the kitchen table on Friday. Its moving parts apply only under html.living (scripts on, motion on);
   without it every moment shows as its finished still with its card. */

/* ---------- Held still, scripts off: each moment a finished picture with its card ---------- */
.world { display: none; }
.story { position: relative; }
.step { position: relative; padding: 0 0 56px; }
.still { margin: 0; }
.still img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; background: #e8c9a1; }
.step .hold { padding: 0 var(--gap); }
.step .card { max-width: 660px; margin: -64px auto 0; }
.s1 .card { margin-top: -64px; }
/* The first still shows from its top, as the living first screen does: the family under the menu, clear of it. */
.s1 .still img { max-height: 74vh; max-height: 74svh; object-position: 50% 0; }
/* On a desk, and on any screen wider than tall (a desk zoomed to 200%), the first still is the wide picture and starts
   under the menu, so Dad's head is clear of it, as in the living first screen. */
@media (min-width: 761px), (min-aspect-ratio: 1/1) {
  .s1 .still { position: relative; padding-top: 72px; background: #fff; }
  .s1 .still::after { content: ""; position: absolute; left: 0; right: 0; top: 71px; height: 46px; background: linear-gradient(#fff, rgba(255,255,255,0)); pointer-events: none; }
  .s1 .still img { max-height: calc(74vh - 40px); max-height: calc(74svh - 40px); }
  .s1 .card { margin-top: -20px; }
}
/* A phone zoomed in (fewer pixels across) draws the family smaller under the same menu: there too it starts below it. */
@media (max-width: 340px) {
  .s1 .still { position: relative; padding-top: var(--top-h); background: #fff; }
  .s1 .still::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--top-h) - 1px); height: 30px; background: linear-gradient(#fff, rgba(255,255,255,0)); pointer-events: none; }
}
.phone-only, .rd-nav { display: none; }
@media (max-width: 760px) and (max-aspect-ratio: 1/1) {
  .still img { aspect-ratio: 390 / 844; max-height: 80svh; }
  .s1 .still img { max-height: 48vh; max-height: 48svh; object-position: 50% 0; }
}
@media (max-width: 760px) {
  .step .card { margin-top: -40px; }
  .wide-only.days { display: none; }
}
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 8px 0 6px; font-size: 16px; line-height: 30px; }
.days div { display: flex; gap: 8px; border-bottom: 1px solid rgba(79,134,219,.35); }
.days dt { font-weight: 700; min-width: 92px; }
.days dd { margin: 0; }
.days .fri dt, .days .fri dd { color: var(--red); }
.rule-top { border-top: 1.5px solid var(--graphite); padding-top: 10px; }
.hint { color: var(--graphite); font-weight: 700; }
.hint::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); border: 1.5px solid var(--graphite); margin-right: 8px; vertical-align: 0; }
.term + .term { margin-top: 14px; }
.c8 .c8-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.c8 h2 a { text-decoration: inherit; text-decoration-color: inherit; }
.c8 .display { font-size: clamp(32px, 3.4vw, 48px); }
.incl { margin: 10px 0 14px; padding: 0; list-style: none; font-size: 16px; line-height: 25px; }
.incl li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.incl li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.after { position: relative; z-index: 3; background: var(--paper); padding: 72px var(--gap) 88px; }
.after-in { max-width: 760px; margin: 0 auto; }
.after-in.after-two { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
@media (max-width: 760px) { .after-in.after-two { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
.after h2 { margin-bottom: 14px; }

/* ---------- Living: one stage pinned behind the words ---------- */
html.living .world { display: block; position: sticky; top: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: clip; z-index: 0; background: #fff; contain: layout paint; }
html.living .still { display: none; }
html.living .step { --u: 100svh; height: calc(var(--span) * var(--u)); padding: 0; pointer-events: none; z-index: 2; }
html.living .hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--top-h) + 16px) var(--gap) 28px; pointer-events: none; }
html.living .step .card { pointer-events: auto; margin: 0; width: min(560px, 42vw); }
html.living .s1 .hold { justify-content: flex-end; }
html.living .s1 .card { width: min(540px, 42vw); padding: 20px 22px 12px; }
html.living .s1 .display { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.14; }
html.living .s1 .lede { font-size: 16px; line-height: 24px; }
html.living .s1 .offer { margin: 8px 0 10px; }
/* On a desk the first card stays low and short, under Biscuit's paws on the table edge, so the whole family shows above it. */
@media (min-width: 761px) {
  html.living .s1 .hold { padding-bottom: 14px; }
  html.living .s1 .card { width: min(580px, 44vw); padding: 14px 20px 10px; }
  html.living .c1 .kicker { font-size: 15px; line-height: 20px; margin: 0 0 4px; }
  html.living .s1 .display { font-size: clamp(32px, 2.9vw, 42px); line-height: 1.12; margin-bottom: 8px; }
  html.living .c1 .lede { display: none; }
  html.living .c1 .offer { margin: 6px 0 8px; }
  html.living .c1 .offer .sticker { width: 54px; height: 54px; font-size: 19px; }
  html.living .c1 .offer p { margin: 0; }
  html.living .c1 .fine { font-size: 14px; line-height: 19px; margin: 6px 0 0; }
}
@media (min-width: 761px) and (min-height: 960px) { html.living .c1 .lede { display: block; } }
/* On a shorter desk the still sits lower under the menu, so the first card gets wider and shorter: the headline on one
   line, the price and the way in side by side, and Biscuit's paws on the table edge stay in view above it. */
@media (min-width: 761px) and (max-height: 880px) {
  html.living .s1 .card { width: min(600px, 46vw); display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; }
  html.living .c1 > .kicker, html.living .c1 > .display, html.living .c1 > .fine { grid-column: 1 / -1; }
  html.living .s1 .display { font-size: clamp(28px, 2.55vw, 38px); }
  html.living .c1 .row { margin: 0; }
  /* On sale the way in is two buttons: they stack, a size smaller, so the offer keeps its width and the card stays short. */
  html.living .c1 .row:has(> [data-sale="open"]) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  html.living .c1 .row:has(> [data-sale="open"]) .btn { min-height: 40px; padding: 6px 14px; font-size: 15px; }
  html.living .c1 .offer:has(+ .row > [data-sale="open"]) p { font-size: 15px; line-height: 20px; }
}
html.living .s2 .hold, html.living .s3 .hold, html.living .s6 .hold { justify-content: flex-end; }
html.living .s4 .hold { justify-content: center; align-items: flex-end; }
html.living .s4 .card { width: min(420px, 32vw); }
html.living .s5 .hold { justify-content: flex-start; }
html.living .s5 .card { width: min(400px, 30vw); }
html.living .s7 .hold { justify-content: center; }
html.living .s7 .card { width: min(440px, 33vw); }
html.living .s8 .hold { justify-content: flex-start; }
html.living .s8 .card { width: min(540px, 40vw); }
html.living .s3 .card, html.living .s6 .card { width: min(460px, 34vw); }
html.living .s2 .card { width: min(520px, 40vw); }
html.living .term { display: none; }
html.living .term.on, html.living:not(.world-on) .term[data-term="1"] { display: block; }
html.living .s5 .card { min-height: 0; transition: transform .32s cubic-bezier(.3,0,.2,1); }
/* A week opened where there is no room beside the term's card: the term's card slides up out of the way until it closes. */
html.living.wk-over #termCard { transform: translateY(calc(-100% - var(--top-h) - 40px)); }
html.living .after { margin-top: 0; }
/* A narrow desk or a turned tablet (761 to 1100 wide): the cards keep a width their words read at, never a third of the screen. */
@media (min-width: 761px) and (max-width: 1100px) {
  html.living .step .card, html.living .s2 .card, html.living .s3 .card, html.living .s4 .card, html.living .s5 .card, html.living .s6 .card, html.living .s7 .card, html.living .s8 .card { width: min(480px, 58vw); }
  html.living .s1 .card { width: min(560px, 66vw); }
  html.living .days { gap: 0 16px; font-size: 15px; line-height: 26px; }
  html.living .days dt { min-width: 80px; }
}

@media (max-width: 760px) {
  html.living .hold { padding: calc(var(--top-h) + 8px) 10px 12px; }
  html.living .step .card, html.living .s1 .card, html.living .s2 .card, html.living .s3 .card, html.living .s4 .card, html.living .s5 .card, html.living .s6 .card, html.living .s7 .card, html.living .s8 .card { width: 100%; }
  html.living .s2 .hold, html.living .s3 .hold, html.living .s4 .hold, html.living .s5 .hold { justify-content: flex-start; align-items: stretch; }
  html.living .s7 .hold { justify-content: flex-end; align-items: stretch; padding-bottom: 84px; }
  html.living .s6 .hold { justify-content: flex-end; padding-bottom: 96px; }
  html.living .s8 .hold { justify-content: flex-end; padding-bottom: 84px; }
  html.living .wide-only { display: none; }
  html.living .phone-only { display: block; }
  html.living .card { padding: 18px 16px 12px; }
  html.living .card .display { font-size: 30px; line-height: 36px; }
  html.living .card h2 { font-size: 23px; line-height: 29px; }
  html.living .card p { font-size: 16px; line-height: 24px; }
  html.living .card .row .btn { flex: 1; }
  html.living .s1 .card { padding-bottom: 14px; }
  /* The first card stays low and short on a phone, so the script and the tiles lie in plain view above it. */
  html.living .c1 { padding: 14px 14px 8px; }
  html.living .c1 .kicker { font-size: 13px; line-height: 18px; margin-bottom: 4px; }
  html.living .c1 .display { font-size: 27px; line-height: 32px; margin-bottom: 8px; }
  html.living .c1 .lede { display: none; }
  html.living .c1 .offer { margin: 6px 0 8px; gap: 10px; }
  html.living .c1 .offer .sticker { width: 50px; height: 50px; font-size: 18px; }
  html.living .c1 .offer p { font-size: 15px; line-height: 21px; margin: 0; }
  html.living .c1 .row .btn { min-height: 46px; }
  html.living .c1 .fine { font-size: 13px; line-height: 19px; margin: 8px 0 0; }
  html.living.phone .sceneA { background: linear-gradient(transparent 70%, #c98a4a 70%); }
  /* The held script, read on a phone: the passage the finger is on, in the script's own words at a size to read, on the
     card above the paper. Every passage takes the place of the tallest, so the card and the paper below never jump. */
  html.living .c2 h2 { margin-bottom: 6px; padding-right: 128px; }
  /* Where the reading is, out of the script's twelve passages, with a step back and on: the scroll carries the reading,
     and these bring back a passage a quick swipe went past. */
  html.living .c2 { position: relative; }
  html.living .rd-nav { display: flex; position: absolute; top: 12px; right: 10px; align-items: center; gap: 2px; }
  html.living .rd-b { width: 40px; height: 40px; border: 1.5px solid var(--graphite); border-radius: 50%; background: #fff; color: var(--graphite); font: 700 24px/1 var(--font); padding: 0 0 3px; cursor: pointer; }
  html.living .rd-b:disabled { opacity: .35; cursor: default; }
  html.living .rd-c { min-width: 50px; text-align: center; font-size: 14px; line-height: 18px; white-space: nowrap; }
  html.living .c2 .rd-lead { font-size: 15px; line-height: 21px; margin: 0 0 6px; }
  html.living .read-days { display: grid; }
  html.living .rd { grid-area: 1 / 1; visibility: hidden; }
  html.living .rd.on { visibility: visible; }
  html.living .card .rd p, html.living .rd li { font-size: 15px; line-height: 21px; margin: 0 0 4px; }
  html.living .card .rd .rd-day { font-weight: 700; color: var(--red); margin: 0 0 2px; }
  html.living .card .rd .rd-note { font-size: 14px; line-height: 20px; }
  html.living .rd .r { color: var(--red); }
  html.living .rd-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--graphite); color: #fff; font: 700 12px/1 var(--font); vertical-align: 1px; }
  html.living .rd-ch { margin: 0 0 4px; padding-left: 24px; }
  html.living.phone .s2 { --span: 2.85 !important; }
  /* The last card stays short too, so June's name on the closed cover shows above it. */
  html.living .c8 { padding: 14px 14px 8px; }
  html.living .c8 .display { font-size: 27px; line-height: 32px; }
  html.living .c8 .kicker { font-size: 14px; line-height: 19px; margin: 2px 0 0; }
  html.living .c8 .sticker { width: 56px; height: 56px; font-size: 20px; }
  html.living .c8 .incl { margin: 8px 0; }
  html.living .c8 .incl li { font-size: 15px; line-height: 21px; }
  html.living .c8 .row .btn { min-height: 46px; }
  html.living .c8 .fine { font-size: 14px; line-height: 20px; margin: 8px 0 0; }
}

/* A screen barely taller than the world allows (a phone at a large zoom): the term's card is one short strip under the
   menu, so Sam's map and its spots have the screen between it and the price bar. (The term's price is on the bar.) */
@media (max-width: 760px) and (max-height: 420px) {
  html.living .s5 .hold { padding-top: calc(var(--top-h) + 4px); }
  html.living .c5 { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 12px; }
  html.living .c5 .term .kicker { font-size: 13px; line-height: 17px; margin: 0; }
  html.living .c5 .term h2 { font-size: 20px; line-height: 25px; margin: 0; }
  html.living .c5 .phone-only { display: none; }
  html.living .c5 .hint { grid-column: 2; grid-row: 1; max-width: 150px; margin: 0; font-size: 13px; line-height: 17px; }
}
/* A phone on its side keeps the world: the wide picture fills the screen, and the cards get small and low enough for
   the family, the script and the table to show around them. The first card is one band along the foot of the screen,
   under the family; the script is read a passage at a time on its card, as on a phone held upright. */
@media (pointer: coarse) and (max-height: 31.24em) and (min-aspect-ratio: 4/3) {
  html.living .hold { padding: calc(var(--top-h) + 8px) 12px 10px; }
  html.living .step .card, html.living .s1 .card, html.living .s2 .card, html.living .s3 .card, html.living .s4 .card, html.living .s5 .card, html.living .s6 .card, html.living .s7 .card, html.living .s8 .card { width: min(380px, 48vw); padding: 10px 14px 8px; }
  html.living .card .display { font-size: 24px; line-height: 29px; }
  html.living .card h2 { font-size: 21px; line-height: 26px; margin-bottom: 6px; }
  html.living .card p { font-size: 15px; line-height: 21px; }
  html.living .card .kicker { font-size: 13px; line-height: 18px; margin: 0 0 2px; }
  html.living .card .fine { font-size: 13px; line-height: 18px; margin-top: 6px; }
  html.living .card .row .btn { min-height: 42px; padding: 6px 14px; font-size: 15px; }
  html.living .wide-only { display: none; }
  html.living .phone-only { display: block; }
  html.living .s2 .hold, html.living .s3 .hold, html.living .s6 .hold, html.living .s8 .hold { justify-content: flex-end; }
  html.living .s4 .hold, html.living .s7 .hold { justify-content: flex-end; align-items: flex-end; }
  /* No bottom bar on its side (site.css), so the last cards sit on the screen's foot, all of them clear of the menu. */
  html.living .s6 .hold, html.living .s7 .hold, html.living .s8 .hold { padding-bottom: 10px; }
  html.living .s5 .hold { justify-content: flex-start; }
  /* The first card: low in the right corner, over Sam's folded arms and his bag, so every face at the table shows above
     and beside it; the price and the way in side by side. */
  html.living .s1 .hold { padding-bottom: 8px; align-items: flex-end; }
  html.living .s1 .card { width: min(500px, 60vw); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 8px 12px 6px; }
  html.living .c1 > .kicker, html.living .c1 > .display, html.living .c1 > .fine { grid-column: 1 / -1; }
  html.living .c1 > .display { margin: 0 0 6px; font-size: 22px; line-height: 27px; }
  html.living .c1 .lede { display: none; }
  html.living .c1 .offer { margin: 0; gap: 8px; }
  html.living .c1 .offer .sticker { width: 44px; height: 44px; font-size: 16px; flex: none; }
  html.living .c1 .offer p { font-size: 13px; line-height: 17px; }
  html.living .c1 .row { margin: 0; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  html.living .c1 .row .btn { flex: none; min-height: 40px; padding: 4px 12px; font-size: 15px; }
  html.living .c1 > .fine { margin: 4px 0 0; font-size: 13px; line-height: 17px; }
  /* On sale, the card's way in is the one to buy; week 1 free stays a tap away in the header. */
  html.living .c1 .row:has(> [data-sale="open"]) > .btn:not([data-sale]) { display: none; }
  /* The script's passage reader, as on a phone held upright, with the phone's extra screen of scroll for it (world.js). */
  html.living .s2 { --span: 2.85 !important; }
  /* Wide enough that the longest passage fits between the menu and the screen's foot; the held page moves right for it. */
  html.living .s2 .card { width: min(400px, 56vw); }
  html.living .c2 { position: relative; }
  html.living .c2 h2 { padding-right: 128px; }
  html.living .rd-nav { display: flex; position: absolute; top: 6px; right: 8px; align-items: center; gap: 2px; }
  html.living .rd-b { width: 40px; height: 40px; border: 1.5px solid var(--graphite); border-radius: 50%; background: #fff; color: var(--graphite); font: 700 24px/1 var(--font); padding: 0 0 3px; cursor: pointer; }
  html.living .rd-b:disabled { opacity: .35; cursor: default; }
  html.living .rd-c { min-width: 50px; text-align: center; font-size: 14px; line-height: 18px; white-space: nowrap; }
  html.living .c2 .rd-lead { font-size: 14px; line-height: 19px; margin: 0 0 4px; }
  html.living .read-days { display: grid; }
  html.living .rd { grid-area: 1 / 1; visibility: hidden; }
  html.living .rd.on { visibility: visible; }
  html.living .card .rd p, html.living .rd li { font-size: 14px; line-height: 19px; margin: 0 0 3px; }
  html.living .card .rd .rd-day { font-weight: 700; color: var(--red); margin: 0 0 2px; }
  html.living .card .rd .rd-note { font-size: 13px; line-height: 18px; }
  html.living .rd .r { color: var(--red); }
  html.living .rd-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--graphite); color: #fff; font: 700 12px/1 var(--font); vertical-align: 1px; }
  html.living .rd-ch { margin: 0 0 4px; padding-left: 24px; }
  /* (On a very short screen the reader gets wider and its lead line smaller, so its tallest passage still fits under the
     menu with both arrows clear of it.) */
  @media (max-height: 24em) {
    html.living .s2 .card { width: min(470px, 66vw); padding-top: 8px; }
    html.living .c2 h2 { font-size: 19px; line-height: 24px; margin-bottom: 4px; }
    html.living .c2 .rd-lead { font-size: 13px; line-height: 17px; margin-bottom: 2px; }
    html.living .rd-nav { top: 2px; }
  }
  /* The last card: the year, its price and the way in, beside the closed book. */
  html.living .s8 .card { width: min(540px, 66vw); }
  html.living .c8 .display { font-size: 24px; line-height: 29px; margin-bottom: 4px; }
  html.living .c8 .kicker { margin: 0; }
  html.living .c8 .row { margin: 6px 0 0; }
  html.living .c8 .fine { margin-top: 4px; }
  html.living .c8 .sticker { width: 50px; height: 50px; font-size: 18px; }
  html.living .c8 .incl { margin: 6px 0; }
  html.living .c8 .incl li { font-size: 14px; line-height: 19px; margin-bottom: 2px; }
  html.living .c8 .incl li::before { top: 6px; }
  /* The pause sits in the header row beside the logo, clear of every card, all the way down. */
  html.world-on .calm-btn:not([hidden]), html.world-on body #calm:not([hidden]) { display: inline-grid; position: fixed; left: 158px; top: 6px; right: auto; bottom: auto; width: 38px; height: 38px; }
  html.world-on .calm-btn.in-bar:not([hidden]) { display: none; }
}

/* A screen too short for the first card under the family (a short desk window, a phone on its side): the card is one low,
   wide band on the table under their hands (world.js sets c1-band where the card above doesn't fit), and where even the
   band would reach a face the still gets smaller, its right edge with Sam's bag at the screen's edge (c1-fit). */
html.living.c1-band .s1 .hold { padding-bottom: 8px; align-items: stretch; }
html.living.c1-band .s1 .card { width: 100%; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "k o r" "d o r" "f o r"; column-gap: 20px; row-gap: 0; align-items: center; padding: 8px 16px; }
html.living.c1-band .c1 > .kicker { grid-area: k; font-size: 14px; line-height: 19px; margin: 0; }
html.living.c1-band .c1 > .display { grid-area: d; font-size: 28px; line-height: 34px; margin: 0; }
html.living.c1-band .c1 > .fine { grid-area: f; font-size: 13px; line-height: 18px; margin: 2px 0 0; }
html.living.c1-band .c1 .lede { display: none; }
html.living.c1-band .c1 .offer { grid-area: o; margin: 0; gap: 8px; max-width: 250px; }
html.living.c1-band .c1 .offer .sticker { width: 48px; height: 48px; font-size: 17px; flex: none; }
html.living.c1-band .c1 .offer p { font-size: 13px; line-height: 17px; margin: 0; }
html.living.c1-band .c1 .row { grid-area: r; margin: 0; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
html.living.c1-band .c1 .row .btn { flex: none; min-height: 42px; padding: 4px 14px; font-size: 15px; }
/* On sale, the band's way in is the one to buy; week 1 free stays a tap away in the header. */
html.living.c1-band .c1 .row:has(> [data-sale="open"]) > .btn:not([data-sale]) { display: none; }
@media (max-width: 900px) {
  /* Narrower: the audience along the top, the headline, the price and the way in on one line, and the terms under it. */
  html.living.c1-band .s1 .card { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "k k k k" "d s . r" "o o o o" "f f f f"; column-gap: 12px; padding: 6px 12px; }
  html.living.c1-band .c1 > .kicker { font-size: 13px; line-height: 18px; }
  html.living.c1-band .c1 > .display { font-size: 22px; line-height: 30px; }
  html.living.c1-band .c1 .offer { display: contents; }
  html.living.c1-band .c1 .offer .sticker { grid-area: s; width: 40px; height: 40px; font-size: 15px; }
  html.living.c1-band .c1 .offer p { grid-area: o; margin: 2px 0 0; }
  html.living.c1-band .c1 .row .btn { min-height: 40px; }
  html.living.c1-band .c1 > .fine { margin: 0; line-height: 17px; }
}
/* Made smaller, the still's left edge runs out into the page's white like a drawing's margin: the wall is white already,
   and the table, below Biscuit's paws, thins out over its last few inches. */
html.living.c1-fit .a-clips { -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 694px no-repeat, linear-gradient(to right, transparent, #000 calc(var(--fade, 120) * 1px)) 0 0 / 100% 100% no-repeat; mask: linear-gradient(#000, #000) 0 0 / 100% 694px no-repeat, linear-gradient(to right, transparent, #000 calc(var(--fade, 120) * 1px)) 0 0 / 100% 100% no-repeat; }

/* Whatever brings a card or one of its buttons into view (a key, the browser) brings it clear of the menu. */
html.living .step .card, html.living .step .card a, html.living .step .card button { scroll-margin: calc(var(--top-h, 64px) + 12px) 0 12px; }

/* The story is a place in the scroll: the browser doesn't shift it to keep some text in view when the screen turns. */
html.living { overflow-anchor: none; }

/* Scene A: Dana's seat. All of it is laid in the still's own pixels and scaled to cover the screen. */
.sceneA, .a-front { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.a-front { pointer-events: none; z-index: 4; }
.a-in { position: absolute; left: 0; top: 0; width: 2048px; height: 1280px; transform-origin: 0 0; }
html.phone .a-in { width: 864px; height: 1872px; }
/* On a desk the still sits under the menu; its top edge runs into the wall's own paper above it. */
html.desk #aIn::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 46px; background: linear-gradient(#fff, rgba(255,255,255,0)); pointer-events: none; z-index: 5; }
.a-clips, .a-clips picture, .a-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.a-still { object-fit: cover; }
/* A phone turned before the drawing for its new shape has arrived: a small copy of that drawing holds the frame, the
   family whole and in place, until the drawing itself is in (world.js, a-swap). Both small copies come with the page
   (about 7 KB), so the frame is never the other shape's drawing stretched to fit. */
html.living .a-clips { background: url(../img/a/lq-phone.webp) -9px -9px / 1px 1px no-repeat, url(../img/a/lq-desk.webp) -9px -9px / 1px 1px no-repeat; }
html.living.a-swap .a-clips { background: url(../img/a/lq-desk.webp) 0 0 / 100% 100% no-repeat; }
html.living.a-swap.phone .a-clips { background-image: url(../img/a/lq-phone.webp); }
html.living.a-swap .a-still, html.living.a-swap .a-rig { visibility: hidden; }
/* The family's own drawing, alive: lids, faces and Biscuit's ear laid over the still at its own pixels (js/family.js).
   Each shows only while it is in use, so at rest the still is exactly what shows. */
.a-rig { position: absolute; inset: 0; pointer-events: none; }
.a-rig .rg { position: absolute; display: block; max-width: none; visibility: hidden; }
.a-rig .rg.on, .a-rig .rg-under.on .rg { visibility: visible; }
.a-rig .rg-ear { visibility: hidden; will-change: transform; }
.a-rig .rg-under { position: absolute; overflow: hidden; background: #fdfdfd; visibility: hidden; }
.a-rig .rg-under.on, .a-rig .rg-under.on + .rg-ear { visibility: visible; }
/* Teddy's words: a slip of paper with a tail, set in the still's pixels where it points and kept at a size to read
   (--ik undoes the still's scale on this screen). */
.a-bubble { position: absolute; margin: 0; padding: 8px 14px 9px; background: #fff; border: 2px solid var(--graphite); border-radius: 14px; font: 700 18px/1.2 var(--font); color: var(--graphite); white-space: nowrap; box-shadow: 3px 3px 0 var(--manila);
  transform: scale(calc(var(--ik, 1) * .4)); opacity: 0; transition: transform 160ms cubic-bezier(.3,1.6,.5,1), opacity 120ms ease; pointer-events: none; z-index: 6; }
.a-bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; border: solid var(--graphite); border-width: 0 2px 2px 0; }
.a-bubble.on { opacity: 1; transform: scale(var(--ik, 1)); }
.a-bubble.dk { right: calc(2048px - 935px); top: 150px; transform-origin: 100% 100%; }
.a-bubble.dk::after { right: -9px; bottom: 12px; transform: rotate(-45deg); }
.a-bubble.ph { left: 300px; bottom: calc(1872px - 300px); transform-origin: 70% 100%; }
.a-bubble.ph::after { left: 62%; bottom: -9px; transform: rotate(45deg); }
.a-hand { position: absolute; left: 1380px; top: 840px; width: 668px; height: 440px; will-change: transform; }
html.phone .a-hand { display: none; }
.a-wash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.a-taps { position: absolute; inset: 0; pointer-events: none; }
.tap { position: absolute; pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 40%; }
.tap:focus-visible { outline: 3px solid var(--blue); }
/* Each one where they are in the desk drawing (2048 by 1280): Teddy from his card to his ear, Sam from his hood on. */
.tap[data-clip="biscuit"] { left: 20px; top: 340px; width: 350px; height: 360px; }
.tap[data-clip="teddy"] { left: 970px; top: 100px; width: 530px; height: 600px; }
.tap[data-clip="sam"] { left: 1500px; top: 10px; width: 548px; height: 660px; }
html.phone .tap[data-clip="biscuit"] { left: 0; top: 490px; width: 175px; height: 230px; }
html.phone .tap[data-clip="teddy"] { left: 425px; top: 300px; width: 190px; height: 420px; }
html.phone .tap[data-clip="sam"] { left: 615px; top: 250px; width: 249px; height: 465px; }
.tap[data-clip="june"] { left: 380px; top: 160px; width: 580px; height: 540px; }
html.phone .tap[data-clip="june"] { left: 175px; top: 375px; width: 250px; height: 330px; }


/* The m a p tiles: the start pack's own printable letter tiles (page 9), cut out of card along their dashed lines and
   lying flat on the table: the vowel on yellow, the consonants on cream, each a printed rounded tile on its square of
   white card. The stage is the open strip of table between the family's side and the script's top edge (world.js,
   TILES), and each tile is drawn as the table shows it from the parent's chair: foreshortened like the wood under it
   (about .64 as deep as it is wide), the card's cut edge catching the light at the front, a short shadow on the wood.
   A flicked tile slides across the strip and stops on the wood; under the script once it lifts. */
.a-tiles { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; --tk: .64; }
.tile { position: absolute; bottom: var(--tb, 0px); display: grid; place-items: center; width: var(--ts, 56px); height: calc(var(--ts, 56px) * var(--tk)); isolation: isolate; background: #fdfcf8; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(51,54,59,.2), 0 1.5px 0 #e2dccb, 0 2px 0 rgba(120,90,50,.25), 1px 4px 4px rgba(60,35,10,.3); color: #33363b; font: 700 calc(var(--ts, 56px) * .5)/1 var(--font); pointer-events: auto; user-select: none; -webkit-user-select: none; touch-action: none; }
.tile i { display: block; font-style: normal; transform: scaleY(var(--tk)); }
.tile::before { content: ""; position: absolute; inset: 8% 8% 9%; z-index: -1; border: max(1px, calc(var(--ts, 56px) * .03)) solid #8a7a57; border-radius: 16% / 24%; background: #faf5e9; box-shadow: inset 0 calc(var(--ts, 56px) * -.06) 0 #ebddbf; }
.tile.v::before { background: #fbebb8; box-shadow: inset 0 calc(var(--ts, 56px) * -.06) 0 #f1d47c; }
.tile::after { content: ""; position: absolute; inset: -10px; }
.tile:nth-child(1) { left: var(--tx, 0px); transform: rotate(-4deg); } .tile:nth-child(2) { left: calc(var(--tx, 0px) + var(--ts, 56px) * 1.22); transform: rotate(3deg); } .tile:nth-child(3) { left: calc(var(--tx, 0px) + var(--ts, 56px) * 2.45); transform: rotate(-1deg); }
html.phone .tile:nth-child(2) { left: calc(var(--tx, 0px) + var(--ts, 56px) * 1.1); } html.phone .tile:nth-child(3) { left: calc(var(--tx, 0px) + var(--ts, 56px) * 2.2); }

/* The script: the Product's real page, one sheet from lying on the table to held up to read, then turned over. */
.sheet { position: absolute; left: 0; top: 0; width: 1100px; height: 1424px; transform-origin: 0 0; z-index: 3; backface-visibility: hidden; }
.sheet-front { position: absolute; inset: 0; background: #fff; box-shadow: 0 0 0 1.5px rgba(51,54,59,.18), 0 18px 30px -12px rgba(60,35,10,.35); }
.sheet-front > img { display: block; width: 100%; height: 100%; }
/* The real script lies over the still's own drawing of it only once its page has loaded: never a blank sheet. */
html.living .sheet:not(.in) { visibility: hidden !important; }
/* The sheet's edge, seen as it passes edge-on in the turn: a thickness of white paper, the light from the window
   catching one side of it. */
.sheet-edge { position: absolute; left: 0; top: 0; width: 5px; height: 1424px; transform-origin: 0 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, #cfcabd, #fbfaf5 45%, #fff 60%, #ddd8cc); box-shadow: 0 0 0 .5px rgba(51,54,59,.25); }
/* The held script is a link: focused from the keyboard, a blue ring runs just inside the paper's own edge, so it shows
   on whatever part of the page is on screen. */
.sheet:focus { outline: none; }
.sheet:focus-visible .sheet-front::after { content: ""; position: absolute; inset: 10px; border: 12px solid var(--blue); border-radius: 6px; pointer-events: none; z-index: 1; }
.sheet .held { z-index: 2; }
/* Tapped to open the Product while its page's first picture is still coming: the script answers at once, washed in
   highlighter yellow, until the page opens (world.js, toProduct). */
.sheet.going .sheet-front::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(246,195,51,.3); mix-blend-mode: multiply; pointer-events: none; }
html.going, html.going .sheet { cursor: progress; }
.hl { position: absolute; left: 60px; top: 182px; width: 990px; height: 230px; background: rgba(246,195,51,.38); mix-blend-mode: multiply; border-radius: 6px 14px 10px 4px; opacity: 0; transform-origin: 0 0; }
.held { position: absolute; left: 0; top: 0; width: 1100px; height: 1424px; opacity: 0; }
.arm { position: absolute; }
/* The thumbs grip the bottom corners, in the paper's margins, clear of every line down to the last one. */
.arm-l { left: -232px; top: 1185px; width: 331px; height: 1031px; }
.arm-r { left: 1052px; top: 1182px; width: 326px; height: 1034px; }

/* Scene B: the table from above. Its own camera moves over one table in its units. */
/* It turns with the sheet as the sheet's back, so it pivots on the same axis: its transform starts from its own top
   left corner, as the sheet's does. */
.sceneB { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; overflow: clip; visibility: hidden; z-index: 1; backface-visibility: hidden; background: #fff; transform-origin: 0 0; }
.world.b-on .sceneB { visibility: visible; }
.table { position: absolute; left: 0; top: 0; width: 3072px; height: 2448px; transform-origin: 0 0; }

/* A week lifted off Sam's map, and the note the X answers with: real text on index cards. */
.spot-card { position: absolute; left: 0; top: 0; z-index: 6; width: 284px; padding: 12px 12px 8px; background: #fff; border: 1.5px solid var(--graphite); border-radius: 4px; box-shadow: 0 2px 0 rgba(51,54,59,.15); opacity: 0; transform: translateY(14px) rotate(0deg) scale(.96); transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease; pointer-events: none; }
.spot-card.up { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); box-shadow: 8px 14px 18px rgba(70,40,10,.28), 0 0 0 0 transparent; transition: opacity 220ms ease-out, transform 420ms cubic-bezier(.2,1.4,.4,1), box-shadow 420ms ease-out; pointer-events: auto; }
.sc-pic { position: relative; overflow: hidden; border-radius: 2px; }
.sc-pic img { position: absolute; max-width: none; }
.sc-t { margin: 8px 0 0; font-size: 18px; line-height: 24px; }
.sc-n { color: var(--red); margin-right: 6px; }
.sc-c { margin: 0; font-size: 16px; line-height: 22px; }
.sc-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sc-b { min-height: 40px; padding: 4px 12px; border: 1.5px solid var(--graphite); border-radius: 20px; background: #fff; color: var(--graphite); font: 700 15px/1 var(--font); cursor: pointer; }
.sc-b[data-d="1"] { margin-left: auto; }
/* Where the whole card won't fit the screen's height, the week lies on a wider, shorter card: its picture beside its
   name, the steps to its neighbours under both. */
.spot-card.sc-wide { display: grid; width: 300px; max-width: calc(100vw - 16px); grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "p t" "p c" "n n"; column-gap: 10px; align-items: start; padding: 8px 10px 6px; }
.sc-wide .sc-pic { grid-area: p; }
.sc-wide .sc-t { grid-area: t; margin: 0; font-size: 17px; line-height: 22px; }
.sc-wide .sc-c { grid-area: c; font-size: 15px; line-height: 20px; }
.sc-wide .sc-nav { grid-area: n; margin-top: 6px; }
.x-note { position: absolute; left: 0; top: 0; z-index: 6; margin: 0; padding: 12px 18px; background: #fff; border: 1.5px solid var(--graphite); border-radius: 4px; font: 700 19px/1.3 var(--font); box-shadow: 6px 6px 0 var(--manila); opacity: 0; pointer-events: none; white-space: nowrap; }
/* Paused, a week's card is simply there: nothing lifts or turns. */
html.paused .spot-card, html.paused .spot-card.up { transition: none; }
.spot:focus-visible, .x-btn:focus-visible, .riffle:focus-visible { outline: 8px solid var(--blue); }

/* The words that invite a tap belong to the living world only: held still, its pictures don't answer, so they never ask. */
.hint { display: none; }
html.world-on .hint { display: block; }

/* Until scene B's table and pages have loaded, the turned page shows the moment's own finished picture. */
/* The table itself stays out of sight until every page on it is ready, so a quick scroll never meets bare wood. */
/* Each still is shown only once it is a whole picture (world.js asks for it first); until then, the table's own wood. */
.sceneB.b-wait { background: #c98a4a 50% 50% / cover no-repeat; }
.sceneB.b-wait .table { visibility: hidden; }
.sceneB.b-wait[data-still="m3"] { background-image: url("../img/still/m3-desk.webp"); }
.sceneB.b-wait[data-still="m4"] { background-image: url("../img/still/m4-desk.webp"); }
.sceneB.b-wait[data-still="m5"] { background-image: url("../img/still/m5-desk.webp"); }
.sceneB.b-wait[data-still="m6"] { background-image: url("../img/still/m6-desk.webp"); }
.sceneB.b-wait[data-still="m7"] { background-image: url("../img/still/m7-desk.webp"); }
.sceneB.b-wait[data-still="m8"] { background-image: url("../img/still/m8-desk.webp"); }
html.phone .sceneB.b-wait[data-still="m3"] { background-image: url("../img/still/m3-phone.webp"); }
html.phone .sceneB.b-wait[data-still="m4"] { background-image: url("../img/still/m4-phone.webp"); }
html.phone .sceneB.b-wait[data-still="m5"] { background-image: url("../img/still/m5-phone.webp"); }
html.phone .sceneB.b-wait[data-still="m6"] { background-image: url("../img/still/m6-phone.webp"); }
html.phone .sceneB.b-wait[data-still="m7"] { background-image: url("../img/still/m7-phone.webp"); }
html.phone .sceneB.b-wait[data-still="m8"] { background-image: url("../img/still/m8-phone.webp"); }

/* The visitor's pause: the family's idle, Biscuit and Teddy's crayon hold still; taps and the scroll still answer. */
.calm-btn { display: none; }
html.world-on .calm-btn:not([hidden]) { display: inline-grid; place-items: center; position: fixed; z-index: 45; right: 18px; bottom: 18px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--graphite); background: var(--paper); color: var(--graphite); box-shadow: 3px 3px 0 var(--manila); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.calm-btn .i-play, .calm-btn[aria-pressed="true"] .i-pause { display: none; }
.calm-btn[aria-pressed="true"] .i-play { display: block; }
/* A tap on the paused picture marks the Play button for a moment: that is what starts it again. */
html.world-on .calm-btn.nudge { background: var(--yellow); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6.5px var(--graphite); }
html.world-on .calm-btn.in-bar:not([hidden]) { display: none; }
@media (max-width: 760px) {
  html.world-on .calm-btn:not([hidden]) { right: auto; left: 10px; bottom: auto; top: calc(var(--top-h) + 8px); width: 40px; height: 40px; }
  html.world-on.bar-on #calm { display: none; }
  html.world-on .calm-btn.in-bar:not([hidden]) { display: inline-grid; position: static; flex: none; }
}
/* On a phone wide enough, the pause sits in the header row beside the logo, so the offer card never passes under it. */
@media (min-width: 360px) and (max-width: 760px) {
  html.world-on #calm:not([hidden]) { left: 182px; top: 12px; }
}

/* Only the stage's own frame for films: the ?frame address hides the words. */
html.frame .hold, html.frame .top, html.frame .bar, html.frame .calm-btn { visibility: hidden !important; }