/* ==================================================================
   AIMing Data — shared stylesheet for / and /en/
   Cool paper, navy ink and the brand coral as the one survey marker. Serif for argument,
   grotesk for interface, mono for measurements.
   ================================================================== */

/* ---------------------------------------------------------------
   Typefaces — all self-hosted so they load under `default-src 'self'`.
   Latin faces stop before the CJK blocks; CJK display text uses a
   subset of Noto Serif TC that only contains the glyphs the headings
   need (regenerate with tools/subset-cjk.sh after editing headings).
   --------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-arrows-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  /* U+2191-2193 so the site's arrows come from the brand face — see
     .arrow-ne for why that matters on iOS. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-opsz.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "AIMing Serif TC";
  src: url("/assets/fonts/noto-serif-tc-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Article pages: a second subset holding only their heading glyphs. */
@font-face {
  font-family: "AIMing Serif TC Writing";
  src: url("/assets/fonts/noto-serif-tc-writing.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #101820;
  --ink-soft: #27323d;
  /* Brand coral, from the logo. It is a shape colour on paper; small
     text there needs the deeper cut. On navy the brand coral clears AA.
     Cool paper and navy (not warm cream) keep the palette our own. */
  --accent: #f25f3a;
  --accent-text: #b03a1a;
  --accent-on-dark: #f25f3a;
  --gray: #55606b;
  --placeholder: #6b717b;
  --line: #c5cbcc;
  --hair: rgba(16, 24, 32, .14);
  --paper: #f3f4f1;
  --paper-deep: #e7eae6;
  --white: #fbfbf9;
  --dark: #0f2233;
  --on-dark: #f3f4f1;
  --on-dark-soft: #a9b6c2;
  --hair-dark: rgba(243, 244, 241, .16);

  --sans: "Manrope", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --serif: "Source Serif 4", "AIMing Serif TC", "Songti TC", "Noto Serif TC", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --page: min(1320px, calc(100vw - 2 * var(--gutter)));
  --section-pad: clamp(72px, 9vw, 136px);

  /* Full-width CJK glyphs collide under the negative tracking that
     large Latin display text wants, so tracking is per script. */
  --track-h1: -.01em;
  --track-h2: -.008em;
  --track-h3: 0em;
}
body.is-writing {
  --serif: "Source Serif 4", "AIMing Serif TC Writing", "Songti TC", "Noto Serif TC", serif;
}
html[lang="en"] {
  --track-h1: -.032em;
  --track-h2: -.024em;
  --track-h3: -.012em;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* The canvas exposed by elastic overscroll below the page matches the
   footer, so pulling past the end never flashes paper under navy. */
html {
  background-color: var(--dark);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
i { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }

/* Manrope ships no diagonal arrow, and U+2197 carries the Emoji
   property, so iOS swaps in a colour emoji that ignores CSS colour.
   U+2192 has no emoji property, so the site rotates that instead. */
.arrow-ne {
  display: inline-block;
  transform: rotate(-45deg);
}

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}
/* --accent-text falls under 3:1 on navy, so dark regions override. */
footer :focus-visible,
.cases :focus-visible {
  outline-color: var(--paper);
}

.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;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-weight: 700; transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; }

/* overflow-x: clip contains the hero canvas without creating a
   scrollport, so the sticky header keeps working. */
.page {
  min-width: 0;
  overflow-x: clip;
}
.wrap { width: var(--page); margin: 0 auto; }
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.mono,
.kicker,
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kicker {
  color: var(--accent-text);
  letter-spacing: .08em;
}
.kicker b { margin-right: .7em; font-weight: 500; }
.kicker-back { color: var(--ink); border-bottom: 1px solid var(--ink); justify-self: start; }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 244, 241, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
header.is-scrolled { border-bottom-color: var(--hair); }
/* Reading progress: a coral hairline along the bottom of the header. */
header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.header-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand img { width: 178px; height: auto; }
.primary-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 14px;
  font-weight: 650;
}
.primary-nav a {
  position: relative;
  padding: 6px 0;
}
.primary-nav a i {
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--accent-text);
  vertical-align: 1px;
}
.primary-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.primary-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.primary-nav .nav-contact {
  padding: 9px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.primary-nav .nav-contact::after { display: none; }
.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 6px 0 6px 18px;
  border-left: 1px solid var(--line);
}
.menu-toggle {
  display: none;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
    border-color .35s var(--ease-out), transform .2s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { border: 1.5px solid var(--ink); }
.btn-accent { background: var(--ink); color: var(--paper); }
.btn-accent .arrow-ne { color: var(--accent); }

/* ---------------------------------------------------------------
   Hero — a live contour field drawn by site.js
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--header-h)), 960px);
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(48px, 9vh, 120px);
  isolation: isolate;
}
.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: rgb(17, 19, 24);
  /* Fade the field out under the headline so the type always wins. */
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.35) 48%, #000 70%);
  mask-image: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.35) 48%, #000 70%);
}
.hero-crosshair {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  z-index: 1;
}
.hero-crosshair::before,
.hero-crosshair::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.hero-crosshair::before { left: -14px; top: -.5px; width: 28px; height: 1px; }
.hero-crosshair::after { left: -.5px; top: -14px; width: 1px; height: 28px; }
.hero-crosshair span {
  position: absolute;
  left: 14px; top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero.is-probing .hero-crosshair { opacity: 1; }
.hero-inner { align-self: center; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray);
  font-weight: 400;
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.hero h1 {
  margin-top: clamp(24px, 4vh, 40px);
  font-family: var(--serif);
  font-size: clamp(44px, min(7.4vw, 12vh), 116px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: var(--track-h1);
  font-optical-sizing: auto;
  max-width: 13em;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-lede {
  max-width: 34em;
  margin-top: clamp(22px, 3.4vh, 34px);
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
}
.hero-offer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.hero-offer span + span::before {
  content: "/";
  margin: 0 12px;
  color: var(--accent);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-left: 12px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 700;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4.6vh, 44px);
}
.readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--ink);
}
.readout-cell {
  padding: 18px 24px 26px 0;
  min-width: 0;
}
.readout-cell + .readout-cell {
  padding-left: 24px;
  border-left: 1px solid var(--hair);
}
.readout dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gray);
}
.readout dd {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}
.readout dd b {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
}
.readout dd span {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   Shared section scaffolding
   --------------------------------------------------------------- */
/* Each section opens on one band: a large folio numeral on the left, the
   headline and its lede side by side on the right. No empty column, no
   stack of headline-then-lede-then-gap. */
.section-head {
  display: grid;
  grid-template-columns: var(--folio) 1fr;
  gap: 20px var(--grid-gap);
  position: relative;
  padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--hair);
  margin-bottom: clamp(44px, 5.5vw, 80px);
}
/* A small register mark where the rule crosses the centre line. */
.section-head::after {
  content: "+";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -54%);
  font: 300 18px/1 var(--sans);
  color: var(--ink-soft);
}
.section-head > div {
  display: grid;
  /* Fixed proportions, so the lede starts at the same x in every section
     and in both languages, whatever the headline length. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px clamp(24px, 4vw, 64px);
  align-items: end;
}
:root {
  /* The site grid: a folio column for numbers and labels, then content.
     Every block that sits beside a label uses these two values. */
  --folio: clamp(96px, 11vw, 168px);
  --grid-gap: clamp(20px, 3vw, 48px);
  --content-x: calc(var(--folio) + var(--grid-gap));
  /* Article pages: a wider rail for facts and contents, one reading measure. */
  --rail: clamp(200px, 17vw, 248px);
  --reading: 700px;
}
.section-head > .kicker {
  display: grid;
  align-content: start;
  gap: 12px;
}
.section-head > .kicker b {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 6.4vw, 104px);
  line-height: .78;
  letter-spacing: -.04em;
  text-transform: none;
  font-variant-numeric: lining-nums;
}
.section-head h1,
.section-head h2,
.contact h2,
.about h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.9vw, 58px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: var(--track-h2);
  text-wrap: balance;
}
.section-aside { display: grid; justify-items: start; gap: 20px; }
.section-lede {
  max-width: 34em;
  padding-bottom: .3em;
  color: var(--gray);
  font-size: 16px;
  line-height: 1.8;
}

