/* ==========================================================================
   Cinder House — shared site styles
   Mobile-first. Motion is layered on by site.js only when the visitor
   hasn't asked for reduced motion; without JS every element is visible.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --charcoal: #141110;
  --ash: #2a2522;
  --ember: #e2622b;
  --bone: #ece4d6;

  --ember-rgb: 226, 98, 43;
  --bone-rgb: 236, 228, 214;
  --charcoal-rgb: 20, 17, 16;

  --smoke: rgba(var(--bone-rgb), 0.62);   /* secondary text */
  --line: rgba(var(--bone-rgb), 0.14);    /* hairlines */

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 88rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 4.5rem;
}

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

html {
  background: var(--charcoal);
  color: var(--bone);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--charcoal);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ember); color: var(--charcoal); }

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

.visually-hidden {
  position: absolute !important; 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; left: 1rem; top: -4rem; z-index: 200;
  padding: 0.75rem 1rem; background: var(--bone); color: var(--charcoal);
  font-weight: 600; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Grain: a fixed film layer over everything ---------- */
.grain {
  position: fixed; inset: -50%;
  z-index: 90; pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.motion .grain { animation: grain 0.9s steps(6) infinite; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-2%, 6%); }
  80%  { transform: translate(5%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(5rem, 14vw, 11rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1.5rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--smoke);
}
.eyebrow::before {
  content: ""; width: 0.42rem; height: 0.42rem; flex: none;
  background: var(--ember); transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(var(--ember-rgb), 0.8);
}

.display {
  font-family: var(--display); font-weight: 400;
  line-height: 0.95; letter-spacing: -0.01em;
  margin: 0;
}
.display em { font-style: italic; color: var(--ember); }
.h2 { font-size: clamp(3.1rem, 7.4vw, 6rem); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--smoke); max-width: 36rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ember); --fg: var(--charcoal);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 1.6rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--fg); background: var(--bg);
  border: 1px solid var(--bg); border-radius: 999px;
  overflow: hidden; isolation: isolate;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bone); border-radius: inherit;
  transform: translateY(101%); transition: transform 0.55s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { border-color: var(--bone); }
.btn--ghost { --bg: transparent; --fg: var(--bone); border-color: rgba(var(--bone-rgb), 0.35); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--charcoal); }
.btn .arrow { transition: transform 0.45s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--bone);
  padding-bottom: 0.35rem;
  background: linear-gradient(var(--ember), var(--ember)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease-out), color 0.3s;
}
.text-link:hover { color: var(--ember); background-size: 40% 1px; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 0.5s, backdrop-filter 0.5s, transform 0.6s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(var(--charcoal-rgb), 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--bone); }
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.brand-word { width: 9.5rem; height: auto; }
#mark .flame { transform-origin: 24px 38px; transform-box: view-box; }
.motion #mark .flame { animation: flicker 3.2s ease-in-out infinite; }

.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: 2.2rem; }
.nav-links a {
  position: relative; text-decoration: none;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--bone-rgb), 0.78); transition: color 0.3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 1px;
  background: var(--ember); transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.72rem; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.menu-toggle-lines { position: relative; width: 1.6rem; height: 0.6rem; }
.menu-toggle-lines::before, .menu-toggle-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}
.menu-toggle-lines::before { top: 0; }
.menu-toggle-lines::after { top: calc(100% - 1.5px); }
.menu-open .menu-toggle-lines::before { top: calc(50% - 0.75px); transform: rotate(20deg); }
.menu-open .menu-toggle-lines::after { top: calc(50% - 0.75px); transform: rotate(-20deg); }

/* Mobile menu sheet */
.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(var(--ember-rgb), 0.28), transparent 60%),
    var(--charcoal);
  visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-io), opacity 0.4s, visibility 0s 0.8s;
}
.menu-open .mobile-menu {
  visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s var(--ease-io), opacity 0.2s, visibility 0s;
}
.mobile-menu ul { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.mobile-menu li { overflow: hidden; border-bottom: 1px solid var(--line); }
.mobile-menu li a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.9rem 0; text-decoration: none;
  font-family: var(--display); font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1;
  transform: translateY(100%); transition: transform 0.9s var(--ease-out);
}
.mobile-menu li a span { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--smoke); }
.menu-open .mobile-menu li a { transform: none; }
.menu-open .mobile-menu li:nth-child(2) a { transition-delay: 0.05s; }
.menu-open .mobile-menu li:nth-child(3) a { transition-delay: 0.1s; }
.menu-open .mobile-menu li:nth-child(4) a { transition-delay: 0.15s; }
.menu-open .mobile-menu li:nth-child(5) a { transition-delay: 0.2s; }
.mobile-menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--smoke); }
.mobile-menu-foot a { color: var(--bone); }

@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none; }
  .brand-word { width: 11rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 2rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 70%;
  transform-origin: 68% 75%;
}
.motion .hero-media img { animation: hero-breathe 22s ease-in-out infinite alternate; }
@keyframes hero-breathe { from { transform: scale(1.08); } to { transform: scale(1.16); } }

