:root {
  /* .i.s.o. brand tokens — canonical dictionary lives at docs/BRAND.md in the
     app repo. The site mirrors the APP: a NEUTRAL charcoal ground (no warm
     brown) with the full default-theme palette used sparingly, color-coded by
     section the way the app color-codes its features. Type: Optima + Atkinson. */
  color-scheme: dark;

  /* Neutral charcoal — exact app tones (sheetMat #141414, neuBoss #1c1c1c,
     neuWell #171717). The page sits a touch darker so tiles read as panels. */
  --void:       #0e0e0e;   /* page background, behind the tile grid */
  --paper:      #141414;   /* base tile (app sheetMat) */
  --paper-deep: #181818;   /* slightly deeper tile */
  --paper-card: #1c1c1c;   /* raised tile (app neuBossTop) */
  --well:       #121212;   /* inset / darkest tile */
  --cream:      #1c1c1c;   /* legacy name → neutral raised tile */
  --hairline:   #2a2a2a;

  /* Ink — app ivory (#EAE0E6) + neutral muted greys. */
  --ink:         #EAE0E6;
  --ink-body:    #cfc9cd;
  --ink-soft:    #9a949a;
  --ink-faint:   #5e595e;
  --on-ink:      #141414;   /* legacy dark-on-light — unused on the dark site */
  --on-ink-soft: #6a6468;

  /* Default-theme palette (from the app's AppTheme `themeDefault`). Each color
     carries a meaning in-app; the site uses them the same way — as occasional
     accents on the neutral ground, never as large fills. */
  --c-focus:        #E0A347;  /* amber       · follow / focus  */
  --c-spotlight:    #B8E047;  /* chartreuse  · popular         */
  --c-collection:   #9E7AD1;  /* lavender    · collections     */
  --c-gear:         #D18580;  /* dusty rose  · gear            */
  --c-contact:      #6B9EF2;  /* powder blue · contact         */
  --c-credentials:  #6BD09D;  /* mint        · credentials     */
  --c-restrictions: #E08573;  /* coral       · restrictions    */
  --c-privacy:      #F5901F;  /* orange      · privacy         */
  --c-recent:       #8585E0;  /* periwinkle  · recent          */
  --c-random:       #C777C7;  /* mauve       · random          */
  --c-tags:         #59B8B8;  /* teal        · tags            */
  --c-exif:         #EB8DBF;  /* magenta     · exif            */
  --c-location:     #528CEB;  /* blue        · location        */
  --c-featured:     #E0BF2E;  /* gold        · featured        */
  --c-heartbeat:    #47C762;  /* green       · heartbeats      */

  /* `--local` is the current section's accent; sections override it, and every
     accent rule reads `var(--local)` directly so the override is resolved at the
     point of use. NOTE: do NOT reintroduce `--accent: var(--local)` aliases — a
     custom property that references another resolves to a COMPUTED value at its
     declaring element (here :root), baking the root colour and ignoring section
     overrides. Always use `var(--local)` directly. */
  --local: var(--c-focus);

  --rule:       rgba(234, 224, 230, 0.14);
  --rule-faint: rgba(234, 224, 230, 0.05);

  /* Type */
  --display: 'Optima', 'Optima Nova LT Pro', 'Linotype Optima', 'URW Classico', 'Candara', 'Segoe UI', sans-serif;
  --body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;  /* LCD metadata strip */
  --serif: var(--display);  /* legacy alias — existing rules keep working */

  --gutter: clamp(1rem, 3vw, 2.25rem);
  --tile-gap: 4px;
  --card-radius: 16px;
  --radius-sub: 14px;
  --radius-well: 10px;
  --radius-plate: 8px;
  --radius-pill: 999px;
  --max: 1500px;

  /* Soft neumorphic boss elevation (BRAND.md §3) — light from top-left:
     a deep bottom-right drop shadow, a faint ivory top-left rim, and an inset
     top highlight. Raised tiles read as panels lifted off the void. */
  --shadow-boss:
    6px 6px 18px rgba(0, 0, 0, 0.55),
    -1px -1px 1px rgba(234, 224, 230, 0.04),
    inset 0 1px 0 rgba(234, 224, 230, 0.05);
}

