/* ==========================================================================
   Red Shrimp

   Two grounds, taken straight from the restaurant's own identity. Dark is the
   end card of the brand film and the header of the old site: near-black, deep
   navy chapters, the hand-drawn seafood line art in brand blue. Light is the
   old site's footer: white, ice-blue planes, and a flat brand-blue chapter with
   the same line art in white. Red is the "RED" in the logo and nothing else:
   the one action on a screen.

   Film sections (the hero, the scrubbed sequence, the night sign) stay dark in
   both themes. Footage is dark; fading it into white reads as washed out.

   Structure borrows from the distillery sites the brief pointed at: tall pinned
   chapters, images that wipe in along one edge, a photograph that grows from a
   window to full bleed, and one solid-colour chapter per page.
   ========================================================================== */

/* ── type ────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 400 800; font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 400 800; font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/instrument-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── tokens ──────────────────────────────────────────────────────────────────
   Two layers. The --p-* palette is what a theme swaps. The semantic tokens
   (--bg, --text, --line …) point at the palette, so a section can re-point
   them locally: a blue chapter sets --text to its own ink and every child
   follows, and a white card inside that chapter points straight back at
   --p-text. Every pair below was checked for WCAG AA in both themes. */
:root {
  color-scheme: dark;

  /* measured off redshrimps.com computed styles */
  --brand-red:  #D13138;
  --brand-blue: #02A0D1;

  /* film: identical in both themes */
  --film:        #05080C;
  --film-text:   #F3F6F9;
  --film-text-2: rgba(243, 246, 249, .8);
  --film-line:   rgba(243, 246, 249, .22);

  /* dark palette: the film's end card */
  --p-bg:    #05080C;
  --p-bg-2:  #0A121B;
  --p-bg-3:  #111C28;
  --p-text:   #F3F6F9;   /* 18.5 on bg */
  --p-text-2: #A9B8C6;   /*  9.9 */
  --p-text-3: #8395A7;   /*  6.5, 5.6 on bg-3 */
  --p-line:   rgba(243, 246, 249, .14);
  --p-line-2: rgba(243, 246, 249, .07);
  --p-blue-ink: #3DBBE3; /*  9.0 */
  --p-red-ink:  #F2646A; /*  6.5 */

  --deep:         #06223A;                  /* navy chapter */
  --on-deep:      #F3F6F9;
  --on-deep-soft: rgba(243, 246, 249, .78);
  --deep-line:    rgba(243, 246, 249, .2);
  --deep-accent:  #3DBBE3;                  /* 7.2 on deep */

  --art:       #1597C8;   /* line art on the page ground */
  --art-o:     .17;
  --art-deep:  #3DBBE3;   /* line art on a chapter */
  --art-deep-o: .2;
  --art-lit:   .75;

  --bar-bg: rgba(5, 8, 12, .8);
  --logo-light: block;
  --logo-ink: none;

  /* semantic */
  --bg:   var(--p-bg);
  --bg-2: var(--p-bg-2);
  --bg-3: var(--p-bg-3);
  --text:   var(--p-text);
  --text-2: var(--p-text-2);
  --text-3: var(--p-text-3);
  --line:   var(--p-line);
  --line-2: var(--p-line-2);
  --blue-ink: var(--p-blue-ink);
  --red-ink:  var(--p-red-ink);

  --f-disp: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --f-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

  --step--1: .8125rem;
  --step-0:  1.0625rem;
  --step-1:  clamp(1.15rem, 1.02rem + .55vw, 1.4rem);
  --step-2:  clamp(1.4rem,  1.15rem + 1.1vw, 2rem);
  --step-3:  clamp(2.1rem,  1.4rem  + 3.2vw, 4rem);
  --step-4:  clamp(2.6rem,  1.3rem  + 5.8vw, 6.4rem);

  --wrap: 1320px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --rhythm: clamp(4.5rem, 10vw, 8.5rem);
  --bar-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* light palette: the old site's footer, white and brand blue */
:root[data-theme="light"] {
  color-scheme: light;

  --p-bg:    #FFFFFF;
  --p-bg-2:  #EDF6FA;
  --p-bg-3:  #DDEEF6;
  --p-text:   #08192A;   /* 17.8 on bg */
  --p-text-2: #34495B;   /*  9.3 */
  --p-text-3: #56697A;   /*  5.7, 4.8 on bg-3 */
  --p-line:   rgba(8, 25, 42, .14);
  --p-line-2: rgba(8, 25, 42, .07);
  --p-blue-ink: #02739B; /*  5.4 */
  --p-red-ink:  #C0262D; /*  5.9 */

  --deep:         #037DA6;   /* the footer blue, one step deeper so white body text passes (4.7) */
  --on-deep:      #FFFFFF;
  --on-deep-soft: #FFFFFF;   /* any transparency drops below 4.5 on this blue */
  --deep-line:    rgba(255, 255, 255, .38);
  --deep-accent:  #FFFFFF;

  --art:       #02A0D1;
  --art-o:     .16;
  --art-deep:  #FFFFFF;
  --art-deep-o: .24;
  --art-lit:   .6;

  --bar-bg: rgba(255, 255, 255, .88);
  --logo-light: none;
  --logo-ink: block;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-0)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   /* hidden makes a scroll container in some engines, which breaks sticky */
  transition: background-color .35s ease, color .35s ease;
}

/* display voice: heavy, expanded, set in capitals like a sign over a counter */
h1, h2, h3, h4 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 108%;
  line-height: .94;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
}
h1, h2 { text-transform: uppercase; }
h3, h4 { letter-spacing: -.025em; }

p { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
strong, b { font-weight: 600; }

::selection { background: var(--brand-red); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: 0;
  transform: translateY(-140%); z-index: 100;
  background: var(--brand-red); color: #FFFFFF;
  font-family: var(--f-body); font-weight: 600; font-size: var(--step--1);
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { transform: translateY(0); }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .grain { opacity: .03; mix-blend-mode: multiply; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--rhythm); position: relative; }
.sec--tight { padding-block: calc(var(--rhythm) * .55); }

.sec__head { max-width: 30ch; display: grid; gap: 1.1rem; justify-items: start; }
.sec__head h2 { font-size: var(--step-3); }
.sec__head p { color: var(--text-2); font-size: var(--step-1); max-width: 46ch; }
.sec__head--wide { max-width: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .sec__head--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: 4rem; }
  .sec__head--wide .eyebrow { grid-column: 1 / -1; }
}

/* a label that sits on a rule, with a chapter number when it has one */
/* (0,2,0) on purpose: every context below styles its own <p>s at (0,1,1) */
.eyebrow, .sec__head .eyebrow, .grow__copy > .eyebrow, .filmband__copy > .eyebrow,
.prose > .eyebrow, .nf > .eyebrow, .phead__inner > .eyebrow, .mhead__inner > .eyebrow {
  justify-self: stretch;
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-body); font-weight: 500;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-ink);
}
.eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.eyebrow b { font-weight: 600; color: var(--text); }

/* ── tags ────────────────────────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.tags li, .tag {
  font-family: var(--f-body); font-weight: 500;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  color: var(--text-2);
}
.tag {
  display: inline-block; margin-inline-start: .5rem; vertical-align: .15em;
  padding: .22rem .45rem; font-size: .5625rem; letter-spacing: .14em;
  color: var(--red-ink); border-color: currentColor;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--f-body); font-weight: 600;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem 1.8rem;
  border: 1px solid var(--btn-bd); border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration: none; cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.btn::after { content: "\2192"; font-size: 1.05em; line-height: 0; transition: transform .35s var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }
/* a fill that rises from the bottom edge instead of a flat colour swap */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--text);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { --btn-fg: var(--bg); --btn-bd: var(--text); }

.btn--shell { --btn-bg: var(--brand-red); --btn-fg: #FFFFFF; --btn-bd: var(--brand-red); }
.btn--ghost:hover { --btn-fg: var(--bg); }
.btn--lg { padding: 1.15rem 2.2rem; font-size: .875rem; }
.btn--full { width: 100%; }

/* ── masthead ────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 1.4rem;
  padding: 0 var(--gut);
  background: var(--bar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-2);
  transition: background-color .4s ease, border-color .4s ease, transform .4s var(--ease-out);
}
/* the old site's red top strip, kept as a hairline */
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand-red);
}
.bar__logo { flex: none; line-height: 0; display: block; }
.bar__logo img { width: 124px; height: auto; }
.logo--light { display: var(--logo-light); }
.logo--ink { display: var(--logo-ink); }

.bar__nav { display: flex; align-items: center; gap: 1.9rem; margin-inline-start: auto; }
.bar__nav a {
  position: relative;
  font-family: var(--f-body); font-weight: 500;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  padding-block: .4rem;
  transition: color .25s ease;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand-red);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.bar__nav a:hover { color: var(--text); }
.bar__nav a:hover::after, .bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar__nav a[aria-current="page"] { color: var(--text); }
.bar__cta { flex: none; padding: .8rem 1.3rem; }