/* The fire's light, spilling up from the bottom of the frame. */
.hero-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 88%, rgba(var(--ember-rgb), 0.38), transparent 70%);
  mix-blend-mode: screen;
}
.motion .hero-glow { animation: flicker-glow 4.2s infinite; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--charcoal-rgb), 0.75) 0%, transparent 22%, rgba(var(--charcoal-rgb), 0.35) 45%, rgba(var(--charcoal-rgb), 0.94) 88%);
}
@media (min-width: 48rem) {
  .hero-shade { background: linear-gradient(180deg, rgba(var(--charcoal-rgb), 0.75) 0%, transparent 28%, transparent 48%, rgba(var(--charcoal-rgb), 0.92) 100%); }
}
.embers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 2s; }
.embers.is-on { opacity: 1; }

.hero-inner { position: relative; }
.hero .eyebrow { color: rgba(var(--bone-rgb), 0.8); }
.hero-title {
  font-size: clamp(3.4rem, 10.2vw, 9.5rem);
  line-height: 0.9;
}
/* Headline lines ride up out of a mask. */
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: inline-block; }
.hero-foot {
  display: grid; gap: 1.75rem; max-width: 34rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.hero-copy { max-width: 30rem; margin: 0; color: rgba(var(--bone-rgb), 0.82); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--smoke);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.6rem; }
.live-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 0 0 rgba(var(--ember-rgb), 0.6);
}
.motion .live-dot { animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ember-rgb), 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(var(--ember-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ember-rgb), 0); }
}
.scroll-cue { display: none; }

@media (min-width: 60rem) {
  .scroll-cue { display: inline-flex; }
  .scroll-cue i {
    display: block; width: 1px; height: 2.2rem; background: rgba(var(--bone-rgb), 0.25);
    position: relative; overflow: hidden;
  }
  .scroll-cue i::after {
    content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
    background: var(--ember);
  }
  .motion .scroll-cue i::after { animation: drip 2.2s var(--ease-io) infinite; }
}
@keyframes drip { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* Flame flicker — irregular on purpose, so it never reads as a loop. */
@keyframes flicker {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  12% { transform: scale(0.97, 1.04); }
  23% { transform: scale(1.02, 0.97); opacity: 0.92; }
  37% { transform: scale(0.98, 1.05); }
  51% { transform: scale(1.01, 0.98); opacity: 1; }
  64% { transform: scale(0.97, 1.03); opacity: 0.94; }
  78% { transform: scale(1.02, 0.99); }
}
@keyframes flicker-glow {
  0%, 100% { opacity: 1; }
  9% { opacity: 0.82; }
  17% { opacity: 0.95; }
  31% { opacity: 0.74; }
  44% { opacity: 1; }
  58% { opacity: 0.86; }
  71% { opacity: 0.97; }
  86% { opacity: 0.8; }
}

/* ==========================================================================
   Manifesto — words catch light as you read
   ========================================================================== */
.manifesto { display: grid; gap: 3rem; }
.manifesto-statement {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem); line-height: 1.04;
  margin: 0; max-width: 20ch; text-wrap: pretty;
}
.manifesto-statement .w { transition: color 0.3s linear, text-shadow 0.3s linear; }
.scrub .manifesto-statement .w { color: rgba(var(--bone-rgb), 0.4); }
.scrub .manifesto-statement .w.is-lit { color: var(--bone); }
.scrub .manifesto-statement em .w.is-lit { color: var(--ember); text-shadow: 0 0 28px rgba(var(--ember-rgb), 0.45); }
.manifesto-statement em { font-style: italic; color: var(--ember); }
.manifesto-aside { display: grid; gap: 1.5rem; max-width: 30rem; color: var(--smoke); }
.manifesto-aside p { margin: 0; }
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin: 1rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line);
}
.facts div { display: grid; gap: 0.35rem; }
.facts dt { order: 2; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); }
.facts dd { order: 1; margin: 0; font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; color: var(--bone); }

@media (min-width: 60rem) {
  .manifesto { grid-template-columns: 1.6fr 1fr; align-items: end; gap: 5rem; }
}

/* ==========================================================================
   Signature — the oven door opens (pinned on capable devices)
   ========================================================================== */
.signature { position: relative; }
.signature-stage {
  position: relative;
  display: grid; gap: 2.5rem;
  padding-block: 5rem;
}
.oven {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: 50vw 50vw 0 0;
  background: var(--ash);
}
.oven img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.oven::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 40% at 50% 20%, rgba(var(--ember-rgb), 0.35), transparent 70%);
  mix-blend-mode: screen;
}
.motion .oven::after { animation: flicker-glow 3.6s infinite; }
.signature-copy { display: grid; gap: 1.5rem; }
.signature-title { font-size: clamp(3rem, 11vw, 7.5rem); }
.signature-price {
  display: inline-flex; align-items: baseline; gap: 0.75rem;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke);
}
.signature-price strong { font-family: var(--display); font-size: 2rem; font-weight: 400; letter-spacing: 0; color: var(--ember); }
.signature-desc { margin: 0; max-width: 34rem; color: rgba(var(--bone-rgb), 0.82); }
.signature-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.signature-steps li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--smoke); font-size: 0.95rem;
}
.signature-steps b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--bone); }

/* Pinned version. site.js drives every value here from scroll position
   with eased curves, and only ever writes clip-path, transform and
   opacity, so no frame of the reveal triggers layout. */
