/* Fonts are self hosted and declared font-display: optional.
   
   Why optional rather than swap: Lighthouse measured cumulative layout shift at
   0.331 on mobile, roughly three times the passing threshold, and the shift was
   traced to these two faces arriving late over fonts.gstatic.com and reflowing
   the hero. `optional` gives the browser a short block period and then, if the
   face has not arrived, it keeps the fallback for that page view and never
   swaps. No swap means no reflow, by specification rather than by luck.
   
   The cost is that a first visit on a genuinely slow connection renders in the
   fallback stack. Self hosting and preloading make that rare: these files are
   14 to 24 KB, same origin, and requested at the highest priority, and once
   cached every later view uses them. Serving them ourselves also drops two
   third party connections that were sitting in front of first paint. */
@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* Land of Fire — tokens and skin. Source of truth: DESIGN.md
   v5 "the carpet": the page is a woven field. Running selvedge borders down both
   edges, carpet bands as section seams, and the food sits on its own — cut out,
   unboxed, crossing the seams so sections bleed into each other. */

:root {
  --char: #140D08;
  --soot: #221711;
  --bone: #F2E7D8;
  --smoke: #B3A292;
  --ember: #F08A24;
  --copper: #C9793F;          /* borders, ornament, large type */
  --copper-text: #D3905B;     /* copper at text-safe contrast on char */
  --nar: #7A1F2B;
  --jade: #2E6E5B;            /* ORNAMENT ONLY — never text. Carpet green. */
  --ivory: #E8D9B8;           /* ORNAMENT ONLY — carpet ground-thread */

  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', sans-serif;

  --quick: 140ms;
  --standard: 260ms;
  --slow: 480ms;
  --ease: cubic-bezier(.33,.1,.2,1);

  --content: 1180px;
  --measure: 640px;

  --sel: clamp(13px, 2.3vw, 32px);              /* selvedge width */
  --gut: clamp(18px, 3.6vw, 44px);              /* content inset past selvedge */
  --pad: calc(var(--sel) + var(--gut));
  --band-h: clamp(26px, 3.4vw, 38px);
  --sel-tile: calc(var(--sel) * 52 / 34);       /* one repeat of the selvedge pattern */
}

* { box-sizing: border-box; }
input, button, select, textarea { font: inherit; }

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

body {
  margin: 0;
  background: var(--char);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;            /* food bleeds past the edges; clip keeps sticky nav working */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--ember); }

.measure { max-width: var(--measure); }

/* The hidden ornament <defs> carrier. This lived in a style attribute, which the
   site's own CSP (style-src 'self' — no 'unsafe-inline') blocked on every page,
   logging a violation and costing Lighthouse best-practices. Moved into the
   stylesheet rather than loosening the policy. */
.svg-defs { position: absolute; }

/* ---------- utility label ---------- */
.eyebrow, .label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-text);
}
.label { margin-bottom: 10px; }

/* ============================================================
   THE SELVEDGE — the carpet's side borders, running the full
   viewport height. This is why the page has no dead margin.
   ============================================================ */
/* The carpet borders begin where the nav ends. Running them to y=0 put pattern
   behind a 90%-opaque, backdrop-blurred bar (so it showed through), and left it
   exposed above the nav on an overscroll bounce. --nav-h is measured and kept
   current by embers.js; the fallbacks match the real heights if JS never runs. */
.selvedge {
  position: fixed;
  top: var(--nav-h, 80px);
  bottom: 0;
  transition: top var(--standard) var(--ease);
  width: var(--sel);
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--soot);
  border-inline: 1px solid color-mix(in srgb, var(--copper) 42%, transparent);
}
/* The woven pattern itself. It lives on a pseudo-element one tile taller than the
   strip and slides down by exactly one tile on a loop, so the carpet reads as
   slowly unrolling. translate only: no layout, no paint, and it stops under
   prefers-reduced-motion. */
