/* Try It Anyway — the site.
   ---------------------------------------------------------------------------
   The brand owns the surface; this file only arranges it.

   Every colour here is a role from tryitanyway-brand's tokens.css, loaded
   before this file (`/assets/brand/tokens.css`). There is no hex in this file
   and a test keeps it that way: a typed value cannot follow the brand when the
   brand moves, and it has moved twice. Hairlines are mixed from a role, never
   typed, for the same reason.

   Behaviour follows Apple's rules, not a motion budget: respond on press, never
   lock out input, no animation the reader did not cause, and a reduced-motion
   path for every one. The single decorative move is the brand's: the seal
   presses once, on the home page, and the page is correct if it never runs.
   --------------------------------------------------------------------------- */

/* ── Typeface: Archivo, from the brand, self-hosted ────────────────────── */
/* Three subsets so a reader in Berlin never downloads glyphs they will not see.
   One variable file per subset covers every weight. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../brand/archivo-latin.woff2') format('woff2');
  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, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../brand/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../brand/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* ── Site tokens: layout and behaviour only, never colour ──────────────── */
/* Prefixed --site- so nothing here can shadow a --tia- name the brand might
   add later. Space is in rem so it grows with the reader's text size. */
:root {
  --site-space-1: 0.25rem;
  --site-space-2: 0.5rem;
  --site-space-3: 0.875rem;
  --site-space-4: 1.375rem;
  --site-space-5: 1.875rem;
  --site-space-6: 2.5rem;
  --site-space-7: 3.25rem;
  --site-space-8: 4.5rem;
  --site-space-9: 6rem;

  --site-max: 76rem;
  --site-gutter: clamp(1rem, 5vw, 4.5rem);
  --site-label-col: 10.5rem;
  --site-label-gap: var(--site-space-7);
  --site-measure: 62ch;
  --site-touch: 44px;

  /* Hairlines, mixed from the ground's own ink so they move with the brand.
     The fallback is the brand's second light step, for browsers without
     color-mix; it reads as a quieter rule and nothing breaks. */
  --site-hairline: var(--tia-ground-deep);
  --site-hairline-strong: var(--tia-on-ground-muted);
  --site-hairline-band: var(--tia-on-band-muted);

  /* Behaviour. The ease is the brand's own press curve: fast out of the gate,
     settling without overshoot, which is what a critically damped spring looks
     like when you only have a curve. Durations are short because every one of
     them sits on the path between the reader's hand and a response. */
  --site-ease: var(--tia-seal-press-easing);
  --site-respond: 90ms;
  --site-settle: 180ms;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --site-hairline: color-mix(in srgb, var(--tia-on-ground) 15%, transparent);
    --site-hairline-strong: color-mix(in srgb, var(--tia-on-ground) 42%, transparent);
    --site-hairline-band: color-mix(in srgb, var(--tia-on-band) 18%, transparent);
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--tia-ground);
  /* No tap flash: every control below draws its own pressed state. */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--tia-ground);
  color: var(--tia-on-ground);
  font-family: var(--tia-font);
  font-weight: 400;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  /* 1.66 on the light ground. The brand's 1.72 is for light type on the dark
     band, and it is used there. */
  line-height: 1.66;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* German is a first-class language under the English name. */
body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 18 6 6; }

img { max-width: 100%; display: block; }

::selection { background: var(--tia-accent); color: var(--tia-ground); }

/* Focus: a square cinnabar ring, never a glow. Keyboard only. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--tia-accent-ink);
  outline-offset: 3px;
  border-radius: 0;
}

.skip {
  position: absolute;
  left: var(--site-space-2);
  top: var(--site-space-2);
  transform: translateY(-200%);
  background: var(--tia-band);
  color: var(--tia-on-band);
  padding: var(--site-space-3) var(--site-space-4);
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}
.skip:focus { transform: none; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */
.sheet {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3) var(--site-space-5);
  padding-block: var(--site-space-5) var(--site-space-4);
  border-block-end: 1px solid var(--site-hairline);
}