.pin .signature { height: 300vh; }
.pin .signature-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: 0; display: block; overflow: hidden;
}
.pin .oven {
  position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 0;
  clip-path: inset(34% 38% 16% 38% round 12vw 12vw 0 0);
  will-change: clip-path;
}
.pin .oven img { transform: scale(1.35); will-change: transform; }
.pin .oven-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--charcoal-rgb), 0.2), rgba(var(--charcoal-rgb), 0.88) 78%);
  opacity: 0;
}
.pin .signature-intro {
  position: absolute; inset: 0 0 auto 0; display: grid; justify-items: center; text-align: center;
  padding-top: calc(var(--nav-h) + 5svh);
  padding-inline: var(--gutter); pointer-events: none;
  will-change: opacity, transform;
}
.pin .signature-intro .display { font-size: clamp(2.4rem, 7vw, 5rem); }
.pin .signature-copy {
  position: absolute; inset: auto 0 0 0;
  padding: 0 var(--gutter) clamp(2rem, 6svh, 4rem);
  max-width: var(--max); margin-inline: auto;
  opacity: 0; transform: translateY(6svh);
  will-change: opacity, transform;
}
.signature-intro { display: none; }
.pin .signature-intro { display: grid; }
.signature-kicker { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke); margin: 0 0 1rem; }

@media (min-width: 60rem) {
  html:not(.pin) .signature-stage { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
  .pin .signature-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem 5rem; align-items: end; left: 0; right: 0; }
  .pin .signature-copy .signature-steps { grid-row: span 3; }
}
/* On short phones in the pinned layout, keep the copy compact enough to fit. */
@media (max-width: 59.99rem) {
  .pin .signature-steps { display: none; }
  .pin .signature-title { font-size: clamp(2.6rem, 12vw, 4rem); }
}

/* ==========================================================================
   Menu preview — hover a dish to see it
   ========================================================================== */
.menu-head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 60rem) { .menu-head { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 5rem; } }

.dishes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dish { position: relative; border-bottom: 1px solid var(--line); }
.dish-link {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.25rem 1.25rem; align-items: center;
  padding: 1.25rem 0; text-decoration: none; color: inherit;
}
.dish-thumb { grid-row: span 2; width: 4.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 0 0; }
.dish-name { grid-column: 2; grid-row: 1; font-family: var(--display); font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1; transition: color 0.4s, transform 0.6s var(--ease-out); }
.dish-price { grid-column: 3; grid-row: 1; font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--smoke); align-self: start; }
.dish-desc { grid-column: 2 / -1; grid-row: 2; margin: 0; font-size: 0.92rem; color: var(--smoke); }
.dish-tag { display: none; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }

@media (min-width: 60rem) {
  .dish-link { grid-template-columns: 10rem 1fr 22rem 5rem; gap: 2rem; padding: 1.9rem 0; }
  .dish-thumb { display: none; }
  .dish-tag { display: block; }
  .dish-name, .dish-desc, .dish-price { grid-column: auto; grid-row: auto; }
  .dish-price { align-self: center; text-align: right; }
  .dish-link:hover .dish-name, .dish-link:focus-visible .dish-name { color: var(--ember); transform: translateX(0.75rem); }
  .dishes:hover .dish-link:not(:hover) { opacity: 0.45; }
  .dish-link { transition: opacity 0.4s; }
}

/* Floating preview that trails the cursor (fine pointers only). */
.dish-float {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 18rem; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 9rem 9rem 0 0;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.6);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  display: none;
}
.dish-float.is-on { opacity: 1; }
.dish-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.dish-float img.is-active { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 60rem) { .dish-float { display: block; } }

.menu-foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; color: var(--smoke); font-size: 0.9rem; }

/* ==========================================================================
   Chef
   ========================================================================== */
.chef { background: linear-gradient(180deg, var(--charcoal), var(--ash) 45%, var(--charcoal)); }
.chef-grid { display: grid; gap: 3.5rem; }
.chef-quote {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.02; text-wrap: balance;
}
.chef-quote p { margin: 0; }
.chef-quote p::before { content: "\201C"; color: var(--ember); }
.chef-quote p::after { content: "\201D"; color: var(--ember); }
.chef-quote footer { margin-top: 1.75rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.chef-body { display: grid; gap: 1.25rem; color: rgba(var(--bone-rgb), 0.8); }
.chef-body p { margin: 0; }
.chef-body .h3 { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; color: var(--bone); margin: 0 0 0.5rem; }
.lineage { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0; padding: 0; }
.lineage li { padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; color: var(--bone); }
.chef-aside {
  margin-top: 0.5rem; padding: 1.5rem; border-left: 2px solid var(--ember);
  background: rgba(var(--charcoal-rgb), 0.5);
  font-family: var(--display); font-size: 1.45rem; line-height: 1.25; color: var(--bone);
}
.chef-aside span { display: block; margin-top: 0.75rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--smoke); }
.chef-figure { position: relative; margin: 0; overflow: hidden; border-radius: 50vw 50vw 0 0; aspect-ratio: 4 / 5; max-width: 30rem; }
.chef-figure img { width: 100%; height: 115%; object-fit: cover; }
.chef-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); background: linear-gradient(transparent, rgba(var(--charcoal-rgb), 0.85)); }

