/* Milky concept story. Colours measured from the retained packaging photographs
   (see BRAND-COLOUR.md); not official brand codes. */
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka-HebLatin.woff2") format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Heebo";src:url("fonts/Heebo-HebLatin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --purple:#5d2c71;          /* carton field, median of pack photos */
  --purple-deep:#43205a;     /* one tone step down, derived */
  --ink-on-yellow:#4d2363;   /* carton purple, deep percentile */
  --yellow:#fee536;          /* carton band yellow */
  --cream:#fff5e7;           /* whipped cream, studio material */
  --whip:#f4f8f9;
  --field:var(--purple);
  --head:var(--yellow);
  --text:var(--cream);
  --pad:clamp(20px,3.4vw,48px);
  --bar:72px;
  --display:clamp(2.55rem,1.1rem + 4.6vw,6rem);
  --lead:clamp(1.125rem,1rem + .35vw,1.3125rem);
  --small:.9375rem;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* scene.js pulls the desktop camera back by 1.44/aspect below 1.44:1 */
  --poster-x:.30;--poster-aspect:2.4;--poster-h:min(100vh,69.44vw);
}
html[data-field="yellow"]{--field:var(--yellow);--head:var(--ink-on-yellow);--text:var(--ink-on-yellow)}
/* Cream sweep / slow-load hold: the bar alone gets an opaque cream backing with purple ink,
   so it reads over any mix of purple field and moving cream. Page copy is untouched. */
html[data-field="finale"]{--field:var(--purple-deep);--head:var(--yellow);--text:var(--cream)}
html[data-field="finale"] .bar{background:var(--purple-deep)}
/* --whip is the rendered cream at the sweep, measured from the frame: the bar melts into it. */
html[data-field="cream"] .bar{--head:var(--ink-on-yellow);--text:var(--ink-on-yellow);background:var(--whip)}
html[data-field="cream"] .bar::after{content:"";position:absolute;inset:100% 0 auto;height:28px;background:linear-gradient(var(--whip),transparent);pointer-events:none}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--field);transition:background-color .25s ease;scrollbar-color:var(--yellow) var(--purple-deep);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 var(--lead)/1.5 "Heebo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--yellow);color:var(--purple)}
html[data-field="yellow"] ::selection{background:var(--purple);color:var(--yellow)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:999px}
html[data-field="yellow"] :focus-visible{outline-color:var(--ink-on-yellow)}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#player-live{position:fixed;top:0}  /* in flow at the end of body it added a band under the finale */

.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:20;background:var(--yellow);color:var(--purple);padding:12px 20px;border-radius:999px;font-weight:600;transform:translateY(-200%);transition:transform .2s var(--ease-out)}
.skip:focus{transform:none}

#scene{position:fixed;inset:0 0 auto 0;width:100%;height:100vh;height:100lvh;display:block;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s var(--ease-out)}
#scene.is-live{opacity:1}
#scene.is-swapping{opacity:0;transition-duration:.12s}

