/* ============================================================
   EMBER — a wood-fire kitchen
   Original template. Photography licensed from Adobe Stock and
   graded in Lightroom / Photoshop. See IMAGE-CREDITS.md
   ============================================================ */

:root {
  --char: #100c0a;
  --soot: #17120f;
  --ash: #221a15;
  --line: #302620;
  --line-soft: #241c17;
  --bone: #f4ede3;
  --smoke: #9a8b80;
  --smoke-dim: #6d615a;
  --ember: #e8531f;
  --flame: #ff8f45;
  --gold: #d9a441;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* An author `display` beats the UA sheet's `[hidden] { display: none }`,
   which silently breaks every element toggled via the hidden attribute. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--char);
  color: var(--bone);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ember); color: var(--bone); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--ember);
  color: var(--bone);
  font-size: 0.85rem;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- grain ---------- */
.grain {
  position: fixed;
  inset: -12%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(4) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
}

/* ---------- shared type ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.4rem;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
h2 em { font-style: italic; color: var(--flame); }

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
}

p { line-height: 1.65; color: var(--smoke); }

.section {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12vw, 10rem) var(--pad);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { transform: translateY(-2px); }

.btn-ember {
  background: var(--ember);
  color: #fff;
  box-shadow: 0 10px 34px -12px rgba(232, 83, 31, 0.85);
}
.btn-ember:hover { background: var(--flame); }

.btn-ghost {
  border-color: var(--line);
  color: var(--bone);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--smoke); background: rgba(244, 237, 227, 0.04); }

.btn-wide { width: 100%; padding-block: 1.1rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem var(--pad);
  transition: background 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(16, 12, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  padding-block: 0.75rem;
}

.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo { display: flex; align-items: center; gap: 0.6rem; }
.logo-flame svg { fill: var(--ember); display: block; }
.logo-flame { animation: flicker 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  35% { transform: scale(1.09) rotate(-2deg); opacity: 0.88; }
  62% { transform: scale(0.96) rotate(1.5deg); opacity: 1; }
}
.logo-word {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  padding-left: 0.06em;
}

.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  font-size: 0.86rem;
  color: var(--smoke);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  font-size: 0.85rem;
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.nav-cta:hover { background: var(--ember); border-color: var(--ember); color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem var(--pad) 6rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-bed { position: absolute; inset: 0; z-index: -3; }

.hero-coals {
  width: 100%;
  height: 118%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.05) contrast(1.05);
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.06);
}

.hero-sparks {
  position: absolute;
  inset: -10% -5% auto -5%;
  width: 110%;
  height: 120%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: sparkDrift 26s linear infinite;
  will-change: transform;
}
@keyframes sparkDrift {
  from { transform: translate3d(0, 4%, 0) scale(1.05); }
  to   { transform: translate3d(-3%, -8%, 0) scale(1.18); }
}

/* The radial is centred at 22% 45% and only 15% opaque there — which is exactly
   where the headline and standfirst sit, so the copy was landing on the
   brightest coals with the thinnest scrim under it. The first band below darkens
   the copy side only, leaving the right of the frame (sprigs, live embers) at
   full strength. */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--scrim-angle, 100deg), rgba(16, 12, 10, 0.88) 0%, rgba(16, 12, 10, 0.66) 30%, rgba(16, 12, 10, 0.18) 55%, transparent 70%),
    radial-gradient(115% 85% at 22% 45%, rgba(16, 12, 10, 0.15) 0%, rgba(16, 12, 10, 0.82) 58%, var(--char) 100%),
    linear-gradient(to bottom, rgba(16, 12, 10, 0.7) 0%, transparent 28%, transparent 62%, var(--char) 100%);
}

/* On a phone the copy spans the full width, so a left-weighted scrim leaves the
   ends of every line on bright coals. Tipping it to run top-down puts the dark
   end under the whole text block instead of one side of it. */
@media (max-width: 760px) {
  .hero-vignette { --scrim-angle: 168deg; }
}

.hero-embers {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* floating cut-out garnish (Photoshop background removal) */
.hero-sprigs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sprig {
  position: absolute;
  width: clamp(150px, 17vw, 280px);
  opacity: 0.5;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)) saturate(0.75) brightness(0.82);
  will-change: transform;
}
.sprig-1 { top: 8%; right: 4%; transform: rotate(14deg); }
.sprig-2 { bottom: 6%; left: -3%; transform: rotate(-160deg); opacity: 0.32; }

