/* =========================================================================
   TASTE OF ASIA GUIDE — main.css  v3 · "Field Journal"
   ─────────────────────────────────────────────────────────────────────────
   An editorial field-journal of Asia: sumi-ink ground, washi-paper surfaces,
   vermillion seal-stamps, kintsugi-gold rules, hand-brushed CJK ornament,
   seigaiha waves, asanoha lattice. Fraunces (display) · EB Garamond (body) ·
   Yuji Syuku (CJK ornament) · JetBrains Mono (numerics).
   ========================================================================= */

/* ---------- design tokens ----------------------------------------------- */
:root {
  /* sumi-ink ground */
  --ink:           #0d0605;           /* deepest — page edge */
  --ink-2:         #1a0c09;           /* primary canvas */
  --ink-3:         #261410;           /* raised surface (cards, head) */
  --ink-4:         #321a16;           /* hover / inset */
  --ink-glaze:     rgba(255, 245, 220, .06);
  --line:          rgba(245, 232, 210, .10);
  --line-2:        rgba(245, 232, 210, .18);
  --line-3:        rgba(245, 232, 210, .28);

  /* vermillion (朱) — dominant accent */
  --vermillion:    #c8392a;
  --vermillion-2:  #a52a1d;          /* pressed-deep seal red */
  --vermillion-3:  #6e1a10;          /* dried-ink */
  --vermillion-glaze: rgba(200, 57, 42, .14);

  /* kintsugi gold (金) */
  --gold:          #d4a843;
  --gold-2:        #b88f2f;
  --gold-3:        #8a6a1f;
  --gold-glaze:    rgba(212, 168, 67, .18);

  /* celadon (青磁) — used sparingly */
  --celadon:       #6f8c7a;

  /* washi paper — light surfaces */
  --paper:         #f6ecd6;
  --paper-2:       #ebe0c4;
  --paper-3:       #d8c8a4;
  --paper-edge:    #c4b48c;

  /* text */
  --text:          #f5ecd6;          /* on dark */
  --text-2:        rgba(245, 236, 214, .72);
  --text-3:        rgba(245, 236, 214, .42);
  --text-ink:      #1f120c;          /* on washi */
  --text-ink-2:    rgba(31, 18, 12, .72);
  --text-ink-3:    rgba(31, 18, 12, .50);

  /* legacy aliases — keep templates from breaking */
  --maroon-deep:   var(--ink);
  --maroon-mid:    var(--ink-2);
  --maroon-card:   var(--ink-3);
  --maroon-hover:  var(--ink-4);
  --maroon-border: var(--line);
  --cream:         var(--text);
  --cream-dim:     var(--text-2);
  --cream-faint:   var(--text-3);
  --gold-dim:      var(--gold-glaze);
  --red:           var(--vermillion);
  --red-hover:     var(--vermillion-2);
  --section-light: var(--paper);
  --section-border:var(--paper-edge);
  --ink-dim:       var(--text-2);
  --ink-faint:     var(--text-3);

  /* type */
  --serif:    'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
  --serif-2:  'EB Garamond', 'Fraunces', Georgia, serif;
  --cjk:      'Yuji Syuku', 'Noto Serif JP', 'STSong', serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sans:     var(--serif);          /* legacy alias */

  --w:        1240px;
  --w-prose:  720px;
  --pad:      clamp(20px, 4vw, 48px);
  --gap:      24px;
  --r:        4px;
  --r-sm:     2px;
  --shadow-deep: 0 32px 80px rgba(0,0,0,.55), 0 6px 20px rgba(0,0,0,.35);
  --shadow-soft: 0 12px 36px rgba(0,0,0,.32);
  --shadow-stamp: 0 1px 0 rgba(0,0,0,.4), 0 6px 18px rgba(140, 26, 18, .35);
}

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif-2);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--ink-2);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(140, 26, 18, .22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(120, 18, 10, .14) 0%, transparent 70%),
    linear-gradient(180deg, #1c0e0a 0%, #160a07 40%, #0e0605 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* the topmost vermillion ribbon — present on every page */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 1000;
  background: linear-gradient(90deg,
    var(--vermillion-3) 0%, var(--vermillion) 18%, var(--vermillion-2) 50%,
    var(--vermillion) 82%, var(--vermillion-3) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}

/* washi paper grain overlay — subtle but everywhere */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1   0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--gold); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
::selection { background: var(--vermillion); color: var(--paper); }

/* ---------- type system ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.display {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.italic, em { font-style: italic; font-variation-settings: "opsz" 24, "SOFT" 60; }

/* eyebrows: Fraunces small-caps, wide-tracked, kintsugi gold */
.eyebrow,
.hero-eyebrow,
.explore-eyebrow,
.section-title,
.cuisine-tag,
.stat-lbl,
.crumbs,
.tag {
  font-family: var(--serif);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-variation-settings: "opsz" 72, "SOFT" 30;
  letter-spacing: 0.34em;
  text-transform: lowercase;     /* small-caps render uppercase */
}

/* CJK ornament class — used inline for hand-brushed accents */
.cjk { font-family: var(--cjk); font-weight: 400; line-height: 1; }

/* ---------- containers -------------------------------------------------- */
.wrap     { max-width: var(--w);       margin: 0 auto; padding: 0 var(--pad); position: relative; }
.wrap-sm  { max-width: 880px;          margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow,
.wrap-prose { max-width: var(--w-prose); margin: 0 auto; padding: 0 var(--pad); }
.row      { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.center   { text-align: center; }

/* ---------- site header ------------------------------------------------- */
.site-head {
  position: sticky; top: 3px; z-index: 100;
  padding: 16px 0 14px;
  background: rgba(14, 8, 6, .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-head::after {
  /* triple-dot rule — vermillion / gold / paper */
  content: '';
  position: absolute; left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 64px; height: 6px;
  background:
    radial-gradient(circle at 14% 50%, var(--vermillion) 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 50%, var(--gold) 0 2px, transparent 2.5px),
    radial-gradient(circle at 86% 50%, var(--paper) 0 2px, transparent 2.5px);
}

/* brand mark with hand-stamped 味 seal */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.brand .dot { display: none; }       /* legacy span; we use a real seal now */
.brand::before {
  content: '味';
  font-family: var(--cjk);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  font-size: 18px; line-height: 1;
  text-indent: 0;
  padding-bottom: 2px;
  box-shadow: var(--shadow-stamp);
  transform: rotate(-3deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.brand:hover { color: var(--text); }
.brand:hover::before { transform: rotate(-12deg) scale(1.05); }

.head-tools { display: inline-flex; align-items: center; gap: 12px; }
.nav { display: flex; gap: 32px; }
.nav a {
  font-family: var(--serif);
  font-size: 13px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  color: var(--text-2);
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: '';
  position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 1px;
  background: var(--vermillion);
  transition: width .3s ease, left .3s ease;
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after { width: 100%; left: 0; }

/* language switcher */
.lang-switch { font-family: var(--serif); font-size: 13px; color: var(--text-3); position: relative; }
.lang-switch summary {
  cursor: pointer; list-style: none;
  padding: 7px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  color: var(--text-2);
  transition: border-color .25s, color .25s;
}
.lang-switch summary:hover { color: var(--gold); border-color: var(--gold-glaze); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch[open] summary { color: var(--gold); border-color: var(--gold-glaze); }
.lang-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  padding: 10px;
  min-width: 240px;
  grid-template-columns: 1fr 1fr;
  gap: 2px; z-index: 200;
  box-shadow: var(--shadow-deep);
}
.lang-menu::before {
  content: ''; position: absolute; top: -5px; right: 24px;
  width: 8px; height: 8px;
  background: var(--ink-3);
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  transform: rotate(45deg);
}
.lang-switch[open] .lang-menu { display: grid; }
.lang-menu a {
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--serif-2);
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.lang-menu a:hover { background: var(--ink-4); color: var(--gold); }
.lang-menu a.cur { color: var(--vermillion); font-weight: 600; }

/* ---------- hero -------------------------------------------------------- */
.hero {
  padding: clamp(70px, 12vh, 130px) 0 clamp(60px, 10vh, 110px);
  position: relative; overflow: hidden;
}
/* asanoha hemp-leaf lattice as a barely-there backdrop */
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'><g fill='none' stroke='%23d4a843' stroke-width='0.6'><polygon points='40,0 80,23 80,69 40,92 0,69 0,23'/><line x1='40' y1='0'  x2='40' y2='92'/><line x1='0'  y1='23' x2='80' y2='69'/><line x1='80' y1='23' x2='0'  y2='69'/></g></svg>");
  background-size: 80px 138px;
  mix-blend-mode: screen;
}
/* watermark CJK 亞 (Asia) behind the hero */
.hero::after {
  content: '亞';
  font-family: var(--cjk);
  position: absolute;
  right: -4vw; top: 50%;
  transform: translateY(-50%);
  font-size: clamp(280px, 42vw, 560px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } }

.hero-text { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--vermillion);
  letter-spacing: 0.36em;
}
.hero-eyebrow::before {
  content: '';
  width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vermillion));
}
.hero-eyebrow::after {
  content: '味の旅';
  font-family: var(--cjk);
  font-variant-caps: normal;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-size: 14px;
}

.hero-heading {
  font-family: var(--serif);
  font-size: clamp(44px, 7.2vw, 86px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
}
.hero-heading .italic-gold {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
  color: var(--gold);
  font-size: 1.0em;
}
.hero-sub {
  font-family: var(--serif-2);
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  line-height: 1.68;
  max-width: 48ch;
  font-style: italic;
}
.hero-sub::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1em;
  color: var(--vermillion);
  font-variant-caps: small-caps;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.btn-primary, .button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: var(--vermillion);
  color: var(--paper);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 14px;
  border-radius: 0;
  border: none; cursor: pointer;
  position: relative;
  transition: background .25s, transform .25s, box-shadow .25s;
  box-shadow: 0 6px 18px rgba(140, 26, 18, .35);
}
.btn-primary::before, .button::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(245, 232, 210, .25);
  pointer-events: none;
}
.btn-primary:hover, .button:hover {
  background: var(--vermillion-2);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(140, 26, 18, .45);
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  background: transparent;
  color: var(--text);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  font-size: 14px;
  border: 1px solid var(--line-3);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glaze); }

/* hero illustration → seal-stamp composition */
.hero-illustration {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(280px, 40vw, 440px);
}
.hero-illus-wrap {
  position: relative;
  width: clamp(260px, 38vw, 400px);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
/* big vermillion seal ring */
.hero-illus-wrap::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(200, 57, 42, .85) 0%, rgba(140, 26, 18, .55) 60%, transparent 78%);
  filter: blur(0.4px);
}
/* concentric ink circles */
.hero-illus-wrap::after {
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  border: 2px solid var(--paper);
  opacity: .35;
  box-shadow: inset 0 0 0 1px rgba(245, 232, 210, .15);
}
.hero-illus-emoji {
  position: relative;
  font-size: clamp(120px, 18vw, 200px);
  line-height: 1; z-index: 2;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .8));
  animation: drift 7s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
/* gold flecks (kept) */
.hero-illus-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  z-index: 3;
}
.hero-illus-dot:nth-child(1) { width: 6px; height: 6px; top: 8%;  left: 18%; opacity: .55; }
.hero-illus-dot:nth-child(2) { width: 9px; height: 9px; top: 18%; right: 10%; opacity: .65; }
.hero-illus-dot:nth-child(3) { width: 4px; height: 4px; bottom: 12%; left: 14%; opacity: .45; }
.hero-illus-dot:nth-child(4) { width: 7px; height: 7px; bottom: 22%; right: 8%; opacity: .60; }
.hero-illus-dot:nth-child(5) { width: 3px; height: 3px; top: 50%; left: 2%; opacity: .35; }

/* vertical CJK column to the right of the hero (injected by generator) */
.hero-cjk-column {
  position: absolute;
  right: clamp(8px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 10px;
  font-family: var(--cjk);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--gold);
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
  opacity: .65;
  pointer-events: none;
}
.hero-cjk-column::before, .hero-cjk-column::after {
  content: '';
  display: block;
  width: 1px; height: 28px;
  background: var(--gold-glaze);
  margin: 0 auto;
}
@media (max-width: 1100px) { .hero-cjk-column { display: none; } }

/* ---------- stats bar (ledger style) ----------------------------------- */
.stats-bar {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 4px 0;
  position: relative;
}
.stats-bar::before, .stats-bar::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.stats-bar::before { top: -4px; }
.stats-bar::after  { bottom: -4px; }
@media (max-width: 560px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }

.stat-item {
  padding: 22px 18px;
  text-align: center;
  border-right: 1px dashed var(--line);
  position: relative;
}
.stat-item:last-child { border-right: none; }
.stat-item:nth-child(3) ~ .stat-item { border-top: 1px dashed var(--line); }
.stat-item::before {
  content: '◆';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: var(--gold);
  background: var(--ink-2); padding: 0 6px;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  color: var(--paper);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-lbl {
  font-size: 11px; color: var(--text-3);
  margin-top: 8px;
}

/* ---------- explore section (washi paper) ------------------------------ */
.section-explore {
  position: relative;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196, 180, 140, .35) 0%, transparent 60%);
  color: var(--text-ink);
  padding: clamp(90px, 12vh, 130px) 0 clamp(70px, 10vh, 100px);
  overflow: hidden;
}
.section-explore * { color: inherit; }
/* seigaiha (青海波) wave divider top */
.section-explore::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'><g fill='none' stroke='%23a52a1d' stroke-width='1' opacity='0.85'><path d='M0,28 a20,20 0 0 1 40,0'/><path d='M-20,28 a20,20 0 0 1 40,0'/><path d='M20,28 a20,20 0 0 1 40,0'/><path d='M0,18 a14,14 0 0 1 28,0' transform='translate(-14,0)'/><path d='M0,18 a14,14 0 0 1 28,0' transform='translate(6,0)'/><path d='M0,18 a14,14 0 0 1 28,0' transform='translate(26,0)'/><path d='M0,8  a8,8  0 0 1 16,0' transform='translate(-8,0)'/><path d='M0,8  a8,8  0 0 1 16,0' transform='translate(12,0)'/><path d='M0,8  a8,8  0 0 1 16,0' transform='translate(32,0)'/></g></svg>");
  background-size: 40px 28px;
  background-repeat: repeat-x;
  background-color: var(--ink-2);
  border-bottom: 1px solid var(--vermillion-3);
}
/* faint paper grain on the section */
.section-explore::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4   0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .25; mix-blend-mode: multiply;
}

.explore-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px;
  color: var(--vermillion-2);
  letter-spacing: 0.36em;
  margin-bottom: 16px;
}
.explore-eyebrow::before {
  content: '探';
  font-family: var(--cjk);
  font-variant-caps: normal;
  letter-spacing: 0;
  font-size: 16px;
  color: var(--vermillion-2);
}
.explore-eyebrow::after {
  content: '— 全土の味';
  font-family: var(--cjk);
  font-variant-caps: normal;
  letter-spacing: .05em;
  color: var(--vermillion-3);
  font-size: 13px;
}
.explore-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  color: var(--text-ink);
  margin-bottom: clamp(36px, 5vw, 56px);
  letter-spacing: -0.025em;
  max-width: 18ch;
  position: relative;
}
.explore-heading::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 22px;
  background:
    linear-gradient(90deg,
      var(--vermillion) 0 16px,
      transparent 16px 24px,
      var(--gold) 24px 36px,
      transparent 36px 44px,
      var(--vermillion-3) 44px 64px);
}

/* ---------- cuisine chips (menu tickets) ------------------------------- */
.cuisine-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; z-index: 2; }
@media (max-width: 1000px) { .cuisine-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .cuisine-grid { grid-template-columns: repeat(3, 1fr); } }

.cuisine-chip {
  position: relative;
  background: #fbf3df;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(120,90,40,.04) 100%);
  border: 1px solid var(--paper-edge);
  padding: 18px 12px 16px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.cuisine-chip::before {
  /* top vermillion strip with two perforation dots */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--vermillion);
  background-image:
    radial-gradient(circle at 22% 50%, rgba(0,0,0,.4) 0 2px, transparent 2.2px),
    radial-gradient(circle at 78% 50%, rgba(0,0,0,.4) 0 2px, transparent 2.2px);
}
.cuisine-chip::after {
  /* bottom dashed perforation */
  content: '';
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--paper-edge) 0 4px, transparent 4px 8px);
  opacity: .8;
}
.cuisine-chip:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  border-color: var(--vermillion-2);
  box-shadow: 0 14px 28px rgba(60, 30, 12, .22);
}
.cuisine-chip .chip-icon { font-size: 36px; line-height: 1; display: block; margin-top: 8px; }
.cuisine-chip .chip-name {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: 15px; font-weight: 500;
  color: var(--text-ink);
  letter-spacing: -0.005em;
}
.cuisine-chip .chip-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--vermillion-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 4px;
}

/* ---------- featured / regions sections ------------------------------- */
.section-regions { padding: clamp(70px, 9vh, 110px) 0 clamp(60px, 8vh, 90px); position: relative; }
.section-regions::before {
  /* large CJK watermark (食) on dark */
  content: '食';
  font-family: var(--cjk);
  position: absolute;
  left: -3vw; top: -10px;
  font-size: clamp(220px, 30vw, 380px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}
.section-regions > * { position: relative; z-index: 1; }

.section-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  color: var(--text);
  letter-spacing: -0.022em;
  margin-bottom: clamp(28px, 3.6vw, 44px);
  display: flex; align-items: baseline; gap: 18px;
  position: relative;
}
.section-heading::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--vermillion);
  border-radius: 50%;
  display: inline-block;
  flex: none;
  align-self: center;
  box-shadow: 0 0 0 4px rgba(200, 57, 42, .15);
  margin-right: 4px;
}
.section-sub { font-family: var(--serif-2); font-size: 17px; color: var(--text-2); margin-top: 6px; font-style: italic; }

.region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .region-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- generic card (recipe / region) ----------------------------- */
.card {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.card::before {
  /* outer hairline gold rule (kintsugi seam) */
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(212, 168, 67, .08);
  pointer-events: none;
  transition: border-color .3s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--vermillion-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.card:hover::before { border-color: rgba(212, 168, 67, .25); }

.card .img-wrap {
  aspect-ratio: 4/3;
  background: var(--ink-2);
  overflow: hidden;
  position: relative;
}
.card .img-wrap::after {
  /* dark-bottom scrim */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13, 6, 5, .82) 100%);
  pointer-events: none;
}
/* corner vermillion seal on every card */
.card .img-wrap::before {
  content: '味';
  font-family: var(--cjk);
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--paper);
  font-size: 16px;
  border-radius: 50%;
  box-shadow: var(--shadow-stamp);
  z-index: 2;
  transform: rotate(-4deg);
  padding-bottom: 2px;
  transition: transform .35s ease;
}
.card:hover .img-wrap::before { transform: rotate(-12deg) scale(1.06); }
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  filter: saturate(1.05) contrast(1.02);
}
.card:hover img { transform: scale(1.07); }

.card .body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex; flex-direction: column;
  position: relative;
}
.card .cuisine-tag {
  font-size: 10px; color: var(--vermillion);
  letter-spacing: 0.28em;
  margin-bottom: 10px;
}
.card h3 {
  font-family: var(--serif);
  font-size: 20px; font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  color: var(--text);
  letter-spacing: -0.012em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.card p {
  font-family: var(--serif-2);
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}
.card .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; gap: 12px; flex-wrap: wrap;
  position: relative;
}
.card .meta::before {
  /* tiny center diamond on the rule */
  content: '◆';
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  font-size: 7px; color: var(--gold);
  background: var(--ink-3); padding: 0 5px;
}
.card .meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- region/cuisine page hero ------------------------------------ */
.region-hero {
  position: relative;
  padding: clamp(70px, 10vh, 120px) 0 clamp(40px, 6vh, 70px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* watermark CJK from data-cjk attribute (per-region) — fallback 亞 */
.region-hero::before {
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: -2vw; top: 50%;
  transform: translateY(-50%);
  font-size: clamp(220px, 32vw, 420px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .07;
  pointer-events: none;
}
.region-hero::after {
  /* bottom kintsugi rule with diamond */
  content: '';
  position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 200px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);
}
.region-hero .wrap { position: relative; z-index: 2; }
.region-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  color: var(--text);
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.region-hero p {
  font-family: var(--serif-2);
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-2);
  max-width: 64ch;
  line-height: 1.65;
  font-style: italic;
}
.region-hero p::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.4em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em -0.1em -0.02em;
  color: var(--vermillion);
  font-weight: 500;
}

/* breadcrumbs */
.crumbs {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.24em;
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  background: rgba(255, 245, 220, .03);
}
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--vermillion); }

/* ---------- recipe page ------------------------------------------------- */
.recipe-hero {
  padding: 64px 0 36px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  position: relative;
}
.recipe-hero::before {
  /* watermark 食 */
  content: '食';
  font-family: var(--cjk);
  position: absolute;
  left: -8vw; top: -6vh;
  font-size: clamp(260px, 36vw, 480px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}
.recipe-hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) { .recipe-hero { grid-template-columns: 1fr; padding-top: 40px; } }

.recipe-hero .meta-stack { display: flex; flex-direction: column; gap: 22px; }
.recipe-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  color: var(--text);
  letter-spacing: -0.028em;
  line-height: 0.96;
  text-wrap: balance;
}
.recipe-hero .name-native {
  font-family: var(--cjk);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--gold);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  position: relative;
  padding-left: 22px;
}
.recipe-hero .name-native::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 12px; height: 1px;
  background: var(--gold);
}
.recipe-hero .desc {
  font-family: var(--serif-2);
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 56ch;
  font-style: italic;
}
.recipe-hero .desc::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6em;
  float: left;
  line-height: 0.82;
  margin: 0.16em 0.12em -0.06em -0.04em;
  color: var(--vermillion);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ledger of quick stats — kintsugi rules */
.recipe-hero .quick {
  display: flex; gap: 0;
  padding: 24px 0;
  border-top: 1px solid var(--gold-glaze);
  border-bottom: 1px solid var(--gold-glaze);
  flex-wrap: wrap;
  position: relative;
}
.recipe-hero .quick::before, .recipe-hero .quick::after {
  /* diamond beads at the rule ends */
  content: '◆'; color: var(--gold);
  position: absolute; left: -2px; font-size: 10px;
}
.recipe-hero .quick::before { top: -7px; }
.recipe-hero .quick::after  { bottom: -7px; }
.recipe-hero .quick .stat {
  flex: 1; min-width: 100px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 14px;
}
.recipe-hero .quick .stat + .stat {
  border-left: 1px dashed var(--line-2);
}
.recipe-hero .quick .stat .lbl {
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.26em;
}
.recipe-hero .quick .stat .val {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 80;
  color: var(--gold);
  letter-spacing: -0.02em;
}

/* recipe hero image — double-frame */
.recipe-hero .img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  border: 1px solid var(--line-2);
  padding: 8px;
  box-shadow: var(--shadow-deep);
  background: var(--ink-3);
}
.recipe-hero .img-wrap::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(212, 168, 67, .25);
  pointer-events: none;
}
/* big seal stamp overlay on the image */
.recipe-hero .img-wrap::before {
  content: '味';
  font-family: var(--cjk);
  position: absolute;
  top: -16px; right: -16px;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--paper);
  font-size: 36px;
  border-radius: 50%;
  box-shadow: var(--shadow-stamp), 0 0 0 4px var(--ink-2), 0 0 0 5px var(--vermillion-3);
  transform: rotate(-8deg);
  padding-bottom: 4px;
  z-index: 4;
}
.recipe-hero .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 10px;
  letter-spacing: 0.20em;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--text-3);
  background: rgba(255, 245, 220, .03);
  transition: border-color .25s, color .25s, background .25s;
  position: relative;
}
.tag:first-child::before {
  content: '#';
  margin-right: 4px;
  color: var(--vermillion);
  font-variant-caps: normal;
}
.tag:hover { border-color: var(--vermillion); color: var(--vermillion); background: var(--vermillion-glaze); }

/* ---------- recipe body (ingredients + steps) -------------------------- */
.recipe-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.7fr;
  gap: clamp(40px, 5vw, 90px);
  padding: clamp(50px, 8vh, 90px) 0 60px;
  position: relative;
}
@media (max-width: 820px) { .recipe-body { grid-template-columns: 1fr; gap: 44px; } }

.ingredients { }
@media (min-width: 821px) { .ingredients { position: sticky; top: 100px; align-self: start; } }
.ingredients ul { list-style: none; }
.ingredients li {
  padding: 14px 0;
  border-bottom: 1px dotted var(--line-2);
  display: flex; justify-content: space-between; gap: 14px;
  align-items: baseline;
  font-family: var(--serif-2);
  font-size: 16px;
  color: var(--text);
}
.ingredients li:last-child { border-bottom: none; }
.ingredients li::marker { content: ''; }
.ingredients .ing-name {
  flex: 1;
  color: var(--text);
  font-style: normal;
}
.ingredients .ing-note {
  display: block;
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
}
.ingredients .qty {
  color: var(--vermillion);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* section title (for ingredients/method headings) */
.section-title {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: var(--gold);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.section-title::before {
  content: '◉';
  font-size: 9px;
  color: var(--vermillion);
  letter-spacing: 0;
}
.section-title::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-glaze), transparent);
}

/* steps — vermillion ink-stamp counters */
.steps ol { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 24px 0 26px 80px;
  position: relative;
  border-bottom: 1px dotted var(--line-2);
  font-family: var(--serif-2);
  font-size: 17px;
  line-height: 1.78;
  color: var(--text);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 22px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  box-shadow: var(--shadow-stamp), inset 0 0 0 1px rgba(245, 232, 210, .4);
  transform: rotate(-3deg);
}
.steps li:nth-child(2n)::before  { transform: rotate(2deg); }
.steps li:nth-child(3n)::before  { transform: rotate(-5deg); }
.steps li:nth-child(4n)::before  { background: var(--vermillion-2); }