/* Bar: plain, colour follows the chapter */
.bar{position:fixed;top:0;inset-inline:0;z-index:10;height:var(--bar);transition:background-color .2s ease;display:flex;align-items:center;gap:20px;padding:0 var(--pad);color:var(--text);pointer-events:none}
.bar a{pointer-events:auto;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.bar__mark{font:600 1.75rem/1 "Fredoka",sans-serif;color:var(--head)}
.bar__note{font-size:var(--small);margin-inline-end:auto}
.bar__link{font-size:var(--small);font-weight:500}
.bar__link:hover{text-decoration:underline}

/* Story: each beat is a scroll span with one sticky frame; frames never overlap */
.story{position:relative;z-index:1;overflow-x:clip}  /* entrance offsets must never widen the layout */
.beat{position:relative;height:var(--h,190vh)}
.beat--hero{--h:175vh}
[data-beat="1"]{--h:170vh}
[data-beat="2"]{--h:190vh}
.beat--camps{--h:230vh}
.beat--yellow{--h:250vh}
[data-beat="5"]{--h:170vh}
[data-beat="6"]{--h:230vh}
.beat--stir{--h:300vh}
.beat--extra{--h:210vh}
.beat--double{--h:240vh}
.frame{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:calc(var(--bar) + 24px) var(--pad) clamp(28px,5vh,56px);pointer-events:none}
.copy{position:relative;z-index:1;pointer-events:auto;align-self:center}
/* Cold-load and no-WebGL still: our own t=0 WebGL render (tools/capture-poster.cjs).
   Scaled to the canvas height and moved by translation only, so it sits exactly where
   the live pack appears; removed once the canvas is live. */
.poster{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.poster img{position:absolute;width:auto;max-width:none;height:var(--poster-h);top:calc(50vh - var(--poster-h) / 2);top:calc(50lvh - var(--poster-h) / 2);left:calc(var(--poster-x) * 100% - var(--poster-aspect) * var(--poster-h) / 2)}
html.webgl-live .poster{display:none}
.copy > *{margin:0}
.display{font:600 var(--display)/1.02 "Fredoka",sans-serif;color:var(--head);text-wrap:balance;letter-spacing:0}
.lead{margin-top:clamp(18px,2.4vh,32px) !important;max-width:30ch;text-wrap:pretty;color:var(--text)}
html[data-field="yellow"] .lead{font-weight:500}

.copy--hero{grid-column:1 / span 6;align-self:center;margin-top:-4vh}
.copy--extract{grid-column:8 / span 5;align-self:end}
.copy--peel{grid-column:1 / span 5}
.copy--camps{grid-column:1 / -1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.copy--camps .display{max-width:16ch;margin-inline:auto}
.copy--bite-a{grid-column:7 / span 6}
.copy--pros{grid-column:1 / -1;align-self:start;text-align:center}
.copy--pros .lead{margin-inline:auto}
.copy--bite-b{grid-column:1 / span 6;align-self:start;margin-top:8vh}
.copy--stir{grid-column:1 / span 5;align-self:end;margin-bottom:4vh}
.copy--extra{grid-column:1 / span 6}
.copy--double{grid-column:7 / span 6}
.punch{margin-top:clamp(14px,2vh,24px) !important;font:600 clamp(1.7rem,1rem + 2.1vw,3rem)/1.08 "Fredoka",sans-serif;color:var(--text);text-wrap:balance;max-width:18ch}
.punch bdi{color:var(--head)}

/* Primary action */
.pill{display:inline-flex;align-items:center;gap:12px;min-height:56px;margin-top:clamp(24px,3.4vh,40px) !important;padding:0 28px;border-radius:999px;background:var(--yellow);color:var(--purple);font:600 1.25rem/1 "Fredoka",sans-serif;text-decoration:none;transition:transform .16s var(--ease-out),background-color .2s ease}
.pill:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pill:hover{background:var(--cream)}}
button.pill{border:0;cursor:pointer}
.pill__icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.note{margin-top:20px !important;max-width:34ch;font-size:var(--small)}

/* Camps */
.camps{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.camp-col{display:flex;flex-direction:column;align-items:center;gap:14px;padding-inline:12px}
.camp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;min-width:min(100%,250px);padding:0 30px;border:0;border-radius:999px;background:var(--cream);color:var(--purple);font:600 clamp(1.35rem,1rem + 1vw,1.9rem)/1 "Fredoka",sans-serif;cursor:pointer;transition:transform .16s var(--ease-out),background-color .25s ease,color .25s ease}
.camp:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.camp:hover{background:var(--yellow)}}
.camp[aria-pressed="true"]{background:var(--purple);color:var(--yellow)}
.camp__tick{width:0;height:26px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:width .25s var(--ease-out),opacity .2s ease}
.camp[aria-pressed="true"] .camp__tick{width:26px;opacity:1}
.camp-reply{min-height:3em;max-width:22ch;font-size:var(--lead);font-weight:500;color:var(--ink-on-yellow);opacity:0;transform:translateY(8px);transition:opacity .3s ease .2s,transform .4s var(--ease-out) .2s}
.camp-reply.is-shown{opacity:1;transform:none}
html.no-webgl .camp-reply{color:var(--cream)}

/* Close */
/* Hero actions: play the story (primary) or step in by hand */
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3.4vh,40px)}
.hero-actions .pill{margin-top:0 !important}
.pill--ghost{background:var(--cream)}
@media (hover:hover) and (pointer:fine){.pill--ghost:hover{background:var(--yellow)}}
.pill__icon--fill{fill:currentColor;stroke:none}
.hint{margin-top:14px !important;max-width:34ch;font-size:var(--small);color:var(--text)}