.selvedge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--sel-tile));
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='52'%3E%3Cpath d='M0,0 H34 V52 H0 Z' fill='none'/%3E%3Cpath d='M17,2 L22,7 L26,5 L24,10 L29,14 L24,18 L26,23 L22,21 L17,26 L12,21 L8,23 L10,18 L5,14 L10,10 L8,5 L12,7 Z' fill='%237A1F2B'/%3E%3Cpath d='M17,8 L23,14 L17,20 L11,14 Z' fill='%23F08A24'/%3E%3Cpath d='M17,31.6 L19,36 L23.3,34 L21.3,38.4 L25.7,40 L21.3,41.6 L23.3,46 L19,44 L17,48.4 L15,44 L10.7,46 L12.7,41.6 L8.3,40 L12.7,38.4 L10.7,34 L15,36 Z' fill='none' stroke='%23C9793F' stroke-width='1.6'/%3E%3Ccircle cx='17' cy='40' r='2.4' fill='%232E6E5B'/%3E%3Cpath d='M2,0 V52 M32,0 V52' stroke='%23C9793F' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
  background-size: var(--sel) var(--sel-tile);
  background-repeat: repeat-y;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .selvedge::before { animation: selvedge-unroll 6s linear infinite; }
  @keyframes selvedge-unroll {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--sel-tile)); }
  }
}
.selvedge-l { left: 0; }
.selvedge-r { right: 0; }
@media (max-width: 640px) { .selvedge { top: var(--nav-h, 102px); } }
@media (max-width: 560px) { .selvedge { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .selvedge { transition-duration: 1ms; } }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--char) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--copper) 25%, transparent);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.damga-mark { flex: none; width: 22px; height: 22px; color: var(--ember); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.nav-links a:not(.btn) {
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--ember); border-bottom-color: var(--copper); }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 14px 28px;
  background: var(--ember);
  color: var(--char);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.btn::after {                      /* ignite sweep (ported idea: Magic UI shine → CSS) */
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 35%, rgba(255,244,224,0.55) 50%, transparent 65%);
}
.btn:hover { background: #F79A3E; }
.btn:hover::after { transition: transform var(--slow) var(--ease); transform: translateX(110%) skewX(-18deg); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.btn-small { padding: 9px 18px; font-size: 14px; white-space: nowrap; }

/* Four nav items + the wordmark don't fit one row on a phone. Wrap into two rows
   rather than dropping a link — and the extra room fixes the sub-44px tap targets. */
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .nav-brand { flex: 1 0 100%; justify-content: center; }
  .nav-links { flex: 1 0 100%; justify-content: space-between; gap: 4px; }
  .wordmark { font-size: 16px; letter-spacing: 0.14em; }
  .damga-mark { width: 19px; height: 19px; }
  .nav-links a:not(.btn) { font-size: 15px; padding: 12px 10px; }
  .btn-small { padding: 10px 14px; font-size: 14px; }
}

/* The nav is sticky from the start (verified in Chromium, WebKit and Firefox).
   What it lacked was a scrolled state: at 90% transparency over a dark page it
   dissolved into the content and stopped reading as a bar. Once past the fold it
   resolves into a solid plate with a brighter copper hairline and condenses.
   Depth comes from surface colour and hairline per DESIGN.md — never a shadow. */
.nav {
  transition: padding-block var(--standard) var(--ease),
              background-color var(--standard) var(--ease),
              border-bottom-color var(--standard) var(--ease);
}
/* Overscroll mask. On a rubber-band bounce at the top of the page the selvedge
   stays put (it is position:fixed, so viewport-anchored) while the nav rides
   down with the document — exposing the carpet borders ABOVE the nav. This
   pseudo-element hangs off the nav's top edge and travels with it, so the strip
   the nav springs away from is always solid char. Off-screen at rest. */
.nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--char);
  pointer-events: none;
}
.nav--stuck {
  background: color-mix(in srgb, var(--char) 97%, transparent);
  border-bottom-color: color-mix(in srgb, var(--copper) 58%, transparent);
  padding-block: 9px;
}
@media (prefers-reduced-motion: reduce) { .nav { transition-duration: 1ms; } }

.link-quiet {
  display: inline-block;
  padding: 8px 0;
  color: var(--bone);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-underline-offset: 4px;
  transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease);
}
.link-quiet:hover { color: var(--ember); text-decoration-color: var(--ember); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .nav-links a, .link-quiet { transition-duration: 1ms; }
  .btn:hover::after { transform: translateX(-110%) skewX(-18deg); }
  .btn:active { transform: none; }
}