/* ---------- cultural note (washi scroll) ------------------------------- */
.cultural-note {
  position: relative;
  background: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(120, 80, 30, .03), rgba(120, 80, 30, .07)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3   0 0 0 0 0.22  0 0 0 0 0.10  0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply;
  color: var(--text-ink);
  padding: 56px 60px 50px;
  margin: 60px 0;
  border-radius: 0;
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-soft);
}
.cultural-note::before {
  /* big handstamped 文 seal at top-right */
  content: '文';
  font-family: var(--cjk);
  position: absolute;
  top: -20px; right: 32px;
  width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--paper);
  font-size: 38px;
  border-radius: 8%;
  box-shadow: var(--shadow-stamp);
  transform: rotate(-6deg);
  padding-bottom: 4px;
}
.cultural-note::after {
  /* corner ornament — double rule and bracket */
  content: '';
  position: absolute; left: 18px; top: 18px;
  width: 28px; height: 28px;
  border-top: 1px solid var(--vermillion-2);
  border-left: 1px solid var(--vermillion-2);
}
.cultural-note .lbl {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 12px;
  letter-spacing: 0.36em;
  color: var(--vermillion-2);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cultural-note .lbl::before {
  content: '故';
  font-family: var(--cjk);
  font-variant-caps: normal;
  font-size: 16px;
  letter-spacing: 0;
}
.cultural-note p {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--text-ink);
  line-height: 1.72;
  max-width: 64ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.cultural-note p::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6em;
  float: left;
  line-height: 0.82;
  margin: 0.16em 0.12em -0.05em -0.04em;
  color: var(--vermillion);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ---------- country pills / cuisine index ------------------------------ */
.country-pill {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
  overflow: hidden;
}
.country-pill::before {
  /* top vermillion bar */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vermillion-3), var(--vermillion), var(--vermillion-3));
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.country-pill::after {
  /* corner CJK watermark */
  content: '味';
  font-family: var(--cjk);
  position: absolute;
  bottom: -28px; right: -10px;
  font-size: 130px;
  color: var(--vermillion);
  opacity: .04;
  pointer-events: none;
  line-height: 1;
}
.country-pill:hover {
  transform: translateY(-4px);
  border-color: var(--vermillion-2);
  box-shadow: 0 18px 38px rgba(0,0,0,.5);
}
.country-pill:hover::before { transform: scaleX(1); }
.country-pill:hover::after  { opacity: .12; }
.country-pill .flag {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.country-pill h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 90;
  color: var(--text);
  letter-spacing: -0.012em;
}
.country-pill .blurb {
  font-family: var(--serif-2);
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  font-style: italic;
}
.country-pill .count {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--vermillion);
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dotted var(--line-2);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.country-pill .count::before {
  content: '◉'; color: var(--vermillion); font-size: 8px; letter-spacing: 0;
}

.cuisine-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.cuisine-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--serif-2);
  font-size: 14px; font-style: italic;
  color: var(--text-2);
  background: rgba(255, 245, 220, .03);
  transition: border-color .25s, color .25s, background .25s;
}
.cuisine-pill:hover { border-color: var(--vermillion); color: var(--vermillion); background: var(--vermillion-glaze); }
.cuisine-pill .flag { font-size: 16px; }

/* ---------- footer ------------------------------------------------------ */
.site-foot {
  position: relative;
  padding: 90px 0 44px;
  margin-top: 90px;
  background: var(--ink);
  border-top: 1px solid var(--vermillion-3);
}
/* seigaiha wave divider at top of footer */
.site-foot::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'><g fill='none' stroke='%23a52a1d' stroke-width='1' opacity='0.85' transform='translate(0,24) scale(1,-1)'><path d='M0,24 a20,20 0 0 1 40,0'/><path d='M-20,24 a20,20 0 0 1 40,0'/><path d='M20,24 a20,20 0 0 1 40,0'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(-14,0)'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(6,0)'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(26,0)'/></g></svg>");
  background-repeat: repeat-x;
  transform: translateY(-100%);
  background-color: transparent;
}
/* center medallion: 食譜 stamp */
.site-foot::after {
  content: '食譜';
  font-family: var(--cjk);
  position: absolute;
  top: -34px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermillion);
  color: var(--paper);
  font-size: 22px;
  letter-spacing: -0.02em;
  border-radius: 50%;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink), 0 0 0 6px var(--vermillion-3);
  z-index: 2;
}
.site-foot .row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: 24px;
}
@media (max-width: 720px) { .site-foot .row { grid-template-columns: 1fr 1fr; } }

.site-foot h4 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 12px;
  letter-spacing: 0.36em;
  color: var(--gold);
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
}
.site-foot h4::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 22px; height: 1px;
  background: var(--vermillion);
}
.site-foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-foot a { font-family: var(--serif-2); color: var(--text-2); font-size: 15px; }
.site-foot a:hover { color: var(--gold); }
.site-foot p {
  font-family: var(--serif-2);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
  max-width: 380px;
}
.site-foot .copy {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.site-foot .copy::after {
  content: '◯ 食譜 · 亞洲';
  font-family: var(--cjk);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: none;
}

/* ---------- grids ------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
.grid.g6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 960px) { .grid.g4 { grid-template-columns: repeat(2, 1fr); } .grid.g6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid.g3, .grid.g4, .grid.g6 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- ad slots ---------------------------------------------------- */
.ad-slot { margin: 56px auto; padding: 8px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.ad-inline { margin: 40px 0; }

/* ---------- utilities --------------------------------------------------- */
.divider {
  height: 32px;
  margin: 56px auto;
  border: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='32' viewBox='0 0 200 32'><g fill='none' stroke='%23d4a843' stroke-width='1' opacity='0.7'><line x1='0' y1='16' x2='80' y2='16'/><line x1='120' y1='16' x2='200' y2='16'/></g><g fill='%23c8392a'><circle cx='100' cy='16' r='4'/></g><g fill='none' stroke='%23c8392a' stroke-width='1' opacity='0.6'><circle cx='100' cy='16' r='9'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px 32px;
  max-width: 200px;
}

/* ---------- entrance animations ---------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes press-in {
  from { opacity: 0; transform: rotate(0deg) scale(0.6); }
  to   { opacity: 1; transform: rotate(-3deg) scale(1); }
}
.hero-eyebrow  { animation: rise .8s .05s both ease-out; }
.hero-heading  { animation: rise .9s .15s both ease-out; }
.hero-sub      { animation: rise .9s .30s both ease-out; }
.hero-btns     { animation: rise .9s .45s both ease-out; }
.stats-bar     { animation: rise .9s .60s both ease-out; }
.brand::before { animation: press-in 1.2s .8s both cubic-bezier(.2,1.4,.4,1); }

/* ---------- responsive tweaks ------------------------------------------ */
@media (max-width: 720px) {
  .nav { display: none; }
  .recipe-hero .quick .stat { min-width: 50%; }
  .recipe-hero .quick .stat + .stat { border-left: none; border-top: 1px dashed var(--line); }
  .cultural-note { padding: 40px 26px 32px; }
  .cultural-note::before { width: 60px; height: 60px; font-size: 30px; top: -16px; right: 16px; }
  .steps li { padding-left: 64px; }
  .steps li::before { width: 42px; height: 42px; font-size: 18px; top: 22px; }
  .recipe-hero .img-wrap::before { width: 60px; height: 60px; font-size: 28px; top: -12px; right: -12px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .site-foot::after { width: 56px; height: 56px; font-size: 18px; top: -28px; }
}

/* =========================================================================
   PAGE: /cuisines/  /categories/  /about/   (editorial spreads)
   ========================================================================= */

/* ---------- editorial hero (used by index pages) ---------------------- */
.editorial-hero {
  position: relative;
  padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 60px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.editorial-hero::before {
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: -3vw; top: 0;
  font-size: clamp(280px, 40vw, 540px);
  line-height: 0.85;
  color: var(--vermillion);
  opacity: .055;
  pointer-events: none;
}
.editorial-hero::after {
  /* asanoha lattice in the background */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'><g fill='none' stroke='%23d4a843' stroke-width='0.5'><polygon points='40,0 80,23 80,69 40,92 0,69 0,23'/><line x1='40' y1='0' x2='40' y2='92'/><line x1='0'  y1='23' x2='80' y2='69'/><line x1='80' y1='23' x2='0'  y2='69'/></g></svg>");
  background-size: 80px 138px;
  opacity: .06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.editorial-hero .wrap { position: relative; z-index: 2; }

.editorial-hero .lede {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(30px, 4vw, 80px);
  align-items: end;
}
@media (max-width: 820px) { .editorial-hero .lede { grid-template-columns: 1fr; } }

.editorial-hero h1 {
  font-family: var(--serif);
  font-size: clamp(46px, 7vw, 96px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 0.96;
  margin-bottom: 24px;
  text-wrap: balance;
}
.editorial-hero h1 .swash {
  display: block;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  color: var(--gold);
  font-size: 1.0em;
}
.editorial-hero .standfirst {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 56ch;
}
.editorial-hero .standfirst::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6em;
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.1em -0.06em -0.04em;
  color: var(--vermillion);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.editorial-hero .runner {
  font-family: var(--cjk);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--gold);
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
  align-self: stretch;
  display: flex; align-items: center;
  padding-left: 12px;
  border-left: 1px solid var(--gold-glaze);
  opacity: .8;
}
@media (max-width: 820px) { .editorial-hero .runner { display: none; } }

.editorial-hero .meta-strip {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
}
.editorial-hero .meta-strip span {
  display: inline-flex; align-items: center; gap: 8px;
}
.editorial-hero .meta-strip span::before {
  content: '◉';
  font-size: 7px;
  color: var(--vermillion);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- atlas / 3D globe section ----------------------------------- */
.atlas-section {
  position: relative;
  padding: clamp(60px, 8vh, 100px) 0 clamp(50px, 7vh, 80px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.atlas-section::before {
  /* faint vermillion radial wash behind the globe */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(200, 57, 42, .14), transparent 70%);
  pointer-events: none;
}
.atlas-section .wrap { position: relative; z-index: 2; margin-bottom: 28px; }

.atlas-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 14px;
}
.atlas-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--vermillion);
}
.atlas-eyebrow::after {
  content: '地圖';
  font-family: var(--cjk);
  font-variant-caps: normal;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--gold);
}
.atlas-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 12px;
  text-wrap: balance;
}
.atlas-heading .swash {
  display: block;
  font-style: italic;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.atlas-sub {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  max-width: 60ch;
  line-height: 1.6;
}

.atlas-stage {
  position: relative;
  height: clamp(500px, 70vh, 720px);
  margin: 0 auto;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, #1f0e0a 0%, #0e0605 70%);
  border-top: 1px solid var(--vermillion-3);
  border-bottom: 1px solid var(--vermillion-3);
  overflow: hidden;
  cursor: grab;
}
.atlas-stage:active { cursor: grabbing; }
/* corner brackets */
.atlas-stage::before, .atlas-stage::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 5;
}
.atlas-stage::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}
.atlas-stage::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}
#atlas-globe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
#atlas-globe canvas { display: block; }

/* static SVG preview shown immediately while the WebGL globe lazy-loads */
.atlas-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity .55s ease, transform .55s ease;
  transform: scale(1.02);
  animation: atlas-breathe 7s ease-in-out infinite;
}
.atlas-stage.mounted .atlas-preview { opacity: 0; transform: scale(1.06); }
@keyframes atlas-breathe { 50% { opacity: 0.85; transform: scale(1); } }

/* "Skip the atlas" pill in the eyebrow paragraph */
.atlas-sub .skip-link {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 12px 4px;
  border: 1px solid var(--line-2);
  font-family: var(--serif);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: var(--gold);
  transition: border-color .25s, color .25s, background .25s;
}
.atlas-sub .skip-link:hover { border-color: var(--gold); background: var(--gold-glaze); color: var(--gold); }

/* invisible scroll anchor — lets `Skip the atlas →` jump to the country list */
.anchor-target { display: block; height: 1px; margin-top: -120px; padding-top: 120px; }

.atlas-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .4s ease;
  background: linear-gradient(180deg, rgba(13, 6, 5, .0), rgba(13, 6, 5, .5));
  padding-bottom: 36px;
}
.atlas-fallback:hover { color: var(--gold); }
.atlas-fallback.hidden { opacity: 0; pointer-events: none; }
.atlas-fallback .seal-pulse {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--vermillion);
  box-shadow: 0 0 0 0 rgba(200, 57, 42, .8);
  animation: pulse-seal 1.6s ease-out infinite;
}
@keyframes pulse-seal {
  0%   { box-shadow: 0 0 0 0 rgba(200, 57, 42, .55); transform: scale(0.95); }
  70%  { box-shadow: 0 0 0 16px rgba(200, 57, 42, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(200, 57, 42, 0); transform: scale(0.95); }
}

.atlas-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -100%) translateY(-12px);
  background: rgba(13, 6, 5, .92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--vermillion);
  padding: 10px 16px 12px;
  min-width: 180px;
  box-shadow: 0 18px 36px rgba(0,0,0,.6);
  font-family: var(--serif-2);
  color: var(--text);
  transition: opacity .15s, transform .15s;
}
.atlas-tooltip[hidden] { display: none; }
.atlas-tooltip::after {
  /* downward seal-stamp marker */
  content: '';
  position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: rgba(13, 6, 5, .92);
  border-right: 1px solid var(--vermillion);
  border-bottom: 1px solid var(--vermillion);
}
.atlas-tooltip .tt-flag { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.atlas-tooltip .tt-name {
  font-family: var(--serif);
  font-size: 18px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 36, "SOFT" 80;
}
.atlas-tooltip .tt-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--vermillion);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px;
}
.atlas-tooltip .tt-cta {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--gold);
  margin-top: 6px;
}
.atlas-tooltip .tt-cta::after { content: ' →'; }

.atlas-legend {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 22px; align-items: center;
  z-index: 4;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  background: rgba(13, 6, 5, .65);
  backdrop-filter: blur(6px);
  padding: 8px 18px;
  border: 1px solid var(--line-2);
}
.atlas-legend .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.atlas-legend .dot-vermillion { background: var(--vermillion); box-shadow: 0 0 8px rgba(200, 57, 42, .6); }
.atlas-legend .dot-paper { background: var(--paper-3); }