@media (min-width: 60rem) {
  .chef-grid { grid-template-columns: 1fr 1.1fr; gap: 6rem; align-items: start; }
  .chef-quote { max-width: 26ch; }
}

/* ==========================================================================
   The room & bar — parallax collage
   ========================================================================== */
.room-head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.collage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.collage figure { position: relative; margin: 0; overflow: hidden; background: var(--ash); }
.collage img { width: 100%; height: 118%; object-fit: cover; }
.c-a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.c-b { grid-column: 1 / 4; aspect-ratio: 3 / 4; }
.c-c { grid-column: 4 / -1; aspect-ratio: 3 / 4; margin-top: 3rem; }
.c-d { grid-column: 2 / 6; aspect-ratio: 4 / 5; border-radius: 50vw 50vw 0 0; }
.collage figcaption {
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--bone-rgb), 0.85);
}
.room-notes { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
.note { display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.note h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.note p { margin: 0; color: var(--smoke); }

@media (min-width: 60rem) {
  .room-head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 5rem; }
  .collage { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: start; }
  .c-a { grid-column: 1 / 8; aspect-ratio: 4 / 3; }
  .c-b { grid-column: 9 / 13; aspect-ratio: 3 / 4; margin-top: 10rem; }
  .c-c { grid-column: 2 / 6; aspect-ratio: 3 / 4; margin-top: 4rem; }
  .c-d { grid-column: 7 / 11; aspect-ratio: 4 / 5; margin-top: 8rem; }
  .room-notes { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ==========================================================================
   Visit / reserve
   ========================================================================== */
.visit { overflow: hidden; overflow: clip; }
.visit::before {
  content: ""; position: absolute; left: 50%; bottom: -30vw; width: 120vw; height: 60vw;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--ember-rgb), 0.22), transparent);
}
.motion .visit::before { animation: flicker-glow 5s infinite; }
.visit-grid { position: relative; display: grid; gap: 3.5rem; }
.visit-title { font-size: clamp(3.2rem, 12vw, 9rem); line-height: 0.9; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.visit-info { display: grid; gap: 2.25rem; align-content: start; }
.visit-info h3 { margin: 0 0 0.75rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke); }
.visit-info address { font-style: normal; font-family: var(--display); font-size: 1.8rem; line-height: 1.15; }
.visit-info p { margin: 0.5rem 0 0; color: var(--smoke); }
.hours { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.hours th, .hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: var(--bone); }
.hours th { color: var(--smoke); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ember); }
.hours .closed td { color: var(--smoke); }

@media (min-width: 60rem) {
  .visit-grid { grid-template-columns: 1.3fr 1fr; gap: 6rem; align-items: end; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; padding: clamp(4rem, 8vw, 6rem) 0 2rem; border-top: 1px solid var(--line); }
.footer-word { color: var(--bone); width: 100%; margin-bottom: clamp(3rem, 6vw, 5rem); }
.footer-word svg { width: 100%; height: auto; display: block; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; }
.footer-grid h2 { margin: 0 0 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-grid a { text-decoration: none; color: var(--bone); transition: color 0.3s; }
.footer-grid a:hover { color: var(--ember); }
.footer-grid p { margin: 0; color: rgba(var(--bone-rgb), 0.8); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: 0.78rem; color: rgba(var(--bone-rgb), 0.72);
}
.footer-base a { color: rgba(var(--bone-rgb), 0.72); text-decoration: none; }
.footer-base a:hover { color: var(--bone); }

@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ==========================================================================
   Page transition curtain
   ========================================================================== */
.curtain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: var(--charcoal);
  display: grid; place-items: center;
  transform: translateY(100%);
}
.curtain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ember); box-shadow: 0 0 24px 4px rgba(var(--ember-rgb), 0.7);
}
.curtain svg { width: 3.5rem; opacity: 0; transition: opacity 0.3s 0.2s; }
.is-leaving .curtain { pointer-events: auto; transform: translateY(0); transition: transform 0.7s var(--ease-io); }
.is-leaving .curtain svg { opacity: 1; }
.is-arriving .curtain { transform: translateY(0); }
.is-arriving.has-arrived .curtain { transform: translateY(-100%); transition: transform 0.9s var(--ease-io); }
.is-arriving .curtain::before { top: auto; bottom: 0; }

/* ==========================================================================
   Reveal system (only armed when .motion is on <html>)
   ========================================================================== */
.motion [data-reveal] {
  opacity: 0; transform: translateY(2.25rem);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="fade"] { transform: none; }

.motion [data-lines] .line > span { transform: translateY(105%); transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.09s + var(--d, 0s)); }
.motion [data-lines].is-in .line > span { transform: none; }

/* Photos: a charcoal shutter lifts off them. The figure itself stays
   unclipped so IntersectionObserver can see it. */
.motion [data-mask]::after {
  content: ""; position: absolute; inset: -1px; z-index: 2;
  background: var(--charcoal);
  transform-origin: 50% 0;
  transition: transform 1.4s var(--ease-io);
}
.motion [data-mask].is-in::after { transform: scaleY(0); }
.motion [data-mask] img { scale: 1.12; transition: scale 1.8s var(--ease-out); }
.motion [data-mask].is-in img { scale: 1; }