/* The chop and the name are the way home. It never looks like a link: it is
   the masthead. The hit area is the whole lock-up, at least 44px tall. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-3);
  min-block-size: var(--site-touch);
  color: var(--tia-on-ground);
  text-decoration: none;
}
.brand img {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
}
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name b {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}
.brand-name span {
  font-size: 0.875rem;
  color: var(--tia-on-ground-muted);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--site-space-5);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-touch);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tia-on-ground-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.nav a[aria-current="page"] {
  color: var(--tia-on-ground);
  text-decoration-color: var(--tia-accent);
}

/* ── Band: the section grid ────────────────────────────────────────────── */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--site-space-4);
  padding-block: var(--site-space-8);
  position: relative;
}
.band + .band { border-block-start: 1px solid var(--site-hairline); }

/* A heading beside its block, in sentence case. Not a tracked caps label:
   that was the old system's grammar and the most saturated AI tell there is. */
.band-label {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--tia-accent-ink);
  align-self: start;
  text-wrap: balance;
}

.band-lede {
  max-inline-size: var(--site-measure);
  color: var(--tia-on-ground-muted);
  text-wrap: pretty;
}
.band-lede strong { font-weight: 620; color: var(--tia-on-ground); }

/* ── The one dark band ─────────────────────────────────────────────────── */
/* One per page, never the world. Full-bleed without breaking out of the
   sheet: the fill extends sideways as a shadow and is clipped to the band's
   own height, so it reads as the ground changing, not as a card. */
.band--ink {
  background: var(--tia-band);
  color: var(--tia-on-band);
  box-shadow: 0 0 0 100vmax var(--tia-band);
  clip-path: inset(0 -100vmax);
  line-height: var(--tia-leading-body);
}
.band + .band--ink,
.band--ink + .band { border-block-start: 0; }
.band--ink .band-label { color: var(--tia-on-band); }
.band--ink .band-lede { color: var(--tia-on-band-muted); }

/* ── Rules ─────────────────────────────────────────────────────────────── */
.rule {
  display: block;
  block-size: 1px;
  border: 0;
  inline-size: 100%;
  background: var(--site-hairline);
}
.rule--block { block-size: 3px; background: var(--tia-accent); }
.rule--row   { block-size: 1px; background: var(--site-hairline); }
/* The dotted close: an entry with no personal attempt behind it, either
   because nothing was run or because it was clone-delivered. The dot is the
   honest tell. A border, because a background cannot be dotted. */
.rule--dotted {
  block-size: 0;
  background: none;
  border-block-start: 2px dotted var(--site-hairline-strong);
}

/* ── Home: the seal and the claim ──────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--site-space-6);
  padding-block: var(--site-space-8) var(--site-space-8);
  align-items: start;
}
.seal {
  inline-size: clamp(8.5rem, 34vw, 12rem);
  block-size: auto;
  aspect-ratio: 1;
}
.hero h1 {
  font-size: clamp(2rem, 1.1rem + 3.5vw, 3.75rem);
  font-weight: 620;
  letter-spacing: -0.026em;
  line-height: 1.06;
  text-wrap: balance;
  max-inline-size: 20ch;
}
/* The turn: the line that answers the heading, and the brand's name said once,
   in the brand's colour. Upright: there is no italic Archivo in the brand, and
   a synthesised one is a fake. */
.hero-turn {
  margin-block-start: var(--site-space-4);
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.75rem);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-wrap: balance;
}
.hero-turn em { font-style: normal; color: var(--tia-accent); font-weight: 650; }

.hero-standfirst {
  margin-block-start: var(--site-space-5);
  max-inline-size: 58ch;
  font-size: 1.125em;
  line-height: 1.55;
  color: var(--tia-on-ground-muted);
  text-wrap: pretty;
}
.hero-standfirst strong { font-weight: 600; color: var(--tia-on-ground); }

.hero-aside {
  margin-block-start: var(--site-space-4);
  max-inline-size: 52ch;
  color: var(--tia-on-ground-muted);
  text-wrap: pretty;
}

/* ── The name and the chop ──────────────────────────────────────────────── */
.wordmark {
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--tia-on-ground);
}
.chop { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }

/* ── The featured piece ────────────────────────────────────────────────── */
.feature { border-block-start: 3px solid var(--tia-accent); padding-block-start: var(--site-space-4); }
.feature-meta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tia-on-ground-muted);
  font-variant-numeric: tabular-nums;
}
.feature-title {
  margin-block-start: var(--site-space-3);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.9rem);
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
  max-inline-size: 22ch;
}
.feature-title a { color: var(--tia-on-ground); text-decoration: none; }
.feature-sub {
  margin-block-start: var(--site-space-3);
  max-inline-size: 48ch;
  font-size: 1.1875em;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tia-accent-ink);
  text-wrap: pretty;
}
.feature-excerpt {
  margin-block-start: var(--site-space-4);
  max-inline-size: var(--site-measure);
  color: var(--tia-on-ground-muted);
  text-wrap: pretty;
}
.feature-go { margin-block-start: var(--site-space-5); }

/* The one way on. The holding page's idiom: a word over a cinnabar rule. */
.go {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-touch);
  padding-block: var(--site-space-1);
  font-size: 1.0625em;
  font-weight: 620;
  color: var(--tia-on-ground);
  text-decoration: none;
  border-block-end: 2px solid var(--tia-accent);
}

/* ── Video ─────────────────────────────────────────────────────────────── */
/* The video at the width of a phone held in the hand, beside its words on a
   wide screen and above them on a narrow one. No frame, no rounding: the
   picture sits on the ground like everything else. */
.clip-pair { display: grid; gap: var(--site-space-5); container-type: inline-size; }
@media (min-width: 700px) {
  .clip-pair { grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); align-items: start; gap: var(--site-space-6); }
  .clip-pair--page { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); }
}
.clip { margin: 0; max-inline-size: 22rem; }
.clip-video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 9 / 16;
  background: var(--tia-band);
  object-fit: cover;
}
.clip-text .feature-title { margin-block-start: var(--site-space-2); }
.clip-disclosure {
  margin-block-start: var(--site-space-3);
  font-size: 0.9375rem;
  color: var(--tia-on-ground-muted);
}
.transcript { margin-block-start: var(--site-space-4); max-inline-size: var(--site-measure); }
.transcript summary {
  display: list-item;
  padding-block: 0.6em;
  font-weight: 620;
  cursor: pointer;
  list-style-position: outside;
}
.transcript p { color: var(--tia-on-ground-muted); }
.transcript p + p { margin-block-start: var(--site-space-1); }
.clip-text .form-note { margin-block-start: var(--site-space-4); }

/* ── The rail ──────────────────────────────────────────────────────────── */
/* Things that went out, side by side, to drag through. Touch scrolling is
   native, so it has the platform's own momentum and edge bounce; rail.js adds
   the same to a mouse drag and to the buttons. Not cards: a picture and two
   lines of type on the ground, no box, no shadow. */
.rail { container-type: inline-size; }
.rail-track {
  display: flex;
  gap: var(--site-space-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--site-space-2);
  touch-action: pan-x pan-y;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .rail-track { cursor: grab; } }
.rail-track.is-dragging { cursor: grabbing; }
/* Snapping is suspended while a hand or a spring is moving the strip, and
   comes back when it rests, so the snap never fights the motion. */
.rail-track.is-dragging,
.rail-track.is-springing { scroll-snap-type: none; }
.rail-track.is-dragging a { pointer-events: none; }

.tile {
  flex: 0 0 clamp(12.5rem, 40cqi, 16.5rem);
  scroll-snap-align: start;
}
.tile a {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2);
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.tile-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tia-ground-deep);
}
.tile--issue .tile-media { aspect-ratio: 4 / 5; }
.tile-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tile-blank {
  display: flex;
  align-items: flex-end;
  block-size: 100%;
  padding: var(--site-space-4);
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--tia-accent-ink);
}
.tile-meta { font-size: 0.8125rem; color: var(--tia-on-ground-muted); }
.tile-title {
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: pretty;
}
.rail-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--site-space-2);
  margin-block-start: var(--site-space-3);
}
.rail-btn {
  inline-size: var(--site-touch);
  block-size: var(--site-touch);
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--tia-on-ground);
  border-radius: 0;
  background: none;
  color: var(--tia-on-ground);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
  touch-action: manipulation;
}
.rail-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Where it runs ─────────────────────────────────────────────────────── */
.channels { list-style: none; border-block-start: 3px solid var(--tia-on-ground); container-type: inline-size; }
.channels a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--site-space-4);
  align-items: baseline;
  min-block-size: var(--site-touch);
  padding-block: var(--site-space-3);
  border-block-end: 1px solid var(--site-hairline);
  color: var(--tia-on-ground);
  text-decoration: none;
}
.channel-name { font-weight: 650; letter-spacing: -0.01em; }
.channel-role { display: none; color: var(--tia-on-ground-muted); }
.channel-handle { color: var(--tia-on-ground-muted); font-size: 0.9375rem; text-align: end; }
@container (min-width: 34em) {
  .channels a { grid-template-columns: 9rem minmax(0, 1fr) auto; }
  .channel-role { display: block; }
}