.atlas-corner-marks {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
}
.atlas-corner-marks .lat-line {
  font-family: var(--cjk);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--vermillion);
}

/* "departing" curtain that drops over the stage on click */
.atlas-departing {
  position: absolute; inset: 0;
  z-index: 8;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at center, rgba(200, 57, 42, .35) 0%, rgba(13, 6, 5, .92) 70%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.atlas-departing.show { opacity: 1; pointer-events: all; }
.atlas-departing .seal-traveling {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cjk);
  font-size: 38px;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-stamp), 0 0 0 4px var(--ink-2), 0 0 0 5px var(--vermillion-3);
  animation: travel-spin 1.2s ease-in-out;
  margin-bottom: 18px;
}
@keyframes travel-spin {
  0%   { transform: rotate(0) scale(0.6); opacity: 0; }
  40%  { transform: rotate(-12deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
.atlas-departing .label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--text);
  font-variation-settings: "opsz" 72, "SOFT" 90;
  text-shadow: 0 4px 16px rgba(0,0,0,.7);
  letter-spacing: -0.012em;
}
.atlas-departing .label .destination {
  color: var(--gold);
  font-style: normal;
}
.atlas-departing .sub {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--vermillion);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .atlas-stage { height: 70vh; min-height: 480px; }
  .atlas-tooltip { min-width: 140px; padding: 8px 12px 10px; }
  .atlas-legend { font-size: 9px; gap: 14px; padding: 6px 14px; }
}

/* ---------- region spread (cuisines page) ----------------------------- */
.region-spread {
  position: relative;
  padding: clamp(70px, 9vh, 100px) 0;
}
.region-spread + .region-spread {
  border-top: 1px solid var(--line);
}
.region-spread + .region-spread::before {
  /* divider ornament between region spreads */
  content: '';
  position: absolute; left: 50%; top: -1px;
  transform: translate(-50%, -50%);
  width: 220px; height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='36' viewBox='0 0 220 36'><g fill='none' stroke='%23d4a843' stroke-width='0.8' opacity='0.7'><line x1='0' y1='18' x2='80' y2='18'/><line x1='140' y1='18' x2='220' y2='18'/></g><g fill='%23c8392a'><circle cx='110' cy='18' r='4.5'/></g><g fill='none' stroke='%23c8392a' stroke-width='1' opacity='0.55'><circle cx='110' cy='18' r='10'/><circle cx='110' cy='18' r='15'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--ink-2);
}

.region-spread .layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 920px) { .region-spread .layout { grid-template-columns: 1fr; } }

.region-mark {
  position: sticky; top: 100px;
}
@media (max-width: 920px) { .region-mark { position: static; } }
.region-mark .numeral {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 28px;
  color: var(--vermillion);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.region-mark .cjk-mega {
  font-family: var(--cjk);
  font-size: clamp(120px, 16vw, 200px);
  line-height: 0.9;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}
.region-mark .cjk-mega::after {
  /* a small vermillion seal at the corner of the big char */
  content: '';
  position: absolute;
  bottom: 8px; right: -14px;
  width: 14px; height: 14px;
  background: var(--vermillion);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ink-2), 0 0 0 4px var(--vermillion-3);
}
.region-mark h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 14px;
}
.region-mark h2 a { color: inherit; }
.region-mark h2 a:hover { color: var(--gold); }
.region-mark .blurb {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 32ch;
  margin-bottom: 18px;
}
.region-mark .stats-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
}
.region-mark .stats-line strong {
  color: var(--vermillion);
  font-weight: 500;
}
.region-mark .visit {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--gold);
}
.region-mark .visit::after { content: '→'; transition: transform .25s; }
.region-mark .visit:hover::after { transform: translateX(4px); }

/* country tile (cuisines page) — variant of country-pill, denser */
.country-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .country-tile-grid { grid-template-columns: 1fr; } }

.country-tile {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 18px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .3s, background .25s;
  overflow: hidden;
}
.country-tile::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vermillion);
  transform-origin: top;
  transform: scaleY(0.25);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.country-tile:hover {
  transform: translateX(4px);
  border-color: var(--vermillion-2);
  background: var(--ink-4);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.country-tile:hover::before { transform: scaleY(1); }
.country-tile .flag {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.country-tile .info { min-width: 0; }
.country-tile h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.country-tile .demonym {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
}
.country-tile .count-pill {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--vermillion);
  letter-spacing: 0.10em;
  padding: 5px 10px;
  border: 1px solid var(--vermillion-glaze);
  background: rgba(200, 57, 42, .06);
  border-radius: 0;
  white-space: nowrap;
}

/* ---------- categories page ------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .category-grid { grid-template-columns: 1fr; } }

.category-card {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 260px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.category-card::before {
  /* watermark CJK character per category (set via data-cjk) */
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: -10px; bottom: -50px;
  font-size: 220px;
  line-height: 1;
  color: var(--vermillion);
  opacity: .05;
  pointer-events: none;
  transition: opacity .3s, transform .35s;
}
.category-card::after {
  /* corner bracket ornament */
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  border-top: 1px solid var(--gold-glaze);
  border-right: 1px solid var(--gold-glaze);
}
.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--vermillion-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.category-card:hover::before {
  opacity: .14;
  transform: rotate(4deg);
}

.category-card .seal {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  box-shadow: var(--shadow-stamp), inset 0 0 0 1px rgba(245, 232, 210, .25);
  margin-bottom: 12px;
  transform: rotate(-4deg);
  transition: transform .35s ease;
}
.category-card:hover .seal { transform: rotate(-12deg) scale(1.04); }

.category-card .cat-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 90;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}
.category-card .cat-cjk {
  font-family: var(--cjk);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-top: -2px;
}
.category-card .cat-blurb {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  flex: 1;
}
.category-card .cat-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--vermillion);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px dotted var(--line-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.category-card .cat-count::after {
  content: '→';
  font-size: 12px;
  color: var(--gold);
  margin-left: auto;
  transition: transform .25s;
}
.category-card:hover .cat-count::after { transform: translateX(4px); }

/* ---------- categories: bottom philosophical strip --------------------- */
.philosophy-strip {
  margin-top: 90px;
  padding: 70px 0;
  background: var(--paper);
  color: var(--text-ink);
  position: relative;
  overflow: hidden;
}
.philosophy-strip::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'><g fill='none' stroke='%23a52a1d' stroke-width='1' opacity='0.85'><path d='M0,24 a20,20 0 0 1 40,0'/><path d='M-20,24 a20,20 0 0 1 40,0'/><path d='M20,24 a20,20 0 0 1 40,0'/></g></svg>");
  background-repeat: repeat-x;
  background-color: var(--ink-2);
  border-bottom: 1px solid var(--vermillion-3);
}
.philosophy-strip::after {
  /* paper grain */
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4   0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .25; mix-blend-mode: multiply;
}
.philosophy-strip .wrap { position: relative; z-index: 2; }
.philosophy-strip .quote {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-ink);
  text-wrap: balance;
  max-width: 22ch;
  letter-spacing: -0.018em;
  position: relative;
  padding-left: 32px;
}
.philosophy-strip .quote::before {
  content: '「';
  font-family: var(--cjk);
  position: absolute;
  left: -8px; top: -10px;
  font-size: 56px;
  color: var(--vermillion);
  font-style: normal;
  line-height: 1;
}
.philosophy-strip cite {
  display: block;
  margin-top: 22px;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-style: normal;
  letter-spacing: 0.34em;
  font-size: 13px;
  color: var(--vermillion-2);
}
.philosophy-strip cite::before { content: '— '; }

/* ---------- about page ------------------------------------------------- */
.about-manifesto {
  padding: clamp(60px, 9vh, 110px) 0 clamp(40px, 6vh, 70px);
  position: relative;
  border-bottom: 1px solid var(--line);
}
.about-manifesto p {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.32;
  color: var(--text);
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 24ch;
  position: relative;
  padding-left: 40px;
}
.about-manifesto p::before {
  content: '「';
  font-family: var(--cjk);
  position: absolute;
  left: -10px; top: -16px;
  font-size: 70px;
  color: var(--vermillion);
  font-style: normal;
  line-height: 1;
}
.about-manifesto p::after {
  content: '」';
  font-family: var(--cjk);
  font-size: 36px;
  color: var(--vermillion);
  font-style: normal;
  margin-left: 6px;
  vertical-align: -10px;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(50px, 7vh, 80px) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) { .principles-grid { grid-template-columns: 1fr; gap: 32px; } }

.principle {
  position: relative;
  padding-top: 36px;
}
.principle::before {
  content: attr(data-num);
  position: absolute; left: 0; top: 0;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 28px;
  color: var(--vermillion);
  letter-spacing: 0.04em;
}
.principle::after {
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: 0; top: -10px;
  font-size: 80px;
  color: var(--vermillion);
  opacity: .08;
  pointer-events: none;
  line-height: 1;
}
.principle h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 90;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vermillion-glaze);
  text-wrap: balance;
}
.principle p {
  font-family: var(--serif-2);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}

.about-stats {
  padding: clamp(60px, 8vh, 90px) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 820px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }
.about-stats .item {
  position: relative;
  text-align: center;
  padding: 0 18px;
  border-right: 1px dashed var(--line-2);
}
.about-stats .item:last-child { border-right: none; }
.about-stats .item:nth-child(3) ~ .item { border-top: 1px dashed var(--line-2); margin-top: 32px; padding-top: 32px; }
.about-stats .num {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-stats .num small {
  font-size: 0.4em; color: var(--vermillion); margin-left: 6px;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.about-stats .lbl {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--text-3);
  margin-top: 10px;
}
.about-stats .cjk {
  font-family: var(--cjk);
  font-size: 22px;
  color: var(--vermillion);
  margin-top: 12px;
  display: block;
  opacity: .8;
}

.about-prose {
  padding: clamp(60px, 8vh, 100px) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(36px, 5vw, 80px);
}
@media (max-width: 820px) { .about-prose { grid-template-columns: 1fr; gap: 28px; } }
.about-prose .col-eyebrow {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  font-size: 13px;
  letter-spacing: 0.36em;
  color: var(--vermillion);
  position: sticky; top: 100px;
  align-self: start;
}
@media (max-width: 820px) { .about-prose .col-eyebrow { position: static; } }
.about-prose .col-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--vermillion);
  margin-right: 12px;
  vertical-align: 4px;
}
.about-prose .col-body p {
  font-family: var(--serif-2);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.78;
  color: var(--text-2);
  margin-bottom: 1.2em;
  max-width: 64ch;
}
.about-prose .col-body p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 4.4em;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.12em -0.1em -0.04em;
  color: var(--vermillion);
  font-weight: 500;
}
.about-prose .col-body em {
  color: var(--gold);
  font-style: italic;
}
.about-prose .col-body strong {
  font-weight: 500;
  color: var(--text);
}

.about-signoff {
  padding: clamp(70px, 10vh, 120px) 0;
  text-align: center;
  position: relative;
}
.about-signoff::before {
  /* triple-rule with diamond */
  content: '';
  display: block;
  width: 120px; height: 24px;
  margin: 0 auto 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><g fill='none' stroke='%23d4a843' stroke-width='0.8' opacity='0.7'><line x1='0' y1='12' x2='42' y2='12'/><line x1='78' y1='12' x2='120' y2='12'/></g><g fill='%23c8392a'><circle cx='60' cy='12' r='3.5'/></g><g fill='none' stroke='%23c8392a' stroke-width='0.8' opacity='0.6'><circle cx='60' cy='12' r='8'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.about-signoff .seal-large {
  display: inline-flex; align-items: center; justify-content: center;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  font-family: var(--cjk);
  font-size: 56px;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink-2), 0 0 0 6px var(--vermillion-3);
  transform: rotate(-4deg);
  margin-bottom: 24px;
  padding-bottom: 4px;
}
.about-signoff h2 {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.about-signoff .signature {
  font-family: var(--cjk);
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.3em;
}
.about-signoff .credit {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* =========================================================================
   PAGE TRANSITIONS, READING PROGRESS, COMMAND PALETTE, SCROLL REVEAL,
   AMBIENT PARTICLES, RECIPE INTERACTIVITY, MASTHEAD, EDITORIAL 404, PRINT
   ========================================================================= */

/* ---------- progress bar (top, hairline, gold→vermillion gradient) ------ */
.progress-bar {
  position: fixed;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--vermillion));
  transform: scaleX(0); transform-origin: 0 0;
  z-index: 1001;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* ---------- header scrolled state -------------------------------------- */
.site-head { transition: padding .3s ease, background .3s ease, box-shadow .3s ease; }
.site-head.scrolled {
  padding: 10px 0;
  background: rgba(10, 5, 4, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---------- page transition curtain ------------------------------------ */
.page-curtain {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: grid; place-items: center;
  visibility: hidden;
}
.page-curtain .curtain-wash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--vermillion) 0%, var(--vermillion-2) 35%, var(--ink-2) 80%);
  transform: scale(0); transform-origin: center;
  transition: transform .6s cubic-bezier(.7,.0,.2,1);
}
.page-curtain .curtain-seal {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  font-family: var(--cjk);
  font-size: 56px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink-2), 0 0 0 6px var(--vermillion-3);
  transform: scale(0) rotate(0deg);
  opacity: 0;
  transition: transform .55s cubic-bezier(.6,1.6,.4,1), opacity .25s ease;
  padding-bottom: 4px;
}

