@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/baloo2-600.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo2-600.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo2-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-sc-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-sc-700.woff2) format('woff2')}

:root{
  /* --- Base palette (straight off the badge) --- */
  --navy-900:#08222B;      /* deepest ink, keyline shadow */
  --navy-800:#0E323F;      /* Deep navy - primary text, outlines, dark surfaces */
  --navy-600:#1B4E5F;
  --navy-400:#3C7688;
  --teal-500:#5CC4CF;      /* Sea teal - secondary surfaces, waves, dividers */
  --teal-600:#3FA8B4;
  --teal-300:#9BDDE4;
  --teal-100:#DCF2F4;
  --orange-500:#E5843C;    /* Koo's orange - primary accent, buttons, prices */
  --orange-600:#C96A26;
  --amber-400:#F0A94E;     /* Golden amber - highlights, hover */
  --amber-200:#F8D6A4;
  --cream-50:#FDFBF7;      /* Cream white - page background, reversed type */
  --cream-100:#F6F0E4;     /* shell - secondary paper surface */
  --cream-200:#EADFC9;
  --white:#FFFFFF;
  --rust-600:#B8412A;      /* sold out / errors, sign-painter red */
  --kelp-600:#2F7A5B;      /* in stock / confirmations */

  /* --- Semantic surfaces --- */
  --surface-page:var(--cream-50);
  --surface-card:var(--white);
  --surface-card-alt:var(--cream-100);
  --surface-dark:var(--navy-800);
  --surface-dark-deep:var(--navy-900);
  --surface-teal:var(--teal-500);
  --surface-teal-soft:var(--teal-100);
  --surface-accent:var(--orange-500);
  --surface-highlight:var(--amber-400);

  /* --- Semantic text --- */
  --text-body:var(--navy-800);
  --text-muted:var(--navy-400);
  --text-reversed:var(--cream-50);
  --text-price:var(--orange-600);
  --text-price-reversed:var(--amber-400);
  --text-link:var(--orange-600);
  --text-link-hover:var(--navy-800);

  /* --- Lines & keylines (never a shadow) --- */
  --keyline:var(--navy-800);
  --keyline-soft:var(--cream-200);
  --keyline-teal:var(--teal-500);

  /* --- Interactive states --- */
  --accent-hover:var(--amber-400);
  --accent-press:var(--orange-600);
  --dark-hover:var(--navy-600);
  --dark-press:var(--navy-900);
  --focus-ring:var(--teal-600);

  /* --- Status --- */
  --status-fresh:var(--kelp-600);
  --status-soldout:var(--rust-600);
  --status-info:var(--teal-600);
  --status-warn:var(--amber-400);
}

:root{
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;   /* headers, badges, signage */
  --font-text:"Barlow","Helvetica Neue",Arial,sans-serif;         /* body, menu items */
  --font-board:"Barlow Semi Condensed","Barlow",Arial,sans-serif; /* prices, menu-board rows */

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  /* Display scale - always tight, always heavy */
  --size-display-xl:72px;
  --size-display-l:52px;
  --size-display-m:38px;
  --size-display-s:28px;
  --lh-display-xl:0.92; 
  --lh-display-l:0.96; 
  --lh-display-m:1; 
  --lh-display-s:1.05; 

  /* Text scale */
  --size-body-l:19px;
  --size-body-m:16px;
  --size-body-s:14px;
  --size-caption:12px;
  --lh-body-l:1.55; 
  --lh-body-m:1.55; 
  --lh-body-s:1.5; 
  --lh-caption:1.35; 

  /* Board scale - prices and menu rows */
  --size-price-l:32px;
  --size-price-m:22px;
  --size-price-s:17px;

  --track-display:-0.01em; 
  --track-eyebrow:0.14em; 
  --track-body:0; 

  --eyebrow-size:13px;
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter:var(--space-5);
  --section-y:var(--space-9);
  --section-y-tight:var(--space-7);
  --card-pad:var(--space-5);
  --card-pad-tight:var(--space-4);
  --control-pad-x:var(--space-5);
  --control-pad-y:var(--space-3);

  --content-max:1180px;
  --measure:62ch;

  --control-h-s:36px;
  --control-h-m:46px;
  --control-h-l:56px;
}