/* ── Sources ───────────────────────────────────────────────────────────── */
.sources { list-style: none; counter-reset: src; }
.sources li {
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr);
  gap: 0 var(--site-space-2);
  padding-block: var(--site-space-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.sources li + li { border-block-start: 1px solid var(--site-hairline); }
.sources li::before {
  counter-increment: src;
  content: counter(src, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--tia-on-ground-muted);
  font-variant-numeric: tabular-nums;
}
/* Everything that is not the number shares column two, or a source with a
   link and a note wraps its note back under the number. */
.sources li > * { grid-column: 2; }
.sources .src-meta { color: var(--tia-on-ground-muted); }

/* ── Archive ───────────────────────────────────────────────────────────── */
.archive {
  list-style: none;
  border-block-start: 3px solid var(--tia-on-ground);
  container-type: inline-size;
}

/* The whole row is one target: the claim's link is stretched over it, so a
   thumb anywhere on the row lands, and the row answers on press. */
.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--site-space-1) var(--site-space-5);
  padding-block: var(--site-space-4);
  border-block-end: 1px solid var(--site-hairline);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--site-space-3);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tia-on-ground-muted);
  font-variant-numeric: tabular-nums;
}
.entry-meta span:first-child { color: var(--tia-accent-ink); font-weight: 650; }
/* Where the entry ran. Provenance belongs in the record, not in a nav. */
.entry-ran { color: var(--tia-on-ground); }

.entry-claim {
  font-size: 1.125em;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: pretty;
}
.entry-claim a {
  color: inherit;
  text-decoration: none;
}
.entry-claim a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.entry-verdict {
  font-size: 0.9375em;
  color: var(--tia-on-ground-muted);
  text-wrap: pretty;
}
.verdict--no { color: var(--tia-accent-ink); font-weight: 600; }

/* ── Refusals ──────────────────────────────────────────────────────────── */
/* Defaults to the light ground; the band variant is scoped under .band--ink.
   A component must not assume the ground it is standing on. */
.refusals { list-style: none; max-inline-size: 66ch; }
.refusals li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--site-space-3);
  align-items: baseline;
  padding-block: var(--site-space-4);
  border-block-end: 1px solid var(--site-hairline);
}
.refusals li:last-child { border-block-end: 0; }
/* A fleck of cut seal as the list mark. On the band it is gold leaf: the one
   place the brand allows it, and small enough to stay an event. */
.refusals .fleck {
  display: block;
  inline-size: 0.5em;
  block-size: 0.5em;
  background: var(--tia-accent);
  transform: translateY(-0.08em);
}
.refusals strong { font-weight: 650; color: var(--tia-on-ground); }
.refusals li > span:last-child { color: var(--tia-on-ground-muted); }

.band--ink .refusals li { border-block-end-color: var(--site-hairline-band); }
.band--ink .refusals .fleck { background: var(--tia-gold); }
.band--ink .refusals strong { color: var(--tia-on-band); }
.band--ink .refusals li > span:last-child { color: var(--tia-on-band-muted); }

