/* ============================================================
   BoomBigNose — "Night Workshop"
   Dark technical-editorial · Bricolage Grotesque + Instrument Serif
   ============================================================ */

/* Skip-link — visually hidden until focused, then anchored top-left.
   Helps keyboard / screen-reader users jump past the masthead.
   Also a small accessibility/SEO signal. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 14px;
  font: 500 19px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: var(--amber);
  border: 1px solid var(--bg);
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Visually hidden but available to assistive tech. Used for i18n'd
   labels inside icon-only buttons (e.g. the nav auth-chip's × button)
   and for context that screen readers need but sighted users don't. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* ── Surface ─────────────────────────────────────────────── */
  --bg:        #0b0c10;
  --bg-2:      #101218;
  --bg-3:      #161823;
  --bg-4:      #1d2030;
  --line:      rgba(231, 226, 211, 0.08);
  --line-2:    rgba(231, 226, 211, 0.16);
  --line-3:    rgba(231, 226, 211, 0.28);

  /* ── Ink ─────────────────────────────────────────────────── */
  --text:      #ece7d6;        /* warm off-white */
  --text-2:    #b9b4a4;
  --text-3:    #82806f;
  --mute:      #5e5d52;

  /* Backwards-compat aliases used by inline SVG attrs */
  --paper:     var(--bg);
  --ink:       var(--text);
  --ink-soft:  var(--text-2);
  --ink-faint: var(--text-3);

  /* ── Signal accents ──────────────────────────────────────── */
  --coral:     #ff5a45;        /* primary — sunset / signal */
  --coral-2:   #ff8169;
  --coral-deep:#c93820;
  --coral-glow:rgba(255, 90, 69, 0.22);
  /* Coral used as FOREGROUND text — kept at brand coral on the dark
     theme (passes AA on near-black), darkened to coral-deep variant
     in the light-theme overrides so AA holds on cream surfaces. */
  --coral-text: var(--coral);
  /* Foreground color for content sitting ON a coral button background.
     Defaults to the surface --bg (dark in night mode → passes AA);
     overridden to deep ink in the light-theme block. */
  --btn-ink-fg: var(--bg);
  --amber:     #f5c45e;        /* sodium-lamp / status */
  --amber-2:   #ffd984;
  --cyan:      #5fd4ff;        /* live data / cursor */
  --cyan-2:    #aae9ff;
  --lime:      #c6ff5a;        /* status OK */
  /* Signal accents used as FOREGROUND text (e.g. category pills).
     Default to the bright brand value for dark theme (AA holds on
     near-black). Light theme overrides darken to keep AA on cream. */
  --amber-text: var(--amber);
  --cyan-text:  var(--cyan);
  --lime-text:  var(--lime);
  --accent:    var(--coral);
  --accent-2:  var(--coral-deep);

  /* ── Type ────────────────────────────────────────────────── */
  --display:   'Bricolage Grotesque', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --editorial: 'Instrument Serif', 'Noto Serif Thai', Georgia, serif;
  --sans:      'IBM Plex Sans', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --sans-th:   'IBM Plex Sans Thai Looped', 'IBM Plex Sans', system-ui, sans-serif;
  --serif:     var(--editorial);
  --mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── Layout ──────────────────────────────────────────────── */
  --max:       1280px;
  --gutter:    clamp(20px, 4vw, 56px);
  --rule-w:    1px;

  --t-ease:    cubic-bezier(.2, .7, .2, 1);
  --t-quick:   cubic-bezier(.4, 0, .2, 1);

  /* ── Shadows / glow ──────────────────────────────────────── */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 24px 48px -28px rgba(0,0,0,0.85),
    0 2px 0 rgba(0,0,0,0.4);
  --shadow-coral:
    0 0 0 1px rgba(255, 90, 69, 0.45),
    0 18px 38px -16px rgba(255, 90, 69, 0.40);

  /* ── Atmosphere (themable decorative layers) ─────────────── */
  --grid-dot:    rgba(231, 226, 211, 0.07);   /* .bg-grid lattice color */
  --bloom-blend: screen;                       /* .bg-glow mix-blend-mode */
  --bloom-op:    0.55;                         /* .bg-glow span opacity */
  --scan-color:  rgba(0, 0, 0, 0.18);          /* .bg-scan line color */
  --scan-blend:  overlay;                      /* .bg-scan mix-blend-mode */
  --scan-op:     0.35;                         /* .bg-scan opacity */
}

/* ============================================================
   DAY WORKSHOP — light-theme overrides.
   Default behavior: follows the user's system preference
   (prefers-color-scheme). The toggle in the masthead lets a visitor
   override per-site and persists the choice in localStorage('bbn.theme'),
   which the inline bootstrap script applies as [data-theme="light"|"dark"]
   before paint.

   Two selectors share this token block:
   1. :root[data-theme="light"]                       — explicit user choice
   2. @media (prefers-color-scheme: light)
        :root:not([data-theme="dark"])                — system default
   ============================================================ */
:root[data-theme="light"] {
  /* Surface — warm paper, the daylight counterpart of midnight workshop */
  --bg:        #f5f1e6;
  --bg-2:      #ebe6d4;
  --bg-3:      #e0dac4;
  --bg-4:      #d4ccb1;
  --line:      rgba(20, 20, 30, 0.10);
  --line-2:    rgba(20, 20, 30, 0.20);
  --line-3:    rgba(20, 20, 30, 0.32);

  /* Ink — deep editorial. --text-3 darkened from #6a6a78 (4.25 on
     cream bg-2) to #5a5a6c (5.4) so WCAG AA holds at 11–18px. */
  --text:      #14141e;
  --text-2:    #3a3a48;
  --text-3:    #5a5a6c;
  --mute:      #8a8a96;

  /* Signal accents stay coral/amber/cyan/lime so brand identity carries
     across themes; only the deep coral/amber-2 tints shift slightly to
     keep contrast on cream. */
  --coral-glow:rgba(217, 74, 48, 0.18);
  --amber-2:   #b88324;
  /* Coral readable as foreground text on cream surfaces (AA ≥ 4.5).
     Used by pill/cta/lang-toggle states; the brand --coral itself
     stays #ff5a45 for borders, glows, and graphical accents. */
  --coral-text: #a02810;
  /* Amber/cyan/lime as readable foreground on cream — the bright
     brand values fail WCAG AA at small sizes (1.3:1 to 1.5:1) on
     #ebe6d4. These darker tints clear 4.5:1. Borders + graphical
     fills keep the bright brand value. */
  --amber-text: #8a5a0a;
  --cyan-text:  #0c6680;
  --lime-text:  #3d5a10;
  /* Deep ink for content on coral button backgrounds — cream-on-coral
     was 2.73 (fail); near-black on coral is 5.9 (pass). */
  --btn-ink-fg: #14141e;

  /* Card shadow — softer on paper */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 36px -22px rgba(20, 20, 30, 0.18),
    0 2px 0 rgba(20, 20, 30, 0.06);
  --shadow-coral:
    0 0 0 1px rgba(217, 74, 48, 0.40),
    0 18px 38px -16px rgba(217, 74, 48, 0.28);

  /* Atmosphere — dark dots on paper, multiply blooms, faint scan */
  --grid-dot:    rgba(20, 20, 30, 0.07);
  --bloom-blend: multiply;
  --bloom-op:    0.30;
  --scan-color:  rgba(20, 20, 30, 0.08);
  --scan-blend:  multiply;
  --scan-op:     0.20;
}

