@charset "utf-8";

/* ==========================================================================
   TERRA KITCHEN — work/terra-kitchen/styles.css
   Property token group: terra.  Editorial / magazine.
   Square corners, hairline rules, no shadows, asymmetric 12-column grid.

   The :root block below is GENERATED from design-system/tokens.json.
   Do not hand-edit values here; edit tokens.json and regenerate.
   Every rule after :root consumes var(--semantic-role) only.
   ========================================================================== */

:root {
  /* --- primitives: tokens.json > primitive.terra ------------------------ */
  --terra-cream-050: #FCF8F1;
  --terra-cream-100: #F5EEE1;
  --terra-cream-200: #EBE0CE;
  --terra-clay-500: #C4562B;
  --terra-clay-600: #A8421D;
  --terra-clay-700: #82320F;
  --terra-olive-600: #55643C;
  --terra-olive-700: #3F4C2B;
  --terra-char-900: #241E18;
  --terra-char-600: #5A5049;
  --terra-char-400: #8A7F75;
  --terra-white: #FFFFFF;

  /* --- semantic roles: tokens.json > semantic.terra --------------------- */
  --bg: var(--terra-cream-050);
  --surface: var(--terra-cream-100);
  --surface-raised: var(--terra-white);
  --surface-inverse: var(--terra-olive-700);
  --border-subtle: var(--terra-cream-200);
  --border-interactive: var(--terra-char-400);
  --text-primary: var(--terra-char-900);
  --text-muted: var(--terra-char-600);
  --text-on-inverse: var(--terra-white);
  --action-primary: var(--terra-clay-600);
  --action-primary-hover: var(--terra-clay-700);
  --on-action-primary: var(--terra-white);
  --accent-graphic: var(--terra-olive-600);
  --focus-ring: var(--terra-clay-600);

  /* --- shared scale: space (4px grid) ----------------------------------- */
  --space-0: 0px;
  --space-px: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* --- shared scale: type ----------------------------------------------- */
  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-md: 18px;
  --type-lg: 20px;
  --type-xl: 24px;
  --type-2xl: 30px;
  --type-3xl: 36px;
  --type-4xl: 48px;
  --type-5xl: 60px;
  --type-6xl: 72px;
  --type-7xl: 96px;

  /* --- shared scale: leading ------------------------------------------- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;

  /* --- shared scale: weight -------------------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- shared scale: radius (terra binds none + xs only) ---------------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 999px;

  /* --- shared scale: motion (terra runs at 320ms) ----------------------- */
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-slower: 480ms;
  --motion-slowest: 640ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- shared scale: z --------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 1000;

  /* --- shared scale: container ------------------------------------------ */
  --container-prose: 680px;
  --container-narrow: 880px;
  --container-default: 1160px;
  --container-wide: 1360px;

  /* --- property typography: tokens.json > typography.terra -------------- */
  --font-display: 'Playfair Display SC', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- derived layout constants ----------------------------------------- */
  --rule-hairline: 1px;
  --gutter: var(--space-5);
  --tracking-eyebrow: 0.18em;
  --tracking-display: 0.01em;

  /* Composition constants. Not spacing-scale steps and not meant to be:
     these are the SVG art-plate heights and the text-measure columns of the
     label/value rows. Named here so every off-scale length in the file is
     auditable in one place. */
  --hero-art-base: 340px;
  --hero-art-sm: 420px;
  --hero-art-md: 480px;
  --hero-art-lg: 620px;
  --hero-art-2xl: 700px;
  --col-label: 7rem;
  --col-value-min: 12rem;
  --col-fact-key: 10rem;
}

/* Foundation primitives carried across all five properties and kept even
   where this page does not currently use them: .sr-only (section 1) and
   .btn--ghost (section 4, a named cell in the MASTER section 6 Button
   contract). Deliberate, not dead code. */

/* ==========================================================================
   1. RESET + BASE
   Breakpoints in use (tokens.json > scales.breakpoint):
   sm 480 / md 768 / lg 1024 / xl 1280 / 2xl 1536. Mobile-first throughout.
   ========================================================================== */

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
  -webkit-text-size-adjust: 100%;
}