/* ── Per-section accent — color-codes each spread like an app feature ── */
.spread--cover      { --local: var(--c-focus); }        /* amber      */
.spread--gloss      { --local: var(--c-tags); }          /* teal       */
.spread--principles { --local: var(--c-collection); }    /* lavender   */
.spread--fair       { --local: var(--c-featured); }      /* gold       */
.spread--cta-spread { --local: var(--c-spotlight); }     /* chartreuse */

/* The three principles each carry their own color. */
.tile--p1 { --local: var(--c-heartbeat); }   /* green       · i.   */
.tile--p2 { --local: var(--c-contact); }      /* powder blue · ii.  */
.tile--p3 { --local: var(--c-restrictions); } /* coral       · iii. */

/* Legal pages rotate the palette per section (numbers + links follow). */
.legal { --local: var(--c-location); }
.legal section:nth-of-type(6n + 1) { --local: var(--c-focus); }
.legal section:nth-of-type(6n + 2) { --local: var(--c-tags); }
.legal section:nth-of-type(6n + 3) { --local: var(--c-collection); }
.legal section:nth-of-type(6n + 4) { --local: var(--c-credentials); }
.legal section:nth-of-type(6n + 5) { --local: var(--c-restrictions); }
.legal section:nth-of-type(6n)     { --local: var(--c-recent); }

/* Tour chapters each get their own accent. */
.spread--tour:nth-of-type(6n + 1) { --local: var(--c-focus); }
.spread--tour:nth-of-type(6n + 2) { --local: var(--c-contact); }
.spread--tour:nth-of-type(6n + 3) { --local: var(--c-collection); }
.spread--tour:nth-of-type(6n + 4) { --local: var(--c-credentials); }
.spread--tour:nth-of-type(6n + 5) { --local: var(--c-restrictions); }
.spread--tour:nth-of-type(6n)     { --local: var(--c-tags); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.28;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Registration marks — hidden on phones */
.reg-mark {
  position: fixed;
  width: 14px;
  height: 14px;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  display: none;
}
.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: var(--ink-soft);
}
.reg-mark::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.reg-mark::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

@media (min-width: 720px) {
  .reg-mark { display: block; width: 16px; height: 16px; }
  .reg-tl { top: 16px; left: 16px; }
  .reg-tr { top: 16px; right: 16px; }
  .reg-bl { bottom: 16px; left: 16px; }
  .reg-br { bottom: 16px; right: 16px; }
}

/* Wordmark dot styling */
.dot {
  display: inline-block;
  font-size: 0.62em;
  vertical-align: baseline;
  transform: translateY(-0.05em);
  margin: 0 -0.03em;
  color: var(--local);
  font-weight: 400;
}

.mini-mark { font-family: var(--serif); letter-spacing: 0.04em; }
.mini-mark .dot { font-size: 0.7em; transform: translateY(-0.02em); }

/* Multi-colour wordmark — the four periods cycle the app palette, a small
   signature of the whole spectrum. (mini-mark dots are element children 1–4;
   hero-mark interleaves .ltr spans, so its dots land on 1, 3, 5, 7.) */
.mini-mark .dot:nth-child(1), .hero-mark .dot:nth-child(1) { color: var(--c-focus); }
.mini-mark .dot:nth-child(2), .hero-mark .dot:nth-child(3) { color: var(--c-tags); }
.mini-mark .dot:nth-child(3), .hero-mark .dot:nth-child(5) { color: var(--c-collection); }
.mini-mark .dot:nth-child(4), .hero-mark .dot:nth-child(7) { color: var(--c-heartbeat); }

/* ───────────── Masthead ───────────── */
.masthead {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.masthead-left { font-size: 1rem; color: var(--ink); }
.masthead-center { display: none; }
.masthead-right { text-align: right; }
.masthead-right a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  border-bottom: 1px solid var(--rule);
  padding: 6px 4px;
  display: inline-block;
  transition: border-color 200ms ease, color 200ms ease;
}
.masthead-right a:hover { color: var(--local); border-color: var(--local); }
.masthead-right a span { display: inline-block; transition: transform 200ms ease; margin-left: 0.15em; }
.masthead-right a:hover span { transform: translateX(3px); }