/* System-default light: same tokens as above, applied when the user has
   not explicitly chosen dark (i.e. either no preference stored, or JS
   disabled so the bootstrap script never set data-theme). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f5f1e6;
    --bg-2:      #ebe6d4;
    --bg-3:      #e0dac4;
    --bg-4:      #d4ccb1;
    --line:      rgba(20, 20, 30, 0.10);
    --line-2:    rgba(20, 20, 30, 0.20);
    --line-3:    rgba(20, 20, 30, 0.32);

    --text:      #14141e;
    --text-2:    #3a3a48;
    --text-3:    #5a5a6c;
    --mute:      #8a8a96;

    --coral-glow:rgba(217, 74, 48, 0.18);
    --amber-2:   #b88324;
    --coral-text: #a02810;
    --amber-text: #8a5a0a;
    --cyan-text:  #0c6680;
    --lime-text:  #3d5a10;
    --btn-ink-fg: #14141e;

    --shadow-card:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 18px 36px -22px rgba(20, 20, 30, 0.18),
      0 2px 0 rgba(20, 20, 30, 0.06);
    --shadow-coral:
      0 0 0 1px rgba(217, 74, 48, 0.40),
      0 18px 38px -16px rgba(217, 74, 48, 0.28);

    --grid-dot:    rgba(20, 20, 30, 0.07);
    --bloom-blend: multiply;
    --bloom-op:    0.30;
    --scan-color:  rgba(20, 20, 30, 0.08);
    --scan-blend:  multiply;
    --scan-op:     0.20;
  }
}

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

html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.62;
  letter-spacing: 0.005em;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(255, 90, 69, 0.06), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(95, 212, 255, 0.04), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(245, 196, 94, 0.05), transparent 60%),
    var(--bg);
}

html[lang="th"] body {
  font-family: var(--sans-th);
  line-height: 1.85;
  letter-spacing: 0;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

a {
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color .25s var(--t-ease);
}
a:hover { color: var(--coral); }

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

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; color: inherit; }

em, i {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--amber-2);
  letter-spacing: -0.005em;
}
html[lang="th"] em, html[lang="th"] i {
  font-family: var(--serif);
  color: var(--amber-2);
}

/* ============================================================
   ATMOSPHERE — workshop background
   ============================================================ */

/* Workflow node grid — fine dot lattice */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 50%, transparent 100%);
}

/* Three soft signal-color blooms — rotates the room very slowly */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-glow span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--bloom-op);
  mix-blend-mode: var(--bloom-blend);
  will-change: transform;
}
.bg-glow__a {
  width: 520px; height: 520px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(255, 90, 69, 0.50) 0%, rgba(255, 90, 69, 0) 70%);
  animation: glow-drift-a 28s var(--t-ease) infinite alternate;
}
.bg-glow__b {
  width: 600px; height: 600px;
  top: 35vh; left: -180px;
  background: radial-gradient(circle, rgba(95, 212, 255, 0.30) 0%, rgba(95, 212, 255, 0) 70%);
  animation: glow-drift-b 36s var(--t-ease) infinite alternate;
}
.bg-glow__c {
  width: 700px; height: 700px;
  bottom: -200px; left: 30%;
  background: radial-gradient(circle, rgba(245, 196, 94, 0.22) 0%, rgba(245, 196, 94, 0) 70%);
  animation: glow-drift-c 44s var(--t-ease) infinite alternate;
}
@keyframes glow-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, 80px) scale(1.15); }
}
@keyframes glow-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(120px, -60px) scale(1.08); }
}
@keyframes glow-drift-c {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-90px, -50px) scale(1.12); }
}

/* CRT-faint scanlines — barely there, but it's there */
.bg-scan {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--scan-op);
  mix-blend-mode: var(--scan-blend);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--scan-color) 0px,
    var(--scan-color) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Corner brackets — terminal chrome */
.bracket {
  position: fixed;
  width: 26px; height: 26px;
  z-index: 50;
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.5;
  stroke-linecap: square;
  pointer-events: none;
  opacity: 0.78;
  filter: drop-shadow(0 0 6px rgba(255, 90, 69, 0.4));
}
.bracket--tl { top: 14px;    left: 14px; }
.bracket--tr { top: 14px;    right: 14px; }
.bracket--bl { bottom: 14px; left: 14px; }
.bracket--br { bottom: 14px; right: 14px; }

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 1;
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  position: relative;
  z-index: 4;
  padding-top: 14px;
}
.masthead__rule {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--line-2) 8%,
    var(--coral) 50%,
    var(--line-2) 92%,
    transparent 100%
  );
  margin: 0;
  opacity: 0.85;
}
.masthead__rule--thin {
  background: var(--line);
  height: 1px;
  opacity: 1;
}
.masthead__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}
.brand__logo {
  width: 46px; height: 46px;
  color: var(--text);
  display: inline-flex;
  flex: 0 0 auto;
}
.brand__logo svg { width: 100%; height: 100%; }
.brand__logo--photo {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--coral);
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--coral),
    0 0 14px rgba(255, 90, 69, 0.45);
  background: var(--bg-3);
  transition: transform .4s var(--t-ease), box-shadow .4s var(--t-ease);
}
.brand:hover .brand__logo--photo {
  transform: rotate(-4deg) scale(1.05);
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--coral),
    0 0 22px rgba(255, 90, 69, 0.7);
}
.brand__logo--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__primary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 29px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand__primary--sm { font-size: 22px; font-weight: 600; }
.brand__sub {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin-top: 6px;
  white-space: nowrap;
}

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a {
  color: var(--text-2);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  transition: color .25s var(--t-ease);
}
.nav a::before {
  content: "·";
  position: absolute;
  left: -14px;
  top: 7px;
  color: var(--coral);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .25s var(--t-ease), transform .25s var(--t-ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--t-ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after  { transform: scaleX(1); }
.nav a:hover::before { opacity: 1; transform: translateX(0); }

/* ── Mobile hamburger toggle ──────────────────────────────────
   Hidden on desktop (≥769px); replaces the inline 7-item nav at
   ≤768px and toggles the .nav panel via JS (data-nav-toggle wires
   the click, aria-expanded mirrors panel state). Three coral bars
   morph into an × when [aria-expanded="true"]. Reuses the same
   bracketed-pill chrome as .lang-toggle / .theme-toggle so the
   mobile rail stays visually consistent. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  color: var(--text);
  flex: 0 0 auto;
}
.nav-toggle::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
}
.nav-toggle::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-bottom: 1px solid var(--coral);
  border-right: 1px solid var(--coral);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--coral);
  outline: none;
}
.nav-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}
.nav-toggle__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--coral);
  border-radius: 1px;
  transform-origin: center;
  transition: transform .25s var(--t-ease), opacity .2s var(--t-ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* ── Signed-in chip ─────────────────────────────────────────
   Lives next to lang/theme toggles. Same height + bracket-corner
   chrome so the right rail reads as one cohesive control bar.
   Single horizontal row — avatar · name · × — with sr-only labels
   carrying the localized "Signed in as" / "Sign out" strings.

   Bootstrap script in <head> sets data-auth on <html> before CSS
   parses, so the show/hide swap is FOUC-free. */
.nav__user {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--bg-2);
  position: relative;
  white-space: nowrap;
}
.nav__user::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
}
.nav__user::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-bottom: 1px solid var(--coral);
  border-right: 1px solid var(--coral);
}

.nav__user-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  transition: color .25s var(--t-ease);
}
.nav__user-link:hover .nav__user-name,
.nav__user-link:focus-visible .nav__user-name {
  color: var(--coral-text);
}

.nav__user-avatar {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--coral);
  background: var(--bg-3) center/cover no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-2);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--bg), 0 0 8px rgba(255, 90, 69, 0.22);
}

.nav__user-name {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;
  transition: color .25s var(--t-ease);
}

