:root {
  color-scheme: light;
  --warm-white: #fbf7ed;
  --warm-cream: #f2e8d2;
  --olive: #66704b;
  --deep-olive: #2e3828;
  --roasted-orange: #a14d29;
  --gold: #d5ad58;
  --charcoal: #292b27;
  --muted-gray: #77766e;
  --border: rgb(46 56 40 / 24%);
  --header-height: 5.75rem;
  --cinematic-headline: clamp(2.75rem, 4vw, 4.1rem);
  --cinematic-subtitle: clamp(2.05rem, 3vw, 3.05rem);
  --cinematic-body: clamp(1.35rem, 1.8vw, 1.8rem);
  --cinematic-cta: clamp(0.74rem, 0.82vw, 0.82rem);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--warm-white);
  scroll-behavior: auto;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { min-width: 20rem; min-height: 100%; margin: 0; background: var(--warm-white); }
body { min-width: 20rem; min-height: 100%; margin: 0; overflow-x: clip; background: var(--warm-white); }
a { color: inherit; text-underline-offset: 0.22em; }
a:focus-visible,
[tabindex="-1"]:focus-visible { outline: 0.2rem solid var(--gold); outline-offset: 0.25rem; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--warm-white);
  background: var(--deep-olive);
  border-radius: 999px;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  isolation: isolate;
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.875rem max(1.75rem, env(safe-area-inset-right)) 0.875rem max(1.75rem, env(safe-area-inset-left));
  color: var(--deep-olive);
  background: rgb(242 232 210 / 96%);
  border-bottom: 1px solid var(--border);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.site-header__brand {
  position: relative;
  display: block;
  width: auto;
  height: 4rem;
  flex: 0 0 auto;
  aspect-ratio: 581 / 256;
  text-decoration: none;
}
.site-header__logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.site-header__logo--cinematic {
  display: none;
  background: var(--gold);
  -webkit-mask: url("./media/brand/viva-saturday-logo-mask.svg") center / contain no-repeat;
  mask: url("./media/brand/viva-saturday-logo-mask.svg") center / contain no-repeat;
}
.site-header__skip-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.site-header__skip-intro:focus-visible {
  top: calc(100% + 0.5rem);
  left: max(1rem, env(safe-area-inset-left));
  width: auto;
  height: auto;
  padding: 0.65rem 0.85rem;
  overflow: visible;
  clip: auto;
  color: var(--warm-white);
  background: var(--deep-olive);
  white-space: normal;
}
.site-header__nav {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 2.4vw, 2.7rem);
  font-size: 0.78125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.site-header__nav a,
.site-header__mobile-nav a { white-space: nowrap; text-decoration: none; }
.site-header__replay-intro,
.site-footer__replay-intro {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.site-header__replay-intro:focus-visible,
.site-footer__replay-intro:focus-visible,
.cinematic-control-dock button:focus-visible {
  outline: 0.18rem solid var(--gold);
  outline-offset: 0.25rem;
}
.site-header__utilities {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}
.site-header__utility-link {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  padding: 0;
  color: inherit;
  appearance: none;
  background: transparent;
  border: 0;
  text-decoration: none;
}
.site-header__utility-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}
.site-header__utility-link:focus-visible {
  outline: 0.18rem solid var(--gold);
  outline-offset: 0.05rem;
}
.site-header__mobile-menu { display: none; }
.site-header--cinematic-enabled { position: fixed; right: 0; left: 0; }
.site-header--cinematic {
  color: var(--warm-white);
  background: transparent;
  border-bottom-color: transparent;
  text-shadow: 0 1px 0.65rem rgb(0 0 0 / 48%);
}
.site-header--cinematic .site-header__logo--cinematic { display: block; }
.site-header--cinematic .site-header__logo--standard { display: none; }
.site-header--cinematic .site-header__replay-intro,
.site-header--site-reveal .site-header__replay-intro { display: none; }
.site-header--standard {
  color: var(--warm-white);
  background: var(--deep-olive);
  border-bottom-color: rgb(251 247 237 / 18%);
  text-shadow: none;
}
.site-header--standard::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("./media/storefront/brand/govida-pattern-green-1200.webp");
  background-image: image-set(
    url("./media/storefront/brand/govida-pattern-green-1200.avif") type("image/avif"),
    url("./media/storefront/brand/govida-pattern-green-1200.webp") type("image/webp")
  );
  background-repeat: repeat;
  background-position: center;
  background-size: 220px auto;
  content: "";
  opacity: 0.06;
  pointer-events: none;
}
.site-header--standard > * { z-index: 1; }
.site-header--standard .site-header__logo--cinematic { display: block; }
.site-header--standard .site-header__logo--standard { display: none; }
.site-header--site-reveal {
  color: var(--warm-white);
  background: rgb(46 56 40 / var(--standard-header-opacity, 0));
  border-bottom-color: transparent;
  text-shadow: 0 1px 0.65rem rgb(0 0 0 / 48%);
}
.site-header--site-reveal .site-header__logo--cinematic { display: block; }
.site-header--site-reveal .site-header__logo--standard { display: none; }