/* ---------------------------------------------------------------
   Contour backgrounds behind every section after the hero. Each section
   draws its own still map (site.js); the top and bottom edges fade out so
   neighbouring maps never meet in a hard seam.
   --------------------------------------------------------------- */
[data-field-static],
[data-field-drift] { position: relative; isolation: isolate; }
.section-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: rgb(17, 19, 24);
  opacity: var(--field-opacity, .38);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
.cases .section-field { color: rgb(243, 244, 241); --field-opacity: .3; }
.writing, .contact { --field-opacity: .32; }
.about { --field-opacity: .3; }

/* ---------------------------------------------------------------
   Practice — strata and service ledger
   --------------------------------------------------------------- */
.practice { padding-bottom: var(--section-pad); }
/* Three ruled columns that start on the content edge, like the cases. */
.strata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--grid-gap);
  margin-left: var(--content-x);
  align-items: stretch;
}
.stratum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
/* Scale, drawn as people: one person, a team, an organization.
   The coral dot is "you" in each picture. */
.stratum::before {
  content: "";
  display: block;
  height: 58px;
  margin-bottom: 18px;
  background-image:
    radial-gradient(circle, var(--accent) 5px, transparent 5.6px),
    radial-gradient(circle, var(--ink) 3.2px, transparent 3.8px);
  background-size: 18px 18px, 18px 18px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
}
.stratum-1::before {
  background-image: radial-gradient(circle, var(--accent) 5px, transparent 5.6px);
  background-repeat: no-repeat;
  background-position: 0 40px;
}
/* Pseudo-elements sit outside `* { box-sizing }`, so offset with margin. */
.stratum-2::before {
  width: 108px;
  height: 36px;
  margin-top: 22px;
}
.stratum-3::before { width: min(100%, 288px); }
.stratum-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.stratum h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--track-h3);
}
.stratum p:not(.stratum-tag):not(.mono) { color: var(--gray); font-size: 15px; }
.stratum .mono { color: var(--ink-soft); font-size: 11px; }
/* What each step involves: who it suits, what you get, the format. */
.offer-facts { margin-top: auto; padding-top: 16px; }
.offer-facts div:first-child { border-top: 1px solid var(--hair); }
.offer-facts div {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
  line-height: 1.6;
}
.offer-facts dt { font-weight: 750; }
.offer-facts dd { color: var(--ink-soft); }
/* ---------------------------------------------------------------
   Evidence — navy specimens
   --------------------------------------------------------------- */
