/* ==========================================================================
   THE CART — stylesheet
   Always a light cream background. One switchable ink colour drives
   everything else: beige (default) or dark espresso — see [data-scheme].
   ========================================================================== */

/* -------------------- Fonts (self-hosted) -------------------- */
/* Archivo ExtraCondensed Black: a static instance (wght 900, wdth 62) cut
   from the Archivo variable font, to match the condensed THE CART wordmark.
   Declared as weight 400 so every heading rule (which asks for 400) gets it. */
@font-face {
  font-family: 'Archivo ExtraCondensed';
  src: url('../fonts/archivo-extracondensed-black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/open-sauce-one-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/open-sauce-one-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/open-sauce-one-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/open-sauce-one-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/open-sauce-one-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* -------------------------- Design tokens -------------------------- */
:root {
  --font-heading: 'Archivo ExtraCondensed', 'Arial Narrow', 'Impact', sans-serif;
  --font-body: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scheme 1 (default, "light"): beige background, brown type.
     Scheme 2 ([data-scheme='dark']): espresso background, beige type.
     Both share the caramel button colour. */
  --bg: #ede3cf;
  --bg-elevated: #f6efe2;
  --bg-elevated-2: #e3d5bb;

  --ink: #2b1d14;          /* headings, logo */
  --ink-contrast: #f6eedf;
  --accent: #7a4e2e;       /* small labels (eyebrows) */

  --text: var(--ink);
  --text-secondary: #6b4a32;   /* body text: brown */
  --text-tertiary: #6b4a32;
  --border: color-mix(in srgb, var(--ink) 16%, var(--bg) 84%);
  --border-strong: color-mix(in srgb, var(--ink) 32%, var(--bg) 68%);
  --overlay-scrim: rgba(21, 16, 12, 0.55);
  --btn-bg: #8a5a36;
  --btn-text: #f6eedf;
  --btn-outline-border: color-mix(in srgb, var(--ink) 38%, var(--bg) 62%);
  --focus-ring: var(--ink);
  --skeleton-bg: color-mix(in srgb, var(--ink) 10%, var(--bg) 90%);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: clamp(4rem, 7vw, 6rem);
  --space-8: clamp(4.5rem, 8vw, 8rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* Type scale (fluid) */
  --fs-hero: clamp(3.25rem, 6vw + 1.4rem, 6.5rem);
  --fs-h1: clamp(2.75rem, 3.6vw + 1.5rem, 4.4rem);
  --fs-h2: clamp(2.1rem, 2.6vw + 1.2rem, 3.2rem);
  --fs-h3: clamp(1.5rem, 1.2vw + 1.15rem, 2rem);
  --fs-lede: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --header-h: 84px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  color-scheme: light;
}

:root[data-scheme='dark'] {
  --bg: #15100c;
  --bg-elevated: #1f1813;
  --bg-elevated-2: #1f1813;
  --ink: #e9dcc3;
  --ink-contrast: #15100c;
  --accent: #c9965f;
  --text-secondary: #b8977a;
  --text-tertiary: #b8977a;
  --border: #3a2e25;
  --border-strong: #5a4636;
  --focus-ring: #c9965f;
  color-scheme: dark;
}

/* Logo / illustration swap by colour scheme */
.scheme-swap-light { display: block; }
.scheme-swap-dark { display: none; }
:root[data-scheme='dark'] .scheme-swap-light { display: none; }
:root[data-scheme='dark'] .scheme-swap-dark { display: block; }

/* Small labels above headings use the caramel accent in both schemes. */
.eyebrow, .now-serving__label, .menu-group__footnote { color: var(--accent); }
.menu-group__title { border-color: var(--btn-bg); }
.link-arrow { text-decoration-color: var(--btn-bg); }

/* -------------------------- Reset -------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The light/dark scheme toggle swaps --ink, which cascades into dozens of
   color-mix()-derived tokens. Without this, only elements with their own
   explicit transition (buttons, a couple of icons) cross-fade — everything
   else (headings, borders, links, footer) snaps instantly, so the swap felt
   half-animated. A blanket, color-only transition keeps the whole page
   swapping in sync; anything with its own more specific transition (e.g.
   .btn, which also transitions transform) keeps that instead. */
*, *::before, *::after {
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
.section-link { margin-top: var(--space-4); }

/* Safety net: let very long Danish words in headings break on narrow phones. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

/* Focus visibility */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--text); color: var(--bg); }

/* -------------------------- Layout helpers -------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-8);
}
.section--tight { padding-block: var(--space-6); }
.section--top-tight { padding-top: var(--space-6); }
.section--block { background: var(--bg-elevated-2); }
.section-header {
  max-width: 46rem;
  margin-bottom: var(--space-5);
}
.section-header--center { margin-inline: auto; text-align: center; }
/* Deliberately NOT the tiny-tracked-uppercase "chip above a heading" look —
   that's the single most common generic-AI tell across both design audits.
   Styled instead as a plain lede line sitting close to its heading, so it
   reads as one grouped unit rather than a separate label floating above it.
   .eyebrow--tag (a tag before a plain list, not a heading) keeps the old
   uppercase treatment below — that's a different role, not the flagged one. */
.eyebrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35em;
}
.lede {
  font-size: var(--fs-lede);
  color: var(--text-secondary);
  max-width: 42rem;
}
.visually-hidden {
  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: fixed;
  top: -100%;
  left: var(--space-2);
  z-index: 1000;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: var(--space-2);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* -------------------------- Buttons -------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}
.btn--primary:hover { opacity: 0.82; }
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--btn-outline-border);
}
.btn--outline:hover { border-color: var(--text); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* -------------------------- Header -------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 650;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* On the homepage, the header starts transparent and overlaid directly on
   the hero photo (like jumboaarhus.com's nav-on-video), then picks up a
   solid background once the page has scrolled past the hero. */
body.page-home .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.page-home .site-header .brand,
body.page-home .site-header .icon-btn,
body.page-home .site-header .lang-switch,
body.page-home .site-header .scheme-switch,
body.page-home .site-header .nav-toggle {
  color: #f4f3ef;
}
body.page-home .site-header .scheme-switch__opt:not([aria-pressed='true']),
body.page-home .site-header .lang-switch__link:not([aria-current='true']) { color: rgba(244, 243, 239, 0.75); }
body.page-home .site-header .lang-switch,
body.page-home .site-header .scheme-switch,
body.page-home .site-header .icon-btn,
body.page-home .site-header .nav-toggle { border-color: rgba(244, 243, 239, 0.4); }
body.page-home .site-header .lang-switch__link[aria-current='true'],
body.page-home .site-header .scheme-switch__opt[aria-pressed='true'] {
  background: #f4f3ef;
  color: #2b1d14;
}
body.page-home.is-scrolled .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
body.page-home.is-scrolled .site-header .brand,
body.page-home.is-scrolled .site-header .icon-btn,
body.page-home.is-scrolled .site-header .lang-switch,
body.page-home.is-scrolled .site-header .scheme-switch,
body.page-home.is-scrolled .site-header .nav-toggle {
  color: var(--text);
}
body.page-home.is-scrolled .site-header .scheme-switch__opt:not([aria-pressed='true']),
body.page-home.is-scrolled .site-header .lang-switch__link:not([aria-current='true']),
body.nav-open .site-header .scheme-switch__opt:not([aria-pressed='true']) { color: var(--text-tertiary); }
body.page-home.is-scrolled .site-header .lang-switch,
body.page-home.is-scrolled .site-header .scheme-switch,
body.page-home.is-scrolled .site-header .icon-btn,
body.page-home.is-scrolled .site-header .nav-toggle { border-color: var(--border); }
body.page-home.is-scrolled .site-header .lang-switch__link[aria-current='true'],
body.page-home.is-scrolled .site-header .scheme-switch__opt[aria-pressed='true'],
body.nav-open .site-header .scheme-switch__opt[aria-pressed='true'] {
  background: var(--btn-bg);
  color: var(--btn-text);
}
/* The drawer opens over the (possibly still transparent) hero header, so
   force the header back to its normal solid/ink look while it's open —
   otherwise the light hero-overlay text becomes illegible against the
   drawer's own cream background. */
body.nav-open .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
body.nav-open .site-header .brand,
body.nav-open .site-header .icon-btn,
body.nav-open .site-header .lang-switch,
body.nav-open .site-header .scheme-switch,
body.nav-open .site-header .nav-toggle {
  color: var(--text);
}
body.nav-open .site-header .lang-switch,
body.nav-open .site-header .scheme-switch,
body.nav-open .site-header .icon-btn,
body.nav-open .site-header .nav-toggle { border-color: var(--border); }
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: 1rem;
}
.brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand__overlay-logo { display: none; }
body.page-home:not(.is-scrolled):not(.nav-open) .brand__overlay-logo { display: block; }
body.page-home:not(.is-scrolled):not(.nav-open) .brand__scheme-logo { display: none; }
.brand img {
  height: clamp(32px, 4vw, 42px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.header-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.icon-btn svg { width: 19px; height: 19px; }

.scheme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  font-size: 0.8rem;
  font-weight: 600;
}
.scheme-switch__opt {
  padding: 0.4em 0.7em;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.scheme-switch__opt:hover { color: var(--text); }
@media (max-width: 380px) {
  .scheme-switch { font-size: 0.7rem; padding: 2px; }
  .scheme-switch__opt { padding: 0.45em 0.6em; }
  .nav-toggle { padding-inline: 0.9em; }
  .site-header__inner { gap: var(--space-2); }
}
.scheme-switch__opt[aria-pressed='true'] {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Below the desktop nav breakpoint, the mobile drawer already has its own
   language switch (see .mobile-nav__foot) — the one in the header bar would
   just crowd the logo and hamburger button on narrow phones. */
.header-actions .lang-switch { display: none; }
@media (min-width: 900px) {
  .header-actions .lang-switch { display: flex; }
}
.lang-switch__link {
  padding: 0.4em 0.7em;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  text-decoration: none;
}
.lang-switch__link:hover { color: var(--text); }
.lang-switch__link[aria-current='true'] {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.nav-toggle {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding-inline: 1.2em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.nav-toggle:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.nav-toggle__label--close { display: none; }
body.nav-open .nav-toggle__label--open { display: none; }
body.nav-open .nav-toggle__label--close { display: inline; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--bg);
  padding: var(--container-pad);
  /* Line the menu up with the header's MENU/LUK button on wide screens. */
  padding-inline: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
body.nav-open .mobile-nav {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
body.nav-open { overflow: hidden; }
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-nav__link {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
}
.mobile-nav__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -------------------------- Hero -------------------------- */
.hero {
  position: relative;
  min-height: 88svh;
  margin-top: calc(-1 * var(--header-h));
  color: #f4f3ef;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture {
  position: absolute;
  inset: 0;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Only needs to darken the very top, so the transparent nav stays legible —
   the rest of the photo is left alone (there is no text over it any more). */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,9,0.6) 0%, rgba(10,10,9,0.12) 18%, rgba(10,10,9,0) 40%, rgba(10,10,9,0.2) 100%);
}

/* -------------------------- Statement (headline block right after hero) -------------------------- */
.statement {
  background: var(--bg-elevated-2);
  padding-block: var(--space-7) var(--space-8);
}
.statement__title {
  font-size: var(--fs-hero);
  max-width: 20ch;
}
.statement__subtitle {
  margin-top: var(--space-3);
  font-size: var(--fs-lede);
  color: var(--text-secondary);
  max-width: 38ch;
}
.statement__actions {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.hero--sub {
  min-height: 46svh;
  align-items: center;
}
.hero--sub .hero__content { padding-block: var(--space-5); }

/* Page intro (no image hero, used on legal pages) */
.page-intro {
  padding-block: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* -------------------------- Media frames -------------------------- */
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg);
  border-radius: var(--radius-sm);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
/* The gallery is the site's one browse-and-look moment — nothing else there
   reacts to the cursor at all. Scoped to the gallery only, not every frame
   site-wide (a form thumbnail or a menu photo isn't something to "browse"). */
@media (hover: hover) and (pointer: fine) {
  .gallery__item img { transition: transform 0.3s var(--ease); }
  .gallery__item:hover img { transform: scale(1.03); }
}
.media-frame--16-9 { aspect-ratio: 16 / 9; }
.media-frame--4-3 { aspect-ratio: 4 / 3; }
.media-frame--1-1 { aspect-ratio: 1 / 1; }
.media-frame--3-4 { aspect-ratio: 3 / 4; }
.media-frame--16-9 { aspect-ratio: 16 / 9; }
.media-frame--sharp { border-radius: 0; }
.media-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
}
.media-frame__placeholder-text {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: var(--text-secondary);
}

/* -------------------------- Intro / value grid -------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.value-card__number {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.value-card__title { margin-bottom: var(--space-2); }
.value-card__text { color: var(--text-secondary); max-width: 32ch; }

@media (min-width: 700px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.eyebrow--tag {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
}
.event-types {
  font-size: var(--fs-lede);
  max-width: 56rem;
}

.coming-soon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.coming-soon-grid__title { margin-top: var(--space-3); margin-bottom: 0.4em; }
.coming-soon-grid__text { color: var(--text-secondary); }
@media (min-width: 700px) {
  .coming-soon-grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------- Cart features (full-bleed photo + name) -------------------------- */
.badge {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  vertical-align: middle;
}
.cart-feature {
  display: block;
  margin-top: var(--space-6);
}
.cart-feature:first-of-type { margin-top: var(--space-5); }
.cart-feature__media { position: relative; }
.cart-feature__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  background: linear-gradient(180deg, rgba(10,10,9,0.1) 0%, rgba(10,10,9,0.35) 100%);
}
.cart-feature__title {
  color: #f4f3ef;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}
.badge--on-photo { color: rgba(244, 243, 239, 0.85); }
.cart-feature__body {
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.cart-feature__text { color: var(--text-secondary); max-width: 46ch; }
.cart-feature .link-arrow { flex-shrink: 0; }

/* -------------------------- Split sections (branding / about) -------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.split__content { max-width: 34rem; }
/* Same text size as the other intro paragraphs on the page. */
.split__content .prose p { font-size: var(--fs-lede); }
.split--reverse .split__media { order: -1; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .split--reverse .split__media { order: 1; }
  .split--form { grid-template-columns: 1.6fr 1fr; align-items: start; }
  /* The form runs much taller than this column — without sticky positioning
     it sits alone at the top of a mostly-empty column beside a long form. */
  .contact-aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

.about__illustration {
  max-width: 340px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .about__illustration { max-width: 100%; }
}

/* -------------------------- Gallery -------------------------- */
.gallery { position: relative; }
.gallery__track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--container-pad);
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery__item {
  flex: 0 0 auto;
  width: min(78vw, 420px);
  scroll-snap-align: start;
}
.gallery__nav {
  display: none;
  gap: var(--space-1);
}
@media (min-width: 700px) {
  .gallery__nav { display: flex; }
}
.gallery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* -------------------------- Plain arrow link (no button chrome) -------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.25em;
}
.link-arrow:hover { text-decoration-color: var(--text); }

/* -------------------------- CTA band -------------------------- */
.cta-band {
  text-align: center;
  padding: var(--space-8) var(--space-3);
  background: var(--bg-elevated-2);
}
.cta-band__title { max-width: 24ch; margin-inline: auto; }
.cta-band .btn { margin-top: var(--space-5); }

/* -------------------------- Coming soon page -------------------------- */
.coming-soon-hero {
  text-align: center;
  padding-block: var(--space-8);
}
.coming-soon-hero .eyebrow { display: block; margin-top: var(--space-2); }
.coming-soon-hero .lede { margin-inline: auto; margin-top: var(--space-3); }
.coming-soon-hero .footer__social { justify-content: center; margin-top: var(--space-5); }

/* -------------------------- Footer -------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-6) var(--space-4);
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}
/* The wordmark PNG has a small built-in transparent margin (from the crop
   padding in generate_logo_assets.py) — offset it so the ink itself lines
   up flush-left with the tagline and social icons below. */
.footer__brand img { height: 34px; width: auto; margin: 0 0 var(--space-2) -7px; }
.footer__tagline { max-width: 28ch; }
.footer__heading {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.6em; }
.footer__col a:hover { color: var(--text); }
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.footer__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer__lang { margin-block: var(--space-2) var(--space-1); }

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr; }
}

/* -------------------------- Sticky mobile CTA -------------------------- */
.sticky-cta {
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 400;
  transform: translateY(0);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.sticky-cta.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta .btn {
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

/* -------------------------- Forms -------------------------- */
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 700px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form__group { display: flex; flex-direction: column; gap: 0.5em; }
.form__label {
  font-size: 0.9rem;
  font-weight: 600;
}
.form__label .req { color: var(--text-tertiary); font-weight: 400; }
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color 0.2s ease;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--text-secondary);
}
.form__textarea { resize: vertical; min-height: 8rem; }
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23a8a6a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
}
.form__hint { font-size: var(--fs-small); color: var(--text-tertiary); }
.form__error {
  font-size: var(--fs-small);
  color: var(--text);
  font-weight: 600;
}
.form__group[data-invalid='true'] .form__input,
.form__group[data-invalid='true'] .form__select,
.form__group[data-invalid='true'] .form__textarea {
  border-color: var(--text);
  border-width: 2px;
}
.form__checkbox-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.form__checkbox-fieldset legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding-inline: 0.3em;
}
.form__checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em;
  margin-top: 0.5em;
}
@media (min-width: 560px) {
  .form__checkbox-grid { grid-template-columns: 1fr 1fr; }
}
.form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.95rem;
}
.form__checkbox input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--text);
}
.form__consent {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  max-width: 40rem;
}
.form__consent a { color: var(--text-secondary); }
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__status {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.form__status--success { border-color: var(--text-secondary); }
.form__status--error { border-color: var(--text-secondary); }
.form__status h3 { margin-bottom: 0.3em; }

/* Simple date input affordance — background is always light, so the
   browser's default (dark) picker icon needs no inversion. */
input[type='date']::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* -------------------------- FAQ accordion -------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-weight: 600;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--text);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 14px; transition: transform 0.2s var(--ease); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
/* The icon already animates smoothly on open/close — the answer text used
   to just snap in/out under it, which read as unfinished. Animating height
   needs `auto` as a transition endpoint, which only interpolate-size makes
   possible; unsupporting browsers fall back to the old (instant) behaviour,
   never to something broken. */
