/* ============================================================================
   SECTIONS — fifteen rooms. Same house, no two alike.
   ========================================================================== */

/* Text-split helpers used by motion.js.
   The mask needs slack on every side or script ascenders and descenders get
   guillotined; the matching negative margin keeps layout identical. */
.sp-mask{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.24em .05em .22em; margin:-.24em -.05em -.22em;
}
.sp-word{ display:inline-block; }
.sp-char{ display:inline-block; }

/* Generated SVG artwork always fills its frame. */
.art{ width:100%; height:100%; object-fit:cover; display:block; }


/* ══ 01 · HERO ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(5rem,11vh,7rem) clamp(4.5rem,9vh,6rem);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(255,236,208,.7), transparent 60%),
    radial-gradient(90% 70% at 88% 78%, rgba(244,220,215,.55), transparent 62%),
    linear-gradient(168deg,#FDFAF5 0%,#F7EFE3 46%,#EFE2D0 100%);
}
.hero__glow{
  position:absolute; inset:auto -10% -30% -10%; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,206,150,.45), transparent 70%);
  filter:blur(30px); pointer-events:none;
}
.hero__lights{ position:absolute; top:0; left:-4%; right:-4%; height:190px; pointer-events:none; z-index:3; }
.hero__props{ position:absolute; inset:0; pointer-events:none; z-index:1; }

.hero__grid{
  position:relative; z-index:4;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4.5vw,4.5rem);
  width:100%;
}
@media (max-width:920px){
  .hero{ padding-block:clamp(6.5rem,13vh,8rem) clamp(4rem,8vh,5.5rem); }
  .hero__grid{ grid-template-columns:1fr; gap:2.6rem; text-align:center; justify-items:center; }
}

/* The taped-up photograph. */
.hero__frame{
  position:relative;
  padding:15px 15px 68px;
  background:linear-gradient(166deg,#FFFDF9,#F6EFE3 62%,#EDE2D2);
  border-radius:4px;
  box-shadow:var(--sh-xl), inset 0 0 0 1px rgba(255,255,255,.72);
  transform:rotate(-2.1deg);
  width:min(620px,100%);
  justify-self:end;
}
@media (max-width:920px){ .hero__frame{ justify-self:center; transform:rotate(-1.4deg); } }
.hero__frame::after{
  content:''; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(150,116,90,.14);
}
.hero__photo{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  border-radius:2px;
  background:var(--sand);
  box-shadow:inset 0 2px 10px rgba(64,48,38,.3);
}
.hero__photo > *{ width:100%; height:100%; object-fit:cover; }
.hero__cap{
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.hero__cap .hand{ font-size:1.32rem; }

.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem; max-width:34rem; }
@media (max-width:920px){ .hero__copy{ align-items:center; } }
.hero__title{
  font-size:var(--t-mega);
  line-height:.96;
  color:var(--ink);
  margin-block:-.2rem 0;
}
/* Each line is its own block so the three lines stack like the reference,
   and so they can be staggered in one at a time. */
.hero__title span.ln-1,
.hero__title span.ln-2,
.hero__title span.ln-3{ display:block; }
.hero__title .ln-3{ color:var(--rose-deep); }
.hero__msg{
  font-family:var(--f-serif); font-weight:300;
  font-size:clamp(1.02rem,1.28vw,1.28rem); line-height:1.7;
  color:var(--ink-soft); max-width:38ch;
}
.hero__cue{ position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:5; }

/* Set dressing */
.hero-prop{ position:absolute; }
.hero-prop--candle{ left:3%; bottom:6%; width:clamp(46px,4.6vw,72px); }
.hero-prop--flowers-l{ left:-3%; top:8%; width:clamp(180px,20vw,330px); opacity:.95; }
.hero-prop--flowers-r{ right:-2%; bottom:-4%; width:clamp(170px,19vw,310px); transform:scaleX(-1); opacity:.9; }
.hero-prop--leaf-a{ right:24%; top:14%; }
.hero-prop--leaf-b{ left:30%; bottom:9%; }
@media (max-width:920px){ .hero-prop--flowers-l,.hero-prop--flowers-r{ opacity:.42; } .hero-prop--candle{ display:none; } }
.flame{ transform-origin:35px 39px; animation:flicker 2.6s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ transform:scale(1,1) translateX(0); opacity:.96 }
  28%    { transform:scale(.94,1.07) translateX(-.6px); opacity:1 }
  55%    { transform:scale(1.05,.95) translateX(.7px); opacity:.92 }
  78%    { transform:scale(.97,1.04) translateX(-.3px); opacity:1 }
}


/* ══ 02 · CHAPTER SELECTOR ════════════════════════════════════════════════ */
.chapters{
  --tear-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 1200'%3E%3Cpath fill='%23fff' d='M0 26 C60 12 120 34 190 22 C255 11 300 30 372 20 C440 11 490 32 560 24 C630 16 680 34 750 25 C820 16 875 33 944 23 C1010 14 1070 31 1140 21 C1170 17 1188 24 1200 20 L1200 1200 L0 1200 Z'/%3E%3C/svg%3E");
  background:linear-gradient(178deg,#FBF6EE,#F3E9DA);
  padding-top:calc(var(--sect) * .9);
  padding-bottom:calc(var(--sect) * .75);
  margin-top:-46px;
}
.chapters__head{ text-align:center; display:flex; flex-direction:column; gap:.55rem; align-items:center; margin-bottom:clamp(2.6rem,5vw,4.4rem); }
.chapters__title{
  font-family:var(--f-sans); font-size:clamp(1rem,1.3vw,1.24rem);
  font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--ink);
}
.chapters__sub{ font-size:1.02rem; color:var(--ink-faint); font-style:italic; }

.chapters__deck{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.7rem,1.3vw,1.3rem);
  align-items:end;
}
@media (max-width:1080px){ .chapters__deck{ grid-template-columns:repeat(3,1fr); gap:1.1rem; } }
@media (max-width:560px){  .chapters__deck{ grid-template-columns:repeat(2,1fr); } }

.chapter-card{
  position:relative; display:block; width:100%;
  padding:1.4rem .95rem 1.3rem;
  border-radius:var(--r-lg);
  background:linear-gradient(172deg,#FFFDFA,#F4EADA);
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(255,255,255,.85),
             0 0 0 1px color-mix(in oklab,var(--linen) 42%,transparent);
  text-align:center;
  /* no preserve-3d — the tilt writes its own perspective() */
  transition:box-shadow .5s var(--e-out), background .5s;
  isolation:isolate;
  /* staggered baseline — the deck should not sit on a ruler */
  margin-bottom:calc(var(--nudge,0) * 1px);
}
.chapter-card:nth-child(2n){ --nudge:14; }
.chapter-card:nth-child(3n){ --nudge:7; }
.chapter-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background-image:var(--paper-fibre); background-size:220px 220px;
  mix-blend-mode:multiply; opacity:.16;
}
.chapter-card::after{                                   /* rose glow on hover */
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-2;
  background:radial-gradient(70% 70% at 50% 0%, var(--blush), transparent 72%);
  opacity:0; transition:opacity .5s var(--e-out);
}
.chapter-card:hover::after{ opacity:1; }
.chapter-card:hover{ box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(255,255,255,.9); }
.chapter-card:focus-visible{ outline:2px solid var(--rose); outline-offset:5px; }