.hero-inner { position: relative; max-width: var(--maxw); margin-inline: auto; width: 100%; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--smoke);
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(16, 12, 10, 0.45);
  backdrop-filter: blur(6px);
  margin-bottom: 2rem;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(232, 83, 31, 0.7);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 83, 31, 0.65); }
  70% { box-shadow: 0 0 0 10px rgba(232, 83, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 83, 31, 0); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 10.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.hero-title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--flame) 10%, var(--gold) 55%, var(--ember) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .rise {
  display: block;
  transform: translateY(112%);
  transition: transform 1.15s var(--ease);
}
.hero.is-lit .rise { transform: translateY(0); }
.hero.is-lit .line:nth-child(2) .rise { transition-delay: 0.12s; }

.hero-sub {
  max-width: 46ch;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  color: #b9aa9e;
  margin-bottom: 2.4rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}
.hero-scroll i {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.hero-scroll i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ember);
  transform: translateX(-100%);
  animation: scrollLine 2.6s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* ============================================================
   TENETS
   Nothing translates. A single glow walks the row on a stagger,
   like heat travelling down a log.
   ============================================================ */
.tenets {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--line-soft);
  background: var(--soot);
  padding: 1.4rem var(--pad);
}
.tenets ul {
  max-width: var(--maxw);
  margin-inline: auto;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem 1.5rem;
}
.tenets li {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.55rem);
  color: var(--smoke-dim);
  white-space: nowrap;
  animation: ignite 6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 1s);
}
.tenets li + li::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
  transform: translateY(-50%);
}
@keyframes ignite {
  0%, 22%, 100% { color: var(--smoke-dim); text-shadow: none; }
  5% { color: var(--flame); text-shadow: 0 0 26px rgba(232, 83, 31, 0.7); }
  12% { color: var(--bone); text-shadow: 0 0 14px rgba(232, 83, 31, 0.35); }
}

/* ============================================================
   THE FIRE
   ============================================================ */
.fire { background: var(--char); }

.fire-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.fire-sticky { position: sticky; top: 7rem; }
.fire-sticky h2 { margin-bottom: 1.5rem; }
.fire-sticky p { max-width: 40ch; }

/* the coal — WebGL, with the readout beneath it */
.coal-wrap { margin-top: 2.4rem; }

.coal {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin-left: -1.5rem;
  /* Until WebGL paints, this radial keeps the space feeling lit rather than blank. */
  background: radial-gradient(circle at 50% 52%, rgba(232, 83, 31, 0.14) 0%, transparent 62%);
}
.coal canvas { display: block; width: 100%; height: 100%; }
.coal.is-dead { display: none; }

.gauge-read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.gauge-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
  color: var(--flame);
  font-variant-numeric: tabular-nums;
}
.gauge-unit { font-family: var(--font-display); font-size: 1.4rem; color: var(--smoke-dim); }
.gauge-label {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}

.stages { list-style: none; }
.stage {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
  transition: opacity 0.6s var(--ease);
}
.stage:last-child { border-bottom: 1px solid var(--line-soft); }
.stage-idx {
  position: absolute;
  left: 0;
  top: clamp(2.15rem, 4.2vw, 3.2rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--smoke-dim);
  transition: color 0.5s;
}
.stage h3 { margin-bottom: 0.25rem; transition: color 0.5s; }
.stage-t {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ember);
  margin-bottom: 0.9rem;
  letter-spacing: 0.04em;
}
.stage p:last-child { max-width: 46ch; }
.stage.is-hot .stage-idx { color: var(--ember); }
.stage.is-hot h3 { color: var(--flame); }

/* ============================================================
   MENU
   ============================================================ */
.menu { background: var(--soot); border-block: 1px solid var(--line-soft); }

/* The dish list runs narrower than the rest of the page. At the full 1320px
   every row left an empty right half — a 600px dotted leader between name and
   price, and a description occupying a third of the line — which read as an
   unfinished layout rather than a menu. Stepping in under the full-width
   header also gives the section its own rhythm, like a card laid on the table. */
.menu { --menu-w: 900px; }

/* The narrow list shares the header's left edge rather than centring under it,
   so the step-in reads as a deliberate change of measure instead of a block
   that drifted off the grid. Below --maxw this collapses to 0 and everything
   sits flush left together, exactly as the header does. */
.menu { --menu-inset: max(0px, calc((100% - var(--maxw)) / 2)); }