.faq__item { interpolate-size: allow-keywords; }
.faq__answer {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.25s var(--ease), opacity 0.2s var(--ease);
}
.faq__item[open] .faq__answer { height: auto; opacity: 1; }
.faq__answer p { padding-bottom: var(--space-3); color: var(--text-secondary); max-width: 60ch; }

/* -------------------------- Menu page -------------------------- */
.menu-section { padding-block: var(--space-5); border-top: 1px solid var(--border); }
.menu-section:first-of-type { border-top: none; }
.menu-list { display: grid; gap: var(--space-2); }
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: 0.6em;
}
.menu-item__name { font-weight: 600; }
.menu-item__note { color: var(--text-tertiary); font-size: var(--fs-small); }
.menu-note-block {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  max-width: 46ch;
}
.steps-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .steps-list { grid-template-columns: repeat(4, 1fr); }
}
.step__index {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text-tertiary);
}
.step__text { color: var(--text-secondary); max-width: 32ch; }

/* -------------------------- Menu toggle -------------------------- */
.menu-toggle { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.menu-toggle__button {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.menu-toggle__button::-webkit-details-marker { display: none; }
.menu-toggle__button::marker { content: ''; }
.menu-toggle__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  position: relative;
}
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: '';
  position: absolute;
  background: var(--text);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.menu-toggle__icon::before { width: 20px; height: 2px; }
.menu-toggle__icon::after { width: 2px; height: 20px; transition: transform 0.25s var(--ease); }
.menu-toggle[open] .menu-toggle__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
/* Same fix as .faq__answer above — the +/- icon animated, the revealed
   menu list didn't. The last .menu-section's own padding-block already
   gives bottom breathing room, so no padding needed here. */
.menu-toggle { interpolate-size: allow-keywords; }
.menu-toggle__content {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s var(--ease), opacity 0.25s var(--ease);
}
.menu-toggle[open] .menu-toggle__content { height: auto; opacity: 1; }

/* -------------------------- Legal pages -------------------------- */
.prose { max-width: 62ch; }
/* Was 62rem (a fixed width) — at this font-size that rendered ~95-99
   characters per line, well past the ~75ch readability ceiling. ch keeps
   it readable regardless of font-size. */
.prose--wide { max-width: 72ch; font-size: var(--fs-lede); }
.prose--wide p { margin-bottom: var(--space-3); }
.prose h2 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--fs-h3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-secondary); margin-bottom: var(--space-2); }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ul li { margin-bottom: 0.5em; }
.prose a { color: var(--text); text-decoration: underline; }
.prose strong { color: var(--text); }