.nav__user-signout {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0 0 0 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--t-ease), border-color .2s var(--t-ease), background-color .2s var(--t-ease);
}
.nav__user-signout-glyph {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}
.nav__user-signout:hover,
.nav__user-signout:focus-visible {
  color: var(--coral-text);
  border-color: var(--line-2);
  background: var(--bg-3);
}

/* Auth state visibility — bootstrap script in <head> sets data-auth
   on <html> before CSS parses, so there's no FOUC. */
:root[data-auth="signed-in"]  .nav__user { display: inline-flex; }
:root[data-auth="signed-out"] .nav__user { display: none; }

.masthead__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.10em;
  background: var(--bg-2);
  border-radius: 2px;
  position: relative;
}
.lang-toggle::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
}
.lang-toggle::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-bottom: 1px solid var(--coral);
  border-right: 1px solid var(--coral);
}
.lang-toggle__btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-3);
  letter-spacing: inherit;
  font: inherit;
  transition: color .2s var(--t-ease);
}
.lang-toggle__btn[aria-pressed="true"] {
  color: var(--coral-text);
  text-shadow: 0 0 8px rgba(255, 90, 69, 0.5);
}
.lang-toggle__btn:hover { color: var(--text); }
.lang-toggle__sep {
  color: var(--mute);
  user-select: none;
}

/* Theme toggle — pulled out of the masthead and pinned to the bottom-right
   corner so the nav rail breathes. Keeps the lang-toggle's bracketed chrome
   (coral L-corners + mono caps) for visual continuity. Sits at z-index 49 —
   one beneath the .bracket corners (50) so the workshop accents always win
   the corner. Hidden on print. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.10em;
  background: color-mix(in oklab, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-radius: 2px;
  position: fixed;
  bottom: 18px;
  right: 64px;
  z-index: 49;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}
@media print {
  .theme-toggle { display: none; }
}
.theme-toggle::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
}
.theme-toggle::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-bottom: 1px solid var(--coral);
  border-right: 1px solid var(--coral);
}
.theme-toggle__btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-3);
  letter-spacing: inherit;
  font: inherit;
  transition: color .2s var(--t-ease);
}
.theme-toggle__btn[aria-pressed="true"] {
  color: var(--coral);
  text-shadow: 0 0 8px rgba(255, 90, 69, 0.5);
}
.theme-toggle__btn:hover { color: var(--text); }
.theme-toggle__sep {
  color: var(--mute);
  user-select: none;
}

.masthead__meta {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 36px);
  padding-top: 14px;
  padding-bottom: 14px;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
}
.meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.meta-cell--right { justify-self: end; }
.meta-cell--wide  { color: var(--text-3); text-transform: none; letter-spacing: 0.04em; }
.meta-cell__label {
  color: var(--coral);
  font-weight: 500;
}
.meta-cell__value { color: var(--text); }
.meta-cell--wide .meta-cell__value { color: var(--text-2); }

/* Live-data dot prefix on session clock */
.meta-cell--right::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 8px;
  align-self: center;
  box-shadow: 0 0 10px rgba(198, 255, 90, 0.7);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* ============================================================
   SECTION TAG  →  terminal prompt style
   ============================================================ */

.section-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 7px 12px 7px 0;
  margin-bottom: 28px;
  position: relative;
  max-width: 100%;
}
.section-tag::before {
  content: "~/";
  color: var(--coral);
  margin-right: -4px;
  font-weight: 500;
}
.section-tag::after {
  content: " ▸";
  color: var(--coral);
  margin-left: 4px;
  animation: blink-cursor 1.6s steps(2, end) infinite;
}
.section-tag__num {
  color: var(--amber);
  font-weight: 500;
  letter-spacing: 0.10em;
}
.section-tag__name {
  color: var(--text);
  overflow-wrap: anywhere;
  min-width: 0;
}
.section-tag--accent .section-tag__num { color: var(--bg); background: var(--coral); padding: 2px 6px; border-radius: 2px; }
.section-tag--accent::before { color: var(--coral-2); }

@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%,100% { opacity: 0.25; }
}

/* ============================================================
   HEADINGS
   ============================================================ */

.h-display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(42px, 6.2vw, 73px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--text);
  font-optical-sizing: auto;
}
html[lang="th"] .h-display {
  font-family: var(--sans-th);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.h-display--invert { color: var(--text); }

.lead {
  font-family: var(--editorial);
  font-style: italic;
  font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.5;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin: 0 0 18px;
}
html[lang="th"] .lead {
  font-family: var(--sans-th);
  font-style: normal;
  font-weight: 400;
  line-height: 1.78;
  color: var(--text-2);
}
.lead--invert { color: var(--text); }
.lead em, .lead i { color: var(--amber-2); }

/* ============================================================
   §01  HERO
   ============================================================ */

.hero {
  padding-top: clamp(40px, 8vw, 96px);
  padding-bottom: clamp(36px, 6vw, 72px);
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4.5vw, 80px);
  align-items: start;
}

.hero__lede {
  position: relative;
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 7.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: var(--text);
  font-optical-sizing: auto;
}
.hero__title span { display: inline-block; }
.hero__title--accent {
  color: var(--coral);
  font-style: italic;
  font-family: var(--editorial);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1.05em;
  text-shadow: 0 0 22px rgba(255, 90, 69, 0.35);
}
html[lang="th"] .hero__title {
  font-family: var(--sans-th);
  font-size: clamp(34px, 6.6vw, 76px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 600;
}
html[lang="th"] .hero__title--accent {
  font-family: var(--sans-th);
  font-style: normal;
  font-weight: 700;
}

.hero__deck {
  font-family: var(--sans);
  font-size: clamp(23px, 2.1vw, 27px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 30px;
}
html[lang="th"] .hero__deck {
  font-family: var(--sans-th);
  line-height: 1.85;
}

.hero__cta-row {
  display: flex;
  gap: 16px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}

.hero__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.hero__pillars li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pillar__num {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.18em;
  color: var(--coral);
  font-weight: 500;
}
.pillar__label {
  font-family: var(--sans);
  font-size: 21px;
  color: var(--text);
  line-height: 1.4;
}
html[lang="th"] .pillar__label { font-family: var(--sans-th); }

/* ─── Plate (schematic) ──────────────────────────────────── */

.hero__plate,
.channel__plate {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.20) 100%),
    var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 18px 18px 16px;
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hero__plate::before,
.channel__plate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--coral) 0%, var(--amber) 50%, var(--cyan) 100%);
  opacity: 0.85;
}
.hero__plate::after,
.channel__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 0;
}

.plate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.plate__title { color: var(--text); font-weight: 500; }
.plate__id    { color: var(--coral); font-weight: 500; }

.plate__svg {
  width: 100%;
  height: auto;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

/* 3-page tracing-paper stack: page A fades out as B fades in.
   Wire-flow animation lives on .plate__wires and runs continuously
   across pages because each page owns its own <g class="plate__wires">
   with the same keyframe — opacity swap, not DOM swap. */
.plate__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.plate__stack > .plate__svg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  pointer-events: none;
}
.plate__stack > .plate__svg[data-plate-current] { opacity: 1; }
.plate__hub-text--sm { font-size: 13px; }

.plate__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.plate__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-2);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.plate__dot[aria-pressed="true"] { background: var(--coral); transform: scale(1.25); }
.plate__dot:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .plate__stack > .plate__svg { transition: none; }
}
.plate__svg text { fill: var(--text-2); text-transform: uppercase; }
.plate__svg .plate__hub-text {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  fill: var(--text);
  text-transform: none;
}
.plate__svg .plate__hub-sub {
  font-size: 8px;
  fill: var(--coral);
  letter-spacing: 0.18em;
}
.plate__svg .t-mono-sm { font-size: 7.5px; letter-spacing: 0.10em; }