/* Do NOT add overflow-x here. html already clips horizontally (rule above).
   Repeating it on body stops overflow propagating to the viewport, makes
   body its own scroll container, and silently kills the sticky header. */
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain — feTurbulence noise, no raster asset */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  /* multiply scales foreground and background luminance together, which
     always lowers the contrast ratio. At 0.26 the tightest terra pair
     (clay-600 on cream-100) fell to about 4.22:1 over the darkest noise
     pixels. 0.14 keeps the paper tooth and holds every pair above AA. */
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

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

hr { border: 0; margin: 0; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

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

::selection {
  background-color: var(--action-primary);
  color: var(--on-action-primary);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  display: inline-block;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  background-color: var(--action-primary);
  color: var(--on-action-primary);
  border-radius: var(--radius-none);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   2. LAYOUT — container + the asymmetric 12-column grid
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-10);
}

.section {
  position: relative;
  padding-block: var(--space-16);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

/* ==========================================================================
   3. TYPOGRAPHY ROLES
   ========================================================================== */

.eyebrow {
  margin-bottom: var(--space-4);
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

/* design-system/pages/terra-kitchen.md: section headings are small,
   uppercase, wide-tracked Karla - the opposite move from the huge display
   headings elsewhere in the portfolio. The display serif carries the h1,
   the pull quote, and the course and dish names instead. */
.section-title {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
}

.rule {
  height: var(--rule-hairline);
  margin-block: var(--space-6);
  background-color: var(--border-interactive);
  max-width: var(--space-32);
}

.rule--full {
  height: var(--rule-hairline);
  max-width: none;
  background-color: var(--action-primary);
  margin-block: 0 var(--space-6);
}

.rule--center {
  margin-inline: auto;
  max-width: var(--space-16);
}

.link {
  color: var(--action-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hairline);
  text-underline-offset: 0.2em;
  transition: color var(--motion-slow) var(--motion-ease-out),
              text-decoration-thickness var(--motion-slow) var(--motion-ease-out);
}

.link:hover {
  color: var(--action-primary-hover);
  text-decoration-thickness: var(--space-px);
}

/* ==========================================================================
   4. BUTTON — MASTER §6 contract. Every state declared.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: var(--rule-hairline) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-slow) var(--motion-ease-out),
              color var(--motion-slow) var(--motion-ease-out),
              border-color var(--motion-slow) var(--motion-ease-out);
}

.btn--lg { min-height: 52px; padding-inline: var(--space-6); }

.btn--primary {
  background-color: var(--action-primary);
  color: var(--on-action-primary);
  border-color: var(--action-primary);
}

.btn--primary:hover {
  background-color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--action-primary);
  border-color: var(--action-primary);
}

.btn--secondary:hover {
  background-color: var(--surface);
  color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: transparent;
}

.btn--ghost:hover { background-color: var(--surface); }

.btn:active { opacity: 0.9; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   5. HEADER + NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--bg);
}

/* The header's bottom hairline is an element rather than a border so the
   page-load press run can draw it across (section 14a). In normal flow and
   1px tall, it occupies exactly the box the border did. */
.site-header__rule {
  display: block;
  height: var(--rule-hairline);
  background-color: var(--border-subtle);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  text-decoration: none;
}

.brand__mark { flex: 0 0 auto; }

.brand__text { display: block; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.brand__tag {
  display: block;
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  line-height: var(--leading-normal);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  border: var(--rule-hairline) solid var(--border-interactive);
  border-radius: var(--radius-none);
  color: var(--text-primary);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover { background-color: var(--surface); }

.nav-toggle__bars {
  display: grid;
  gap: var(--space-1);
  width: var(--space-5);
}

.nav-toggle__bar {
  display: block;
  height: var(--space-px);
  width: 100%;
  background-color: var(--text-primary);
}

.nav-toggle__label { display: inline-block; }

.nav {
  grid-column: 1 / -1;
  display: none;
  border-top: var(--rule-hairline) solid var(--border-subtle);
  padding-top: var(--space-4);
  margin-top: var(--space-3);
}

.nav.is-open { display: block; }

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__link {
  display: block;
  min-height: 44px;
  padding: var(--space-3) 0;
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--rule-hairline) solid transparent;
  transition: color var(--motion-slow) var(--motion-ease-out),
              border-color var(--motion-slow) var(--motion-ease-out);
}

.nav__link:hover { color: var(--action-primary); }

.nav__link.is-active {
  color: var(--action-primary);
  border-bottom-color: var(--action-primary);
}

.nav__item { display: block; }

.nav__item--cta { margin-top: var(--space-3); }

.nav__cta { width: 100%; }

/* ==========================================================================
   6. HERO — asymmetric 5/7 split, art cropped hard by the container
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  background-image:
    radial-gradient(120% 90% at 8% 0%, var(--surface) 0%, transparent 62%),
    radial-gradient(90% 70% at 100% 100%, var(--surface) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}

.hero__inner { row-gap: var(--space-12); }

.hero__eyebrow { margin-bottom: var(--space-5); }

.hero__text { grid-column: 1 / -1; }

.hero__title {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.hero__line { display: block; }

.hero__line--indent {
  color: var(--action-primary);
  padding-left: var(--space-6);
}

.hero__lede {
  max-width: 38ch;
  margin-bottom: var(--space-8);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.hero__meta {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

/* The hours block's top and bottom hairlines, as elements so they can be
   drawn on load. Same geometry as the borders they replace. */
.hero__rule {
  display: block;
  height: var(--rule-hairline);
  background-color: var(--border-subtle);
}

.hero__rule--foot { margin-bottom: var(--space-8); }

.hero__meta-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  align-items: baseline;
}

.hero__meta-label {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-graphic);
}

.hero__meta-value {
  margin: 0;
  font-size: var(--type-base);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__note {
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.hero__art {
  grid-column: 1 / -1;
  position: relative;
}

.hero__art-svg {
  width: 100%;
  height: var(--hero-art-base);
  border: var(--rule-hairline) solid var(--border-subtle);
}

.hero__caption {
  margin-top: var(--space-3);
  font-size: var(--type-sm);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ==========================================================================
   7. STORY — drop cap, offset columns, pull quote into the left margin
   ========================================================================== */

.story {
  background-image:
    radial-gradient(70% 45% at 100% 0%, var(--surface) 0%, transparent 64%),
    radial-gradient(50% 40% at 0% 100%, var(--surface) 0%, transparent 70%);
}

.story__inner { row-gap: var(--space-12); }

.story__head,
.story__body,
.story__body--second,
.pullquote,
.sourcing { grid-column: 1 / -1; }

.story__para {
  margin-bottom: var(--space-5);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.story__para:last-child { margin-bottom: 0; }

.dropcap {
  float: left;
  margin: 0.06em var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--type-5xl);
  font-weight: var(--weight-bold);
  line-height: 0.8;
  color: var(--action-primary);
}

.story__para--lead { color: var(--text-primary); }

.pullquote { margin: 0; }

.pullquote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.pullquote__text p { margin: 0; }

.pullquote__cite {
  margin-top: var(--space-5);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-graphic);
}

.sourcing {
  padding-top: var(--space-8);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.sourcing__title {
  margin-bottom: var(--space-6);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
}

.sourcing__list {
  display: grid;
  gap: var(--space-5);
}

.sourcing__item {
  padding-top: var(--space-4);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.sourcing__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-md);
  color: var(--text-primary);
}

.sourcing__detail {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ==========================================================================
   8. MENU — the only centered composition on the page
   ========================================================================== */

.menu { background-color: var(--surface); }

.menu__inner {
  position: relative;
  margin-inline: auto;
}

.menu__head {
  text-align: center;
  margin-bottom: var(--space-10);
}

.menu__title { font-size: var(--type-lg); }

.menu__note {
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.menu__nav { margin-bottom: var(--space-12); }

.menu__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.menu__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: var(--rule-hairline) solid var(--border-subtle);
  background-color: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--motion-slow) var(--motion-ease-out),
              color var(--motion-slow) var(--motion-ease-out);
}

.menu__nav-link:hover {
  border-color: var(--action-primary);
  color: var(--action-primary);
}

.course { margin-bottom: var(--space-16); }

.course__head {
  text-align: center;
  margin-bottom: var(--space-8);
}

.course__name {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.course__name::after {
  content: "";
  display: block;
  width: var(--space-10);
  height: var(--rule-hairline);
  margin: var(--space-4) auto 0;
  background-color: var(--action-primary);
}

.course__note {
  margin-top: var(--space-3);
  font-size: var(--type-base);
  font-style: italic;
  color: var(--text-muted);
}

.course__list {
  display: grid;
  gap: var(--space-8);
  text-align: left;
}

.dish__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.dish__name {
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.dish__leader {
  flex: 1 1 var(--space-6);
  min-width: var(--space-6);
  border-bottom: var(--rule-hairline) dotted var(--border-interactive);
}

.dish__price {
  flex: 0 0 auto;
  font-size: var(--type-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--action-primary);
}

.dish__desc {
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.dish__marks { white-space: nowrap; }

.mark {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border: var(--rule-hairline) solid var(--border-interactive);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--accent-graphic);
  cursor: help;
}

.menu__legend {
  padding-top: var(--space-8);
  border-top: var(--space-px) solid var(--text-primary);
}

.menu__legend-title {
  margin-bottom: var(--space-4);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
}

.legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-base);
  color: var(--text-muted);
}

.legend__item .mark { margin-left: 0; cursor: default; }

.menu__foot {
  max-width: 68ch;
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ==========================================================================
   9. CHEF
   ========================================================================== */

.chef {
  background-image: linear-gradient(180deg, var(--bg) 55%, var(--surface) 100%);
}

.chef__inner { row-gap: var(--space-12); }

.chef__text,
.chef__portrait { grid-column: 1 / -1; }

.chef__role {
  margin-top: var(--space-2);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-graphic);
}

.chef__bio {
  max-width: 62ch;
  margin-bottom: var(--space-5);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.chef__sig {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--type-xl);
  letter-spacing: 0.12em;
  color: var(--action-primary);
}

.portrait-svg {
  width: 100%;
  border: var(--rule-hairline) solid var(--border-subtle);
}

.chef__caption {
  margin-top: var(--space-3);
  font-size: var(--type-sm);
  font-style: italic;
  color: var(--text-muted);
}

/* ==========================================================================
   10. VISIT — hours, contact, hand-drawn map
   ========================================================================== */

.visit { background-color: var(--surface); }

.visit__inner { row-gap: var(--space-12); }

.visit__head,
.visit__hours,
.visit__contact,
.visit__map { grid-column: 1 / -1; }

.visit__subtitle {
  margin-bottom: var(--space-5);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
}

.visit__subtitle--tight { margin-top: var(--space-8); }

.hours__list { margin-bottom: var(--space-5); }

.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
}

.hours__days {
  flex: 1 1 auto;
  font-size: var(--type-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hours__time {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--type-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.hours__note,
.visit__para {
  max-width: 48ch;
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.address {
  margin-bottom: var(--space-5);
  font-style: normal;
}

.address__line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.address__line--muted {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-base);
  color: var(--text-muted);
}

.contact-list { margin-bottom: var(--space-4); }

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.contact-label {
  flex: 0 0 var(--col-label);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-graphic);
}

/* A contact row is a discrete control, not inline prose, so it carries a
   full 44px touch box (BRIEF section 4). The in-prose tel: links in
   .hero__note and .reserve__para keep the WCAG 2.5.8 inline exception. */
.contact-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 1 1 var(--col-value-min);
  font-size: var(--type-base);
  word-break: break-word;
}

.map-svg {
  width: 100%;
  border: var(--rule-hairline) solid var(--border-interactive);
}

.map__road {
  fill: none;
  stroke: var(--surface-raised);
  stroke-width: 36;
  stroke-linecap: square;
}

.map__label {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--text-primary);
}

.map__label--road { fill: var(--accent-graphic); }

.map__label--muted {
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  fill: var(--text-muted);
}

.map__caption {
  margin-top: var(--space-3);
  font-size: var(--type-sm);
  font-style: italic;
  color: var(--text-muted);
}

/* ==========================================================================
   11. RESERVATIONS — Field contract from MASTER §6
   ========================================================================== */

.reserve__inner { row-gap: var(--space-12); }

.reserve__intro,
.reserve__form-wrap { grid-column: 1 / -1; }

.reserve__para {
  max-width: 46ch;
  margin-bottom: var(--space-5);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.reserve__facts { margin-top: var(--space-8); }

.reserve__fact {
  padding-block: var(--space-3);
  border-top: var(--rule-hairline) solid var(--border-subtle);
  font-size: var(--type-base);
  color: var(--text-muted);
}

.reserve__fact-key {
  display: inline-block;
  min-width: var(--col-fact-key);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--type-xs);
  color: var(--text-primary);
}

.form {
  padding: var(--space-6);
  background-color: var(--surface-raised);
  border: var(--rule-hairline) solid var(--border-subtle);
}

.form__grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
}

.field__input,
.field__select,
.field__textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  background-color: var(--bg);
  border: var(--rule-hairline) solid var(--border-interactive);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  transition: border-color var(--motion-slow) var(--motion-ease-out);
}