main { display: block; }
.cinematic-intro { position: relative; background: var(--warm-white); }
.cinematic-stage { display: none; }
.cinematic-scenes { display: grid; }

.cinematic-scene {
  display: grid;
  min-height: max(42rem, 100svh);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 6vw, 6rem);
  border-bottom: 1px solid var(--border);
}
.static-poster {
  width: min(100%, 58rem);
  margin: 0 auto;
  overflow: hidden;
  background: var(--warm-cream);
  border-radius: clamp(1rem, 2vw, 2rem);
  box-shadow: 0 2rem 5rem rgb(46 56 40 / 16%);
}
.static-poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cinematic-scene__copy {
  display: flex;
  width: min(100%, 44rem);
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.55rem, 1.4vh, 1rem);
  margin-inline: auto;
}
.editorial-section__eyebrow { margin: 0 0 0.8rem; color: var(--roasted-orange); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.cinematic-scene__beat {
  display: block;
  margin: 0;
  font-family: var(--serif);
  text-wrap: balance;
}
.cinematic-scene__heading,
.editorial-section h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
}
.cinematic-scene__heading--stacked { display: grid; gap: 0.12em; }
.cinematic-scene__beat--primary {
  max-width: 18ch;
  font-size: var(--cinematic-headline);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.cinematic-scene__beat--secondary {
  max-width: 23ch;
  font-size: var(--cinematic-subtitle);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.08;
}
.cinematic-scene__support {
  max-width: 30ch;
  font-size: var(--cinematic-body);
  letter-spacing: -0.008em;
  line-height: 1.18;
}
.cinematic-scene__beat--gold { color: var(--gold); }
.cinematic-scene__beat--italic { font-style: italic; }
#scene-flavor .cinematic-scene__beat--secondary,
#scene-jar-reveal .cinematic-scene__support { white-space: nowrap; }
#scene-versatility .cinematic-divider {
  width: min(100%, 9.8em);
  font-size: var(--cinematic-subtitle);
}
#scene-versatility .cinematic-divider__leaf {
  width: 1.35rem;
  height: 1.5rem;
}
.cinematic-scene__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  width: min(100%, 30rem);
  margin-top: 0.45rem;
}
.cinematic-button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.2rem;
  border: 1px solid var(--gold);
  border-radius: 0.45rem;
  font-family: var(--sans);
  font-size: var(--cinematic-cta);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.cinematic-button--primary {
  color: var(--deep-olive);
  background: var(--gold);
}
.cinematic-button--secondary {
  color: var(--deep-olive);
  background: transparent;
}
.cinematic-divider {
  display: flex;
  width: min(100%, 18rem);
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.35rem;
  color: var(--gold);
}
.cinematic-divider__rule { height: 1px; flex: 1; background: currentColor; opacity: 0.78; }
.cinematic-divider__leaf {
  width: 1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("./media/brand/viva-saturday-icon-mask.svg") center / contain no-repeat;
  mask: url("./media/brand/viva-saturday-icon-mask.svg") center / contain no-repeat;
}
.cinematic-scene__description { max-width: 39rem; margin: 1.2rem 0 0; color: var(--muted-gray); font-size: 0.86rem; line-height: 1.65; }

