/* content.css : the static content pages.
   Tokens mirror src/design-tokens.ts; chrome mirrors the header, section register
   and footer that App.jsx renders, so a content page and the homepage read as one
   document set. Duplication between the two is deliberate: these pages must render
   with no React and no build step. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --bg: #121212;
  --bg-elevated: #191919;
  --surface: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --ink: rgba(255, 255, 255, 0.90);
  --ink-2: rgba(255, 255, 255, 0.60);
  --ink-3: rgba(255, 255, 255, 0.48);
  --muted: #B2B2B2;
  --accent: #4C90F0;
  --status-ok: #72CA9B;
  --status-warn: #EC9A3C;
  --display: "Outfit", Arial, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --shell: 1200px;
  --measure: 760px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@property --spot {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
  /* clears the 64px bar plus the document register beneath it */
  scroll-padding-top: 118px;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--display); font-size: 16px; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 60; background: var(--bg-elevated); padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Top bar : same geometry as the homepage nav                         */
/* ------------------------------------------------------------------ */
.bar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bar-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 20px;
  height: 64px; display: flex; align-items: center; gap: 32px;
}
.wordmark {
  display: inline-flex; align-items: center;
  font-size: 17px; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.bar-nav { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color 0.2s;
}
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"] { color: var(--ink); }

.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.7;
  transition: transform 0.25s var(--ease);
}
.nav-dd[data-open] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: calc(100% + 14px); left: -16px;
  min-width: 260px; display: flex; flex-direction: column; padding: 6px 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.nav-dd:hover .nav-dd-panel, .nav-dd[data-open] .nav-dd-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-panel a { padding: 9px 16px; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 0.15s, background 0.15s; }
.nav-dd-panel a:hover { color: var(--ink); background: var(--surface); }
.nav-dd-panel a[aria-current="page"] { color: var(--ink); }

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--radius); background: #fff; color: var(--bg);
  padding: 10px 20px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-pill:hover { background: rgba(255, 255, 255, 0.85); }
.btn-pill:active { transform: scale(0.98); }

.nav-btn {
  display: none; flex-shrink: 0;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}

/* reading progress on the bar's bottom edge */
.bar-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(var(--read, 0)); transform-origin: 0 50%;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Document register : the homepage SectionBar                          */
/* ------------------------------------------------------------------ */
.docbar { border-top: 1px solid var(--border); }
.docbar-inner {
  max-width: var(--shell); margin: 0 auto; padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ */
/* Page body : article column at the shell's left edge, marginal rail   */
/* ------------------------------------------------------------------ */
main.content {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 20px clamp(64px, 9vw, 112px);
  display: grid; grid-template-columns: minmax(0, var(--measure)) 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
article { max-width: var(--measure); counter-reset: sec; }

article h1 {
  font-size: clamp(32px, 6vw, 46px); line-height: 1.14; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 20px; text-wrap: balance;
}
article .lead { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin-bottom: 40px; text-wrap: pretty; }

/* Numbered sections, mono numeral hung in the margin on wide screens */
article > h2 {
  position: relative;
  counter-increment: sec;
  font-size: 26px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  margin: 52px 0 16px; padding-top: 28px; border-top: 1px solid var(--border);
}
article > h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em;
  color: var(--ink-3);
  position: absolute; top: 28px; left: -64px; line-height: 2.4;
}
article h3 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); margin: 32px 0 12px; }
article p { margin-bottom: 16px; color: var(--ink-2); }
article p strong, article li strong { color: var(--ink); font-weight: 500; }
article em { font-style: italic; }
article a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; }
article a:hover { text-decoration: underline; }
article p a, article li a { overflow-wrap: anywhere; }

article ul, article ol { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); }
article ul { list-style: square; }
article li { margin-bottom: 8px; }
article li:last-child { margin-bottom: 0; }
article li::marker { color: var(--ink-3); }

/* Key facts : hairline cells, mono label over value */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px; margin: 0 0 44px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--bg); padding: 18px 20px; }
.facts dt {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin-bottom: 8px;
}
.facts dd { font-size: 15px; line-height: 1.45; color: var(--ink); }

.callout {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated); padding: 24px; margin: 44px 0 0;
}
.callout p { margin: 0; color: var(--ink-2); }
.callout p + p { margin-top: 12px; }