.field__select {
  appearance: none;
  padding-right: var(--space-8);
  background-image:
    linear-gradient(45deg, transparent 49%, var(--text-primary) 50%, var(--text-primary) 58%, transparent 59%),
    linear-gradient(-45deg, transparent 49%, var(--text-primary) 50%, var(--text-primary) 58%, transparent 59%);
  background-position: right var(--space-5) center, right var(--space-3) center;
  background-size: var(--space-2) var(--space-2);
  background-repeat: no-repeat;
}

.field__textarea {
  min-height: var(--space-32);
  resize: vertical;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: var(--text-muted); }

.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible { border-color: var(--action-primary); }

.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The terra palette has no danger primitive (tokens.json > primitive.terra)
   and inventing a red would breach BRIEF section 0 rule 3, so error is
   separated from focus structurally rather than by hue: focus is a clay-600
   hairline on all four sides, error is the darker clay-700 plus a heavy left
   marker - the same left-bar idiom as .form__status.is-success. Colour is
   never the only channel: main.js also sets aria-invalid and injects a
   role="alert" message below the field. */
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-color: var(--action-primary-hover);
  border-left-width: var(--space-1);
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.field__hint[role="alert"] {
  color: var(--action-primary-hover);
  font-weight: var(--weight-semibold);
}