/* ============================================================
   FIELDS — every section is a field inside the carpet.
   The gyul texture runs under ALL of them; there is no bare ground.
   ============================================================ */
section {
  position: relative;
  z-index: 1;
  /* clip sideways only — ornament that runs off the edge is contained by the
     selvedge, while vertical bleed (the bread breaking its panel) still works */
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(48px, 6.2vw, 84px) var(--pad);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23C9793F' stroke-opacity='0.13'%3E%3Cpath d='M48 20l6.7 14.6L69 28l-6.6 14.6L77 48l-14.6 5.4L69 68l-14.3-6.6L48 76l-6.7-14.6L27 68l6.6-14.6L19 48l14.6-5.4L27 28l14.3 6.6z'/%3E%3Cpath d='M0 0h8v8H0zM88 88h8v8h-8z' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E");
}
.field-inner { max-width: var(--content); margin: 0 auto; position: relative; }

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* ============================================================
   SEAMS — the carpet band between fields, and the food that
   crosses it. This is the "bleed between sections" move.
   ============================================================ */
.seam {
  position: relative;
  z-index: 6;                    /* above both neighbouring fields */
  height: var(--band-h);
  margin-inline: var(--sel);
  /* food spills vertically into both fields, but never widens the page */
  overflow-x: clip;
  overflow-y: visible;
}
.band {
  position: absolute;
  inset: 0;
  border-block: 1px solid color-mix(in srgb, var(--copper) 38%, transparent);
  background-color: var(--soot);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='34'%3E%3Cpath d='M20,5 L25,10 L29,8 L27,13 L32,17 L27,21 L29,26 L25,24 L20,29 L15,24 L11,26 L13,21 L8,17 L13,13 L11,8 L15,10 Z' fill='%237A1F2B'/%3E%3Cpath d='M20,11 L26,17 L20,23 L14,17 Z' fill='%23F08A24'/%3E%3Cpath d='M58,8.6 L60,13 L64.3,11 L62.3,15.4 L66.7,17 L62.3,18.6 L64.3,23 L60,21 L58,25.4 L56,21 L51.7,23 L53.7,18.6 L49.3,17 L53.7,15.4 L51.7,11 L56,13 Z' fill='none' stroke='%23C9793F' stroke-width='1.3'/%3E%3Ccircle cx='58' cy='17' r='2' fill='%232E6E5B'/%3E%3C/svg%3E");
  background-size: auto 100%;
  background-repeat: repeat-x;
}

/* the cut-out food, centred on the seam so it spills into both fields */
.seam-food {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(200px, 34vw, 430px);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.6)) drop-shadow(0 30px 38px rgba(0,0,0,0.6));
}
.seam-food-r { right: clamp(-40px, -2vw, 0px); }
.seam-food-l { left: clamp(-56px, -4vw, 0px); }