@media (min-width: 640px) {
  .masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3.25rem) 1rem;
  }
  .masthead-center {
    display: block;
    font-style: italic;
    text-align: center;
    font-size: 1.275rem;
    letter-spacing: 0.06em;
  }
}

/* ───────────── Main ───────────── */
main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 900px) {
  main { padding: 0 clamp(2rem, 4vw, 3.25rem); }
}

/* ───────────── Tiles (mobile base) ───────────── */
.tile {
  position: relative;
  isolation: isolate;
  width: 100%;
}

/* All tiles are neutral charcoal panels (no brown / oxblood / light tiles); color
   comes from the per-section accent, not the background. Flat fills — a soft
   gradient over a near-flat dark tone bands hard at 8-bit depth, so depth comes
   from the boss shadow (below), not a background gradient. The tonal range
   between tiles + the page-void gap keeps the magazine-spread structure clear. */
.tile--paper   { background: var(--paper);      color: var(--ink); }
.tile--cream   { background: var(--paper-card);  color: var(--ink); }
.tile--ink     { background: var(--paper-deep);  color: var(--ink); }
.tile--oxblood { background: var(--well);        color: var(--ink); }

/* Color/text tiles — generous mobile padding & height */
.tile--paper,
.tile--cream,
.tile--ink,
.tile--oxblood {
  padding: clamp(2rem, 8vw, 3rem) clamp(1.5rem, 6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 55vh;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-boss);
}

/* Photo tile */
.tile--photo {
  background: var(--paper-deep);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-boss);
}
.tile--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) brightness(0.92) saturate(0.88);
  transition: transform 800ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.tile--photo:hover img { transform: scale(1.02); }

/* Bottom scrim — keeps captions legible over any photo */
.tile--photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.62) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.tile--photo .caption {
  position: absolute;
  bottom: 1rem;
  left: 1.1rem;
  right: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Spread spacing (mobile = stacked tiles with small gaps) */
.spread {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
}

/* Per-tile mobile aspect ratios */
.tile--cover-hero    { aspect-ratio: 3 / 4; }
.tile--gloss-photo   { aspect-ratio: 4 / 3; }
.tile--p1-photo,
.tile--p2-photo,
.tile--p3-photo     { aspect-ratio: 4 / 5; }
.tile--cta-photo     { aspect-ratio: 4 / 3; }

/* Per-tile mobile heights */
.tile--cover-mark    { min-height: 42vh; align-items: center; justify-content: center; }
.tile--cover-meta    { min-height: 38vh; }
.tile--cover-rotator { min-height: 42vh; }
.tile--gloss-quote   { min-height: 70vh; }
.tile--p1, .tile--p2, .tile--p3 { min-height: 50vh; }
.tile--fair-number   { min-height: 55vh; }
.tile--fair-body     { min-height: 50vh; }
.tile--manifesto     { min-height: 70vh; }
.tile--cta           { min-height: 55vh; }

/* ───────────── Type ───────────── */
.hero-mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4rem, 16vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}
.hero-mark .ltr { font-style: normal; }
.hero-mark .dot {
  font-size: 0.5em;
  transform: translateY(-0.08em);
  margin: 0 -0.02em;
}

.tile-eyebrow,
.rotator-eyebrow,
.quote-eyebrow,
.spread-eyebrow,
.manifesto-eyebrow,
.cta-eyebrow {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--local);
  opacity: 0.9;
}
.rotator-eyebrow {
  letter-spacing: 0.12em;
  text-transform: none;
  font-size: 0.85rem;
  opacity: 1;
  color: var(--ink-soft);
}