.form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.form__fineprint {
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.form__status {
  margin-top: var(--space-5);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.form__status:empty { margin-top: 0; }

.form__status.is-success {
  padding: var(--space-4);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-left: var(--space-1) solid var(--action-primary);
}

/* ==========================================================================
   12. GALLERY — deliberately uneven masonry
   ========================================================================== */

.gallery__inner { position: relative; }

.gallery__head { margin-bottom: var(--space-10); }

.gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.figure { margin: 0; }

.figure__art {
  border: var(--rule-hairline) solid var(--border-subtle);
  background-color: var(--surface);
}

.art-svg { width: 100%; height: auto; }

.figure__caption {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--rule-hairline) solid var(--border-subtle);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ==========================================================================
   13. FOOTER + CREDIT STRIP
   ========================================================================== */

.site-footer {
  padding-block: var(--space-16);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

/* The global ring is clay-600, which measures 1.52:1 on the olive band -
   under the 3:1 floor of WCAG 2.1 SC 1.4.11. On the inverse surface the ring
   switches to text-on-inverse (9.21:1). Declared in tokens.json as
   "terra / focus ring on olive band". */
.site-footer :focus-visible { outline-color: var(--text-on-inverse); }

.footer__grid { row-gap: var(--space-10); }

.footer__brand,
.footer__col,
.footer__legal,
.footer__backtop { grid-column: 1 / -1; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  line-height: var(--leading-snug);
  color: var(--text-on-inverse);
}

.footer__blurb {
  max-width: 40ch;
  margin-block: var(--space-4) var(--space-6);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-on-inverse);
  opacity: 0.86;
}

.footer__brand .btn--secondary {
  color: var(--text-on-inverse);
  border-color: var(--text-on-inverse);
}

.footer__brand .btn--secondary:hover {
  background-color: var(--text-on-inverse);
  color: var(--surface-inverse);
  border-color: var(--text-on-inverse);
}

.footer__title {
  margin-bottom: var(--space-4);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-inverse);
  opacity: 0.7;
}

.footer__list { display: grid; gap: var(--space-1); }

.footer__line {
  display: block;
  padding-block: var(--space-2);
  font-size: var(--type-sm);
  color: var(--text-on-inverse);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-block: var(--space-2);
  font-size: var(--type-sm);
  color: var(--text-on-inverse);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hairline);
  text-underline-offset: 0.2em;
  word-break: break-word;
  transition: text-decoration-thickness var(--motion-slow) var(--motion-ease-out);
}