.menu-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.menu-note { max-width: 44ch; font-size: 0.95rem; }

.dot-fire {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  vertical-align: 0.12em;
  margin-left: 0.3em;
  box-shadow: 0 0 10px rgba(232, 83, 31, 0.9);
}

.menu-tabs {
  max-width: var(--menu-w);
  margin: 0 auto 2.5rem var(--menu-inset);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1.2rem;
}
.mtab {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--smoke);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.mtab:hover { color: var(--bone); border-color: var(--smoke-dim); }
.mtab.is-active { color: #fff; background: var(--ember); border-color: var(--ember); }

.menu-body { position: relative; max-width: var(--menu-w); margin-inline: var(--menu-inset) auto; }

.course { list-style: none; display: none; }
.course.is-active { display: block; animation: fadeUp 0.55s var(--ease) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.dish {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: baseline;
  gap: 0 0.9rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.4s var(--ease);
}
.dish:first-child { border-top: 1px solid var(--line-soft); }
.dish[data-img] { cursor: crosshair; }
.dish:hover { background: linear-gradient(90deg, rgba(232, 83, 31, 0.07), transparent 70%); }

.dish-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--bone);
  transition: color 0.35s;
}
.dish:hover .dish-name { color: var(--flame); }

.dish-lead {
  border-bottom: 1px dotted rgba(154, 139, 128, 0.4);
  transform: translateY(-0.3em);
  min-width: 2rem;
}
.dish:hover .dish-lead { border-bottom-color: rgba(232, 83, 31, 0.6); }

.dish-price {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dish-price::before { content: '£'; font-size: 0.7em; opacity: 0.6; margin-right: 0.1em; }

.dish-desc {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
  font-size: 0.92rem;
  color: var(--smoke);
  max-width: 62ch;
}

/* cursor-following dish photograph */
.dish-peek {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  width: clamp(190px, 19vw, 300px);
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.9) rotate(-3deg);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
  border: 1px solid var(--line);
  will-change: transform, opacity;
}
.dish-peek::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(232, 83, 31, 0.18), transparent 60%);
}
.dish-peek img { width: 100%; height: 100%; object-fit: cover; }
.dish-peek.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(-3deg); }

.menu-foot {
  max-width: var(--menu-w);
  margin: 2.5rem auto 0 var(--menu-inset);
  font-size: 0.84rem;
  color: var(--smoke-dim);
}

/* ============================================================
   KITCHEN
   ============================================================ */
.kitchen-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.kitchen-shot { position: relative; }
.kitchen-shot img {
  width: 100%;
  /* Uncapped, this portrait shot towered over the copy column and left a
     void above and below it. */
  max-height: 68vh;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(1.02);
}
.kitchen-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(to top, rgba(16, 12, 10, 0.55), transparent 45%);
  pointer-events: none;
}
.kitchen-shot figcaption {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--smoke);
}

.kitchen-copy h2 { margin-bottom: 1.5rem; }
.kitchen-copy > p { max-width: 46ch; }

.pull {
  margin-top: 2.6rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--ember);
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--bone);
  margin-bottom: 0.8rem;
}
.pull cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}

/* Full-bleed row beneath both columns — as a 2×2 inside the copy column it
   left the right half of the section empty. */
.stats {
  max-width: var(--maxw);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.stat { background: var(--char); padding: 1.6rem 1.6rem 1.8rem; }
.stat dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 0.5rem;
}
.stat dd {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--flame);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   THE ROOM
   ============================================================ */
.room { background: var(--soot); border-block: 1px solid var(--line-soft); }

.room-shot {
  max-width: var(--maxw);
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  border-radius: 3px;
}
.room-shot img {
  width: 100%;
  filter: brightness(0.9) saturate(1.05);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}
.room-shot:hover img { transform: scale(1.06); }

.room-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.room-grid h2 { margin-bottom: 1.4rem; }
.room-grid p { max-width: 44ch; }