/* state: leaving (page exit, heading away) */
html.leaving .page-curtain { visibility: visible; }
html.leaving .page-curtain .curtain-wash { transform: scale(2.4); }
html.leaving .page-curtain .curtain-seal { transform: scale(1) rotate(-8deg); opacity: 1; }
html.leaving { overflow: hidden; }

/* state: booting (page enter, just landed) */
html.booting .page-curtain { visibility: visible; transition: visibility 0s .55s; }
html.booting .page-curtain .curtain-wash { transform: scale(2.4); }
html.booting .page-curtain .curtain-seal { transform: scale(1) rotate(-4deg); opacity: 1; }
html:not(.booting) .page-curtain .curtain-wash { transform: scale(0); transition: transform .65s cubic-bezier(.5,0,.2,1) .05s; }
html:not(.booting) .page-curtain .curtain-seal { transform: scale(0) rotate(0); opacity: 0; transition: transform .35s cubic-bezier(.5,0,.5,1), opacity .25s; }

/* gentle entry animation for the page itself */
html.booting body { opacity: 0; }
html:not(.booting) body { opacity: 1; transition: opacity .5s ease .15s; }

/* ---------- scroll-reveal animations ------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
  will-change: transform, opacity;
}
.reveal-in { opacity: 1; transform: translateY(0); }

/* ---------- ambient kintsugi-dust particles (hero / atlas) -------------- */
.hero, .editorial-hero, .atlas-section {
  position: relative;
}
.hero::before, .editorial-hero::before, .atlas-section::before {
  /* keep existing watermarks/wash; add particles in a separate layer */
}
.hero, .editorial-hero {
  /* drifting specks via radial-gradient pseudo */
}
.hero::marker, .editorial-hero::marker { content: ''; }

.kintsugi-dust {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.kintsugi-dust span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 168, 67, .6);
  opacity: 0;
  animation: drift-dust 14s linear infinite;
}
.kintsugi-dust span:nth-child(1)  { left: 8%;  top: 30%; animation-delay: 0s;   width: 3px; height: 3px; }
.kintsugi-dust span:nth-child(2)  { left: 18%; top: 70%; animation-delay: 1.5s; width: 5px; height: 5px; background: var(--vermillion); box-shadow: 0 0 10px rgba(200,57,42,.7); }
.kintsugi-dust span:nth-child(3)  { left: 32%; top: 18%; animation-delay: 3s;   width: 2px; height: 2px; }
.kintsugi-dust span:nth-child(4)  { left: 46%; top: 58%; animation-delay: 4.5s; width: 4px; height: 4px; }
.kintsugi-dust span:nth-child(5)  { left: 62%; top: 24%; animation-delay: 6s;   width: 3px; height: 3px; }
.kintsugi-dust span:nth-child(6)  { left: 74%; top: 76%; animation-delay: 7.5s; width: 5px; height: 5px; background: var(--vermillion); box-shadow: 0 0 10px rgba(200,57,42,.55); }
.kintsugi-dust span:nth-child(7)  { left: 86%; top: 36%; animation-delay: 9s;   width: 3px; height: 3px; }
.kintsugi-dust span:nth-child(8)  { left: 92%; top: 64%; animation-delay: 10.5s;width: 4px; height: 4px; }
@keyframes drift-dust {
  0%   { opacity: 0; transform: translateY(40px) translateX(0); }
  10%  { opacity: 1; }
  50%  { transform: translateY(-30px) translateX(10px); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) translateX(-6px); }
}

/* ---------- command palette --------------------------------------------- */
.cmdk {
  position: fixed; inset: 0;
  z-index: 9500;
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.cmdk.open { display: flex; }
body.cmdk-locked { overflow: hidden; }
.cmdk-back {
  position: absolute; inset: 0;
  background: rgba(8, 4, 3, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: cmdk-fade .25s ease both;
}
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-modal {
  position: relative;
  width: min(640px, 92vw);
  max-height: 76vh;
  background: var(--ink-3);
  border: 1px solid var(--vermillion);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(212, 168, 67, .14) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cmdk-pop .35s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes cmdk-pop { from { transform: translateY(-12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.cmdk-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cmdk-head::after {
  /* triple vermillion dots beneath the head */
  content: '';
  position: absolute; left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 30px; height: 4px;
  background:
    radial-gradient(circle at 14% 50%, var(--vermillion) 0 1.6px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--gold) 0 1.4px, transparent 2px),
    radial-gradient(circle at 86% 50%, var(--paper) 0 1.4px, transparent 2px);
}
.cmdk-eyebrow {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--vermillion);
  white-space: nowrap;
}
.cmdk-input {
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: 19px;
  color: var(--text);
  padding: 4px 0;
  outline: none;
  width: 100%;
}
.cmdk-input::placeholder { color: var(--text-3); font-style: italic; }
.cmdk-esc, .cmdk-foot kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  padding: 3px 8px 3px;
  background: rgba(255, 245, 220, .03);
}

.cmdk-list {
  list-style: none;
  margin: 0; padding: 6px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 100px;
}
.cmdk-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.cmdk-list li.cur {
  background: linear-gradient(90deg, rgba(200, 57, 42, .14), transparent 70%);
  border-left-color: var(--vermillion);
}
.cmdk-icon {
  font-size: 20px; line-height: 1; text-align: center;
}
.cmdk-label { min-width: 0; }
.cmdk-title {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 24, "SOFT" 80;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-list li.cur .cmdk-title { color: var(--gold); }
.cmdk-sub {
  display: block;
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermillion);
  padding: 3px 8px;
  border: 1px solid var(--vermillion-glaze);
  background: rgba(200, 57, 42, .04);
}
.cmdk-empty {
  display: block !important;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  padding: 28px 16px;
}
.cmdk-foot {
  border-top: 1px solid var(--line);
  padding: 10px 18px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  align-items: center;
}
.cmdk-foot kbd { padding: 2px 6px; margin-right: 4px; }
.cmdk-hint { margin-left: auto; color: var(--gold); }

/* command-palette trigger button (in nav) */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 245, 220, .03);
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.cmdk-trigger:hover { border-color: var(--vermillion); color: var(--vermillion); background: var(--vermillion-glaze); }
.cmdk-trigger .ico { color: var(--vermillion); font-size: 14px; }
.cmdk-trigger kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  border: 1px solid var(--line-2);
  padding: 2px 6px;
  color: var(--text-3);
  background: rgba(0,0,0,.18);
  margin-left: 4px;
}
@media (max-width: 720px) { .cmdk-trigger .lbl, .cmdk-trigger kbd { display: none; } }

/* ---------- recipe page: TOC, scaler, mise-en-place, timers ------------ */
.recipe-toolbar {
  position: sticky;
  top: calc(56px + 3px + 6px);
  z-index: 50;
  margin: 32px 0 8px;
  padding: 14px 18px;
  background: rgba(10, 5, 4, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--vermillion);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
@media (max-width: 720px) { .recipe-toolbar { grid-template-columns: 1fr; gap: 10px; } }

.recipe-toc {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.recipe-toc a {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 12px;
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
.recipe-toc a.cur, .recipe-toc a:hover {
  color: var(--gold);
  border-color: var(--gold-glaze);
  background: rgba(212, 168, 67, .06);
}
.recipe-toc a .num {
  font-family: var(--mono);
  font-style: italic;
  letter-spacing: 0;
  margin-right: 6px;
  color: var(--vermillion);
}

.recipe-actions {
  display: flex; gap: 8px; align-items: center;
}
.recipe-actions button {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 11px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.recipe-actions button:hover { color: var(--gold); border-color: var(--gold-glaze); }

/* servings scaler */
.servings-scaler {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  background: rgba(255, 245, 220, .03);
}
.servings-scaler .scaler-eyebrow {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 11px;
  color: var(--vermillion);
}
.servings-scaler .step {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,.18);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 18px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.servings-scaler .step:hover { border-color: var(--vermillion); color: var(--vermillion); background: var(--vermillion-glaze); }
.servings-scaler .scaler-value {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 90;
  font-size: 30px;
  font-weight: 500;
  color: var(--gold);
  min-width: 36px;
  text-align: center;
  letter-spacing: -0.02em;
}
.servings-scaler .scaler-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-left: auto;
}
.servings-scaler.scaled .scaler-note { color: var(--vermillion); }
.servings-scaler [data-reset] {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 10px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .2s;
}
.servings-scaler.scaled [data-reset] { color: var(--gold); border-color: var(--gold-glaze); }
.servings-scaler [data-reset]:hover { color: var(--vermillion); }

/* ingredient checked state */
.ingredients li {
  cursor: pointer;
  transition: opacity .25s ease, color .25s ease;
  position: relative;
}
.ingredients li::before {
  content: '';
  position: absolute; left: -22px; top: 22px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background .25s, border-color .25s, transform .25s;
}
.ingredients li.checked::before {
  background: var(--vermillion);
  border-color: var(--vermillion);
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(200, 57, 42, .15);
}
.ingredients li.checked .ing-name { text-decoration: line-through; text-decoration-color: var(--vermillion); }
.ingredients li.checked { opacity: .55; }
.ingredients li:focus-visible { outline-offset: 6px; }

.mise-progress {
  margin-top: 18px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  --mise-pct: 0;
  position: relative;
}
.mise-progress::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--vermillion) 0%, var(--vermillion) calc(var(--mise-pct, 0) * 100%), var(--line) calc(var(--mise-pct, 0) * 100%), var(--line) 100%);
  transition: background .35s ease;
}
.mise-progress .mise-cjk { font-family: var(--cjk); color: var(--gold); font-size: 14px; letter-spacing: .02em; text-transform: none; }
.mise-progress .mise-count { color: var(--vermillion); font-weight: 500; }

/* step timers */
.step-timers {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.timer-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--vermillion);
  color: var(--vermillion);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.timer-chip:hover { background: var(--vermillion); color: var(--paper); }
.timer-chip .t-icon { font-size: 13px; }
.timer-chip .t-action {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.20em;
  font-size: 10px;
  padding-left: 8px; margin-left: 4px;
  border-left: 1px solid currentColor;
}
.timer-chip.running { background: var(--vermillion); color: var(--paper); animation: timer-pulse 1s ease-in-out infinite; }
.timer-chip.done { background: var(--gold); border-color: var(--gold); color: var(--ink); animation: none; }
@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 57, 42, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 57, 42, 0); }
}

/* image lazy fade-in */
img.img-loaded { animation: img-rise .8s ease both; }
@keyframes img-rise { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- masthead footer (replaces site-foot) ----------------------- */
.masthead {
  position: relative;
  margin-top: 110px;
  padding: 110px 0 50px;
  background: var(--ink);
  color: var(--text);
  border-top: 1px solid var(--vermillion-3);
}
.masthead::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'><g fill='none' stroke='%23a52a1d' stroke-width='1' opacity='0.85' transform='translate(0,24) scale(1,-1)'><path d='M0,24 a20,20 0 0 1 40,0'/><path d='M-20,24 a20,20 0 0 1 40,0'/><path d='M20,24 a20,20 0 0 1 40,0'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(-14,0)'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(6,0)'/><path d='M0,16 a14,14 0 0 1 28,0' transform='translate(26,0)'/></g></svg>");
  background-repeat: repeat-x;
  transform: translateY(-100%);
}
.masthead .seal-medallion {
  position: absolute;
  top: -36px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 24px;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink), 0 0 0 6px var(--vermillion-3);
  z-index: 2;
  padding-bottom: 4px;
}

.masthead-banner {
  text-align: center;
  margin-bottom: 60px;
}
.masthead-banner .vol {
  font-family: var(--serif);
  font-style: italic;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 14px;
}
.masthead-banner h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 72px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 6px;
}
.masthead-banner h2 .ampersand {
  font-style: italic;
  color: var(--gold);
  font-size: 1.1em;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.masthead-banner .tagline {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-2);
  max-width: 48ch;
  margin: 8px auto 0;
}

.masthead-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .masthead-cols { grid-template-columns: 1fr 1fr; } }
.masthead-cols h4 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 16px;
  padding-bottom: 8px;
  position: relative;
}
.masthead-cols h4::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 22px; height: 1px;
  background: var(--vermillion);
}
.masthead-cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.masthead-cols a, .masthead-cols li {
  font-family: var(--serif-2);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}
.masthead-cols a:hover { color: var(--gold); }
.masthead-cols .role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-3);
  display: block;
}

.masthead-strip {
  margin-top: 50px;
  padding: 22px 0;
  border-top: 1px dashed var(--line-2);
  border-bottom: 1px dashed var(--line-2);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
}
.masthead-strip .center {
  font-family: var(--cjk);
  font-size: 18px;
  color: var(--vermillion);
  letter-spacing: 0.18em;
  text-transform: none;
}
.masthead-strip .right { text-align: right; }

.masthead-colophon {
  margin-top: 30px;
  text-align: center;
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.7;
  max-width: 60ch;
  margin-left: auto; margin-right: auto;
}
.masthead-colophon .tilt { color: var(--gold); }

.masthead-copy {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}