.tile-lead {
  font-style: italic;
  font-size: clamp(1.85rem, 6vw, 2.4rem);
  line-height: 1.15;
}
.tile-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.25;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
}
.hero-prefix { font-style: italic; }
.hero-line .dots {
  display: inline-block;
  color: var(--local);
  letter-spacing: 0.18em;
  margin-left: 0.25em;
  font-style: normal;
  transform: translateY(-0.12em);
}
.rotator-wrap { position: relative; display: inline-flex; align-items: baseline; }
.rotator {
  display: inline-block;
  color: var(--local);
  font-style: italic;
  font-weight: 500;
  min-width: 6.5ch;
  transition: opacity 500ms ease, transform 500ms ease;
}
.rotator.is-fading { opacity: 0; transform: translateY(-6px); }
.hero-stop { color: var(--local); font-style: italic; }

.quote-eyebrow {
  color: var(--local);
}
.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote-gloss {
  font-style: normal;
  font-size: clamp(1rem, 3.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-faint);
  padding-top: 1.25rem;
  max-width: 36ch;
}
.quote-gloss em { font-style: italic; color: var(--ink); }

.quote-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 42ch;
  margin-top: 0.5rem;
}
.quote-body p {
  font-family: var(--body);
  font-size: clamp(0.98rem, 3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.quote-body em {
  font-style: italic;
  color: var(--ink);
}

.spread-header {
  padding: 1.5rem clamp(1.5rem, 6vw, 2.5rem) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.spread-eyebrow { color: var(--local); }
.spread-title {
  font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: var(--ink);
}
.spread-title em { font-style: italic; }

.prin-num {
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--local);
  opacity: 0.95;
}
.prin-text {
  font-style: italic;
  font-size: clamp(1.9rem, 6.5vw, 2.3rem);
  line-height: 1.15;
}
.prin-note {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
  font-style: italic;
}

.manifesto-eyebrow { color: var(--local); }
.manifesto-lead {
  font-style: italic;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
}
.manifesto-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 42ch;
}
.manifesto-body p {
  font-family: var(--body);
  font-size: clamp(0.98rem, 3vw, 1.08rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.manifesto-body em { font-style: italic; color: var(--ink); }
.manifesto-foot {
  font-style: italic;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  color: var(--ink);
  border-top: 1px solid var(--rule-faint);
  padding-top: 1.25rem;
  max-width: 32ch;
}

/* ───────────── A fair exchange (pricing) ───────────── */
.tile--fair-number {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
}
.fair-eyebrow {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--local);
}
.fair-number {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(5.5rem, 22vw, 10rem);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.fair-currency {
  font-size: 0.42em;
  font-style: italic;
  color: var(--local);
  margin-right: 0.04em;
  align-self: flex-start;
  transform: translateY(0.18em);
}
.fair-unit {
  font-size: 0.22em;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin-left: 0.18em;
  align-self: baseline;
  transform: translateY(-0.4em);
}
.fair-meta {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-style: italic;
  color: var(--ink-soft);
}

.tile--fair-body {
  gap: 1rem;
  justify-content: center;
}
.tile--fair-body > p:not(.fair-foot) {
  font-family: var(--body);
  font-style: normal;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 32ch;
}
.tile--fair-body em { font-style: italic; }
.fair-foot {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 0.5rem;
  border-top: 1px solid var(--rule-faint);
  padding-top: 1.25rem;
  max-width: 28ch;
}

.tile--cta {
  align-items: flex-start;
  /* Pack content top-down. The generic color-tile rule sets
     space-between, which on mobile (min-height: 55vh) flings the
     appended subscribe form to the bottom of the tall box and off
     the fold. flex-start keeps the form directly under the link. */
  justify-content: flex-start;
}
.cta-eyebrow { color: var(--local); }
.tile--cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
}
.cta-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--local);
  text-decoration: none;
  padding: 1.1rem 2.25rem;
  border: 1px solid var(--local);
  border-radius: var(--radius-well);
  background: transparent;
  transition: background 250ms ease, color 250ms ease, letter-spacing 250ms ease;
  min-height: 44px;
}
.cta-link:hover,
.cta-link:focus-visible {
  background: var(--local);
  color: var(--paper);
  outline: none;
  letter-spacing: 0.4em;
}

/* ───────────── Colophon ───────────── */
.colophon {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  width: 100%;
  text-align: center;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.25rem) clamp(2rem, 4vw, 2.75rem);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