:root{
  /* Heavy sticker keylines. Everything is outlined, nothing floats. */
  --border-hair:1px;
  --border-1:2px;
  --border-2:3px;
  --border-3:4px;
  --border-heavy:6px;

  --stroke-keyline:var(--border-2) solid var(--keyline);
  --stroke-soft:var(--border-hair) solid var(--keyline-soft);

  --radius-0:0px;
  --radius-1:6px;
  --radius-2:10px;
  --radius-3:16px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Offset "decal" block - the only depth effect in the system. Never blurred. */
  --decal-offset:4px;
  --decal:var(--decal-offset) var(--decal-offset) 0 0 var(--keyline);
  --decal-teal:var(--decal-offset) var(--decal-offset) 0 0 var(--teal-500);
  --decal-tight:2px 2px 0 0 var(--keyline);
}

:root{
  --dur-fast:110ms; 
  --dur-base:180ms; 
  --dur-slow:320ms; 
  --ease-snap:cubic-bezier(.2,.8,.2,1); 
  --ease-out:cubic-bezier(.33,1,.68,1); 
  --press-shift:2px;
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms; 
    --dur-base:0ms; 
    --dur-slow:0ms; 
  }
}

/* ==========================================================================
   Koo's Seafood & Fish Market - site styles
   Built on the Koo's design system tokens (see tokens block above).
   Rules of the system: everything is outlined, nothing floats.
   No blurred shadows anywhere - only the flat "decal" offset.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--size-body-m);
  line-height: var(--lh-body-m);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Icons are inline SVG with no intrinsic size - give them one everywhere. */
svg { width: 18px; height: 18px; flex: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  margin: 0;
}

a { color: var(--text-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); }

:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--dark { background: var(--surface-dark); color: var(--text-reversed); }
.section--shell { background: var(--surface-card-alt); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 200;
  background: var(--orange-500); color: var(--navy-900);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-5);
  border: var(--stroke-keyline); border-radius: var(--radius-pill);
  transition: top var(--dur-base) var(--ease-snap);
}
.skip-link:focus { top: var(--space-4); }

/* --- Eyebrow + section headers ------------------------------------------ */

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--orange-600);
  margin: 0 0 var(--space-2);
}
.section--dark .eyebrow { color: var(--amber-400); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-head h2 { font-size: var(--size-display-m); line-height: var(--lh-display-m); }
.section-head p:not(.eyebrow) { margin: var(--space-2) 0 0; color: var(--text-muted); max-width: var(--measure); }
.section--dark .section-head p:not(.eyebrow) { color: var(--teal-300); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-m);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-family: var(--font-display);
  font-size: var(--size-body-m);
  font-weight: var(--weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--stroke-keyline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap),
              background-color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}
.btn:active { transform: translate(var(--press-shift), var(--press-shift)); }

.btn--primary { background: var(--orange-500); color: var(--navy-900); box-shadow: var(--decal); }
.btn--primary:hover { background: var(--amber-400); color: var(--navy-900); }
.btn--primary:active { box-shadow: 0 0 0 0 var(--keyline); }

.btn--secondary { background: var(--teal-500); color: var(--navy-900); }
.btn--secondary:hover { background: var(--teal-300); color: var(--navy-900); }

.btn--dark { background: var(--navy-800); color: var(--cream-50); }
.btn--dark:hover { background: var(--navy-600); color: var(--cream-50); }

.btn--ghost { background: transparent; color: var(--navy-800); }
.btn--ghost:hover { background: var(--cream-100); color: var(--navy-800); }
.section--dark .btn--ghost { color: var(--cream-50); border-color: var(--cream-50); }
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--cream-50); }

.btn--sm { min-height: var(--control-h-s); font-size: var(--size-body-s); padding: var(--space-2) var(--space-4); }
.btn--block { width: 100%; }