.theme-toggle {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

.burger {
  display: none; flex: none; width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.burger span {
  display: block; width: 17px; height: 1.5px; margin: 4px auto;
  background: var(--text); transition: transform .22s ease, opacity .22s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* on a film page the bar floats over the footage until the reader scrolls */
.is-film .bar { position: fixed; left: 0; right: 0; }
.is-film .bar:not([data-solid="true"]) {
  --text: var(--film-text); --text-2: var(--film-text-2); --line: var(--film-line);
  --logo-light: block; --logo-ink: none;
  background: linear-gradient(to bottom, rgba(5, 8, 12, .55), rgba(5, 8, 12, 0));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

@media (max-width: 900px) {
  .burger { display: block; }
  .bar__cta { display: none; }
  .bar__nav { display: none !important; }
  .theme-toggle { margin-inline-start: auto; }
  .bar__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .25rem var(--gut) 1.5rem;
    background: var(--p-bg);
    border-bottom: 1px solid var(--p-line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility 0s .22s;
  }
  .bar__nav[data-open="true"] {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform .22s ease, opacity .22s ease, visibility 0s;
  }
  /* the open panel is always on the page ground, never on the film */
  .bar .bar__nav a {
    padding-block: 1rem; font-size: .875rem;
    color: var(--p-text-2); border-bottom: 1px solid var(--p-line-2);
  }
  .bar .bar__nav a[aria-current="page"], .bar .bar__nav a:hover { color: var(--p-text); }
  .bar__nav a::after { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .bar__nav { transition: visibility 0s .22s; transform: none; }
    .bar__nav[data-open="true"] { transition: visibility 0s; transform: none; }
  }
}

/* display voice on something that is not a heading */
.h-disp {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  line-height: .94; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance;
}

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs--top { padding-top: 1.5rem; }
.crumbs { font-size: var(--step--1); color: var(--text-3); position: relative; z-index: 1; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-inline-start: .45rem; color: var(--text-3); }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); }

/* ══ THE LINE ART ═══════════════════════════════════════════════════════════
   The restaurant's own hand-drawn seafood, traced to vector from the old
   site's header, footer and the brand film's end card. Shipped as white SVG
   and tinted through mask-image, so one file serves blue-on-black and
   white-on-blue. Two layers: a quiet base, and a lit copy that only shows in a
   soft circle around the pointer (site.js sets --mx / --my), the way a torch
   picks a drawing out of a chalkboard. Decorative, aria-hidden, gone in print. */
.lineart {
  --art-src: url('/assets/img/lineart-sea.svg');
  --art-size: max(1280px, 100%) auto;
  --art-pos: 50% 0%;
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.lineart::before, .lineart::after {
  content: ""; position: absolute; inset: -6% 0;
  background: var(--art);
  -webkit-mask-image: var(--art-src);
          mask-image: var(--art-src);
  -webkit-mask-size: var(--art-size);  mask-size: var(--art-size);
  -webkit-mask-position: var(--art-pos); mask-position: var(--art-pos);
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
  transform: translate3d(0, var(--art-shift, 0px), 0);
}
.lineart::before { opacity: var(--art-o); }
.lineart::after {
  opacity: 0;
  transition: opacity .6s ease;
  -webkit-mask-image: var(--art-src), radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
          mask-image: var(--art-src), radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
  -webkit-mask-size: var(--art-size), 100% 100%;  mask-size: var(--art-size), 100% 100%;
  -webkit-mask-position: var(--art-pos), 0 0;     mask-position: var(--art-pos), 0 0;
  -webkit-mask-composite: source-in;              mask-composite: intersect;
}
.lineart.is-lit::after { opacity: var(--art-lit); }

/* the spark: a round window onto a second copy of the drawing. The window is
   moved by transform and the copy inside it is counter-moved by the same
   amount, so the drawing holds still while the bright patch travels - and the
   compositor does all of it, with no repaint and no style invalidation. */
.lineart.has-spark::after { display: none; }      /* the cursor light is not in play */
.lineart__lens {
  position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 50%;
  opacity: 0; transition: opacity .55s ease; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, .55) 54%, transparent 76%);
          mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, .55) 54%, transparent 76%);
}
.lineart.is-sparking .lineart__lens { opacity: 1; }
.lineart__lit {
  position: absolute; top: 0; left: 0;
  width: var(--art-w, 100%); height: var(--art-h, 100%);
  background: var(--art); opacity: calc(var(--art-lit, .75) + .25);
  -webkit-mask-image: var(--art-src);   mask-image: var(--art-src);
  -webkit-mask-size: var(--art-size);   mask-size: var(--art-size);
  -webkit-mask-position: var(--art-pos); mask-position: var(--art-pos);
  -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
}
.lineart.is-sparking .lineart__lens,
.lineart.is-sparking .lineart__lit { will-change: transform; }
/* the dim layer is inset to leave room for the drift, which touch does not
   run - flush, so the spark lines up with the drawing underneath it */
.has-spark::before { inset: 0; }

.lineart--foot { --art-src: url('/assets/img/lineart-foot.svg'); --art-pos: 50% 100%; }
/* the end card: the header drawing, which leaves its centre open for the logo */
.lineart--card { --art-size: max(1200px, 104%) auto; --art-pos: 50% 50%; }
.lineart--side { --art-size: max(1500px, 120%) auto; --art-pos: 100% 0%; }

/* ══ FILM ════════════════════════════════════════════════════════════════
   Anything built on footage uses the film tokens and ignores the theme. */
.film {
  --text: var(--film-text); --text-2: var(--film-text-2); --text-3: var(--film-text-2);
  --line: var(--film-line); --blue-ink: #3DBBE3; --red-ink: #F2646A;
  background: var(--film); color: var(--text);
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; }
.hero--film {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
  padding-block: calc(var(--bar-h) + 2rem) clamp(2.5rem, 7vw, 5.5rem);
}
.hero--film .pour__media { position: absolute; inset: 0; z-index: -2; }
.hero--film .pour__media video, .hero--film .pour__media img, .hero--film .pour__media picture {
  width: 100%; height: 100%; object-fit: cover;
}
.hero--film::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--film) 2%, rgba(5, 8, 12, .62) 38%, rgba(5, 8, 12, .1) 70%, rgba(5, 8, 12, .35) 100%),
    linear-gradient(to right, rgba(5, 8, 12, .55), rgba(5, 8, 12, 0) 60%);
}
.hero__inner { width: 100%; }
.hero__copy { display: grid; gap: 1.4rem; justify-items: start; max-width: 62rem; }
.hero__h { font-size: clamp(2.7rem, 1rem + 6.6vw, 7.6rem); line-height: .9; max-width: 13ch; }
.hero__sub { font-size: var(--step-1); color: var(--text-2); max-width: 44ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 3rem); padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.scrollcue {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--f-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2);
}
.scrollcue::after {
  content: ""; width: 1px; height: 34px; background: currentColor;
  transform-origin: 50% 0; animation: cue 2.2s var(--ease-out) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: 50% 0; } 56% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }

/* ── open / closed ───────────────────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-body); font-weight: 500;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); padding: .45rem .85rem; border: 1px solid var(--line);
}
.status__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--text-3); }
.status[data-open="true"]  .status__dot { background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.status[data-open="false"] .status__dot { background: var(--brand-red); }

/* ══ THE BUILD ════════════════════════════════════════════════════════════
   One pinned sequence cut from the restaurant's own film. The clip is scrubbed
   by scroll and each beat declares the progress point it belongs to. It ends
   on the brand film's own end card: black, the line art, the logo. With JS
   off or reduced motion it is a still with every beat legible beneath it. */
.build { position: relative; }
.build__sticky {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.build__frame { grid-area: 1 / 1 / -1 / -1; overflow: hidden; }
.build__frame video, .build__frame img, .build__frame picture {
  width: 100%; height: 100vh; height: 100svh; object-fit: cover;
}
.build__wash {
  grid-area: 1 / 1 / -1 / -1; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--film) 3%, rgba(5, 8, 12, .5) 40%, rgba(5, 8, 12, .05) 72%, rgba(5, 8, 12, .5) 100%);
}
.build__wash::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 100%, rgba(6, 34, 58, .7), rgba(6, 34, 58, 0) 60%);
  opacity: 0; transition: opacity .8s ease;
}
.build[data-beat="1"] .build__wash::after, .build[data-beat="2"] .build__wash::after { opacity: 1; }
.build[data-beat="3"] .build__wash::after { opacity: .6; background: radial-gradient(120% 80% at 0% 100%, rgba(120, 22, 26, .55), rgba(120, 22, 26, 0) 60%); }
.build__wash { position: relative; }

.build__rail {
  grid-area: 1 / 1 / 2 / -1; z-index: 3;
  padding: calc(var(--bar-h) + clamp(.5rem, 2vw, 1.25rem)) var(--gut) 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  font-family: var(--f-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
}
.build__rail i {
  font-style: normal; color: var(--text-2);
  display: flex; align-items: center; gap: .55rem;
  transition: color .4s ease;
}
.build__rail i::before {
  content: ""; width: 22px; height: 2px; background: var(--line);
  transition: background .4s ease, width .5s var(--ease-out);
}
.build__rail i.is-on { color: var(--text); }
.build__rail i.is-on::before { background: var(--brand-red); width: 38px; }

.build__beats {
  grid-area: 3 / 1 / -1 / -1; z-index: 3; position: relative;
  padding: 0 var(--gut) clamp(2.5rem, 7vw, 5rem);
  display: grid; min-height: 14rem; align-content: end;
}
.beat {
  grid-area: 1 / 1; max-width: 36ch;
  display: grid; gap: 1rem; justify-items: start;
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .7s var(--ease-out);
}
.beat.is-on { opacity: 1; transform: none; }
.beat__n {
  font-family: var(--f-body); font-weight: 500; font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue-ink);
}
.beat b {
  display: block;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  font-size: var(--step-3); line-height: .92; letter-spacing: -.035em;
  text-transform: uppercase;
}
.beat > span { font-size: var(--step-0); color: var(--text-2); max-width: 42ch; }
.beat .tags li { border-color: rgba(243, 246, 249, .32); color: var(--text); }

/* the end card, rebuilt live: the film's own last frame */
.build__card {
  grid-area: 1 / 1 / -1 / -1; z-index: 4;
  position: relative; isolation: isolate;
  display: grid; place-items: center; align-content: center; gap: 1.6rem;
  padding: var(--bar-h) var(--gut) 3rem;
  background: var(--film); text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s .7s;
}
.build__card .lineart { --art: #2BB5C9; --art-o: .9; --art-lit: 1; }
.build__card > :not(.lineart) { position: relative; z-index: 1; }
.build__card img { width: min(440px, 72vw); height: auto; }
.build__card p {
  font-family: var(--f-body); font-weight: 500; font-size: .75rem;
  letter-spacing: .5em; text-transform: uppercase; color: var(--text-2);
  margin-top: -.6rem;
}
.build.is-card .build__card { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.build.is-card .beat, .build.is-card .build__rail { opacity: 0; }
.build__card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--film) 0%, rgba(5, 8, 12, .85) 40%, rgba(5, 8, 12, 0) 100%);
}

@media (max-width: 620px) {
  .beat { max-width: none; }
  .build__rail { gap: .25rem .9rem; font-size: .5625rem; }
  .build__rail i::before { width: 12px; }
  .build__rail i.is-on::before { width: 22px; }
}

/* ══ CHAPTER ══════════════════════════════════════════════════════════════
   One solid-colour chapter per page: navy at night, the footer blue by day,
   the line art over it. It re-points the semantic tokens, so everything
   inside follows without a single override per component. */
.chapter {
  --text: var(--on-deep); --text-2: var(--on-deep-soft); --text-3: var(--on-deep-soft);
  --line: var(--deep-line); --line-2: var(--deep-line);
  --blue-ink: var(--deep-accent); --red-ink: var(--on-deep);
  --art: var(--art-deep); --art-o: var(--art-deep-o);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: var(--text);
}
.chapter > .wrap, .chapter > .sec { position: relative; z-index: 1; }
/* a card on a chapter goes back to the page ground */
.chapter .card-ground {
  --text: var(--p-text); --text-2: var(--p-text-2); --text-3: var(--p-text-3);
  --line: var(--p-line); --line-2: var(--p-line-2);
  --blue-ink: var(--p-blue-ink); --red-ink: var(--p-red-ink);
  background: var(--bg); color: var(--text);
}
.chapter .btn--ghost { --btn-bd: var(--deep-line); }
.chapter .card-ground .btn--ghost { --btn-bd: var(--p-line); }
.chapter .sec + .sec { padding-top: 0; }
.chapter__split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
@media (min-width: 960px) { .chapter__split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.chapter__split .ratings { margin-top: 0; }

/* a wide still under an interior page header */
.wide-media { overflow: hidden; }
.wide-media picture, .wide-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .wide-media picture, .wide-media img { aspect-ratio: 4 / 3; } }
.page-top--nf { border-bottom: 0; }

/* ── film band: the night sign between chapters ──────────────────────────── */
.filmband { position: relative; isolation: isolate; overflow: hidden; min-height: min(86svh, 780px); display: grid; align-items: end; }
.filmband__media { position: absolute; inset: -8% 0; z-index: -2; }
.filmband__media video, .filmband__media img, .filmband__media picture { width: 100%; height: 100%; object-fit: cover; }
.filmband::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--film) 0%, rgba(5, 8, 12, .55) 45%, rgba(5, 8, 12, .15) 100%);
}
.filmband__copy { padding-block: clamp(3rem, 8vw, 6rem); display: grid; gap: 1.2rem; justify-items: start; max-width: 40rem; }
.filmband__copy h2 { font-size: var(--step-4); }
.filmband__copy p { color: var(--text-2); font-size: var(--step-1); max-width: 40ch; }

