/* Round Online · components · nav · hero · pillar · prose · footer */

/* ─── Layout ──────────────────────────────────────────────────────── */
.site-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
}

/* ─── Site nav ────────────────────────────────────────────────────── */
.site-nav {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  /* gap = font-size / φ ≈ 18/1.618 ≈ 11px · use sp-2 (8px) since icon has optical padding inside its viewBox */
  gap: var(--sp-2);
  color: var(--color-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.site-nav__brand:hover {
  color: var(--color-accent);
}
.site-nav__brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
}
.site-nav__brand-text {
  text-transform: lowercase;
}

.site-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
}
.site-nav__links a {
  color: var(--color-fg);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.site-nav__links a:hover {
  color: var(--color-accent);
}

/* ─── Hero (home) ─────────────────────────────────────────────────── */
/* Vertical rhythm follows φ · top:bottom ≈ 1.5 (96:64), mark→h1 ≈ 1.5×(h1→tag) */
.hero {
  text-align: center;
  padding: var(--sp-9) var(--sp-5) var(--sp-8);
  max-width: var(--container-prose);
  margin: 0 auto;
}
.hero__mark {
  width: clamp(168px, 28vw, 248px);
  margin: 0 auto var(--sp-7);
  color: var(--color-ink);
}
.hero__mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Layer · outer 17-gon · slow counter-rotation */
.hero__mark-outer {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0.18;
  animation: hero-mark-rotate-rev 90s linear infinite;
}

/* Layer · inner 17-gon + radial web · slow rotation */
.hero__mark-inner {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0.24;
  animation: hero-mark-rotate 70s linear infinite;
}

/* Layer · petal outlines · gentle stagger breathe (no motion blur, no scale) */
.hero__mark-petal {
  animation: hero-mark-breathe 5s ease-in-out infinite;
  animation-delay: var(--petal-delay, 0s);
}
.hero__mark-petal-main {
  stroke: currentColor;
  stroke-width: 1.1;
}
.hero__mark-petal-inner {
  stroke: var(--color-accent-2);
  stroke-width: 0.4;
  opacity: 0.55;
}

@keyframes hero-mark-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hero-mark-rotate-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes hero-mark-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark-outer,
  .hero__mark-inner,
  .hero__mark-petal {
    animation: none;
  }
}
.hero__title {
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-4xl));
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
  text-transform: lowercase;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-snug);
}
.hero__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

/* ─── Pillars (home: games + stories side by side) ────────────────── */
/* Outer inset (per side) > inner gap · cards feel framed, not edge-hugging */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
  padding: 0 var(--sp-4);
}
@media (min-width: 720px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    padding: 0 var(--sp-7);
  }
}

.pillar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  background: var(--color-bg);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.pillar:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.pillar__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
}
.pillar__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-3);
}
.pillar__desc {
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-snug);
}
.pillar__cta {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pillar__cta:hover {
  color: var(--color-accent-2);
}

/* ─── Meta links (small links under pillars) ──────────────────────── */
.meta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin: var(--sp-8) 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.meta-links a {
  color: var(--color-fg-muted);
}
.meta-links a:hover {
  color: var(--color-accent);
}

/* ─── Prose (article / page / section body) ───────────────────────── */
.prose {
  max-width: var(--container-prose);
  margin: 0 auto;
}
.prose__brand {
  width: clamp(96px, 14vw, 128px);
  margin: 0 auto var(--sp-6);
  color: var(--color-ink);
}
.prose__brand svg {
  display: block;
  width: 100%;
  height: auto;
}
.prose__header {
  margin-bottom: var(--sp-7);
}
.prose__title {
  font-size: var(--fs-3xl);
  /* 1.7 is the safe floor for wrapping Thai H2s, but at the 48px title size the
     absolute line gap is already large — 1.7 reads as loose. 1.5 tightens the
     stack while keeping Thai upper marks clear of Fraunces descenders. */
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.prose__lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--color-fg);
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
}
.prose__meta {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: 0;
}
.prose__body {
  font-size: 1.0625rem; /* 17px · between base(16) and md(18) for long-form reading comfort */
  line-height: var(--lh-loose);
}
.prose__body figure {
  margin: var(--sp-7) 0;
  padding: 0;
}
.prose__body figure img,
.prose__body figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.prose__body figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-fg-muted);
  text-align: center;
}

/* Figure bleed · on wider viewports, figures extend modestly beyond the prose column · capped at 48rem (768px) so SVG text doesn't scale up too much */
@media (min-width: 50rem) {
  .prose__body figure {
    --figure-max: 48rem;
    --figure-bleed: min(
      calc(50vw - var(--container-prose) / 2 - 1rem),
      calc((var(--figure-max) - var(--container-prose)) / 2)
    );
    margin-left: calc(-1 * var(--figure-bleed));
    margin-right: calc(-1 * var(--figure-bleed));
  }
}