.plate__group rect, .plate__hub circle {
  stroke: var(--line-3);
  fill: rgba(255,255,255,0.015);
}
.plate__hub circle:first-of-type {
  stroke: var(--coral);
  filter: drop-shadow(0 0 6px rgba(255, 90, 69, 0.4));
}

.plate__wires path {
  stroke: var(--coral);
  stroke-dasharray: 4 6;
  stroke-dashoffset: 0;
  opacity: 0.85;
  animation: wire-flow 4s linear infinite;
}
.plate__wires circle { fill: var(--coral); }
@keyframes wire-flow {
  to { stroke-dashoffset: -40; }
}

.plate__anno text {
  fill: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 8.5px;
}
.plate__anno line { stroke: var(--line-2); }

.plate__foot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
  position: relative;
  z-index: 1;
}
.plate__foot::before {
  content: "// ";
  color: var(--coral);
}

/* Hero creed strip */
.hero__creed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 48px);
  font-family: var(--editorial);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.1vw, 39px);
  letter-spacing: 0.02em;
  color: var(--text);
  margin: clamp(48px, 7vw, 88px) 0 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero__creed-word { color: var(--text); }
.hero__creed-word:nth-child(3) { color: var(--coral); }
.hero__creed-word:nth-child(5) { color: var(--amber); }
.hero__creed-dot {
  color: var(--text-3);
  font-size: 0.5em;
}
html[lang="th"] .hero__creed {
  font-family: var(--sans-th);
  font-style: normal;
  font-weight: 500;
}

/* Marquee — workflow ticker */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--coral);
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 38px,
      rgba(255, 90, 69, 0.10) 38px,
      rgba(255, 90, 69, 0.10) 39px
    );
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-x 60s linear infinite;
}
.marquee__track span {
  padding: 0 18px;
}
.marquee__track span:nth-child(odd)  { color: var(--coral); }
.marquee__track span:nth-child(even) { color: var(--amber); opacity: 0.85; }
@keyframes scroll-x {
  to { transform: translateX(-50%); }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

.trust {
  padding-top: 36px;
  padding-bottom: 36px;
  text-align: center;
}
.trust__rule {
  height: 1px;
  background: var(--line);
  margin: 0;
}
.trust__label {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 22px 0 22px;
}
.trust__label::before { content: "[ "; color: var(--coral); }
.trust__label::after  { content: " ]"; color: var(--coral); }

.trust__row {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 48px);
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: transform .3s var(--t-ease);
}
.trust__item:hover {
  transform: translateY(-2px);
}
.trust__item img {
  height: 28px;
  width: auto;
}
.trust__item--text {
  color: var(--text-3);
  font-style: italic;
  font-family: var(--editorial);
  font-size: 21px;
  letter-spacing: 0;
  filter: none;
  opacity: 1;
}
.trust__more::before { content: "+ "; color: var(--coral); }

/* ============================================================
   §02  PRACTICE
   ============================================================ */

.practice {
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(60px, 8vw, 110px);
}
.practice__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.practice__col--lede { position: sticky; top: 30px; }

.practice__portrait {
  margin: 0 0 28px;
  text-align: left;
}
.practice__portrait-frame {
  position: relative;
  width: clamp(180px, 22vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--coral);
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 0 7px var(--line-2),
    0 18px 38px -10px rgba(0,0,0,0.6),
    0 0 30px rgba(255, 90, 69, 0.25);
  background: var(--bg-3);
}
.practice__portrait-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.practice__portrait figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  font-family: var(--mono);
}
.practice__portrait-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  color: var(--text);
  letter-spacing: -0.015em;
}
.practice__portrait-role {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 6px;
}

.practice__col--body p {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 25px;
  line-height: 1.72;
  max-width: 62ch;
}
html[lang="th"] .practice__col--body p { line-height: 1.92; }
.practice__col--body p:first-of-type {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 25px;
  color: var(--text);
  font-weight: 400;
  line-height: 1.55;
}
html[lang="th"] .practice__col--body p:first-of-type {
  font-family: var(--sans-th);
  font-style: normal;
  font-weight: 400;
  line-height: 1.85;
}

/* Credential list — IDE definition rows */
.cred-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.cred-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.cred-list__k {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}
.cred-list__v {
  font-family: var(--sans);
  font-size: 22px;
  color: var(--text);
  line-height: 1.55;
}
html[lang="th"] .cred-list__v { font-family: var(--sans-th); line-height: 1.78; }

/* ============================================================
   §03  CURRICULUM
   ============================================================ */

.curriculum {
  padding: clamp(70px, 8vw, 120px) 0;
  position: relative;
}
.curriculum::before {
  content: "";
  position: absolute;
  inset: 40px var(--gutter);
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.curriculum__title {
  max-width: 18ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.curriculum__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  counter-reset: discipline;
}

.discipline {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 60%),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 26px 28px;
  transition: border-color .3s var(--t-ease), transform .3s var(--t-ease), box-shadow .3s var(--t-ease);
  overflow: hidden;
}
.discipline::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--coral);
  transition: width .5s var(--t-ease);
}
.discipline::after {
  content: "ACTIVE";
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: var(--lime);
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.55;
  background: rgba(198, 255, 90, 0.04);
}
.discipline:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.discipline:hover::before { width: 100%; }
.discipline:hover::after  { opacity: 0.85; }

.discipline__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  padding-right: 80px;
}
.discipline__num {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--coral);
  font-weight: 500;
  padding: 3px 8px;
  border: 1px solid var(--coral);
  border-radius: 2px;
  flex: 0 0 auto;
}
.discipline__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
  line-height: 1.2;
}
html[lang="th"] .discipline__title { font-family: var(--sans-th); line-height: 1.4; font-weight: 600; }

.discipline > p {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 23px;
  line-height: 1.65;
}
html[lang="th"] .discipline > p { font-family: var(--sans-th); line-height: 1.85; }

.discipline__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.discipline__bullets li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 21px;
  color: var(--text-2);
  line-height: 1.5;
  font-family: var(--sans);
}
html[lang="th"] .discipline__bullets li { font-family: var(--sans-th); line-height: 1.78; }
.discipline__bullets li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--coral);
  font-size: 17px;
}

/* ============================================================
   §04  WORKSHOP / COMMUNITY  (full-bleed coral panel)
   ============================================================ */

.workshop {
  padding: clamp(70px, 9vw, 130px) 0;
  margin-top: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 90, 69, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(245, 196, 94, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border-top: 1px solid var(--coral);
  border-bottom: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.workshop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 90, 69, 0.08) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000, transparent 100%);
}

.workshop__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas:
    "lede manifest"
    "incl manifest"
    "incl cta";
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  position: relative;
}
.workshop__lede     { grid-area: lede; min-width: 0; }
.workshop__manifest { grid-area: manifest; min-width: 0; }
.workshop__inclusions { grid-area: incl; min-width: 0; }
.workshop__cta      { grid-area: cta; min-width: 0; }

.workshop__title-sub {
  display: block;
  font-family: var(--editorial);
  font-style: italic;
  font-size: 0.55em;
  color: var(--amber-2);
  font-weight: 400;
  margin-top: 10px;
  letter-spacing: 0;
}
html[lang="th"] .workshop__title-sub {
  font-family: var(--sans-th);
  font-style: normal;
  font-weight: 400;
}

.workshop__manifest {
  display: grid;
  gap: 0;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 8px 22px;
  backdrop-filter: blur(2px);
}
.workshop__manifest > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.workshop__manifest > div:last-child { border-bottom: 0; }
.workshop__manifest dt {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0;
  font-weight: 500;
}
.workshop__manifest dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 22px;
  color: var(--text);
  line-height: 1.5;
}
html[lang="th"] .workshop__manifest dd { font-family: var(--sans-th); line-height: 1.78; }