/* ══ GROW: a photograph that opens from a window to full bleed ═════════════ */
.grow { position: relative; }
.grow__stage {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end;
}
.grow__media { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.grow__media picture, .grow__media img { width: 100%; height: 100%; object-fit: cover; }
.grow__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 12, .88) 0%, rgba(5, 8, 12, .35) 45%, rgba(5, 8, 12, 0) 75%);
}
.grow__copy {
  --text: var(--film-text); --text-2: var(--film-text-2); --line: var(--film-line); --blue-ink: #3DBBE3;
  position: relative; z-index: 1; color: var(--text);
  padding-block: clamp(3rem, 8vw, 6rem);
  display: grid; gap: 1.2rem; justify-items: start;
}
.grow__copy h2 { font-size: clamp(3rem, 1rem + 9vw, 10rem); line-height: .86; }
.grow__copy > p { color: var(--text-2); font-size: var(--step-1); max-width: 46ch; }
.grow__notes { display: grid; gap: 1px; width: 100%; margin-top: .8rem; background: var(--line); }
@media (min-width: 780px) { .grow__notes { grid-template-columns: repeat(3, 1fr); } }
.note { display: grid; gap: .4rem; padding: 1.2rem 1.3rem; background: rgba(5, 8, 12, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--step--1); color: var(--text-2); }
.note b {
  display: block; font-family: var(--f-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-ink);
}

/* ── interior page header ────────────────────────────────────────────────── */
.phead { position: relative; isolation: isolate; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.phead .lineart { --art-o: .12; }
.phead__inner { position: relative; z-index: 1; display: grid; gap: 1.3rem; max-width: 34ch; justify-items: start; }
.phead h1 { font-size: var(--step-4); }
.phead__lead { font-size: var(--step-1); color: var(--text-2); max-width: 46ch; }
.page-top { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.page-top > :not(.lineart) { position: relative; z-index: 1; }

/* ══ MENU ═════════════════════════════════════════════════════════════════ */
.mhead { position: relative; isolation: isolate; overflow: hidden; min-height: 78svh; display: grid; align-items: end; }
.mhead__media { position: absolute; inset: 0; z-index: -2; }
.mhead__media video, .mhead__media img, .mhead__media picture { width: 100%; height: 100%; object-fit: cover; }
.mhead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--film) 0%, rgba(5, 8, 12, .6) 42%, rgba(5, 8, 12, .2) 75%, rgba(5, 8, 12, .5) 100%),
    linear-gradient(to right, rgba(5, 8, 12, .6), rgba(5, 8, 12, 0) 65%);
}
.mhead__inner { padding-block: calc(var(--bar-h) + 3rem) clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.3rem; justify-items: start; }
.mhead h1 { font-size: clamp(3.4rem, 1rem + 11vw, 12rem); line-height: .84; }
.mhead__lead { color: var(--text-2); font-size: var(--step-1); max-width: 48ch; }
.mhead__acts { display: flex; flex-wrap: wrap; gap: .7rem; }
.mhead .crumbs { padding-top: 0 !important; }