/* Page intro — runs once on load (home hero and every page title) */
.motion [data-hero] { opacity: 0; transform: translateY(1.5rem); }
.motion :is(.hero-title, .page-title) .line > span { transform: translateY(105%); }
.motion.is-loaded [data-hero] { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: var(--d, 0.6s); }
.motion.is-loaded :is(.hero-title, .page-title) .line > span { transform: none; transition: transform 1.5s var(--ease-out); transition-delay: calc(0.15s + var(--i, 0) * 0.12s); }

/* ==========================================================================
   Inner pages — shared pieces
   ========================================================================== */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72vh; min-height: 72svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 3rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero--tall { min-height: 88vh; min-height: 88svh; }
.page-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.page-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--charcoal-rgb), 0.72) 0%, rgba(var(--charcoal-rgb), 0.35) 45%, transparent 75%),
    linear-gradient(180deg, rgba(var(--charcoal-rgb), 0.8) 0%, rgba(var(--charcoal-rgb), 0.25) 30%, rgba(var(--charcoal-rgb), 0.5) 60%, var(--charcoal) 100%);
}
.page-hero-inner { position: relative; }
.page-title { font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: 0.9; }
.page-lede { max-width: 36rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(var(--bone-rgb), 0.84); }

.split { display: grid; gap: 2.5rem; }
.split .h2 { margin-bottom: 0.5rem; }
.prose { display: grid; gap: 1.25rem; max-width: 38rem; color: rgba(var(--bone-rgb), 0.82); font-size: 1.05rem; }
.prose p { margin: 0; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1.1fr; gap: 6rem; align-items: start; }
  .split--reverse { grid-template-columns: 1fr 1fr; align-items: center; }
}

.page-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); color: var(--smoke); }
.page-cta p { margin: 0; max-width: 34rem; }
.page-cta--big { position: relative; display: grid; justify-items: start; gap: 0; border-top: 0; padding-top: 0; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Figures that share the arch from the logo */
.arch-figure { position: relative; margin: 0; overflow: hidden; border-radius: 50vw 50vw 0 0; aspect-ratio: 4 / 5; max-width: 34rem; width: 100%; }
.arch-figure img { width: 100%; height: 112%; object-fit: cover; }

/* ---------- Sub navigation (menu sections) ---------- */
.subnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--charcoal-rgb), 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
  transition: top 0.6s var(--ease-out);
}
.site-header:not(.is-hidden) ~ main .subnav { top: var(--nav-h); }
.subnav-track {
  display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none;
  max-width: var(--max); margin-inline: auto; padding: 0.6rem var(--gutter);
}
.subnav-track::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: 0.55rem 0.95rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: rgba(var(--bone-rgb), 0.7);
  transition: background-color 0.3s, color 0.3s;
}
.subnav a:hover { color: var(--bone); }
.subnav a.is-active { background: var(--ember); color: var(--charcoal); }

/* ---------- Menu page ---------- */
.menu-page { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); scroll-margin-top: 8rem; }
.menu-legend {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0 0 clamp(3rem, 7vw, 5rem);
  font-size: 0.85rem; color: var(--smoke);
}
.menu-legend b { color: var(--ember); font-weight: 600; letter-spacing: 0.06em; margin-right: 0.3rem; }
.menu-legend span:last-child { flex-basis: 100%; max-width: 40rem; }

.menu-section {
  display: grid; gap: 1.75rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 4rem);
}
.menu-section-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.menu-section-head p { margin: 0.9rem 0 0; max-width: 26rem; color: var(--smoke); }
.menu-figure { position: relative; margin: 1.75rem 0 0; overflow: hidden; border-radius: 40vw 40vw 0 0; aspect-ratio: 4 / 5; max-width: 22rem; background: var(--ash); }
.menu-figure img { width: 100%; height: 100%; object-fit: cover; }
.menu-section:not(.menu-section--feature) .menu-figure { display: none; }

.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mi { display: grid; gap: 0.3rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.mi:last-child { border-bottom: 0; }
.mi-head { display: flex; align-items: baseline; gap: 1rem; }
.mi-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; }
.mi-head::after { content: ""; flex: 1; order: 1; border-bottom: 1px dotted rgba(var(--bone-rgb), 0.25); transform: translateY(-0.35em); min-width: 1.5rem; }
.mi-price { order: 2; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.mi p { margin: 0; max-width: 36rem; color: var(--smoke); font-size: 0.97rem; }
.mi-tags { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; color: var(--ember); }
.mi--signature { position: relative; padding-inline: 1.25rem; margin-inline: -1.25rem; background: linear-gradient(90deg, rgba(var(--ember-rgb), 0.12), transparent 80%); border-left: 2px solid var(--ember); }
.mi-mark { color: var(--ember); font-size: 0.9em; }

@media (min-width: 60rem) {
  .menu-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 5rem; align-items: start; }
  .menu-section-head { position: sticky; top: calc(var(--nav-h) + 5rem); }
  .menu-list { column-gap: 3rem; }
}