/* the ember pool a free-standing plate sits in — replaces a photo box */
.glow-pool {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  width: clamp(240px, 40vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ember) 26%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
.glow-pool-r { right: clamp(-70px, -4vw, -10px); }
.glow-pool-l { left: clamp(-80px, -5vw, -10px); }

@media (prefers-reduced-motion: no-preference) {
  .glow-pool { animation: pool-breathe 7s var(--ease) infinite; }
  @keyframes pool-breathe { 50% { opacity: 0.62; } }
}

/* ============================================================
   HERO v5 — no photo box, no scrim, no billboard. A medallion
   field, giant inscription type, and one plate sitting on its own.
   ============================================================ */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 6vh, 76px) clamp(64px, 9vh, 120px);
  isolation: isolate;
  --med-w: clamp(340px, 52vw, 720px);     /* the medallion's width; the plate is sized off it */
  /* The hero's field is denser than the other sections': the same gyul tile,
     plus a hooked medallion (a carpet göl) sitting between every four stars, a
     woven diagonal lattice under both, and a vignette that pulls the eye to the
     centre. Every layer is stroke-only so the type and the plate stay legible. */
  background-image:
    radial-gradient(ellipse 70% 80% at 50% 48%, transparent 50%, color-mix(in srgb, var(--char) 78%, transparent) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23C9793F' stroke-opacity='0.13'%3E%3Cpath d='M48 20l6.7 14.6L69 28l-6.6 14.6L77 48l-14.6 5.4L69 68l-14.3-6.6L48 76l-6.7-14.6L27 68l6.6-14.6L19 48l14.6-5.4L27 28l14.3 6.6z'/%3E%3Cpath d='M0 0h8v8H0zM88 88h8v8h-8z' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='none' stroke='%23C9793F' stroke-opacity='0.16'%3E%3Cpath d='M96,44 L148,96 L96,148 L44,96 Z'/%3E%3Cpath d='M96,62 L130,96 L96,130 L62,96 Z'/%3E%3Cpath d='M96,78 L114,96 L96,114 L78,96 Z' stroke='%237A1F2B' stroke-opacity='0.5'/%3E%3Cg transform='translate(96,26)'%3E%3Cpath d='M0,-12 L5,-7 L9,-9 L7,-4 L12,0 L7,4 L9,9 L5,7 L0,12 L-5,7 L-9,9 L-7,4 L-12,0 L-7,-4 L-9,-9 L-5,-7 Z'/%3E%3C/g%3E%3Cg transform='translate(166,96)'%3E%3Cpath d='M0,-12 L5,-7 L9,-9 L7,-4 L12,0 L7,4 L9,9 L5,7 L0,12 L-5,7 L-9,9 L-7,4 L-12,0 L-7,-4 L-9,-9 L-5,-7 Z'/%3E%3C/g%3E%3Cg transform='translate(96,166)'%3E%3Cpath d='M0,-12 L5,-7 L9,-9 L7,-4 L12,0 L7,4 L9,9 L5,7 L0,12 L-5,7 L-9,9 L-7,4 L-12,0 L-7,-4 L-9,-9 L-5,-7 Z'/%3E%3C/g%3E%3Cg transform='translate(26,96)'%3E%3Cpath d='M0,-12 L5,-7 L9,-9 L7,-4 L12,0 L7,4 L9,9 L5,7 L0,12 L-5,7 L-9,9 L-7,4 L-12,0 L-7,-4 L-9,-9 L-5,-7 Z'/%3E%3C/g%3E%3Cpath d='M96,44 V26 M148,96 H166 M96,148 V166 M44,96 H26' stroke-opacity='0.22'/%3E%3C/g%3E%3Ccircle cx='96' cy='96' r='2.2' fill='%232E6E5B' fill-opacity='0.55'/%3E%3Cg fill='%23E8D9B8' fill-opacity='0.22'%3E%3Ccircle cx='96' cy='8' r='1.3'/%3E%3Ccircle cx='8' cy='96' r='1.3'/%3E%3Ccircle cx='184' cy='96' r='1.3'/%3E%3Ccircle cx='96' cy='184' r='1.3'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--copper) 6%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--copper) 6%, transparent) 0 1px, transparent 1px 24px);
  background-position: center, 0 0, 0 0, 0 0, 0 0;
}
.hero-embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-medallion {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 4%;
  translate: 0 -52%;
  width: var(--med-w);
  color: var(--copper);
  opacity: 0.30;
  pointer-events: none;
}
.hero-medallion svg { display: block; width: 100%; height: auto; }
/* the outer hooked band turns once every four minutes: present, never noticed */
/* fill-box, not view-box: the band is drawn symmetric about the SVG origin, so its own
   bounding box is centred exactly where the rings are. view-box put the pivot off-centre in
   Chrome and the ring orbited instead of turning. */
.medallion-band { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .medallion-band { animation: medallion-turn 240s linear infinite; }
  @keyframes medallion-turn { to { transform: rotate(360deg); } }
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 9.6vw, 132px);
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 12px 0 20px;
  text-wrap: balance;
}
.hero-title .lit { color: var(--ember); }
.hero-sub {
  max-width: 30ch;
  color: var(--bone);
  font-size: clamp(17px, 1.6vw, 20px);
  margin-bottom: 28px;
}
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* the plate: free-standing, tilts toward the pointer, never boxed */
.hero-plate-scene { position: relative; perspective: 1100px; }
.hero-plate-plane {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 320ms var(--ease);
  will-change: transform;
}
.hero-plate {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.6)) drop-shadow(0 30px 38px rgba(0,0,0,0.6));
}
/* Specular glare (ported idea: Aceternity glare-card → CSS). A warm highlight
   that follows the pointer, masked by the plate's own alpha so it reads as
   light moving across ceramic and glaze, never as a box over the photo. */