.footer__link:hover { text-decoration-thickness: var(--space-px); }

.footer__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--rule-hairline) solid var(--border-interactive);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-on-inverse);
  opacity: 0.72;
}

.footer__backtop { margin-top: var(--space-2); }

.credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter);
  background-color: var(--bg);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.credit__text {
  font-size: var(--type-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.credit__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--action-primary);
}

.credit__link:hover { color: var(--action-primary-hover); }

/* ==========================================================================
   14. SCROLL REVEAL — cross-fade only. Print does not slide.
   Classes are applied by main.js so no-JS readers never see hidden content.
   ========================================================================== */

.reveal {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--motion-ease-out);
}

.reveal.is-visible { opacity: 1; }

/* ==========================================================================
   14a. PRESS RUN — page-load choreography for the header and hero.
   An inline script in <head> sets html.is-loading; main.js runs the timeline
   (rules draw, masthead inks word by word, the plate is drawn and filled,
   hours rows, then the calls to action) and removes the class when it ends.
   Only [data-load] elements are hidden, only while loading, and the failsafe
   shows them at 2.5s if main.js never arrives. Opacity, a rule's scaleX and
   SVG stroke-dashoffset only: print does not slide.
   ========================================================================== */

.is-loading [data-load] { opacity: 0; }