.chapter-card__n{
  display:block; font-size:.62rem; letter-spacing:.24em;
  color:var(--rose); margin-bottom:.85rem;
}
.chapter-card__icon{
  display:grid; place-items:center;
  width:clamp(48px,4vw,62px); aspect-ratio:1; margin:0 auto .85rem;
  border-radius:16px;
  background:linear-gradient(160deg,var(--blush),#F8E7E2);
  font-size:clamp(1.4rem,2vw,1.75rem); line-height:1;
  box-shadow:0 6px 14px -8px rgba(148,86,78,.5), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .55s var(--e-back);
}
.chapter-card:hover .chapter-card__icon{ transform:translateY(-4px) rotate(-6deg) scale(1.07); }
.chapter-card__title{ font-family:var(--f-script); font-size:1.42rem; color:var(--ink); line-height:1.08; }
.chapter-card__blurb{
  display:block;
  font-size:.7rem; line-height:1.5; color:var(--ink-faint);
  margin-top:.45rem; text-wrap:balance;
  opacity:.72; transition:opacity .4s var(--e-out), color .4s;
}
.chapter-card:hover .chapter-card__blurb{ opacity:1; color:var(--ink-soft); }
.chapter-card__lock{
  position:absolute; right:.7rem; top:.7rem; width:15px; opacity:.72;
}
.chapter-card.is-locked .chapter-card__icon{ filter:grayscale(.35) saturate(.7); }

.chapters__rail{ position:relative; margin-top:clamp(2rem,3.4vw,3rem); height:26px; }
.chapters__rail-line{
  position:absolute; left:4%; right:4%; top:12px; height:1px;
  background:repeating-linear-gradient(90deg,var(--linen) 0 5px,transparent 5px 10px);
  display:block;
}
.chapters__rail-line i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--rose); transition:width 1.1s var(--e-out); }
.chapters__rail-hearts{ position:absolute; inset:0; display:flex; justify-content:space-between; padding-inline:calc(4% - 7px); }
.chapters__rail-hearts svg{ transform:translateY(4px); }

.chapters__hint{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin-top:1.6rem; font-size:1.18rem; color:var(--brown-soft);
}


/* ══ 03 · OUR STORY ═══════════════════════════════════════════════════════ */
.story{ background:linear-gradient(178deg,#F3E9DA,#F6EEE2); overflow:hidden; }
.story__botanicals{ position:absolute; inset:0; pointer-events:none; }
.story-bot--l{ position:absolute; left:-5%; top:6%; width:clamp(160px,17vw,300px); opacity:.55; }
.story-bot--r{ position:absolute; right:-4%; bottom:2%; width:clamp(150px,16vw,280px); opacity:.5; transform:scaleX(-1); }

.story__grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
@media (max-width:1000px){ .story__grid{ grid-template-columns:1fr; } }
.story__intro{ display:flex; flex-direction:column; gap:1.15rem; }
.story__nav{ display:flex; align-items:center; gap:1.1rem; margin-top:.7rem; }
.story__arw{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-size:1.05rem;
  background:#FFFCF7; color:var(--rose-deep);
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(255,255,255,.8);
  transition:transform .35s var(--e-back), box-shadow .35s, color .3s;
}
.story__arw:hover{ transform:scale(1.12); box-shadow:var(--sh-md); color:var(--rose-ink); }
.story__arw:disabled{ opacity:.3; pointer-events:none; }
.story__count{ font-size:.66rem; letter-spacing:.22em; color:var(--ink-faint); }
.story__count b{ color:var(--rose-deep); font-weight:500; }

/* The book */
.book{ position:relative; perspective:2200px; }
.book__shadow{
  position:absolute; inset:auto 6% -26px 6%; height:44px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(84,58,44,.30), transparent 72%);
  filter:blur(9px);
}
.book__spread{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  aspect-ratio:16/10.4;
  border-radius:5px;
  background:linear-gradient(178deg,#FBF3E4,#F0E2CC);
  box-shadow:var(--sh-xl), inset 0 0 0 1px rgba(255,255,255,.6);
  overflow:hidden;
  transform-style:preserve-3d;
}
.book__spread::after{                       /* the gutter shadow — sells the fold */
  content:''; position:absolute; left:50%; top:0; bottom:0; width:78px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(122,91,75,.22) 42%,rgba(122,91,75,.30) 50%,rgba(122,91,75,.22) 58%,transparent);
  pointer-events:none; z-index:5;
}
.book__leaf{ position:relative; padding:clamp(1.1rem,2.2vw,2.1rem); }
.book__leaf--l{ display:grid; place-items:center; }
.book__pic{
  position:relative; width:90%;
  border-radius:2px; overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(84,58,44,.55), inset 0 0 0 7px #FDF8EE, 0 0 0 8px rgba(150,116,90,.16);
  transform:rotate(-1.3deg);
}
.book__pic > *{ width:100%; height:100%; object-fit:cover; }
.book__leaf--r{ display:flex; flex-direction:column; justify-content:center; gap:.9rem; padding-right:clamp(1.4rem,3vw,3rem); }
.book__ch{ font-family:var(--f-sans); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--rose-deep); }
.book__h{ font-family:var(--f-script); font-size:clamp(1.7rem,2.7vw,2.6rem); line-height:1.02; color:var(--ink); }
.book__b{ font-family:var(--f-serif); font-size:clamp(.95rem,1.05vw,1.06rem); line-height:1.62; color:var(--ink-soft); }
.book__note{ font-family:var(--f-hand); font-size:1.18rem; color:var(--rose-deep); transform:rotate(-1.6deg); margin-top:.3rem; }
/* Ruled lines behind body copy always land mid-x-height and read as a
   strike-through. A journal margin rule gives the same "this is a page"
   signal without touching a single word. */