/* LCD metadata strip — the footer line as a camera-overlay homage (BRAND.md
   motif 2). Mono, uppercase, wide tracking. The wordmark keeps its Optima
   lowercase styling so the LCD treatment never shouts ".I.S.O." */
.colophon-strip {
  font-family: var(--mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.colophon-strip .mini-mark {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ───────────── Scroll reveal (mobile + tablet) ───────────── */
.tile,
.spread-header {
  opacity: 1;
  transform: none;
}
.is-revealing .tile,
.is-revealing .spread-header {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.2, 0.65, 0.3, 1),
              transform 800ms cubic-bezier(0.2, 0.65, 0.3, 1);
  will-change: opacity, transform;
}
.is-revealing .tile.is-in,
.is-revealing .spread-header.is-in {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────── */
/* ───────────── Desktop upgrade ───────────────── */
/* ─────────────────────────────────────────────── */

@media (min-width: 900px) {
  :root {
    --tile-gap: clamp(0.5rem, 1vw, 0.85rem);
  }

  /* Reset mobile tile sizing */
  .tile--photo,
  .tile--cover-hero,
  .tile--gloss-photo,
  .tile--p1-photo,
  .tile--p2-photo,
  .tile--p3-photo,
  .tile--cta-photo { aspect-ratio: auto; }

  .tile--paper,
  .tile--cream,
  .tile--ink,
  .tile--oxblood,
  .tile--cover-mark,
  .tile--cover-meta,
  .tile--cover-rotator,
  .tile--gloss-quote,
  .tile--p1, .tile--p2, .tile--p3,
  .tile--fair-number,
  .tile--fair-body,
  .tile--manifesto,
  .tile--cta {
    min-height: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* Spreads become grids */
  .spread {
    display: grid;
    gap: var(--tile-gap);
    margin-bottom: var(--tile-gap);
  }

  /* Spread 1 · Cover */
  .spread--cover {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1.1fr);
    grid-template-areas:
      "photo  mark"
      "photo  meta"
      "photo  rot";
    min-height: calc(100vh - 7rem);
    margin-top: clamp(0.5rem, 1.5vw, 1rem);
  }
  .tile--cover-hero    { grid-area: photo; }
  .tile--cover-mark    { grid-area: mark; }
  .tile--cover-meta    { grid-area: meta; }
  .tile--cover-rotator { grid-area: rot; }

  /* Spread 2 · Gloss */
  .spread--gloss {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr);
    grid-template-areas: "photo quote";
    min-height: 70vh;
  }
  .tile--gloss-photo { grid-area: photo; }
  .tile--gloss-quote { grid-area: quote; }

  /* Spread 3 · Principles */
  .spread--principles {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto repeat(2, minmax(280px, 1fr));
    grid-template-areas:
      "header   header     header"
      "p1-photo p2         p3-photo"
      "p1       p2-photo   p3";
    min-height: 70vh;
  }
  .spread-header  { grid-area: header; border-bottom: 1px solid var(--rule); padding: 1rem 0 0.75rem; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .tile--p1-photo { grid-area: p1-photo; }
  .tile--p1       { grid-area: p1; }
  .tile--p2       { grid-area: p2; }
  .tile--p2-photo { grid-area: p2-photo; }
  .tile--p3-photo { grid-area: p3-photo; }
  .tile--p3       { grid-area: p3; }

  /* Spread 4 · A fair exchange */
  .spread--fair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: minmax(420px, 1fr);
    grid-template-areas: "number body";
    min-height: 60vh;
  }
  .tile--fair-number { grid-area: number; }
  .tile--fair-body   { grid-area: body; }

  /* Spread 5 · Welcome + CTA */
  .spread--cta-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(240px, 2fr) minmax(120px, 1fr);
    grid-template-areas:
      "manifesto photo"
      "manifesto cta";
    min-height: 52.5vh;
  }
  .tile--manifesto { grid-area: manifesto; }
  .tile--cta-photo { grid-area: photo; }
  .tile--cta       { grid-area: cta; }

  /* Desktop type tweaks */
  .hero-mark { font-size: clamp(3rem, 7vw, 5.5rem); }
  .hero-line { font-size: clamp(1.4rem, 2.4vw, 2rem); }
  .quote     { font-size: clamp(2.2rem, 5.5vw, 4.5rem); }
  .prin-text { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  .tile-lead { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .manifesto-lead { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
  .manifesto-body p { font-size: clamp(0.95rem, 1.2vw, 1.05rem); }
  .manifesto-foot { font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .fair-number { font-size: clamp(5rem, 11vw, 9rem); }
  .tile--fair-body > p:not(.fair-foot) { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
  .tile--cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
  .cta-link { font-size: 0.78rem; padding: 0.95rem 2.25rem; }

  .tile--cover-mark { align-items: center; justify-content: center; }
}

/* ───────────── Device screenshots ──────────────
   App screenshots float on the dark mat with a soft drop shadow.
   No iPhone bezel — the screenshot already carries its own chrome.
   `contain` keeps the full screen visible regardless of tile aspect. */
.tile--device {
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--card-radius);
}
.tile--device::after { content: none; } /* no scrim under the screenshot */
.tile--device img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: none;
  border-radius: 6px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 12px 26px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.tile--device:hover img { transform: none; }

/* Invisible overlay link — covers the whole tile so a tap or click
   anywhere on the screenshot navigates. The img/caption render
   beneath, untouched. */
.tile-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  text-decoration: none;
  color: transparent;
  border-radius: inherit;
}
.tile-link:focus-visible {
  outline: 2px solid var(--local);
  outline-offset: -6px;
}

/* Gentle interactive affordance: lift the screenshot a touch on hover,
   slightly deepen the shadow. Restrained — the editorial restraint stays. */
.tile--device:has(.tile-link) img {
  transition: transform 280ms cubic-bezier(0.2, 0.65, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.tile--device:has(.tile-link:hover) img,
.tile--device:has(.tile-link:focus-visible) img {
  transform: translateY(-4px);
  box-shadow:
    0 38px 80px rgba(0, 0, 0, 0.65),
    0 16px 32px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Per-tile mobile heights for device shots — taller, since the asset is portrait */
.tile--cover-hero.tile--device,
.tile--cta-photo.tile--device { aspect-ratio: 3 / 4; }

/* ───────────── Tour page ──────────────
   Reuses the spread/tile system. Each section pairs a copy tile
   with one or more screenshot tiles. */
.tour-intro {
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 6vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
  max-width: var(--max);
  margin: 0 auto;
}
.tour-intro .eyebrow {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.85rem;
}
.tour-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tour-intro h1 em { font-style: italic; color: var(--local); }
.tour-intro p {
  font-size: clamp(1rem, 3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule-faint);
  padding-top: 1.25rem;
}

/* Chapter header above each tour spread.
   Big italic plate marker on the left, section reference on the right,
   hairline rule beneath. Acts as a magazine chapter break. */
.tour-chapter {
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding: 0 clamp(1.5rem, 6vw, 2.5rem) clamp(0.9rem, 2.2vw, 1.25rem);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.tour-chapter .chapter-mark {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.tour-chapter .chapter-section {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* A continuation spread follows a main spread with no new chapter mark.
   Sits flush under the previous spread so the two read as one chapter. */
.spread--tour-continuation { margin-top: 0; }

/* A tour section is a spread with a small heading row inside the copy tile */
.tile--feature {
  background: var(--paper-deep);
  color: var(--ink);
  padding: clamp(2rem, 8vw, 3rem) clamp(1.5rem, 6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 55vh;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-boss);
}
.tile--feature.tile--cream { background: var(--paper-card); }
.tile--feature.tile--ink   { background: var(--paper-deep); color: var(--ink); }
.tile--feature .feat-num {
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.tile--feature .feat-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 6.5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: inherit;
}
.tile--feature .feat-title em { font-style: italic; color: var(--local); }
.tile--feature .feat-body {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 42ch;
}
.tile--feature .feat-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.tile--feature .feat-body p {
  font-family: var(--body);
  font-size: clamp(0.98rem, 3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.tile--feature.tile--ink .feat-body p { color: var(--ink-soft); }
.tile--feature .feat-body em { font-style: italic; color: var(--ink); }
.tile--feature .feat-foot {
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-faint);
  padding-top: 1rem;
  max-width: 32ch;
}

/* Screenshot grids: 2-up and 4-up inside a single tile */
.tile--device-grid {
  background: var(--paper-deep);
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--card-radius);
}
.tile--device-grid::after { content: none; }
.tile--device-grid .device-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
  margin: 0;
}
.tile--device-grid .device-cell img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  filter: none;
  border-radius: 6px;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Mobile-first: keep grids readable on a phone. Desktop widens below. */
.tile--device-grid--pair     { grid-template-columns: 1fr 1fr; }
.tile--device-grid--triple   { grid-template-columns: 1fr; }
.tile--device-grid--quad     { grid-template-columns: 1fr 1fr; }
.tile--device-grid--quad-row { grid-template-columns: 1fr 1fr; }
.tile--device-grid--six      { grid-template-columns: 1fr 1fr; }

@media (min-width: 900px) {
  .tile--device-grid--triple   { grid-template-columns: 1fr 1fr 1fr; }
  .tile--device-grid--quad     { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .tile--device-grid--quad-row { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; }
  .tile--device-grid--six      { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
}

/* Device-tile captions sit above the screenshot, not under a dark scrim */
.tile--device .caption,
.tile--device-grid .caption {
  position: static;
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-shadow: none;
  text-align: center;
}
.tile--device { flex-direction: column; }
.tile--device-grid .device-cell .caption { color: var(--ink-faint); }

/* Tour spreads — mobile stacks (chapter → copy → screens),
   desktop alternates copy/photo with the chapter spanning above. */
.spread--tour {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  margin-bottom: var(--tile-gap);
}

/* When a continuation spread immediately follows a main spread, the pair
   reads as one chapter — tighten the gap between them on mobile too. */
.spread--tour:has(+ .spread--tour-continuation) { margin-bottom: var(--tile-gap); }
.spread--tour-continuation .tour-chapter { display: none; }

@media (min-width: 900px) {
  .tile--feature { min-height: 0; padding: clamp(1.75rem, 3vw, 2.75rem); }

  .spread--tour {
    display: grid;
    gap: var(--tile-gap);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto minmax(520px, 1fr);
    grid-template-areas:
      "header header"
      "copy   device";
    min-height: 70vh;
  }
  .spread--tour.spread--tour-reverse {
    grid-template-areas:
      "header header"
      "device copy";
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .spread--tour > .tour-chapter { grid-area: header; margin-top: 0; }
  .spread--tour .tile--feature { grid-area: copy; }
  .spread--tour .tile--device,
  .spread--tour .tile--device-grid { grid-area: device; }

  /* Wide continuation spreads — full-bleed device grid, no header */
  .spread--tour-wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(520px, 1fr);
    grid-template-areas: "device";
    min-height: 0;
  }

  /* Continuation spread sits tight against its parent — the parent owns
     the bottom margin to the next chapter. */
  .spread--tour:has(+ .spread--tour-continuation) { margin-bottom: var(--tile-gap); }

  .tile--device-grid--quad,
  .tile--device-grid--six { min-height: 560px; }
}

/* Tour CTA at the foot of the page — spotlight green accent, matching the
   waitlist CTA on the index cover so "Request an invitation" reads the same. */
.tour-cta {
  --local: var(--c-spotlight);
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  margin: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 7vw, 4rem);
}
.tour-cta .tile--paper {
  align-items: flex-start;
  gap: 1rem;
}
.tour-cta .cta-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
}
.tour-cta .cta-body {
  font-family: var(--body);
  font-size: clamp(0.98rem, 3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* Active state for tour link in masthead */
.masthead-right .nav-group {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(0.85rem, 2.4vw, 1.4rem);
}
.masthead-right .nav-group a.is-active {
  color: var(--local);
  border-color: var(--local);
}

@media (prefers-reduced-motion: reduce) {
  .rotator,
  .tile--photo img,
  .masthead-right a span,
  .cta-link,
  .is-revealing .tile,
  .is-revealing .spread-header { transition: none; }
}

/* ── Email subscribe form (CTA tile) ─────────────────────────────────── */
.subscribe-form {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
}
.subscribe-form .cta-eyebrow { margin: 0; }
.subscribe-input {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(234, 224, 230, 0.04);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-well);
  padding: 0.85rem 1rem;
  width: 100%;
  max-width: 22rem;
  min-height: 44px;
}
.subscribe-input::placeholder { color: var(--ink-soft); }
.subscribe-input:focus-visible { outline: none; border-color: var(--local); }
/* Honeypot — off-screen, never shown to people. */
.subscribe-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.subscribe-status {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.subscribe-status.is-error { color: var(--c-restrictions); }

/* ───────────── Legal / document pages ──────────────
   Privacy Policy, Terms & Conditions, EULA. A single
   readable prose column on the same dark paper, Optima
   throughout. Deliberately plain — long text wants air,
   a comfortable measure, and clear hierarchy, not tiles. */
.legal {
  position: relative;
  z-index: 2;
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 6vw, 2rem) clamp(3rem, 8vw, 5rem);
}

.legal-header {
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.legal-eyebrow {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.legal-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-header h1 em { font-style: italic; color: var(--local); }
.legal-dateline {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-lede {
  margin-top: 1.25rem;
  font-size: clamp(1.02rem, 3vw, 1.15rem);
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* In-plain-words summary box — convenience only, never binding */
.legal-note {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--cream);
  border-left: 2px solid var(--local);
  border-radius: 4px;
}
.legal-note .legal-note-label {
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.legal-note p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.legal-note p + p { margin-top: 0.6rem; }

/* Table of contents */
.legal-toc {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule-faint);
  border-radius: var(--card-radius);
}
.legal-toc h2 {
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  border: 0;
  padding: 0;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  columns: 2;
  column-gap: 2rem;
}
.legal-toc li {
  counter-increment: toc;
  margin: 0 0 0.5rem;
  break-inside: avoid;
}
.legal-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
  transition: color 180ms ease;
}
.legal-toc a::before {
  content: counter(toc) ".";
  color: var(--local);
  margin-right: 0.5em;
  font-style: italic;
}
.legal-toc a:hover { color: var(--local); }

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}

/* Section bodies */
.legal section { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
  scroll-margin-top: 1.5rem;
}
.legal h2 .sec-num {
  font-style: italic;
  color: var(--local);
  margin-right: 0.5em;
}
.legal h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.02rem, 2.6vw, 1.15rem);
  color: var(--ink);
  margin: 1.5rem 0 0.6rem;
}
.legal p,
.legal li {
  font-family: var(--body);
  font-size: clamp(0.98rem, 2.6vw, 1.04rem);
  line-height: 1.68;
  color: var(--ink-soft);
}
.legal p { margin: 0 0 1rem; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal em { font-style: italic; color: var(--ink); }
.legal a {
  color: var(--local);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 180ms ease;
}
.legal a:hover { border-color: var(--local); }

.legal ul,
.legal ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal li { margin-bottom: 0.55rem; }
.legal li::marker { color: var(--ink-faint); }
.legal ul ul { margin: 0.55rem 0 0.25rem; }

/* Definition-style rows (e.g. data tables in the privacy policy) */
.legal dl { margin: 0 0 1rem; }
.legal dt {
  font-style: italic;
  color: var(--ink);
  font-size: clamp(0.98rem, 2.6vw, 1.04rem);
  margin-top: 1rem;
}
.legal dd {
  margin: 0.2rem 0 0;
  padding-left: 0;
  font-family: var(--body);
  font-size: clamp(0.95rem, 2.5vw, 1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Cross-links between the three documents, set under the header */
.legal-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.legal-siblings a { border-bottom: 1px solid var(--rule-faint); }
.legal-siblings .is-current { color: var(--ink-faint); border: 0; }

/* Footer legal links shared across all pages */
.colophon-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin-bottom: 0.9rem;
}
.colophon-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--rule-faint);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.colophon-nav a:hover { color: var(--local); border-color: var(--local); }