.signature-hero {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  container-name: herocanvas;
  flex: 1 1 auto;

  min-height: calc(100svh - var(--header-h, var(--masthead)));
  display: grid;

  grid-template-rows: minmax(0, 1fr) auto;
  overflow: clip;
}
.hero-stage {
  display: grid;
  position: relative;
  margin-inline: var(--gutter);
  min-width: 0;
  touch-action: pan-y pinch-zoom;
}
.hero-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
  position: relative;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--motion), visibility 700ms;
}
.hero-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; z-index: 2; }
.hero-panel.is-leaving { visibility: visible; opacity: 0; z-index: 1; }
.hero-copy {
  grid-area: 1 / 1 / 2 / 6;
  min-width: 0;
  position: relative;
  z-index: 3;
  padding-block: clamp(1rem, 3.4svh, 3.5rem);
  padding-right: clamp(1rem, 1.6vw, 2rem);
}
.chapter-kicker {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.8;
  margin-bottom: clamp(.9rem, 2.9svh, 2.5rem);
  text-wrap: balance;
}
.chapter-kicker::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-right: .65rem;
  vertical-align: middle;
  background: var(--gold);
}
.chapter-kicker b { color: var(--gold-ink); font-weight: 500; padding-inline: .3rem; }
.hero-heading {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.075;
  /* Two ceilings, whichever is lower. The vw term still sets the scale on a
     normal desktop; the height term takes over on a short one, where a
     headline sized purely off width is what broke the single-screen budget.

     The height term has a NEGATIVE intercept on purpose. A plain percentage
     of svh would trim the display on tall screens too, where nothing needs
     trimming; subtracting a fixed 1.5rem first makes the curve steepen as the
     viewport gets shorter, so 1920×1080 and 1920×944 keep the full 100px
     headline and only a 632px-tall window actually gives any of it back. */
  font-size: clamp(2.9rem, min(5.25vw, calc(13.4svh - 1.5rem)), 6.8rem);
  text-wrap: initial;
  overflow-wrap: anywhere;
}
.hero-heading .line { display: block; overflow: clip; padding-block: .05em .12em; margin-block: -.05em -.12em; }
.hero-heading .line > span { display: inline-block; transform: translateY(110%); }
.hero-panel.is-active .hero-heading .line > span {
  transform: translateY(0);
  transition: transform 780ms var(--motion) 160ms;
}
.hero-panel.is-active .hero-heading .line:nth-child(2) > span { transition-delay: 240ms; }
.hero-panel.is-active .hero-heading .line:nth-child(3) > span { transition-delay: 320ms; }
.hero-heading em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.32em;
  line-height: .92;
  font-weight: 400;
  letter-spacing: -.023em;
  color: var(--gold-deep);
  padding-right: .07em;
}
.hero-heading .emphasis { margin-left: clamp(2rem, 3.5vw, 4.5rem); padding-block: .08em .13em; }
.hero-panel--tradition .hero-heading, .hero-panel--catering .hero-heading { font-size: clamp(2.6rem, min(4.65vw, calc(12svh - 1.3rem)), 6.05rem); }
.hero-panel--tradition .hero-heading em { font-size: 1.27em; }
.hero-panel--tradition .hero-heading .emphasis { margin-left: 1.75vw; }
.hero-panel--catering .hero-heading em { font-size: 1.2em; }
.hero-panel--catering .hero-heading .emphasis { margin-left: 0; }
.hero-heading .supporting-line { font-size: .62em; letter-spacing: -.035em; line-height: 1.3; }
.hero-panel--tradition .supporting-line { margin-top: .25em; }
.hero-panel--catering .supporting-line { font-size: .7em; margin-bottom: .14em; }
.hero-deck {
  max-width: 26rem;
  color: var(--muted);
  font-size: clamp(.9375rem, .3rem + .8svh, 1rem);
  line-height: clamp(1.65, 1.35 + .45svh, 1.8);
  margin-top: clamp(.85rem, 2.4svh, 2rem);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.65rem;
  margin-top: clamp(1.05rem, 2.9svh, 2.5rem);
}
.hero-actions .pill { max-width: 100%; }
.quiet-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition: color 220ms;
}
.quiet-link::after { content: ''; position: absolute; inset-inline: 0; bottom: .48rem; height: 1px; background: #aeb0a4; transition: background 220ms; }
.quiet-link:hover { color: var(--gold-ink); }
.quiet-link:hover::after { background: var(--gold); }
/* Caption is a real second row. Controls never occupy the figure. */
.hero-figure {
  grid-area: 1 / 6 / 2 / -1;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  contain: size;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(.5rem, 1.4svh, 1rem);
  padding-block: clamp(1.25rem, 4.2svh, 4rem) clamp(.75rem, 1.9svh, 1.5rem);
  margin-right: calc(-1 * var(--gutter));
  pointer-events: none;
}
.media-stage {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  align-self: center;
  position: relative;
  isolation: isolate;
}
.hero-picture { position: absolute; inset: 0; display: block; overflow: clip; }
.hero-picture img, .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: var(--media-focus, 54% 52%); display: block; }
.hero-picture img { mix-blend-mode: multiply; }
.hero-panel.is-active .hero-picture img { animation: scene-drift var(--scene-duration, 12s) linear both; }
@keyframes scene-drift { from { transform: scale(1.025); } to { transform: scale(1); } }
.signature-hero.is-paused .hero-picture img { animation-play-state: paused; }
.hero-panel--tradition, .hero-panel--catering { --scene-duration: 10.5s; }
.hero-picture, .hero-video {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 97%, transparent);
}
.media-stage::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(0deg, var(--paper), transparent 15%, transparent 88%, var(--paper)), linear-gradient(90deg, var(--paper), transparent 13%);
  z-index: 2;
}
.hero-video { position: absolute; inset: 0; opacity: 0; z-index: 1; background: transparent; mix-blend-mode: multiply; transition: opacity 300ms; }
.media-stage.has-video .hero-video { opacity: 1; }
.media-stage.has-video .hero-picture { opacity: 0; transition: opacity 300ms; }
.hero-panel--tradition .media-stage { aspect-ratio: 1.42; width: 92%; justify-self: end; --media-focus: 52% 56%; }
/* Chapters 02 and 03 crop their media to a shape, not a rectangle. The radii
   lived on .hero-picture alone while only chapter 01 had a film; now that
   every chapter can carry one, the video has to be cut to the same profile
   or it would square off the corner the still rounds. */