.editorial-section { position: relative; z-index: 2; min-height: 75svh; padding: clamp(6rem, 13vw, 12rem) clamp(1rem, 9vw, 9rem); color: var(--deep-olive); background: var(--warm-cream); border-bottom: 1px solid var(--border); }
.editorial-section--list { background: var(--warm-white); }
.editorial-section h2 { font-size: clamp(2.5rem, 7vw, 5.8rem); }
.editorial-section > p:last-child { max-width: 42rem; margin: 1.5rem 0 0; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7; }
#after-cinematic,
#smoky-bell,
#first-taste-list { scroll-margin-top: var(--header-height); }
#after-cinematic { position: relative; z-index: 2; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem clamp(1rem, 9vw, 9rem); color: var(--warm-white); background: var(--deep-olive); font-size: 0.75rem; }
.site-footer p { margin: 0; }
.site-footer__replay-intro { letter-spacing: 0.06em; }

.cinematic-intro--enhanced { background: #000; }
.cinematic-intro--enhanced .cinematic-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  opacity: var(--cinematic-stage-opacity, 1);
  background: #000;
  pointer-events: none;
}
.cinematic-intro--released .cinematic-stage { visibility: hidden; }
.cinematic-stage__viewport { position: absolute; inset: 0; overflow: hidden; background: #000; isolation: isolate; }
.cinematic-stage__poster,
.cinematic-stage__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cinematic-stage__poster { z-index: 0; opacity: 1; }
.cinematic-stage__video { z-index: 1; opacity: 0; transition: none; }
.cinematic-stage__overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(90deg, rgb(21 24 19 / 68%) 0 18%, rgb(21 24 19 / 32%) 42%, transparent 70%), linear-gradient(0deg, rgb(21 24 19 / 30%), transparent 48%);
  pointer-events: none;
}
.cinematic-control-dock {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1rem max(1.25rem, calc(env(safe-area-inset-right) + 1.25rem)) max(1rem, calc(env(safe-area-inset-bottom) + 1rem)) max(1.25rem, calc(env(safe-area-inset-left) + 1.25rem));
  color: var(--warm-white);
  background: linear-gradient(0deg, rgb(7 9 6 / 76%) 0%, rgb(7 9 6 / 32%) 68%, transparent 100%);
  text-shadow: 0 1px 0.65rem rgb(0 0 0 / 66%);
  pointer-events: none;
  box-sizing: border-box;
}
.cinematic-intro--enhanced .cinematic-control-dock { display: grid; }
.cinematic-intro--released .cinematic-control-dock { display: none; }
.cinematic-control-dock button { min-width: 2.75rem; min-height: 2.75rem; color: inherit; cursor: pointer; pointer-events: auto; }
.cinematic-control-dock__enter {
  justify-self: start;
  padding: 0.65rem 0.15rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(251 247 237 / 56%);
  font: 650 0.7rem/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cinematic-control-dock__guide { display: grid; min-width: 12rem; justify-items: center; gap: 0.08rem; text-align: center; }
.cinematic-control-dock__instruction,
.cinematic-control-dock__alternative,
.cinematic-control-dock__counter { margin: 0; font-family: var(--sans); text-transform: uppercase; }
.cinematic-control-dock__instruction {
  position: relative;
  overflow: hidden;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.17em;
}
.cinematic-control-dock__instruction::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 10%, rgb(251 247 237 / 72%) 48%, transparent 84%);
  content: "";
  transform: translateX(-120%);
}
.cinematic-control-dock__alternative { color: rgb(251 247 237 / 72%); font-size: 0.56rem; font-weight: 650; letter-spacing: 0.12em; }
.cinematic-control-dock__mobile-instruction { display: none; }
.cinematic-control-dock__next {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-top: 0.15rem;
  padding: 0;
  place-items: center;
  background: rgb(9 12 8 / 22%);
  border: 1px solid rgb(213 173 88 / 72%);
  border-radius: 999px;
}
.cinematic-control-dock__next svg { width: 1.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.cinematic-control-dock__next[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.72;
}
.cinematic-control-dock__progress-group { display: grid; width: min(12rem, 100%); justify-self: end; gap: 0.5rem; padding-bottom: 0.4rem; }
.cinematic-control-dock__counter { color: rgb(251 247 237 / 82%); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.16em; text-align: right; }
.cinematic-control-dock__progress { height: 2px; overflow: hidden; background: rgb(251 247 237 / 24%); }
.cinematic-control-dock__progress > span { display: block; width: 0; height: 100%; background: var(--gold); transition: width 100ms linear; }
.cinematic-control-dock--attending .cinematic-control-dock__instruction::after { animation: cinematic-guide-sweep 1.2s ease-out 1; }
.cinematic-control-dock--attending .cinematic-control-dock__next { animation: cinematic-guide-pulse 0.75s ease-in-out 2; }
.cinematic-control-dock--interacted .cinematic-control-dock__instruction,
.cinematic-control-dock--interacted .cinematic-control-dock__alternative { opacity: 0.82; }
@keyframes cinematic-guide-sweep { to { transform: translateX(120%); } }
@keyframes cinematic-guide-pulse { 50% { border-color: var(--gold); transform: translateY(0.18rem); } }

.cinematic-intro--enhanced .cinematic-scenes { position: relative; z-index: 4; display: block; margin-top: 0; }
body[data-cinematic-handoff-phase] {
  padding-bottom: var(--site-bottom-compensation, 0);
}
body[data-cinematic-handoff-phase] main > :not(.cinematic-intro),
body[data-cinematic-handoff-phase] .site-footer {
  visibility: hidden;
  opacity: var(--normal-site-opacity, 0);
  transform: translate3d(0, var(--site-lock-offset, 0), 0);
  pointer-events: none;
}
body[data-cinematic-handoff-phase="site-reveal"] main > :not(.cinematic-intro),
body[data-cinematic-handoff-phase="site-reveal"] .site-footer,
body[data-cinematic-handoff-phase="site-latch"] main > :not(.cinematic-intro),
body[data-cinematic-handoff-phase="site-latch"] .site-footer,
body[data-cinematic-handoff-phase="site-active"] main > :not(.cinematic-intro),
body[data-cinematic-handoff-phase="site-active"] .site-footer {
  visibility: visible;
}
body[data-cinematic-handoff-phase="site-active"] main > :not(.cinematic-intro),
body[data-cinematic-handoff-phase="site-active"] .site-footer {
  pointer-events: auto;
}
.cinematic-intro--enhanced .cinematic-scenes::after {
  display: block;
  height: calc((1 + var(--final-release-weight, 0.45)) * 100vh);
  height: calc((1 + var(--final-release-weight, 0.45)) * 100svh);
  height: calc((1 + var(--final-release-weight, 0.45)) * 100dvh);
  content: "";
}
.cinematic-intro--enhanced .cinematic-scene {
  position: relative;
  display: block;
  min-height: calc(var(--scene-track-weight, 1) * 100vh);
  min-height: calc(var(--scene-track-weight, 1) * 100svh);
  min-height: calc(var(--scene-track-weight, 1) * 100dvh);
  padding: 0;
  border: 0;
}
.cinematic-intro--enhanced .static-poster { display: none; }
.cinematic-intro--enhanced .cinematic-scene__copy {
  position: fixed;
  z-index: 8;
  top: calc(var(--header-height) + clamp(3rem, 11vh, 7rem));
  left: max(1rem, calc((100vw - 90rem) / 2 + 5vw));
  width: min(46vw, 42rem);
  margin: 0;
  color: var(--warm-white);
  text-shadow: 0 1px 0.9rem rgb(0 0 0 / 44%);
  visibility: hidden;
  pointer-events: none;
}
.cinematic-intro--enhanced .cinematic-scene--current .cinematic-scene__copy { visibility: visible; }
.cinematic-intro--enhanced [data-copy-beat] {
  opacity: var(--beat-opacity, 0);
  transform: translate3d(0, var(--beat-translate-y, 16px), 0);
  will-change: opacity, transform;
}
.cinematic-intro--enhanced .cinematic-scene__support {
  max-width: 32rem;
  font-size: var(--cinematic-body);
}
.cinematic-intro--enhanced #scene-origin .cinematic-scene__copy { width: min(42vw, 38rem); }
.cinematic-intro--enhanced #scene-jar-reveal .cinematic-scene__copy { width: min(42vw, 36rem); }
.cinematic-intro--enhanced #scene-versatility .cinematic-scene__copy { width: min(42vw, 40rem); }
.cinematic-intro--enhanced .cinematic-scene--current .cinematic-scene__actions { pointer-events: auto; }
.cinematic-intro--enhanced .cinematic-button--secondary { color: var(--warm-white); }
.cinematic-intro--enhanced .cinematic-scene__beat--gold,
.cinematic-intro--enhanced .cinematic-divider { color: var(--gold); }
.cinematic-intro--enhanced .cinematic-scene__description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cinematic-intro--enhanced[data-active-scene="flavor"] .cinematic-stage__overlay { background: linear-gradient(270deg, rgb(32 21 18 / 70%) 0 20%, rgb(32 21 18 / 28%) 46%, transparent 72%), linear-gradient(0deg, rgb(32 21 18 / 28%), transparent 48%); }
.cinematic-intro--enhanced #scene-flavor .cinematic-scene__copy {
  right: max(1rem, calc((100vw - 90rem) / 2 + 5vw));
  left: auto;
  width: min(44vw, 40rem);
  align-items: center;
  text-align: center;
}
.cinematic-intro--enhanced #scene-flavor .cinematic-scene__lead,
.cinematic-intro--enhanced #scene-flavor .cinematic-scene__heading,
.cinematic-intro--enhanced #scene-flavor .cinematic-scene__support { margin-inline: auto; }