/* Finale: the close of the story, then contact. Purple-deep field, no cards. */
.finale{position:relative;z-index:2;background:var(--purple-deep);color:var(--cream);scroll-margin-top:0;
  padding:calc(var(--bar) + clamp(56px,9vh,120px)) var(--pad) clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(72px,11vh,140px)}
.finale__close{grid-column:1 / span 8;display:flex;flex-direction:column;align-items:flex-start}
.finale__title{margin:0;font:600 clamp(2.4rem,1.2rem + 4vw,5.25rem)/1.02 "Fredoka",sans-serif;color:var(--yellow);text-wrap:balance}
.finale__lead{margin:clamp(18px,2.4vh,28px) 0 0;max-width:40ch;font-size:var(--lead)}
.finale__close .pill{margin-top:clamp(24px,3.4vh,40px)}
.contact-grid{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:40px}
.lead__intro{grid-column:1 / span 5}
.lead__slot{grid-column:7 / span 6}
.lead__title{margin:0;font:600 clamp(2rem,1.1rem + 2.6vw,3.5rem)/1.05 "Fredoka",sans-serif;color:var(--yellow);text-wrap:balance}
.lead__lede{margin:20px 0 0;max-width:38ch}
.lead__links{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lead__links a{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--cream);text-decoration:none;font-weight:500;font-size:1.125rem}
.lead__links a:hover span:not(.sr-only){text-decoration:underline}
.lead__links svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lead__links svg .dot{fill:var(--yellow);stroke:none}
.tnum{font-variant-numeric:tabular-nums}
.lead__form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:500;font-size:1rem}
.field__opt{font-weight:400;opacity:.85}
.field input,.field textarea{font:inherit;font-size:1.0625rem;color:var(--purple);background:var(--cream);border:0;border-radius:18px;padding:14px 18px;min-height:52px;width:100%;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s ease}
.field textarea{resize:vertical;min-height:96px}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:18px}
.field [aria-invalid="true"]{box-shadow:inset 0 0 0 3px #ffb37a}
.field__err{margin:0;color:#ffd3a8;font-size:var(--small);font-weight:500}
.lead__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden}  /* hidden: unreachable by keyboard and by the page's own tap audit */
.lead__send{align-self:flex-start;margin-top:6px !important;border:0;cursor:pointer}
.lead__send[disabled]{opacity:.7;cursor:progress}
.lead__preview,.lead__note,.lead__fine{margin:0;font-size:var(--small);max-width:48ch}
.lead__note:empty{display:none}
.lead__note{font-weight:500}
.lead__wa{color:var(--yellow);font-weight:600}
.lead__done{padding:8px 0}
.lead__done h3{margin:0 0 10px;font:600 clamp(1.8rem,1.2rem + 1.6vw,2.6rem)/1.1 "Fredoka",sans-serif;color:var(--yellow)}
.lead__done p{margin:0;max-width:40ch}
.lead__done:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;border-radius:12px}
.finale__legal{grid-column:1 / -1;margin:0;font-size:var(--small);max-width:70ch;opacity:.9}

/* Player: one pill bar at the bottom, only while a play session exists */
.player{position:fixed;z-index:12;bottom:max(14px,env(safe-area-inset-bottom));inset-inline:0;margin-inline:auto;width:min(640px,calc(100% - 24px));
  display:flex;align-items:center;gap:12px;padding:8px;padding-inline-end:12px;border-radius:999px;background:var(--purple-deep);color:var(--cream);box-shadow:0 10px 30px rgba(36,9,47,.35)}