.hero-panel--tradition .hero-picture, .hero-panel--tradition .hero-video { border-radius: 40% 0 0 0; overflow: clip; }
.hero-panel--tradition .media-stage::after { background: linear-gradient(0deg, var(--paper), transparent 13%, transparent 95%, var(--paper)), linear-gradient(90deg, var(--paper), transparent 17%); border-radius: 40% 0 0 0; }
.hero-panel--catering .media-stage { aspect-ratio: 1.5; width: 94%; justify-self: end; --media-focus: 60% 50%; }
.hero-panel--catering .hero-picture, .hero-panel--catering .hero-video { border-radius: 0 0 28% 0; overflow: clip; }
.hero-figure figcaption { position: static; grid-row: 2; padding-inline: 10% var(--gutter); color: var(--muted); font-size: .75rem; line-height: 1.6; letter-spacing: .025em; }
.figure-note { display: flex; gap: .7rem; align-items: center; }
.figure-note::before { content: ''; width: 1.35rem; height: 1px; background: var(--gold); flex: none; }
.edition-note { position: absolute; right: 0; top: clamp(.9rem, 2.4svh, 1.6rem); z-index: 4; font-size: .75rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
/* The footer has two independent lanes. Every text element is in normal flow. */
.hero-footer { position: relative; z-index: 4; padding: clamp(.75rem, 1.9svh, 1.35rem) var(--gutter) clamp(1rem, 3.1svh, 2.7rem); }
.service-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 3.6vw, 4rem); align-items: center; }
.chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 3rem); min-width: 0; }
.chapter-button {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-areas: 'progress progress' 'number narrative';
  gap: clamp(.8rem, 2svh, 1.3rem) .75rem;
  text-align: left;
  align-content: start;
  min-width: 0;
  padding: .35rem 0 .5rem;
  color: var(--muted);
}
.chapter-progress { grid-area: progress; display: block; position: relative; height: 2px; background: var(--line); }
.chapter-progress-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold); }
.chapter-number { grid-area: number; font-size: .75rem; line-height: 1.9; font-variant-numeric: tabular-nums; letter-spacing: .04em; transition: color 250ms; }
.chapter-text { grid-area: narrative; display: grid; gap: clamp(.2rem, .7svh, .4rem); min-width: 0; }
.chapter-label { display: block; font-size: clamp(1rem, 1.1vw, 1.25rem); font-weight: 600; line-height: 1.45; transition: color 250ms; }
.chapter-subtitle { display: block; font-size: .8125rem; line-height: 1.6; font-weight: 400; }
.chapter-button[aria-selected=true] .chapter-label, .chapter-button[aria-selected=true] .chapter-number { color: var(--gold-ink); }
.chapter-button[aria-selected=true] .chapter-progress-fill { transform: scaleX(var(--progress, 0)); }
/* The travelling mark is a flame tip, not a dot — brand gold, small and
   contained, and the only place the accent moves. */