.cases {
  padding: var(--section-pad) 0;
  background: var(--dark);
  color: var(--on-dark);
}
.cases .section-head { border-top-color: var(--hair-dark); }
.cases .section-head::after { color: var(--on-dark-soft); }
.cases .kicker { color: var(--accent-on-dark); }
.cases .section-lede { color: var(--on-dark-soft); }
.case-list { border-top: 1px solid var(--hair-dark); }
.case {
  display: grid;
  grid-template-columns: var(--folio) minmax(0, 5fr) minmax(0, 6fr);
  gap: 16px var(--grid-gap);
  align-items: start;
  padding: clamp(32px, 3.6vw, 52px) 0;
  border-bottom: 1px solid var(--hair-dark);
}
/* Second level under the section folio: smaller, quieter, ruled. */
.case-index {
  align-self: start;
  padding-top: 10px;
  border-top: 1px solid var(--accent-on-dark);
  width: 3.2em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--on-dark-soft);
  font-variant-numeric: lining-nums;
}
.case-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.case h3 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: var(--track-h3);
}
.case-body { padding-top: 26px; }
.case-body > p { color: var(--on-dark-soft); max-width: 34em; font-size: 16px; line-height: 1.8; }
.case-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
}
.case-points li { font-size: 14px; color: var(--on-dark-soft); }
.case-points a { display: inline-flex; gap: 6px; align-items: baseline; padding-bottom: 2px; border-bottom: 1px solid var(--on-dark-soft); color: var(--on-dark); font-weight: 650; }
.case-points a .arrow-ne { color: var(--accent-on-dark); }
/* Talks: one folded line under the cases; it opens into the full list. */
.ledger { border-bottom: 1px solid var(--hair-dark); }
.ledger-head {
  display: grid;
  grid-template-columns: var(--folio) auto 1fr auto;
  align-items: baseline;
  gap: 8px var(--grid-gap);
  padding: clamp(24px, 2.6vw, 34px) 0;
  list-style: none;
  cursor: pointer;
}
.ledger-head::-webkit-details-marker { display: none; }
.ledger-head b {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
}
.ledger-head span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--on-dark-soft);
}
.ledger-head i {
  font: 300 28px/1 var(--sans);
  font-style: normal;
  color: var(--accent-on-dark);
  transition: transform .4s var(--ease-out);
}
.ledger[open] .ledger-head i { transform: rotate(45deg); }
.ledger-list {
  margin: 0 0 clamp(24px, 3vw, 40px) var(--content-x);
}
.ledger-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 64px);
}
.ledger-list li {
  display: grid;
  grid-template-columns: 5.2em 1fr;
  grid-template-areas: "date org" "date title";
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: 2px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.ledger-list time {
  grid-area: date;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--accent-on-dark);
}
.ledger-list span { grid-area: org; font-size: 13px; line-height: 1.4; color: var(--on-dark-soft); }
.ledger-list b { grid-area: title; font-size: 15px; font-weight: 600; line-height: 1.45; }

/* ---------------------------------------------------------------
   AI × Earth
   --------------------------------------------------------------- */