.is-loading [data-load] { animation: load-failsafe 0s 2.5s forwards; }

@keyframes load-failsafe { to { opacity: 1; } }

/* Rules extend from their left end. fill-box makes the two 1px <rect>
   rules inside the hero SVG scale from their own edge, not the viewBox's. */
[data-load="rule"] {
  transform-origin: 0 50%;
  transform-box: fill-box;
}

/* Same-origin page changes cross-fade natively; unsupported browsers just
   navigate. No view-transition-name: this header is not the hub's. */
@view-transition { navigation: auto; }

/* ==========================================================================
   15. BREAKPOINT sm — 480px
   ========================================================================== */

@media (min-width: 480px) {
  .hero__title { font-size: var(--type-5xl); }
  .hero__art-svg { height: var(--hero-art-sm); }

  .hero__meta-item {
    grid-template-columns: minmax(0, var(--col-label)) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .form__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .form__fineprint { max-width: 32ch; text-align: right; }
  .course__list { gap: var(--space-6) var(--space-10); }
}

/* ==========================================================================
   16. BREAKPOINT md — 768px. The 12-column grid engages here.
   ========================================================================== */

@media (min-width: 768px) {
  :root { --gutter: var(--space-8); }

  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .section { padding-block: var(--space-20); }

  .section-title { font-size: var(--type-lg); }

  /* header */
  .site-header__inner { padding-block: var(--space-4); }
  .nav-toggle { display: none; }
  .nav {
    display: block;
    grid-column: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
  .nav__link { padding: var(--space-3) 0; font-size: var(--type-xs); }
  .nav__item--cta { margin-top: 0; margin-left: var(--space-3); }
  .nav__cta { width: auto; }

  /* hero */
  .hero { padding-block: var(--space-16) var(--space-20); }
  .hero__text { grid-column: 1 / span 7; }
  .hero__art { grid-column: 8 / -1; }
  .hero__art-svg { height: 100%; min-height: var(--hero-art-md); }
  .hero__title { font-size: var(--type-5xl); }
  .hero__line--indent { padding-left: var(--space-10); }

  /* story */
  .story__head { grid-column: 1 / span 5; }
  .story__body { grid-column: 6 / -1; }
  .story__body--second { grid-column: 1 / span 7; }
  .pullquote { grid-column: 1 / span 8; }
  .pullquote__text { font-size: var(--type-2xl); }
  .sourcing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }

  /* menu */
  .menu__title { font-size: var(--type-xl); }

  /* chef */
  .chef__text { grid-column: 1 / span 7; }
  .chef__portrait { grid-column: 8 / -1; }

  /* visit */
  .visit__head { grid-column: 1 / span 12; }
  .visit__hours { grid-column: 1 / span 6; }
  .visit__contact { grid-column: 7 / -1; }
  .visit__map { grid-column: 1 / -1; }

  /* reserve */
  .reserve__intro { grid-column: 1 / span 5; }
  .reserve__form-wrap { grid-column: 6 / -1; }
  .form { padding: var(--space-8); }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }

  /* gallery */
  .gallery__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }
  .figure { grid-column: span 3; }
  .figure--tall { grid-column: span 2; }
  .figure--wide { grid-column: span 6; }

  /* footer */
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 4; }
  .footer__legal { grid-column: 1 / -1; }

  .credit { padding-inline: var(--space-8); }
}

/* ==========================================================================
   17. BREAKPOINT lg — 1024px. Alignment breaks on purpose here.
   ========================================================================== */