.wine-lists { display: grid; gap: 2rem; }
@media (min-width: 75rem) { .wine-lists { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.wine { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; min-width: 20rem; }
.wine caption { text-align: left; font-family: var(--display); font-size: 1.9rem; padding-bottom: 0.75rem; }
.wine thead th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); text-align: right; padding: 0 0 0.6rem 1rem; border-bottom: 1px solid var(--line); }
.wine thead th:first-child { text-align: left; padding-left: 0; }
.wine tbody th { text-align: left; font-weight: 500; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.wine tbody th span { display: block; font-weight: 400; font-size: 0.82rem; color: var(--smoke); }
.wine td { text-align: right; padding: 0.7rem 0 0.7rem 1rem; border-bottom: 1px solid var(--line); color: var(--bone); }
.wine .wine-group th { padding: 1.4rem 0 0.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); border-bottom: 0; }

.sourcing { padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.sourcing-grid { display: grid; gap: 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.sourcing-grid div { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sourcing-grid dt { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; margin-bottom: 0.5rem; }
.sourcing-grid dd { margin: 0; color: var(--smoke); }
@media (min-width: 48rem) { .sourcing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .sourcing-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; } }

/* ---------- Our Fire ---------- */
.day { background: linear-gradient(180deg, var(--charcoal), var(--ash) 50%, var(--charcoal)); }
.day-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.timeline li { position: relative; display: grid; gap: 0.5rem; padding: 1.75rem 0 1.75rem 2rem; border-left: 1px solid rgba(var(--ember-rgb), 0.35); }
.timeline li::before {
  content: ""; position: absolute; left: -0.3rem; top: 2.2rem; width: 0.6rem; height: 0.6rem;
  background: var(--ember); transform: rotate(45deg); box-shadow: 0 0 14px rgba(var(--ember-rgb), 0.8);
}
.timeline time { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); font-variant-numeric: tabular-nums; }
.timeline h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; }
.timeline p { margin: 0; max-width: 30rem; color: var(--smoke); }
@media (min-width: 60rem) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .timeline li { padding: 2.25rem 0 0; border-left: 0; border-top: 1px solid rgba(var(--ember-rgb), 0.35); }
  .timeline li::before { left: 0; top: -0.32rem; }
}

.chef--page .chef-grid { align-items: start; }
.chef--page .chef-aside p { margin: 0; }
@media (min-width: 60rem) { .chef--page .chef-figure { position: sticky; top: calc(var(--nav-h) + 2rem); } }

.pair { display: grid; gap: 1rem; }
.pair figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--ash); }
.pair img { width: 100%; height: 115%; object-fit: cover; }
.pair figcaption { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--bone-rgb), 0.9); }
@media (min-width: 48rem) { .pair { grid-template-columns: 1.2fr 1fr; gap: 1.25rem; } .pair figure:last-child { margin-top: 4rem; } }

.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rules li { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.rules h3 { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.rules p { margin: 0; color: var(--smoke); }

/* ---------- Visit ---------- */
.visit-page { display: grid; gap: 4rem; }
@media (min-width: 60rem) { .visit-page { grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: start; } }
.big-address { font-style: normal; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; }
.copyable { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1rem 0 2rem; color: var(--smoke); font-size: 0.95rem; }
.copy-btn {
  padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(var(--bone-rgb), 0.3);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.copy-btn:hover { border-color: var(--bone); }
.copy-btn.is-done { background: var(--ember); border-color: var(--ember); color: var(--charcoal); }
.map { margin: 0; }
.map svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.map figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--smoke); }
.map figcaption a { color: var(--bone); }
.motion .map-pulse { transform-box: fill-box; transform-origin: center; animation: map-pulse 2.6s var(--ease-out) infinite; }
@keyframes map-pulse { 0% { transform: scale(0.4); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }

.open-now { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); }
.hours--full { font-variant-numeric: tabular-nums; }
.hours--full thead th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); padding-top: 0; }
.hours--full thead th:not(:first-child), .hours--full td { text-align: right; }
.hours--full td + td { color: var(--smoke); }
.note-card { margin-top: 1.5rem; padding: 1.4rem 1.5rem; background: rgba(var(--bone-rgb), 0.04); border: 1px solid var(--line); }
.note-card h3 { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.note-card p { margin: 0; color: var(--smoke); }
.call { margin: 2rem 0 0; color: var(--smoke); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }

.ways { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.way { display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.way h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.way p { margin: 0; color: var(--smoke); }
.way .text-link { justify-self: start; margin-top: 0.5rem; }
@media (min-width: 48rem) { .ways { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; } }
@media (min-width: 75rem) { .getting-here .ways { grid-template-columns: repeat(4, 1fr); } .reserve-more .ways { grid-template-columns: repeat(3, 1fr); } }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.4rem; color: var(--ember); transition: transform 0.4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.4rem; max-width: 36rem; color: var(--smoke); }

/* ---------- Forms (shared by booking and careers) ---------- */
.fields { display: grid; gap: 1.1rem 1rem; }
@media (min-width: 36rem) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label, .checks legend { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--bone-rgb), 0.8); }
.optional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--smoke); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea {
  width: 100%; padding: 0.85rem 0.95rem;
  font: inherit; font-size: 1rem; color: var(--bone);
  background: rgba(var(--bone-rgb), 0.05); border: 1px solid rgba(var(--bone-rgb), 0.2); border-radius: 2px;
  transition: border-color 0.25s, background-color 0.25s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bone) 50%), linear-gradient(135deg, var(--bone) 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--ash); color: var(--bone); }
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(var(--bone-rgb), 0.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); background: rgba(var(--bone-rgb), 0.08); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error .drop { border-color: #ff8a5c; }
.field-error { margin: 0; min-height: 0; font-size: 0.82rem; color: #ff9f7a; }
.field-error:empty { display: none; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.field--check label { font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(var(--bone-rgb), 0.82); }
.field--check .field-error { grid-column: 1 / -1; }
.field input[type="checkbox"], .checks input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--ember); }

.concept-note { margin: 1.5rem 0 0; padding: 0.9rem 1rem; border: 1px dashed rgba(var(--bone-rgb), 0.25); font-size: 0.85rem; color: var(--smoke); }

/* ---------- Reservations ---------- */
.reserve { position: relative; overflow: hidden; overflow: clip; padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 8vw, 6rem); }
.reserve-glow { position: absolute; inset: auto -20% -30% -20%; height: 70%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--ember-rgb), 0.2), transparent); }
.motion .reserve-glow { animation: flicker-glow 5s infinite; }
.reserve-grid { position: relative; display: grid; gap: 3rem; }
@media (min-width: 64rem) { .reserve-grid { grid-template-columns: 1fr minmax(0, 34rem); gap: 5rem; align-items: start; } .reserve-intro { position: sticky; top: calc(var(--nav-h) + 2rem); } }
.reserve .page-title { font-size: clamp(3.2rem, 8vw, 7rem); }
.reserve-notes { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 30rem; color: var(--smoke); font-size: 0.95rem; }
.reserve-notes li { padding-top: 0.9rem; border-top: 1px solid var(--line); }
.reserve-notes b { color: var(--bone); font-weight: 600; }
.reserve-notes a { color: var(--bone); }