/* ── Prose ─────────────────────────────────────────────────────────────── */
.prose > * + * { margin-block-start: var(--site-space-3); }
.prose p { max-inline-size: var(--site-measure); text-wrap: pretty; }
.prose h3 {
  margin-block: var(--site-space-6) var(--site-space-2);
  font-size: 1.0625em;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.form-note { font-size: 0.875rem; line-height: 1.55; color: var(--tia-on-ground-muted); }
.more { margin-block-start: var(--site-space-5); }
.subjects { margin-block-start: var(--site-space-3); }
.archive-gap { margin-block-start: var(--site-space-5); }
.person {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
/* Ink words over a cinnabar underline: the accent marks the option, the word
   stays readable at full contrast. */
.prose a,
.band-lede a,
.sources a,
.form-note a,
.field-help a,
.gone a {
  color: var(--tia-on-ground);
  text-decoration: underline;
  text-decoration-color: var(--tia-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.band--ink .prose a,
.band--ink .form-note a,
.band--ink .field-help a,
.band--ink .sources a {
  color: var(--tia-on-band);
  text-decoration-color: var(--tia-on-band-muted);
}
.band--ink .sources .src-meta,
.band--ink .sources li::before,
.band--ink .form-note { color: var(--tia-on-band-muted); }
.band--ink .sources li + li { border-block-start-color: var(--site-hairline-band); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* One button, and it is the seal's colour: the one colour the brand lets fill
   a surface. 44px minimum, bought with padding, never with type size. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-2);
  min-block-size: var(--site-touch);
  padding: 0 var(--site-space-5);
  border: 0;
  border-radius: 0;
  background: var(--tia-accent);
  color: var(--tia-ground);
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled:not([aria-busy="true"]) { cursor: not-allowed; }

/* ── Fields ────────────────────────────────────────────────────────────── */
/* A field is a line you write on: the rule under the input says "input"
   without a box. */
.field { display: block; }
.field > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.5;
  color: var(--tia-on-ground);
  margin-block-end: var(--site-space-1);
}
.field input {
  inline-size: 100%;
  min-block-size: var(--site-touch);
  padding: var(--site-space-2) 0;
  border: 0;
  border-block-end: 2px solid var(--tia-on-ground);
  border-radius: 0;
  background: none;
  color: var(--tia-on-ground);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: var(--tia-on-ground-muted); opacity: 1; }
/* The rule under the field turns cinnabar while you are in it. The outline
   still draws for the keyboard. */
.field input:focus { border-block-end-color: var(--tia-accent); }
.field input:focus-visible { outline-offset: 4px; }

.field-help {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tia-on-ground-muted);
  max-inline-size: var(--site-measure);
}

/* Status sits where the eye already is: under the field, in the reading
   colour for success, the accent for a problem. Never a toast, never a modal. */
.form-status {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 500;
  min-block-size: 0;
}
.form-status:empty { display: none; }
.form-status[data-tone="error"] { color: var(--tia-accent-ink); }
.field[data-invalid] input { border-block-end-color: var(--tia-accent-ink); }

/* ── Follow ────────────────────────────────────────────────────────────── */
/* The parent is the container: container-type makes a container for its
   descendants, never for itself. */
.follow .prose { container-type: inline-size; }
.follow-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "field" "action" "status" "help";
  gap: var(--site-space-3);
  margin-block-start: var(--site-space-4);
  max-inline-size: 40rem;
}
.follow-form .field { grid-area: field; }
.follow-form .btn { grid-area: action; inline-size: 100%; }
.follow-form .form-status { grid-area: status; }
.follow-form .field-help { grid-area: help; }
@container (min-width: 30em) {
  .follow-form {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "field action" "status status" "help help";
    gap: var(--site-space-3) var(--site-space-4);
    align-items: end;
  }
  .follow-form .btn { inline-size: auto; }
}
.follow-form[data-state="done"] .field,
.follow-form[data-state="done"] .btn { display: none; }
.follow-form[data-state="done"] .form-status { font-size: 1.0625rem; }
.feeds { margin-block-start: var(--site-space-5); }

/* The follow block on the dark band. */
.band--ink .field > label { color: var(--tia-on-band); }
.band--ink .field input {
  color: var(--tia-on-band);
  border-block-end-color: var(--tia-on-band);
}
.band--ink .field input::placeholder { color: var(--tia-on-band-muted); }
.band--ink .field input:focus { border-block-end-color: var(--tia-gold); }
.band--ink .field-help { color: var(--tia-on-band-muted); }
.band--ink .form-status { color: var(--tia-on-band); }
.band--ink .form-status[data-tone="error"] { color: var(--tia-gold); }
.band--ink .field[data-invalid] input { border-block-end-color: var(--tia-gold); }
.band--ink .btn { color: var(--tia-on-band); }
.band--ink :where(a, button, input):focus-visible { outline-color: var(--tia-on-band); }

/* ── Plate: the image slot ─────────────────────────────────────────────── */
/* An empty slot reads as deliberately empty: the brand's second light step
   with its caption in it, never a broken image and never a stock photo. */
.plate { margin: 0; }
.plate-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background: var(--tia-ground-deep);
  padding: var(--site-space-4);
  text-align: center;
  font-size: 0.875rem;
  color: var(--tia-on-ground-muted);
}
.plate figcaption {
  margin-block-start: var(--site-space-2);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tia-on-ground-muted);
}
.plate figcaption b { font-weight: 600; color: var(--tia-on-ground); }