.earth {
  padding: 0 0 var(--section-pad);
  background: var(--paper-deep);
}
.earth-top {
  padding: var(--section-pad) 0 clamp(36px, 4.5vw, 64px);
}
.earth-head { margin-bottom: 0; }
.section-head .earth-mark {
  font-size: clamp(60px, 7.6vw, 124px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
}
.earth-mark em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.meetup-kicker {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
}
.meetup {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--white);
  border: 1px solid var(--ink);
}
.meetup-day {
  display: flex;
  align-items: baseline;
  gap: .12em;
  margin: 18px 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(96px, 13vw, 200px);
  line-height: .86;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
}
.meetup-day span + span::before {
  content: "";
  display: inline-block;
  width: .08em; height: .72em;
  margin-right: .12em;
  background: var(--accent);
  transform: skewX(-18deg);
  vertical-align: baseline;
}
.meetup h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.meetup-facts {
  display: grid;
  gap: 0;
  margin: 24px 0 30px;
  border-top: 1px solid var(--hair);
}
.meetup-facts div {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: first baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
  line-height: 1.6;
}
.meetup-facts dt { font-family: var(--mono); font-size: 12px; color: var(--gray); }
.meetup-facts small { color: var(--gray); font-size: 13px; }

.talks { margin-top: 18px; border-top: 1px solid var(--ink); }
.talks li {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: first baseline;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}
.talks time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-text);
}
.talks h4 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-h3);
}
.talks p { margin-top: 6px; font-size: 14px; color: var(--gray); }
.talks p b { color: var(--ink); font-weight: 700; }

.agenda { margin-top: 28px; }
.agenda-bar {
  display: flex;
  height: 44px;
  border: 1px solid var(--ink);
}
.agenda-bar li {
  flex: var(--m) 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 0 5px 5px;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
}
.agenda-bar li + li { border-left: 1px solid var(--ink); }
.agenda-bar li span { overflow: hidden; text-overflow: clip; }
.a-muted {
  background-image: repeating-linear-gradient(-45deg, transparent 0 4px, var(--hair) 4px 5px);
  color: var(--gray);
}
.a-talk { background: var(--ink); color: var(--paper); }
.a-disc { background: var(--accent); color: var(--ink); }
.agenda-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gray);
}
.thanks {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--gray);
}

.events { display: grid; gap: clamp(28px, 3vw, 40px); }
.earth .events,
.earth .events-empty,
.earth .events-past,
.earth .course { margin-left: var(--content-x); }
.meetup[hidden] { display: none; }
.events-empty {
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
}
.events-empty a {
  display: inline-flex;
  gap: 8px;
  margin-left: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1.5px solid var(--ink);
}
.events-past { margin-top: 32px; }
.past-list { margin-top: 12px; border-top: 1px solid var(--ink); }
.past-list a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
  transition: color .3s var(--ease-out), padding .45s var(--ease-out);
}
.past-list time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gray);
}
.past-list b { color: var(--accent); font-weight: 400; }

.course {
  margin-top: clamp(56px, 7vw, 96px);
}
.course-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 24px var(--grid-gap);
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink);
}
.course-head h3 {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.course-lede { color: var(--ink-soft); font-size: 15px; }
.course-links { display: grid; gap: 10px; justify-self: end; }
.course-links .btn { justify-content: space-between; white-space: nowrap; }
.syllabus {
  columns: 2;
  column-gap: clamp(32px, 5vw, 80px);
  counter-reset: ep;
}
.syllabus li { break-inside: avoid; border-bottom: 1px solid var(--hair); }
.syllabus a {
  display: grid;
  grid-template-columns: 48px 52px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  font-size: 14.5px;
  line-height: 1.5;
  transition: color .3s var(--ease-out), padding .45s var(--ease-out);
}
.syllabus i, .syllabus time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.syllabus .state {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gray);
  white-space: nowrap;
}
.syllabus .is-aired .state { color: var(--ink); }
.syllabus .is-next a { font-weight: 700; }
.syllabus .is-next .state {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
}
.syllabus .is-next i { color: var(--accent-text); }