/* sticky course index + search: the menu's own navigation */
.mnav {
  position: sticky; top: var(--bar-h); z-index: 40;
  background: var(--bar-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-block: 1px solid var(--line-2);
}
.is-film .mnav { top: var(--bar-h); }
.mnav__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 60px; }
.mnav__list {
  display: flex; gap: .2rem; list-style: none; margin: 0; padding: .55rem 0;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
          mask-image: linear-gradient(to right, #000 88%, transparent);
}
.mnav__list::-webkit-scrollbar { display: none; }
.mnav__list a {
  display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap;
  padding: .55rem .8rem;
  font-family: var(--f-body); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; border: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.mnav__list a small { font-size: .625rem; color: var(--text-3); letter-spacing: .08em; }
.mnav__list a:hover { color: var(--text); border-color: var(--line); }
.mnav__list a.is-on { color: #FFFFFF; background: var(--brand-red); border-color: var(--brand-red); }
.mnav__list a.is-on small { color: rgba(255, 255, 255, .85); }

.msearch { position: relative; flex: 0 0 min(19rem, 38%); }
.msearch label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.msearch input {
  width: 100%; font: 400 .9375rem/1.4 var(--f-body); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 0;
  padding: .7rem .9rem .7rem 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238395A7'%3E%3Cpath d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 15px; background-position: .8rem 50%;
}
.msearch input:focus { border-color: var(--blue-ink); outline: none; }
.msearch input::placeholder { color: var(--text-3); }
.msearch__count { font-size: var(--step--1); color: var(--text-3); min-height: 1.4em; margin-top: 1.25rem; }
@media (max-width: 760px) {
  .mnav__inner { flex-wrap: wrap; gap: 0; padding-block: .55rem; }
  .msearch { flex: 1 0 100%; order: -1; }
  .mnav__list { padding-bottom: 0; }
}

/* signature grid */
.sigs { display: grid; gap: 1px; margin-top: clamp(2rem, 4vw, 3rem); background: var(--line-2); }
@media (min-width: 900px) { .sigs { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 18rem; }
  .sig--lead { grid-column: span 2; grid-row: span 2; } }
@media (min-width: 600px) and (max-width: 899px) { .sigs { grid-template-columns: repeat(2, 1fr); }
  .sig--lead { grid-column: span 2; } }
.sig { position: relative; margin: 0; overflow: hidden; background: var(--bg-2); min-height: 17rem; }
.sig picture { width: 100%; height: 100%; transition: transform 1.1s var(--ease-out); }
.sig img { width: 100%; height: 100%; object-fit: cover; }
.sig:hover picture { transform: scale(1.05); }
.sig--plate { background: var(--film); }
.sig--plate img { object-fit: contain; padding: 8% 10% 30%; }
.sig figcaption {
  --text: var(--film-text); --text-2: var(--film-text-2);
  position: absolute; inset: auto 0 0 0; display: grid; gap: .3rem;
  padding: 4.5rem 1.35rem 1.35rem; color: var(--text);
  background: linear-gradient(to top, rgba(5, 8, 12, .94), rgba(5, 8, 12, 0));
}
.sig figcaption h3 { font-size: var(--step-2); text-transform: uppercase; }
.sig figcaption p { font-size: var(--step--1); color: var(--text-2); }
.sig__n {
  position: absolute; top: 1rem; left: 1.1rem; z-index: 1;
  font-family: var(--f-body); font-weight: 600; font-size: .625rem; letter-spacing: .2em;
  color: #FFFFFF; background: var(--brand-red); padding: .3rem .5rem;
}

/* build your bucket */
.bucket { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .bucket { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.bucket__media picture, .bucket__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bucket__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.bucket__step { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.bucket__step:last-child { border-bottom: 1px solid var(--line); }
.bucket__num {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: 2.4rem; line-height: .9; letter-spacing: -.04em; color: var(--blue-ink);
}
.bucket__step h3 { font-size: var(--step-2); text-transform: uppercase; margin-bottom: .6rem; }
.bucket__step p { color: var(--text-2); max-width: 46ch; }
.bucket__step .tags { margin-top: .9rem; }
.bucket__step .tags li { color: var(--text); }

/* the courses */
.courses { display: grid; gap: 0; margin-top: 0; }
.course {
  display: grid; gap: 1.2rem clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--bar-h) + 70px);
}
@media (min-width: 900px) { .course { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.course[hidden] { display: none; }
.course__head { display: grid; gap: .8rem; align-content: start; }
@media (min-width: 900px) { .course__head { position: sticky; top: calc(var(--bar-h) + 90px); } }
.course__num {
  font-family: var(--f-body); font-weight: 500; font-size: .6875rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue-ink);
}
.course__head h3 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); text-transform: uppercase; }
.course__note { color: var(--text-2); max-width: 36ch; }
.course__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 640px) { .course__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.course__list li { display: grid; gap: .25rem; padding-block: 1rem; border-bottom: 1px solid var(--line-2); align-content: start; }
.course__list li[hidden] { display: none; }
.mi__n { font-family: var(--f-disp); font-weight: 700; font-stretch: 104%; font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.2; }
.mi__d { font-size: var(--step--1); color: var(--text-2); line-height: 1.5; }
.course mark { background: rgba(2, 160, 209, .28); color: inherit; padding: 0 .08em; }
.updated { font-size: var(--step--1); color: var(--text-3); }

/* ── best sellers ────────────────────────────────────────────────────────── */
.catch__list { display: grid; gap: 1px; background: var(--line-2); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .catch__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catch__list { grid-template-columns: repeat(3, 1fr); } .dish--wide { grid-column: span 2; } }
.dish { display: flex; flex-direction: column; background: var(--bg); }
.dish__img { overflow: hidden; }
.dish__img picture { transition: transform 1.1s var(--ease-out); }
.dish:hover .dish__img picture { transform: scale(1.04); }
.dish img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dish--wide img { aspect-ratio: 16/9; }
.dish--plate .dish__img { background: var(--film); }
.dish--plate img { object-fit: contain; padding: 6% 12%; }
.dish__t { display: grid; gap: .45rem; padding: 1.5rem 1.4rem 1.7rem; }
.dish__t h3 { font-size: var(--step-2); text-transform: uppercase; }
.dish__t p { color: var(--text-2); font-size: var(--step--1); }
.catch__more { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ── split ───────────────────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split__media { overflow: hidden; }
.split__media img, .split__media picture { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── branches ────────────────────────────────────────────────────────────── */
.branches__grid { display: grid; gap: 1px; background: var(--line-2); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 820px) { .branches__grid { grid-template-columns: repeat(2, 1fr); } }
.chapter .branches__grid { gap: clamp(1rem, 2vw, 1.5rem); background: none; }
.branch { display: flex; flex-direction: column; background: var(--bg-2); }
.branch__media { overflow: hidden; }
.branch__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.branch__body { display: grid; gap: 1rem; padding: 1.8rem 1.7rem 2rem; }
.branch__body h2, .branch__body h3 { font-size: var(--step-2); text-transform: uppercase; }
.branch__body h3 a { text-decoration: none; }
.branch__body h3 a:hover { text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 6px; }
.branch__addr { color: var(--text-2); font-size: var(--step--1); }
.hours { display: grid; gap: .4rem; margin: 0; font-size: var(--step--1); }
.hours > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; border-bottom: 1px solid var(--line-2); }
.hours dt { color: var(--text-3); }
.hours dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.branch__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

/* ── prose ───────────────────────────────────────────────────────────────── */
.prose { display: grid; gap: 1.3rem; max-width: 62ch; justify-items: start; }
.prose p { color: var(--text-2); }
.prose p + h2 { margin-top: 1.4rem; }
.prose h2 { font-size: var(--step-2); }
.prose__lead { font-size: var(--step-1); color: var(--text) !important; }
.prose a { color: var(--text); text-decoration-color: var(--brand-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a.btn { text-decoration: none; }

/* ── forms ───────────────────────────────────────────────────────────────── */
.book__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .book__grid { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); } }
.book__intro { display: grid; gap: 1rem; }
.book__intro p { color: var(--text-2); }
.book__alt a { color: var(--text); text-decoration-color: var(--brand-red); text-underline-offset: 4px; }

.form {
  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-2); border: 1px solid var(--line);
}
.field { display: grid; gap: .45rem; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
@media (max-width: 560px) { .field--half { grid-column: 1 / -1; } }
.field label {
  font-family: var(--f-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
}
.opt { letter-spacing: 0; text-transform: none; color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--f-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 0;
  padding: .85rem .9rem; transition: border-color .22s ease;
}
.field textarea { resize: vertical; min-height: 3.4rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-ink); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red-ink); }
.err { font-size: .75rem; color: var(--red-ink); }
.err:empty { display: none; }
.form .btn { grid-column: 1 / -1; }
.form__msg { grid-column: 1 / -1; font-size: var(--step--1); color: var(--text-2); }
.form__msg:empty { display: none; }
.form__msg[data-state="ok"] { color: var(--blue-ink); }
.form__msg[data-state="err"] { color: var(--red-ink); }

/* ── faq ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 72ch; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-disp); font-weight: 700; font-stretch: 104%;
  font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--f-body); font-weight: 400; font-size: 1.2rem;
  color: var(--text); border: 1px solid var(--line); transition: transform .35s var(--ease-out), background-color .25s ease;
}
.faq details[open] summary::after { content: "\2212"; background: var(--brand-red); border-color: var(--brand-red); color: #FFFFFF; }
.faq details > div { padding-bottom: 1.5rem; color: var(--text-2); max-width: 62ch; }
.faq details > div p + p { margin-top: .8rem; }

/* ── ratings ─────────────────────────────────────────────────────────────── */
.ratings { display: grid; gap: 1px; background: var(--line); margin-top: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line); }
@media (min-width: 620px) { .ratings { grid-template-columns: repeat(3, 1fr); } }
.rating { background: var(--deep); padding: 2rem 1.6rem; display: grid; gap: .45rem; }
.rating__score {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 116%;
  font-size: clamp(3rem, 2rem + 4vw, 5.6rem); line-height: .9; letter-spacing: -.05em; color: var(--blue-ink);
}
.rating__src { font-family: var(--f-body); font-weight: 500; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.rating__n { font-size: var(--step--1); color: var(--text-2); }

/* ── 404 / thanks ────────────────────────────────────────────────────────── */
.nf { position: relative; z-index: 1; display: grid; gap: 1.4rem; justify-items: start; max-width: 56ch; padding-block: clamp(4rem, 11vw, 8rem); }
.nf p.nf__code {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 125%;
  font-size: clamp(5rem, 2rem + 14vw, 13rem); letter-spacing: -.06em; line-height: .8;
  color: var(--brand-red);
}
.nf h1 { font-size: var(--step-3); }
.nf p { color: var(--text-2); }
.nf a:not(.btn) { color: var(--text); text-decoration-color: var(--brand-red); text-underline-offset: 4px; }
.nf__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }

/* ── footer: the old site's footer, rebuilt ──────────────────────────────── */
.foot {
  --text: var(--on-deep); --text-2: var(--on-deep-soft); --text-3: var(--on-deep-soft);
  --line: var(--deep-line); --line-2: var(--deep-line); --blue-ink: var(--deep-accent);
  --art: var(--art-deep); --art-o: calc(var(--art-deep-o) + .06);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: var(--text);
  padding-block: clamp(4rem, 8vw, 6rem) 2rem;
}
:root:not([data-theme="light"]) .foot { background: #03121F; }
.foot > .wrap { position: relative; z-index: 1; }
.foot__top {
  display: grid; gap: 1.5rem; align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .foot__top { grid-template-columns: minmax(0, 1fr) auto; } }
.foot .foot__big { color: var(--text); font-size: clamp(2.4rem, 1rem + 6vw, 6.4rem); max-width: 14ch; }
.foot__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 720px)  { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot h4 { font-family: var(--f-body); font-weight: 600; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 1rem; }
.foot p { font-size: var(--step--1); color: var(--text-2); }
.foot p + p { margin-top: .8rem; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__brand { display: grid; gap: 1rem; justify-items: start; }
.foot__brand img { width: 150px; height: auto; }
.foot__nav { display: grid; gap: .6rem; font-size: var(--step--1); }
.foot__social { display: flex; gap: 1.1rem; }
.foot__legal { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--text-2); }
.foot .copy { color: var(--text); border-color: var(--line); }
.foot .btn--ghost { --btn-bd: var(--line); }

/* ══ GALLERY ══════════════════════════════════════════════════════════════ */
.gfilters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.gfilter {
  font-family: var(--f-body); font-weight: 500; font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); background: none;
  border: 1px solid var(--line); border-radius: 0;
  padding: .7rem 1rem; min-height: 44px; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.gfilter:hover { color: var(--text); border-color: var(--text); }
.gfilter.is-on { color: #FFFFFF; background: var(--brand-red); border-color: var(--brand-red); }
.gcount { font-size: var(--step--1); color: var(--text-3); min-height: 1.6em; margin-bottom: 1rem; }

.shots { display: grid; gap: 1px; background: var(--line-2); grid-auto-flow: dense; }
.shot {
  position: relative; display: block; overflow: hidden;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--bg-2); color: inherit; cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.shot[hidden] { display: none; }
.shot--wide { aspect-ratio: 16 / 9; }                        /* one column */
/* A cinema still takes two columns, and 8:3 across two columns is exactly as
   tall as 4:3 across one - so every row lines up and the wall has no holes.
   These come after .shot on purpose: same weight, so the last rule wins. */
@media (min-width: 700px) {
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shot--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
}
@media (min-width: 1100px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot picture, .shot img { width: 100%; height: 100%; }
.shot img { object-fit: cover; transition: transform 1s var(--ease-out); }
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); }
.shot__cap {
  position: absolute; inset: auto 0 0 0; text-align: left;
  padding: 3.5rem .9rem .9rem;
  font-family: var(--f-body); font-weight: 500; font-size: var(--step--1);
  color: var(--film-text);
  background: linear-gradient(to top, rgba(5, 8, 12, .92), rgba(5, 8, 12, 0));
}

/* the viewer */
.lightbox {
  position: fixed; inset: 0; z-index: 95;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.25rem, 2vw, 1.5rem);
  padding: clamp(3rem, 8vh, 5rem) clamp(.25rem, 2vw, 2rem) clamp(2rem, 6vh, 4rem);
  background: rgba(5, 8, 12, .94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
/* the viewer arrives rather than appearing: the backdrop fades, the photograph
   rises the last few pixels behind it */
@keyframes boxIn { from { opacity: 0; } }
@keyframes figIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.lightbox:not([hidden]) { animation: boxIn .22s ease both; }
.lightbox:not([hidden]) .lightbox__fig { animation: figIn .4s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .lightbox:not([hidden]), .lightbox:not([hidden]) .lightbox__fig { animation: none; }
}
html.is-boxed body { overflow: hidden; }
.lightbox__fig { grid-column: 2; margin: 0; display: grid; gap: .9rem; justify-items: center; }
.lightbox__media { max-height: 76vh; display: grid; }
.lightbox__media img { max-height: 76vh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox__cap {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; justify-content: center;
  color: var(--film-text); font-size: var(--step--1); text-align: center;
}
.lightbox__n { color: var(--film-text-2); font-variant-numeric: tabular-nums; }
.lightbox__nav, .lightbox__close {
  z-index: 1;
  display: grid; place-items: center;
  min-width: 48px; min-height: 48px; padding: 0 .6rem;
  color: var(--film-text); background: rgba(5, 8, 12, .6);
  border: 1px solid var(--film-line); border-radius: 0; cursor: pointer;
}
.lightbox__nav { font-size: 1.8rem; line-height: 1; }
.lightbox__prev { grid-column: 1; }
.lightbox__next { grid-column: 3; }
.lightbox__close {
  position: absolute; top: clamp(.75rem, 3vh, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem);
  font-family: var(--f-body); font-weight: 500; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.lightbox__nav:hover, .lightbox__close:hover { border-color: var(--film-text); }

/* ══ BUILD YOUR SATTAL ════════════════════════════════════════════════════ */
.sbuild { display: grid; gap: 1.5rem; border: 0; margin: 0; padding: 0; }
.sbuild__step { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1.4rem 0 0; }
.sbuild__step legend {
  display: flex; align-items: baseline; gap: .8rem; padding: 0 0 .9rem;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  font-size: var(--step-2); text-transform: uppercase; letter-spacing: -.025em;
}
.sbuild__step .bucket__num { font-size: 1.6rem; }
.chip { display: inline-block; margin: 0 .4rem .4rem 0; }
.chip input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.chip span {
  display: inline-block; min-height: 44px; padding: .8rem 1.1rem;
  font-family: var(--f-body); font-weight: 500; font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--text-2); border: 1px solid var(--line); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip:hover span { color: var(--text); border-color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.chip input:checked + span { color: #FFFFFF; background: var(--brand-red); border-color: var(--brand-red); }
/* the sauces wear their own colour, the way the jars do on the counter */
.chip--ink span::before {
  content: ""; display: inline-block; vertical-align: .05em;
  width: .6rem; height: .6rem; margin-inline-end: .55rem; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset;
}
/* the five sauces, each with the text colour measured to clear AA on it -
   chilli garlic is the only one dark enough to take white */
.ink--lemon  { --ink: #E8B33C; --ink-on: #0B0F14; }
.ink--chilli { --ink: #D13138; --ink-on: #FFFFFF; }
.ink--pepper { --ink: #6E7F8D; --ink-on: #0B0F14; }
.ink--cheese { --ink: #E7C98F; --ink-on: #0B0F14; }
.ink--chef   { --ink: #02A0D1; --ink-on: #0B0F14; }
.chip--ink input:checked + span {
  color: var(--ink-on); background: var(--ink); border-color: var(--ink);
}
.chip--ink input:checked + span::before { background: currentColor; opacity: .55; }
.sbuild__out {
  font-family: var(--f-disp); font-weight: 400; font-stretch: 104%;
  font-size: var(--step-2); line-height: 1.25; color: var(--text);
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.sbuild__out b { font-weight: 800; }
.sbuild__acts { display: flex; flex-wrap: wrap; gap: .7rem; }
.sbuild__note { font-size: var(--step--1); color: var(--text-2); max-width: 46ch; }
.menu__acts { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ══ PAGE TRANSITIONS ═════════════════════════════════════════════════════
   Chromium and Safari cross-fade between pages instead of flashing white, and
   the masthead stays put while the rest changes. Other browsers just navigate. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  .bar { view-transition-name: masthead; }
  .callbar { view-transition-name: callbar; }
}

/* ── site search ─────────────────────────────────────────────────────────── */
.search-btn {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.search-btn:hover { border-color: var(--text); }
.search-btn svg { width: 16px; height: 16px; fill: currentColor; }

.search {
  position: fixed; inset: 0; z-index: 90;
  display: grid; align-items: start; justify-items: center;
  padding: clamp(4.5rem, 12vh, 8rem) var(--gut) 2rem;
  overflow-y: auto;
  background: rgba(5, 8, 12, .74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.search[hidden] { display: none; }
html.is-searching body { overflow: hidden; }
.search__panel {
  width: min(680px, 100%);
  background: var(--p-bg); color: var(--p-text);
  border: 1px solid var(--p-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.search__form { display: flex; align-items: center; gap: .75rem; padding: .4rem .4rem .4rem 1rem; border-bottom: 1px solid var(--p-line); }
.search__form:focus-within { box-shadow: inset 0 -2px 0 var(--brand-red); }
.search__icon { width: 18px; height: 18px; flex: none; fill: var(--p-text-3); }
.search__form input {
  flex: 1 1 auto; min-width: 0;
  font: 400 1.125rem/1.4 var(--f-body); color: var(--p-text);
  background: transparent; border: 0; padding: .9rem 0;
}
.search__form input:focus { outline: none; }
.search__form input::placeholder { color: var(--p-text-3); }
.search__close {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 .7rem;
  font: 500 .6875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-text-2); background: none; border: 1px solid var(--p-line); border-radius: 0; cursor: pointer;
}
.search__close:hover { color: var(--p-text); border-color: var(--p-text); }
.search__count { padding: .8rem 1rem 0; min-height: 2.2em; font-size: var(--step--1); color: var(--p-text-3); }
.search__results { list-style: none; margin: 0; padding: .3rem 0 .6rem; max-height: min(60vh, 520px); overflow-y: auto; }
.search__hit {
  display: grid; gap: .15rem; padding: .8rem 1rem;
  color: inherit; text-decoration: none;
  border-left: 2px solid transparent;
}
.search__hit:hover, .search__hit:focus-visible { background: var(--p-bg-2); border-left-color: var(--brand-red); outline: none; }
.search__kind { font: 500 .625rem/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--p-blue-ink); }
.search__title { font-family: var(--f-disp); font-weight: 700; font-stretch: 104%; font-size: 1.0625rem; letter-spacing: -.01em; }
.search__desc { font-size: var(--step--1); color: var(--p-text-2); line-height: 1.45; }

/* ── cookie notice ───────────────────────────────────────────────────────── */
.consent {
  position: fixed; left: var(--gut); bottom: 1.25rem; z-index: 57;
  max-width: 32rem;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1rem 1rem 1.25rem;
  background: var(--p-bg-2); color: var(--p-text);
  border: 1px solid var(--p-line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  font-size: var(--step--1); line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent p { color: var(--p-text-2); }
.consent a { color: var(--p-text); text-underline-offset: 3px; }
.consent .btn { flex: none; padding: .75rem 1.2rem; }
.consent .btn::after { content: none; }

/* ── chrome ──────────────────────────────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: linear-gradient(to right, var(--brand-red), var(--brand-blue));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

.to-top {
  position: fixed; right: var(--gut); bottom: 1.5rem; z-index: 55;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: var(--bar-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.to-top:hover { border-color: var(--brand-red); color: var(--red-ink); }
.to-top svg { width: 16px; height: 16px; fill: currentColor; }
.to-top[hidden] { display: none; }
@media (max-width: 760px) { .to-top { bottom: 4.8rem; } }

.callbar { display: none; }
@media (max-width: 760px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1.05rem .5rem; font-family: var(--f-body); font-weight: 600;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
  .callbar__call { background: var(--bg-2); color: var(--text); }
  .callbar__book { background: var(--brand-red); color: #FFFFFF; }
  .callbar svg { width: 14px; height: 14px; fill: currentColor; }
  body { padding-bottom: 3.7rem; }
}

.copy {
  font-family: var(--f-body); font-weight: 500;
  font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 0;
  padding: .22rem .5rem; margin-inline-start: .55rem; cursor: pointer; vertical-align: .12em;
}
.copy:hover { color: var(--text); border-color: var(--text); }
.copy.is-copied { color: #05080C; background: #FFFFFF; border-color: #FFFFFF; }

/* ── motion ──────────────────────────────────────────────────────────────── */
html.js-anim [data-reveal] { opacity: 0; }
html.js-anim [data-split] .wi { transform: translateY(118%); }
html.js-anim [data-wipe] { clip-path: inset(100% 0 0 0); }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
[data-split] .wi { display: inline-block; will-change: transform; }
[data-wipe] { overflow: hidden; }
html.lenis { height: auto; scroll-behavior: auto; }
html.lenis body { min-height: 100%; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal] { opacity: 1; }
  html.js-anim [data-split] .wi { transform: none; }
  html.js-anim [data-wipe] { clip-path: none; }
  .grain { display: none; }
  .scrollcue::after { animation: none; }
  .build__sticky { min-height: auto; }
  .build__frame video, .build__frame img { height: auto; }
  .beat { opacity: 1; transform: none; position: static; max-width: 40ch; }
  .build__beats { gap: 2rem; align-content: start; padding-top: 2rem; position: static; }
  .build__wash, .build__card { display: none; }
  .hero--film { min-height: auto; padding-block: calc(var(--bar-h) + 4rem) clamp(3.5rem, 9vw, 6rem); }
  .grow__stage { min-height: 80svh; }
  .sig picture, .dish__img picture, .btn, .btn::before, .btn::after { transition: none; }
  .lineart::after { display: none; }
}

/* ══ PHONES ════════════════════════════════════════════════════════════════
   Everything that changes on a phone lives here, after the rules it bends.
   The call bar owns the bottom of the screen (with the back-to-top button
   docked in its last cell), so anything anchored to the bottom edge lifts
   clear of it and of the home indicator. The masthead is shorter, nothing a
   thumb needs is under 44px, and the search field is 16px so iOS does not
   zoom into it on focus. */
@media (max-width: 760px) {
  :root {
    --bar-h: 60px;
    --callbar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }
  body { padding-bottom: var(--callbar-h); }

  .bar {
    gap: .6rem;
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
  }
  .bar__logo img { width: 108px; }
  .theme-toggle, .burger { width: 44px; height: 44px; }

  .callbar {
    grid-template-columns: 1fr 1fr 3.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-2);
  }
  .callbar a { min-height: 3.5rem; padding-block: 0; }
  .callbar::after { content: ""; border-left: 1px solid var(--line); }
  .to-top {
    right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 59;
    width: 3.5rem; height: 3.5rem;
    border: 0; border-left: 1px solid var(--line);
    background: var(--bg-2);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  .hero--film { padding-bottom: calc(var(--callbar-h) + 1.25rem); }
  .hero__copy { gap: 1.1rem; }
  .hero__h { font-size: clamp(2.5rem, 11.2vw, 3.6rem); }
  .hero__sub { font-size: var(--step-0); }
  .hero__acts { width: 100%; flex-direction: column; }
  .hero__acts .btn, .mhead__acts .btn { width: 100%; }
  .mhead__acts { width: 100%; flex-direction: column; }
  .hero__foot { margin-top: 1.25rem; padding-top: 1rem; }
  .scrollcue { display: none; }

  .build__rail { display: none; }
  .build__beats { padding-bottom: calc(var(--callbar-h) + 1.5rem); min-height: 0; }
  .beat { gap: .65rem; }
  .beat b { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .beat > span { font-size: var(--step--1); }
  .build__card { padding-bottom: var(--callbar-h); gap: 1.2rem; }
  .build__card img { width: min(300px, 74vw); }
  .build__card .lineart { --art-size: 330% auto; --art-pos: 4% 30%; }

  .grow__copy { padding-bottom: calc(var(--callbar-h) + 1rem); gap: .8rem; }
  .grow__copy > p:not(.eyebrow) { font-size: var(--step-0); }
  .grow__notes { margin-top: .2rem; }
  .note { padding: .7rem 1rem; gap: .2rem; }

  .filmband { min-height: 70vh; min-height: 70svh; }
  .mhead { min-height: 86vh; min-height: 86svh; }

  .lineart { --art-size: 900px auto; }
  .lineart--side { --art-size: 1100px auto; }
  .lineart--foot { --art-size: 1000px auto; }

  .mnav__inner { padding-block: .45rem; }
  .msearch input { font-size: 16px; padding-block: .6rem; }
  .mnav__list { padding-top: .35rem; }
  .mnav__list a { padding: .65rem .7rem; }
  .course { scroll-margin-top: calc(var(--bar-h) + 120px); }

  .copy { padding: .45rem .65rem; }
  .foot__social a, .foot__nav a { display: inline-block; padding-block: .3rem; }
}

/* the smallest phones (iPhone SE, 320px): the call bar keeps one line */
@media (max-width: 380px) {
  .callbar a { gap: .35rem; font-size: .625rem; letter-spacing: .1em; }
  .callbar svg { display: none; }
}

/* a phone held sideways: about 390px of height. The film sections are sized
   for the screen, so their type has to come down with it, and anything that
   is a nice-to-have on a tall screen gives way. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --bar-h: 56px; }
  .hero--film { padding-block: calc(var(--bar-h) + .75rem) 1.25rem; }
  .hero__copy { gap: .8rem; max-width: 40rem; }
  .hero__h { font-size: clamp(1.9rem, 5.6vw, 2.8rem); max-width: 20ch; }
  .hero__sub { font-size: var(--step--1); max-width: 56ch; }
  .hero__foot, .scrollcue { display: none; }
  .btn--lg { padding: .8rem 1.4rem; }

  .build__rail { display: none; }
  .build__beats { padding-bottom: 1.25rem; min-height: 0; }
  .beat { gap: .45rem; max-width: 52ch; }
  .beat b { font-size: clamp(1.5rem, 4.2vw, 2.1rem); }
  .beat > span { font-size: var(--step--1); }
  .beat .tags { display: none; }
  .build__card { padding-block: calc(var(--bar-h) + .5rem) 1rem; gap: .9rem; }
  .build__card img { width: min(260px, 40vw); }

  .grow__copy { padding-block: 1.25rem; gap: .6rem; }
  .grow__copy h2 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
  .grow__copy > p:not(.eyebrow) { font-size: var(--step--1); }
  .grow__notes { display: none; }

  .filmband { min-height: 100vh; min-height: 100svh; }
  .filmband__copy h2, .mhead h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
  .mhead__inner { padding-block: calc(var(--bar-h) + 1rem) 1.5rem; gap: .8rem; }
}

/* the fixed grain overlay is a blend layer over moving video: on a phone it
   costs frames and nobody can see it at that size */
@media (max-width: 760px), (pointer: coarse) {
  .grain { display: none; }
}

/* the header on a phone: logo, then search, theme and menu pushed right */
@media (max-width: 900px) {
  .search-btn { margin-inline-start: auto; }
  .search-btn + .theme-toggle { margin-inline-start: 0; }
}
@media (max-width: 760px) {
  .search-btn { width: 44px; height: 44px; }
  .search { padding-top: calc(var(--bar-h) + .75rem); }
  /* one compact strip above the call bar, OK beside the text, not a wall over the hero */
  .consent {
    left: .5rem; right: .5rem; bottom: calc(var(--callbar-h) + .5rem);
    max-width: none; gap: .75rem;
    padding: .65rem .65rem .65rem .9rem;
    font-size: .75rem; line-height: 1.4;
  }
  .consent .btn { min-width: 44px; min-height: 44px; padding: .5rem .9rem; }
}
@media (max-width: 380px) {
  .bar { gap: .4rem; }
  .bar__logo img { width: 96px; }
}

/* ── print ───────────────────────────────────────────────────────────────── */
/* ══ BOOT ═════════════════════════════════════════════════════════════════
   Built on the Lando Norris loader: one flat brand field, a small mark in
   the middle, a pun along the bottom edge (theirs reads LOAD NORRIS, ours
   READY SHRIMP), and an exit where the field breaks into two slabs that slide
   off in opposite directions. Transform-only, so it costs a phone nothing.

   It is the first thing in the body so it paints at once, it runs once a
   visit, and its own CSS animation takes it away if no script ever arrives. */
.boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  color: #0B0F14; pointer-events: auto;
  animation: bootGo .6s ease 3.6s forwards;          /* the failsafe */
}
.no-boot .boot { display: none; }
.boot__slab {
  position: absolute; left: -6%; right: -6%; z-index: 0;
  background: var(--brand-red);
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
/* each slab carries a slanted edge where it meets the other, so the break
   reads as a cut rather than a seam */
/* both slabs are full height and cut along the same line, so the seam is one
   clean diagonal - the top one overlaps it by a hair to hide antialiasing */
.boot__slab { top: 0; bottom: 0; }
.boot__slab--a { clip-path: polygon(0 0, 100% 0, 100% 54.4%, 0 46.4%); }
.boot__slab--b { clip-path: polygon(0 46%, 100% 54%, 100% 100%, 0 100%); }

.boot__rs {
  position: relative; z-index: 1; display: flex;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .8; letter-spacing: -.07em;
  transform: skewX(-9deg);
  transition: opacity .3s ease, transform .5s var(--ease-out);
}
/* the two letters wipe in from their own left edge, one after the other */
.boot__rs span { display: inline-block; animation: bootWipe .6s cubic-bezier(.16, 1, .3, 1) both; }
.boot__rs span + span { animation-delay: .09s; margin-left: -.02em; }
@keyframes bootWipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-.12em); } to { clip-path: inset(0 0 0 0); } }

.boot__say {
  position: absolute; left: 0; right: 0; bottom: clamp(1.4rem, 5vh, 2.6rem); z-index: 1;
  text-align: center;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 100%;
  font-size: .625rem; letter-spacing: .02em; text-transform: uppercase;
  transition: opacity .25s ease;
}
@keyframes bootGo { to { opacity: 0; visibility: hidden; } }

/* the exit: mark and pun go first, then the slabs part */
.boot.is-out { pointer-events: none; animation: none; }
.boot.is-out .boot__rs { opacity: 0; transform: skewX(-9deg) scale(.86); }
.boot.is-out .boot__say { opacity: 0; }
.boot.is-out .boot__slab--a { transform: translateX(-108%); transition-delay: .12s; }
.boot.is-out .boot__slab--b { transform: translateX(108%); transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .boot { animation-delay: 1s; animation-duration: .01s; }
  .boot__rs span { animation: none; }
  .boot.is-out { opacity: 0; transition: opacity .2s ease; }
  .boot.is-out .boot__slab--a, .boot.is-out .boot__slab--b { transform: none; }
}

/* ══ FILM METER ═══════════════════════════════════════════════════════════
   How far through the film you are, and a way out of it. Nobody should be
   stuck inside a sequence they did not ask for. */
.build__meter {
  grid-area: 1 / 1 / 2 / -1; z-index: 4; justify-self: end; align-self: start;
  padding: calc(var(--bar-h) + clamp(.5rem, 2vw, 1.25rem)) var(--gut) 0;
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
}
.build__pct { color: var(--film-text); font-variant-numeric: tabular-nums; }
.build__skip {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--film-text-2); background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--film-line); border-radius: 0;
  padding: .55rem .1rem; min-height: 44px;
  transition: color .25s ease, border-color .25s ease;
}
.build__skip:hover { color: var(--film-text); border-color: var(--film-text); }
.build.is-card .build__meter { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@media (max-width: 760px) {
  .build__meter { gap: .7rem; font-size: .5625rem; }
}

/* ══ THE SLAB ═════════════════════════════════════════════════════════════
   The loader's red cut, carried into the page: a slanted band of huge moving
   type, the way the Lando Norris and MANA sites run theirs. On a laptop
   motion.js drives it and it leans into the scroll - faster when you scroll,
   backwards when you scroll up. Everywhere else it is a plain CSS loop, and
   it stops whenever it is off screen. */
.slab {
  --cut: clamp(18px, 3.2vw, 46px);
  position: relative; z-index: 3; overflow: hidden;
  padding-block: calc(var(--cut) + clamp(.7rem, 1.6vw, 1.3rem));
  background: var(--brand-red); color: #0B0F14;
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  margin-block: calc(var(--cut) * -1);
}
.slab__track {
  display: flex; align-items: center; width: max-content;
  animation: slabRun 42s linear infinite;
  will-change: transform;
}
.slab__track.is-driven { animation: none; }
.slab.is-still .slab__track { animation-play-state: paused; }
.slab__track span {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.4rem, 7vw, 6.6rem); line-height: .92; letter-spacing: -.045em;
  text-transform: uppercase; white-space: nowrap;
  padding-inline: .32em; transform: skewX(-9deg);
}
.slab__track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: clamp(1.5px, .18vw, 2.5px) #0B0F14; }
.slab__track i { flex: none; width: clamp(.7rem, 1.6vw, 1.4rem); aspect-ratio: 1; border-radius: 50%; background: #0B0F14; }
@keyframes slabRun { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .slab__track { animation: none; } }

/* ══ THE FLAVOUR STAGE ════════════════════════════════════════════════════
   The MANA hero, done with the restaurant's five sauces: the whole stage takes
   the sauce's colour, a real plate of seafood sits in the middle, the
   restaurant's own drawings sit around it, and it moves on to the next sauce
   by itself. Arrows, a swipe or the keys take over; Pause stops it. */
/* the colours come from the ink--<sauce> class on the section, which the
   script swaps - same weight as this rule, so this one sets none of its own */
.flavour {
  position: relative; z-index: 2; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding-block: calc(var(--bar-h) + clamp(1rem, 3vh, 2rem)) clamp(1.5rem, 4vh, 2.5rem);
  row-gap: clamp(.8rem, 2vh, 1.4rem);
  background: var(--ink); color: var(--ink-on);
  transition: background-color .8s cubic-bezier(.65, 0, .35, 1), color .5s ease;
}
.flavour .lineart { --art: var(--ink-on); --art-o: .16; z-index: -1; }
.lineart--flavour { --art-size: max(1500px, 118%) auto; --art-pos: 50% 50%; }
/* the sauce's name, huge and outlined, behind everything */
.flavour__giant {
  position: absolute; inset: 0; z-index: -1; display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
}
.flavour__giant span {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(4rem, 15vw, 15rem); line-height: .84; letter-spacing: -.055em;
  text-transform: uppercase; text-align: center; max-width: 9ch;
  color: transparent; -webkit-text-stroke: clamp(1.5px, .2vw, 3px) var(--ink-on); opacity: .3;
  transform: skewX(-9deg);
}
.flavour__head { position: relative; z-index: 2; }
.flavour__head .eyebrow { --blue-ink: var(--ink-on); }
.flavour__head h2 { font-size: var(--step-3); line-height: .92; max-width: 12ch; }

.flavour__stage { position: relative; display: grid; place-items: center; min-height: 0; }
.flavour__plate {
  grid-area: 1 / 1; margin: 0;
  width: min(32rem, 50vmin); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 clamp(8px, 1.3vmin, 14px) rgba(255, 255, 255, .9), 0 40px 80px -30px rgba(0, 0, 0, .55);
  opacity: 0; transform: scale(.82) rotate(-28deg);
  transition: opacity .5s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.flavour__plate.is-on { opacity: 1; transform: none; }
.flavour__plate.is-gone { opacity: 0; transform: scale(1.08) rotate(22deg); transition-duration: .45s, .7s; }
.flavour__plate picture, .flavour__plate img { width: 100%; height: 100%; }
.flavour__plate img { object-fit: cover; animation: plateTurn 60s linear infinite; }
@keyframes plateTurn { to { transform: rotate(360deg) scale(1.15); } }
/* each photograph framed on its seafood, not on the table around it */
.plate--lemon img  { object-position: 66% 66%; }
.plate--chilli img { object-position: 50% 50%; }
.plate--pepper img { object-position: 60% 50%; }
.plate--cheese img { object-position: 62% 58%; }
.plate--chef img   { object-position: 58% 40%; }

.flavour__foot {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: .7rem; text-align: center;
}
.flavour__ctrl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.flavour__arrow, .flavour__pause {
  min-width: 48px; min-height: 48px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #0B0F14; border: 0; cursor: pointer;
  font: 600 1.15rem/1 var(--f-body);
  transition: transform .25s var(--ease-out), background-color .25s ease;
}
.flavour__pause { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; padding-inline: 1.1rem; }
.flavour__arrow:hover, .flavour__pause:hover { transform: scale(1.06); }
.flavour__arrow:active, .flavour__pause:active { transform: scale(.94); }
.flavour__pill {
  display: flex; align-items: baseline; gap: .7rem; margin: 0;
  padding: .85rem 1.4rem; border-radius: 999px;
  background: #0B0F14; color: #FFFFFF; min-height: 48px;
}
.flavour__n { font: 600 .625rem/1 var(--f-body); letter-spacing: .2em; opacity: .7; }
.flavour__pill b {
  font-family: var(--f-disp); font-weight: 800; font-size: clamp(1rem, 2vw, 1.25rem);
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
}
.flavour__line { font-size: var(--step-1); font-weight: 500; margin: 0; }
.flavour__cta { --btn-fg: #FFFFFF; --btn-bg: #0B0F14; --btn-bd: #0B0F14; }
.flavour__cta::before { background: #FFFFFF; }
.flavour__cta:hover { --btn-fg: #0B0F14; --btn-bd: #0B0F14; }
@media (max-width: 760px) {
  .flavour { min-height: auto; padding-block: 4rem 2.5rem; row-gap: 1.6rem; }
  .flavour__plate { width: min(78vw, 22rem); }
  .flavour__giant span { font-size: 22vw; }
}
@media (prefers-reduced-motion: reduce) {
  .flavour, .flavour__plate { transition: none; }
  .flavour__plate img { animation: none; }
}

/* ══ INSIDE THE BUCKET ════════════════════════════════════════════════════
   The Red Bull Racing "on race day" scene, done with a Sattal: the photograph
   in navy duotone like their wireframe car, red pulsing points on the real
   prawn, mussel, clam, crab and corn, a spotlight that brings the one in play
   back to full colour, a step counter, and its number huge and faded behind.
   CSS sticky holds it and scroll only flips data-step - nothing is pinned or
   scrubbed, so a phone pays for five class changes and no more. */
.inside { position: relative; min-height: 420vh; background: var(--film); }
@media (max-width: 760px) { .inside { min-height: 330vh; } }
.inside__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; align-items: center; gap: clamp(1.2rem, 4vw, 4rem);
  padding: calc(var(--bar-h) + 1.5rem) var(--gut) 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .inside__sticky { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
/* where each part sits in the photograph, and so where the light goes */
.inside[data-step="1"] { --hx: 33%; --hy: 75%; --done: .2; }
.inside[data-step="2"] { --hx: 43%; --hy: 14%; --done: .4; }
.inside[data-step="3"] { --hx: 76%; --hy: 60%; --done: .6; }
.inside[data-step="4"] { --hx: 78%; --hy: 80%; --done: .8; }
.inside[data-step="5"] { --hx: 12%; --hy: 48%; --done: 1; }

.inside__giant {
  position: absolute; right: -2vw; top: 50%; translate: 0 -50%; z-index: 0; margin: 0;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: clamp(14rem, 42vw, 40rem); line-height: .8; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 2px rgba(61, 187, 227, .16);
  pointer-events: none;
}
.inside__photo {
  position: relative; z-index: 1; justify-self: center;
  width: min(100%, 72vh, 42rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(61, 187, 227, .35), 0 0 120px rgba(2, 160, 209, .18);
}
.inside__photo picture, .inside__photo img { width: 100%; height: 100%; }
.inside__photo img { object-fit: cover; }
.inside__mono, .inside__lit { position: absolute; inset: 0; }
/* the navy duotone: grey, darkened, then screened with deep blue */
.inside__mono img { filter: grayscale(1) contrast(1.25) brightness(.5); }
.inside__mono::after { content: ""; position: absolute; inset: 0; background: #0b3a66; mix-blend-mode: screen; }
.inside__lit {
  clip-path: circle(17% at var(--hx, 50%) var(--hy, 50%));
  transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.inside__photo .lineart { --art: #3DBBE3; --art-o: .22; z-index: 2; mix-blend-mode: screen; }

.hot {
  position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
}
.hot i {
  width: 14px; height: 14px; border-radius: 50%; background: var(--brand-red);
  box-shadow: 0 0 0 0 rgba(209, 49, 56, .7), 0 0 18px rgba(255, 70, 76, .9);
  animation: hotPulse 1.8s ease-out infinite;
  transition: transform .3s ease, background-color .3s ease;
}
@keyframes hotPulse {
  70%  { box-shadow: 0 0 0 16px rgba(209, 49, 56, 0), 0 0 18px rgba(255, 70, 76, .9); }
  100% { box-shadow: 0 0 0 0 rgba(209, 49, 56, 0), 0 0 18px rgba(255, 70, 76, .9); }
}
.hot--1 { left: 33%; top: 75%; }
.hot--2 { left: 43%; top: 14%; }
.hot--3 { left: 76%; top: 60%; }
.hot--4 { left: 78%; top: 80%; }
.hot--5 { left: 12%; top: 48%; }
.inside[data-step="1"] .hot--1 i, .inside[data-step="2"] .hot--2 i, .inside[data-step="3"] .hot--3 i,
.inside[data-step="4"] .hot--4 i, .inside[data-step="5"] .hot--5 i { background: #FFFFFF; transform: scale(1.35); }

.inside__copy { position: relative; z-index: 1; display: grid; gap: 1rem; align-content: center; }
.inside__copy h2 { font-size: var(--step-4); line-height: .9; }
.inside__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.inside__step {
  grid-area: 1 / 1; display: grid; gap: .5rem;
  opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .6s var(--ease-out);
}
.inside__step.is-on { opacity: 1; transform: none; }
.inside__step span { font: 600 .6875rem/1 var(--f-body); letter-spacing: .22em; color: var(--red-ink); }
.inside__step b {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  font-size: var(--step-3); line-height: .9; text-transform: uppercase; letter-spacing: -.03em;
}
.inside__step em { font-style: normal; color: var(--text-2); font-size: var(--step-1); max-width: 30ch; }
.inside__count {
  display: flex; align-items: center; gap: .6rem; margin-top: .6rem;
  font-family: var(--f-body); font-weight: 600; font-size: .75rem; letter-spacing: .2em; color: var(--text-2);
}
.inside__count b { font-family: var(--f-disp); font-size: 1.6rem; color: var(--text); letter-spacing: 0; }
.inside__count i { flex: 1; max-width: 10rem; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.inside__count i::after {
  content: ""; position: absolute; inset: 0; background: var(--brand-red);
  transform-origin: 0 50%; transform: scaleX(var(--done, .2)); transition: transform .6s var(--ease-out);
}
@media (max-width: 899px) {
  .inside__sticky { align-content: center; gap: 1.4rem; padding-top: calc(var(--bar-h) + 1rem); }
  .inside__photo { width: min(100%, 46vh); }
  .inside__copy h2 { font-size: var(--step-2); }
}
@media (prefers-reduced-motion: reduce) {
  .inside__lit, .inside__step, .inside__count i::after { transition: none; }
  .hot i { animation: none; }
}

/* ══ THE REEL ═════════════════════════════════════════════════════════════
   The restaurant's own Instagram clip, kept in the shape it was shot in: a
   phone on a laptop, the whole screen on a phone. */
.reel { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); }
.reel__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .reel__grid { grid-template-columns: 1.1fr .9fr; } }
.reel__copy { display: grid; gap: 1.2rem; justify-items: start; max-width: 34rem; }
.reel__copy h2 { font-size: var(--step-3); line-height: .95; }
.reel__copy p { color: var(--text-2); font-size: var(--step-0); }
.reel__phone {
  justify-self: center; width: min(22rem, 78vw); aspect-ratio: 9 / 16;
  border-radius: 2.4rem; overflow: hidden; background: #000;
  box-shadow: 0 0 0 10px #0B0F14, 0 0 0 11px var(--line), 0 50px 90px -40px rgba(0, 0, 0, .7);
  transform: rotate(-3deg);
}
.reel__phone video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .reel__phone { transform: none; width: 100%; border-radius: 1.4rem; } }

/* ══ THE CURSOR ═══════════════════════════════════════════════════════════
   metic's "take a closer look", on a mouse only: a red dot trails the
   pointer, opens into a ring over anything you can click, and into a disc that
   says what a picture will do. Over a picture the system cursor steps aside. */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; will-change: transform; }
.cursor__dot {
  display: grid; place-items: center;
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: var(--brand-red); color: #FFFFFF; border: 0 solid var(--brand-red);
  font-family: var(--f-body); font-weight: 700; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
  transform: scale(.13);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, border-width .3s ease, opacity .3s ease;
}
.cursor__dot span { opacity: 0; transition: opacity .2s ease; }
.cursor.is-link .cursor__dot { transform: scale(.42); background: transparent; border-width: 5px; }
.cursor.is-look .cursor__dot { transform: scale(1); }
.cursor.is-look .cursor__dot span { opacity: 1; transition-delay: .1s; }
.cursor.is-hidden .cursor__dot { opacity: 0; }
.has-cursor .shot, .has-cursor .sig, .has-cursor .dish, .has-cursor .flavour__plate,
.has-cursor .grow__media, .has-cursor [data-wipe] { cursor: none; }

/* ══ THE MENU ═════════════════════════════════════════════════════════════
   Lando Norris's full-screen menu, cut like our own loader: two red slabs
   slide in from opposite sides along the same diagonal, then the links rise
   in. Each link has a photograph; pointing at one brings its picture up. */
.menu { position: fixed; inset: 0; z-index: 150; color: #0B0F14; }
.menu[hidden] { display: none; }
.menu__slab {
  position: absolute; top: 0; bottom: 0; left: -6%; right: -6%;
  background: var(--brand-red);
  transition: transform .7s cubic-bezier(.76, 0, .24, 1);
}
.menu__slab--a { clip-path: polygon(0 0, 100% 0, 100% 54.4%, 0 46.4%); transform: translateX(-108%); }
.menu__slab--b { clip-path: polygon(0 46%, 100% 54%, 100% 100%, 0 100%); transform: translateX(108%); }
.menu.is-open .menu__slab { transform: none; }
.menu.is-open .menu__slab--b { transition-delay: .06s; }
.menu__inner {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto;
  gap: 1.5rem; padding: calc(var(--bar-h) + 1rem) var(--gut) 1.6rem;
  overflow-y: auto;
}
@media (min-width: 901px) { .menu__inner { grid-template-columns: 1.3fr 1fr; } }
.menu__nav { display: grid; align-content: center; gap: .1rem; }
.menu__nav a {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  /* the longest word, QUESTIONS, has to fit a 390px phone with its number */
  font-size: max(2rem, min(8.6vh, 11.2vw, 5.6rem)); line-height: .95; letter-spacing: -.045em;
  text-transform: uppercase; text-decoration: none; color: #0B0F14;
  opacity: 0; transform: translateY(40px) skewX(-9deg);
  transition: opacity .4s ease, transform .6s cubic-bezier(.16, 1, .3, 1), color .2s ease;
}
.menu__nav a span { font-family: var(--f-body); font-size: .75rem; font-weight: 700; letter-spacing: .2em; transform: skewX(9deg); }
.menu.is-open .menu__nav a { opacity: 1; transform: skewX(-9deg); }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: .32s; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: .36s; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: .40s; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: .44s; }
.menu.is-open .menu__nav a:nth-child(5) { transition-delay: .48s; }
.menu.is-open .menu__nav a:nth-child(6) { transition-delay: .52s; }
.menu.is-open .menu__nav a:nth-child(7) { transition-delay: .56s; }
.menu__nav a:hover, .menu__nav a:focus-visible, .menu__nav a[aria-current="page"] {
  color: #FFFFFF; outline: none;
}
.menu__peek { display: none; position: relative; align-self: center; justify-self: center;
  width: min(26rem, 32vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .9), 0 40px 80px -30px rgba(0, 0, 0, .55);
  opacity: 0; transform: scale(.8) rotate(-12deg);
  transition: opacity .5s ease .45s, transform .9s cubic-bezier(.16, 1, .3, 1) .45s; }
@media (min-width: 901px) { .menu__peek { display: block; } }
.menu.is-open .menu__peek { opacity: 1; transform: none; }
.menu__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.12); transition: opacity .45s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.menu__img.is-on { opacity: 1; transform: none; }
.menu__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem;
  font-family: var(--f-body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .4s ease .5s;
}
.menu.is-open .menu__foot { opacity: 1; }
.menu__foot a { color: #0B0F14; min-height: 44px; display: inline-flex; align-items: center; }
.menu__foot .status { color: #0B0F14; border-color: rgba(11, 15, 20, .4); }
.menu__book { margin-inline-start: auto; padding: 0 1.3rem; background: #0B0F14; color: #FFFFFF !important; text-decoration: none; }
@media (max-width: 760px) {
  .menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
  .menu__foot .status { grid-column: 1 / -1; justify-self: start; }
  .menu__book { grid-column: 1 / -1; margin: .4rem 0 0; justify-content: center; min-height: 52px; }
}
.menu__close {
  position: absolute; top: calc((var(--bar-h) - 44px) / 2); right: var(--gut); z-index: 2;
  min-width: 44px; min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  background: #0B0F14; color: #FFFFFF; border: 0; cursor: pointer;
  font: 700 .6875rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease .35s;
}
.menu.is-open .menu__close { opacity: 1; }
html.is-menu body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .menu__slab, .menu__nav a, .menu__peek, .menu__foot, .menu__close { transition: none; }
}

/* ══ THE FILM ═════════════════════════════════════════════════════════════
   The race-day PLAY VIDEO ring: a red circle that draws itself round when you
   point at it, and opens the whole brand film with its sound, full screen.
   The player arrives between two slabs, the same cut as the loader. */
.playring {
  display: inline-flex; align-items: center; gap: .9rem; min-height: 56px;
  padding: 0 .4rem 0 0; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left;
}
.playring__ring { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.playring__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.playring__ring circle {
  fill: none; stroke: var(--brand-red); stroke-width: 4;
  stroke-dasharray: 289; stroke-dashoffset: 72;
  transition: stroke-dashoffset .7s cubic-bezier(.16, 1, .3, 1);
}
.playring:hover circle, .playring:focus-visible circle { stroke-dashoffset: 0; }
.playring__ring i { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.playring__label {
  display: grid; gap: .2rem;
  font-family: var(--f-body); font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.playring__label small { font-weight: 500; font-size: .625rem; letter-spacing: .12em; color: var(--text-2); }

.player { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; }
.player[hidden] { display: none; }
.player__slab {
  position: absolute; top: 0; bottom: 0; left: -6%; right: -6%; background: #000;
  transition: transform .65s cubic-bezier(.76, 0, .24, 1);
}
.player__slab--a { clip-path: polygon(0 0, 100% 0, 100% 54.4%, 0 46.4%); transform: translateX(108%); }
.player__slab--b { clip-path: polygon(0 46%, 100% 54%, 100% 100%, 0 100%); transform: translateX(-108%); }
.player.is-open .player__slab { transform: none; }
.player__video {
  position: relative; z-index: 1; width: 100%; height: 100%; max-height: 100vh; object-fit: contain; background: transparent;
  opacity: 0; transition: opacity .4s ease .45s;
}
.player.is-open .player__video { opacity: 1; }
.player__close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: var(--gut); z-index: 2;
  min-width: 44px; min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #0B0F14; border: 0; cursor: pointer;
  font: 700 .6875rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
}
html.is-film-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .player__slab, .player__video { transition: none; } }

/* ══ PAGE TRANSITIONS ═════════════════════════════════════════════════════
   metic's big circle: the next page opens as a circle from wherever you
   clicked, in browsers that can do cross-page transitions. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vtCircle .75s cubic-bezier(.65, 0, .35, 1) both; }
}
@keyframes vtCircle {
  from { clip-path: circle(0% at var(--vx, 50%) var(--vy, 50%)); }
  to   { clip-path: circle(150% at var(--vx, 50%) var(--vy, 50%)); }
}

/* ══ THE MANIFESTO ════════════════════════════════════════════════════════
   The restaurant's own lines, held still while you scroll past, lighting
   up one word at a time. The words are real text from the start; the dimming
   is only paint. */
.manifesto { position: relative; min-height: 220vh; background: var(--film); color: var(--film-text); }
.manifesto__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; align-content: center; gap: 1.4rem; padding: var(--bar-h) var(--gut) 2rem;
  max-width: 78rem; margin-inline: auto;
}
.manifesto .eyebrow { --blue-ink: #3DBBE3; }
.manifesto__text {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 106%;
  font-size: clamp(2rem, 5.2vw, 4.9rem); line-height: 1.02; letter-spacing: -.035em; margin: 0;
}
.manifesto__text span { color: rgba(243, 246, 249, .14); transition: color .35s ease; }
.manifesto__text span.is-lit { color: var(--film-text); }
.manifesto__text span.is-red.is-lit { color: #F2646A; }
@media (prefers-reduced-motion: reduce) { .manifesto__text span { color: var(--film-text); } }

/* ══ THE FOOTER ═══════════════════════════════════════════════════════════
   A photo trail behind the big line, the shrimp game, and the name across the
   bottom edge the way Lando's and MANA's footers sign off. */
.foot__top { position: relative; isolation: isolate; }
.trail {
  position: absolute; z-index: -1; width: clamp(140px, 13vw, 200px); aspect-ratio: 4 / 5;
  object-fit: cover; pointer-events: none; border-radius: 4px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(var(--tilt, 0deg));
  transition: opacity .25s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.trail.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--tilt, 0deg)); }
.trail.is-off { opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(var(--tilt, 0deg)); transition-duration: .6s; }

.game { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); padding-top: 1.4rem; }
.game__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 220; cursor: pointer; touch-action: manipulation; }
.foot .game__hint {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem;
  font-family: var(--f-body); font-weight: 600; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
}
.game__hint kbd {
  font: inherit; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 4px; color: var(--text);
}
/* .foot p outranks a bare class, so the giant name needs the .foot in front */
.foot .foot__giant {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0; overflow: hidden; white-space: nowrap; text-align: center;
  font-family: var(--f-disp); font-weight: 800; font-stretch: 112%;
  font-size: 13vw; line-height: .8; letter-spacing: -.06em; text-transform: uppercase;
  font-size: 14.4cqi;            /* the name spans its column exactly, on any screen */
  color: transparent; -webkit-text-stroke: clamp(1px, .16vw, 2px) var(--text-3);
}
.foot > .wrap { container-type: inline-size; }

/* ══ DOWNLOADS ════════════════════════════════════════════════════════════
   The unlisted print-backgrounds page: two paper previews and plain download
   links - links, not script, so they work for anyone the page is sent to. */
.dl { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 760px) { .dl { grid-template-columns: 1fr 1fr; align-items: end; } }
.dl__size { display: grid; gap: .9rem; min-width: 0; }
.dl__sheet { width: 100%; height: auto; aspect-ratio: 297 / 420; background: #FFFFFF;
  border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .45); }
.dl__size h2 { font-size: var(--step-2); display: flex; align-items: baseline; gap: .8rem; }
.dl__size h2 span { font-family: var(--f-body); font-weight: 500; font-size: .8125rem; letter-spacing: .08em; color: var(--text-2); }
.dl__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.dl__note { grid-column: 1 / -1; color: var(--text-2); max-width: 64ch; }

/* ══ TABLET ═══════════════════════════════════════════════════════════════
   Wide enough to be a laptop, held like a phone. The nav stays behind the
   burger because five links plus a logo do not fit, but there is room for the
   one button that matters, and everything you tap gets a thumb-sized target. */
@media (min-width: 761px) and (max-width: 900px) {
  .bar__cta {
    display: inline-flex; margin-inline-start: auto;
    padding: .8rem 1.15rem; font-size: .75rem; letter-spacing: .1em;
  }
  .bar__cta::after { display: none; }                  /* the arrow costs width here */
  .search-btn, .theme-toggle { margin-inline-start: 0; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  /* a narrower box leaves room for four or five courses instead of two */
  .msearch { flex: 0 0 13rem; }
  .mnav__list a { padding-block: .8rem; }
  .mnav__inner { min-height: 64px; }
  .crumbs a, .foot a, .mnav__list a { min-height: 44px; display: inline-flex; align-items: center; }
  .copy { min-height: 40px; }
  /* two up reads better than three at this width, in both directions */
  .sigs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 16rem; }
  .grow__copy h2 { font-size: clamp(3rem, 7vw, 5.5rem); }
}

/* ══ TOUCH TIER ═══════════════════════════════════════════════════════════
   motion.js stamps is-lite on <html> for phones and tablets. There the build
   film is held by CSS sticky instead of a JavaScript pin - the compositor owns
   it, so it cannot stutter under a thumb - and nothing is scrubbed. */
.is-lite .build { min-height: 260vh; }
.is-lite .build__sticky { position: sticky; top: 0; }
.is-lite .grow__media { will-change: auto; }           /* it opens once, not per frame */
@media (max-width: 760px) { .is-lite .build { min-height: 230vh; } }

/* A live blur recomputes every frame it is over something that moves, which on
   a phone or tablet is most of this site. Solid panels instead. */
@media (hover: none) {
  .bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .note { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 8, 12, .86); }
  .lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 8, 12, .97); }

  /* A tap leaves :hover stuck on the element until you tap elsewhere, so the
     hover states are cancelled here and the press itself does the talking. */
  a, button, label, summary, input, select, textarea {
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .btn:hover { --btn-fg: var(--text); --btn-bd: var(--line); }
  .btn--shell:hover { --btn-fg: #FFFFFF; --btn-bd: var(--brand-red); }
  .btn--ghost:hover { --btn-fg: var(--text); }
  .btn:hover::before { transform: scaleY(0); }
  .btn:hover::after { transform: none; }
  .btn:active::before { transform: scaleY(1); }
  .btn:active { --btn-fg: var(--bg); --btn-bd: var(--text); }
  .btn--shell:active { --btn-fg: #FFFFFF; }
  .sig:hover picture, .dish:hover .dish__img picture, .shot:hover img { transform: none; }
  .shot:active img { transform: scale(1.03); }
  .gfilter:not(.is-on):hover, .copy:hover { color: var(--text-2); border-color: var(--line); }
  .chip:hover input:not(:checked) + span { color: var(--text-2); border-color: var(--line); }
  .to-top:hover, .search-btn:hover, .theme-toggle:hover { color: var(--text); border-color: var(--line); }
  .gfilter:active, .copy:active, .to-top:active, .search-btn:active, .theme-toggle:active,
  .lightbox__nav:active, .lightbox__close:active { border-color: var(--brand-red); }
  /* a copy button is a real target, not a caption */
  .copy { min-height: 36px; padding-inline: .8rem; }
}

@media print {
  .bar, .foot, .callbar, .to-top, .progress, .grain, .mnav, .crumbs, .lineart,
  .btn, .status, .build, .filmband, .scrollcue, .mhead__media, .hero--film .pour__media,
  .consent, .search { display: none !important; }
  :root { --bg: #fff; --bg-2: #fff; --text: #000; --text-2: #222; --text-3: #444;
          --line: rgba(0,0,0,.25); --line-2: rgba(0,0,0,.12); --film: #fff; --film-text: #000; --film-text-2: #222; --deep: #fff; --on-deep: #000; --on-deep-soft: #222; }
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }
  .hero--film, .mhead, .grow__stage { min-height: auto; padding-block: 1rem; }
  .hero--film::after, .mhead::after, .grow__media { display: none; }
  .sec, .sec--tight { padding-block: .75rem; }
  .course { grid-template-columns: 1fr 2fr !important; break-inside: avoid; padding-block: 1rem; }
  .course__head { position: static !important; }
  .faq details, .branch { break-inside: avoid; }
  .sigs, .catch__list, .bucket__media { display: none !important; }
  /* the gallery prints as plain plates with the caption under each one */
  .gfilters, .gcount, .lightbox { display: none !important; }
  .shots { grid-template-columns: repeat(3, 1fr) !important; gap: 8pt; background: none; }
  .shot { aspect-ratio: auto; height: auto; break-inside: avoid; }
  .shot picture, .shot img { display: block; height: auto; }
  .shot__cap { position: static; display: block; padding: 2pt 0 0; color: #000; background: none; }
  /* the builder prints as the one line that matters */
  .sbuild__step, .sbuild__acts, .menu__acts { display: none !important; }
  .sbuild__out { border: 0; padding-top: 0; }
  .faq details > div { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="/"]::after, a[href^="#"]::after { content: none; }
}