.workshop__inclusions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.workshop__inclusions li {
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid var(--line);
  font-size: 23px;
  color: var(--text);
  line-height: 1.55;
  font-family: var(--sans);
  counter-increment: inc-counter;
}
.workshop__inclusions { counter-reset: inc-counter; }
html[lang="th"] .workshop__inclusions li { font-family: var(--sans-th); line-height: 1.85; }
.workshop__inclusions li::before {
  content: "0" counter(inc-counter);
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.10em;
  color: var(--coral);
  font-weight: 500;
}

.workshop__cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.workshop__finepr {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* ============================================================
   §05  CHANNEL
   ============================================================ */

.channel {
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(70px, 8vw, 120px);
}
.channel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.channel__playlist {
  list-style: none;
  margin: 30px 0 32px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.channel__playlist li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  position: relative;
  transition: padding-left .3s var(--t-ease);
}
.channel__playlist li::before {
  content: "▶";
  position: absolute;
  left: -2px;
  top: 16px;
  color: var(--coral);
  font-size: 9px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--t-ease), transform .3s var(--t-ease);
}
.channel__playlist li:hover { padding-left: 14px; }
.channel__playlist li:hover::before { opacity: 1; transform: translateX(0); }
.channel__playlist li a {
  font-family: var(--sans);
  font-size: 23px;
  color: var(--text);
  line-height: 1.45;
  transition: color .25s var(--t-ease);
}
html[lang="th"] .channel__playlist li a { font-family: var(--sans-th); line-height: 1.7; }
.channel__playlist li a:hover { color: var(--coral); }
.ep__num {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--coral);
  font-weight: 500;
}

/* Telemetry — CRT bar chart */
.telemetry {
  position: relative;
  z-index: 1;
}
.telemetry__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.06em;
}
.telemetry__k { color: var(--coral); text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; }
.telemetry__v { color: var(--text); font-size: 18px; }

.telemetry__bars {
  margin-top: 22px;
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px;
  align-items: center;
  gap: 14px;
}
.bar span {
  display: block;
  height: 14px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.35) 0,
      rgba(0,0,0,0.35) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(to right, var(--coral) 0%, var(--amber) 100%);
  width: var(--w, 50%);
  border-radius: 1px;
  position: relative;
  box-shadow:
    0 0 12px rgba(255, 90, 69, 0.25),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.15);
  animation: bar-grow 1.4s var(--t-ease) both;
}
.bar span::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -6px;
  width: 2px;
  background: var(--amber-2);
  box-shadow: 0 0 8px rgba(255, 217, 132, 0.7);
}
@keyframes bar-grow {
  from { width: 0; }
}
.bar label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}
.telemetry__cap {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 14px 0 0;
}
.telemetry__cap::before { content: "// "; color: var(--coral); }

/* ============================================================
   §06  CONTACT
   ============================================================ */