.band--who { container-type: inline-size; }
.pair-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-space-5); }
.pair-who .plate { max-inline-size: 18rem; }
@container (min-width: 40em) {
  .pair-who { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: var(--site-space-7); }
}

/* ── Quote ─────────────────────────────────────────────────────────────── */
.quote {
  margin-block: var(--site-space-5);
  padding-block: var(--site-space-4);
  border-block: 1px solid var(--site-hairline);
}
.prose .quote p {
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--tia-accent-ink);
}

/* ── Code ──────────────────────────────────────────────────────────────── */
/* Monospace is a function, not a second typeface: code that does not align
   cannot be checked. System stack only, so it costs no request. */
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.9em;
}
.code {
  padding: var(--site-space-3) var(--site-space-4);
  background: var(--tia-ground-deep);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
  hyphens: none;
}
.code code { font-size: inherit; }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.gone h1 {
  font-size: clamp(2.1rem, 1.15rem + 3.9vw, 4.1rem);
  font-weight: 620;
  letter-spacing: -0.026em;
  line-height: 1.04;
  text-wrap: balance;
  max-inline-size: 16ch;
}
.gone p { max-inline-size: 52ch; color: var(--tia-on-ground-muted); }
.prose.gone > * + * { margin-block-start: var(--site-space-5); }

/* ── Sign-off ──────────────────────────────────────────────────────────── */
/* Every page ends on the name and the chop. Never a CTA, never an instruction. */
.signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4);
  padding-block: var(--site-space-5) var(--site-space-7);
  border-block-start: 3px solid var(--tia-on-ground);
}
.band--ink + .signoff,
main:has(> .band--ink:last-child) + .signoff { border-block-start: 0; margin-block-start: 0; }
.signoff .chop { inline-size: 2.25rem; block-size: 2.25rem; }
.signoff { flex-wrap: wrap; }
/* His other work, one quiet line above the name. Links in the reading colour
   with a hairline, so the sign-off stays the last word. */