/* ---------- editorial 404 ---------------------------------------------- */
.page-404 {
  min-height: 70vh;
  display: grid; place-items: center;
  padding: clamp(60px, 10vh, 120px) var(--pad);
  text-align: center;
  position: relative;
}
.page-404 .seal-torn {
  position: relative;
  width: 180px; height: 180px;
  margin: 0 auto 32px;
  display: grid; place-items: center;
}
.page-404 .seal-torn::before {
  /* torn-paper backing */
  content: '';
  position: absolute; inset: 0;
  background: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0 0.10  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  clip-path: polygon(8% 4%, 92% 0%, 96% 18%, 100% 38%, 96% 60%, 100% 82%, 88% 96%, 64% 92%, 38% 100%, 14% 96%, 4% 70%, 0 44%, 6% 22%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
.page-404 .seal-torn .seal {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 56px;
  box-shadow: var(--shadow-stamp), inset 0 0 0 1px rgba(245,232,210,.3);
  transform: rotate(-7deg);
  padding-bottom: 4px;
}
.page-404 .crumb-num {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 500;
  color: var(--vermillion);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}
.page-404 h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.page-404 p.lede {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  max-width: 48ch;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.page-404 .lost-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line-2);
  background: rgba(255, 245, 220, .03);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 32px;
}
.page-404 .lost-cta:hover { color: var(--vermillion); border-color: var(--vermillion); }
.page-404 .lost-cta kbd {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; padding: 2px 6px;
  border: 1px solid var(--line-2); background: rgba(0,0,0,.2); color: var(--gold);
}
.page-404 .quick-links {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 11px;
}
.page-404 .quick-links a {
  padding: 7px 14px;
  color: var(--gold);
  border: 1px solid var(--gold-glaze);
  transition: background .2s, color .2s;
}
.page-404 .quick-links a:hover { background: var(--gold-glaze); }

/* ---------- print stylesheet ------------------------------------------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  body::before, body::after, .page-curtain, .progress-bar,
  .site-head, .masthead, .ad-slot, .recipe-toolbar,
  .step-timers, .servings-scaler, .mise-progress { display: none !important; }
  article.wrap { max-width: 100%; padding: 0; color: #000; }
  .recipe-hero { display: block; padding: 0; }
  .recipe-hero h1 { color: #000 !important; font-size: 32pt; }
  .recipe-hero .desc { color: #222 !important; font-style: normal; }
  .recipe-hero .img-wrap { display: none; }
  .recipe-hero .img-wrap::before { display: none; }
  .recipe-hero .quick { border-color: #000; }
  .recipe-hero .quick .stat .lbl,
  .recipe-hero .quick .stat .val { color: #000 !important; }
  .recipe-body { display: block; }
  .ingredients li, .steps li { break-inside: avoid; color: #000; border-color: #888; }
  .steps li::before { background: #000 !important; box-shadow: none; }
  .cultural-note { background: #f7f1e3 !important; color: #000; box-shadow: none; }
  .cultural-note p { color: #000 !important; }
  .cultural-note::before { display: none; }
  a { color: #000 !important; text-decoration: none; }
  .section-title { color: #800 !important; }
}

/* =========================================================================
   PREMIUM POLISH:  custom cursor · 3D-tilt · entrance overlay ·
   count-up · ink trail · pull-quotes · brush dividers · placeholder artwork
   ========================================================================= */

/* ---------- custom cursor (only on fine pointers) ---------------------- */
@media (pointer: fine) {
  html.has-cursor, html.has-cursor body { cursor: none; }
  html.has-cursor a, html.has-cursor button, html.has-cursor input,
  html.has-cursor textarea, html.has-cursor select, html.has-cursor [role="button"],
  html.has-cursor .card, html.has-cursor .country-pill, html.has-cursor .country-tile,
  html.has-cursor .cuisine-chip, html.has-cursor .category-card,
  html.has-cursor .timer-chip, html.has-cursor [data-cmdk] { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform, width, height, opacity;
}
.cursor-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vermillion);
  margin: -2.5px 0 0 -2.5px;
  transition: opacity .2s ease, transform .12s linear, background .2s ease;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(200, 57, 42, .55);
  border-radius: 50%;
  margin: -14px 0 0 -14px;
  transition: width .35s cubic-bezier(.2,.8,.2,1),
              height .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease,
              border-width .25s ease,
              opacity .25s ease,
              transform .12s linear;
}
/* Subtle hover: ring just grows modestly + border firms up. No fill, no label. */
html.cursor-hover .cursor-ring {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-color: var(--vermillion);
  border-width: 1px;
}
html.cursor-hover .cursor-dot {
  background: var(--gold);
}
/* Press feedback: ring contracts slightly. */
html.cursor-press .cursor-ring {
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-color: var(--vermillion);
}
html.cursor-press .cursor-dot { transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(0.8); }
html.cursor-hidden .cursor-dot, html.cursor-hidden .cursor-ring { opacity: 0; }
/* Hide everywhere we render text input — let the I-beam show through. */
html.cursor-text .cursor-dot, html.cursor-text .cursor-ring { opacity: 0; }
/* don't render on coarse-pointer (touch) devices at all */
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- 3D-tilt cards --------------------------------------------- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
[data-tilt].tilting { transition: transform 50ms linear; }
/* a tiny glare follows the cursor on tilted cards */
[data-tilt] .tilt-glare {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
      rgba(245, 232, 210, .14) 0%,
      rgba(212, 168, 67, .08) 18%,
      transparent 38%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
  z-index: 3;
}
[data-tilt].tilting .tilt-glare { opacity: 1; }

/* ---------- ink-trail specks on hero / atlas / editorial-hero --------- */
.ink-speck {
  position: fixed;
  width: 6px; height: 6px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 57, 42, .8) 0%, rgba(200, 57, 42, 0) 70%);
  z-index: 8;
  animation: ink-fade 900ms ease-out forwards;
  will-change: transform, opacity;
}
@keyframes ink-fade {
  0%   { opacity: .8; transform: translate(-50%, -50%) scale(.6); }
  60%  { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

/* ---------- first-visit cinematic intro ------------------------------- */
.intro-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #2a0a08 0%, #0a0303 80%);
  display: grid; place-items: center;
  pointer-events: all;
  animation: intro-fade .8s ease 1.6s forwards;
}
@keyframes intro-fade { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro-stage {
  position: relative;
  width: 280px; height: 280px;
  display: grid; place-items: center;
}
.intro-stage::before {
  /* asanoha lattice flash */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'><g fill='none' stroke='%23d4a843' stroke-width='0.6' opacity='0.3'><polygon points='40,0 80,23 80,69 40,92 0,69 0,23'/><line x1='40' y1='0' x2='40' y2='92'/><line x1='0' y1='23' x2='80' y2='69'/><line x1='80' y1='23' x2='0' y2='69'/></g></svg>");
  background-size: 80px 138px;
  opacity: 0;
  animation: intro-grain 1.4s ease both .1s;
}
@keyframes intro-grain {
  from { opacity: 0; transform: scale(.6) rotate(-4deg); }
  60%  { opacity: .5; }
  to   { opacity: .12; transform: scale(1) rotate(0); }
}
.intro-seal {
  position: relative; z-index: 2;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 64px;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink), 0 0 0 6px var(--vermillion-3);
  transform: scale(0) rotate(-25deg);
  animation: intro-stamp .9s cubic-bezier(.5,1.6,.4,1) both .1s;
  padding-bottom: 4px;
}
@keyframes intro-stamp {
  0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  35%  { transform: scale(1.18) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-4deg); opacity: 1; }
}
.intro-wordmark {
  position: absolute;
  bottom: -56px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 26px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--paper);
  opacity: 0;
  white-space: nowrap;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  animation: intro-fade-up .8s ease both .9s;
}
.intro-wordmark .ampersand { color: var(--gold); font-style: italic; padding: 0 8px; }
@keyframes intro-fade-up { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

.intro-runner {
  position: absolute;
  top: 50%; right: -120px;
  transform: translateY(-50%);
  font-family: var(--cjk);
  font-size: 16px;
  color: var(--gold);
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
  opacity: 0;
  animation: intro-runner 1s ease both 1.1s;
}
@keyframes intro-runner { from { opacity: 0; transform: translate(40px, -50%); } to { opacity: .8; transform: translateY(-50%); } }

/* prevent main content layout-shift while intro is on screen */
html.intro-running { overflow: hidden; }

/* ---------- count-up styling ----------------------------------------- */
.stat-num.counting, .about-stats .num.counting {
  font-variant-numeric: tabular-nums;
}

/* ---------- magnetic buttons ----------------------------------------- */
.btn-primary, .btn-outline, .button, .cmdk-trigger,
.lost-cta, .visit, .quick-links a {
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              background .25s, color .25s, border-color .25s, box-shadow .25s;
  will-change: transform;
}

/* ---------- editorial pull-quote ------------------------------------- */
.pull-quote {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  color: var(--gold);
  letter-spacing: -0.018em;
  max-width: 22ch;
  text-wrap: balance;
  padding: 4px 0 6px 28px;
  margin: 36px 30px 36px 0;
  border-left: 2px solid var(--vermillion);
}
.pull-quote::before {
  content: '「';
  font-family: var(--cjk);
  position: absolute;
  left: -4px; top: -16px;
  font-size: 56px;
  color: var(--vermillion);
  font-style: normal;
  line-height: 1;
}
.pull-quote::after {
  content: '」';
  font-family: var(--cjk);
  font-size: 28px;
  color: var(--vermillion);
  font-style: normal;
  margin-left: 4px;
  vertical-align: -8px;
}
@media (min-width: 980px) {
  .pull-quote.float-right {
    float: right; clear: right;
    width: 38%;
    margin: 8px -16px 28px 36px;
  }
}

/* ---------- hand-drawn brush divider that draws on scroll ------------ */
.brush-divider {
  display: block;
  width: clamp(220px, 32vw, 460px);
  height: 56px;
  margin: clamp(50px, 8vh, 90px) auto;
  position: relative;
}
.brush-divider svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brush-divider .stroke {
  fill: none;
  stroke: var(--vermillion);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
.brush-divider .stroke-2 {
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.brush-divider .seal {
  fill: var(--vermillion);
  opacity: 0;
  transform-origin: center;
  transform: scale(.4);
  transition: opacity .4s ease, transform .55s cubic-bezier(.5,1.6,.4,1);
}
.brush-divider .seal-cjk {
  font-family: var(--cjk);
  font-size: 18px;
  fill: var(--paper);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  transition: opacity .4s ease .15s;
}
.brush-divider.drawn .stroke { animation: brush-draw 1.4s cubic-bezier(.6, 0, .25, 1) both; }
.brush-divider.drawn .stroke-2 { animation: brush-draw-2 1.4s cubic-bezier(.6, 0, .25, 1) .25s both; }
.brush-divider.drawn .seal { opacity: 1; transform: scale(1); transition-delay: .9s; }
.brush-divider.drawn .seal-cjk { opacity: 1; transition-delay: 1.05s; }
@keyframes brush-draw   { to { stroke-dashoffset: 0; } }
@keyframes brush-draw-2 { to { stroke-dashoffset: 0; } }

/* =========================================================================
   THE JOURNAL  ·  TODAY'S TABLE  ·  THE SATURDAY LETTER
   Long-form editorial — drop caps, footnotes, pull-quotes, byline, related.
   ========================================================================= */

/* ---------- /journal/ index page ------------------------------------- */
.journal-index {
  position: relative;
  padding: clamp(60px, 9vh, 110px) 0 clamp(70px, 10vh, 120px);
}
.journal-issue-plate {
  display: flex; align-items: center; gap: 26px;
  padding-bottom: 22px;
  margin-bottom: 38px;
  border-bottom: 1px dashed var(--line-2);
  flex-wrap: wrap;
}
.journal-issue-plate .iss-num {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(60px, 8vw, 100px);
  line-height: 0.9;
  color: var(--vermillion);
  letter-spacing: -0.04em;
}
.journal-issue-plate .iss-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.journal-issue-plate .iss-meta .lbl {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 12px;
  color: var(--gold);
}
.journal-issue-plate .iss-meta .name {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 80;
  color: var(--text);
  letter-spacing: -0.02em;
}
.journal-issue-plate .iss-meta .sub {
  font-family: var(--serif-2);
  font-style: italic;
  color: var(--text-2);
  font-size: 15px;
}
.journal-issue-plate .runner {
  margin-left: auto;
  font-family: var(--cjk);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.18em;
}

.journal-list { display: grid; gap: clamp(28px, 3vw, 44px); }
.journal-card {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
  position: relative;
  align-items: start;
}
.journal-card:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 820px) { .journal-card { grid-template-columns: 1fr; gap: 18px; } }

.journal-card .figure {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--ink-3);
  overflow: hidden;
  border: 1px solid var(--line);
}
.journal-card .figure::before {
  content: attr(data-cjk);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: clamp(140px, 16vw, 220px);
  color: var(--vermillion);
  opacity: .1;
  letter-spacing: -0.02em;
  transform: rotate(-4deg);
}
.journal-card .figure::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4   0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .18; mix-blend-mode: overlay; pointer-events: none;
}
.journal-card .figure .seal {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 11px;
  color: var(--vermillion);
  background: var(--paper);
  padding: 4px 12px;
  z-index: 2;
}
.journal-card .figure .num-roman {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: -0.02em;
  z-index: 2;
}
.journal-card:hover .figure { border-color: var(--vermillion-2); }
.journal-card .body {
  display: flex; flex-direction: column; gap: 14px;
}
.journal-card .kicker {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--vermillion);
}
.journal-card h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}
.journal-card .dek {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 60ch;
}
.journal-card .meta-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 4px;
  display: flex; gap: 18px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px dotted var(--line-2);
}
.journal-card .meta-line .by { color: var(--gold); text-transform: none; letter-spacing: 0.04em; font-family: var(--serif); font-style: italic; font-size: 13px; }