.hours h3 { margin-bottom: 1.2rem; }
.hours table { width: 100%; border-collapse: collapse; margin-bottom: 1.8rem; }
.hours th, .hours td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
  font-weight: 400;
}
.hours th { color: var(--bone); }
.hours td { color: var(--smoke); text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }
.hours .closed th, .hours .closed td { color: var(--smoke-dim); }
.hours address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--smoke);
}
.hours address a { color: var(--flame); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.hours address a:hover { border-bottom-color: var(--flame); }

/* ============================================================
   BOOKING
   ============================================================ */
.book { background: var(--char); }
.book-inner { max-width: 720px; margin-inline: auto; }
.book-inner > h2 { margin-bottom: 2.8rem; }

.booking { display: grid; gap: 2.2rem; }

.fld { border: 0; }
.fld legend {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 0.9rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--smoke);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.35s var(--ease);
}
.chip:hover:not(:disabled) { color: var(--bone); border-color: var(--smoke-dim); transform: translateY(-2px); }
.chip.is-on { background: var(--ember); border-color: var(--ember); color: #fff; }
.chip:disabled { opacity: 0.32; cursor: not-allowed; text-decoration: line-through; }
.chip small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  opacity: 0.72;
  margin-top: 0.2rem;
}

.stepper { display: inline-flex; align-items: center; gap: 1.1rem; }
.step {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.step:hover:not(:disabled) { border-color: var(--ember); color: var(--flame); }
.step:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper output { font-size: 1rem; color: var(--smoke); min-width: 9ch; text-align: center; }
.stepper output strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--bone);
  font-weight: 400;
  margin-right: 0.15em;
}

.fld-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.inp { display: block; }
.inp span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 0.6rem;
}
.inp input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--bone);
  background: var(--soot);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s, background 0.25s;
}
.inp input::placeholder { color: var(--smoke-dim); }
.inp input:focus { outline: none; border-color: var(--ember); background: var(--ash); }
.inp input.is-bad { border-color: #c0392b; }

.book-error {
  font-size: 0.86rem;
  color: #ff8a7a;
  margin: -0.8rem 0 0;
}
.book-small { font-size: 0.78rem; color: var(--smoke-dim); text-align: center; margin-top: -0.6rem; }

.book-done { text-align: center; padding: 2rem 0; animation: fadeUp 0.6s var(--ease) both; }
.book-done-mark {
  width: 62px; height: 62px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(232, 83, 31, 0.12);
  border: 1px solid rgba(232, 83, 31, 0.4);
}
.book-done-mark svg { fill: var(--ember); }
.book-done h3 { margin-bottom: 0.8rem; }
.book-done p { margin-bottom: 1.8rem; }
.book-done strong { color: var(--bone); font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 7vw, 5rem) var(--pad) 2.5rem;
  background: var(--soot);
  border-top: 1px solid var(--line-soft);
}
.foot-top {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.foot-brand .logo-word { display: block; margin-bottom: 0.8rem; }
.foot-brand p { max-width: 34ch; font-size: 0.9rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.foot-links a { font-size: 0.86rem; color: var(--smoke); transition: color 0.3s; }
.foot-links a:hover { color: var(--flame); }

.foot-legal {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--smoke-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.foot-sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--smoke);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  /* No drawer — but the menu is the whole point of a restaurant site,
     so that one link stays reachable next to the booking CTA. */
  .nav-links { gap: 1rem; }
  .nav-links a:not(.nav-key) { display: none; }
  .fire-grid,
  .menu-head,
  .kitchen-grid,
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .fire-sticky { position: static; }
  .kitchen-shot { max-width: 460px; }
  .menu-head { align-items: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coal { margin-left: 0; }
  .tenets ul { justify-content: flex-start; gap: 0.6rem 1.4rem; }
}

@media (max-width: 620px) {
  .hero { min-height: 92svh; padding-top: 7rem; }
  .hero-scroll { display: none; }
  .sprig-1 { top: 4%; right: -6%; }
  .sprig-2 { display: none; }
  .fld-inputs { grid-template-columns: minmax(0, 1fr); }
  .dish { grid-template-columns: 1fr auto; }
  .dish-lead { display: none; }
  .dish-peek { display: none; }
  .coal { max-width: 300px; margin-inline: auto; }
  .tenets li { font-size: 1rem; }
  .foot-legal { justify-content: flex-start; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-title .rise { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .hero-embers { display: none; }
}

/* ===================================================== touch targets ====
   Thumb, not cursor. :hover never fires on touch, so presses carry feedback. */
@media (pointer: coarse) {
  .nav-links a, .foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* menu tabs and the quantity stepper are the page's live controls */
  .mtab, .nav-key, .nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .step { min-width: 44px; min-height: 44px; }
  .foot a { min-height: 44px; display: flex; align-items: center; }
  .btn:active, .chip:active { transform: scale(.96); }
  .dish:active { transform: scale(.99); }
}