.hero-plate-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask: url("/img/mixed-kebab-cut.webp") center / contain no-repeat;
  mask: url("/img/mixed-kebab-cut.webp") center / contain no-repeat;
  background: radial-gradient(circle at var(--gx, 32%) var(--gy, 22%),
    rgba(255,232,200,0.30) 0%, rgba(255,232,200,0.10) 20%, transparent 46%);
  transition: opacity var(--standard) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .hero-plate-scene:hover .hero-plate-glare { opacity: 1; }
}
.hero-plate-glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 56%;
  translate: -50% -50%;
  width: 108%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ember) 30%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-plate-glow { animation: pool-breathe 7s var(--ease) infinite; }
}

/* Desktop: the plate is absolutely positioned against the hero in the medallion's
   own terms, so the two are concentric by construction. Medallion centre sits at
   right 4% + W/2 and at 50% - 0.02W (its translate is -52% of its own height);
   the plate is 0.76W wide, so right = 4% + 0.12W puts its centre on the same
   point. Measured before this change: the plate sat 50-73px right of the
   medallion at 900-1440px. */
@media (min-width: 861px) {
  .hero-plate-scene {
    position: absolute;
    z-index: 3;
    right: calc(4% + var(--med-w) * 0.12);
    top: calc(50% - var(--med-w) * 0.02);
    translate: 0 -50%;
    width: calc(var(--med-w) * 0.76);
  }
}

@media (max-width: 860px) {
  .hero { min-height: 0; flex-direction: column; }
  .hero-inner { grid-template-columns: 1fr; gap: 8px; }
  .hero-plate-scene { width: 100%; max-width: 460px; margin: 8px auto 0; }
  .hero-medallion { right: 50%; translate: 50% -52%; opacity: 0.18; }
  .hero-sub { max-width: var(--measure); }
}

/* ============================================================
   PAGE HEAD — the opening field on /menu and /blog. Same carpet
   ground as the hero, without the plate.
   ============================================================ */
.page-head { padding-block: clamp(52px, 7vw, 96px) clamp(40px, 5vw, 68px); }
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 10px 0 16px;
  text-wrap: balance;
}
.page-lede { color: var(--smoke); font-size: clamp(17px, 1.6vw, 19px); max-width: var(--measure); margin: 0; }

/* ---------- menu teaser (home) ---------- */
.menu-teaser { margin-top: clamp(24px, 3.5vw, 40px); max-width: 760px; }
.menu-more { margin: clamp(26px, 3.5vw, 40px) 0 0; }

/* ---------- glossary (menu page) ---------- */
.glossary-lede { color: var(--smoke); margin: 0; }
.glossary-list {
  margin: clamp(28px, 4vw, 44px) 0 0;
  display: grid;
  gap: 0;
}
@media (min-width: 861px) { .glossary-list { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 88px); } }
.glossary-row {
  padding: 18px 0;
  border-top: 1px solid color-mix(in srgb, var(--copper) 28%, transparent);
}
.glossary-row dt {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 6px;
}
.glossary-row dd { margin: 0; color: var(--smoke); font-size: 16px; max-width: 52ch; }

/* ---------- blog ---------- */
.blog-empty {
  color: var(--smoke);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
}
.post-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 34px); }
@media (min-width: 860px) { .post-cards { grid-template-columns: 1fr 1fr; } }
.post-card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  background: color-mix(in srgb, var(--soot) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--copper) 34%, transparent);
  transition: border-color var(--quick) var(--ease);
}
.post-card:hover { border-color: var(--copper); }
.post-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  margin: 6px 0 10px;
}
.post-card-title a { color: var(--bone); text-decoration: none; }
.post-card:hover .post-card-title a { color: var(--ember); }
.post-card-title a::after { content: ""; position: absolute; inset: 0; }  /* whole card is the hit area */
.post-card-desc { color: var(--smoke); font-size: 16px; margin: 0; }
.post-meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-text);
  margin: 0;
}