.cinematic-intro--enhanced[data-active-scene="shared-table"] .cinematic-stage__overlay { background: linear-gradient(0deg, rgb(38 25 22 / 72%) 0 24%, rgb(38 25 22 / 18%) 58%, transparent 76%); }
.cinematic-intro--enhanced #scene-shared-table .cinematic-scene__copy {
  top: auto;
  right: 1rem;
  bottom: clamp(8.5rem, 18vh, 12rem);
  left: 1rem;
  width: min(46vw, 44rem);
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.cinematic-intro--enhanced #scene-shared-table .cinematic-scene__lead,
.cinematic-intro--enhanced #scene-shared-table .cinematic-scene__heading,
.cinematic-intro--enhanced #scene-shared-table .cinematic-scene__support { margin-inline: auto; }

@media (min-width: 56rem) {
  .cinematic-scene { grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr); }
  .cinematic-scene:nth-child(even) .static-poster { order: 2; }
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  .static-poster img { aspect-ratio: 9 / 16; }
}

@media (max-width: 48rem) {
  :root {
    --header-height: 4.25rem;
    --cinematic-headline: clamp(2rem, 8.8vw, 2.7rem);
    --cinematic-subtitle: clamp(1.6rem, 7vw, 2.2rem);
    --cinematic-body: clamp(1.08rem, 4.6vw, 1.4rem);
    --cinematic-cta: 0.74rem;
  }
  .site-header {
    gap: 0.5rem;
    padding: 0.625rem max(1.125rem, env(safe-area-inset-right)) 0.625rem max(1.125rem, env(safe-area-inset-left));
  }
  .site-header__brand { height: 3rem; }
  .site-header__nav--desktop { display: none; }
  .site-header__utilities {
    gap: 0.15rem;
    margin-left: auto;
  }
  .site-header__utility-link {
    width: 2.75rem;
    height: 2.75rem;
  }
  .site-header__utility-link svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .site-header__mobile-menu {
    position: relative;
    display: block;
    margin-left: 0;
  }
  .site-header__menu-control {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
  }
  .site-header__menu-control::-webkit-details-marker { display: none; }
  .site-header__menu-control:focus-visible {
    outline: 0.2rem solid var(--gold);
    outline-offset: 0.2rem;
  }
  .site-header__menu-icon {
    display: grid;
    width: 1rem;
    gap: 0.22rem;
  }
  .site-header__menu-icon span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .site-header__mobile-menu[open] .site-header__menu-icon span:nth-child(1) { transform: translateY(0.28rem) rotate(45deg); }
  .site-header__mobile-menu[open] .site-header__menu-icon span:nth-child(2) { opacity: 0; }
  .site-header__mobile-menu[open] .site-header__menu-icon span:nth-child(3) { transform: translateY(-0.28rem) rotate(-45deg); }
  .site-header__mobile-nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    display: grid;
    min-width: 13rem;
    gap: 0.95rem;
    padding: 1.2rem 1.25rem;
    color: var(--warm-white);
    background: rgb(35 40 31 / 94%);
    border: 1px solid rgb(251 247 237 / 22%);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 26%);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-align: right;
    text-shadow: none;
    text-transform: uppercase;
  }
  .site-header__mobile-nav a,
  .site-header__mobile-nav button { display: flex; min-height: 2.75rem; align-items: center; justify-content: flex-end; }
  .site-header--standard .site-header__mobile-nav {
    color: var(--warm-white);
    background: var(--deep-olive);
    border-color: rgb(251 247 237 / 22%);
  }
  .cinematic-intro--enhanced .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-origin .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-jar-reveal .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-versatility .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__copy {
    top: auto;
    right: auto;
    bottom: max(9rem, calc(7.5rem + env(safe-area-inset-bottom)));
    left: 50%;
    width: min(82vw, 38rem);
    margin: 0;
    align-items: flex-start;
    text-align: left;
    transform: translateX(-50%);
  }
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__copy,
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__copy {
    align-items: center;
    text-align: center;
  }
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__copy {
    bottom: max(9.5rem, calc(8rem + env(safe-area-inset-bottom)));
    width: min(calc(100vw - 2rem), 32rem);
  }
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__heading {
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    line-height: 1.2;
    white-space: nowrap;
  }
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__heading,
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__beat--secondary,
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__support,
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__heading,
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__beat--secondary,
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__support { margin-inline: auto; }
  .cinematic-intro--enhanced #scene-shared-table .cinematic-scene__copy {
    bottom: max(9.5rem, calc(14vh + env(safe-area-inset-bottom)));
  }
  .cinematic-control-dock {
    grid-template-columns: minmax(5.2rem, 1fr) minmax(8.5rem, auto) minmax(5.2rem, 1fr);
    gap: 0.45rem;
    padding: 0.55rem max(0.85rem, calc(env(safe-area-inset-right) + 0.6rem)) max(0.65rem, calc(env(safe-area-inset-bottom) + 0.65rem)) max(0.85rem, calc(env(safe-area-inset-left) + 0.6rem));
  }
  .cinematic-control-dock__enter { max-width: 5.5rem; font-size: 0.58rem; letter-spacing: 0.06em; }
  .cinematic-control-dock__guide { min-width: 8.5rem; }
  .cinematic-control-dock__desktop-instruction { display: none; }
  .cinematic-control-dock__mobile-instruction { display: inline; }
  .cinematic-control-dock__instruction { font-size: 0.58rem; letter-spacing: 0.11em; white-space: nowrap; }
  .cinematic-control-dock__alternative { font-size: 0.5rem; letter-spacing: 0.08em; }
  .cinematic-control-dock__next { width: 2.75rem; height: 2.75rem; }
  .cinematic-control-dock__progress-group { width: min(5.5rem, 100%); gap: 0.4rem; padding-bottom: 0.25rem; }
  .cinematic-control-dock__counter { font-size: 0.54rem; letter-spacing: 0.08em; }
  .cinematic-divider { width: min(68vw, 14rem); }
  #scene-versatility .cinematic-divider { width: min(82vw, 9.8em); }
  .cinematic-stage__overlay,
  .cinematic-intro--enhanced[data-active-scene="flavor"] .cinematic-stage__overlay,
  .cinematic-intro--enhanced[data-active-scene="shared-table"] .cinematic-stage__overlay {
    background: linear-gradient(0deg, rgb(23 25 21 / 78%) 0 31%, rgb(23 25 21 / 16%) 66%, transparent 82%);
  }
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  .cinematic-intro--enhanced #scene-origin .cinematic-scene__copy {
    top: calc(var(--header-height) + max(1rem, env(safe-area-inset-top)) + clamp(0.75rem, 3.5svh, 2rem));
    bottom: auto;
    width: min(86vw, 32rem);
    align-items: center;
    text-align: center;
  }
  .cinematic-intro--enhanced #scene-origin .cinematic-scene__heading { margin-inline: auto; }
  .cinematic-intro--enhanced .cinematic-scene__heading,
  .cinematic-intro--enhanced .cinematic-scene__lead,
  .cinematic-intro--enhanced .cinematic-scene__support,
  .cinematic-intro--enhanced .cinematic-scene__beat--secondary,
  .cinematic-intro--enhanced .cinematic-divider,
  .cinematic-intro--enhanced .cinematic-scene__actions { margin-inline: auto; }
  .cinematic-intro--enhanced[data-active-scene="origin"] .cinematic-stage__overlay {
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, rgb(10 13 8 / 76%) 0%, rgb(10 13 8 / 52%) 22%, rgb(10 13 8 / 28%) 36%, transparent 50%);
    opacity: 1;
  }
  .cinematic-intro--enhanced[data-active-scene="jar-reveal"] .cinematic-stage__overlay {
    background: none;
    opacity: 0;
  }
  .cinematic-intro--enhanced #scene-jar-reveal .cinematic-scene__copy {
    left: 9vw;
    width: fit-content;
    max-width: 82vw;
    isolation: isolate;
    transform: none;
  }
  .cinematic-intro--enhanced #scene-jar-reveal .cinematic-scene__copy::before {
    position: absolute;
    z-index: -1;
    inset: -0.95rem -1.05rem;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgb(7 9 6 / 38%) 0%,
      rgb(7 9 6 / 24%) 58%,
      transparent 100%
    );
    content: "";
    opacity: var(--scene-copy-backing-opacity, 0);
    pointer-events: none;
    transform: translate3d(0, var(--scene-copy-backing-translate-y, 16px), 0);
  }
  .cinematic-intro--enhanced[data-active-scene="versatility"] .cinematic-stage__overlay {
    inset: 0;
    height: auto;
    background: linear-gradient(
      180deg,
      rgb(9 11 7 / 64%) 0%,
      rgb(9 11 7 / 40%) 20%,
      rgb(9 11 7 / 18%) 34%,
      transparent 46%
    );
    opacity: 1;
  }
  .cinematic-intro--enhanced #scene-versatility .cinematic-scene__copy {
    top: calc(var(--header-height) + max(1rem, env(safe-area-inset-top)) + clamp(0.65rem, 2.8svh, 1.65rem));
    bottom: auto;
    width: min(86vw, 32rem);
  }
  .cinematic-intro--enhanced[data-active-scene="shared-table"] .cinematic-stage__overlay {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: min(58vh, 34rem);
    height: min(58svh, 34rem);
    height: min(58dvh, 34rem);
    background: linear-gradient(0deg, rgb(23 25 21 / 80%) 0%, rgb(23 25 21 / 58%) 42%, rgb(23 25 21 / 20%) 76%, transparent 100%);
    opacity: var(--scene-gradient-opacity, 0);
  }
}