.player[hidden]{display:none}
.player__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;border:0;border-radius:999px;cursor:pointer;font:600 1rem/1 "Fredoka",sans-serif;transition:transform .16s var(--ease-out),background-color .2s ease}
.player__btn:active{transform:scale(.97)}
.player__btn svg{width:22px;height:22px}
.player__toggle{background:var(--yellow);color:var(--purple);padding:0 18px 0 16px}
.player__toggle svg{fill:currentColor}
.player__toggle .i-again{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.player__toggle .i-pause,.player__toggle .i-play,.player__toggle .i-again{display:none}
.player__toggle[data-state="playing"] .i-pause,.player__toggle[data-state="paused"] .i-play,.player__toggle[data-state="ended"] .i-again{display:block}
.player__icon{background:transparent;color:var(--cream)}
.player__icon svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.player__icon:hover{background:rgba(255,245,231,.14)}.player__toggle:hover{background:var(--cream)}}
.player__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.player__chapter{font-size:.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__track{height:6px;border-radius:999px;background:rgba(255,245,231,.22);overflow:hidden}
.player__fill{display:block;height:100%;background:var(--yellow);transform-origin:right center;transform:scaleX(0)}
.player__time{flex:none;font-size:.9375rem}
.player-on .frame{padding-bottom:calc(clamp(28px,5vh,56px) + 72px)}
.player-on .status{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 76px)}
.player-on .finale{padding-bottom:calc(clamp(40px,6vh,72px) + 80px)}
#h-pack:focus{outline:none}  /* focused programmatically after "back to start"; not a control */

.status{position:fixed;bottom:clamp(16px,3vh,28px);inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:11;margin:0;padding:10px 20px;border-radius:999px;background:var(--purple-deep);color:var(--cream);font-size:var(--small);opacity:0;transition:opacity .3s ease;pointer-events:none}
.status.is-shown{opacity:1}

/* Phone: its own vertical composition — copy on top, product in the lower half */
@media (max-width:759px),(max-aspect-ratio:4/5){
  :root{--poster-x:.5;--poster-aspect:1;--poster-h:100vh;--bar:60px;--display:clamp(2.2rem,1.2rem + 4.4vw,3.2rem)}
  .bar__mark{font-size:1.5rem}
  .frame{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--bar) + 8px)}
  .copy,.copy--hero,.copy--extract,.copy--peel,.copy--bite-a,.copy--pros,.copy--bite-b,.copy--stir,.copy--extra,.copy--double{grid-column:1;align-self:start;margin:0;text-align:start}
  .copy--pros{text-align:center}
  .copy--camps{align-self:stretch}
  .copy--bite-b{align-self:end;margin-bottom:2vh}
  .lead{max-width:34ch}
  .beat--hero{--h:160vh}[data-beat="1"]{--h:160vh}[data-beat="2"]{--h:180vh}.beat--camps{--h:210vh}.beat--yellow{--h:230vh}[data-beat="5"]{--h:160vh}[data-beat="6"]{--h:220vh}.beat--stir{--h:280vh}.beat--extra{--h:190vh}.beat--double{--h:220vh}
  .camp{min-width:0;width:100%;padding:0 16px}
  .camp-col{padding-inline:6px}
  .camp-reply{font-size:1.0625rem}
}
@media (max-width:759px){
  .finale{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .finale__close,.lead__intro,.lead__slot,.finale__legal{grid-column:1}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .player{gap:8px;padding-inline-end:8px}
  .player__time{display:none}
  .player__toggle{padding:0 14px}
  .hero-actions{gap:10px}
}
@media (max-width:380px){.player__toggle-text{display:none}.player__toggle{padding:0;width:48px}
:root{--display:2.05rem}.camp{font-size:1.25rem}}

@media (prefers-reduced-motion:reduce){
  html{transition:none}
  .pill,.camp,.camp__tick,.camp-reply,.skip,.player__btn{transition-duration:.01ms !important;transition-delay:0s !important}
  .camp-reply{transform:none}
  #scene{transition:opacity .18s linear}
}