/* ---------- a single post ---------- */
.post-body { max-width: 68ch; margin: 0 auto; font-size: 19px; }
.post-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 1.6em;
}
.post-body p { color: var(--bone); }
.post-body ol, .post-body ul { color: var(--bone); padding-left: 1.3em; }
.post-body li { margin-bottom: 0.5em; }
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  color: var(--copper-text);
  background: color-mix(in srgb, var(--soot) 90%, transparent);
  padding: 0.12em 0.4em;
  border-radius: 2px;
}
.post-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ember);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.35;
  color: var(--bone);
}
.placeholder-flag {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--nar) 42%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ivory) 45%, transparent);
  color: var(--bone);
  font-size: 15px;
}

/* ---------- intro ---------- */
.intro-lede { color: var(--smoke); font-size: 19px; }
.intro-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.4vw, 44px);
  margin-top: clamp(34px, 5vw, 60px);
}
.intro-col {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--copper) 45%, transparent);
  padding-top: 22px;
}
.intro-col::before {          /* a woven notch on every column head — no bare rules */
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ember);
  rotate: 45deg;
}
.intro-col p { color: var(--smoke); margin: 0; }
@media (max-width: 767px) { .intro-cols { grid-template-columns: 1fr; } }

/* ---------- menu ---------- */
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.menu-note { color: var(--smoke); margin: 0; }
/* multi-column so the four groups balance themselves — a fixed 2-col grid left a
   dead corner under the short groups, which is exactly the emptiness we're avoiding */
.menu-groups {
  columns: 2;
  column-gap: clamp(40px, 6vw, 88px);
  column-rule: 1px solid color-mix(in srgb, var(--copper) 22%, transparent);
  margin-top: clamp(34px, 5vw, 60px);
}
.menu-group { break-inside: avoid; margin-bottom: clamp(34px, 5vw, 56px); }
.menu-group:last-child { margin-bottom: 0; }
@media (max-width: 850px) { .menu-groups { columns: 1; column-rule: none; } }
.menu-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gyul-glyph { width: 16px; height: 16px; flex: none; color: var(--ember); }
.menu-group-note { color: var(--smoke); font-size: 16px; margin-bottom: 18px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-row { padding: 14px 10px 12px; margin: 0 -10px; border-radius: 2px; transition: background-color var(--quick) var(--ease); }
.menu-row:hover { background: color-mix(in srgb, var(--soot) 80%, transparent); }
.menu-line { display: flex; align-items: baseline; gap: 10px; }
.menu-name { font-weight: 500; font-size: 18px; }
.leader {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted color-mix(in srgb, var(--copper) 55%, transparent);
  transform: translateY(-4px);
}
.menu-price {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--copper-text);
  font-variant-numeric: tabular-nums;
  transition: color var(--quick) var(--ease);
}
.menu-row:hover .menu-price { color: var(--ember); }
.menu-desc { color: var(--smoke); font-size: 16px; margin: 4px 0 0; max-width: 46ch; }

/* ============================================================
   BREAD — the carpet's inner field: a nar panel with its own
   nested border, and the bread breaking out over the top edge.
   ============================================================ */
.bread {
  position: relative;
  z-index: 2;
  background: var(--nar);
  background-image: none;
  padding-block: clamp(76px, 10vw, 128px) clamp(56px, 8vw, 96px);
  margin-inline: var(--sel);
  padding-inline: var(--gut);
}
.bread::before {                     /* the nested inner border of a carpet field */
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 18px);
  border: 1px solid color-mix(in srgb, var(--ivory) 34%, transparent);
  outline: 1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  outline-offset: 5px;
  pointer-events: none;
}
.bread-gyul {
  position: absolute;
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  height: 150%;
  width: auto;
  color: var(--bone);
  opacity: 0.08;
  pointer-events: none;
}
.bread-inner {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  text-align: center;
}
/* bread cut-out sits above the panel's top edge and breaks it */
.bread-loaf {
  display: block;
  width: clamp(260px, 46vw, 620px);
  height: auto;
  margin: calc(-1 * clamp(120px, 15vw, 190px)) auto clamp(20px, 3vw, 34px);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.6)) drop-shadow(0 30px 38px rgba(0,0,0,0.6));
}
.bread-line {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.3;
  color: var(--bone);
  text-wrap: balance;
}