/* Title bleed · long titles extend rightward past the prose column so they don't wrap into a cramped stack · left edge stays aligned with the rest of the header */
@media (min-width: 50rem) {
  .prose__title {
    --title-max: 48rem;
    margin-right: calc(-1 * min(
      calc(50vw - var(--container-prose) / 2 - 1rem),
      calc(var(--title-max) - var(--container-prose))
    ));
  }
}

/* ─── TOC navigator · sticky left-gutter sidebar, wide viewports only ─
   Hidden below 80rem (≈1280px). Positioned in the left gutter relative to
   the viewport-centered prose column. left/width keep its right edge clear
   of figures that bleed out to 48rem (so the TOC never overlaps diagrams). */
.toc { display: none; }
@media (min-width: 80rem) {
  .toc {
    display: block;
    position: fixed;
    top: 7.5rem;
    /* Rail aligned to the nav logo icon's centre — derived, not eyeballed.
       Use 50% (fixed-element ICB = viewport content area, the SAME reference the
       nav centres against) NOT 50vw, which includes the scrollbar and drifts ~8px.
         nav left edge   = 50% - 40rem      (80rem container, centred)
         icon left edge  = + 1.5rem (sp-5)  → 50% - 38.5rem
         icon centre     = + 14px (28px/2)  → 50% - 38.5rem + 14px
         toc left        = - 1rem padding   (room for the arrow to centre, unclipped)
       Rail = toc-left + 1rem padding = icon centre, exactly. */
    left: calc(50% - 38.5rem + 14px - 1rem);
    width: 12rem;
    padding-left: 1rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
    font-family: var(--font-body);
  }
  /* Back link · returns to the parent section while reading. Echoes the
     breadcrumb's typographic language (uppercase, tracked, muted) and sits
     flush with the rail's left edge so the whole navigator reads as one family
     — no pill/border, which clashed with the thin-rail list below. */
  .toc__back {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--color-fg-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .toc__back:hover {
    color: var(--color-accent);
  }
  .toc__back-arrow {
    /* Centre the glyph on the rail axis. The 1rem padding-left on .toc gives the
       -0.625em shift room to sit inside the box, so the arrowhead isn't clipped. */
    display: inline-block;
    width: 1.25em;
    margin-left: -0.625em;
    text-align: center;
    font-size: var(--fs-md);
    line-height: 1;
  }
  .toc__list,
  .toc__sub {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc__item {
    margin: 0;
  }
  /* Border lives on every link with no gaps between items, so the left edges
     stack into one continuous rail. Sub-items keep the SAME left edge (border
     aligned) and only indent their text via extra padding-left. */
  .toc__link {
    display: block;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    border-left: 2px solid var(--color-border);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-fg-muted);
    text-decoration: none;
    /* one line per item · clip overflow so the rail stays tidy (headings are
       kept short at the source; this is just a safety net) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .toc__link:hover {
    color: var(--color-fg);
    border-left-color: var(--color-border-strong);
  }
  .toc__link--sub {
    padding-top: var(--sp-1);
    padding-bottom: var(--sp-1);
    padding-left: var(--sp-6);
    font-size: var(--fs-xs);
  }
  .toc__link--active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
  }
}

/* ─── Section list (used by /games/ /stories/ /axioms/) ───────────── */
.section-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  gap: var(--sp-4);
}
.section-list__item {
  margin: 0;
}
.section-list__link {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.section-list__link:hover {
  border-color: var(--color-accent);
}
.section-list__title {
  font-size: var(--fs-lg);
  line-height: 1.7;
  margin: 0 0 var(--sp-2);
}
.section-list__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: 1.6;
}
.section-list__meta {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-fg-muted);
}

/* ─── Crumb (shared breadcrumb) ──────────────────────────────────── */
.crumb {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
}
.crumb a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--color-accent);
}
.crumb > span {
  margin: 0 var(--sp-2);
}
.crumb__current {
  color: var(--color-fg);
}

/* ─── Axiom System page ───────────────────────────────────────────── */

.axiom-system__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.axiom-system__meta dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  font-family: var(--font-body);
  font-weight: 500;
}
.axiom-system__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Article H2 · lighter weight than default (500) so Thai (Sarabun) headings read calmer, not bold */
.prose__body h2 {
  font-weight: 400;
}

/* Axiom entries within prose body */
.prose__body h3 {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--sp-2);
}

.prose__body hr {
  margin: var(--sp-5) 0;
  border-top: 1px solid var(--color-border);
}

.prose__body .table-scroll {
  margin: var(--sp-5) 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.prose__body .table-scroll::-webkit-scrollbar {
  height: 6px;
}
.prose__body .table-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.prose__body .table-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}
.prose__body .table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-fg-muted);
}
.prose__body table {
  display: table;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  table-layout: auto;
}
.prose__body th,
.prose__body td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  white-space: nowrap;
}
.prose__body th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-muted);
}
.prose__body table td {
  font-variant-numeric: tabular-nums;
}
.prose__body table code {
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  background: none;
  padding: 0;
}