/* --- Nav -----------------------------------------------------------------
   Matched to the design system's NavBar component: 54px badge inside a cream
   ring, brand set in the display face at 24px, links in the text face, 4px
   navy keyline under the bar.
   ------------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-800);
  border-bottom: var(--border-3) solid var(--navy-900);
}
.nav__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-6);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand img {
  width: 54px; height: 54px; flex: none;
  border-radius: var(--radius-circle);
  border: var(--border-1) solid var(--cream-50);
  background: var(--cream-50);
  object-fit: cover;
}
.brand__name {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: 24px; line-height: 1; color: var(--cream-50);
  letter-spacing: var(--track-display); text-transform: uppercase;
}
.nav__links { display: flex; align-items: center; gap: var(--space-5); }
.nav__links a {
  font-family: var(--font-text); font-weight: var(--weight-bold);
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream-50); text-decoration: none;
  padding-bottom: 3px; border-bottom: 3px solid transparent;
}
.nav__links a:hover { color: var(--amber-400); border-bottom-color: var(--orange-500); }
.nav__cta { display: flex; align-items: center; gap: var(--space-3); }
.nav__phone {
  font-family: var(--font-board); font-weight: var(--weight-bold);
  font-size: var(--size-price-s); color: var(--cream-50); text-decoration: none;
  white-space: nowrap;
}
.nav__phone:hover { color: var(--amber-400); }

@media (max-width: 900px) {
  /* No hamburger for four links - wrap them onto a second row instead. */
  .nav__inner { flex-wrap: wrap; row-gap: var(--space-3); gap: var(--space-4); }
  .nav__links {
    order: 3; width: 100%; gap: var(--space-5);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }
}
@media (max-width: 560px) {
  .nav__phone { display: none; }
  .brand img { width: 46px; height: 46px; }
  .brand__name { font-size: 21px; }
  .hero h1 { font-size: var(--size-display-m); line-height: var(--lh-display-m); }
  .section-head h2 { font-size: var(--size-display-s); line-height: var(--lh-display-s); }
}

/* --- Wave band divider ---------------------------------------------------
   Ported from the design system's WaveBand: a flat band with two offset
   scallop layers, the back one at 55% so the edge reads as depth without a
   shadow. Tones come straight from the component's tone map.
   ------------------------------------------------------------------------ */

.waveband {
  --wb-height: 56px;
  position: relative;
  height: var(--wb-height);
  overflow: hidden;
  background: var(--wb-back);
}
.waveband--teal { --wb-back: var(--teal-500); --wb-front: var(--cream-50); }
.waveband--navy { --wb-back: var(--navy-800); --wb-front: var(--teal-500); }
.waveband--cream { --wb-back: var(--cream-100); --wb-front: var(--white); }
.waveband--flip { transform: scaleY(-1); }

.waveband__back,
.waveband__front {
  position: absolute;
  left: 0; right: 0;
  background-repeat: repeat-x;
}
.waveband__back {
  bottom: -6px;
  height: calc(var(--wb-height) * .6);
  background-image: radial-gradient(circle at 50% 100%, var(--wb-front) 0 34px, transparent 34.5px);
  background-size: 68px 100%;
  opacity: .55;
}
.waveband__front {
  bottom: -14px;
  height: calc(var(--wb-height) * .75);
  background-image: radial-gradient(circle at 50% 100%, var(--wb-front) 0 44px, transparent 44.5px);
  background-size: 88px 100%;
  background-position-x: 22px;
}

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--surface-dark); color: var(--text-reversed); }
.hero__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-8);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--space-8); align-items: center;
}
.hero h1 {
  font-size: var(--size-display-xl); line-height: var(--lh-display-xl);
  text-transform: uppercase; margin-bottom: var(--space-5);
}
.hero h1 .accent { color: var(--orange-500); }
.hero p.lede {
  font-size: var(--size-body-l); line-height: var(--lh-body-l);
  color: var(--teal-100); max-width: 46ch; margin: 0 0 var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__badge { justify-self: center; width: min(100%, 380px); }

.pin {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--cream-50); color: var(--navy-800);
  font-family: var(--font-text); font-size: var(--eyebrow-size);
  font-weight: var(--weight-bold); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: var(--stroke-keyline); border-radius: var(--radius-pill);
  margin-bottom: var(--space-5); text-decoration: none;
}
.pin:hover { background: var(--amber-200); color: var(--navy-800); }
.pin svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: var(--space-7) var(--space-7); gap: var(--space-6); }
  .hero h1 { font-size: var(--size-display-l); line-height: var(--lh-display-l); }
  .hero__badge { width: min(100%, 260px); order: -1; }
}

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: var(--stroke-keyline);
  border-radius: var(--radius-3);
  padding: var(--card-pad);
}
.card--decal { box-shadow: var(--decal); }
.card--flat { padding: 0; overflow: hidden; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.step h3 { font-size: var(--size-display-s); line-height: var(--lh-display-s); margin-bottom: var(--space-2); }
.step p { margin: 0; color: var(--text-muted); font-size: var(--size-body-s); }
.step__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: var(--stroke-keyline); border-radius: var(--radius-circle);
  margin-bottom: var(--space-4); background: var(--cream-100);
}
.step__icon svg { width: 22px; height: 22px; }