/* ---------- visit ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}
/* the bowl runs off the right edge — food entering from the side, not a boxed photo */
.visit-bowl-wrap { position: relative; margin-right: clamp(-90px, -6vw, 0px); }
.visit-bowl {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.6)) drop-shadow(0 30px 38px rgba(0,0,0,0.6));
}
.visit-bowl-glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  translate: -50% -50%;
  width: 112%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ember) 24%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .visit-grid { grid-template-columns: 1fr; }
  .visit-bowl-wrap { max-width: 420px; margin: 0 auto; }
}
.visit-address { font-style: normal; font-size: 18px; line-height: 1.7; margin-bottom: 14px; }
.visit-status { color: var(--smoke); max-width: var(--measure); margin-top: 22px; }

/* ---------- join ---------- */
.join-inner { max-width: var(--content); margin: 0 auto; }
/* the join is a woven cartouche, not text floating in a void — nested carpet
   borders around a soot field, the same enclosure the bread panel uses */
.join-cartouche {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 52px);
  text-align: center;
  background: color-mix(in srgb, var(--soot) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--copper) 55%, transparent);
  outline: 1px solid color-mix(in srgb, var(--copper) 20%, transparent);
  outline-offset: 6px;
}
.join-cartouche::before,
.join-cartouche::after {   /* a gyul pinned to each end, like a carpet cartouche */
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 26px;
  translate: -50% 0;
  background: var(--char);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13,1.4 L14.9,5.5 L18.9,3.6 L17,7.7 L21.1,9.3 L17,10.9 L18.9,15 L14.9,13.1 L13,17.2 L11.1,13.1 L7.1,15 L9,10.9 L4.9,9.3 L9,7.7 L7.1,3.6 L11.1,5.5 Z' transform='translate(0,4)' fill='none' stroke='%23C9793F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.join-cartouche::before { top: -13px; }
.join-cartouche::after { bottom: -13px; }
.join h2 { margin-top: 0; }
.join-line { color: var(--smoke); }
.join-form { margin: 26px auto 0; max-width: 560px; }
.hp { display: none; }
.join-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-text);
  margin-bottom: 8px;
  text-align: left;
}
.join-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.join-controls input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 16px;
  font: inherit;
  color: var(--bone);
  background: var(--soot);
  border: 1px solid color-mix(in srgb, var(--copper) 45%, transparent);
  border-radius: 2px;
  transition: border-color var(--quick) var(--ease);
}
.join-controls input::placeholder { color: color-mix(in srgb, var(--smoke) 70%, transparent); }
.join-controls input:hover { border-color: var(--copper); }
.form-msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 500; }
.form-msg.ok { color: var(--ember); }
.form-msg.err { color: #E8A48E; }
.join-form.shake { animation: shake 200ms var(--ease); }
@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .join-form.shake { animation: none; }
  .glow-pool, .hero-plate-glow { animation: none; }
  .hero-plate-plane, .hero-plate-glare { transition-duration: 1ms; }
}
.fine-print { color: var(--smoke); font-size: 14px; margin-top: 14px; }

/* ---------- footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid color-mix(in srgb, var(--copper) 25%, transparent);
  padding: 30px var(--pad);
  text-align: center;
  color: var(--smoke);
  font-size: 16px;
}
.footer p { margin: 0 0 6px; }
.footer-copy { font-size: 14px; }
/* The inscription panel, built from the stylesheet's own carpet vocabulary:
   the gyul diamond row between double rules, above and below a bordered name.
   Rules run a little wider than the box, as they do in the brand guide. */
.panel-lockup {
  position: relative;
  display: inline-block;
  margin: 0 0 22px;
  padding: 15px 0;
}
.panel-lockup::before,
.panel-lockup::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  height: 11px;
  border-block: 1px solid var(--copper);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5,2 L9,5.5 L5.5,9 L2,5.5 Z' fill='%23F08A24'/%3E%3C/svg%3E") repeat-x center / 11px 11px;
}
.panel-lockup::before { top: 0; }
.panel-lockup::after { bottom: 0; }
.panel-name {
  display: block;
  padding: 9px 28px;
  border: 1px solid var(--copper);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-indent: 0.32em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}

/* ---------- reveals (motion.md #4 — visible by default, safe degrade) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise both;
      animation-timeline: view();
      animation-range: entry 8% entry 38%;
    }
    @keyframes rise {
      from { transform: translateY(18px); }
      to   { transform: translateY(0); }
    }
  }
}