/* §06 FAQ — beginner questions, answered. Mirrors workshop__manifest border/spacing rhythm. */
.faq {
  padding: clamp(70px, 8vw, 110px) 0;
  position: relative;
  border-top: 1px solid var(--line);
}
.faq h2 {
  font-size: clamp(40px, 5.4vw, 72px);
  margin-top: 8px;
}
.faq .lead { max-width: 820px; }
.faq__list {
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.faq__item {
  padding: clamp(26px, 3vw, 38px) clamp(8px, 2vw, 20px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.faq__q {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  position: relative;
  padding-left: 32px;
  padding-right: 8px;
}
.faq__q::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--coral);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.faq__a {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-2);
  margin: 0 8px 0 32px;
  position: relative;
}
.faq__a::before {
  content: "A.";
  position: absolute;
  left: -32px;
  top: 0;
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
html[lang="th"] .faq__q,
html[lang="th"] .faq__a {
  font-family: var(--sans-th);
  line-height: 1.85;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.contact {
  padding: clamp(70px, 8vw, 120px) 0;
  position: relative;
  border-top: 1px solid var(--line);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.contact__lede h2 {
  font-size: clamp(48px, 6vw, 88px);
}
.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.contact__list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact__k {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}
.contact__list li a {
  font-family: var(--sans);
  font-size: 23px;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--t-ease), color .25s var(--t-ease);
}
.contact__list li a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition: color .25s var(--t-ease), background .25s var(--t-ease), transform .25s var(--t-ease);
  cursor: pointer;
  white-space: nowrap;
}
html[lang="th"] .btn { font-family: var(--sans-th); letter-spacing: 0.04em; text-transform: none; font-size: 21px; }

.btn__arrow {
  font-size: 21px;
  display: inline-block;
  transition: transform .3s var(--t-ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ink {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--btn-ink-fg);
  box-shadow:
    0 8px 20px -10px rgba(255, 90, 69, 0.7),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--ink:hover {
  background: var(--coral-2);
  color: var(--btn-ink-fg);
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px -8px rgba(255, 90, 69, 0.85),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-3);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: rgba(255, 90, 69, 0.06);
}

.btn--accent {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg);
  box-shadow:
    0 12px 28px -10px rgba(245, 196, 94, 0.65),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn--accent:hover {
  background: var(--amber-2);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px -10px rgba(245, 196, 94, 0.8),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ============================================================
   COLOPHON
   ============================================================ */

.colophon {
  border-top: 1px solid var(--line-2);
  padding: 36px 0 44px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  position: relative;
  z-index: 1;
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.colophon__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.colophon__mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--coral);
  box-shadow: 0 0 8px rgba(255, 90, 69, 0.4);
}
.colophon__tag {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-left: 8px;
}

.colophon__meta {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}
.colophon__sep {
  color: var(--mute);
}
.colophon__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.colophon__legal a {
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast, .2s) ease, border-color var(--t-fast, .2s) ease;
}
.colophon__legal a:hover,
.colophon__legal a:focus-visible {
  color: var(--coral-text, var(--coral));
  border-bottom-color: var(--coral);
}
.colophon__legal > span {
  color: var(--mute);
}

/* ============================================================
   REVEAL ANIMATIONS  (used by main.js IO observer)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--t-ease), transform .8s var(--t-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .hero__grid,
  .practice__grid,
  .channel__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .practice__col--lede { position: static; }
  .curriculum__list { grid-template-columns: 1fr; }
  .workshop__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lede"
      "manifest"
      "incl"
      "cta";
  }
  .masthead__inner {
    grid-template-columns: auto auto;
    row-gap: 16px;
  }
  .nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .masthead__meta { grid-template-columns: auto auto; row-gap: 6px; }
  .meta-cell--right { justify-self: start; }
  .meta-cell--wide  { grid-column: 1 / -1; }
}

/* ── 768px iPad portrait — nav may be cramped at 18px mono with 3-col grid ── */
@media (max-width: 768px) {
  .masthead__inner {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }
  .nav {
    font-size: 14px;
    gap: clamp(10px, 1.8vw, 20px);
    justify-content: center;
  }
  .lang-toggle { font-size: 14px; }
  /* Floating theme toggle — tablet adjustment. Bracket corners still visible
     here (they only hide at ≤640px) so keep the same inset as desktop. */
  .theme-toggle { font-size: 14px; padding: 6px 10px; }
  /* Hide the name on tablet so the chip stays compact alongside the
     lang toggle — the avatar + × still let the user identify themselves
     and sign out; full name re-appears on desktop ≥ 769px. */
  .nav__user-name { display: none; }

  /* Curriculum stays 1-col from 960 rule; reduce discipline card padding */
  .discipline { padding: 20px 18px 22px; }

  /* Reduce bar label on tablet to prevent overflow in the 1fr/120px grid */
  .bar { grid-template-columns: 1fr 110px; }
  .bar label { font-size: 14px; }
}

@media (max-width: 640px) {
  /* Hide bracket corners on small screens — they overlap content */
  .bracket { display: none; }

  .hero__title  { font-size: clamp(36px, 11vw, 56px); }
  .hero__creed  { font-size: clamp(23px, 6.5vw, 31px); flex-wrap: wrap; }
  .h-display    { font-size: clamp(36px, 9.75vw, 52px); }
  .discipline__head { padding-right: 0; }
  .discipline::after { position: static; display: inline-block; margin-bottom: 12px; }
  .cred-list li,
  .contact__list li,
  .workshop__manifest > div { grid-template-columns: 1fr; gap: 4px; }

  /* Masthead — stack brand + lang-toggle on two rows, nav below */
  .masthead__inner {
    grid-template-columns: 1fr auto;
    row-gap: 12px;
  }
  .nav {
    grid-column: 1 / -1;
    font-size: 15px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lang-toggle { padding: 5px 10px; font-size: 15px; }
  .masthead__controls { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

  /* Floating theme toggle — on mobile the .bracket corners hide (see line ~2230)
     so the toggle can slide to the corner without colliding with them. */
  .theme-toggle {
    padding: 5px 10px;
    font-size: 15px;
    bottom: 14px;
    right: 14px;
  }

  /* Meta strip — 2 equal cols so auto-sized content doesn't overflow */
  .masthead__meta {
    grid-template-columns: 1fr 1fr;
    font-size: 13px;
    gap: 4px 12px;
  }
  .meta-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .meta-cell--wide {
    grid-column: 1 / -1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .meta-cell--right {
    justify-self: start;
  }

  /* Hero deck max-width — prevent over-long lines */
  .hero__deck { max-width: 100%; }

  /* Telemetry bar label: keep it on one line on narrow screens */
  .bar { grid-template-columns: 1fr 90px; }
  .bar label { font-size: 13px; }

  /* Colophon wraps gracefully */
  .colophon__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .colophon__meta { font-size: 14px; }

  /* Section padding — reduce on mobile */
  .practice, .curriculum, .channel, .contact {
    padding-top: clamp(40px, 8vw, 64px);
    padding-bottom: clamp(40px, 8vw, 64px);
  }
  .workshop { padding: clamp(40px, 8vw, 64px) 0; }

  /* Discipline card ACTIVE badge stays in flow */
  .discipline { padding-top: 18px; }
  .discipline > p { font-size: 18px; }
  .discipline__bullets li { font-size: 17px; }
  .discipline__title { font-size: 22px; }

  /* Contact list link — break long URLs */
  .contact__list li a { word-break: break-all; font-size: 18px; }

  /* Workshop inclusions — smaller on 390px */
  .workshop__inclusions li { font-size: 18px; }
  .workshop__manifest dd { font-size: 18px; }
}

/* ── Mobile hamburger panel (≤ 768px) ──────────────────────────
   Replaces the inline 7-item .nav with a drop-down panel anchored
   to the bottom of <header class="masthead"> (the header carries
   position: relative; see line ~419). The hamburger button in
   .masthead__controls toggles [data-open] on the panel via
   js/main.js setupNavToggle(). Lives AFTER the earlier 640/768px
   blocks so its overrides (flex-direction, flex-wrap: nowrap,
   grid-column) win the cascade. */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  /* Brand on the left, controls (hamburger + chip + lang) on the right.
     Override the 640px `1fr auto` rule too — same shape, no surprise.
     `position: static` demotes the masthead__inner (which is also a
     .container, and .container declares position:relative) so it stops
     being the containing block for the absolutely-positioned .nav panel
     below. The panel then anchors to <header class="masthead"> (which
     does have position:relative; line ~419) and drops past the meta row
     instead of overlapping it. The brand column uses minmax(0, auto) so
     it can shrink below its intrinsic min-content when the controls + gap
     would otherwise push past the viewport (observed on Pixel 5: brand
     intrinsic 276px + controls 147px > 390px viewport, clipping the lang
     toggle off the right edge under body{overflow-x:hidden}). */
  .masthead__inner {
    grid-template-columns: minmax(0, auto) auto;
    gap: 12px;
    row-gap: 12px;
    position: static;
  }
  .masthead__controls {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Pull the inline nav out of the grid and into a full-bleed panel
     below the masthead. display:none keeps it collapsed until the
     hamburger flips data-open. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 8px 0;
    background: color-mix(in oklab, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--coral);
    z-index: 48;
    font-size: 16px;
    letter-spacing: 0.14em;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  }
  .nav[data-open] { display: flex; }
  .nav a {
    padding: 14px 24px;
    border-bottom: 1px dashed var(--line);
    text-align: left;
    white-space: nowrap;
  }
  .nav a:last-child { border-bottom: 0; }
  /* Realign the link-hover decorations for vertical layout. */
  .nav a::before { left: 10px; top: 18px; }
  .nav a::after  { display: none; }
  /* Specificity tie-breaker. The post-template rule
     `.masthead--post .nav { ... flex-wrap: wrap }` at line ~3286 has
     specificity (0,2,0) and would otherwise beat our `.nav` (0,1,0)
     here. Cosmetically inert because flex-direction:column makes wrap a
     no-op with 5 short items, but we keep the cascade deterministic. */
  .masthead--post .nav { flex-wrap: nowrap; }
}

/* 390px-specific: very tight mobile */
@media (max-width: 430px) {
  /* Hide the Dispatch meta-cell — "From the studio, Bangkok" doesn't fit 390px */
  .meta-cell--wide { display: none; }

  .brand__primary { font-size: 22px; }
  /* Tighten the subtitle so "THINK · MAKE · AUTOMATE" fits one line on
     narrow viewports — the brand column is `1fr` under the 768px
     stack-rule, so the wordmark shares width with the masthead controls. */
  .brand__sub { font-size: 11px; letter-spacing: 0.10em; }

  .hero__pillars { grid-template-columns: 1fr; }
  .pillar__label { font-size: 17px; }
  .pillar__num { font-size: 14px; }

  .trust__row { gap: 14px; }
  .trust__item { font-size: 16px; }
  .trust__item--text { font-size: 16px; }

  .practice__portrait-frame { width: clamp(140px, 50vw, 180px); }

  .channel__playlist li { grid-template-columns: 60px 1fr; }

  /* Buttons full-width on 390px */
  .hero__cta-row { flex-direction: column; }
  .btn { justify-content: center; font-size: 16px; }
}

/* ============================================================
   Dispatch — daily news blog
   Post detail (/blog/<slug>/) + listing (/blog/) + cards
   used in §06 Dispatch on the landing page.
   ============================================================ */

.post-main {
  padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 6vw, 88px);
}

.post {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  max-width: 760px;
  margin: 0 auto;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.breadcrumbs li + li::before {
  content: "▸";
  margin-right: 10px;
  color: var(--coral);
}
.breadcrumbs a { color: var(--text-2); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.breadcrumbs a:hover { color: var(--text); border-bottom-color: var(--coral); }
.breadcrumbs [aria-current="page"] span { color: var(--coral); }

.post__header { display: grid; gap: 16px; }
.post__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.post__deck {
  font-family: var(--editorial);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
}
.post__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 32px;
  margin: 4px 0 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-3);
}
.post__meta-row { display: grid; gap: 4px; }
.post__meta dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  font-size: 11px;
}
.post__meta dd { margin: 0; color: var(--text-2); }
.post__meta a { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.post__meta a:hover { border-bottom-color: var(--coral); }

.post__cover {
  margin: 8px 0 0 0;
  padding: 0;
}
.post__cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.post__body {
  font-family: var(--sans-th), var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.post__body > * + * { margin-top: 1.1em; }
.post__body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 1.8em;
  scroll-margin-top: 120px;
}
.post__body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.25;
  color: var(--text);
  margin-top: 1.4em;
  scroll-margin-top: 120px;
}
.post__body p { margin: 0; }
.post__body a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--coral);
  transition: background-color 0.18s ease;
}
.post__body a:hover { background-color: rgba(255, 90, 69, 0.12); }
.post__body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
}
.post__body pre {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 16px 18px;
  border-radius: 2px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.post__body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.post__body blockquote {
  border-left: 3px solid var(--coral);
  padding: 0 0 0 18px;
  color: var(--text-2);
  font-style: italic;
}
.post__body ul, .post__body ol {
  padding-left: 1.3em;
}
.post__body li + li { margin-top: 0.4em; }
.post__body img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.post__body hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 2em 0;
}

