/* Homepage hero, v21. Layout and chrome only; brand tokens come from /brand-v05.css. */
#savor-story{position:relative;background:var(--paper)}
#savor-story #journey{position:relative;height:950svh}
#savor-story .stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:var(--paper)}
#savor-story #canvasHost{position:absolute;inset:0;z-index:0}
#savor-story canvas{display:block;width:100%;height:100%;touch-action:pan-y}
#savor-story .vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,rgba(246,240,228,.94) 30%,rgba(246,240,228,0) 54%)}

/* Opening and chapter copy share one column */
#savor-story .hero-open,#savor-story .hero-chapters>li{position:absolute;z-index:3;left:var(--gutter);top:calc(var(--header-h) + clamp(32px,9vh,120px));width:min(560px,40vw)}
#savor-story .hero-open h1{font-size:clamp(48px,5.6vw,96px);line-height:1;margin-bottom:var(--s3)}
#savor-story .hero-lead{font-size:var(--fs-lead);line-height:1.5;max-width:30ch;margin-bottom:var(--s4)}
#savor-story .hero-doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:520px}
#savor-story .door{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--s2) 44px var(--s2) var(--s2);background:var(--white);border:1px solid var(--line);transition:border-color var(--dur-feedback) ease,transform 160ms var(--ease-out),background-color var(--dur-feedback) ease}
#savor-story .door:active{transform:scale(.98)}
#savor-story .door-kicker{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text)}
#savor-story .door-title{font:600 clamp(19px,1.5vw,22px)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance}
#savor-story .door-arrow{position:absolute;right:var(--s2);top:50%;translate:0 -50%;font-size:20px;transition:transform 260ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){#savor-story .door:hover{border-color:var(--ink)}#savor-story .door:hover .door-arrow{transform:translateX(4px)}}
#savor-story .hero-quiet{margin-top:var(--s2)}
#savor-story .hero-chapters{list-style:none;padding:0;margin:0}
#savor-story .hero-chapters>li{visibility:hidden;pointer-events:none}
#savor-story .hero-chapters>li.is-active{visibility:visible;pointer-events:auto}
#savor-story .hero-chapters h2{font-size:clamp(36px,3.8vw,64px);line-height:1.02;margin-bottom:var(--s3)}
#savor-story .hero-chapters p:not(.eyebrow){font-size:var(--fs-body);line-height:1.55;max-width:34ch}
#savor-story .hero-chapters .hero-doors{margin-top:var(--s4)}
#savor-story .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
#savor-story .w>span{display:inline-block}

/* Rail: cue and seven named stops */
#savor-story .hero-rail{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:clamp(16px,3vh,32px);display:flex;flex-direction:column;gap:var(--s2)}
#savor-story .hero-cue{display:flex;align-items:center;gap:12px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#savor-story .cue-line{position:relative;display:block;width:1px;height:28px;background:var(--line);overflow:hidden}
#savor-story .cue-line::after{content:'';position:absolute;inset:0;background:var(--red);transform-origin:top;animation:cue 2.4s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}41%{transform-origin:bottom}80%,100%{transform:scaleY(0);transform-origin:bottom}}
#savor-story .hero-stops{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#savor-story .hero-stops button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding-top:8px;text-align:left;font-size:var(--fs-micro);font-weight:600;color:var(--muted);transition:color var(--dur-feedback) ease}
#savor-story .stop-bar{display:block;width:100%;height:2px;background:var(--line);overflow:hidden}
#savor-story .stop-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
#savor-story .hero-stops button.is-active{color:var(--ink);font-weight:700}
@media(hover:hover) and (pointer:fine){#savor-story .hero-stops button:hover{color:var(--red-text)}}
#savor-story .hero-loading{position:absolute;z-index:4;right:var(--gutter);top:calc(var(--header-h) + 16px);font-size:var(--fs-micro);color:var(--muted)}
#savor-story .hero-static{display:none}

/* Handoff: the next section slides up over the held final frame */
.home .doors-section{margin-top:-45svh;box-shadow:0 -24px 40px -28px rgba(41,40,32,.25)}

/* Static view: no JS or no WebGL. All chapter copy becomes a readable list. */
.no-js #savor-story #journey,#savor-story.is-static #journey{height:auto}
.no-js #savor-story .stage,#savor-story.is-static .stage{position:relative;height:auto;padding:calc(var(--header-h) + var(--s6)) var(--gutter) var(--s6)}
.no-js #savor-story .hero-open,.no-js #savor-story .hero-chapters>li,#savor-story.is-static .hero-open,#savor-story.is-static .hero-chapters>li{position:static;width:auto;max-width:640px;visibility:visible}
.no-js #savor-story .hero-chapters,#savor-story.is-static .hero-chapters{display:grid;gap:var(--s5);margin-top:var(--s6)}
.no-js #savor-story .hero-chapters h2,#savor-story.is-static .hero-chapters h2{font-size:var(--fs-h3)}
.no-js #savor-story .hero-static,#savor-story.is-static .hero-static{display:block;max-width:720px;margin-top:var(--s6)}
.no-js #savor-story :is(#canvasHost,.vignette,.hero-rail,.hero-loading),#savor-story.is-static :is(#canvasHost,.vignette,.hero-rail,.hero-loading){display:none}
.no-js .home .doors-section,.home #savor-story.is-static~.doors-section{margin-top:0}

/* Portrait and phones: copy on top, scene below */
@media(max-width:700px),(max-aspect-ratio:11/10){
  #savor-story #journey{height:1000svh}
  #savor-story .vignette{background:linear-gradient(180deg,var(--paper) 0%,rgba(246,240,228,.95) 40%,rgba(246,240,228,0) 56%)}
  #savor-story .hero-open,#savor-story .hero-chapters>li{top:calc(var(--header-h) + var(--s3));left:var(--gutter);right:var(--gutter);width:auto}
  #savor-story .hero-open .eyebrow{margin-bottom:var(--s2)}
  #savor-story .eyebrow-brand{display:none}
  #savor-story .hero-open h1{font-size:clamp(38px,10vw,56px);margin-bottom:var(--s2)}
  #savor-story .hero-lead{font-size:var(--fs-body);line-height:1.45;margin-bottom:var(--s3)}
  #savor-story .hero-doors{gap:var(--s1)}
  #savor-story .door{padding:10px 30px 10px 12px}
  #savor-story .door-title{font-size:17px}
  #savor-story .door-arrow{right:10px;font-size:17px}
  #savor-story .hero-chapters h2{font-size:clamp(30px,8.4vw,44px);margin-bottom:var(--s2)}
  #savor-story .hero-chapters p:not(.eyebrow){max-width:none}
  #savor-story .hero-chapters .eyebrow{margin-bottom:var(--s1)}
  #savor-story .hero-stops{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  #savor-story .hero-stops .stop-label{display:none}
  #savor-story .hero-stops button.is-active .stop-label{display:block;white-space:nowrap}
  #savor-story .hero-stops button:nth-last-child(-n+2).is-active{align-items:flex-end}
  #savor-story .hero-quiet{display:none}
  .home .doors-section{margin-top:-35svh}
}
@media(max-width:700px) and (max-height:700px){
  #savor-story .hero-open h1{font-size:clamp(34px,10vw,44px)}
  #savor-story .hero-lead{font-size:16px;margin-bottom:var(--s2)}
  #savor-story .hero-chapters h2{font-size:clamp(26px,7.6vw,34px)}
  #savor-story .hero-chapters p:not(.eyebrow){font-size:16px;line-height:1.45}
}