.book__lines{
  position:absolute; inset:11% auto 11% 7%; width:2px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(214,150,142,.5) 18%,rgba(214,150,142,.5) 82%,transparent);
}
.book__lines::after{
  content:''; position:absolute; left:-3px; top:12%; bottom:12%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(150,116,90,.22),transparent);
}
.book__leaf--r{ isolation:isolate; padding-left:clamp(2rem,3.4vw,3.2rem); }
/* The page that turns */
.book__flip{
  position:absolute; top:0; bottom:0; left:50%; width:50%;
  transform-origin:left center; transform-style:preserve-3d;
  backface-visibility:hidden; pointer-events:none; z-index:6;
  background:linear-gradient(96deg,#FBF3E4,#F2E5D0);
  box-shadow:-10px 0 24px -10px rgba(84,58,44,.4);
  opacity:0;
}
@media (max-width:1000px){
  .book__spread{ aspect-ratio:auto; grid-template-columns:1fr; }
  .book__spread::after{ display:none; }
  .book__pic{ width:100%; }
  .book__leaf--r{ padding-bottom:2rem; }
}


/* ══ 04 · POLAROID GALLERY ════════════════════════════════════════════════ */
.gallery{ background:linear-gradient(178deg,#F6EEE2,#FAF7F2); overflow:hidden; }
.gallery__head{ display:flex; flex-direction:column; gap:1rem; max-width:34rem; margin-bottom:clamp(3.5rem,6vw,5.5rem); }

/* the washing line */
.line{ position:relative; padding-block:2.5rem 4.5rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.line__wire{ position:absolute; top:0; left:0; width:100%; height:90px; overflow:visible; }
.line__pegs{
  position:relative;
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.6rem,1.6vw,1.8rem);
  padding-inline:var(--gut);
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none;
  padding-bottom:1.5rem;
}
/* Same reason as the timeline: keep the line clear of the chapter index. */

.line__pegs::-webkit-scrollbar{ display:none; }
.line__pegs .hang{ position:relative; flex:0 0 auto; transform-origin:50% -18px; }
.line__pegs .polaroid{ --pol-w:clamp(132px,12.5vw,182px); }
/* Each hangs at its own angle and depth — a line, not a row. */
.hang:nth-child(6n+1){ transform:rotate(-2.6deg) translateY(6px); }
.hang:nth-child(6n+2){ transform:rotate(1.9deg)  translateY(22px); }
.hang:nth-child(6n+3){ transform:rotate(-1.2deg) translateY(31px); }
.hang:nth-child(6n+4){ transform:rotate(2.7deg)  translateY(25px); }
.hang:nth-child(6n+5){ transform:rotate(-2.1deg) translateY(12px); }
.hang:nth-child(6n)  { transform:rotate(1.4deg)  translateY(2px); }

/* the scattered table */
.scatter{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.2vw,2.2rem) clamp(.8rem,1.8vw,1.8rem);
  align-items:start;
}
.scatter .shot{ position:relative; display:flex; justify-content:center; }
/* Capped so the loose shots stay smaller than the ones on the line —
   things on the table read as further away. */
.scatter .polaroid{ --pol-w:100%; width:100%; max-width:236px; }
/* Deliberately uneven: spans and offsets break the grid into a collage. */
.scatter .shot:nth-child(1){ grid-column:1 / span 4; transform:rotate(-2.4deg); }
.scatter .shot:nth-child(2){ grid-column:5 / span 3; transform:rotate(1.7deg) translateY(46px); }
.scatter .shot:nth-child(3){ grid-column:8 / span 5; transform:rotate(-1.1deg) translateY(-14px); }
.scatter .shot:nth-child(4){ grid-column:2 / span 3; transform:rotate(2.3deg) translateY(26px); }
.scatter .shot:nth-child(5){ grid-column:5 / span 4; transform:rotate(-1.9deg) translateY(74px); }
.scatter .shot:nth-child(6){ grid-column:9 / span 3; transform:rotate(2.8deg) translateY(10px); }
@media (max-width:900px){
  .scatter{ grid-template-columns:repeat(6,1fr); }
  .scatter .shot:nth-child(1){ grid-column:1 / span 3; transform:rotate(-2deg); }
  .scatter .shot:nth-child(2){ grid-column:4 / span 3; transform:rotate(1.6deg) translateY(28px); }
  .scatter .shot:nth-child(3){ grid-column:1 / span 3; transform:rotate(-1deg); }
  .scatter .shot:nth-child(4){ grid-column:4 / span 3; transform:rotate(2deg) translateY(22px); }
  .scatter .shot:nth-child(5){ grid-column:1 / span 3; transform:rotate(-1.6deg); }
  .scatter .shot:nth-child(6){ grid-column:4 / span 3; transform:rotate(2.4deg) translateY(18px); }
}

/* lightbox */
.lb{ display:grid; gap:1.2rem; justify-items:center; }
.lb .polaroid{ --pol-w:min(560px,82vw); }
.lb .polaroid__win{ aspect-ratio:4/3; }
.lb__meta{ text-align:center; color:#F6EEE2; }
.lb__meta .hand{ font-size:1.5rem; color:#FBF3E6; }


/* ══ 05 · MINI GAMES ══════════════════════════════════════════════════════ */
.games{ background:linear-gradient(178deg,#FAF7F2,#F4EDE3); }
.games__head{ display:flex; flex-direction:column; gap:1rem; max-width:34rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
.games__deck{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,2.2rem); }
@media (max-width:880px){ .games__deck{ grid-template-columns:1fr; } }

.game-card{
  position:relative; padding:2rem 1.7rem 1.8rem;
  border-radius:var(--r-lg);
  background:linear-gradient(168deg,#FFFDF9,#F5ECDE);
  box-shadow:var(--sh-md), inset 0 0 0 1px rgba(255,255,255,.7);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem;
  transition:box-shadow .5s var(--e-out);
}
.game-card:nth-child(2){ margin-top:clamp(0px,2.4vw,32px); }
.game-card:hover{ box-shadow:var(--sh-lg); }
.game-card__art{
  width:76px; aspect-ratio:1; display:grid; place-items:center;
  border-radius:20px; font-size:2rem;
  background:linear-gradient(155deg,var(--blush),#FAEBE6);
  box-shadow:0 10px 20px -12px rgba(148,86,78,.55), inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom:.4rem;
}
.game-card__title{ font-family:var(--f-script); font-size:1.6rem; color:var(--ink); }
.game-card__blurb{ font-size:.86rem; color:var(--ink-faint); max-width:22ch; }
.game-card .btn{ margin-top:.9rem; }

/* ── shared game shell (inside the modal) ── */
.gm{
  width:min(700px,92vw); padding:clamp(1.5rem,3vw,2.4rem);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,#FFFDF8,#F4EBDD);
  box-shadow:var(--sh-xl);
}
.gm__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.gm__title{ font-family:var(--f-script); font-size:1.9rem; }
.gm__score{
  flex:0 1 auto;
  min-width:0;
  max-width:42%;
  overflow:hidden;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose-deep);
}
.gm__msg{ text-align:center; font-family:var(--f-hand); font-size:1.35rem; color:var(--rose-deep); min-height:1.6em; margin-top:1.1rem; }

/* memory match */
.mm{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.mm__c{ position:relative; aspect-ratio:3/4; perspective:800px; }
.mm__i{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .55s var(--e-out);
  border-radius:9px;
}
.mm__c.is-up .mm__i,.mm__c.is-done .mm__i{ transform:rotateY(180deg); }
.mm__f,.mm__b{
  position:absolute; inset:0; border-radius:9px; display:grid; place-items:center;
  backface-visibility:hidden; box-shadow:var(--sh-sm);
}
.mm__b{ background:linear-gradient(150deg,var(--rose),var(--rose-deep)); color:#FFF3EE; font-size:1.1rem; }
.mm__b::after{ content:'♡'; opacity:.65; }
.mm__f{ background:linear-gradient(160deg,#FFFDF8,#F2E6D4); transform:rotateY(180deg); font-size:1.7rem; }
.mm__c.is-done .mm__f{ background:linear-gradient(160deg,#EAF0E2,#DCE6CE); box-shadow:0 0 0 2px var(--sage) inset; }

/* guess the date */
.gd__pic{ width:100%; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-md); }
.gd__q{ font-family:var(--f-serif); font-size:1.3rem; text-align:center; margin:1.2rem 0 1rem; }
.gd__opts{ display:grid; gap:.6rem; }
.gd__opt{
  padding:.85rem 1.2rem; border-radius:var(--r-pill); text-align:left;
  background:#FFFCF6; box-shadow:inset 0 0 0 1px var(--rule), var(--sh-xs);
  transition:all .3s var(--e-out);
}
.gd__opt:hover{ box-shadow:inset 0 0 0 1px var(--rose), var(--sh-sm); transform:translateX(4px); }
.gd__opt.is-right{ background:#E9F0E1; box-shadow:inset 0 0 0 1.5px var(--sage-deep); }
.gd__opt.is-wrong{ background:#FBE9E6; box-shadow:inset 0 0 0 1.5px var(--rose); opacity:.7; }

/* love catcher */
.lc{ position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(178deg,#FBF3E6,#F0E0CE); box-shadow:inset 0 0 40px rgba(150,116,90,.18); cursor:grab; touch-action:none; user-select:none; }
.lc:active{ cursor:grabbing; }
.lc canvas{ width:100%; height:100%; display:block; }


/* ══ 06 · CINEMA ══════════════════════════════════════════════════════════ */
.cinema{ background:linear-gradient(178deg,#F4EDE3,#EFE6D9); }
.cinema__head{ display:flex; flex-direction:column; gap:1rem; max-width:34rem; margin-bottom:clamp(2.4rem,4.4vw,3.6rem); }

.theatre{
  position:relative; width:100%; aspect-ratio:21/9;
  border-radius:var(--r-lg); overflow:hidden;
  background:#1A0E10;
  box-shadow:var(--sh-xl), inset 0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width:760px){ .theatre{ aspect-ratio:16/10; } }
.theatre__house{ position:absolute; inset:0; }
.theatre__house > *{ width:100%; height:100%; object-fit:cover; }
.theatre__house video{ background:#000; }

.curtain{
  position:absolute; top:0; bottom:0; width:53%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 6px, rgba(255,255,255,.06) 14px, rgba(0,0,0,.30) 30px),
    linear-gradient(96deg,#8E2F38,#5E1C24 55%,#7A2730);
  box-shadow:inset -30px 0 50px rgba(0,0,0,.55);
  transition:transform 1.5s var(--e-soft);
  z-index:3;
}
.curtain--l{ left:0;  transform-origin:left center; }
.curtain--r{ right:0; transform-origin:right center; box-shadow:inset 30px 0 50px rgba(0,0,0,.55); }
.theatre.is-open .curtain--l{ transform:translateX(-101%) skewX(-3deg); }
.theatre.is-open .curtain--r{ transform:translateX(101%) skewX(3deg); }
.theatre__valance{
  position:absolute; top:0; left:0; right:0; height:15%;
  background:linear-gradient(178deg,#8E2F38,#6B222A);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  z-index:4;
  clip-path:polygon(0 0,100% 0,100% 52%,92% 100%,84% 52%,76% 100%,68% 52%,60% 100%,52% 52%,44% 100%,36% 52%,28% 100%,20% 52%,12% 100%,4% 52%,0 88%);
  transition:transform 1.2s var(--e-soft);
}
.theatre.is-open .theatre__valance{ transform:translateY(-102%); }

.theatre__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:6; width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(253,248,242,.92); color:var(--rose-ink);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
  transition:transform .45s var(--e-back), opacity .5s;
}
.theatre__play:hover{ transform:translate(-50%,-50%) scale(1.1); }
.theatre__play-tri{ font-size:1.5rem; margin-left:5px; }
.theatre__play-ring{
  position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(253,248,242,.5);
  animation:playPulse 2.6s var(--e-out) infinite;
}
@keyframes playPulse{ 0%{ transform:scale(.9); opacity:.8 } 100%{ transform:scale(1.35); opacity:0 } }
.theatre.is-playing .theatre__play{ opacity:0; pointer-events:none; }
.theatre__meta{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:6;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(253,248,242,.8); white-space:nowrap;
}

/* placeholder reel when no video file is supplied */
.reel{ position:relative; width:100%; height:100%; background:linear-gradient(160deg,#2A1A1C,#140C0E); overflow:hidden; }
.reel__frames{ position:absolute; inset:0; display:flex; }
.reel__frames > *{ flex:0 0 100%; height:100%; }
.reel__scratch{
  position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:repeating-linear-gradient(90deg,transparent 0 37px,rgba(255,255,255,.5) 37px 38px,transparent 38px 91px);
  animation:scratch .42s steps(3) infinite;
}
@keyframes scratch{ to{ transform:translateX(-91px) } }
.reel__cap{
  position:absolute; left:0; right:0; bottom:14%; text-align:center;
  font-family:var(--f-script); font-size:clamp(1.4rem,3vw,2.6rem); color:#FBF0E2;
  text-shadow:0 4px 20px rgba(0,0,0,.7);
}


/* ══ 07 · NIGHT SKY ═══════════════════════════════════════════════════════ */
.sky{
  position:relative; overflow:hidden;
  background:linear-gradient(178deg,#0B1020 0%,#131A30 42%,#1E2440 78%,#2A2438 100%);
  color:#EDE3D4;
  padding-block:clamp(7rem,15vh,12rem);
}
.sky__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sky__ridge{
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(178deg,transparent,#080C18 62%);
  clip-path:polygon(0 62%,6% 44%,13% 58%,21% 33%,29% 55%,38% 40%,47% 60%,56% 36%,65% 56%,74% 42%,84% 60%,92% 46%,100% 58%,100% 100%,0 100%);
}
.sky .eyebrow{ color:var(--gold-soft); }
.sky .eyebrow::before{ background:linear-gradient(90deg,transparent,var(--gold-soft)); }
.sky .t-1{ color:#F4EADB; }
.sky .lede{ color:#B6C0DC; }
.sky__hint{ color:rgba(226,206,168,.7); letter-spacing:.24em; }
.sky__grid{ position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:3rem; align-items:start; }
@media (max-width:960px){ .sky__grid{ grid-template-columns:1fr; } }
.sky__head{ position:relative; display:flex; flex-direction:column; gap:1rem; max-width:32rem; }
/* A breath of extra darkness behind the words so a star can never sit on a
   letterform. Invisible as an effect; entirely the point. */
.sky__head::before{
  content:''; position:absolute; inset:-2.5rem -4rem -2rem -3rem; z-index:-1;
  background:radial-gradient(58% 62% at 34% 46%, rgba(9,13,26,.82), transparent 72%);
  pointer-events:none;
}

/* The constellation lives in a band below the heading. The canvas maps its
   lines to this same box, so dots and lines always agree. */
.sky__stars{ position:absolute; inset:38% 5% 7% 5%; z-index:2; pointer-events:none; }
/* Stacked, the card would sit on top of the constellation. So on narrow
   screens the star band stops being an overlay and becomes a real row
   between the heading and the card. */
@media (max-width:960px){
  .sky__stars{
    position:relative; inset:auto; z-index:2;
    height:clamp(200px,28vh,280px); margin-block:.4rem 1rem;
  }
}
.star-hit{
  position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; pointer-events:auto; display:grid; place-items:center;
}
.star-hit i{
  width:7px; height:7px; border-radius:50%;
  background:#FFF4E2; display:block;
  box-shadow:0 0 10px 3px rgba(255,236,196,.8), 0 0 26px 9px rgba(255,214,150,.35);
  animation:starTwinkle 3.2s ease-in-out infinite;
  transition:transform .4s var(--e-back);
}
.star-hit:nth-child(2n) i{ animation-delay:-1.1s }
.star-hit:nth-child(3n) i{ animation-delay:-2.2s }
@keyframes starTwinkle{ 0%,100%{ opacity:.72; transform:scale(1) } 50%{ opacity:1; transform:scale(1.28) } }
.star-hit:hover i,.star-hit.is-on i{ transform:scale(2.1); box-shadow:0 0 18px 6px rgba(255,236,196,.95), 0 0 46px 16px rgba(255,196,120,.45); }
.star-hit::after{
  content:attr(data-label);
  position:absolute; top:26px; left:50%; transform:translateX(-50%) translateY(6px);
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,232,214,.9); white-space:nowrap; opacity:0;
  transition:opacity .35s, transform .35s var(--e-out); pointer-events:none;
}
.star-hit:hover::after,.star-hit.is-on::after{ opacity:1; transform:translateX(-50%) translateY(0); }

.sky__card{ position:relative; z-index:4; min-height:230px; }
.starcard{
  position:relative; padding:2rem 1.9rem 2.1rem;
  border-radius:var(--r-md);
  background:linear-gradient(168deg,rgba(250,246,238,.97),rgba(240,232,218,.94));
  box-shadow:var(--sh-xl);
  color:var(--ink);
  transform:rotate(-1.1deg);
}
.starcard__date{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rose-deep); }
.starcard__t{ font-family:var(--f-script); font-size:1.9rem; margin:.35rem 0 .7rem; }
.starcard__b{ font-family:var(--f-serif); font-size:1.02rem; line-height:1.62; color:var(--ink-soft); }
.starcard__pic{ width:100%; aspect-ratio:4/3; border-radius:6px; overflow:hidden; margin-bottom:1rem; box-shadow:var(--sh-sm); }
.sky__empty{
  font-family:var(--f-hand); font-size:1.3rem; color:rgba(226,206,168,.75);
  display:flex; align-items:center; gap:.7rem; padding-top:2rem;
}


/* ══ 08 · FUTURE / LOCKED ═════════════════════════════════════════════════ */
/* Dawn: the night sky lifts into morning paper. Warmed through violet and
   rose rather than dropped straight to cream, which just looks like a seam. */
.future{
  background:linear-gradient(178deg,
    #2A2438 0%, #4E3F4E 7%, #8A6A6A 14%, #C79C8C 21%,
    #E8C4AC 28%, #F3E0CC 38%, #F5EEE3 55%, #F5EEE3 100%);
}
.future__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,4rem); align-items:center; padding-top:clamp(3rem,8vw,7rem); }
@media (max-width:960px){ .future__grid{ grid-template-columns:1fr; } }
.future__intro{ display:flex; flex-direction:column; gap:1.1rem; }

.lockbox{ position:relative; }
.lockbox__face{
  position:relative;
  padding:clamp(2rem,3.4vw,3rem) clamp(1.6rem,3vw,2.6rem);
  border-radius:var(--r-md);
  background:linear-gradient(168deg,#FBF3E4,#EFE1CB);
  box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(255,255,255,.6);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  transform:rotate(.7deg);
}
.lockbox__face::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background-image:var(--paper-fibre); background-size:240px 240px;
  mix-blend-mode:multiply; opacity:.2; pointer-events:none;
}
.lockbox__lock{ width:56px; margin-bottom:.2rem; }
.lockbox__lock svg{ width:100%; }
.pad-shackle{ transform-origin:32px 34px; transition:transform .7s var(--e-back); }
.lockbox.is-open .pad-shackle{ transform:rotate(-26deg) translateY(-4px); }
.lockbox__slots{ display:flex; gap:.7rem; margin:.7rem 0 .3rem; }
.lockslot{
  width:46px; height:52px; border-radius:10px;
  display:grid; place-items:center; font-size:1.15rem;
  background:#FFFCF6; color:var(--rose);
  box-shadow:inset 0 0 0 1px var(--rule), var(--sh-xs);
  transition:transform .3s var(--e-back), box-shadow .3s, color .3s;
}
.lockslot.is-set{ color:var(--rose-deep); box-shadow:inset 0 0 0 1.5px var(--rose), var(--sh-sm); transform:translateY(-2px); }
.lockbox.is-wrong .lockbox__slots{ animation:shake .5s var(--e-out); }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
.lockbox__pad{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-top:.6rem; }
.padkey{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem;
  background:linear-gradient(160deg,#FFFDF8,#F2E7D6); color:var(--brown);
  box-shadow:var(--sh-xs), inset 0 0 0 1px rgba(255,255,255,.8);
  transition:transform .25s var(--e-back), box-shadow .25s, background .25s;
}
.padkey:hover{ transform:translateY(-3px) scale(1.06); box-shadow:var(--sh-sm); background:linear-gradient(160deg,#FFF,var(--blush)); }
.padkey:active{ transform:scale(.94); }
.padkey--fn{ font-size:.72rem; color:var(--rose-deep); }
.lockbox__help{ font-size:1.02rem; color:var(--brown-soft); margin-top:.7rem; }
.lockbox__won{ font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--rose-deep); text-align:center; margin-bottom:1.6rem; }

.bucket{ display:grid; gap:.6rem; }
.bucket li{
  display:flex; align-items:center; gap:.95rem;
  padding:.95rem 1.3rem; border-radius:var(--r-pill);
  background:linear-gradient(160deg,#FFFDF8,#F3EADB);
  box-shadow:var(--sh-xs), inset 0 0 0 1px rgba(255,255,255,.7);
  font-family:var(--f-serif); font-size:1.06rem; color:var(--ink-soft);
  transition:transform .4s var(--e-out), box-shadow .4s;
}
.bucket li:hover{ transform:translateX(6px); box-shadow:var(--sh-sm); }
.bucket .bi{ font-size:1.15rem; }
.bucket .bx{
  margin-left:auto; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:.7rem;
  box-shadow:inset 0 0 0 1.4px var(--rule); color:transparent;
}
.bucket li.done{ color:var(--ink-faint); }
.bucket li.done .bt{ text-decoration:line-through; text-decoration-color:var(--rose); text-decoration-thickness:1px; }
.bucket li.done .bx{ background:var(--sage); box-shadow:none; color:#FBF6EC; }


/* ══ 09 · LOVE COUNTER ════════════════════════════════════════════════════ */
.counter{ background:linear-gradient(178deg,#F5EEE3,#FAF7F2); }
/* The numbers get the wider half — "94,716,000" is a long word. */
.counter__grid{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(1.5rem,3vw,3rem); align-items:center; }
@media (max-width:960px){ .counter__grid{ grid-template-columns:1fr; } }
.counter__copy{ display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
.counter__nums{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.7rem,1.6vw,1.6rem); margin-block:.5rem;
}
@media (max-width:620px){ .counter__nums{ grid-template-columns:repeat(2,1fr); row-gap:1.4rem; } }
.counter__nums div{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.counter__nums dt{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(1.35rem,2.3vw,2.15rem); line-height:1;
  color:var(--rose-deep); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.counter__nums dd{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }

.counter__strip{ position:relative; display:flex; gap:.55rem; justify-content:flex-end; }
.counter__strip .polaroid{ --pol-w:clamp(78px,7vw,112px); }
.counter__strip .polaroid:nth-child(1){ transform:rotate(-4deg) translateY(10px); }
.counter__strip .polaroid:nth-child(2){ transform:rotate(2.4deg) translateY(-14px); }
.counter__strip .polaroid:nth-child(3){ transform:rotate(-1.6deg) translateY(20px); }
.counter__strip .polaroid:nth-child(4){ transform:rotate(3.2deg); }
@media (max-width:960px){ .counter__strip{ justify-content:center; } }


/* ══ 10 · LETTERS ═════════════════════════════════════════════════════════ */
.letters{ background:linear-gradient(178deg,#FAF7F2,#F4EBDE); }
.letters__head{ display:flex; flex-direction:column; gap:1rem; max-width:32rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
.letters__deck{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.9rem); }
@media (max-width:1000px){ .letters__deck{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .letters__deck{ grid-template-columns:1fr; } }

.env{
  position:relative; aspect-ratio:7/4.6;
  border-radius:7px; overflow:hidden;
  background:linear-gradient(168deg,#FBF3E2,#EFE1C8);
  box-shadow:var(--sh-md), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.env:nth-child(2n){ margin-top:clamp(0px,1.8vw,26px); }
.env:hover{ transform:translateY(-9px) rotate(-.8deg); box-shadow:var(--sh-lg); }
.env__flap{
  position:absolute; top:0; left:0; right:0; height:58%;
  background:linear-gradient(178deg,#F1E3C6 0%,#E2CFA8 62%,#D6C097 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  transition:transform .75s var(--e-out);
  z-index:3;
  filter:drop-shadow(0 3px 5px rgba(122,91,75,.30));
}
.env:hover .env__flap{ transform:rotateX(38deg); }
.env__body{ position:absolute; inset:0; z-index:2; }
.env__body::before,.env__body::after{
  content:''; position:absolute; bottom:0; width:56%; height:100%;
  background:linear-gradient(160deg,#FBF3E2,#F2E5CC);
}
.env__body::before{ left:0; clip-path:polygon(0 0,0 100%,100% 100%); }
.env__body::after{ right:0; clip-path:polygon(100% 0,100% 100%,0 100%); }
.env__seal{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:5;
  width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#D9877E,#B9736A 60%,#8E5049);
  display:grid; place-items:center; color:#FBEDE6;
  font-family:var(--f-script); font-size:1.1rem;
  box-shadow:0 6px 14px -6px rgba(94,44,38,.7);
  transition:transform .5s var(--e-back);
}
.env:hover .env__seal{ transform:translate(-50%,-50%) scale(1.12) rotate(-8deg); }
.env__for{
  position:absolute; left:0; right:0; bottom:11%; z-index:4; text-align:center;
  font-family:var(--f-hand); font-size:1.12rem; color:var(--brown);
  padding-inline:1rem;
}
.env__stamp{ position:absolute; right:8px; top:8px; z-index:6; width:38px; height:46px; opacity:.9;
  border-radius:2px; overflow:hidden; box-shadow:var(--sh-xs); transform:rotate(4deg); }
.env__stamp .art{ width:100%; height:100%; }

/* the opened letter */
.note-sheet{
  width:min(600px,90vw); padding:clamp(2.2rem,4vw,3.4rem) clamp(1.8rem,3.5vw,3rem);
  border-radius:4px;
  position:relative;
  /* ruled lines AND the paper, in one declaration — a separate
     background-image line here silently erases the colour beneath it */
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(150,116,90,.14) 31px 32px),
    linear-gradient(172deg,#FDF8EC,#F4E9D4);
  background-size:100% 32px, cover;
  box-shadow:var(--sh-xl);
}
.note-sheet::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,transparent,rgba(223,160,152,.5),transparent);
}
.note-sheet__for{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose-deep); }
.note-sheet__b{
  font-family:var(--f-hand); font-size:clamp(1.32rem,1.9vw,1.6rem); line-height:1.62;
  color:#4E3A30; margin:1.2rem 0 1.6rem;
}
.note-sheet__sign{ font-family:var(--f-script); font-size:1.7rem; color:var(--rose-deep); text-align:right; }


/* ══ 11 · PLAYLIST ════════════════════════════════════════════════════════ */
.playlist{ background:linear-gradient(178deg,#F4EBDE,#F7F1E8); }
.playlist__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4.5vw,5rem); align-items:center; }
@media (max-width:960px){ .playlist__grid{ grid-template-columns:1fr; } }
.playlist__left{ display:flex; flex-direction:column; gap:1.4rem; }
.playlist__left header{ display:flex; flex-direction:column; gap:.9rem; }

.turntable{ position:relative; width:min(340px,74vw); aspect-ratio:1; margin-top:.6rem; }
.turntable__case{
  position:absolute; inset:-6%;
  border-radius:22px;
  background:linear-gradient(160deg,#E8CFC6,#CE9B92 60%,#B57F77);
  box-shadow:var(--sh-lg), inset 0 2px 0 rgba(255,255,255,.4);
}
.turntable__case::after{
  content:''; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 40% 34%, rgba(255,255,255,.28), transparent 60%);
}
.vinyl{
  position:absolute; inset:6%; border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #1C1418 0 2px, #241A1E 2px 4px),
    #1C1418;
  box-shadow:0 14px 30px -12px rgba(40,20,16,.7), inset 0 0 40px rgba(0,0,0,.6);
  display:grid; place-items:center;
  animation:spin 3.4s linear infinite; animation-play-state:paused;
}
.vinyl::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,236,208,.14) 24deg, transparent 60deg, transparent 200deg, rgba(255,236,208,.10) 232deg, transparent 280deg);
}
.playlist.is-spinning .vinyl{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.vinyl__label{
  position:relative; z-index:2;
  width:36%; aspect-ratio:1; border-radius:50%;
  background:linear-gradient(160deg,var(--rose),var(--rose-deep));
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-script); font-size:.95rem; color:#FFF6F0; line-height:1.05;
  padding:.4rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.vinyl__label::after{ content:''; position:absolute; width:9%; aspect-ratio:1; border-radius:50%; background:#F7F1E8; }
.turntable__arm{
  position:absolute; right:-2%; top:8%; width:46%; height:8px;
  transform-origin:calc(100% - 12px) 50%; transform:rotate(-26deg);
  transition:transform .9s var(--e-out); z-index:3;
}
.turntable__arm::before{
  content:''; position:absolute; inset:0 26px 0 0; height:5px; top:50%; margin-top:-2.5px;
  background:linear-gradient(90deg,#F2EAE0,#C9BCB0); border-radius:3px;
  box-shadow:var(--sh-xs);
}
.turntable__arm::after{
  content:''; position:absolute; right:0; top:50%; width:26px; height:26px; margin-top:-13px;
  border-radius:50%; background:linear-gradient(160deg,#F2EAE0,#BCAFA2); box-shadow:var(--sh-sm);
}
.playlist.is-spinning .turntable__arm{ transform:rotate(-4deg); }

.playlist__wave{ display:flex; align-items:flex-end; gap:3px; height:34px; opacity:.55; }
.playlist__wave i{ width:3px; border-radius:2px; background:var(--rose); height:5px; transition:height .18s var(--e-out); }
.playlist__note{ text-transform:none; letter-spacing:.02em; font-size:.72rem; color:var(--ink-faint); max-width:32ch; }

.tracks{ display:grid; gap:.15rem; }
.track{
  position:relative; width:100%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem;
  padding:1.05rem .4rem 1.1rem;
  text-align:left;
  border-bottom:1px solid color-mix(in oklab,var(--linen) 55%,transparent);
  transition:padding-left .45s var(--e-out), color .35s;
}
.track:first-child{ border-top:1px solid color-mix(in oklab,var(--linen) 55%,transparent); }
.track:hover{ padding-left:1rem; }
.track::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--rose); transform:scaleY(0); transform-origin:center;
  transition:transform .45s var(--e-out);
}
.track:hover::before,.track.is-on::before{ transform:scaleY(.6); }
.track__n{ font-size:.6rem; letter-spacing:.16em; color:var(--ink-faint); width:1.4rem; }
.track__t{ font-family:var(--f-serif); font-size:1.18rem; color:var(--ink); line-height:1.2; }
.track__a{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.05em; }
.track__note{ font-family:var(--f-hand); font-size:1rem; color:var(--rose-deep); opacity:0; transition:opacity .4s; }
.track:hover .track__note{ opacity:1; }
.track__go{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--rose-deep); font-size:.7rem;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--rose) 45%,transparent);
  transition:background .35s, transform .35s var(--e-back);
}
.track:hover .track__go{ background:var(--blush); transform:scale(1.1); }
.track.is-on .track__t{ color:var(--rose-deep); }
.track.is-on .track__go{ background:var(--rose); color:#FFF6F0; }


/* ══ 12 · MEMORY MAP ══════════════════════════════════════════════════════ */
.memmap{ background:linear-gradient(178deg,#F7F1E8,#FAF7F2); }
.memmap__head{ display:flex; flex-direction:column; gap:1rem; max-width:32rem; margin-bottom:clamp(2.4rem,4.4vw,3.6rem); }
.memmap__sheet{
  position:relative; border-radius:var(--r-md); overflow:visible;
  box-shadow:var(--sh-lg);
  transform:rotate(-.5deg);
}
.memmap__paper{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:2/1; }
@media (max-width:760px){ .memmap__paper{ aspect-ratio:1/1.05; } }
.memmap__paper svg{ width:100%; height:100%; }
.memmap__pins{ position:absolute; inset:0; }
.pin{
  position:absolute; width:38px; height:46px; margin:-46px 0 0 -19px;
  display:grid; place-items:start center; z-index:4;
}
.pin i{
  display:block; width:26px; height:26px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:linear-gradient(150deg,var(--rose),var(--rose-deep));
  box-shadow:0 6px 12px -5px rgba(148,86,78,.8);
  transition:transform .4s var(--e-back);
}
.pin i::after{ content:''; position:absolute; left:9px; top:9px; width:8px; height:8px; border-radius:50%; background:#FBF3EC; }
.pin:hover i,.pin.is-on i{ transform:rotate(-45deg) scale(1.22) translateY(-2px); }
.pin::after{
  content:''; position:absolute; left:50%; bottom:-3px; width:16px; height:5px; margin-left:-8px;
  border-radius:50%; background:rgba(84,58,44,.28); filter:blur(2px);
}
.pin span{
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  font-family:var(--f-hand); font-size:1rem; color:var(--brown); white-space:nowrap;
  opacity:0; transition:opacity .35s;
}
.pin:hover span{ opacity:1; }

.memmap__card{ position:absolute; z-index:6; pointer-events:none; }
.mapcard{
  width:250px; padding:11px 11px 16px;
  background:linear-gradient(168deg,#FFFDFA,#F4EBDD);
  border-radius:4px; box-shadow:var(--sh-xl);
  transform:rotate(-2deg);
  pointer-events:auto;
}
.mapcard__pic{ aspect-ratio:4/3; border-radius:2px; overflow:hidden; box-shadow:inset 0 1px 6px rgba(64,48,38,.3); }
.mapcard__p{ font-family:var(--f-script); font-size:1.32rem; margin-top:.6rem; color:var(--ink); }
.mapcard__d{ font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-deep); }
.mapcard__t{ font-family:var(--f-hand); font-size:1rem; color:var(--brown-soft); margin-top:.35rem; line-height:1.35; }

@media (max-width:760px){
  .memmap__sheet{
    display:grid;
    gap:.9rem;
    overflow:visible;
    box-shadow:none;
  }
  .memmap__paper{
    box-shadow:var(--sh-lg);
  }
  .memmap__pins{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    aspect-ratio:1/1.05;
  }
  .memmap__card{
    position:relative;
    left:auto !important;
    top:auto !important;
    z-index:7;
    pointer-events:auto;
    display:grid;
    justify-items:center;
  }
  .mapcard{
    width:100%;
    max-width:280px;
    transform:none;
  }
  .mapcard__pic > img{
    max-height:220px;
  }
  .mapcard__p{ font-size:1.25rem; }
  .mapcard__t{
    font-size:1.05rem;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
}


/* ══ 13 · TIMELINE ════════════════════════════════════════════════════════ */
.timeline{ background:linear-gradient(178deg,#FAF7F2,#F4EDE3); overflow:hidden; }
.timeline__head{ display:flex; flex-direction:column; gap:1rem; max-width:32rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
.timeline__track{ position:relative; padding-block:1.5rem 1rem; --tl-gap:clamp(1.6rem,4vw,3.6rem); }
.timeline__row{
  display:flex; gap:var(--tl-gap);
  padding-inline:var(--gut);
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x proximity;
  scrollbar-width:none; padding-bottom:1rem;
}
/* Shrink the scroll viewport — not just its padding — so cards can never
   travel underneath the fixed chapter index. */

.timeline__row::-webkit-scrollbar{ display:none; }
.moment{ position:relative; flex:0 0 auto; width:clamp(150px,15vw,200px); scroll-snap-align:center; text-align:center; }

/* The connecting thread is drawn per-card and bled into the gutters, so it
   lines up with the dots exactly whatever height the photos end up. */
.moment__rail{ position:relative; height:11px; margin:1.5rem 0 .95rem; display:grid; place-items:center; }
.moment__rail::before{
  content:''; position:absolute; top:50%; height:1px;
  left:calc(-1 * var(--tl-gap) / 2 - 1px); right:calc(-1 * var(--tl-gap) / 2 - 1px);
  background:repeating-linear-gradient(90deg,var(--linen) 0 6px,transparent 6px 12px);
}
.moment:first-child .moment__rail::before{ left:0; }
.moment:last-child  .moment__rail::before{ right:0; }

/* Slim progress indicator under the row. */
.timeline__bar{
  position:relative; height:2px; margin:.6rem var(--gut) 0;
  background:color-mix(in oklab,var(--linen) 45%,transparent); border-radius:2px;
}

.timeline__bar i{
  position:absolute; inset:0 auto 0 0; width:14%; border-radius:2px;
  background:linear-gradient(90deg,var(--rose),var(--rose-deep));
  transition:width .18s linear, left .18s linear;
}
.moment .polaroid{ --pol-w:100%; width:100%; }
.moment:nth-child(2n) .polaroid{ transform:rotate(2.1deg); }
.moment:nth-child(2n+1) .polaroid{ transform:rotate(-1.7deg); }
.moment__dot{
  position:relative; z-index:2; width:11px; height:11px;
  border-radius:50%; background:var(--rose);
  box-shadow:0 0 0 5px var(--cream), 0 0 0 8px color-mix(in oklab,var(--blush) 70%,transparent);
}
.moment__l{ font-family:var(--f-script); font-size:1.3rem; color:var(--ink); line-height:1.1; }
.moment__d{ font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rose-deep); margin-top:.3rem; }
.moment__t{ font-family:var(--f-hand); font-size:1rem; color:var(--brown-soft); margin-top:.45rem; line-height:1.35; }


/* ══ 14 · LITTLE NOTES ════════════════════════════════════════════════════ */
.notes{ background:linear-gradient(178deg,#F4EDE3,#F7F1E8); }
.notes__head{ display:flex; flex-direction:column; gap:1rem; max-width:32rem; margin-bottom:clamp(2.6rem,5vw,4.2rem); }
.notes__wall{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.8rem);
}
@media (max-width:880px){ .notes__wall{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .notes__wall{ grid-template-columns:1fr; } }
.note{ position:relative; }
.note:nth-child(1){ transform:rotate(-2.2deg); }
.note:nth-child(2){ transform:rotate(1.5deg) translateY(24px); }
.note:nth-child(3){ transform:rotate(-1deg) translateY(-10px); }
.note:nth-child(4){ transform:rotate(2deg) translateY(14px); }
.note:nth-child(5){ transform:rotate(-1.7deg) translateY(-6px); }
.note:nth-child(6){ transform:rotate(1.2deg) translateY(20px); }


/* ══ 15 · FINALE ══════════════════════════════════════════════════════════ */
.finale{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(255,236,208,.6), transparent 62%),
    linear-gradient(178deg,#F7F1E8,#EFE2D0);
  padding-bottom:clamp(5rem,9vh,8rem);
}
.finale__botanicals{ position:absolute; inset:0; pointer-events:none; }
.finale-bot--l{ position:absolute; left:-6%; bottom:4%; width:clamp(170px,18vw,320px); opacity:.6; }
.finale-bot--r{ position:absolute; right:-5%; top:8%; width:clamp(160px,17vw,300px); opacity:.55; transform:scaleX(-1); }
.finale__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,4rem); align-items:center;
}
@media (max-width:960px){ .finale__grid{ grid-template-columns:1fr; } }
.finale__copy{ display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start; }
.finale__frame{
  position:relative; padding:14px 14px 18px;
  background:linear-gradient(166deg,#FFFDF9,#F3EADC);
  border-radius:4px; box-shadow:var(--sh-xl);
  transform:rotate(1.4deg);
}
.finale__screen{ position:relative; aspect-ratio:16/9; border-radius:2px; overflow:hidden; background:#1A1214; box-shadow:inset 0 2px 12px rgba(0,0,0,.5); }
.finale__screen > *{ width:100%; height:100%; object-fit:cover; }
.finale__quote{ grid-column:1 / -1; text-align:center; margin-top:clamp(3rem,6vw,5rem); }
.finale__quote p{
  font-size:clamp(1.7rem,3.6vw,3.4rem); line-height:1.18; color:var(--ink);
  max-width:22ch; margin-inline:auto;
}
.finale__quote footer{ margin-top:1.6rem; font-size:1.32rem; color:var(--rose-deep); }
.finale__seal{ width:82px; margin:clamp(2.6rem,5vw,4rem) auto 0; opacity:.94; transform:rotate(-6deg); }
.finale__seal svg{ width:100%; }
.finale__foot{
  text-align:center; margin-top:1.8rem;
  font-size:1.08rem; color:var(--brown-soft); opacity:.8;
}


/* ══ SHARED: reduced-motion & print ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .curtain,.theatre__valance{ transform:translateX(0) !important; }
  .theatre .curtain--l{ transform:translateX(-101%) !important; }
  .theatre .curtain--r{ transform:translateX(101%) !important; }
  .theatre__valance{ transform:translateY(-102%) !important; }
  .vinyl{ animation:none !important; }
}

/* ── PHOTO CROPPING IN WIDE FRAMES ──────────────────────────────────────────
   Phone photos are tall; these frames are wide. Cropping from the centre of a
   portrait shot lands on ceilings and walls, because the people are usually
   in the lower-middle of the frame. Bias the crop downward. A per-photo
   `focus` in data.js is written inline and still overrides this.
   ------------------------------------------------------------------------ */
.starcard__pic > *,
.mapcard__pic  > *,
.gd__pic       > *,
.finale__screen > img,
.reel__frames  > div > img{ object-position:50% 58%; }

/* Square-ish frames sit higher — faces land nearer the top there. */
.polaroid__win > img,
.book__pic     > img,
.moment .polaroid__win > img{ object-position:50% 42%; }

/* ── VIDEO LOCK ─────────────────────────────────────────────────────────── */
.vault{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.vault__lock{ width:52px; margin-bottom:.3rem; }
.vault__lock svg{ width:100%; }
.vault .lockbox__slots{ margin:.8rem 0 .2rem; }
.vault.is-wrong .lockbox__slots{ animation:shake .5s var(--e-out); }

/* ── THE FILM ───────────────────────────────────────────────────────────── */
.filmbox{
  width:min(880px,94vw);
  max-width:100%;
  overflow:hidden;
  background:linear-gradient(168deg,#FFFDF9,#F3EADC);
  padding:12px 12px 8px; border-radius:6px; box-shadow:var(--sh-xl);
}
.filmbox video{
  width:100%; min-width:0; max-height:74vh; display:block; border-radius:3px;
  background:#140F12; object-fit:contain;
}
.filmbox__cap{ text-align:center; font-size:1.1rem; padding:.6rem 0 .3rem; color:var(--rose-deep); }

/* ── PHONE-FIRST POLISH ───────────────────────────────────────────────────
   The site already stacks at tablet widths. Phones need a different rhythm:
   less chrome, fewer staggered offsets, and controls sized for thumbs. */
@media (max-width:560px){
  .section{
    padding-block:3.6rem;
    scroll-margin-top:4.75rem;
  }
  .section--tight{ padding-block:3rem; }
  .shell{ padding-inline:.95rem; }
  .eyebrow{ font-size:.58rem; letter-spacing:.22em; gap:.55em; }
  .eyebrow::before{ width:1.75rem; }
  .t-1{ font-size:2.15rem; }
  .t-2{ font-size:1.9rem; }
  .lede{ font-size:1rem; line-height:1.55; }

  .hero{
    min-height:100svh;
    padding-block:5.4rem 3.8rem;
  }
  .hero__grid{ gap:1.6rem; }
  .hero__copy{ gap:.9rem; }
  .hero__title{ font-size:3.25rem; }
  .hero__msg{ font-size:1rem; line-height:1.55; }
  .hero__frame{
    width:100%;
    padding:10px 10px 46px;
    transform:rotate(-.8deg);
  }
  .hero__cap{ bottom:10px; }
  .hero__cap .hand{ font-size:1.05rem; }
  .hero__cue{ bottom:1.15rem; }

  .chapters{ padding-top:3.8rem; margin-top:-24px; }
  .chapters__head,
  .gallery__head,
  .games__head,
  .cinema__head,
  .letters__head,
  .memmap__head,
  .timeline__head,
  .notes__head{ margin-bottom:1.8rem; }
  .chapters__deck{ grid-template-columns:1fr; gap:.75rem; }
  .chapter-card{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:.8rem;
    text-align:left;
    padding:1rem;
    margin-bottom:0;
  }
  .chapter-card__n{ grid-column:1; margin:0; }
  .chapter-card__icon{ grid-column:1; grid-row:2 / span 2; width:44px; margin:0; border-radius:12px; }
  .chapter-card__title{ grid-column:2; font-size:1.32rem; }
  .chapter-card__blurb{ grid-column:2; margin-top:.2rem; }
  .chapters__rail,
  .chapters__hint{ display:none; }

  .story__grid,
  .future__grid,
  .counter__grid,
  .playlist__grid,
  .finale__grid{ gap:1.7rem; }
  .story{ padding-bottom:4.6rem; }
  .gallery{ padding-top:4.4rem; }
  .book__spread{ border-radius:8px; }
  .book__leaf{ padding:1rem; }
  .book__leaf--r{ padding:1.05rem 1rem 1.35rem; gap:.65rem; }
  .book__h{ font-size:1.7rem; }
  .book__b{ font-size:.96rem; line-height:1.5; }
  .book__note{ font-size:1.02rem; }

  .line{ padding-block:1.4rem 2.4rem; }
  .line__pegs{ justify-content:flex-start; padding-inline:.95rem; }
  .scatter{ grid-template-columns:1fr; gap:1.25rem; }
  .scatter .shot:nth-child(n){
    grid-column:auto;
    transform:none;
  }
  .scatter .polaroid{ max-width:100%; }

  .game-card{
    padding:1.25rem 1rem;
    border-radius:var(--r-md);
  }
  .game-card:nth-child(2){ margin-top:0; }
  .game-card__art{ width:58px; border-radius:15px; font-size:1.55rem; }
  .game-card__title{ font-size:1.42rem; }

  .theatre{ aspect-ratio:4/3; border-radius:var(--r-md); }
  .theatre__play{ width:68px; height:68px; }
  .theatre__meta{ bottom:.8rem; font-size:.52rem; letter-spacing:.18em; }

  .sky__stars{ height:220px; }
  .starcard{ padding:1.25rem; }
  .future__grid{ padding-top:2.6rem; }
  .lockbox__face{ padding:1.35rem 1rem; }
  .lockbox__slots{ justify-content:center; gap:.45rem; }
  .lockslot{ width:40px; height:46px; }
  .padkey{ width:42px; height:42px; }

  .counter__nums{ gap:1rem .75rem; }
  .counter__nums dd{ letter-spacing:.16em; }
  .counter__strip{ display:none; }

  .env:nth-child(2n){ margin-top:0; }
  .turntable{ width:min(290px,82vw); margin-inline:auto; }
  .track{ gap:.75rem; padding:.85rem .2rem .9rem; }
  .track:hover{ padding-left:.2rem; }
  .track__t{ font-size:1.02rem; }

  .memmap__sheet{ transform:none; }
  .pin span{ display:none; }
  .mapcard{ width:100%; max-width:280px; }

  .timeline__track{ --tl-gap:1.15rem; }
  .timeline__row{ padding-inline:.95rem; }
  .moment{ width:164px; }

  .notes__wall{ gap:1rem; }
  .note:nth-child(n){ transform:none; }
  .finale__copy{ align-items:stretch; }
  .finale__frame{ transform:none; }
  .finale__quote p{ font-size:1.9rem; }
  .finale-bot--l,
  .finale-bot--r{ display:none; }
}

/* ── MODALS + GAMES ON SMALL SCREENS ────────────────────────────────────────
   The panel was sized for a desktop dialog: a fixed close button above the
   card (off-screen on a phone) and padding that left the games only ~250px
   to work with. Below 720px the sheet becomes full-width with the close
   control inside it.
   ------------------------------------------------------------------------ */
@media (max-width:720px){
  .modal{ padding:.75rem; place-items:center; }
  .modal__panel{
    width:100%;
    max-width:100%;
    max-height:calc(100svh - 1.5rem);
    display:grid;
    place-items:center;
    overflow:visible;
  }
  .modal__close{
    position:fixed; top:.7rem; right:.7rem; z-index:5;
    width:40px; height:40px; background:#FFFCF7; box-shadow:var(--sh-md);
  }
  .gm{ width:100%; max-height:calc(100svh - 4.8rem); overflow:auto; padding:1.1rem .9rem 1.15rem; border-radius:var(--r-md); }
  .gm__head{ margin-bottom:.9rem; }
  .gm__title{ font-size:1.45rem; }
  .gm__score{ max-width:38%; letter-spacing:.06em; font-size:.72rem; }
  .gm__msg{ font-size:1.28rem; line-height:1.25; margin-top:.8rem; }

  /* memory match — 3 columns reads far better than 4 on a narrow screen */
  .mm{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .mm__b{ font-size:.95rem; }
  .mm__f{ font-size:1.5rem; }

  .gd__q{ font-size:1.08rem; margin:.9rem 0 .8rem; }
  .gd__opt{ padding:.72rem .95rem; font-size:.95rem; }
  .lc{ aspect-ratio:4/5; max-height:58svh; }

  .note-sheet{ width:100%; padding:1.8rem 1.2rem; }
  .note-sheet__b{ font-size:1.22rem; }
  .lb .polaroid{ --pol-w:100%; }
  .filmbox{ width:100%; padding:8px 8px 6px; }
  .filmbox video{ max-height:calc(100svh - 6.8rem); }
  .filmbox__cap{ font-size:1rem; padding:.45rem .25rem .2rem; }

  /* the code pad */
  .vault{ padding:1.2rem .8rem; }
  .lockbox__pad{ grid-template-columns:repeat(5,1fr); gap:.4rem; }
  .padkey{ width:100%; aspect-ratio:1; height:auto; }
  .lockslot{ width:38px; height:44px; }
}

/* ══ SHOW THE WHOLE PHOTO ══════════════════════════════════════════════════
   Everything above tried to pick a better crop. That was the wrong problem:
   object-fit:cover throws away whatever falls outside a fixed frame, so a
   tall phone photo in a square or 16:9 window loses most of itself no matter
   where the crop is centred.

   So the frames stop being fixed shapes. Each one takes the aspect of the
   photo inside it, and nothing is cut off at all.
   ======================================================================== */

/* polaroids — a tall photo simply makes a tall print, like it would in life */
.polaroid__win{ aspect-ratio:auto; background:#EFE7DA; }
.polaroid__win > img{
  width:100%; height:auto; object-fit:contain; object-position:center;
  display:block;
}
/* generated scenes keep their own shape */
.polaroid__win > svg,
.polaroid__win > img.art{ aspect-ratio:1/1; height:auto; object-fit:cover; }

/* the cards */
.starcard__pic,
.mapcard__pic,
.gd__pic,
.book__pic{ aspect-ratio:auto; background:#EFE7DA; }

.starcard__pic > img,
.mapcard__pic  > img,
.gd__pic       > img,
.book__pic     > img{
  width:100%; height:auto; object-fit:contain; object-position:center;
  display:block;
}
/* keep the tall ones from running off the screen */
.starcard__pic > img{ max-height:44vh; width:auto; margin-inline:auto; }
.gd__pic       > img{ max-height:40vh; width:auto; margin-inline:auto; }
.mapcard__pic  > img{ max-height:38vh; width:auto; margin-inline:auto; }
.book__pic     > img{ max-height:52vh; width:auto; margin-inline:auto; }

/* hero + finale keep their frame, but letterbox onto paper instead of cropping */
.hero__photo,
.finale__screen{ background:#EFE7DA; }
.hero__photo   > img{ object-fit:contain; }
.finale__screen > img{ object-fit:contain; }

/* the map card is absolutely placed — let it size to its photo */
.mapcard{ width:min(260px,74vw); }
@media (max-width:760px){ .mapcard{ width:100%; max-width:280px; } }