.post__sources {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 18px 22px;
  border-radius: 2px;
}
.post__sources-h {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral-text);
  margin: 0 0 12px 0;
}
.post__sources ol { margin: 0; padding-left: 1.2em; font-size: 15px; }
.post__sources a {
  color: var(--text-2);
  word-break: break-all;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
}
.post__sources a:hover { color: var(--text); border-bottom-color: var(--coral); }

.post__footer { display: grid; gap: 28px; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post__tag {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  text-decoration: none;
  background: var(--bg-2);
}
.post__tag:hover { color: var(--text); border-color: var(--coral); }

.post__cta {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  position: relative;
}
.post__cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--coral);
}
.post__cta-deck {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.post__cta .btn { justify-self: start; }

.post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.post__nav-link {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color 0.18s ease;
}
.post__nav-link:hover { border-color: var(--coral); }
.post__nav-link--next { text-align: right; grid-column: 2; }
.post__nav-link--prev { grid-column: 1; }
.post__nav-dir {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral-text);
}
.post__nav-title { color: var(--text); font-size: 15px; line-height: 1.35; }

.post__related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.post__related li a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  font-family: var(--sans-th), var(--sans);
  transition: border-color 0.18s ease;
}
.post__related li a:hover { border-color: var(--coral); }
.post__related-h {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 0 0 12px 0;
}

/* ---- Latest-dispatch strip (top-of-page editorial eyebrow) ----
   Slim row between masthead and §01 hero. Single latest post, single <a>.
   tools/build-blog.js omits the entire <aside> when no post is eligible
   for the locale, so we never render an empty complementary landmark
   (axe-core would flag it). */

.dispatch-latest {
  margin-top: 18px;
  margin-bottom: 8px;
}

.dispatch-latest__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  font-family: var(--sans-th), var(--sans);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}
.dispatch-latest__link:hover,
.dispatch-latest__link:focus-visible {
  border-color: var(--coral);
  background: var(--bg-3);
}
.dispatch-latest__link:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.dispatch-latest__link:hover .dispatch-latest__arrow,
.dispatch-latest__link:focus-visible .dispatch-latest__arrow {
  transform: translateX(3px);
}

/* Coral text on bg-2 must use --coral-text so it stays readable on cream
   (#ebe6d4) in light mode. --coral-text aliases to --coral in dark mode and
   darkens to #a02810 in light mode (AA-safe at small sizes). The link border
   stays --coral as a graphical accent. */
.dispatch-latest__prompt {
  font-family: var(--mono);
  color: var(--coral-text);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.dispatch-latest__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-text);
  white-space: nowrap;
}
.dispatch-latest__sep {
  color: var(--coral-text);
  font-family: var(--mono);
  flex: 0 0 auto;
}
.dispatch-latest__date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  flex: 0 0 auto;
}
.dispatch-latest__dash {
  color: var(--text-3);
  flex: 0 0 auto;
}
.dispatch-latest__title {
  color: var(--text);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  /* Fade-mask instead of ellipsis: Thai has no inter-word space,
     so text-overflow: ellipsis can sever a vowel mark from its consonant. */
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.dispatch-latest__arrow {
  color: var(--coral-text);
  font-family: var(--mono);
  margin-left: auto;
  padding-left: 8px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

@media (max-width: 640px) {
  .dispatch-latest__link {
    flex-wrap: wrap;
    row-gap: 4px;
    border-radius: 14px;
    padding: 10px 12px;
  }
  .dispatch-latest__title {
    flex-basis: 100%;
    order: 5;
    /* On mobile, allow a 2-line wrap without mask so the title is fully readable. */
    white-space: normal;
    -webkit-mask-image: none;
            mask-image: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .dispatch-latest__dash { display: none; }
  .dispatch-latest__arrow { order: 6; margin-left: 0; }
}

/* ---- Dispatch cards (used in listing pages + landing §08) ---- */

.dispatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.dispatch-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.dispatch-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--coral);
  transition: height 0.2s ease;
}
.dispatch-card:hover { border-color: var(--coral); }
.dispatch-card:hover::before { height: 2px; }
.dispatch-card__link {
  display: grid;
  gap: 12px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
}
.dispatch-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.dispatch-card__pill {
  color: var(--coral-text);
  padding: 3px 8px;
  border: 1px solid var(--coral);
  border-radius: 2px;
}
.dispatch-card__pill--workflow { color: var(--amber-text); border-color: var(--amber); }
.dispatch-card__pill--tool-drop { color: var(--cyan-text); border-color: var(--cyan); }
.dispatch-card__pill--bts { color: var(--lime-text); border-color: var(--lime); }
.dispatch-card__date { color: var(--text-3); }
.dispatch-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.dispatch-card__deck {
  font-family: var(--sans-th), var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.dispatch-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.dispatch-card__cta { color: var(--coral-text); letter-spacing: 0.06em; }

/* ---- Blog index (listing) page ---- */

.page-blog-index { background: var(--bg); color: var(--text); }

.blog-index { position: relative; z-index: 1; }

.blog-index__hero {
  padding: clamp(64px, 9vw, 120px) 0 32px;
  display: grid;
  gap: 18px;
}
.blog-index__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.blog-index__deck {
  font-family: var(--editorial);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0;
}

.blog-index__grid { padding: 32px 0 96px; }

.blog-index__cta { padding: 0 0 96px; }
.blog-index__cta .post__cta {
  display: grid;
  gap: 14px;
  justify-items: start;
}

@media (max-width: 640px) {
  .blog-index__hero { padding: 56px 0 24px; gap: 14px; }
  .blog-index__title { font-size: clamp(40px, 11vw, 56px); }
  .blog-index__deck { font-size: 17px; }
  .blog-index__grid { padding: 24px 0 64px; }
}

@media (max-width: 640px) {
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; grid-column: 1; }
  .post__nav-link--prev { grid-column: 1; }
  .post__body { font-size: 17px; }
}

/* Landing-page §06 Dispatch section wrapper */
.dispatch { padding-top: 48px; padding-bottom: 48px; }
.dispatch__head {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 16px 0 28px 0;
}
.dispatch__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ============================================================
   TUTORIAL PAGES — long-form companion articles
   Reuses .container, .section-tag, .h-display tokens.
   Scoped under .tutorial so homepage layout is untouched.
   ============================================================ */

.tutorial {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(56px, 8vw, 96px);
  position: relative;
  z-index: 1;
}

.tutorial__breadcrumb {
  font: 500 13px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-3);
  margin-bottom: 28px;
}
.tutorial__breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px dashed var(--line-3);
  padding-bottom: 1px;
  transition: color 0.2s var(--t-quick), border-color 0.2s var(--t-quick);
}
.tutorial__breadcrumb a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.tutorial__breadcrumb-sep { color: var(--mute); margin: 0 10px; }
.tutorial__breadcrumb-here { color: var(--text-2); }