.elsewhere + .elsewhere { margin-block-start: calc(-1 * var(--site-space-3)); }
.elsewhere {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--tia-on-ground-muted);
}
.elsewhere a {
  color: var(--tia-on-ground-muted);
  text-decoration: underline;
  text-decoration-color: var(--site-hairline-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ── The consent question ──────────────────────────────────────────────── */
/* Asked once, small, and out of the way: it never covers the reading column
   on a wide screen, never dims the page, never blocks a tap. No and Yes are
   the same size and the same weight, because declining must be as easy as
   agreeing. It rises from the bottom edge and leaves the way it came. */
.consent {
  position: fixed;
  inset-inline: var(--site-space-3);
  inset-block-end: calc(var(--site-space-3) + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  gap: var(--site-space-3);
  max-inline-size: 25rem;
  padding: var(--site-space-4);
  background: var(--tia-band);
  color: var(--tia-on-band);
  font-size: 0.9375rem;
  line-height: 1.5;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
}
.consent.is-in { transform: none; opacity: 1; }
.consent[hidden] { display: none; }
.consent a { color: var(--tia-on-band); text-decoration: underline; text-decoration-color: var(--tia-on-band-muted); text-underline-offset: 0.2em; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-space-2); }
.consent-btn {
  min-block-size: var(--site-touch);
  border: 1.5px solid var(--tia-on-band);
  border-radius: 0;
  background: none;
  color: var(--tia-on-band);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.consent :where(a, button):focus-visible { outline-color: var(--tia-on-band); }
@media (min-width: 640px) { .consent { inset-inline-end: auto; } }

/* ── Desktop: the two-column grid ──────────────────────────────────────── */
@media (min-width: 900px) {
  .band {
    grid-template-columns: var(--site-label-col) minmax(0, 1fr);
    gap: var(--site-label-gap);
  }
  .band--open { padding-block: var(--site-space-9); }
  .band--tight { padding-block-start: var(--site-space-6); }
  .band--ink { padding-block: var(--site-space-9); }

  /* The seal takes the right-hand side at full strength, the way a chop sits
     at the corner of a scroll. The words keep the page's content column, so
     they line up with every entry below them. */
  .hero {
    grid-template-columns: var(--site-label-col) minmax(0, 1fr) clamp(15rem, 24vw, 21rem);
    gap: var(--site-label-gap);
    padding-block: var(--site-space-9);
  }
  .hero > div { grid-column: 2; grid-row: 1; }
  .seal { grid-column: 3; grid-row: 1; inline-size: 100%; }

  .entry { align-items: start; }
  @container (min-width: 54em) {
    .entry { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(16em, 1.1fr); }
    .entry-meta { flex-direction: column; gap: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Behaviour
   ═══════════════════════════════════════════════════════════════════════ */

/* Response lives on the press, and it is instant. Hover is a preview and may
   ease in; a press never waits. Only transform, opacity and colour change, so
   nothing re-lays-out under the reader's finger. */
@media (hover: hover) {
  .nav a:hover { color: var(--tia-on-ground); text-decoration-color: var(--site-hairline-strong); }
  .nav a[aria-current="page"]:hover { text-decoration-color: var(--tia-accent); }
  .prose a:hover, .sources a:hover, .form-note a:hover,
  .field-help a:hover, .gone a:hover {
    color: var(--tia-accent-ink);
    text-decoration-color: var(--tia-accent-ink);
    text-decoration-thickness: 2px;
  }
  .band--ink .prose a:hover, .band--ink .form-note a:hover,
  .band--ink .field-help a:hover, .band--ink .sources a:hover {
    color: var(--tia-on-band);
    text-decoration-color: var(--tia-on-band);
  }
  .entry:hover .entry-claim a { color: var(--tia-accent-ink); }
  .elsewhere a:hover { color: var(--tia-accent-ink); text-decoration-color: var(--tia-accent-ink); }
  .band-lede a:hover { color: var(--tia-accent-ink); text-decoration-color: var(--tia-accent-ink); }
  .feature-title a:hover { color: var(--tia-accent-ink); }
  .go:hover { color: var(--tia-accent-ink); border-block-end-color: var(--tia-on-ground); }
  .channels a:hover .channel-name { color: var(--tia-accent-ink); }
  .tile a:hover .tile-title { color: var(--tia-accent-ink); }
  .rail-btn:not(:disabled):hover { background: var(--tia-ground-deep); }
  .consent-btn:hover { background: var(--tia-on-band); color: var(--tia-band); }
  .btn:hover { background: var(--tia-accent-ink); }
  .band--ink .btn:hover { background: var(--tia-accent-ink); }
}

.entry:active { background: var(--tia-ground-deep); }
.channels a:active { background: var(--tia-ground-deep); }
.go:active { color: var(--tia-accent-ink); }
.tile a:active .tile-media { transform: scale(0.97); }
.rail-btn:not(:disabled):active { transform: scale(0.94); background: var(--tia-ground-deep); }
.consent-btn:active { transform: scale(0.97); background: var(--tia-on-band); color: var(--tia-band); }
.entry:active .entry-claim a { color: var(--tia-accent-ink); }
.btn:active:not(:disabled) { transform: scale(0.97); background: var(--tia-accent-ink); }
.brand:active img { transform: scale(0.94); }
.nav a:active { color: var(--tia-accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .nav a, .prose a, .sources a, .form-note a, .field-help a, .gone a,
  .entry-claim a, .entry {
    transition:
      color var(--site-settle) var(--site-ease),
      text-decoration-color var(--site-settle) var(--site-ease),
      background-color var(--site-settle) var(--site-ease);
  }
  .field input { transition: border-color var(--site-settle) var(--site-ease); }
  .feature-title a, .go, .channels a, .channel-name, .tile-title {
    transition: color var(--site-settle) var(--site-ease), border-color var(--site-settle) var(--site-ease), background-color var(--site-settle) var(--site-ease);
  }
  .tile-media, .rail-btn { transition: transform var(--site-respond) ease-out, background-color var(--site-settle) var(--site-ease); }
  .btn, .brand img {
    transition:
      transform var(--site-respond) ease-out,
      background-color var(--site-settle) var(--site-ease);
  }
  /* The press lands immediately: no easing on the way down. */
  .entry:active, .btn:active, .brand:active img, .entry:active .entry-claim a,
  .channels a:active, .tile a:active .tile-media, .rail-btn:active { transition-duration: 0s; }

  .consent {
    transition: transform 360ms var(--site-ease), opacity 240ms var(--site-ease);
  }
  .consent-btn { transition: transform var(--site-respond) ease-out, background-color var(--site-settle) var(--site-ease), color var(--site-settle) var(--site-ease); }
  .consent-btn:active { transition-duration: 0s; }

  /* The seal presses, once per visit, on the home page. The default state is
     the finished one, so a page where this never runs is still correct. */
  html.seal-press .seal {
    animation: seal-press var(--tia-seal-press) var(--tia-seal-press-easing) both;
  }
  @keyframes seal-press {
    from { transform: scale(1.07) rotate(-1.1deg); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: none; opacity: 1; }
  }

  /* Page to page, the masthead holds still and only the page changes, so the
     reader always knows where the chrome is. A short cross-fade, never a slide:
     nothing here has a spatial direction to slide along. */
  @view-transition { navigation: auto; }
  .masthead { view-transition-name: masthead; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--site-settle);
    animation-timing-function: var(--site-ease);
  }
}

/* Reduced motion keeps the feedback and loses the movement: the press still
   darkens, nothing scales, nothing fades in. */
@media (prefers-reduced-motion: reduce) {
  .consent { transform: none; transition: opacity 200ms ease; }
  .consent-btn:active { transform: none; }
  .btn:active:not(:disabled), .brand:active img,
  .tile a:active .tile-media, .rail-btn:active { transform: none; }
  html.seal-press .seal { animation: none; }
}

/* More contrast asked for: hairlines become rules. */
@media (prefers-contrast: more) {
  :root {
    --site-hairline: var(--tia-on-ground);
    --site-hairline-strong: var(--tia-on-ground);
    --site-hairline-band: var(--tia-on-band);
  }
  .band-lede, .hero-standfirst, .hero-aside, .entry-verdict,
  .field-help, .form-note, .sources .src-meta { color: var(--tia-on-ground); }
}

/* Windows high contrast: let the system colours through, keep the structure. */
@media (forced-colors: active) {
  .rule--block, .rule--row { background: CanvasText; }
  .refusals .fleck { background: CanvasText; }
  .btn { border: 2px solid ButtonText; }
}

/* ── Touch ─────────────────────────────────────────────────────────────── */
/* Inline links in a sentence are deliberately not inflated: WCAG's target
   size criterion exempts them, and a 44px inline link breaks the leading. */
@media (pointer: coarse) {
  .sources a, .form-note a { padding-block: 0.5em; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  html, body { background: none; }
  .skip, .nav, .follow, .consent { display: none !important; }
  .band--ink {
    background: none;
    color: var(--tia-on-ground);
    box-shadow: none;
    clip-path: none;
  }
  .band--ink .band-label,
  .band--ink .refusals strong,
  .band--ink .refusals li > span:last-child { color: var(--tia-on-ground); }
  .band--ink .refusals .fleck { background: var(--tia-accent); }
  .band--ink .refusals li { border-block-end-color: var(--site-hairline); }
  .entry-claim a::after { display: none; }
}