.course-now {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  border-bottom: 1px solid var(--hair);
}
.now-cell {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 28px 30px 0;
  min-width: 0;
}
.now-cell + .now-cell { padding-left: 28px; border-left: 1px solid var(--hair); }
.now-date {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.now-date b { font-weight: 500; }
.now-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.5;
}
.now-link i {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent-text);
}
.now-link b { color: var(--accent); font-weight: 400; }
.ticks {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 3px;
  margin-top: 6px;
}
.ticks li {
  height: 22px;
  border: 1px solid var(--ink);
  background: transparent;
}
.ticks li.is-aired { background: var(--ink); }
.ticks li.is-next { background: var(--accent); border-color: var(--accent); }
.syllabus-details { margin-top: 4px; }
.syllabus-details summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.syllabus-details summary::-webkit-details-marker { display: none; }
.syllabus-details summary::after {
  content: "+";
  font-family: var(--mono);
  font-weight: 400;
  font-size: 18px;
  color: var(--accent-text);
}
.syllabus-details[open] summary::after { content: "\2212"; }
.syllabus-details .syllabus { padding-bottom: 8px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------------
   Writing — the series in brief: outline plus three starting points
   --------------------------------------------------------------- */
.writing { padding: var(--section-pad) 0; }
/* A shelf of articles: facts in the folio column, title and list in the
   content column. The title shares the first row with the facts so the
   first label and the heading sit on one baseline. */
.pub {
  display: grid;
  grid-template-columns: var(--folio) minmax(0, 1fr);
  align-items: first baseline;
  gap: 16px var(--grid-gap);
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--ink);
}
.pub-title { grid-column: 2; grid-row: 1; }
.pub-meta { grid-column: 1; grid-row: 1 / span 2; }
.pub-body { grid-column: 2; grid-row: 2; }
/* Later shelves are divided from the content edge, so every rule in a
   shelf has the same length. */
.pub + .pub { position: relative; border-top: 0; }
.pub + .pub::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  left: var(--content-x);
  border-top: 1px solid var(--hair);
}
.pub-meta div {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.pub-meta div:first-child { padding-top: 0; }
.pub-meta dt {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray);
}
.pub-meta dd { font-size: 14.5px; font-weight: 650; }
.pub-body h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-h2);
}
.pub-desc {
  max-width: 40em;
  margin-bottom: 24px;
  color: var(--ink-soft);
}
.pub-desc + .archive-part { margin-top: 0; }
.series-link {
  display: inline-flex;
  gap: 10px;
  margin-top: 26px;
  font-weight: 700;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
}
.now-label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray);
}


/* ---------------------------------------------------------------
   Reading guide at the top of /writing/
   (generated by tools/build-writing.mjs)
   --------------------------------------------------------------- */
/* A navy band across the page; its contents keep the page grid, label in
   the folio column, the series and the shelves in the content column. */
.guide {
  display: grid;
  grid-template-columns: var(--folio) minmax(0, 1fr);
  column-gap: var(--grid-gap);
  align-items: first baseline;
  margin: 0 calc((var(--page) - 100vw) / 2) clamp(40px, 5vw, 72px);
  padding: clamp(40px, 5vw, 64px) calc((100vw - var(--page)) / 2);
  background: var(--dark);
  color: var(--on-dark);
}
.guide > .now-label { grid-column: 1; grid-row: 1 / span 2; }
.guide-entry, .guide-rows { grid-column: 2; }
.guide .now-label { color: var(--on-dark-soft); }
.guide-entry {
  display: grid;
  gap: 12px;
}
.guide-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--on-dark-soft);
}
.guide-tag b,
.guide-row b {
  padding: 2px 8px;
  border: 1px solid var(--accent-on-dark);
  color: var(--accent-on-dark);
  font-weight: 500;
  white-space: nowrap;
}
.guide-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-h2);
}
.guide-pitch { color: var(--on-dark-soft); font-size: 14px; }
.guide-steps {
  margin-top: 8px;
  columns: 2;
  column-gap: var(--grid-gap);
  border-top: 1px solid var(--hair-dark);
}
.guide-steps li { break-inside: avoid; }
.guide-step {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: first baseline;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 14px;
  transition: color .2s;
}
.guide-step i {
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  color: var(--on-dark-soft);
}
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
  font-weight: 700;
}
.guide-start {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--dark);
}
.guide-toc {
  border-bottom: 1px solid var(--on-dark-soft);
  color: var(--on-dark);
}
.guide-rows {
  margin-top: 28px;
  border-top: 1px solid var(--hair-dark);
}
.guide-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 15px;
}
.guide-row b { font-family: var(--mono); font-size: 12px; }
.guide-row small { font-family: var(--mono); font-size: 12px; color: var(--on-dark-soft); }
.guide-row i { font-style: normal; color: var(--accent-on-dark); }

/* ---------------------------------------------------------------
   About photo
   --------------------------------------------------------------- */
.about-photo { grid-column: 2; margin: 0; }
.about-photo img {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-deep);
}

/* ---------------------------------------------------------------
   Writing archive (/writing/)
   --------------------------------------------------------------- */