.tutorial__h1 {
  font: 600 clamp(34px, 5vw, 52px)/1.1 var(--display);
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.tutorial__h1 em {
  font-family: var(--editorial);
  font-style: italic;
  color: var(--amber-2);
}

.tutorial__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  font: 500 12px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  margin-top: 18px;
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.tutorial__meta time { color: var(--text-2); }
.tutorial__lang-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--coral);
}

.tutorial__body {
  max-width: 720px;
  font: 400 19px/1.7 var(--sans-th);
  color: var(--text);
}
.tutorial__body > * + * { margin-top: 22px; }
.tutorial__body h2 {
  font: 600 clamp(24px, 3vw, 30px)/1.25 var(--display);
  letter-spacing: -0.01em;
  margin-top: 56px;
  color: var(--text);
}
.tutorial__body h2::before {
  content: '§ ';
  color: var(--coral);
  font: 500 0.65em var(--mono);
  vertical-align: 0.25em;
  margin-right: 4px;
}
.tutorial__body h3 {
  font: 600 21px/1.35 var(--display);
  margin-top: 36px;
  color: var(--text);
}
.tutorial__body em { font-family: var(--editorial); font-style: italic; color: var(--amber-2); }
.tutorial__body strong { color: var(--text); font-weight: 600; }
.tutorial__body ul, .tutorial__body ol {
  padding-left: 22px;
  color: var(--text);
}
.tutorial__body li + li { margin-top: 8px; }
.tutorial__body li::marker { color: var(--coral); }
.tutorial__body a {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--t-quick);
}
.tutorial__body a:hover { text-decoration-color: var(--coral); }

.tutorial__lede {
  font: 400 22px/1.5 var(--editorial);
  font-style: italic;
  color: var(--text);
  margin-bottom: 32px;
  border-left: 2px solid var(--coral);
  padding-left: 18px;
}

.tutorial__body code {
  font: 500 0.9em/1.4 var(--mono);
  color: var(--cyan-2);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 2px;
}
.tutorial__body pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--coral);
  border-radius: 4px;
  padding: 18px 20px;
  overflow-x: auto;
  font: 500 14px/1.55 var(--mono);
  color: var(--text-2);
  margin-top: 18px;
  margin-bottom: 18px;
}
.tutorial__body pre code {
  background: transparent;
  padding: 0;
  color: var(--text-2);
  font-size: inherit;
}

.tutorial__cta {
  margin-top: 72px;
  padding: 28px 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 16px;
}
.tutorial__cta h3 {
  font: 500 22px/1.3 var(--display);
  color: var(--text);
  margin: 0;
}
.tutorial__cta p { font-size: 17px; color: var(--text-2); margin: 0; }
.tutorial__cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

@media (max-width: 720px) {
  .tutorial__body { font-size: 17px; }
  .tutorial__body h2 { font-size: 22px; margin-top: 44px; }
  .tutorial__body h3 { font-size: 19px; }
  .tutorial__lede { font-size: 19px; padding-left: 14px; }
  .tutorial__breadcrumb { font-size: 12px; }
  .tutorial__cta { padding: 22px; }
}

/* ============================================================
   RESPONSIVE OVERFLOW FIXES — blog/dispatch pages
   Appended 2026-05-11. Each rule below was added to keep
   `documentElement.scrollWidth === clientWidth` at viewport widths
   360, 390, 768, 1024, 1280, 1440 on /blog/ and /blog/<slug>/.
   Verified via Playwright; offenders identified per rule below.
   ============================================================ */

/* (1) Long inline <code> tokens and inline links inside .post__body
       (e.g. `CLAUDE_CODE_ENABLE_GATEWAY_MODEL_DISCOVERY=1`) expanded
       .post__body past viewport on 360/390. Allow break-anywhere. */
.post__body { overflow-wrap: anywhere; word-break: normal; }
.post__body code { overflow-wrap: anywhere; word-break: break-word; }
.post__body a { overflow-wrap: anywhere; }
.post__body pre { max-width: 100%; }

/* (2) Banner image in the first paragraph (square brand logos rendered
       as 460×460 squares spanning full content width). Cap height so
       the article still reads like an article, not a giant logo.
       Pin to a warm-paper backdrop (instead of var(--bg-3), which
       resolves to near-black in dark theme) so dark-on-transparent
       brand marks like the OpenAI logo stay legible in both themes. */
.post__body > p:first-child img {
  max-height: 220px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 20px;
  background: #f5f1e6;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

/* (3) Sources list — already had word-break: break-all (line 2304),
       reinforce parent so the <ol> can't expand. */
.post__sources { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }

/* (4) Dispatch cards — long Thai headlines without spaces could bleed
       out of the card on narrow viewports. */
.dispatch-card__title,
.dispatch-card__deck { overflow-wrap: anywhere; }

/* (5) Dispatch grid — keep collapse-to-1-column on viewports < ~360
       by clamping the minmax floor to the available width. The base
       rule above uses repeat(auto-fit, minmax(280px, 1fr)) which works
       at 360 but is fragile; min() makes it safe at any width. */
.dispatch-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* (6) Blog-index CTA: .btn has white-space: nowrap globally (line 1827)
       and the Thai variant runs 21px, so "เข้าร่วม BoomBigNose+ บน Skool"
       was 407px wide and overflowed 360 viewport. Allow wrapping ONLY
       inside the blog-index CTA — homepage hero CTA buttons stay
       single-line. */
.blog-index__cta .btn,
.post__cta .btn { white-space: normal; }

/* (7) Masthead overflow at 1024 viewport. The base layout is grid
       `auto 1fr auto`; the 960 breakpoint stacks to 2-col, the 768
       breakpoint re-introduces 3-col with smaller fonts. Between 961
       and 1023 the 3-col layout couldn't fit brand + 6-item nav +
       controls, so the controls bled 138px past the right edge on
       /blog/* and /blog/<slug>/* pages. Extend the stacked layout
       to cover 1024px viewport on post-template pages (.masthead--post)
       so blog-index and post pages remain in-bounds. The homepage
       masthead (.masthead without --post) is intentionally untouched
       to avoid scope creep on this PR. */
@media (max-width: 1024px) {
  .masthead--post .masthead__inner {
    grid-template-columns: auto auto;
    row-gap: 16px;
  }
  .masthead--post .nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* (8) Breadcrumbs already use flex-wrap: wrap (line 2136) — no change
       needed. Sanity guard: long category labels also need to be able
       to break. */
.breadcrumbs li { overflow-wrap: anywhere; }

/* (9) Post nav cards — long Thai post titles fit within their 1fr 1fr
       cell already, but on 360 viewport the two columns × 412px would
       overflow. The base rule at line 2532 (max-width: 640) collapses
       to 1fr; verified working. No change needed; this comment is the
       audit trail. */

/* (10) Mobile masthead + section-tag refinements — added 2026-05-12,
        revised 2026-05-20 after the login CTA was removed.
        `.section-tag` at 17px mono + Thai category label (e.g.
        "ข่าวสาร AI · Automation") overflows past 360px viewport,
        causing the inline-flex children to stack awkwardly. Shrink
        the font + gap on narrow viewports so it fits one line. The
        nav alignment override below also dates from this audit — it
        kept the (now-removed) `.nav__cta` from floating mid-row when
        the masthead wrapped; harmless to keep for future wrap cases. */
@media (max-width: 640px) {
  .nav { justify-content: flex-start; }
  /* Step the subtitle down between 768px and 430px so the brand wordmark
     stays single-line as the masthead grid column tightens. */
  .brand__sub { font-size: 13px; letter-spacing: 0.12em; }
  .section-tag {
    font-size: 14px;
    gap: 8px;
    letter-spacing: 0.10em;
  }
}