/* --- Fresh-from-the-case mark -------------------------------------------- */

.freshmark {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-100); color: var(--navy-800);
  font-family: var(--font-text); font-size: 11px;
  font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px var(--space-3);
  border: var(--border-1) solid var(--keyline); border-radius: var(--radius-pill);
}
.freshmark svg { width: 13px; height: 13px; }

.tag {
  display: inline-flex; align-items: center;
  background: var(--orange-500); color: var(--navy-900);
  font-family: var(--font-text); font-size: 11px;
  font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px var(--space-3);
  border: var(--border-1) solid var(--keyline); border-radius: var(--radius-pill);
}
.tag--soldout { background: var(--rust-600); color: var(--cream-50); }

/* --- Promotions ---------------------------------------------------------- */

.promo-strip {
  background: var(--amber-400);
  border-block: var(--border-2) solid var(--keyline);
}
.promo-strip__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  color: var(--navy-900); text-align: center;
}
.promo-strip a { color: var(--navy-900); }

.promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .promos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .promos { grid-template-columns: 1fr; } }

.promo {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: var(--stroke-keyline); border-radius: var(--radius-3);
  box-shadow: var(--decal); overflow: hidden;
}
.promo__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream-100); overflow: hidden; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__flag {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: var(--rust-600); color: var(--cream-50);
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--size-body-s); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px var(--space-3);
  border: var(--border-1) solid var(--keyline); border-radius: var(--radius-pill);
}
.promo__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.promo__body h3 { font-size: var(--size-display-s); line-height: var(--lh-display-s); }
.promo__body p { margin: 0; color: var(--text-muted); font-size: var(--size-body-s); flex: 1; }
.promo__prices { display: flex; align-items: baseline; gap: var(--space-3); }
.promo__was {
  font-family: var(--font-board); font-size: var(--size-price-m);
  color: var(--text-muted); text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.promo__now {
  font-family: var(--font-board); font-weight: var(--weight-black);
  font-size: var(--size-price-l); line-height: 1; color: var(--text-price);
}
.promo__until {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy-600);
  padding-top: var(--space-1);
  border-top: var(--stroke-soft);
}
.promo__until svg { width: 13px; height: 13px; flex: none; }
.promo--expired { opacity: .55; }

/* --- Menu ---------------------------------------------------------------- */

.tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.tab {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-body-s); letter-spacing: .06em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card); color: var(--navy-800);
  border: var(--stroke-keyline); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-snap);
}
.tab:hover { background: var(--cream-100); }
.tab[aria-selected="true"] { background: var(--navy-800); color: var(--cream-50); }

.menu-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--teal-100); color: var(--navy-800);
  border: var(--stroke-keyline); border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-body-s); margin-bottom: var(--space-5);
}
.menu-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 820px) { .menu-list { grid-template-columns: 1fr; } }

.menu-item {
  background: var(--surface-card);
  border: var(--stroke-keyline); border-radius: var(--radius-2);
  padding: var(--card-pad-tight) var(--space-5);
}
.menu-item__top { display: flex; align-items: baseline; gap: var(--space-4); }
.menu-item__name {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-body-l); line-height: 1.2; color: var(--navy-800);
}
.menu-item__dots { flex: 1; border-bottom: 2px dotted var(--keyline-soft); transform: translateY(-4px); }
.menu-item__price {
  font-family: var(--font-board); font-weight: var(--weight-black);
  font-size: var(--size-price-m); color: var(--text-price); white-space: nowrap;
}
.menu-item__desc { margin: var(--space-2) 0 0; font-size: var(--size-body-s); color: var(--text-muted); }
.menu-item__marks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.draft-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--amber-200); color: var(--navy-900);
  border: var(--stroke-keyline); border-radius: var(--radius-2);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  font-size: var(--size-body-s);
}
.draft-banner strong { font-family: var(--font-display); }
.draft-banner svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* --- Case / market ------------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }

.photo {
  border: var(--stroke-keyline); border-radius: var(--radius-3);
  overflow: hidden; box-shadow: var(--decal);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 3; }

.case-list { display: grid; gap: var(--space-3); color: var(--text-body); }
.case-row {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair) solid var(--keyline-soft);
}
.case-row:last-child { border-bottom: 0; padding-bottom: 0; }
.case-row__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-body-l); }
.case-row__price { margin-left: auto; font-family: var(--font-board); font-weight: var(--weight-bold); font-size: var(--size-price-m); color: var(--text-price); }

/* --- Gallery ------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; }
.gallery .photo { aspect-ratio: 1 / 1; }
.gallery figcaption {
  margin-top: var(--space-2); font-size: var(--size-body-s);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  color: var(--navy-800);
}

/* --- Visit --------------------------------------------------------------- */

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: var(--space-3) 0; border-bottom: var(--border-hair) solid var(--keyline-soft); }
.hours th { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-body-m); }
.hours td { font-family: var(--font-board); font-weight: var(--weight-semibold); font-size: var(--size-price-s); text-align: right; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .is-closed td { color: var(--rust-600); }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.info-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--orange-500); }
.info-list a { font-weight: var(--weight-semibold); }

/* --- Dialog -------------------------------------------------------------- */

dialog.claim {
  border: var(--stroke-keyline); border-radius: var(--radius-3);
  padding: 0; max-width: 440px; width: calc(100% - 32px);
  background: var(--surface-card); color: var(--text-body);
}
dialog.claim::backdrop { background: rgba(8, 34, 43, .6); }
.claim__head {
  background: var(--navy-800); color: var(--cream-50);
  padding: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4);
}
.claim__head h3 { font-size: var(--size-display-s); line-height: var(--lh-display-s); }
.claim__head p { margin: var(--space-2) 0 0; font-size: var(--size-body-s); color: var(--teal-100); }
.claim__close {
  margin-left: auto; background: none; border: 0; color: var(--cream-50);
  cursor: pointer; padding: 4px; line-height: 0;
}
.claim__close svg { width: 22px; height: 22px; }
.claim__body { padding: var(--space-5); display: grid; gap: var(--space-4); }

.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-body-s); }
.field input {
  height: var(--control-h-m); padding: 0 var(--space-4);
  font-family: var(--font-text); font-size: var(--size-body-m);
  color: var(--text-body); background: var(--white);
  border: var(--stroke-keyline); border-radius: var(--radius-2);
}
.field .hint { font-size: var(--size-caption); color: var(--text-muted); }

.toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  background: var(--kelp-600); color: var(--cream-50);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-5);
  border: var(--stroke-keyline); border-radius: var(--radius-pill);
  z-index: 300; display: flex; align-items: center; gap: var(--space-2);
}
.toast[hidden] { display: none; }
.toast svg { width: 18px; height: 18px; }

/* --- Footer -------------------------------------------------------------- */

.footer { background: var(--surface-dark-deep); color: var(--cream-50); }
.footer__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-7) var(--gutter);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6);
}
@media (max-width: 820px) { .footer__inner { grid-template-columns: 1fr; } }
.footer img.mark { width: 72px; margin-bottom: var(--space-4); }
.footer p { color: var(--teal-100); font-size: var(--size-body-s); max-width: 34ch; }
.footer h4 {
  font-family: var(--font-text); font-size: var(--eyebrow-size);
  font-weight: var(--weight-bold); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--amber-400); margin-bottom: var(--space-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer a { color: var(--cream-50); text-decoration: none; font-size: var(--size-body-s); }
.footer a:hover { color: var(--amber-400); text-decoration: underline; }
.footer__legal {
  border-top: var(--border-hair) solid var(--navy-600);
  padding: var(--space-4) var(--gutter);
  max-width: var(--content-max); margin: 0 auto;
  font-size: var(--size-caption); color: var(--teal-300); opacity: .8;
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}