/* The grammar both sites share (docs/2026-10-19-website-spec.md §4): the
   sizes, the type scale and the motion as tokens, then the reading column and
   the components — masthead, footer, section, prose, ledger, truths,
   conversation, button, link. A site's sheet fills the colour keys and the
   display face this file reads (amendion.css, remember.css) and adds its one
   device; it never restyles a component.

   Values live in the token blocks alone: `:root` here, html[data-site=…] in a
   site's sheet. Everywhere else a declaration names a token, a keyword, 0 or
   a plain number — never a colour, a length, a duration or an angle
   (test/stylesheets.test.js holds every sheet to that). */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Space: Round 9's steps (2 … 48 pt) in rem, then the page's own larger
     ones, which grow with the viewport. */
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-8: 1.5rem;
  --space-10: 2rem;
  --space-11: 2.5rem;
  --space-12: 3rem;
  --space-top: clamp(1.5rem, 0.75rem + 3vw, 3.5rem);
  --space-masthead: clamp(3.5rem, 2rem + 6.5vw, 8rem);
  --space-section: clamp(5rem, 3.5rem + 5.5vw, 8.5rem);
  --space-bottom: clamp(3rem, 2rem + 4vw, 6rem);

  /* The frame and the reading column: a 16px gutter on a phone, a frame
     centred on a wide screen, and inside it one left-aligned column. */
  --gutter: clamp(1rem, 4vw, 3rem);
  --frame: 60rem;
  --measure: 68ch;

  /* Type: Round 9's scale — display 36, hero 30, title 22, body 16, meta
     13 pt — in rem, each growing to its desktop size between a 390px phone
     and a 1280px screen. Line heights keep Round 9's ratios; the body's is
     opened a little for a column wider than a phone's. */
  --type-display: clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem);
  --type-hero: clamp(1.75rem, 1.2rem + 2.3vw, 3.25rem);
  --type-title: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
  --type-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --type-meta: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --leading-display: 1.06;
  --leading-hero: 1.16;
  --leading-title: 1.34;
  --leading-body: 1.55;
  --leading-meta: 1.45;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-meta: 0.06em;
  --family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Lines, rings and corners. */
  --hairline: 1px;
  --focus-width: 0.125rem;
  --focus-offset: 0.1875rem;
  --underline-offset: 0.2em;
  --radius-small: 0.375rem;
  --radius-full: 999rem;
  --code-size: 0.9em;

  /* Components' own measures. */
  --button-height: 3.5rem;
  --numeral-width: 1.5em;
  --ledger-gap: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --button-lift: 0 0.5rem 1.5rem var(--glow);

  /* Motion: one entrance — a fade up, staggered by section — and the easing
     curves of Round 9. Each site has at most one loop of its own. */
  --motion-enter: 250ms;
  --motion-stagger: 70ms;
  --motion-hover: 150ms;
  --enter-rise: 0.5rem;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Round 9's gradients, over the colour keys a site's sheet fills: the
     accent at 135°, and the canvas's glow at the top left of the first
     screen. */
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-end));
  --canvas-glow-image: radial-gradient(70% 45% at 12% 0%, var(--canvas-glow), transparent);
  --canvas-glow-size: 100% 100svh;
}

/* ── The page ───────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  background-color: var(--canvas);
  background-image: var(--canvas-glow-image);
  background-size: var(--canvas-glow-size);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--family-body);
  line-height: var(--leading-body);
}

body {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--type-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--selection);
}

h1,
h2,
p,
figure,
ol {
  margin: 0;
}

h1,
h2 {
  font-family: var(--display-family);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* ── Link and focus ─────────────────────────────────────────────────────── */

a {
  color: var(--accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--hairline);
  text-decoration-color: var(--accent);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--motion-hover) var(--ease-out);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: var(--focus-width) solid var(--accent-ink);
  outline-offset: var(--focus-offset);
}

a:not(.button):focus-visible {
  border-radius: var(--radius-small);
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-top);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--display-family);
  font-size: var(--size-wordmark);
  font-weight: var(--weight-wordmark);
  letter-spacing: var(--tracking-wordmark);
  line-height: var(--leading-title);
  color: var(--ink);
  text-decoration: none;
}

.endorsement {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
  text-decoration-color: var(--border-strong);
}

/* ── Sections and prose ─────────────────────────────────────────────────── */

.content {
  padding-top: var(--space-masthead);
}

.content > * {
  max-width: var(--measure);
}

.content > * + * {
  margin-top: var(--space-section);
}

.display {
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
}