.chapter-button[aria-selected=true] .chapter-progress::after {
  content: '';
  position: absolute;
  top: -.18rem;
  left: clamp(.2rem, calc(var(--progress, 0) * 100%), calc(100% - .2rem));
  width: .45rem;
  height: .45rem;
  background: var(--gold);
  border-radius: 65% 15% 65% 60%;
  transform: translateX(-50%) rotate(-45deg);
}
.chapter-button:hover .chapter-label { color: var(--ink); }
.chapter-button[aria-selected=true]:hover .chapter-label { color: var(--gold-ink); }
/* Two buttons, not three. The cluster was rebalanced rather than left with a
   hole: the counter now sits closer to the arrows, the pair is spaced as a
   pair, and the rule that separates the cluster from the chapters moved in by
   the width the pause button used to occupy — so the footer reads as a
   deliberate composition and not as a row missing a control. */
.service-controls { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.25rem); border-left: 1px solid var(--line); padding-left: clamp(1.1rem, 2.2vw, 2.25rem); }
.chapter-count { display: inline-flex; align-items: baseline; gap: .55rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chapter-count strong { color: var(--ink); font-size: 1rem; font-weight: 500; min-width: 1.2em; }
.control-buttons { display: flex; align-items: center; gap: .4rem; }
.service-controls .round-button { border-color: transparent; }
.service-controls .round-button:hover { background: #e9e8df; color: var(--ink); }
[data-next]:hover svg { transform: translateX(2px); }
[data-prev]:hover svg { transform: translateX(-2px); }
.hero-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero-panel .hero-copy > :not(.hero-heading) { opacity: 0; transform: translateY(.5rem); }
.hero-panel.is-active .hero-copy > :not(.hero-heading) { opacity: 1; transform: none; transition: opacity 650ms var(--motion) 180ms, transform 650ms var(--motion) 180ms; }
.hero-panel.is-active .hero-actions { transition-delay: 300ms; }
.hero-panel.is-leaving .hero-copy { opacity: 0; transform: translateY(-.35rem); transition: opacity 130ms, transform 160ms; }
.signature-hero :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.hero-panel:focus-visible { outline-offset: -4px; }
@media (min-width: 112.5em) {
  .hero-copy { padding-block: 3rem; }
  .hero-deck { font-size: 1.0625rem; max-width: 28rem; }
  .hero-figure { padding-top: 3.5rem; padding-bottom: 2rem; }
  .hero-panel--daily .media-stage { --media-focus: 52% 50%; }
  .hero-panel--tradition .media-stage { aspect-ratio: 1.3; }
  .hero-panel--catering .media-stage { aspect-ratio: 1.38; }
  .edition-note { top: 2rem; }
}
@media (min-width: 90em) and (max-width: 112.49em) {
  .hero-panel--daily .media-stage { --media-focus: 53% 51%; }
  .hero-panel--tradition .media-stage { --media-focus: 52% 54%; }
}
/* Short desktop screens — a maximised 1366×768 or 1600×900 window, where the
   real viewport is ~632px and ~764px tall. The type and rhythm are already
   handled by the svh terms above; what is left here is framing, which no
   clamp can infer: a landscape crop keeps the food readable when the media
   lane loses height, and the subtitles under the chapter labels are the one
   piece of copy the footer can afford to give up. */
@media (min-width: 64em) and (max-height: 50em) {
  .chapter-kicker { letter-spacing: .05em; line-height: 1.6; }
  .hero-panel--daily .media-stage { --media-focus: 55% 52%; }
  .hero-panel--tradition .media-stage, .hero-panel--catering .media-stage { aspect-ratio: 1.62; }
  .hero-figure figcaption { font-size: .6875rem; }
}
@media (min-width: 64em) and (max-height: 43em) {
  .chapter-subtitle { display: none; }
  .hero-figure figcaption { display: none; }
  .hero-figure { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 74.99em) {
  .service-nav { gap: 1.5rem; }
  .service-controls { gap: .65rem; padding-left: 1rem; }
  .chapters { gap: 1.25rem; }
  .chapter-button { grid-template-columns: 1.15rem minmax(0, 1fr); column-gap: .5rem; }
  .chapter-subtitle { font-size: .75rem; }
  .hero-actions { gap: .75rem 1.25rem; }
}
@media (max-width: 63.99em) {
  /* Below the desktop breakpoint the hero stacks and scrolls: it stops being
       a height-bound screen and goes back to taking the height it needs. */
  .signature-hero { flex: 0 0 auto; min-height: 0; grid-template-rows: auto auto; overflow: visible; overflow-x: clip; }
  .hero-panel { grid-template-rows: auto auto; align-content: start; }
  .hero-copy { grid-area: 1 / 1 / 2 / -1; max-width: 38rem; padding: 3rem 0 1rem; }
  .chapter-kicker { margin-bottom: 1.75rem; }
  .hero-heading { font-size: clamp(3.75rem, 8.6vw, 6rem); }
  .hero-heading .emphasis { margin-left: 7vw; }
  .hero-panel--tradition .hero-heading, .hero-panel--catering .hero-heading { font-size: clamp(3.4rem, 7.7vw, 5.5rem); }
  .hero-panel--tradition .hero-heading .emphasis { margin-left: 5vw; }
  .hero-panel--catering .hero-heading .emphasis { margin-left: 0; }
  .hero-deck { max-width: 30rem; }
  .hero-figure { grid-area: 2 / 2 / 3 / -1; contain: none; height: clamp(24rem, 58vw, 34rem); padding-block: 1rem; gap: .75rem; }
  .hero-panel .media-stage { aspect-ratio: 16 / 9; width: 100%; }
  .hero-figure figcaption { padding-inline: 7% var(--gutter); }
  .edition-note { display: none; }
  .hero-footer { padding-top: 1.5rem; }
  .service-nav { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .service-controls { grid-row: 2; border-left: 0; border-top: 1px solid var(--line); padding: .75rem 0 0; justify-content: space-between; }
  .chapters { gap: 1.5rem; }
  .chapter-button { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .7rem; }
}
@media (max-width: 39.99em) {
  .hero-copy { padding-block: 2rem 1rem; }
  .chapter-kicker { font-size: .75rem; line-height: 1.85; letter-spacing: .04em; margin-bottom: 1.6rem; }
  .chapter-kicker::before { width: 1rem; margin-right: .5rem; }
  .hero-heading { font-size: clamp(2.65rem, 11vw, 4.2rem); overflow-wrap: anywhere; }
  .hero-heading .emphasis { margin-left: 12vw; }
  .hero-panel--tradition .hero-heading { font-size: clamp(2.45rem, 10vw, 3.9rem); }
  .hero-panel--catering .hero-heading { font-size: clamp(2.35rem, 9.8vw, 3.8rem); }
  .hero-panel--tradition .hero-heading .emphasis { margin-left: 6vw; }
  .hero-panel--catering .hero-heading .emphasis { margin-left: 0; }
  .hero-deck { line-height: 1.75; margin-top: 1.4rem; }
  .hero-actions { margin-top: 1.5rem; gap: .75rem 1.25rem; }
  .hero-actions .pill { padding: .8rem 1.1rem; gap: .85rem; white-space: normal; }
  .hero-figure { grid-column: 1 / -1; margin-left: calc(-1 * var(--gutter)); height: clamp(17rem, 76vw, 27rem); padding-block: 0 1rem; }
  .hero-figure figcaption { padding-inline: var(--gutter); font-size: .75rem; }
  .hero-panel--daily .media-stage { --media-focus: 52% 50%; }
  .hero-panel--tradition .media-stage { --media-focus: 51% 53%; }
  .hero-panel--catering .media-stage { --media-focus: 59% 50%; }
  .hero-footer { padding-block: 1.25rem 1.5rem; }
  .chapters { gap: .9rem; }
  .chapter-button { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'progress' 'number' 'narrative'; row-gap: .5rem; padding-bottom: .75rem; }
  .chapter-number { margin-top: .5rem; font-size: .75rem; }
  .chapter-label { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
  .chapter-subtitle { display: none; }
  .service-nav { gap: .5rem; }
  .service-controls { padding-top: .75rem; }
}
@media (max-width: 23em) {
  .hero-actions .pill { padding-inline: .95rem; }
}
.hero-footer { container-type: inline-size; container-name: controls; }
@container controls (max-width: 58em) {
  .service-nav { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .service-controls { border-left: 0; border-top: 1px solid var(--line); padding: .75rem 0 0; justify-content: space-between; }
}
@container controls (max-width: 20em) {
  .service-controls { flex-wrap: wrap; }
  .control-buttons { max-width: 100%; flex-wrap: wrap; }
}
@container herocanvas (max-width: 62em) {
  .hero-panel { grid-template-rows: auto auto; align-content: start; }
  .hero-copy { grid-area: 1 / 1 / 2 / -1; max-width: 38rem; padding-right: 0; }
  .hero-figure { grid-area: 2 / 1 / 3 / -1; contain: none; height: clamp(17rem, 65vw, 34rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel, .hero-panel * { transition: none !important; animation: none !important; }
  .hero-heading .line > span, .hero-picture img { transform: none !important; }
  .hero-panel:not(.is-active) { visibility: hidden; }
  .chapter-progress-fill { transform: none !important; opacity: 0; }
  .chapter-button[aria-selected=true] .chapter-progress-fill { opacity: 1; }
  .chapter-button[aria-selected=true] .chapter-progress::after { display: none; }
}
@media (scripting: none) {
  .hero-panel:first-child .hero-heading .line > span { transform: none; }
  .hero-panel:first-child .hero-copy > :not(.hero-heading) { opacity: 1; transform: none; }
  .service-controls { display: none; }
}