.archive { padding-top: clamp(48px, 7vw, 96px); }
.archive-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--track-h1);
}
.pub-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
}
.archive-part { margin-top: 40px; }
.archive-part h3 {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}
.archive-part h3 i {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: .04em;
}
/* The marker column is sized in the mono font's own ch units: wide enough
   for "Day 06" in a series, for a full date on the article shelf. */
.archive-list a {
  display: grid;
  grid-template-columns: var(--marker, 7ch) minmax(0, 1fr);
  align-items: first baseline;
  column-gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 12px;
  transition: color .3s var(--ease-out);
}
#articles .archive-list { --marker: 10ch; }
.archive-list i { font-style: normal; color: var(--gray); line-height: 1.5; }
.archive-list span { display: grid; gap: 4px; min-width: 0; font-family: var(--sans); }
.archive-list b { font-size: 16px; font-weight: 700; line-height: 1.5; }
.archive-list small { font-size: 14px; color: var(--gray); line-height: 1.6; }
.archive-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }
.archive-links .series-link { margin-top: 0; }

/* ---------------------------------------------------------------
   Article pages
   --------------------------------------------------------------- */
/* One grid for the whole article: a narrow rail (facts, then the contents
   list, which sticks while reading) and a main column where the title sits
   directly above the body, so reading starts on the first screen. */
.post-layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--reading));
  justify-content: start;
  gap: 32px var(--grid-gap);
  padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 5vw, 64px);
}
.post-layout > * { min-width: 0; }
.post-rail {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 6px;
}
.post-head { padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--ink); }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--gray);
}
.crumbs a { border-bottom: 1px solid var(--line); }
.post-kicker {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent-text);
}
.post-head h1 {
  margin-top: 12px;
  max-width: 22em;
  font-family: var(--serif);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: var(--track-h1);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.post-dek {
  max-width: 36em;
  margin-top: 14px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.post-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.post-meta dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gray);
}
.post-meta dd { font-size: 14px; font-weight: 650; }
.post-meta a { border-bottom: 1px solid var(--ink); }
.prose { padding-top: clamp(20px, 2.4vw, 32px); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.post-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow: auto;
}
.post-toc ol { margin-top: 10px; border-top: 1px solid var(--hair); counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray);
  transition: color .3s var(--ease-out);
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10.5px;
  padding-top: 2px;
}
.post-toc a.is-current { color: var(--ink); font-weight: 650; }
.post-toc a.is-current::before { color: var(--accent-text); }

