:root {
    --paper: #EFF1EE;
    --paper-2: #E4E8E3;
    --ink: #15201A;
    --ink-2: #3D4A44;
    --ink-3: #6B7772;
    --rule: #C5CBC5;
    --red: #8B2B2C;
    --red-soft: #F0E3E2;
    --verdigris: #3F6F60;
    --verdigris-soft: #DDE8E3;
    --receipt: #E7EBE6;
    --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0F1613;
      --paper-2: #16201B;
      --ink: #E6E9E4;
      --ink-2: #A9B3AC;
      --ink-3: #7F8A84;
      --rule: #2B3630;
      --red: #D9706F;
      --red-soft: #2A1A1A;
      --verdigris: #7FB8A4;
      --verdigris-soft: #17302A;
      --receipt: #131C17;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0F1613;
    --paper-2: #16201B;
    --ink: #E6E9E4;
    --ink-2: #A9B3AC;
    --ink-3: #7F8A84;
    --rule: #2B3630;
    --red: #D9706F;
    --red-soft: #2A1A1A;
    --verdigris: #7FB8A4;
    --verdigris-soft: #17302A;
    --receipt: #131C17;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    font-variant-numeric: oldstyle-nums;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--ink); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
  p { margin: 0; }
  strong { font-weight: 600; }
  ::selection { background: var(--verdigris-soft); }

  .page { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }

  /* Masthead */
  .masthead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 0 32px;
    border-bottom: 1px solid var(--ink);
  }
  @media (min-width: 820px) {
    .masthead { grid-template-columns: 260px 1fr; align-items: end; gap: 44px; }
  }
  .masthead canvas { width: 240px; height: 240px; display: block; }
  .masthead-text { display: flex; flex-direction: column; gap: 14px; }
  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .wordmark {
    font-family: var(--display);
    font-size: clamp(64px, 10vw, 128px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 0.9;
    font-variation-settings: "opsz" 72;
  }
  .issue-line { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
  .tagline { font-family: var(--display); font-size: 22px; font-style: italic; color: var(--ink-2); max-width: 40ch; text-wrap: balance; }

  /* Sections */
  section { padding: 56px 0 0; }
  .section-head { display: grid; gap: 10px; margin-bottom: 26px; }
  .section-head h2 { font-size: clamp(32px, 4.2vw, 46px); font-variation-settings: "opsz" 48; }
  .byline { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
  .prose { display: grid; gap: 22px; }
  .prose p { max-width: 66ch; }
  .lede { font-size: 21px; line-height: 1.5; }
  .drop::first-letter {
    font-family: var(--display);
    font-size: 4.2em;
    float: left;
    line-height: 0.78;
    padding: 6px 10px 0 0;
    color: var(--ink);
  }

  /* The circle / spiral thesis figure */
  figure { margin: 0; }
  .thesis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 0;
    margin: 10px 0 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  @media (min-width: 720px) { .thesis { grid-template-columns: 1fr 1fr; gap: 40px; } }
  .thesis-item { display: grid; gap: 12px; justify-items: start; }
  .thesis-item canvas { width: 200px; height: 200px; display: block; }
  .thesis-item figcaption { font-family: var(--display); font-size: 20px; font-style: italic; color: var(--ink-2); }
  .thesis-item .sub { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

  /* Four exercises */
  .four {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--ink);
  }
  @media (min-width: 760px) { .four { grid-template-columns: 1fr 1fr; } }
  .exercise {
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: 10px;
    align-content: start;
  }
  @media (min-width: 760px) {
    .exercise:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--rule); }
    .exercise:nth-child(even) { padding-left: 32px; }
  }
  .exercise .who { font-family: var(--display); font-size: 30px; font-weight: 500; }
  .exercise .did { font-family: var(--mono); font-size: 13px; color: var(--verdigris); letter-spacing: 0.04em; }
  .exercise p { color: var(--ink-2); font-size: 17px; }

  /* Pull quote */
  .pull {
    margin: 36px 0 8px;
    padding: 0 0 0 22px;
    border-left: 3px solid var(--verdigris);
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 31px);
    font-style: italic;
    line-height: 1.3;
    color: var(--ink);
    max-width: 30ch;
    text-wrap: balance;
  }

  /* Convergence diagram */
  .converge { padding: 30px 0 12px; overflow-x: auto; }
  .converge svg { width: 100%; max-width: 780px; height: auto; display: block; }
  .converge .lbl { font-family: var(--mono); font-size: 12px; fill: var(--ink-3); letter-spacing: 0.06em; }
  .converge .name { font-family: var(--display); font-size: 20px; fill: var(--ink); }
  .converge .node-t { font-family: var(--body); font-size: 15px; fill: var(--ink); }
  .converge .path { fill: none; stroke: var(--verdigris); stroke-width: 2; }
  .converge .node { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
  .converge .origin { fill: var(--ink); }

  /* Quote pair */
  .pair { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 20px 0 0; }
  @media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; gap: 28px; } }
  .pair blockquote {
    margin: 0;
    padding: 22px 24px;
    background: var(--paper-2);
    display: grid;
    gap: 10px;
  }
  .pair blockquote p { font-family: var(--display); font-size: 26px; line-height: 1.25; }
  .pair cite { font-family: var(--mono); font-style: normal; font-size: 12.5px; color: var(--ink-3); }

  /* Charters as documents */
  .charters { display: grid; gap: 44px; margin-top: 8px; }
  .charter { display: grid; gap: 16px; }
  .charter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
  .charter-head h3 { font-size: 30px; }
  .charter-head .attr { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
  .charter-body { display: grid; gap: 14px; max-width: 66ch; }
  .charter-body p { white-space: pre-wrap; }
  .charter-body h4 { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 0; font-weight: 500; }
  .charter-body .standing { font-style: italic; color: var(--ink-2); }
  .receipt {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--receipt);
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .receipt .k { color: var(--ink-3); }
  .open-slot {
    padding: 22px 24px;
    border: 1px dashed var(--rule);
    display: grid;
    gap: 8px;
    max-width: 66ch;
  }
  .open-slot .who { font-family: var(--display); font-size: 30px; }
  .open-slot .state { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; }

  /* Corrections, in ledger red */
  .corrections { border-left: 3px solid var(--red); padding-left: 24px; }
  .corrections .section-head h2 { color: var(--red); }
  .corrections .byline { color: var(--red); }
  .ledger-note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); background: var(--red-soft); padding: 10px 12px; max-width: 66ch; }

  /* Steps: a real sequence */
  .steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 0; max-width: 66ch; border-top: 1px solid var(--rule); }
  .steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .steps li::before { content: counter(s); font-family: var(--display); font-size: 30px; color: var(--verdigris); line-height: 1; }
  .steps li p { color: var(--ink-2); }
  .steps code { font-family: var(--mono); font-size: 14px; }

  /* Credits */
  .credits { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ink); display: grid; gap: 14px; color: var(--ink-2); font-size: 16px; }
  .credits .final { font-family: var(--display); font-size: 22px; font-style: italic; color: var(--ink); max-width: 44ch; text-wrap: balance; }
  .mirrors { font-family: var(--mono); font-size: 13px; display: grid; gap: 4px; }

  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Integration: readable source receipts and small-screen diagrams. */