/* ---------- /journal/<slug>/  essay layout --------------------------- */
.essay-hero {
  position: relative;
  padding: clamp(70px, 11vh, 130px) 0 clamp(40px, 6vh, 70px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.essay-hero::before {
  content: attr(data-cjk);
  position: absolute;
  right: -3vw; top: 50%; transform: translateY(-50%);
  font-family: var(--cjk);
  font-size: clamp(280px, 42vw, 600px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .055;
  pointer-events: none;
}
.essay-hero .wrap-prose { position: relative; z-index: 2; }
.essay-hero .kicker {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px;
}
.essay-hero .kicker::before {
  content: '';
  width: 30px; height: 1px;
  background: var(--vermillion);
}
.essay-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6.5vw, 84px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.028em;
  line-height: 0.98;
  margin-bottom: 22px;
  text-wrap: balance;
}
.essay-hero .dek {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 23px);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 64ch;
  margin-bottom: 28px;
}
.essay-hero .essay-byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
}
.essay-hero .essay-byline .by-name {
  font-family: var(--serif);
  font-style: italic;
  font-variant-caps: normal;
  text-transform: none;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0;
}

.essay-body {
  padding: clamp(40px, 6vh, 80px) 0 clamp(60px, 9vh, 110px);
}
.essay-body p {
  font-family: var(--serif-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.2em;
  text-wrap: pretty;
  hyphens: auto;
}
.essay-body p strong { font-weight: 500; color: var(--gold); font-style: normal; }
.essay-body > .wrap-prose > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 5.4em;
  float: left;
  line-height: 0.78;
  margin: 0.05em 0.14em -0.06em -0.06em;
  color: var(--vermillion);
  font-weight: 500;
}
.essay-body h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 90;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.018em;
  margin: 2.2em 0 0.8em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  position: relative;
  text-wrap: balance;
}
.essay-body h2::before {
  content: '◆';
  position: absolute; top: -7px; left: 0;
  font-size: 9px;
  color: var(--vermillion);
  background: var(--ink-2);
  padding-right: 8px;
}
.essay-body .pull-quote {
  margin: 32px 0;
  padding: 6px 0 8px 32px;
  border-left: 2px solid var(--vermillion);
  border-right: none;
  font-size: clamp(22px, 2.6vw, 30px);
  max-width: 26ch;
  text-wrap: balance;
}
@media (min-width: 980px) {
  .essay-body .pull-quote.float-right {
    width: 42%;
    float: right; clear: right;
    margin: 12px -8% 24px 36px;
  }
}

/* footnote markers and panel */
.fn-ref {
  font-family: var(--serif);
  vertical-align: super;
  font-size: 0.62em;
  color: var(--vermillion);
  font-feature-settings: "sups" 1;
  text-decoration: none;
  margin-left: 2px;
  border-bottom: 1px dotted var(--vermillion);
  padding: 0 2px;
}
.fn-ref:hover { color: var(--gold); border-color: var(--gold); }
.essay-footnotes {
  margin-top: clamp(50px, 8vh, 90px);
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif-2);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  counter-reset: fn;
}
.essay-footnotes h4 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  color: var(--vermillion);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}
.essay-footnotes ol { list-style: none; padding: 0; }
.essay-footnotes li { counter-increment: fn; padding: 6px 0 8px 32px; position: relative; }
.essay-footnotes li::before {
  content: counter(fn);
  position: absolute; left: 0; top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--vermillion);
  font-variation-settings: "opsz" 36, "SOFT" 80;
}

/* dateline + signoff at end of essay */
.essay-signoff {
  margin: clamp(60px, 8vh, 90px) 0 0;
  padding-top: 28px;
  border-top: 1px dashed var(--line-2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  align-items: baseline;
}
.essay-signoff .dateline {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 12px;
  color: var(--vermillion);
}
.essay-signoff .author {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--gold);
  font-variation-settings: "opsz" 72, "SOFT" 80;
  letter-spacing: -0.012em;
}
.essay-signoff .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-left: 8px;
}

/* essay → related recipes block */
.essay-related {
  background: var(--ink);
  padding: clamp(50px, 8vh, 90px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.essay-related h3 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 13px;
  color: var(--vermillion);
  margin-bottom: 22px;
}

/* ---------- TODAY'S TABLE — date-driven home strip --------------------- */
.todays-table {
  position: relative;
  padding: clamp(70px, 9vh, 110px) 0 clamp(50px, 8vh, 90px);
  background: var(--paper);
  color: var(--text-ink);
  overflow: hidden;
}
.todays-table::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4   0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .25; mix-blend-mode: multiply; pointer-events: none;
}
.todays-table .wrap { position: relative; z-index: 2; }
.todays-table .date-plate {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 28px;
  font-family: var(--serif);
  flex-wrap: wrap;
}
.todays-table .date-plate .day {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(50px, 6vw, 80px);
  font-weight: 500;
  color: var(--vermillion);
  line-height: 1;
  letter-spacing: -0.04em;
}
.todays-table .date-plate .of {
  font-style: italic;
  font-size: 22px;
  color: var(--text-ink-2);
}
.todays-table .date-plate .month {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--text-ink);
}
.todays-table .date-plate .runner {
  margin-left: auto;
  font-family: var(--cjk);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--vermillion-2);
}
.todays-table .tt-eyebrow {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 11px;
  color: var(--vermillion-2);
  margin-bottom: 8px;
  display: inline-flex; gap: 12px; align-items: center;
}
.todays-table .tt-eyebrow::after {
  content: '今日の食卓';
  font-family: var(--cjk);
  font-variant-caps: normal;
  letter-spacing: 0.04em;
  color: var(--vermillion-3);
  font-size: 14px;
}
.todays-table .tt-card {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: stretch;
  padding-top: 8px;
}
@media (max-width: 820px) { .todays-table .tt-card { grid-template-columns: 1fr; } }
.todays-table .tt-figure {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--ink-3);
  overflow: hidden;
  border: 1px solid var(--paper-edge);
  padding: 8px;
  box-shadow: var(--shadow-deep);
}
.todays-table .tt-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.04) contrast(1.02);
}
.todays-table .tt-figure::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(140, 26, 18, .25);
  pointer-events: none;
  z-index: 2;
}
.todays-table .tt-figure .stamp {
  position: absolute;
  top: -14px; right: -14px;
  width: 64px; height: 64px;
  background: var(--vermillion);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 28px;
  box-shadow: var(--shadow-stamp), 0 0 0 4px var(--paper), 0 0 0 5px var(--vermillion-3);
  transform: rotate(-8deg);
  z-index: 4;
  padding-bottom: 3px;
}
.todays-table .tt-body {
  display: flex; flex-direction: column; justify-content: center;
}
.todays-table .tt-cuisine {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--vermillion-2);
  margin-bottom: 12px;
}
.todays-table .tt-name {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 72px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 500;
  color: var(--text-ink);
  letter-spacing: -0.028em;
  line-height: 0.98;
  text-wrap: balance;
  margin-bottom: 18px;
}
.todays-table .tt-name .swash {
  display: block;
  font-style: italic;
  color: var(--vermillion);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: 0.6em;
  letter-spacing: 0;
  margin-top: 6px;
}
.todays-table .tt-desc {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-ink-2);
  line-height: 1.65;
  max-width: 56ch;
  margin-bottom: 22px;
}
.todays-table .tt-stats {
  display: flex; gap: 30px; flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(140, 26, 18, .25);
  margin-bottom: 22px;
}
.todays-table .tt-stats .s {
  display: flex; flex-direction: column; gap: 4px;
}
.todays-table .tt-stats .s .lbl {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.28em;
  font-size: 10px;
  color: var(--text-ink-3);
}
.todays-table .tt-stats .s .val {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-variation-settings: "opsz" 36, "SOFT" 80;
  color: var(--vermillion-2);
}
.todays-table .tt-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--vermillion);
  color: var(--paper);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  font-size: 13px;
  align-self: flex-start;
  border: 1px solid var(--vermillion);
  position: relative;
  transition: background .25s, color .25s, transform .25s;
}
.todays-table .tt-cta::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(245, 232, 210, .35);
  pointer-events: none;
}
.todays-table .tt-cta:hover { background: var(--vermillion-2); color: var(--paper); }

/* ---------- FROM THE JOURNAL home strip ------------------------------- */
.home-journal {
  padding: clamp(60px, 9vh, 100px) 0 clamp(50px, 8vh, 90px);
  position: relative;
}
.home-journal .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap; gap: 16px;
  border-bottom: 1px dashed var(--line-2);
  padding-bottom: 16px;
}
.home-journal h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.028em;
  letter-spacing: -0.025em;
}
.home-journal h2 .swash { font-style: italic; color: var(--gold); }
.home-journal .all-link {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.28em;
  font-size: 12px;
  color: var(--gold);
}
.home-journal .all-link::after { content: ' →'; }

.home-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 900px) { .home-journal-grid { grid-template-columns: 1fr; } }

.home-journal-card {
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  padding-top: 16px;
  border-top: 2px solid var(--vermillion);
}
.home-journal-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--vermillion);
  font-variation-settings: "opsz" 36, "SOFT" 100;
  letter-spacing: 0.04em;
}
.home-journal-card .ktag {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 11px;
  color: var(--gold);
  margin-top: -2px;
}
.home-journal-card h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-variation-settings: "opsz" 72, "SOFT" 90;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}
.home-journal-card .dek {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}
.home-journal-card .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dotted var(--line);
}

/* ---------- THE SATURDAY LETTER — newsletter card -------------------- */
.saturday-letter {
  position: relative;
  padding: clamp(70px, 9vh, 100px) 0 clamp(70px, 9vh, 100px);
  background: var(--paper-2);
  color: var(--text-ink);
  overflow: hidden;
}
.saturday-letter::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(140, 26, 18, .04) 18px 19px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3   0 0 0 0 0.22  0 0 0 0 0.10  0 0 0 0.40 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 24px 24px, 180px 180px;
  opacity: .5; mix-blend-mode: multiply; pointer-events: none;
}
.saturday-letter .wrap-sm { position: relative; z-index: 2; }

.subscription-card {
  position: relative;
  background: var(--paper);
  padding: clamp(44px, 6vw, 70px) clamp(32px, 5vw, 64px);
  border: 1.5px dashed var(--vermillion-2);
  outline: 1px solid var(--paper-edge);
  outline-offset: 6px;
  box-shadow: 0 24px 50px rgba(40, 18, 8, .25);
}
.subscription-card::before, .subscription-card::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
}
.subscription-card::before {
  top: -6px; left: -6px;
  border-top: 2px solid var(--vermillion);
  border-left: 2px solid var(--vermillion);
}
.subscription-card::after {
  bottom: -6px; right: -6px;
  border-bottom: 2px solid var(--vermillion);
  border-right: 2px solid var(--vermillion);
}
.subscription-card .stamp-medallion {
  position: absolute;
  top: -28px; right: 32px;
  width: 60px; height: 60px;
  background: var(--vermillion);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 24px;
  box-shadow: var(--shadow-stamp);
  transform: rotate(-9deg);
  padding-bottom: 3px;
}

.sub-eyebrow {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--vermillion-2);
  margin-bottom: 10px;
  display: inline-flex; gap: 12px;
}
.sub-eyebrow::before { content: '— '; color: var(--vermillion-2); letter-spacing: 0; }

.subscription-card h2 {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  color: var(--text-ink);
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin-bottom: 12px;
  text-wrap: balance;
}
.subscription-card .sub-lede {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-ink-2);
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 22px;
}

.sub-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid rgba(140, 26, 18, .35);
  border-bottom: 1px solid rgba(140, 26, 18, .35);
}
@media (max-width: 600px) { .sub-form { grid-template-columns: 1fr; } }
.sub-form input[type="email"] {
  background: transparent;
  border: none;
  padding: 18px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--text-ink);
  outline: none;
  letter-spacing: 0;
}
.sub-form input[type="email"]::placeholder { color: var(--text-ink-3); }
.sub-form button {
  padding: 14px 28px;
  background: var(--vermillion);
  color: var(--paper);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 13px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
}
.sub-form button::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid rgba(245, 232, 210, .3);
  pointer-events: none;
}
.sub-form button:hover { background: var(--vermillion-2); }

