/* Hallmark · macrostructure: Catalogue · genre: editorial · tone: warm/soft
 * theme: custom (tuned) · vibe: "warm cream, brand navy, bronze gold"
 * paper: oklch(96.5% 0.014 78) · accent: oklch(48% 0.128 66)
 * display: Fraunces (SOFT 55, WONK 1) · body: IBM Plex Sans
 * axes: paper-band=light · display-style=high-contrast-serif · accent-hue=warm
 * nav: N6 Newspaper masthead (issue-line=below, wordmark=image, rule=single)
 * footer: Ft2 Inline rule single line (order=credit/wordmark/links, sep=middot)
 * enrichment: none — typography only
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40–41, 30/30 pairs verified light + dark)
 * slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57 — verified 320/375/414/768)
 */

@import url("tokens.css");

/* ================================================================
   Base
   ================================================================ */

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

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-variation-settings: "SOFT" 55, "WONK" 1;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p {
  margin: 0;
}

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

a {
  color: inherit;
}

/* Every link ships default · hover · focus-visible · active.
   There is no disabled state — this page has no disableable controls. */
a:active {
  color: var(--color-accent);
}

.band a:active {
  color: var(--color-accent-bright);
}

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.band :focus-visible {
  outline-color: var(--color-band-focus);
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  z-index: var(--z-overlay);
  white-space: nowrap;
}

.skip:focus {
  left: var(--space-2xs);
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ================================================================
   N6 · Newspaper masthead — on the brand navy band
   ================================================================ */

.band {
  background: var(--color-band);
  color: var(--color-band-ink);
}

.masthead {
  padding-block: var(--space-xl) var(--space-lg);
  text-align: center;
}

.masthead__mark {
  width: clamp(7rem, 20vw, 10.5rem);
  margin-inline: auto;
  border-radius: var(--radius-pill);
}

.masthead__rule {
  margin-block: var(--space-lg) var(--space-sm);
  border: 0;
  border-top: var(--rule-hair) solid var(--color-band-rule);
}

.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-band-muted);
}

.masthead__meta a {
  color: var(--color-accent-bright);
  text-decoration-color: color-mix(in oklch, var(--color-accent-bright) 40%, transparent);
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.masthead__meta a:hover {
  text-decoration-color: currentColor;
}

/* ================================================================
   Catalogue header — count, provenance, the honest paragraph
   ================================================================ */

/* Bottom-heavy: pulls the opener into the menu's rhythm rather than
   letting it float. The masthead band already gives separation above. */
.opener {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.opener__line {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 55, "WONK" 1;
  font-weight: 600;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

/* Emphasis by accent colour, never italic — italic display is an AI tell. */
.opener__accent {
  color: var(--color-accent);
}

.opener__body {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--color-ink-soft);
}

.opener__body + .opener__body {
  margin-top: var(--space-sm);
}

.opener__facts {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-md);
}

.fact__key {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}

.fact__val {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.45;
}

.fact__val a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.fact__val--todo {
  color: var(--color-muted);
  background: var(--color-paper-3);
  padding: var(--space-3xs) var(--space-2xs);
  display: inline-block;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ================================================================
   Sticky category band — Catalogue's category label band
   ================================================================ */

.rail {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  border-block: var(--rule-hair) solid var(--color-rule);
  transition: border-color var(--dur-base) var(--ease-out);
}

.rail[data-stuck="true"] {
  border-bottom-color: var(--color-accent);
}

.rail__scroll {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-2xs);
  padding-inline: var(--page-pad);
  justify-content: center;
}

/* Centring only helps while every chip fits; once the track scrolls it
   would hide the leading chips, so fall back to flow-start. */
@media (max-width: 78rem) {
  .rail__scroll {
    justify-content: flex-start;
  }
}

.rail__scroll::-webkit-scrollbar {
  display: none;
}

.rail__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2xs);
  white-space: nowrap;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: var(--rule-thick) solid transparent;
  /* The underline carries the signal. `color` is deliberately NOT
     transitioned: a live prefers-color-scheme flip leaves an in-flight
     colour interpolation stranded at the old token's value. */
  transition: border-color var(--dur-short) var(--ease-out);
}

.rail__link:hover {
  color: var(--color-ink);
}

.rail__link:active {
  color: var(--color-accent);
  border-bottom-color: var(--color-rule);
}

.rail__link[aria-current="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ================================================================
   The menu — Catalogue blocks
   ================================================================ */

.menu {
  padding-block: var(--space-2xl) var(--space-xl);
}

.course {
  scroll-margin-top: calc(44px + var(--space-md));
  padding-block: var(--space-xl) 0;
}

.course + .course {
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-top: var(--space-2xl);
}

.course__title {
  font-size: var(--text-2xl);
}

.course__title span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-2xs);
}

.course__note {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.course__list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}

.dish {
  padding-block: var(--space-sm);
}

.dish + .dish {
  border-top: var(--rule-hair) dotted var(--color-rule);
}

.dish__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.dish__name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  flex: 0 1 auto;
  min-width: 0;
}

.dish__diet {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-left: var(--space-3xs);
  white-space: nowrap;
}

.dish__lead {
  flex: 1 1 var(--space-md);
  min-width: var(--space-md);
  border-bottom: var(--rule-hair) dotted var(--color-neutral);
  transform: translateY(-0.3em);
}

.dish__price {
  flex: 0 0 auto;
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.dish__fi {
  margin-top: var(--space-3xs);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.dish__en {
  margin-top: var(--space-3xs);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.dish__alt {
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ================================================================
   Allergen key
   ================================================================ */

/* Hairline all round — an asymmetric thick side-stripe is the SaaS-card tell. */
.key {
  margin-top: var(--space-2xl);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
}

.key__title {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}

.key__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.key__list b {
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

/* ================================================================
   Visit
   ================================================================ */

.visit {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.visit__title {
  font-size: var(--text-xl);
}

.visit__grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-lg);
}

.visit__key {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}

.visit__val {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink);
}

.visit__val a {
  color: var(--color-accent);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}

.hours {
  margin: 0;
  max-width: 20rem;
}

.hours__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.hours__row + .hours__row {
  border-top: var(--rule-hair) dotted var(--color-rule);
}

.hours dt {
  flex: 0 1 auto;
}

.hours dd {
  margin: 0 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours__row[data-today] {
  color: var(--color-accent);
  font-weight: 600;
}

.hours__flag {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================================================================
   Ft2 · Inline rule single line
   ================================================================ */

.colophon {
  padding-block: var(--space-lg);
}

.colophon__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-band-muted);
}

.colophon__mark {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 55, "WONK" 1;
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  color: var(--color-band-ink);
}

.colophon__sep {
  color: var(--color-band-dim);
}

.colophon__line a {
  color: var(--color-accent-bright);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 40rem) {
  .opener {
    padding-block: var(--space-2xl) var(--space-lg);
  }

  .opener__line {
    font-size: var(--text-display-s);
    max-width: none;
  }

  /* The name wraps inside its own flex item; the price stays anchored to
     the first baseline. Wrapping the row instead orphans the price. */
  .dish__name {
    overflow-wrap: break-word;
  }

  .dish__lead {
    flex-basis: var(--space-2xs);
    min-width: var(--space-2xs);
  }

  .course__title {
    font-size: var(--text-xl);
  }
}

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

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

@media print {
  .rail,
  .skip {
    display: none;
  }
}