/* ============================ THEME TOKENS ============================
   Repaint the campaign here: the :root vars below + the display font in the
   Google Fonts <link>. Everything else derives from these.
   ====================================================================== */
/* FOURTEEN DOORS — Sienna & Sunset, from Leila's autumn swatches (2026-09-26).
     Language: flat print inks on warm stock. A sheet of numbered doors over a
     botanical print, cut open one day at a time. Bagel Fat One shouting,
     Fraunces reading, Archivo on every small label.
     One signature motion: day one's door swinging open in the hero.
     NOT in this campaign, and reserved for the Halloween one that follows it:
     the dark ground, candlelight, carved faces, anything lit from below. */
  :root{
    --sunset:#FFD29D; --sandy:#FFB563; --sienna:#882A0A; --olive:#918450;
    --stock:#F6E3C6; --card:#FDF1DE; --page:#FDF6EA;
    --ink:#4A2E1E; --dim:#8A6A54; --line:rgba(74,46,30,.16);
    /* measured: the sticky bar is 70px on a phone, 73px on a desktop */
    --stickyh:78px;
    --f-disp:"Bagel Fat One",Impact,system-ui,sans-serif;
    --f-body:"Fraunces",Georgia,serif;
    --f-lab:"Archivo",system-ui,sans-serif;
    /* aliases the shared activity-menu skins itself from */
    --navy:#882A0A; --green:#918450;
    --white:#fff; --mute:rgba(74,46,30,.62);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:var(--f-body);background:var(--page);color:var(--ink);display:flex;justify-content:center}
  .h5{position:relative;width:min(460px,100vw);background:var(--page);overflow:visible;min-height:100vh}

  /* ---------- preloader ---------- */
  /* Warm stock, not a dark field: the wordmark is drawn in dark brown ink and
     disappeared against sienna. The dark ground is also reserved for the
     Halloween campaign that follows this one — see config.js. */
  .preloader{position:fixed;inset:0;background:var(--sunset);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:transform .85s cubic-bezier(.76,0,.24,1)}
  .preloader.done{transform:translateY(-100%)}
  .pl-lockup{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.5vw,18px);padding:0 14px;max-width:100%}
  .pl-logo{height:clamp(24px,6.5vw,50px);width:auto;flex:0 0 auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
  .pl-x{font-family:var(--f-lab);font-weight:700;font-size:clamp(16px,4.5vw,30px);line-height:1;flex:0 0 auto;color:var(--sienna);opacity:.5;animation:plxin .5s ease .16s both}
  @keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.45;transform:none}}
  .pl-mark{font-family:var(--f-disp);color:var(--sienna);font-size:clamp(22px,6.4vw,48px);letter-spacing:.01em;line-height:1.3;padding-bottom:.06em;white-space:nowrap;flex:0 1 auto;
    clip-path:inset(0 100% 0 0);animation:plReveal 1.4s cubic-bezier(.76,0,.24,1) .15s forwards}
  @keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
  .pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:var(--f-lab);font-weight:700;color:rgba(136,42,10,.65);font-size:14px;letter-spacing:.14em}
  .pl-bar{position:absolute;bottom:0;left:0;height:4px;width:0;background:var(--sienna)}
  .pl-spider{position:absolute;bottom:7px;left:0;transform:translateX(-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(74,46,30,.35))}
  .pl-spider svg{display:block;width:30px;height:auto;animation:plsway 1.5s ease-in-out infinite alternate}
  @keyframes plsway{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

  /* reveal */
  .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

  /* ---------- top bar ---------- */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
  /* Where every campaign since summer puts it. It sits over the hero's
     gingham, so it carries its own stock ground rather than relying on
     whatever is behind it. */
  .tb-right{display:flex;align-items:center;gap:9px;z-index:21}
  .tb-link{font-family:var(--f-lab);font-size:10.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--sienna);text-decoration:none;background:var(--card);
    border:1.5px solid rgba(136,42,10,.32);padding:7px 11px;border-radius:999px;
    box-shadow:0 1px 0 rgba(74,46,30,.2)}
  .tb-link:hover{border-color:var(--sienna)}
  .tb-link:active{transform:translateY(1px);box-shadow:none}
  .tb-link[hidden]{display:none}
  .logo-img{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(74,46,30,.25))}

  /* ---------- hero ---------- */
  .hero{position:relative;height:78vh;height:78svh;min-height:580px;max-height:780px;overflow:hidden;background:var(--sunset)}
  /* GINGHAM, not the botanical print. The scrapbook is the busy thing in
     this section; a scattered print behind it fights the photographs. The
     print earns its keep where it is a reveal — the doors on the sheet and
     the divider strip — so it stays there and stays off the hero. */
  .heroprint{position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(90deg,rgba(168,70,42,.15) 0 15px,transparent 15px 30px),
      repeating-linear-gradient(0deg,rgba(168,70,42,.15) 0 15px,transparent 15px 30px)}
  .hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,210,157,0) 30%,rgba(255,210,157,.72) 58%,rgba(253,246,234,.96) 88%,var(--page) 100%)}
  .hero .content{position:absolute;left:0;right:0;bottom:28px;padding:0 22px;z-index:4}
  .eyebrow{font-family:var(--f-lab);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
  .hashtag{font-family:var(--f-disp);font-size:clamp(40px,12vw,66px);line-height:.95;margin:9px 0 7px;color:var(--sienna)}
  .tagline{font-size:clamp(15.5px,4.3vw,18px);color:var(--ink);margin-bottom:18px;line-height:1.45;max-width:24ch}
  .heroup{opacity:0;transform:translateY(26px)}
  body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes up{to{opacity:1;transform:none}}
  body.skip-intro .heroup{animation:none;opacity:1;transform:none}
  /* THE SIGNATURE MOTION — day one's door swings open on the sheet, and the
     copy waits for it. The door is drawn, never an image: the same print the
     calendar is cut from shows through the hole it leaves. */
  .collage{position:absolute;left:50%;top:clamp(50px,8vh,96px);transform:translateX(-50%);z-index:3;
    /* Also capped by viewport height: on a short phone the scrapbook would
       otherwise grow down into the copy. 38svh is the measured ceiling that
       clears the headline at 320x700 through 600x900 — re-measure it whenever
       the tagline gets longer, because that is what eats the room. */
    width:min(400px,90vw,38vh);width:min(400px,90vw,38svh);aspect-ratio:300/286}
  .cg-doodle{position:absolute;inset:0;width:100%;height:100%;color:var(--sandy);opacity:1;z-index:1}
  /* drawn ON the photographs, the way a sticker sheet gets used */
  .cg-star{position:absolute;width:26px;height:26px;background:var(--sandy);z-index:8;
    filter:drop-shadow(0 2px 2px rgba(74,46,30,.26));
    clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
  .cg-star.s1{left:1%;top:44%;width:28px;height:28px}
  .cg-star.s2{right:1%;top:47%;width:18px;height:18px;background:var(--sienna);opacity:.85}
  .cg-star.s3{left:38%;top:1%;width:22px;height:22px}
  /* the photographs, taped down at angles */
  .cg-ph{position:absolute;background:#FFFDF7;padding:9px 9px 30px;border-radius:2px;
    box-shadow:0 2px 0 rgba(74,46,30,.24),0 16px 28px -14px rgba(74,46,30,.65);
    opacity:0;transform:translateY(20px) rotate(0)}
  .cg-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1px}
  .cg-ph svg{display:block;width:100%;aspect-ratio:4/5;border-radius:1px}
  .cg-ph figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;
    font-family:var(--f-lab);font-weight:700;font-size:clamp(7px,2.2vw,10px);letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim)}
  /* The three overlap heavily — that IS the scrapbook — but a card may only
     cover another card's PHOTO, never its caption: the number is what ties a
     shot to a door. That is why the front card (p3) is the TOP one and the
     two behind it hang lower: their caption strips end below where p3 stops,
     so the overlap lands on picture every time. Spreading them apart to dodge
     this was the wrong fix and made the whole collage small.
     Re-check with the caption/box overlap measurement if these move. */
  .cg-ph.p1{left:0%;bottom:0%;width:47%;--rot:-6deg;z-index:4}
  .cg-ph.p2{right:0%;bottom:0%;width:45%;--rot:5deg;z-index:5}
  .cg-ph.p3{left:25%;top:3%;width:51%;--rot:-2deg;z-index:6}
  .cg-tape{position:absolute;left:50%;top:-11px;width:54px;height:20px;transform:translateX(-50%) rotate(-4deg);
    background:rgba(255,210,157,.85);box-shadow:inset 0 0 0 1px rgba(168,70,42,.2);z-index:2}
  .cg-tape.t2{left:14%;top:-9px;width:44px;transform:rotate(7deg)}
  /* Loose cut-outs taped around the photographs — the collage's small change.
     Every one of them sits on PICTURE, never on a caption: same rule as the
     cards, and the same measurement catches a breach. The cream halo is the
     die-cut edge a real sticker has. */
  .cg-sticker{position:absolute;z-index:8;pointer-events:none;
    opacity:0;transform:translateY(16px) rotate(0)}
  /* FLAT. No cream halo around them — a die-cut glow is not how a leaf laid
     on a photograph looks, and at this size it read as a smudge. Just the
     shadow of a thing resting on the page. */
  .cg-sticker svg{display:block;width:100%;height:auto;
    filter:drop-shadow(0 3px 3px rgba(74,46,30,.34))}
  .cg-sticker.sk-maple{right:-4%;top:52%;width:16%;--rot:17deg}
  .cg-sticker.sk-berries{left:17%;top:-4%;width:10%;--rot:-9deg}
  .cg-sticker.sk-bloom{right:24%;top:2%;width:11%;--rot:12deg}
  /* taped to the corner of the shut door, not out in the middle of a
     photograph, which is where it read as a smudge on the model */
  .cg-sticker.sk-gourd2{left:19%;top:29%;width:12%;--rot:9deg}
  .cg-sticker.sk-oak{right:-1%;top:11%;width:17%;--rot:-24deg}
  /* one door still shut, so the mechanic is in the picture too */
  .cg-door{position:absolute;left:0%;top:13%;width:26%;aspect-ratio:1;z-index:6;display:grid;place-items:center;
    align-content:center;background:var(--stock);border-radius:3px;opacity:0;transform:translateY(20px) rotate(0);--rot:-8deg;
    box-shadow:inset 0 0 0 2px rgba(74,46,30,.3),0 2px 0 rgba(74,46,30,.24),0 14px 24px -12px rgba(74,46,30,.6)}
  .cg-door b{font-family:var(--f-disp);font-weight:400;font-size:clamp(26px,7.5vw,38px);line-height:1;color:var(--sienna)}
  .cg-door i{font-style:normal;font-family:var(--f-lab);font-weight:700;font-size:6.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim);margin-top:3px}
  /* THE SIGNATURE MOTION — the page assembles itself, piece by piece, the way
     a scrapbook is actually made. Drawn, never an image of a collage. */
  /* ONE beat for the whole scrapbook. Piece-by-piece read as a slideshow of
     assets loading rather than as a page; the collage is one object, so it
     arrives as one. */
  body.ready.go .cg-ph,body.ready.go .cg-door,body.ready.go .cg-sticker{
    animation:paste .56s cubic-bezier(.22,.9,.28,1) .26s forwards}
  @keyframes paste{to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}}
  body.skip-intro .cg-ph,body.skip-intro .cg-door,body.skip-intro .cg-sticker{
    animation:none;opacity:1;transform:rotate(var(--rot,0deg))}

  body.ready.go .heroup.a2{animation-delay:1.15s}
  body.ready.go .heroup.a3{animation-delay:1.32s}
  body.ready.go .heroup.a4{animation-delay:1.48s}

  /* ---------- ticker ---------- */
  .ticker{background:var(--sienna);color:var(--sunset);overflow:hidden;white-space:nowrap;padding:10px 0;
    font-family:var(--f-lab);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .ticker span{display:inline-block;padding-left:100%;animation:tick 22s linear infinite}
  .ticker i{font-style:normal;color:var(--sandy);padding:0 10px}
  @keyframes tick{to{transform:translateX(-100%)}}

  /* ---------- sections ---------- */
  section{padding:46px 22px}
  .sec-eyebrow{display:block;font-family:var(--f-lab);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive);margin-bottom:10px}
  h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(30px,8.4vw,44px);line-height:1;color:var(--sienna);margin-bottom:14px}
  .lead{font-size:16.5px;color:var(--dim);line-height:1.55;margin-bottom:20px;max-width:56ch}
  .btn{display:block;width:100%;text-align:center;background:var(--sienna);color:var(--card);border:none;cursor:pointer;
    font-family:var(--f-disp);font-weight:400;font-size:17px;letter-spacing:.02em;padding:15px 20px;border-radius:4px;text-decoration:none;
    box-shadow:0 3px 0 rgba(74,46,30,.4);transition:transform .12s ease,box-shadow .12s ease}
  .btn:active,.btn.kicked{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,46,30,.4)}
  .btn.full{width:100%}
  .hero .btn{display:inline-block;width:auto;padding:13px 26px;background:var(--sienna);color:var(--card)}

  .proof{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border-radius:5px;padding:16px 18px;
    box-shadow:0 2px 0 rgba(74,46,30,.18)}
  .proof .num{font-family:var(--f-disp);font-size:34px;line-height:1;color:var(--sienna)}
  .proof .lbl{font-family:var(--f-lab);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
  .avs{display:flex}
  .avs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--card);margin-left:-11px}
  .avs img:first-child{margin-left:0}

  .steps{display:flex;flex-direction:column;gap:12px}
  .step{display:flex;gap:14px;background:var(--card);border-radius:5px;padding:16px 18px;box-shadow:0 2px 0 rgba(74,46,30,.16)}
  .step .n{font-family:var(--f-disp);font-size:26px;line-height:1;color:var(--sandy);flex:none}
  .step h3{font-family:var(--f-disp);font-weight:400;font-size:18px;color:var(--sienna);margin-bottom:3px}
  .step p{font-size:15.5px;color:var(--dim);line-height:1.5}

  /* Leila's gingham, drawn rather than loaded: two stripe passes over a warm
     ground give the three tones a gingham needs, and it is seamless at any
     width with nothing to fetch. Tones and the 30px cell are measured off her
     swatch (#F8D4A4 ground, #EDC396 single crossing, #E3B48A double).
     No rules top or bottom — the band is the edge. */
  .divider{height:150px;overflow:hidden;position:relative;border:0;
    background-color:#F8D4A4;
    background-image:
      repeating-linear-gradient(90deg,rgba(136,42,10,.095) 0 30px,transparent 30px 60px),
      repeating-linear-gradient(0deg,rgba(136,42,10,.095) 0 30px,transparent 30px 60px)}

  /* ---------- the rules card (#rules) ---------- */
  .reward{background:var(--card);border-radius:6px;padding:20px 20px 22px;box-shadow:0 3px 0 rgba(74,46,30,.3)}
  .rtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
  .rtitle{font-family:var(--f-disp);font-size:24px;line-height:1;color:var(--sienna)}
  .rtitle b{font-weight:400;color:var(--olive)}
  .rtoday{font-family:var(--f-lab);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right;line-height:1.7}
  .rtoday b{display:block;font-family:var(--f-disp);font-weight:400;font-size:22px;letter-spacing:0;color:var(--sienna)}
  .reqline{font-size:14px;color:var(--dim);line-height:1.5;margin:12px 0 16px}
  .reqline b{color:var(--sienna)}
  .ladder{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
  .track{display:none}
  .tier{display:flex;gap:12px;align-items:flex-start}
  .tier .dot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sienna);color:var(--card);
    font-family:var(--f-lab);font-weight:700;font-size:10px}
  .tier .info .w{font-family:var(--f-disp);font-size:16px;color:var(--ink);line-height:1.1}
  .tier .info .r{font-size:15px;color:var(--dim);line-height:1.45;margin-top:2px}
  .fine{font-size:13px;color:var(--dim);line-height:1.55;margin-top:16px}

  /* Inverted: the ground takes the old text colour and the text takes the old
     ground. The wordmark is drawn in dark brown ink, so on sienna it sank —
     on warm stock it reads at full strength with no card under it, and the
     page now ends on the same ground the loading screen opens on. */
  /* The sticky bar is fixed over the bottom of the page, and the bottom of
     the page is the footer — so the footer reserves its height. Without this
     the language picker sits under the bar with nowhere left to scroll, which
     reads as the page being broken rather than covered. */
  footer{background:var(--sunset);color:var(--sienna);text-align:center;
    padding:34px 22px calc(44px + var(--stickyh) + env(safe-area-inset-bottom,0px))}
  footer .fine{color:rgba(136,42,10,.72)}
  .lang{position:relative;display:inline-block;margin-top:18px}
  .lang-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(136,42,10,.08);color:var(--sienna);border:1px solid rgba(136,42,10,.28);border-radius:4px;padding:9px 15px;font-family:var(--f-lab);font-weight:500;font-size:12px;cursor:pointer}
  .lang-globe{font-size:14px;opacity:.85}
  .lang-chev{opacity:.6}
  .lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid rgba(136,42,10,.2);border-radius:5px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(74,46,30,.45);z-index:50}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:rgba(74,46,30,.82);font-family:var(--f-lab);font-size:12px;text-align:left;padding:9px 12px;border-radius:3px;cursor:pointer;white-space:nowrap}
  .lang-opt:hover{background:rgba(136,42,10,.1);color:var(--sienna)}
  .lang-opt.sel{color:var(--sienna);font-weight:700}


  /* the second button on day 14 reads as the quieter of the two */
  .btn.ghost{background:var(--card);color:var(--sienna);box-shadow:inset 0 0 0 2px var(--sienna)}
  .btn.ghost:disabled{opacity:.55;cursor:default}

  .day-acts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .day-acts .btn{margin:0}

  /* the three things you can do with the finished page, spaced as one group */
  .co-acts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .co-acts .btn{margin:0}
  .co-acts .co-peek{margin-top:2px}

  /* day 11 is the pick you can hear: the ear auditions, the word chooses */
  .day-optwrap{display:inline-flex;align-items:stretch}
  .day-opts.has-ear{display:flex;flex-wrap:wrap;gap:8px}
  .day-optwrap .day-opt{border-top-right-radius:0;border-bottom-right-radius:0}
  .day-ear{border:0;cursor:pointer;background:var(--sienna);color:var(--card);
    font-size:11px;line-height:1;padding:0 11px;border-radius:0 999px 999px 0;
    box-shadow:inset 1px 0 0 rgba(253,241,222,.35)}
  .day-ear:hover{filter:brightness(1.1)}
  .co-play{border:0;cursor:pointer}
  /* The waiting state on a make day. A generation takes about a minute and a
     disabled button reads as a broken one, so the pumpkin bobs for as long as
     the machine is working. Motion only — the label still carries the words. */
  .day-go.is-working{display:inline-flex;align-items:center;justify-content:center;gap:9px}
  .go-pump{flex:0 0 auto;width:17px;height:21px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-28 -42 56 70'%3E%3Cellipse cx='-12' cy='2' rx='12.5' ry='17.2' fill='%23E2913F'/%3E%3Cellipse cx='12' cy='2' rx='12.5' ry='17.2' fill='%23E2913F'/%3E%3Cellipse cx='0' cy='0' rx='18' ry='20' fill='%23E2913F'/%3E%3Cpath d='M0 -20 C1 -28 -5 -33 -11 -30' stroke='%236E7A3A' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    animation:goBob 1.05s ease-in-out infinite}
  @keyframes goBob{0%,100%{transform:translateY(1.5px) rotate(-6deg)}50%{transform:translateY(-2.5px) rotate(6deg)}}
  @media (prefers-reduced-motion:reduce){ .go-pump{animation:none} }
  .co-play.is-on{background:var(--olive)}

  /* asked before the page is shown, when they have no picture of their own */
  .co-ask{margin-top:14px;text-align:center}
  .co-ask p{font-size:15px;line-height:1.5;color:var(--dim);margin:0 0 14px;max-width:34ch;
    margin-inline:auto}
  .co-peek{display:block;margin:12px auto 0;background:none;border:0;cursor:pointer;
    font-family:var(--f-lab);font-weight:700;font-size:12px;letter-spacing:.06em;
    color:var(--dim);text-decoration:underline;text-underline-offset:3px}
  .co-peek:hover{color:var(--sienna)}

  /* ---------- day fourteen: the collage ---------- */
  /* One fixed layout. Only the drink tile and the two portrait tiles change
     between players, so the standard is set by us rather than by whoever had
     the best light that fortnight. Geometry is mirrored by the canvas bake in
     collage.js (GRID) — move a tile here, move it there. */
  .co-frame{position:relative;width:100%;max-width:340px;margin:16px auto 0;aspect-ratio:9/16;
    background:var(--card);border-radius:12px;overflow:hidden;
    box-shadow:0 3px 0 rgba(74,46,30,.2),0 26px 44px -22px rgba(74,46,30,.7)}
  .co-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);
    grid-template-rows:repeat(12,1fr);gap:0;filter:saturate(.88) contrast(1.02)}
  .co-t{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;background:var(--stock)}
  .co-t img{width:100%;height:100%;object-fit:cover;display:block}
  .co-drink {grid-column:1/4;grid-row:1/5}
  .co-path  {grid-column:4/7;grid-row:1/7}
  .co-wide  {grid-column:1/4;grid-row:5/9}
  .co-tall  {grid-column:4/7;grid-row:7/13}
  .co-picnic{grid-column:1/4;grid-row:9/13}
  .co-picnic img{animation:coDrift 14s ease-in-out infinite alternate}
  @keyframes coDrift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,-2%)}}

  .co-strip{position:absolute;z-index:5;background:var(--card);color:var(--ink);
    font-family:"Courier Prime","Courier New",monospace;
    box-shadow:0 2px 0 rgba(74,46,30,.22),0 10px 18px -12px rgba(74,46,30,.7)}
  .co-line{left:4%;right:4%;top:30.6%;padding:9px 10px;text-align:center;font-weight:700;
    font-size:clamp(11px,3.1vw,13px);transform:rotate(-.8deg)}
  .co-dates{right:5%;bottom:22.5%;padding:5px 8px;font-size:8.5px;letter-spacing:.08em;
    transform:rotate(-1.4deg)}

  .co-cut{position:absolute;z-index:6;pointer-events:none;
    filter:drop-shadow(0 3px 3px rgba(74,46,30,.4))}
  .co-cut svg{display:block;width:100%;height:auto}
  .co-maple{left:-4%;top:25%;width:21%;transform:rotate(-18deg)}
  .co-oak{right:-2%;top:56%;width:16%;transform:rotate(20deg)}
  .co-pump{left:37%;bottom:19%;width:14%;transform:rotate(-9deg)}

  .co-player{position:absolute;left:5%;right:5%;bottom:2.2%;z-index:7;
    background:rgba(253,241,222,.95);border-radius:9px;padding:8px 10px;
    display:flex;align-items:center;gap:9px;
    box-shadow:0 2px 0 rgba(74,46,30,.18),0 12px 22px -14px rgba(74,46,30,.8)}
  .co-cover{flex:0 0 auto;width:34px;height:34px;border-radius:4px;background:var(--sienna);
    display:grid;place-items:center;overflow:hidden}
  .co-cover svg{width:78%;height:78%;display:block}
  .co-meta{flex:1 1 auto;min-width:0}
  .co-ttl{display:block;font-family:var(--f-lab);font-weight:700;font-size:11.5px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .co-art{display:block;font-family:var(--f-lab);font-weight:500;font-size:9px;color:var(--dim);margin-top:1px}
  .co-bar{display:block;margin-top:5px;height:3px;border-radius:2px;background:rgba(74,46,30,.16);overflow:hidden}
  .co-bar i{display:block;height:100%;width:38%;background:var(--sienna);border-radius:2px}
  .co-play{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--sienna);
    display:grid;place-items:center}
  .co-play svg{width:9px;height:9px;display:block}

  /* The page assembles itself once. It is complete without this — the class
     only adds the delays — so a dropped animation still shows the collage. */
  .co-frame.is-playing .co-t,.co-frame.is-playing .co-strip,
  .co-frame.is-playing .co-cut,.co-frame.is-playing .co-player{
    animation:coIn .5s cubic-bezier(.2,.85,.25,1) both}
  .co-frame.is-playing .co-drink{animation-delay:.05s}
  .co-frame.is-playing .co-path{animation-delay:.16s}
  .co-frame.is-playing .co-wide{animation-delay:.27s}
  .co-frame.is-playing .co-tall{animation-delay:.38s}
  .co-frame.is-playing .co-picnic{animation-delay:.49s}
  .co-frame.is-playing .co-line{animation-delay:.66s}
  .co-frame.is-playing .co-dates{animation-delay:.76s}
  .co-frame.is-playing .co-maple{animation-delay:.86s}
  .co-frame.is-playing .co-oak{animation-delay:.94s}
  .co-frame.is-playing .co-pump{animation-delay:1.02s}
  .co-frame.is-playing .co-player{animation-delay:1.12s}
  @keyframes coIn{from{opacity:0;transform:scale(.9) translateY(12px)}}
  @media (prefers-reduced-motion:reduce){
    .co-picnic img{animation:none}
    .co-frame.is-playing .co-t,.co-frame.is-playing .co-strip,
    .co-frame.is-playing .co-cut,.co-frame.is-playing .co-player{animation:none}
  }

  .stickybar{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(110%);width:min(460px,100vw);z-index:40;
    background:var(--sienna);display:flex;align-items:center;gap:10px;transition:transform .3s ease;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    border-top:3px solid var(--ink)}
  .stickybar.show{transform:translateX(-50%) translateY(0)}
  .s-left{color:var(--sunset);font-family:var(--f-lab);font-weight:500;font-size:12px;line-height:1.4}
  .s-left b{display:block;font-family:var(--f-disp);font-weight:400;font-size:17px;letter-spacing:.02em}
  .stickybar .btn{width:auto;padding:11px 18px;font-size:15px;background:var(--sunset);color:var(--sienna)}

  .tb-right{display:flex;align-items:center;gap:9px}
  .share-wrap{position:relative}
  .share-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(74,46,30,.3);border:1px solid rgba(253,241,222,.35);border-radius:50%;color:var(--card);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
  .share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(74,46,30,.5);z-index:60}
  .share-menu[hidden]{display:none}
  .share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
  .share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--ink);font-family:var(--f-lab);font-size:13px;text-align:left;padding:10px 12px;border-radius:3px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
  .share-opt:hover{background:rgba(74,46,30,.07)}
  .share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--olive)}

  .auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
  .auth-modal[hidden]{display:none}
  .auth-backdrop{position:absolute;inset:0;background:rgba(74,30,12,.72);backdrop-filter:blur(6px)}
  .auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--card);color:var(--ink);border-radius:6px;padding:30px 26px 24px;text-align:center;
    box-shadow:0 4px 0 rgba(74,46,30,.4),0 20px 44px -14px rgba(0,0,0,.5);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
  .auth-x{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--dim);font-size:26px;line-height:1;cursor:pointer}
  .auth-logo{height:34px;width:auto;margin:0 auto 18px;display:block}
  .auth-title{font-family:var(--f-disp);font-size:21px;color:var(--sienna);margin-bottom:8px}
  .auth-body{font-size:14.5px;color:var(--dim);line-height:1.55;margin-bottom:22px}
  .btn.is-ended{background:var(--stock)!important;color:var(--dim)!important;box-shadow:none!important;cursor:default;pointer-events:none}

  @media (min-width:768px){
    .h5{width:100%}
    section{padding-top:78px;padding-bottom:78px;
      padding-left:max(6vw,calc((100% - 1040px) / 2));
      padding-right:max(6vw,calc((100% - 1040px) / 2))}
    h2{font-size:clamp(36px,4.2vw,54px)}
    .lead{font-size:17px}
    .hero{height:90vh;height:90svh;min-height:620px;max-height:none}
    /* Two columns on a wide screen: the scrapbook beside the copy rather than
       stacked on top of it, which is what made them collide. */
    .hero .content{left:max(6vw,calc((100% - 1060px) / 2));right:auto;transform:none;
      top:50%;bottom:auto;margin-top:-4vh;width:min(46vw,470px);max-width:none;padding:0}
    .collage{left:auto;right:max(6vw,calc((100% - 1060px) / 2));top:50%;transform:translateY(-50%);
      width:min(520px,44vw)}
    .hashtag{font-size:clamp(56px,7vw,104px)}
    .tagline{font-size:20px;max-width:34ch}
    .topbar{padding:22px}
    .logo-img{height:50px}
    .proof{max-width:560px;margin:0 auto}
    .steps{flex-direction:row;gap:16px}
    .step{flex:1;flex-direction:column;padding:24px}
    .divider{height:200px}
    .stickybar{width:auto;min-width:460px;max-width:720px;border-radius:6px;bottom:22px;padding:12px 14px 12px 22px;border:3px solid var(--ink)}
    footer{padding:56px 6vw calc(56px + var(--stickyh))}
  }
  @media (prefers-reduced-motion: reduce){
    .ticker span{animation:none;padding-left:0}
    .bd-leaf{animation:none!important;transform:rotateY(-78deg)}
    .pl-spider img{animation:none}
  }

  /* ---------- the sheet (block.js) ----------
     A printed sheet of numbered doors. Closed, it is one continuous botanical
     print cut into fourteen; each door carries its own slice, so the calendar
     reads as an uncut sheet rather than fourteen tiles side by side. */
  .sheet{background:var(--card);border-radius:6px;padding:16px;box-shadow:0 3px 0 rgba(74,46,30,.3),0 20px 38px -24px rgba(74,46,30,.55)}
  .sh-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;
    padding-bottom:9px}
  .sh-when{font-family:var(--f-disp);font-size:clamp(19px,5.4vw,28px);line-height:.95;color:var(--sienna)}
  .sh-keys{font-family:var(--f-lab);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    background:var(--olive);color:var(--card);border-radius:999px;padding:6px 12px}
  /* The question is prose and the action is a button, so they do not share a
     shape: a pill carrying both read as one long label nobody presses. The
     ask holds the left edge and drops out at four keys, when another one
     would not fit and asking would be a lie. */
  .sh-get{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
    border-bottom:2.5px solid var(--ink);padding-bottom:11px;margin-bottom:12px}
  .sh-ask{margin-right:auto;font-family:var(--f-body);font-size:13.5px;color:var(--dim)}
  .sh-ask:empty{display:none}
  .sh-invite{flex:0 0 auto;background:var(--sienna);color:var(--card);border:0;cursor:pointer;
    font-family:var(--f-lab);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    border-radius:5px;padding:9px 16px;box-shadow:0 2px 0 rgba(74,46,30,.4)}
  .sh-invite:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,46,30,.4)}
  /* Four across on a phone, not seven: seven 61px doors is a strip, and the
     numbers have nowhere to sit. Days thirteen and fourteen take the last row
     two-wide, so the grid never ends ragged and the finale gets the room it
     deserves. Seven across returns on desktop, where the sheet is a sheet. */
  .sh-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:3px;overflow:hidden;
    box-shadow:0 0 0 2px rgba(74,46,30,.3)}
  .sh-cell[data-day="13"],.sh-cell[data-day="14"]{grid-column:span 2;aspect-ratio:8/5}
  .sh-print{position:absolute;inset:0}
  .sh-print{overflow:hidden}
  .sh-print svg{width:100%;height:100%;display:block}
  /* taller than wide on a phone: seven across at 430px is a strip, and the
     numbers need somewhere to sit */
  .sh-cell{position:relative;aspect-ratio:1;perspective:800px;
    box-shadow:inset 0 0 0 1px rgba(74,46,30,.22)}
  .sh-door{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d}
  .sh-leaf{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;display:grid;place-items:center;
    background:var(--stock);box-shadow:inset 0 0 0 1.5px rgba(74,46,30,.26),4px 0 14px -6px rgba(74,46,30,.45);
    transition:transform .62s cubic-bezier(.25,.9,.3,1),box-shadow .62s ease}
  .sh-num{font-family:var(--f-disp);font-size:clamp(20px,5.4vw,26px);line-height:1;color:var(--sienna)}
  .sh-cap{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:none;white-space:nowrap;
    max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;
    font-family:var(--f-lab);font-weight:700;font-size:clamp(9px,2.5vw,11px);letter-spacing:.04em;text-transform:uppercase;
    background:rgba(40,22,12,.45);color:#FFF4E2;padding:2px 5px;border-radius:3px}
  .sh-cell.is-open .sh-leaf{transform:rotateY(-104deg);box-shadow:inset 0 0 0 1.5px rgba(74,46,30,.26),18px 0 26px -10px rgba(74,46,30,.6)}
  .sh-cell.is-open .sh-cap{display:none}
  .sh-cell.is-today .sh-leaf{box-shadow:inset 0 0 0 3px var(--sandy)}
  .sh-cell.is-today .sh-num{background:var(--sandy);color:var(--sienna);border-radius:999px;width:1.9em;height:1.9em;
    display:grid;place-items:center;text-shadow:none}
  .sh-cell.is-today .sh-leaf{animation:knock 2.6s ease-in-out infinite}
  @keyframes knock{0%,88%,100%{transform:rotateY(0)}92%{transform:rotateY(-12deg)}96%{transform:rotateY(-4deg)}}
  .sh-cell.is-missed .sh-leaf::after{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(136,42,10,.22) 5px 10px)}
  .sh-cell.is-missed .sh-num{color:rgba(136,42,10,.55)}
  .sh-cell.is-locked .sh-num{color:rgba(74,46,30,.55)}
  .sh-door:focus-visible .sh-leaf{outline:3px solid var(--sienna);outline-offset:-3px}
  .sh-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;
    font-family:var(--f-lab);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}


  /* the day it opens onto */
  .day{background:var(--card);border-left:4px solid var(--sandy);border-radius:0 5px 5px 0;padding:18px 18px 20px;margin-top:14px;
    box-shadow:0 2px 0 rgba(74,46,30,.2)}
  .day[hidden]{display:none}
  .day-hd{display:flex;gap:14px;align-items:flex-start}
  .day-n{font-family:var(--f-disp);font-size:40px;line-height:.85;color:var(--sandy);flex:none}
  .day-hd h3{font-family:var(--f-disp);font-weight:400;font-size:22px;line-height:1;color:var(--sienna)}
  .day-when{font-family:var(--f-lab);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:5px}
  .day-hint{font-size:15.5px;color:var(--dim);line-height:1.5;margin:12px 0 14px}
  .day-shot{border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(74,46,30,.25);margin-bottom:14px}
  .day-shot img{width:100%;display:block}
  .day-pick{background:var(--stock);border-radius:4px;padding:14px;text-align:center;margin-bottom:14px}
  .day-pick b{font-family:var(--f-disp);font-weight:400;font-size:22px;color:var(--sienna)}
  .day-opts{display:flex;flex-wrap:wrap;gap:7px}
  .day-opt{font-family:var(--f-lab);font-weight:500;font-size:14px;background:none;cursor:pointer;
    border:1.5px solid rgba(74,46,30,.3);border-radius:999px;padding:8px 13px;color:var(--ink)}
  .day-opt:hover{border-color:var(--sienna);background:var(--stock)}
  .sh-toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:9400;max-width:min(360px,88vw);
    background:var(--sienna);color:var(--card);border-radius:4px;padding:12px 16px;text-align:center;font-size:13.5px;line-height:1.45;
    box-shadow:0 18px 40px -14px rgba(74,46,30,.7)}
  .sh-toast[hidden]{display:none}
  @media (prefers-reduced-motion: reduce){
    .sh-leaf{transition:none}
    .sh-cell.is-today .sh-leaf{animation:none}
  }

  /* Desktop sheet. Deliberately at the END of the file: these override the
     mobile grid above, and a media query placed earlier loses to a later
     base rule of the same specificity — which is exactly how the seven-column
     sheet went missing the first time. */
  @media (min-width:768px){
    .sh-grid{grid-template-columns:repeat(7,1fr)}
    .sh-cell[data-day="13"],.sh-cell[data-day="14"]{grid-column:auto;aspect-ratio:1}
    .sh-cell.is-open .sh-cap{display:inline-block}
    .sheet{max-width:820px;margin:0 auto;padding:20px}
    .day{max-width:820px;margin-left:auto;margin-right:auto}
  }