/* Long-form reading: 34–38 CJK characters per line, generous leading. */
.prose {
  max-width: var(--reading);
  font-size: 17.5px;
  line-height: 1.95;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.6em;
  padding-top: .9em;
  border-top: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--track-h3);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose h3 {
  margin-top: 2em;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
}
.prose h4 { margin-top: 1.6em; font-size: 17.5px; font-weight: 750; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.prose strong { font-weight: 750; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--accent-text); }
.prose blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 1.12em;
  line-height: 1.75;
  color: var(--ink-soft);
}
.prose blockquote > * + * { margin-top: .6em; }
.prose code {
  padding: .12em .38em;
  border-radius: 4px;
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: .86em;
}
.prose pre {
  overflow-x: auto;
  padding: 18px 20px;
  background: var(--dark);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.7;
}
.prose pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }
.table-wrap { overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.prose th, .prose td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}
.prose th {
  border-bottom-color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gray);
}
.post-figure { margin: 2em 0; }
.post-figure img { width: 100%; height: auto; background: var(--paper-deep); }
.post-figure figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--gray); }
.figure-link {
  display: inline-flex;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  font-size: 14.5px;
  text-decoration: none !important;
}
.figure-link .arrow-ne { color: var(--accent); }
.prose a { overflow-wrap: anywhere; }
.post-foot {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--reading));
  justify-content: start;
  column-gap: var(--grid-gap);
  padding-bottom: clamp(56px, 6vw, 72px);
}
.post-foot > * { grid-column: 2; }
.post-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}
.post-step {
  display: grid;
  gap: 8px;
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--hair);
  transition: color .3s var(--ease-out);
}
.post-step + .post-step { padding-left: 24px; border-left: 1px solid var(--hair); text-align: right; }
.post-step b {
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}
.post-series {
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--gray);
}
.post-series a { border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
.about {
  padding: var(--section-pad) 0;
  background: var(--white);
}
.about-grid {
  display: grid;
  grid-template-columns: var(--folio) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: 32px var(--grid-gap);
  align-items: start;
}
.about-name { grid-column: 3; }
.about-name h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.2;
}
.about-name .about-links { margin-top: 28px; }
/* What else is running: one ruled row each, linking to its own page. */
.elsewhere { grid-column: 4; }
.elsewhere-list { margin-top: 12px; border-top: 1px solid var(--ink); }
.elsewhere-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding .45s var(--ease-out);
}
.elsewhere-row b { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.elsewhere-row span { grid-column: 1; color: var(--gray); font-size: 14.5px; line-height: 1.7; }
.elsewhere-row i { grid-row: 1; grid-column: 2; font-style: normal; color: var(--accent); }
.about-latin {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}
.about-role {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
}
.about-body > p { color: var(--ink-soft); }
.about-body > p + p { margin-top: 16px; }
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  font-weight: 700;
}
.about-links a { border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */
.contact {
  padding: var(--section-pad) 0;
  background: var(--paper);
}
.contact-grid {
  display: grid;
  grid-template-columns: var(--folio) 1fr;
  gap: 20px var(--grid-gap);
}
.contact-grid > .contact-form { grid-column: 2; }
.contact-form {
  display: grid;
  gap: 18px;
  align-content: start;
  /* Open form on the content edge: one rule above, fields carry their own
     underlines, so labels line up with the headline. */
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
}
.field input,
.field textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; border-bottom-color: var(--accent-text); }
.contact-submit {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  margin-top: 8px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), transform .2s var(--ease-out);
}
.contact-submit b { color: var(--accent); font-weight: 400; }
.contact-submit:active { transform: scale(.985); }
.form-status { font-size: 13.5px; color: var(--gray); }
.contact-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.contact-email-link {
  font-family: var(--mono);
  font-size: 15px;
  border-bottom: 1px solid var(--ink);
}
.contact-copy {
  padding: 8px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .2s var(--ease-out);
}
.contact-copy:active { transform: scale(.97); }
.copy-status { font-size: 13.5px; color: var(--gray); min-height: 1.4em; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(64px, 8vw, 112px) 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 6fr 2fr 2fr;
  gap: 40px;
}
.footer-word {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}
.footer-brand p + p {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--on-dark-soft);
}
.footer-col {
  display: grid;
  align-content: start;
  gap: 8px;
  font-size: 14.5px;
}
.footer-col p {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.footer-col .arrow-ne { color: var(--accent-on-dark); }
.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--on-dark-soft);
}