.booking-card {
  position: relative; padding: clamp(1.25rem, 4vw, 2.25rem);
  background: linear-gradient(180deg, rgba(var(--bone-rgb), 0.06), rgba(var(--bone-rgb), 0.025));
  border: 1px solid rgba(var(--bone-rgb), 0.14);
  border-top: 2px solid var(--ember);
  min-height: 34rem;
}
.booking-fallback { margin: 0; font-size: 1.05rem; }
.booking { display: grid; gap: 1.5rem; }
.booking-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.booking-steps li { padding-top: 0.6rem; border-top: 2px solid rgba(var(--bone-rgb), 0.15); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); transition: border-color 0.4s, color 0.4s; }
.booking-steps li.is-done { border-color: rgba(var(--ember-rgb), 0.55); color: rgba(var(--bone-rgb), 0.8); }
.booking-steps li.is-current { border-color: var(--ember); color: var(--bone); }
.booking-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 0; }
.booking-summary:has(.chip:not([hidden])) { min-height: 2.2rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem;
  border-radius: 999px; border: 1px solid rgba(var(--ember-rgb), 0.5); background: rgba(var(--ember-rgb), 0.1);
  font-size: 0.8rem; cursor: pointer; transition: background-color 0.3s;
}
.chip::after { content: "Edit"; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.chip:hover { background: rgba(var(--ember-rgb), 0.2); }
.step { margin: 0; padding: 0; border: 0; min-width: 0; }
.step-title { padding: 0; margin-bottom: 1.25rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; }
.step-hint { margin: 1rem 0 0; font-size: 0.88rem; color: var(--smoke); }
.step-hint a { color: var(--bone); }
.motion .step:not([hidden]) { animation: step-in 0.6s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* Visually hidden native radios keep keyboard and screen reader behaviour. */
.party-grid, .times, .cal-grid { display: grid; }
.party-grid label, .times label, .cal-grid label { position: relative; }
.party-grid input, .times input, .cal-grid input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.party-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.party-grid span, .times span, .cal-grid span {
  display: grid; place-items: center; height: 100%;
  border: 1px solid rgba(var(--bone-rgb), 0.18); border-radius: 2px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.party-grid span { aspect-ratio: 1.3; font-family: var(--display); font-size: 2rem; }
:is(.party-grid, .times, .cal-grid) input:hover + span { border-color: rgba(var(--bone-rgb), 0.55); }
:is(.party-grid, .times, .cal-grid) input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
:is(.party-grid, .times, .cal-grid) input:checked + span { background: var(--ember); border-color: var(--ember); color: var(--charcoal); }
:is(.times, .cal-grid) input:disabled + span { opacity: 0.28; text-decoration: line-through; text-decoration-color: rgba(var(--bone-rgb), 0.4); }
:is(.times, .cal-grid) input:disabled { cursor: not-allowed; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.cal-month { margin: 0; font-family: var(--display); font-size: 1.6rem; }
.cal-nav { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(var(--bone-rgb), 0.25); background: none; cursor: pointer; }
.cal-nav:disabled { opacity: 0.25; cursor: default; }
.cal-nav:not(:disabled):hover { border-color: var(--bone); }
.cal-dow, .cal-grid { grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.cal-dow { display: grid; margin-bottom: 0.3rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); text-align: center; }
.cal-grid span { aspect-ratio: 1; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.cal-grid .is-today span { border-color: rgba(var(--ember-rgb), 0.6); }
.cal-grid .cal-blank { visibility: hidden; }

.times { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 30rem) { .times { grid-template-columns: repeat(4, 1fr); } }
.times span { padding: 0.8rem 0.25rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.times-group { grid-column: 1 / -1; margin: 0.6rem 0 0.1rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); }
.times-group:first-child { margin-top: 0; }

.booking-actions { display: flex; justify-content: space-between; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.booking-actions [data-next] { margin-left: auto; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled::before { display: none; }

.booking-done, .apply-done { display: grid; gap: 0.75rem; justify-items: start; outline: none; }
.booking-done[hidden], .apply-done[hidden] { display: none; }
.done-mark { width: 3.5rem; height: 3.5rem; color: var(--bone); margin-bottom: 0.5rem; }
.booking-done h2, .apply-done h3 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; }
.booking-done .eyebrow, .apply-done .eyebrow { margin: 0; }
.done-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; width: 100%; margin: 1rem 0 0; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.done-list dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); }
.done-list dd { margin: 0.25rem 0 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.done-note { margin: 0.5rem 0 0; color: var(--smoke); }
.done-note a { color: var(--bone); }
.booking-done .btn, .apply-done .btn { margin-top: 0.75rem; }
.motion .booking-done:not([hidden]), .motion .apply-done:not([hidden]) { animation: step-in 0.8s var(--ease-out); }

/* ---------- Careers ---------- */
.perks { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: 2rem; }
.perks li { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.perks h3 { margin: 0 0 0.45rem; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.perks p { margin: 0; color: var(--smoke); }
@media (min-width: 48rem) { .perks { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; } }
@media (min-width: 75rem) { .perks { grid-template-columns: repeat(3, 1fr); } }

.roles { border-top: 1px solid var(--line); }
.role { border-bottom: 1px solid var(--line); }
.role summary {
  display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: baseline;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
}
.role summary::-webkit-details-marker { display: none; }
.role-name { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; transition: color 0.3s; }
.role summary:hover .role-name { color: var(--ember); }
.role-meta { grid-column: 1; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); }
.role-pay { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 0.92rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.role summary::after { content: "+"; grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; color: var(--ember); transition: transform 0.4s var(--ease-out); }
.role summary { grid-template-columns: 1fr auto 1.5rem; }
.role[open] summary::after { transform: rotate(45deg); }
.role-body { display: grid; gap: 1rem; padding: 0 0 2rem; max-width: 42rem; color: rgba(var(--bone-rgb), 0.82); }
.role-body p, .role-body ul { margin: 0; }
.role-body ul { padding-left: 1.1rem; color: var(--smoke); display: grid; gap: 0.35rem; }
.role-body li::marker { color: var(--ember); }
.role-body .text-link { justify-self: start; background-color: transparent; border: 0; cursor: pointer; padding-inline: 0; }
@media (max-width: 40rem) {
  .role summary { grid-template-columns: 1fr 1.5rem; }
  .role-pay { grid-column: 1; grid-row: auto; text-align: left; font-size: 0.85rem; color: var(--ember); }
  .role summary::after { grid-column: 2; grid-row: 1 / span 3; }
}

.apply-grid { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .apply-grid { grid-template-columns: 1fr minmax(0, 36rem); gap: 5rem; align-items: start; } }
.apply-card { padding: clamp(1.25rem, 4vw, 2.25rem); background: linear-gradient(180deg, rgba(var(--bone-rgb), 0.06), rgba(var(--bone-rgb), 0.025)); border: 1px solid rgba(var(--bone-rgb), 0.14); border-top: 2px solid var(--ember); }
.apply { display: grid; gap: 1.75rem; }
.apply-submit { justify-self: start; }
.eeo { margin: 2rem 0 0; max-width: 30rem; font-size: 0.85rem; color: var(--smoke); }
.checks { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.checks legend { margin-bottom: 0.6rem; padding: 0; }
.checks label { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--bone); cursor: pointer; }
.checks .field-error { flex-basis: 100%; }

.drop { position: relative; border: 1px dashed rgba(var(--bone-rgb), 0.3); border-radius: 2px; transition: border-color 0.25s, background-color 0.25s; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-face { display: grid; justify-items: center; gap: 0.3rem; padding: 1.6rem 1rem; text-align: center; pointer-events: none; }
.drop-icon { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--ember-rgb), 0.15); color: var(--ember); font-size: 1.1rem; }
.drop-text { font-size: 0.95rem; overflow-wrap: anywhere; }
.drop-text b { color: var(--ember); font-weight: 600; }
.drop-hint { font-size: 0.8rem; color: var(--smoke); }
.drop.is-over, .drop:focus-within { border-color: var(--ember); background: rgba(var(--ember-rgb), 0.06); }
.drop.has-file { border-style: solid; border-color: rgba(var(--ember-rgb), 0.6); }

/* ==========================================================================
   Reduced motion: everything still, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .embers { display: none; }
}
.nowrap { white-space: nowrap; }