/* -------------------------- 404 -------------------------- */
.error-page {
  min-height: 60svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: var(--space-8);
}
.error-page__code {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
}

/* -------------------------- Placeholder callouts (dev-facing) -------------------------- */
.placeholder-note {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.3em 0.7em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  background: var(--bg-elevated-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

/* -------------------------- Scroll reveal (JS-driven, motion-safe only) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .will-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .will-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------- Print -------------------------- */
@media print {
  .site-header, .site-footer, .sticky-cta, .nav-toggle { display: none; }
}

/* -------------------------- Menu page (/menu) -------------------------- */
/* Styled after the printed CART menu card: a heavy heading with a full-width
   rule under it, then a plain list. */
.now-serving {
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-7);
}
.now-serving__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.now-serving__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
}
.now-serving__title { font-size: var(--fs-h2); margin-bottom: var(--space-1); }
.now-serving__meta { font-weight: 600; }
.now-serving__notes { color: var(--text-secondary); font-style: italic; }
.now-serving__roast { display: grid; justify-items: start; gap: 0.4em; }
.now-serving__roast-label { font-size: var(--fs-small); color: var(--text-secondary); }
.roast-dots { display: inline-flex; gap: 6px; }
.roast-dots span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.roast-dots span.is-on { background: var(--ink); }