/* ---------------------------------------------------------------
   Entrance motion (site.js adds .will-reveal only below the fold)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .will-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .will-reveal.is-revealed { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Hover — only on devices that really hover, so taps never stick
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .case-points li:has(a):hover { border-color: var(--accent-on-dark); }
  .elsewhere-row:hover b { color: var(--accent-text); }
  .ledger-head:hover b { color: var(--accent-on-dark); }
  .text-link:hover { color: var(--accent-text); border-color: var(--accent-text); }
  .kicker-back:hover { color: var(--accent-text); border-color: var(--accent-text); }
  .primary-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .primary-nav .nav-contact:hover { background: var(--ink); color: var(--paper); }
  .btn-ink:hover, .btn-accent:hover { background: var(--ink-soft); }
  .btn-line:hover { background: var(--ink); color: var(--paper); }
  .syllabus a:hover { color: var(--accent-text); }
  .guide-step:hover { color: var(--accent-on-dark); }
  .guide-row:hover span { color: var(--accent-on-dark); }
  .guide-toc:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
  .archive-list a:hover b, .post-step:hover b { color: var(--accent-text); }
  .post-toc a:hover { color: var(--ink); }
  .crumbs a:hover, .post-series a:hover, .post-meta a:hover { color: var(--accent-text); }
  .past-list a:hover { color: var(--accent-text); }
  .events-empty a:hover { color: var(--accent-text); border-color: var(--accent-text); }
  .now-link:hover span { color: var(--accent-text); }
  .syllabus-details summary:hover { color: var(--accent-text); }
  .series-link:hover, .about-links a:hover { color: var(--accent-text); border-color: var(--accent-text); }
  .contact-submit:hover { background: var(--ink-soft); }
  .contact-copy:hover { background: var(--ink); color: var(--paper); }
  .footer-col a:hover { color: var(--accent-on-dark); }
  .lang:hover { color: var(--accent-text); }
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .case { grid-template-columns: var(--folio) 1fr; }
  .case-body { grid-column: 2; padding-top: 0; }
  .about-grid { grid-template-columns: var(--folio) minmax(0, 2fr) minmax(0, 3fr); }
  .elsewhere { grid-column: 2 / -1; }
  .course-head { grid-template-columns: 1fr 1fr; }
  .course-links { justify-self: start; grid-auto-flow: column; }
  .section-head > div { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .header-tools { margin-left: auto; }
  .primary-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    font-size: 18px;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .primary-nav a::after { display: none; }
  .primary-nav .nav-contact {
    margin-top: 16px;
    text-align: center;
    border-bottom: 1.5px solid var(--ink);
  }
  .lang { border-left: 0; padding-left: 0; }

  .hero-field {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.2) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.2) 100%);
    opacity: .55;
  }
  .readout { grid-template-columns: 1fr; }
  .readout-cell + .readout-cell { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .readout-cell { padding: 14px 0 16px; }

  .section-head,
  .section-head > div,
  .contact-grid,
  .meetup { grid-template-columns: 1fr; }
  .strata { grid-template-columns: 1fr; gap: 28px; margin-left: 0; }
  .pub { grid-template-columns: 1fr; }
  .pub-title, .pub-meta, .pub-body { grid-column: 1; grid-row: auto; }
  .pub-meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pub-meta div, .pub-meta div:first-child { padding: 8px 0; }
  .pub + .pub::before { left: 0; }
  .guide { grid-template-columns: 1fr; }
  .guide > .now-label, .guide-entry, .guide-rows { grid-column: 1; grid-row: auto; }
  .guide-steps { columns: 1; }
  .earth .events, .earth .events-empty, .earth .events-past, .earth .course { margin-left: 0; }
  .post-foot { grid-template-columns: 1fr; }
  .post-foot > * { grid-column: 1; }
  .post-step.is-empty { display: none; }
  .ledger-list { grid-template-columns: 1fr; margin-left: 0; }
  .ledger-head { grid-template-columns: 1fr auto; }
  .ledger-head b { grid-column: 1; }
  .ledger-head span { grid-column: 1; grid-row: 2; }
  .ledger-head i { grid-column: 2; grid-row: 1; }
  .case { grid-template-columns: 1fr; gap: 12px; }
  .case-body { grid-column: auto; }
  .about-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .about-photo { grid-column: 1; }
  .about-name { grid-column: 2; }
  .elsewhere { grid-column: 1 / -1; }
  .contact-grid > .contact-form { grid-column: 1; }
  .syllabus { columns: 1; }
  .course-head { grid-template-columns: 1fr; gap: 18px; }
  .course-now { grid-template-columns: 1fr; }
  .now-cell, .now-cell + .now-cell { padding: 20px 0; border-left: 0; }
  .now-cell + .now-cell { border-top: 1px solid var(--hair); }
  .pub { grid-template-columns: 1fr; }
  .post-layout { grid-template-columns: 1fr; gap: 20px; }
  .post-main { display: contents; }
  .post-head, .post-rail, .prose { min-width: 0; }
  .post-head { order: 1; padding-bottom: 0; border-bottom: 0; }
  .post-rail { order: 2; }
  .prose { order: 3; padding-top: 0; }
  /* On a phone the contents list would push the body a screen down. */
  .post-toc { display: none; }
  .post-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-steps { grid-template-columns: 1fr; }
  .post-step + .post-step { padding-left: 0; border-left: 0; text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --header-h: 62px; }
  /* The folio number sits beside its label instead of above it. */
  .section-head > .kicker { display: flex; align-items: baseline; gap: 12px; }
  .section-head > .kicker b { font-size: 40px; line-height: 1; }
  .section-head { margin-bottom: 32px; }
  /* The agenda becomes a readable list instead of unlabeled blocks. */
  .agenda-bar { display: grid; height: auto; gap: 4px; border: 0; }
  .agenda-bar li { min-height: 32px; padding: 6px 10px; align-items: center; }
  .agenda-bar li + li { border-left: 0; }
  .agenda-ticks { display: none; }
  .brand img { width: 148px; }
  .eyebrow-geo { display: none; }
  .hero h1 { font-size: clamp(30px, 9vw, 52px); line-height: 1.14; }
  html[lang="en"] .hero h1 { font-size: clamp(36px, 10.4vw, 52px); }
  .hero-actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .text-link { margin: 8px 0 0; }
  .form-row { grid-template-columns: 1fr; }
  .meetup { padding: 22px 18px; }
  .meetup-facts div, .talks li { grid-template-columns: 52px 1fr; }
  .syllabus a { grid-template-columns: 42px 1fr auto; }
  .syllabus time { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo, .about-name { grid-column: 1; }
  .about-photo { max-width: 240px; }
  .prose { font-size: 16.5px; line-height: 1.9; }
  .course-links { grid-auto-flow: row; justify-self: stretch; }
  .archive-list a { grid-template-columns: 1fr; gap: 4px; }
  .footer-legal { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  header {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.about-latin:lang(zh-Hant) { font-style: normal; }