@media (min-width: 1024px) {
  .section { padding-block: var(--space-24); }

  /* hero: 5/7 split, art cropped hard against the right container edge */
  .hero__text { grid-column: 2 / span 5; }
  .hero__art {
    grid-column: 7 / -1;
    margin-right: calc(var(--gutter) * -1);
  }
  .hero__art-svg { min-height: var(--hero-art-lg); border-right: 0; }
  .hero__title { font-size: var(--type-6xl); }
  .hero__lede { font-size: var(--type-lg); }

  /* story: heading starts in column 2, body sits in 7 through 11 */
  .story__head { grid-column: 2 / span 4; }
  .story__body { grid-column: 7 / span 5; }
  .story__body--second { grid-column: 2 / span 5; }

  /* pull quote bleeds into the left margin, short of the gutter */
  .pullquote {
    grid-column: 1 / span 7;
    margin-left: calc(var(--space-6) * -1);
  }
  .pullquote__text { font-size: var(--type-4xl); }

  .sourcing { grid-column: 2 / span 10; }
  .sourcing__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* menu stays centered, two columns of dishes */
  .course__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-16);
    row-gap: var(--space-8);
  }

  /* chef: narrow measure offset right of the axis */
  .chef__text { grid-column: 3 / span 6; }
  .chef__portrait { grid-column: 10 / -1; }

  /* visit: three unequal columns */
  .visit__head { grid-column: 2 / span 6; }
  .visit__hours { grid-column: 2 / span 4; }
  .visit__contact { grid-column: 7 / span 5; }
  .visit__map { grid-column: 2 / span 10; }

  /* reserve */
  .reserve__intro { grid-column: 2 / span 4; }
  .reserve__form-wrap { grid-column: 7 / span 6; }

  /* gallery: uneven masonry */
  .gallery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .figure { grid-column: span 4; }
  .figure--tall { grid-column: span 3; grid-row: span 2; }
  .figure--wide { grid-column: span 9; }

  /* footer: brand holds columns 1 through 4, the lists sit off-axis at 6 */
  .footer__brand { grid-column: 1 / span 4; }
  .footer__col { grid-column: span 2; }
  .footer__col:nth-child(2) { grid-column: 6 / span 2; }
}

/* ==========================================================================
   18. BREAKPOINT xl — 1280px
   ========================================================================== */

@media (min-width: 1280px) {
  :root { --gutter: var(--space-10); }

  .hero__title { font-size: var(--type-6xl); }
  .dropcap { font-size: var(--type-6xl); }
  .story__para { font-size: var(--type-lg); }
  .chef__bio { font-size: var(--type-lg); }
}

/* ==========================================================================
   19. BREAKPOINT 2xl — 1536px
   ========================================================================== */

@media (min-width: 1536px) {
  .container { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }
  .hero__art-svg { min-height: var(--hero-art-2xl); }
}

/* ==========================================================================
   20. REDUCED MOTION — no transforms, no animation, no smooth scroll
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.is-visible { opacity: 1; }

  /* No press run: load-marked content shows from the first paint, even
     before main.js has had a chance to drop html.is-loading. */
  .is-loading [data-load] {
    opacity: 1;
    animation: none;
  }

  @view-transition { navigation: none; }

  .skip-link { transform: none; top: -10rem; }
  .skip-link:focus-visible { top: var(--space-4); }
}

/* ==========================================================================
   21. PRINT — the menu is the thing people actually print
   ========================================================================== */

@media print {
  body::before,
  .site-header,
  .hero__art,
  .menu__nav,
  .reserve,
  .gallery,
  .credit { display: none; }

  .section { border-top: 0; padding-block: var(--space-6); }
  .course { break-inside: avoid; }
  .dish { break-inside: avoid; }
}

/* --- PHOTO SWAP POINTS -------------------------------------------------
   Every image on this page is hand-authored inline SVG plus layered CSS
   gradients. To drop in real photography later, replace the art on these
   selectors and delete the inline <svg> they wrap:

     .hero__art-svg   -> 1600x900 hero, kitchen or dining room, warm light
     .figure__art     -> 800x600 each, six gallery frames (primary swap point)
     .figure--tall    -> 800x1120 portrait crop
     .figure--wide    -> 1600x680 panorama crop
     .portrait-svg    -> 720x920 chef portrait
     .map-svg         -> keep as SVG; do not swap in a map screenshot or iframe

   Keep the 1px border-subtle frame and the hairline caption rule in place,
   set the replacement to object-fit: cover, and keep alt text meaningful.
   ---------------------------------------------------------------------- */