body.a11-shell-base { background:var(--paper); color:var(--ink); font-family:var(--body); }
.page, .page * { min-width: 0; }
.receipt { white-space: normal; overflow-wrap: anywhere; }
.charter-body p { overflow-wrap: anywhere; }
.mirrors a { overflow-wrap:anywhere; }
.masthead:not(:has(canvas)) { grid-template-columns:1fr; }
.issue-nav { display:flex; flex-wrap:wrap; gap:12px 24px; padding:20px 0; border-bottom:1px solid var(--rule); font:14px var(--mono); }
.issue-nav a { padding:6px 0; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:10000; padding:12px; background:var(--paper); }
.skip-link:focus { top:8px; }
.converge svg { min-width:620px; }
.charter-body p { line-height:1.7; }
.page h2, .page h3 { scroll-margin-top:100px; }
.archive-card { margin-top:28px; padding:26px; background:var(--paper-2); display:grid; gap:14px; }
@media(max-width:480px) { .page { padding-left:20px; padding-right:20px; } .masthead { padding-top:28px; } .masthead canvas { width:180px; height:180px; } .wordmark { font-size:64px; } .open-slot, .pair blockquote { padding:18px; } .corrections { padding-left:16px; } }
@media print { .a11-banner, .a11-nav, .a11-footer, .issue-nav, .skip-link { display:none!important; } body { background:white; color:black; } .page { max-width:none; padding:0; } .receipt { background:transparent; } .charter { break-inside:auto; } h2,h3,h4 { break-after:avoid; } }