.display-line {
  display: block;
}

.statement {
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
}

.lede {
  margin-top: var(--space-6);
  font-size: var(--type-title);
  line-height: var(--leading-title);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.prose {
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: var(--space-6);
}

/* The term a sentence defines, in the display face; its line height is the
   sentence's, so the larger word does not open the first line. */
dfn {
  font-family: var(--display-family);
  font-size: var(--type-title);
  line-height: 1;
  font-style: normal;
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

code {
  padding: 0 var(--space-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-small);
  background-color: var(--surface);
  font-family: var(--family-mono);
  font-size: var(--code-size);
  color: var(--ink);
  white-space: nowrap;
}

.note {
  margin-top: var(--space-5);
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
}

/* ── Ledger: dated entries, newest first, and the line under them ──────── */

.ledger {
  padding: 0;
  list-style: none;
}

.ledger-entry {
  padding-top: var(--ledger-gap);
}

.ledger-date {
  display: block;
  font-size: var(--type-meta);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.ledger-text {
  margin-top: var(--space-2);
  font-size: var(--type-title);
  line-height: var(--leading-title);
  text-wrap: pretty;
}

.ledger-coda {
  font-family: var(--display-family);
  font-size: var(--type-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  color: var(--ink-muted);
}

/* ── Truths: a numbered list in prose ───────────────────────────────────── */

.truths {
  display: grid;
  gap: var(--space-11);
  padding: 0;
  list-style: none;
  counter-reset: truth;
}

.truth {
  display: grid;
  grid-template-columns: var(--numeral-width) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-4);
  counter-increment: truth;
  font-size: var(--type-title);
  line-height: var(--leading-title);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.truth::before {
  content: counter(truth);
  font-family: var(--display-family);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.truth-lead {
  font-weight: var(--weight-heading);
  color: var(--ink);
}

/* ── Conversation: lines set like a transcript ──────────────────────────── */

.transcript {
  display: grid;
  gap: var(--space-10);
  padding: 0;
  list-style: none;
}

.utterance-said {
  width: fit-content;
  font-family: var(--display-family);
  font-size: var(--type-hero);
  font-weight: var(--weight-heading);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.utterance-speaker {
  margin-top: var(--space-3);
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
}

.utterance-answer .utterance-said {
  color: var(--accent-ink);
}

.conversation-caption {
  margin-top: var(--space-12);
  font-size: var(--type-title);
  line-height: var(--leading-title);
}

/* ── Button ─────────────────────────────────────────────────────────────── */

.action {
  margin-top: var(--space-10);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--space-10);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-full);
  background-image: var(--accent-gradient);
  color: var(--on-accent);
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-meta);
  text-decoration: none;
  transition: box-shadow var(--motion-hover) var(--ease-out);
}

.button:hover {
  box-shadow: var(--button-lift);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  margin-top: var(--space-section);
  padding-bottom: var(--space-bottom);
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
}

.footer > * {
  max-width: var(--measure);
}

.footer > * + * {
  margin-top: var(--space-3);
}

.footer-note {
  margin-bottom: var(--space-5);
  font-size: var(--type-body);
}

.footer a {
  color: inherit;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

.legal-line > span {
  display: inline-block;
}

/* The separator rides at the end of its part, a no-break space before it, so
   a wrapped line ends with it and never starts with it. */
.legal-line > span:not(:last-child)::after {
  content: "\00a0·";
  content: "\00a0·" / "";
}

/* ── Not found ──────────────────────────────────────────────────────────── */

.not-found .lede + p {
  margin-top: var(--space-10);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(var(--enter-rise));
  }
}

@keyframes enter-fade {
  from {
    opacity: 0;
  }
}

.masthead,
.content > *,
.footer {
  animation: enter var(--motion-enter) var(--ease-out) both;
  animation-delay: calc(var(--motion-stagger) * var(--enter-step, 0));
}

.content > :nth-child(1) {
  --enter-step: 1;
}

.content > :nth-child(2) {
  --enter-step: 2;
}

.content > :nth-child(3) {
  --enter-step: 3;
}

.content > :nth-child(4) {
  --enter-step: 4;
}

.content > :nth-child(5) {
  --enter-step: 5;
}

.content > :nth-child(n + 6) {
  --enter-step: 6;
}

.footer {
  --enter-step: 7;
}

@media (prefers-reduced-motion: reduce) {
  .masthead,
  .content > *,
  .footer {
    animation-name: enter-fade;
  }
}

@media print {
  .masthead,
  .content > *,
  .footer {
    animation: none;
  }
}