/* Artificial Limits — foundation
   Register: serious nonfiction / policy. Typographic, restrained, not tech-startup.
   Every token pair below is contrast-checked against its ground. */

:root {
  /* Ground + ink — warm paper, not pure white */
  --paper:        #fbfaf7;
  --paper-raised: #fbfaf7;
  --paper-sunk:   #f1eee7;
  --rule:         #d8d2c4;
  --rule-strong:  #8e897c;  /* 3.04:1 min on sunk — WCAG 1.4.11 control boundary */

  --ink:          #16140f;  /* 16.4:1 on paper */
  --ink-muted:    #514b3e;  /* 8.1:1  on paper */
  --ink-faint:    #736c5b;  /* 4.92 paper / 5.22 raised / 4.54 sunk */

  /* Accent — ember. Heat, power draw, the thing the book is about. */
  --ember:        #8a2d08;  /* 6.6:1 on paper — safe for body-size text */
  --on-ember:     #ffffff;  /* 6.80:1 on light ember */
  --ember-bright: #a8380c;  /* large text / fills only */
  --ember-wash:   #f1eee7;

  /* Semantic */
  --warn:    #8a5a00;
  --danger:  #9b1c1c;

  /* Type */
  --face-display: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --face-text:    "Spectral", "Iowan Old Style", Georgia, serif;
  --face-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — 1.25 minor third, clamped for fluid sizing */
  --t-xs:   0.75rem;    /* mono reads wider than sans — one step down */
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.18rem, 1.05rem + 0.5vw, 1.35rem);
  --t-lg:   clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
  --t-xl:   clamp(1.85rem, 1.15rem + 3.1vw, 2.85rem);
  --t-2xl:  clamp(2.6rem, 1.2rem + 6.2vw, 4.9rem);  /* 78px : 17px = 4.6 */

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4.5rem;
  --s-9: 7rem;

  --measure: 34rem;      /* reading column */
  --measure-wide: 46rem;
  --shell: 72rem;

  --radius: 0;           /* Asterisk + TCI both ship ZERO radius. Measured. */
  --radius-lg: 0;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper:        #14130f;
    --paper-raised: #1c1a15;
    --paper-sunk:   #0e0d0a;
    --rule:         #33302a;
    --rule-strong:  #6b665a;  /* 3.04:1 min — 1.4.11 */

    --ink:          #f2eee5;
    --ink-muted:    #b8b1a3;
    --ink-faint:    #8c8578;

    --ember:        #e8834a;
    --on-ember:     #14130f;  /* 6.88:1 on dark ember; white would be 2.70:1 */
    --ember-bright: #f59a5f;
    --ember-wash:   #241a12;
    --warn:   #d9a441;
    --danger: #e08585;

    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
  }
}

:root[data-theme="dark"] {
  --paper:        #14130f;
  --paper-raised: #1c1a15;
  --paper-sunk:   #0e0d0a;
  --rule:         #33302a;
  --rule-strong:  #6b665a;  /* 3.04:1 min — 1.4.11 */

  --ink:          #f2eee5;
  --ink-muted:    #b8b1a3;
  --ink-faint:    #8c8578;

  --ember:        #e8834a;
  --on-ember:     #14130f;  /* 6.88:1 on dark ember; white would be 2.70:1 */
  --ember-bright: #f59a5f;
  --ember-wash:   #241a12;
  --warn:   #d9a441;
  --danger: #e08585;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Without this the UA placeholder colour is not theme-aware and
     renders #757575 on the dark input ground — 3.77:1. */
  color-scheme: light dark;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: -0.028em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ember-bright); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 30rem) { .shell { padding-inline: var(--s-4); } }

.prose { max-width: var(--measure); }

/* --measure-wide governs the block (so headings and ledes can run wider), but
   running prose inside it is capped to the reading measure. Uncapped, body
   paragraphs here were measuring 97–109 characters per line against a 75
   ceiling — --measure was defined correctly and then barely used. */
.prose-wide { max-width: var(--measure-wide); }
/* Descendant, not direct-child: .proposal and .stack wrap paragraphs one level
   down. .fine is included deliberately — small print ran to 122 CPL, which is
   worse to read than body text, not better. .pullquote sets its own balance. */
.prose-wide p:not(.pullquote):not(.fine) { max-width: var(--measure); }
/* A <p class="fine prose-wide"> carries both classes on ONE element, so the
   descendant rule above cannot reach it. Cap the element itself — and narrower
   than --measure, because --measure is calibrated for 17px body: the same 544px
   column fits ~90 characters at this 13px size. 28rem lands at ~74. */
.fine { max-width: 28rem; }

.section { padding-block: var(--s-8); }
.section--sunk { background: var(--paper-sunk); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---------- typographic utilities ---------- */

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-muted);
}
.fine {
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-faint);
}
.ui { font-family: var(--face-mono); }

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--face-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--ember); color: var(--on-ember); }

.btn--ember {
  background: var(--ember);
  color: var(--on-ember);
}
.btn--ember:hover { background: var(--ember-bright); color: var(--on-ember); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-raised); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- site chrome ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.25rem;
}
.wordmark {
  font-family: var(--face-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark em {
  font-style: normal;
  color: var(--ember);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;           /* never horizontally scroll core nav */
}
.nav a {
  font-family: var(--face-mono);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }

@media (max-width: 46rem) {
  .masthead__inner { flex-wrap: wrap; padding-block: var(--s-3); min-height: 0; }
  .nav { width: 100%; gap: var(--s-4); }
}

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6);
  margin-top: var(--s-8);
  color: var(--ink-faint);
}
.colophon a { color: var(--ink-muted); }

/* --- The apparatus layer -------------------------------------------------
   Mono, small, tracked. Carries numerals, labels, status and metadata — never
   prose. Five of twenty measured sites run a dedicated mono for exactly this. */
.apparatus {
  font-family: var(--face-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-3);
}