/* The home header shares the film's canvas, then gains a solid surface. */
.page-home { --cinema: #090b09; }
.page-home .site-header { position: fixed; inset: 0 0 auto; background: linear-gradient(#090b09b3, #090b0900); border-bottom-color: transparent; transition: background-color .25s, border-color .25s; }
.page-home .site-header.is-solid,
.page-home .site-header:has(.nav-toggle[aria-expanded="true"]) { background: var(--cinema); border-bottom-color: #ffffff14; }
.page-home .site-header.nav-enhanced .site-nav { background-color: var(--cinema); }
@media (min-width: 901px) { .page-home .site-header.nav-enhanced .site-nav { background-color: transparent; } }
.scroll-story {
  --story-intro-opacity: 1;
  --story-scene-opacity: 0;
  --story-finale: 0;
  --story-header-height: var(--header-height);
  --story-picture-width: min(100vw, calc(var(--story-stage-height, 100svh) * 9 / 16));
  position: relative;
  background: var(--cinema);
  color: var(--paper);
}
.scroll-story.is-scroll-ready { height: calc(var(--story-stage-height) + var(--story-travel)); }
.story-stage { position: relative; height: var(--story-stage-height, 100svh); min-height: 450px; overflow: hidden; isolation: isolate; background: #28291f; }
.story-ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; visibility: hidden; opacity: calc(1 - var(--story-finale) * .72); }
.story-ambient.is-painted { visibility: visible; }
.is-scroll-ready .story-stage { position: sticky; top: 0; }
.story-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#16170f88, transparent 20%, transparent 70%, #090b09e6 100%); }
.story-layout { position: relative; height: 100%; z-index: 2; pointer-events: none; }
.story-layout a, .story-layout button, .story-media-status { pointer-events: auto; }
.story-film { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; }
.story-video {
  display: block;
  width: var(--story-picture-width);
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  opacity: calc(1 - var(--story-finale) * .72);
  transform: scale(calc(1 + var(--story-finale) * .025));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.is-scroll-ready .story-video { pointer-events: none; }
.story-video:focus-visible { outline-offset: -4px; }
.story-introduction { display: contents; }
.story-heading { position: absolute; z-index: 2; left: 0; top: 34%; width: min(300px, max(140px, calc((100% - var(--story-picture-width)) / 2 - 40px))); opacity: var(--story-intro-opacity); transform: translateY(calc((1 - var(--story-intro-opacity)) * -20px)); pointer-events: none; }
.story-heading .eyebrow { color: var(--accent); font-size: 8px; letter-spacing: 1.7px; }
.story-heading h1 { font-size: clamp(34px, 3.4vw, 49px); line-height: 1.25; letter-spacing: -1.8px; }
.story-heading h1 em { color: var(--cream); }
.story-lead { color: #a5ac9e; font-size: 11px; line-height: 1.9; margin-top: 24px; }
.story-scene-copy { position: absolute; z-index: 2; left: 0; top: 40%; width: min(300px, max(140px, calc((100% - var(--story-picture-width)) / 2 - 40px))); max-width: 330px; opacity: var(--story-scene-opacity); transform: translateY(calc((1 - var(--story-scene-opacity)) * 12px)); pointer-events: none; }
.story-scene-number { display: flex; align-items: center; gap: 8px; color: #a8ac9b; font-size: 8px; letter-spacing: 1.5px; margin-bottom: 16px; }
.story-scene-number > span:first-child { color: var(--accent); }
.story-scene-rule { display: inline-block; width: 30px; height: 1px; background: #626f58; margin-left: 8px; }
.story-scene-copy h2 { font-size: clamp(19px, 1.9vw, 28px); line-height: 1.5; letter-spacing: -.4px; color: var(--cream); }
.story-scene-copy > p:last-child { display: block; margin-top: 18px; font-size: 12px; line-height: 1.9; color: #d3d6c9; }
.story-aside { position: absolute; z-index: 2; right: 0; top: 44%; width: min(230px, max(140px, calc((100% - var(--story-picture-width)) / 2 - 40px))); text-align: right; opacity: calc(1 - var(--story-finale)); }
.story-aside__label { display: block; margin-bottom: 20px; font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: #bec5b0; }
.story-aside a { color: #c0c7b7; font-family: var(--display); font-size: 18px; line-height: 1.8; }
.story-aside a span { font-size: 20px; padding-left: 12px; }
.story-aside__note { color: var(--cream); font-family: var(--display); font-size: 25px; line-height: 1.65; letter-spacing: -.5px; }
.story-aside .story-aside__branches { display: inline-block; margin-top: 26px; font-family: var(--body); font-size: 10px; color: #d3d8c8; }
.story-scene-copy, .story-aside { text-shadow: 0 2px 20px #0008; }
.story-aside a:hover { color: var(--cream); }
.has-finale .story-aside { pointer-events: none; }
.story-bottom { position: absolute; z-index: 5; bottom: 21px; left: 0; right: 0; }
.story-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.story-help { color: #929d87; font-size: 9px; letter-spacing: 1px; }
.story-help::before { content: "↓"; color: var(--accent); margin-right: 10px; }
.story-skip { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: var(--cream); font-size: 10px; }
.story-skip:hover { color: #fff; }
.story-skip span { font-size: 17px; }
.story-chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.story-chapter { position: relative; padding: 14px 0 0; min-height: 38px; color: #919d86; border: 0; background: transparent; display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.story-chapter::before, .story-chapter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #36402e; }
.story-chapter::after { transform-origin: left; transform: scaleX(var(--chapter-progress, 0)); background: var(--accent); }
.story-chapter:hover, .story-chapter[aria-current="step"] { color: var(--cream); }
.story-chapter__number { font-size: 8px; letter-spacing: .8px; }
.story-chapter__name { font-size: 9px; }
.story-chapter[aria-current="step"] .story-chapter__number { color: var(--accent); }
.story-finale { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; opacity: var(--story-finale); transform: translateY(calc((1 - var(--story-finale)) * 22px)); pointer-events: none; padding-top: var(--story-header-height); padding-bottom: 70px; }
.has-finale .story-finale { pointer-events: auto; }
.story-finale a { pointer-events: none; }
.has-finale .story-finale a { pointer-events: auto; }
.has-finale .story-aside a { pointer-events: none; }
.story-finale .eyebrow { font-size: 9px; letter-spacing: 2px; color: var(--accent); }
.story-finale h2 { font-size: clamp(38px, 4.7vw, 66px); line-height: 1.3; letter-spacing: -2px; }
.story-finale > p:not(.eyebrow) { color: #bcc3b2; font-size: 11px; line-height: 1.8; }
.story-finale__actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 12px; }
.story-finale__actions .button { font-size: 11px; }
.story-media-status { position: absolute; z-index: 6; bottom: 145px; left: 50%; transform: translateX(-50%); width: min(100% - 40px, 420px); padding: 16px; background: #090b09e6; border: 1px solid #ffffff25; color: var(--cream); font-size: 11px; line-height: 1.7; }
/* The final frame and the product section meet on the same dark surface. */
.page-home .menu-section { position: relative; background: var(--cinema); color: var(--paper); padding-top: 70px; }
.page-home .menu-section .section-heading .eyebrow { color: var(--accent); }
.page-home .menu-section .section-heading > p,
.page-home .menu-section .product-item p,
.page-home .menu-section .menu-bottom > p { color: #aab29f; }
.page-home .menu-section .product-item,
.page-home .menu-section .menu-bottom { border-color: #343d2e; }
.page-home .menu-section .item-number { color: var(--accent); }
.page-home .menu-section .button--dark { background: var(--cream); color: var(--ink); }
.page-home .menu-section .button--dark:hover { background: #fff9ec; }
.page-home .menu-section .products-photo { background: var(--cinema); }
.page-home .menu-section .products-photo img { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 90%, transparent); }
.story-transcript { color: #aab29f; border-top: 1px solid #343d2e; margin-top: 46px; }
.story-transcript summary { padding-block: 21px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.story-transcript summary::-webkit-details-marker { display: none; }
.story-transcript summary span { font-size: 18px; }
.story-transcript[open] summary span { transform: rotate(45deg); }
.story-transcript ol { margin: 12px 0 0; padding: 0 0 12px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: scene; }
.story-transcript li { counter-increment: scene; border-top: 1px solid #35402d; padding-top: 18px; }
.story-transcript li::before { content: "0" counter(scene); font-size: 9px; color: var(--accent); }
.story-transcript h2 { font-size: 19px; color: var(--cream); letter-spacing: -.4px; line-height: 1.5; margin-top: 14px; }
.story-transcript p { font-size: 11px; line-height: 1.9; margin-top: 10px; }
.scroll-story:not(.is-scroll-ready) .story-heading { opacity: 1; }
.scroll-story:not(.is-scroll-ready) .story-aside { display: none; }
.scroll-story:not(.is-scroll-ready) .story-scene-copy { display: none; }
.scroll-story:not(.is-scroll-ready) .story-video { -webkit-mask-image: none; mask-image: none; }
.scroll-story:not(.is-scroll-ready) .story-film { inset: calc(var(--story-header-height) + 12px) 0 90px; z-index: 2; }
.scroll-story:not(.is-scroll-ready) .story-video { width: auto; max-width: 100%; }
@media (min-width: 901px) and (max-width: 1100px) {
  .story-heading h1 { font-size: 34px; letter-spacing: -1px; }
  .story-lead { font-size: 10px; }
  .story-scene-copy h2 { font-size: 21px; }
  .story-scene-copy > p:last-child { font-size: 11px; }
  .story-aside__note { font-size: 20px; }
}
/* The film stays full size; compact-screen captions sit on the scene gradients. */
@media (max-width: 900px) {
  .story-layout { width: calc(100% - 40px); }
  .story-aside { display: none; }
  .story-film { inset: 0; }
  .story-video { -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); }
  .story-heading { top: calc(var(--story-header-height) + 18px); width: 100%; text-align: left; text-shadow: 0 2px 24px #000b; }
  .story-heading .eyebrow { font-size: 7px; letter-spacing: 1.1px; }
  .story-heading h1 { font-size: clamp(25px, 4.8vw, 34px); line-height: 1.2; letter-spacing: -1px; margin-top: 10px; max-width: 360px; }
  .story-lead { display: none; }
  .story-scene-copy { top: auto; bottom: 116px; width: 100%; max-width: none; text-align: left; }
  .story-scene-number { justify-content: flex-start; font-size: 7px; margin-bottom: 7px; }
  .story-scene-copy h2 { font-size: 19px; line-height: 1.4; }
  .story-scene-copy > p:last-child { display: none; }
  .story-stage::after { background: linear-gradient(#16170fbb, #16170f22 32%, transparent 50%, #090b0922 65%, #090b09 100%); }
  .story-bottom { bottom: 10px; }
  .story-toolbar { margin-bottom: 8px; }
  .story-help { font-size: 8px; letter-spacing: .2px; }
  .story-help::before { margin-right: 7px; }
  .story-skip { font-size: 9px; gap: 10px; }
  .story-chapters { gap: 12px; }
  .story-chapter { min-height: 44px; padding-top: 13px; }
  .story-chapter__name { font-size: 8px; }
  .story-finale { gap: 18px; padding-top: var(--story-header-height); padding-bottom: 110px; }
  .story-finale .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .story-finale h2 { font-size: 37px; letter-spacing: -1.1px; }
  .story-finale > p:not(.eyebrow) { max-width: 250px; font-size: 10px; }
  .story-finale__actions { flex-direction: column; gap: 12px; }
  .story-finale__actions .button { min-height: 48px; font-size: 10px; }
  .story-finale__actions .text-link { font-size: 10px; }
  .scroll-story:not(.is-scroll-ready) .story-heading { display: none; }
}
@media (max-width: 640px) {
  .story-chapter__name { display: none; }
  .story-chapter__number { font-size: 9px; }
  .story-transcript ol { grid-template-columns: 1fr; gap: 20px; }
  .story-transcript h2 { font-size: 19px; margin-top: 8px; }
  .story-transcript summary { font-size: 9px; }
  .page-home .menu-section { padding-top: 52px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  .story-heading { top: 30%; }
  .story-heading h1 { font-size: 32px; }
  .story-lead { display: none; }
  .story-scene-copy { top: 35%; }
  .story-scene-copy > p:last-child { font-size: 10px; margin-top: 10px; }
  .story-finale { gap: 14px; }
  .story-finale h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-heading, .story-scene-copy, .story-finale, .story-video { transform: none; }
}

.scroll-story { overflow-anchor: none; }
.scroll-story.is-lightweight .story-stage { background: linear-gradient(#171b1855, #090b09bb), url('../images/poster.webp') center / contain no-repeat, #28291f; }
.is-lightweight .story-film { z-index: 3 !important; pointer-events: none; }
.is-lightweight .story-media-status { pointer-events: auto; bottom: 30px; }
.story-retry { display: block; padding: 11px 16px; margin-top: 12px; border: 1px solid #c7a778; background: #e9deca; color: #1c211e; font: inherit; cursor: pointer; min-height: 44px; }

.is-lightweight .story-ambient { visibility: hidden; }