/* Table bleed · the scroll wrapper bleeds past prose column up to 48rem (768px) on wide viewports · the inner table fills wrapper so cells distribute · on narrow viewport, wrapper stays in column and table scrolls horizontally inside */
@media (min-width: 50rem) {
  .prose__body .table-scroll {
    --table-max: 48rem;
    --table-bleed: min(
      calc(50vw - var(--container-prose) / 2 - 1rem),
      calc((var(--table-max) - var(--container-prose)) / 2)
    );
    margin-left: calc(-1 * var(--table-bleed));
    margin-right: calc(-1 * var(--table-bleed));
  }
}

/* ─── Story (short fiction page) ──────────────────────────────────── */
.story {
  max-width: var(--container-prose);
  margin: 0 auto;
  font-family: var(--font-thai);
}

.story__header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.story .crumb {
  margin-bottom: var(--sp-5);
}
.story__episode {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
}
.story__title {
  font-family: var(--font-thai);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-3xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
.story__title-en {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0.02em;
}
.story__subtitle {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
  margin: 0 auto;
  max-width: 32rem;
}

.story-epigraph {
  margin: var(--sp-7) auto var(--sp-8);
  max-width: 32rem;
  text-align: center;
}
.story-epigraph blockquote {
  border: none;
  padding: 0;
  margin: 0;
  font-style: italic;
  color: var(--color-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.story-epigraph blockquote p {
  margin: 0;
  max-width: none;
}
.story-epigraph cite {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: normal;
  letter-spacing: 0.05em;
}

.story__body {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--color-fg);
}
.story__body p {
  margin: 0 0 var(--sp-5);
  max-width: none;
}

.story-inner-voice {
  margin: var(--sp-7) auto;
  max-width: 30rem;
  text-align: center;
  font-style: italic;
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  padding: var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.story-inner-voice p {
  margin: 0 0 var(--sp-3);
  max-width: none;
}
.story-inner-voice p:last-child {
  margin: 0;
}
.story-inner-voice cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: normal;
  letter-spacing: 0.05em;
}

.story-break {
  margin: var(--sp-8) auto;
  max-width: 32rem;
  text-align: center;
  font-style: italic;
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  position: relative;
  padding: var(--sp-6) 0;
}
.story-break::before,
.story-break::after {
  content: "·   ·   ·";
  display: block;
  color: var(--color-border-strong);
  letter-spacing: 0.5em;
  font-size: var(--fs-sm);
}
.story-break::before { margin-bottom: var(--sp-5); }
.story-break::after  { margin-top: var(--sp-5); }
.story-break p {
  margin: 0;
  max-width: none;
}
.story-break strong {
  color: var(--color-fg);
  font-weight: 500;
}

.story-closing {
  margin: var(--sp-8) auto var(--sp-7);
  max-width: 32rem;
  text-align: center;
}
.story-closing blockquote {
  border: none;
  padding: var(--sp-6) var(--sp-5);
  margin: 0;
  font-style: italic;
  color: var(--color-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}
.story-closing blockquote p {
  margin: 0;
  max-width: none;
}

.story__byline {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.story__byline-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  margin: 0;
  letter-spacing: 0.05em;
}
.story__byline-date {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: var(--sp-2) 0 0;
}

.story__nav {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.story__nav-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.story__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.story__nav-list a {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.story__nav-list a:hover {
  border-color: var(--color-accent);
}
.story__nav-ep {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.story__nav-title {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
}

/* ─── 404 page ────────────────────────────────────────────────────── */
.not-found {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 12vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  line-height: 1;
}
.not-found__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-4);
  font-weight: 400;
}
.not-found__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
  margin: 0 auto var(--sp-7);
  max-width: 32rem;
}
.not-found__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
}
.not-found__links a {
  color: var(--color-accent);
  text-decoration: none;
}
.not-found__links a:hover {
  color: var(--color-accent-2);
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--sp-10);
  border-top: 1px solid var(--color-border);
  padding: var(--sp-7) var(--sp-5);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: 0;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
}
.site-footer__links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: var(--color-accent);
}
.site-footer__legal {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  letter-spacing: 0.02em;
  margin: 0;
}

/* ─── Responsive nav · stack on small screens ─────────────────────── */
@media (max-width: 600px) {
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .site-nav__links {
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  /* Article header · 48px/1.7 is far too large and loose for a multi-line Thai
     title on a phone. Smaller size shrinks the absolute line gap too, so 1.5
     keeps Thai upper marks clear of descenders without feeling slack. */
  .prose__title {
    font-size: 2rem; /* 32px · between xl(28) and 2xl(36) for long Thai titles */
    line-height: 1.5;
  }
  .prose__lede {
    font-size: var(--fs-md);
  }
  /* sp-7 (48px) header gap is far too loose on a phone. sp-4 (16px) sits just
     under the body paragraph rhythm (24px) — header reads as part of the flow. */
  .prose__header {
    margin-bottom: var(--sp-4);
  }
  /* Top gap below the nav: site-main's sp-7 (48px) padding-top stacks on top of
     the nav's own sp-5 (24px) padding-bottom → ~72px. Trim padding-top to 16px
     on phones so content starts close under the nav. */
  .site-main {
    padding-top: var(--sp-4);
  }
}