@media (max-width: 22rem) {
  .cinematic-intro--enhanced #scene-flavor .cinematic-scene__heading {
    max-width: 16rem;
    white-space: normal;
  }
}

@media (max-width: 48rem) {
  .site-header--standard::before { background-size: 160px auto; opacity: 0.05; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .cinematic-stage { display: none !important; }
  .cinematic-scenes { display: grid !important; margin-top: 0 !important; }
  .cinematic-scenes::after { display: none !important; }
  .cinematic-scene { display: grid !important; min-height: max(42rem, 100svh) !important; color: var(--charcoal) !important; background: var(--warm-white); border-bottom: 1px solid var(--border) !important; }
  .cinematic-scene__copy { position: static !important; width: min(100%, 44rem) !important; margin-inline: auto !important; color: var(--charcoal) !important; visibility: visible !important; transform: none !important; }
  [data-copy-beat] { opacity: 1 !important; transform: none !important; }
  .cinematic-control-dock { display: none !important; }
  .cinematic-scene__beat--gold,
  .cinematic-divider { color: var(--gold) !important; }
  .cinematic-scene__description { position: static !important; width: auto !important; height: auto !important; margin: 1.2rem 0 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; color: var(--muted-gray) !important; }
  .static-poster { display: block !important; }
}

@media (forced-colors: active) {
  .cinematic-control-dock,
  .cinematic-control-dock__next,
  .site-header__menu-control,
  .site-header__utility-link { border-color: ButtonText; }
  .cinematic-control-dock { color: CanvasText; background: Canvas; }
  .cinematic-control-dock__instruction,
  .cinematic-control-dock__alternative,
  .cinematic-control-dock__counter { color: CanvasText; }
  .cinematic-control-dock__progress { background: CanvasText; }
  .cinematic-control-dock__progress > span { background: Highlight; }
  .cinematic-control-dock button:focus-visible,
  .site-header a:focus-visible,
  .site-header button:focus-visible,
  .site-header summary:focus-visible { outline: 3px solid Highlight; }
}