/* FAQ list */
.faq-item { border-top: 1px solid var(--border); padding: 28px 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h2 { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.faq-item p { margin-bottom: 10px; color: var(--ink-2); }
.faq-item p:last-child { margin-bottom: 0; }

/* Legal pages: label / body pairs */
.block { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--border); }
.block h2 { font-family: var(--mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding-top: 3px; margin: 0; border: 0; }
.block h2::before { content: none; }
.block p { color: var(--ink-2); max-width: 60ch; }
.updated { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-top: 40px; }

/* Status chips. /swap/ uses one for the store state, /app/ for an unpublished
   or stale build, so they live here rather than beside either page. */
.chip {
  display: inline-block; padding: 3px 8px;
  border: 1px solid currentColor; border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.chip-warn { color: var(--status-warn); }

/* /swap/ store state. apply-shell.mjs writes either the chip or the App Store
   button into the same <p class="cta">, so this row has to hold both without a
   second layout being built later. Without a rule of its own the paragraph
   inherits article p, and the button would sit 24px too close to the lead. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 40px; }

/* Before / after on /swap/. Same hairline grid as .facts, but the two columns
   are not equal: the right one is what the app produces, so it carries the ink
   and the page's single accent on its micro-label. No new geometry, no second
   accent, no shadow. */
.compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px; margin: 0 0 44px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.compare-col { background: var(--bg); padding: 18px 20px; }
.compare-k {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin: 0 0 8px;
}
.compare-v { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.compare-col.is-after .compare-k { color: var(--accent); }
.compare-col.is-after .compare-v { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Download page (/app/) : platform panels, first-launch steps,         */
/* commands the reader is meant to verify. Ported from the retired      */
/* appsite project; nothing content.css already carried came with it.   */
/* ------------------------------------------------------------------ */
.hero-mark { width: 104px; margin-bottom: 24px; }
.hero-mark svg { display: block; width: 100%; height: auto; }

.platform-note { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; font-size: 14px; color: var(--ink-2); }
/* app.js unhides this once it knows the platform. An author `display` beats the
   UA sheet's [hidden] whatever the specificity, so without this the empty note
   shows to anyone with scripting off. */
.platform-note[hidden] { display: none; }
.platform-note .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }

.builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.build {
  display: flex; flex-direction: column; gap: 24px; min-width: 0;
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius);
}
/* The visitor's own platform is the heavier panel. Filling the other one
   instead made the wrong panel look foremost. */
.build.is-detected { border-color: rgba(255, 255, 255, 0.25); background: var(--surface); }
.build-head h3 { margin: 0; font-size: 20px; }
.build-req { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.build-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.build-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.build-empty-text { font-size: 14px; color: var(--ink-3); }
.build-file { margin: 0; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #fff; color: var(--bg); }
.btn-primary:hover { background: rgba(255, 255, 255, 0.85); }
.btn-secondary { color: var(--ink); border-color: rgba(255, 255, 255, 0.25); }
.btn-secondary:hover { background: var(--surface); border-color: #fff; }
.btn:active { transform: scale(0.98); }

.meta { display: grid; gap: 8px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.meta-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: baseline; min-width: 0; }
.meta-k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.meta-v { min-width: 0; color: var(--ink); }
/* A SHA-256 is 64 characters. Held in a one-line scroller it was cut off at the
   card edge with nothing to say so — and a checksum you cannot read all of is
   not a checksum. It gets the full width of the card and wraps. */
.meta-row-wide { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.meta-v-hash { overflow-wrap: anywhere; line-height: 1.5; }

.manifest-line { margin: 24px 0 0; font-size: 14px; color: var(--ink-3); }

.steps { display: grid; gap: 24px; margin: 0; padding-left: 0; list-style: none; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; margin: 0; padding-top: 24px; border-top: 1px solid var(--border); }
.steps > .step:first-child { padding-top: 0; border-top: 0; }
.step-n { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); line-height: 1.9; }
.step h3 { margin: 0 0 6px; font-size: 17px; }
.step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.step .step-note { margin-top: 10px; padding-left: 16px; border-left: 1px solid var(--border); color: var(--ink-3); font-size: 14px; }

/* Inline code. No content page carried a <code> before /app/ arrived. */
article code { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
article > p code { padding: 2px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* Commands the reader is meant to copy, so they must not be reflowed. Scrolls
   inside its own box rather than widening the page on a narrow screen. */
.code-block { margin: 0 0 16px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.code-block code { padding: 0; background: none; border: 0; color: var(--ink-2); white-space: pre; overflow-wrap: normal; }

/* --status-warn marks exactly one block per page: the one where something can
   actually go wrong for the reader. Three orange rules on one page turn a status
   token into a second accent, which DESIGN.md §8 rules out. */
.prose-emphasis { padding-left: 16px; border-left: 1px solid var(--status-warn); color: var(--ink); }
.prose-note { padding-left: 16px; border-left: 1px solid var(--border); color: var(--ink-3); }

/* ------------------------------------------------------------------ */
/* Marginal rail : sticky contents + a standing offer to talk           */
/* ------------------------------------------------------------------ */
/* The rail stretches to the article's height so the sticky child is bounded by
   it. Sticky on the grid item itself is bounded by main.content instead, which
   lets it drift down over the Related cards. */
.rail { align-self: stretch; }
.rail-sticky { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 28px; }
.rail-title { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 12px; }
.toc { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13px; line-height: 1.4; color: var(--ink-3); text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.toc a:hover { color: var(--ink); }
.toc a[data-active] { color: var(--ink); border-left-color: var(--accent); }
.rail-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 18px;
}
.rail-card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-bottom: 14px; }
.rail-card a { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); text-decoration: none; }
.rail-card a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Footer : the homepage index                                          */
/* ------------------------------------------------------------------ */
footer.site { border-top: 1px solid var(--border); }
footer.site .docbar { border-top: 0; }
.foot-grid {
  max-width: var(--shell); margin: 0 auto; padding: clamp(48px, 8vw, 112px) 20px 56px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 56px;
}
.foot-brand p { margin-top: 24px; font-size: 14px; color: var(--ink-2); }
.eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.foot-grid ul { list-style: none; padding: 0; margin: 24px 0 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-grid li a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.foot-grid li a:hover { color: var(--ink); }
.foot-bar {
  max-width: var(--shell); margin: 0 auto; padding: 16px 20px 56px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.foot-bar a { color: var(--muted); text-decoration: none; display: inline-flex; transition: color 0.2s; }
.foot-bar a:hover { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* ------------------------------------------------------------------ */
/* Scroll reveal. Content is visible by default so a crawler without JS  */
/* (and anyone with scripting off) reads the whole page.                 */
/* ------------------------------------------------------------------ */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Tablet and below                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 1079px) {
  main.content { grid-template-columns: minmax(0, 1fr); }
  article { max-width: var(--measure); }
  article > h2::before { position: static; display: block; left: auto; top: auto; line-height: 1.6; margin-bottom: 6px; }
  .rail { align-self: start; border-top: 1px solid var(--border); padding-top: 32px; }
  .rail-sticky { position: static; }
  .toc { display: none; }
}

@media (max-width: 767px) {
  .nav-btn { display: block; }
  /* the nav leaves the flow when collapsed, so the wordmark carries the spacer */
  .bar-inner { gap: 12px; }
  .wordmark { margin-right: auto; }
  html.js .bar-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 16px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: calc(100svh - 64px); overflow-y: auto;
  }
  html.js .bar[data-open] .bar-nav { display: flex; }
  html.js .bar-nav > * { padding: 0 20px; }
  html.js .bar-nav .nav-link { min-height: 44px; font-size: 14px; }
  html.js .nav-dd { display: flex; flex-direction: column; align-items: stretch; }
  html.js .nav-dd-caret { display: none; }
  html.js .nav-dd-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; background: none; box-shadow: none; padding: 0 0 8px;
  }
  html.js .nav-dd-panel a { padding: 9px 0; }
  /* no JS: the links stay on the page as a wrapped row rather than a hidden scroller */
  html:not(.js) .bar-inner { height: auto; flex-wrap: wrap; padding: 12px 20px; }
  html:not(.js) .bar-nav { flex-wrap: wrap; gap: 14px 20px; }
  html:not(.js) .nav-dd-panel { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: row; flex-wrap: wrap; border: 0; background: none; box-shadow: none; padding: 0; min-width: 0; }

  .bar .btn-pill { padding: 9px 14px; }
  main.content { padding: 32px 20px 64px; }
  article h1 { font-size: clamp(28px, 8vw, 34px); }
  article .lead { font-size: 17px; margin-bottom: 32px; }
  article > h2 { font-size: 22px; margin-top: 40px; padding-top: 24px; }
  article h3 { font-size: 18px; }
  .facts { margin-bottom: 36px; }
  .callout { padding: 20px; margin-top: 32px; }
  .faq-item { padding: 24px 0; }
  .block { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .block h2 { padding-top: 0; }
  .builds { grid-template-columns: minmax(0, 1fr); }
  .meta-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .btn { align-self: stretch; }
  .step { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 56px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bar { padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .bar-inner { padding: 0 16px; }
  .bar .btn-pill { padding: 9px 12px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Related : shell-generated, replaces the old hand-authored card grid */
/* ------------------------------------------------------------------ */
/* One rule, not two. A second .related block used to sit up with the old card
   grid; equal specificity meant this one won, and the responsive margin above
   was being replaced by a fixed 56px without anyone noticing. The clamp is the
   surviving value. */
.related {
  grid-column: 1 / -1;
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.related ul { display: flex; flex-wrap: wrap; gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.related a {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2); text-decoration: none;
}
.related a:hover { color: var(--ink); }