.sub-fineprint {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-ink-3);
  text-transform: uppercase;
}
.sub-status {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--vermillion-2);
  min-height: 18px;
}
.sub-status.success { color: var(--celadon, #4a7560); }

/* =========================================================================
   COOK MODE  ·  COOKBOOK  ·  KEYBOARD SHORTCUTS OVERLAY
   ========================================================================= */

/* ---------- save-to-cookbook heart button (in recipe toolbar) --------- */
.recipe-actions .btn-save {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
  padding: 6px 10px 6px 12px;
}
.recipe-actions .btn-save .heart {
  display: inline-block;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--heart-mask) center/contain no-repeat;
  mask: var(--heart-mask) center/contain no-repeat;
  --heart-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.35-9.5-8.5C.6 8.6 3 5 6 5c1.7 0 3.2.9 4 2.5C10.8 5.9 12.3 5 14 5c3 0 5.4 3.6 3.5 7.5C19 16.65 12 21 12 21z' fill='none' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/></svg>");
  transition: transform .25s;
}
.recipe-actions .btn-save.saved .heart {
  --heart-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.35-9.5-8.5C.6 8.6 3 5 6 5c1.7 0 3.2.9 4 2.5C10.8 5.9 12.3 5 14 5c3 0 5.4 3.6 3.5 7.5C19 16.65 12 21 12 21z'/></svg>");
}
.recipe-actions .btn-save.saved {
  color: var(--vermillion);
  border-color: var(--vermillion);
  background: var(--vermillion-glaze);
}
.recipe-actions .btn-save.just-saved .heart {
  animation: heart-thump .55s cubic-bezier(.5,1.6,.4,1);
}
@keyframes heart-thump {
  0% { transform: scale(.8); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* "Cook this dish" CTA in toolbar */
.recipe-actions .btn-cook {
  background: var(--vermillion) !important;
  color: var(--paper) !important;
  border-color: var(--vermillion) !important;
  font-weight: 500;
}
.recipe-actions .btn-cook:hover {
  background: var(--vermillion-2) !important;
  color: var(--paper) !important;
}

/* ---------- cookbook page -------------------------------------------- */
.cookbook-empty {
  text-align: center;
  padding: clamp(60px, 10vh, 120px) 0;
  color: var(--text-2);
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto;
}
.cookbook-empty .seal {
  width: 96px; height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--vermillion);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 44px;
  box-shadow: var(--shadow-stamp), 0 0 0 5px var(--ink-2), 0 0 0 6px var(--vermillion-3);
  transform: rotate(-6deg);
  padding-bottom: 4px;
}
.cookbook-empty .hint {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 13px;
  color: var(--gold);
}

/* ---------- COOK MODE — fullscreen immersive step-by-step ----------- */
.cook-mode {
  position: fixed; inset: 0;
  z-index: 9700;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(60, 18, 14, .95), rgba(13, 6, 5, .98) 70%),
    var(--ink);
  color: var(--text);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
.cook-mode.open { display: flex; opacity: 1; }
.cook-mode::before {
  /* asanoha lattice as faint ground texture */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'><g fill='none' stroke='%23d4a843' stroke-width='0.4' opacity='0.4'><polygon points='40,0 80,23 80,69 40,92 0,69 0,23'/><line x1='40' y1='0' x2='40' y2='92'/><line x1='0' y1='23' x2='80' y2='69'/><line x1='80' y1='23' x2='0' y2='69'/></g></svg>");
  background-size: 80px 138px;
  opacity: .10;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cook-mode::after {
  /* watermark CJK behind everything */
  content: '炊';
  font-family: var(--cjk);
  position: absolute;
  right: -3vw; bottom: -10vh;
  font-size: clamp(360px, 50vw, 700px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .04;
  pointer-events: none;
}
body.cook-mode-locked { overflow: hidden; }

.cook-head {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.cook-head .step-counter {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.36em;
  font-size: 12px;
  color: var(--vermillion);
  display: flex; align-items: center; gap: 10px;
}
.cook-head .step-counter .num {
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0;
  font-variation-settings: "opsz" 72, "SOFT" 100;
  color: var(--gold);
}
.cook-head .recipe-name {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cook-head .right {
  display: flex; align-items: center; gap: 18px;
}
.cook-head .clock {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
}
.cook-head .close-cook {
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .25s, color .25s;
}
.cook-head .close-cook:hover { border-color: var(--vermillion); color: var(--vermillion); }

.cook-body {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 0;
}
@media (max-width: 900px) {
  .cook-body { grid-template-columns: 1fr; }
  .cook-aside { display: none; }
}

.cook-aside {
  border-right: 1px solid var(--line);
  padding: 32px clamp(20px, 2vw, 28px);
  overflow-y: auto;
  background: rgba(13, 6, 5, .35);
}
.cook-aside h3 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cook-aside ul { list-style: none; padding: 0; margin: 0; }
.cook-aside li {
  padding: 10px 0;
  font-family: var(--serif-2);
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px dotted var(--line);
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.cook-aside li.checked { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--vermillion); }
.cook-aside li:last-child { border-bottom: 0; }
.cook-aside .qty {
  color: var(--vermillion);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.cook-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(40px, 6vh, 80px) clamp(28px, 5vw, 80px);
  min-height: 0;
}
.cook-step {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.36;
  color: var(--text);
  text-wrap: balance;
  max-width: 32ch;
  margin: 0 auto;
  letter-spacing: -0.018em;
  text-align: center;
}
.cook-step .body-text {
  display: block;
  animation: cook-step-in .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cook-step-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cook-step.exiting .body-text {
  animation: cook-step-out .35s ease both;
}
@keyframes cook-step-out {
  to { opacity: 0; transform: translateY(-22px); }
}
.cook-step .step-timer {
  margin-top: 36px;
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap;
}
.cook-step .step-timer .timer-chip {
  padding: 12px 24px;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-style: normal;
}

.cook-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.cook-foot .nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 245, 220, .04);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.cook-foot .nav-btn:hover { border-color: var(--vermillion); color: var(--vermillion); }
.cook-foot .nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cook-foot .nav-btn.next { background: var(--vermillion); color: var(--paper); border-color: var(--vermillion); }
.cook-foot .nav-btn.next:hover { background: var(--vermillion-2); color: var(--paper); }

.cook-foot .progress-rail {
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.cook-foot .progress-rail .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--vermillion), var(--gold));
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.cook-foot .progress-rail .ticks {
  position: absolute; inset: 0;
  display: flex; pointer-events: none;
}
.cook-foot .progress-rail .ticks span {
  flex: 1; border-right: 1px solid rgba(13, 6, 5, .8);
}
.cook-foot .progress-rail .ticks span:last-child { border-right: 0; }

.cook-keyhints {
  display: flex; gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
}
.cook-keyhints kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 2px 6px; margin-right: 4px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,.3);
  color: var(--gold);
  letter-spacing: 0.10em;
}
@media (max-width: 720px) {
  .cook-foot { grid-template-columns: 1fr; gap: 12px; }
  .cook-keyhints { display: none; }
  .cook-foot .progress-rail { order: -1; }
}

/* ---------- KEYBOARD SHORTCUTS OVERLAY ------------------------------- */
.kb-help {
  position: fixed; inset: 0;
  z-index: 9600;
  display: none;
  align-items: center; justify-content: center;
  padding: 6vh 4vw;
}
.kb-help.open { display: flex; }
.kb-help-back {
  position: absolute; inset: 0;
  background: rgba(8, 4, 3, .72);
  backdrop-filter: blur(12px);
  animation: cmdk-fade .25s ease both;
}
.kb-help-modal {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--gold-glaze);
  width: min(620px, 100%);
  padding: 36px 36px 28px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: cmdk-pop .3s cubic-bezier(.2,1.2,.4,1) both;
}
.kb-help-modal h3 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 6px;
}
.kb-help-modal h2 {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-bottom: 22px;
}
.kb-help-modal .kb-section {
  border-top: 1px dashed var(--line-2);
  padding: 18px 0;
}
.kb-help-modal .kb-section:first-of-type { border-top: 0; padding-top: 0; }
.kb-help-modal .kb-section h4 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 12px;
}
.kb-help-modal .kb-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px; padding: 6px 0;
  font-family: var(--serif-2);
  font-size: 14px;
  color: var(--text-2);
}
.kb-help-modal .kb-row .keys { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-help-modal kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 3px 8px; letter-spacing: 0.10em;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .25);
  color: var(--gold);
  text-transform: uppercase;
  min-width: 20px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb-help-modal .kb-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  text-align: right;
}
.kb-help-modal .kb-foot kbd { font-size: 10px; }

/* =========================================================================
   AUTHOR PAGES (E-E-A-T) + INGREDIENT PAGES + GLOSSARY + FAQ
   ========================================================================= */

/* ---------- /author/<slug>/ ---------------------------------------- */
.author-hero {
  position: relative;
  padding: clamp(70px, 11vh, 130px) 0 clamp(40px, 6vh, 70px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.author-hero::before {
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: -3vw; top: 50%; transform: translateY(-50%);
  font-size: clamp(280px, 40vw, 540px);
  line-height: 1;
  color: var(--vermillion);
  opacity: .055;
  pointer-events: none;
}
.author-hero .layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 720px) { .author-hero .layout { grid-template-columns: 1fr; } }

.author-hero .portrait {
  width: 220px; height: 220px;
  background: var(--vermillion);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--cjk);
  font-size: 110px;
  box-shadow: var(--shadow-stamp), 0 0 0 6px var(--ink-2), 0 0 0 7px var(--vermillion-3);
  transform: rotate(-4deg);
  padding-bottom: 6px;
}
@media (max-width: 720px) { .author-hero .portrait { width: 140px; height: 140px; font-size: 70px; margin: 0 auto; } }

.author-hero h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 90;
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 8px;
}
.author-hero .role {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 18px;
}
.author-hero .headline {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: 22px;
}
.author-hero .meta-strip {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-3);
  text-transform: uppercase;
}

.author-body {
  padding: clamp(40px, 6vh, 80px) 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(30px, 5vw, 70px);
}
@media (max-width: 900px) { .author-body { grid-template-columns: 1fr; } }
.author-bio {
  font-family: var(--serif-2);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.78;
  color: var(--text);
  max-width: 64ch;
}
.author-bio p { margin-bottom: 1.2em; }
.author-bio p:first-of-type::first-letter {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 4.4em;
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.12em -0.06em -0.04em;
  color: var(--vermillion);
  font-weight: 500;
}
.author-bio .philosophy {
  margin: 32px 0;
  padding: 22px 28px;
  border-left: 3px solid var(--vermillion);
  font-style: italic;
  color: var(--text-2);
  background: rgba(200, 57, 42, .04);
}
.author-bio .philosophy::before {
  content: '「';
  font-family: var(--cjk);
  font-style: normal;
  color: var(--vermillion);
  margin-right: 8px;
  font-size: 1.4em;
  vertical-align: -4px;
}

.author-side {
  position: sticky; top: 90px; align-self: start;
  display: flex; flex-direction: column; gap: 22px;
}
.author-side h3 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.30em;
  font-size: 11px;
  color: var(--gold);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.author-side .card-block {
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 18px 20px;
}
.author-side ul { list-style: none; padding: 0; margin: 0; }
.author-side li {
  padding: 6px 0;
  font-family: var(--serif-2);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.author-side li::before {
  content: '◆';
  color: var(--vermillion);
  font-size: 8px;
  margin-right: 8px;
  vertical-align: 2px;
}

.author-recent { padding-bottom: 60px; }
.author-recent h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 80;
  margin-bottom: 22px;
  color: var(--text);
}

/* ---------- /ingredients/<slug>/ ----------------------------------- */
.ingredient-hero {
  padding: clamp(60px, 9vh, 110px) 0 clamp(36px, 5vh, 60px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ingredient-hero::before {
  content: attr(data-cjk);
  font-family: var(--cjk);
  position: absolute;
  right: -3vw; top: 50%;
  transform: translateY(-50%);
  font-size: clamp(280px, 40vw, 520px);
  color: var(--vermillion);
  opacity: .055;
  pointer-events: none;
}
.ingredient-hero .wrap-prose { position: relative; z-index: 2; }
.ingredient-hero .kicker {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.32em;
  font-size: 12px;
  color: var(--vermillion);
  margin-bottom: 14px;
}
.ingredient-hero h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--text);
  line-height: 0.96;
  margin-bottom: 16px;
}
.ingredient-hero h1 .also-known {
  display: block;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  color: var(--gold);
  font-size: 0.5em;
  margin-top: 14px;
  letter-spacing: -0.015em;
}
.ingredient-hero .dek {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 60ch;
}
.ingredient-content {
  padding: clamp(40px, 6vh, 80px) 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(30px, 5vw, 70px);
}
@media (max-width: 900px) { .ingredient-content { grid-template-columns: 1fr; } }

.ingredient-content h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "SOFT" 90;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  margin: 1.6em 0 0.6em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.ingredient-content h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ingredient-content p {
  font-family: var(--serif-2);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.1em;
}
.ingredient-side .card-block .qty {
  color: var(--vermillion);
  font-family: var(--mono);
  font-size: 11px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.glossary-grid .ing-card {
  display: block;
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .3s, box-shadow .3s;
}
.glossary-grid .ing-card:hover {
  border-color: var(--vermillion);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}
.glossary-grid .ing-card .name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.012em;
}
.glossary-grid .ing-card .also {
  font-family: var(--serif-2);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.glossary-grid .ing-card .count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillion);
}

/* ---------- FAQ accordion on recipe pages -------------------------- */
.recipe-faq {
  margin: clamp(44px, 6vh, 80px) 0 clamp(20px, 4vh, 60px);
}
.recipe-faq h2 {
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.recipe-faq h2::before {
  content: '?';
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--vermillion);
  letter-spacing: 0;
}
.recipe-faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.recipe-faq details[open] summary { color: var(--gold); }
.recipe-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  transition: color .25s;
}
.recipe-faq summary::-webkit-details-marker { display: none; }
.recipe-faq summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 22px;
  color: var(--vermillion);
  font-weight: 400;
  transition: transform .25s;
}
.recipe-faq details[open] summary::after { transform: rotate(45deg); }
.recipe-faq .answer {
  margin-top: 12px;
  font-family: var(--serif-2);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 72ch;
}

/* ---------- accessibility ----------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .kintsugi-dust, .ink-speck, .intro-overlay { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  html.has-cursor, html.has-cursor body { cursor: auto; }
  [data-tilt] { transform: none !important; }
  .brush-divider .stroke,
  .brush-divider .stroke-2 { stroke-dashoffset: 0; }
  .brush-divider .seal, .brush-divider .seal-cjk { opacity: 1; transform: scale(1); }
}