.menu-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-7);
}
@media (min-width: 900px) {
  .menu-board { grid-template-columns: 1fr 1fr; }
}
.menu-group__title {
  font-size: var(--fs-h2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-2);
}
.menu-group__item {
  display: grid;
  gap: 0.1em;
  padding-block: 0.75em;
  border-bottom: 1px solid var(--border);
}
.menu-group__name { font-size: 1.125rem; font-weight: 600; }
.menu-group__note { color: var(--text-secondary); }
.menu-group__footnote {
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--text-secondary);
}
.menu-allergens {
  margin-top: var(--space-7);
  max-width: 60ch;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

/* Anchor targets sit below the fixed header instead of under it. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }

/* Front page hero: keep "SPECIALTY-COFFEE CATERING" together on the top line
   on wider screens; phones wrap naturally. */
@media (min-width: 1024px) {
  .statement__title { max-width: none; }
  .statement__line { display: block; white-space: nowrap; }
}

/* E-mail addresses read wrong in capitals, so this button keeps normal case. */
.btn--email { text-transform: none; letter-spacing: 0; }

/* Coming soon: the two cart wordmarks in matching tiles */
.coming-tile {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
}
.coming-tile img {
  height: clamp(110px, 14vw, 210px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Phones: a shorter hero so the whole cart fits the portrait crop. */
@media (max-width: 700px) {
  .hero { min-height: 64svh; }
}

/* -------------------------- Live hero (animated cart) --------------------------
   The photo is split into two layers: a clean studio backdrop ("plate") and a
   cut-out of the cart. They drift at slightly different rates, so the cart
   reads as a real object in front of the wall. Steam is drawn on a small
   canvas behind the machine. Until both layers have loaded (or without JS)
   the original photo shows unchanged. */
.hero--live .hero__photo { transition: opacity 0.6s var(--ease); }
.hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero--live.is-ready .hero__stage { opacity: 1; }

.hero__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 48%, #2c2219 0%, #1d1611 50%, rgba(21, 16, 12, 0) 85%),
    linear-gradient(180deg, #120d0a 0%, #18120e 62%, #1e1712 78%, #15100c 100%);
  transition: opacity 0.6s var(--ease);
}

.hero__plate,
.hero__cart {
  position: absolute;
  inset: 0;
  transform-origin: var(--hero-origin, 50% 85%);
  transition: opacity 0.6s var(--ease);
}
.hero__plate img { translate: 0 var(--hero-shift-plate, 0px); }
.hero__cart img,
.hero__cart .hero__steam { translate: 0 var(--hero-shift-cart, 0px); }

.hero__shadow {
  position: absolute;
  left: 50%;
  top: 85%;
  width: 30%;
  height: 3%;
  translate: -50% calc(-50% + var(--hero-shift-cart, 0px));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 29, 20, 0.34), rgba(43, 29, 20, 0.12) 60%, rgba(43, 29, 20, 0));
  filter: blur(4px);
}

.hero__steam {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 12%, #000 55%, transparent 100%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 12%, #000 55%, transparent 100%);
}
.hero--live.is-steaming .hero__steam { opacity: 1; }

@keyframes hero-plate-drift {
  from { transform: scale(1) translate3d(-0.35%, 0, 0); }
  to   { transform: scale(1.03) translate3d(0.35%, 0, 0); }
}
@keyframes hero-cart-drift {
  from { transform: scale(1) translate3d(-0.8%, 0, 0); }
  to   { transform: scale(1.055) translate3d(0.8%, 0, 0); }
}
.hero--live.is-ready .hero__plate { animation: hero-plate-drift 22s ease-in-out infinite alternate; }
.hero--live.is-ready .hero__cart  { animation: hero-cart-drift 22s ease-in-out infinite alternate; }
.hero--live.is-paused .hero__plate,
.hero--live.is-paused .hero__cart { animation-play-state: paused; }

/* The shadow under the cart is part of the photo now, so the drawn one is off. */
.hero--live .hero__shadow { display: none; }

/* Light scheme shows the light studio plate; dark scheme swaps in the dark
   plate made from the same photo (same floor line and shadows). The cart
   keeps its real colours. */
.hero__plate--dark { opacity: 0; }
:root[data-scheme='dark'] .hero--live .hero__photo { opacity: 0; }
:root[data-scheme='dark'] .hero__plate { opacity: 0; }
:root[data-scheme='dark'] .hero__plate--dark { opacity: 1; }
:root[data-scheme='dark'] .hero--live { background: #1a130f; }

@media (prefers-reduced-motion: reduce) {
  .hero--live.is-ready .hero__plate,
  .hero--live.is-ready .hero__cart { animation: none; }
  .hero__steam { display: none; }
}