:root {
    --paper: #F6F7F4;
    --paper-raised: #FFFFFF;
    --ink: #1B222C;
    --ink-soft: #46505C;
    --neutral: #5B6672;
    --rule: #D6D9D2;
    --seal: #93312E;
    --seal-soft: #F3E4E2;
    --bronze: #8A6B33;
    --bronze-soft: #F0E9DA;
    --code-bg: #202834;
    --code-ink: #DDE3EA;
    --code-comment: #7C8794;
    --code-accent: #E4B36A;
    --code-green: #9CC79B;
    --good: #2E6B45;
    --good-soft: #E2EEE5;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #141922; --paper-raised: #1C232E; --ink: #E7E4DC; --ink-soft: #B4B0A6;
      --neutral: #8B93A0; --rule: #2E3745; --seal: #C96A62; --seal-soft: #33231F;
      --bronze: #C09A55; --bronze-soft: #2C2517; --code-bg: #10151D; --code-ink: #D5DBE3;
      --good: #7DBE93; --good-soft: #1B2A20;
    }
  }
  :root[data-theme="light"] {
    --paper: #F6F7F4; --paper-raised: #FFFFFF; --ink: #1B222C; --ink-soft: #46505C;
    --neutral: #5B6672; --rule: #D6D9D2; --seal: #93312E; --seal-soft: #F3E4E2;
    --bronze: #8A6B33; --bronze-soft: #F0E9DA; --code-bg: #202834; --code-ink: #DDE3EA;
    --good: #2E6B45; --good-soft: #E2EEE5;
  }
  :root[data-theme="dark"] {
    --paper: #141922; --paper-raised: #1C232E; --ink: #E7E4DC; --ink-soft: #B4B0A6;
    --neutral: #8B93A0; --rule: #2E3745; --seal: #C96A62; --seal-soft: #33231F;
    --bronze: #C09A55; --bronze-soft: #2C2517; --code-bg: #10151D; --code-ink: #D5DBE3;
    --good: #7DBE93; --good-soft: #1B2A20;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 17px; line-height: 1.6;
  }
  main { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
  code, pre, .clause-no, .tab, .eyebrow, .verdict {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  }
  .eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin: 0 0 .75rem; }
  h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; font-weight: 600; margin: 0 0 1rem; text-wrap: balance; }
  h1 em { font-style: italic; color: var(--seal); }
  .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 38rem; margin: 0 0 .4rem; }
  section { margin-top: 4rem; }
  .clause-head { display: flex; align-items: baseline; gap: .9rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
  .clause-no { color: var(--seal); font-size: .85rem; letter-spacing: .05em; }
  h2 { font-size: 1.45rem; font-weight: 600; margin: 0; text-wrap: balance; }
  p { max-width: 40rem; }
  .aside { color: var(--neutral); font-size: .95rem; }
  strong { font-weight: 600; }
  a { color: var(--seal); }
  .sched { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; margin-top: .75rem; }
  .sched summary { cursor: pointer; padding: .85rem 1.15rem; font-weight: 600; font-size: .98rem; list-style-position: inside; }
  .sched summary::marker { color: var(--seal); }
  .sched summary code { color: var(--bronze); font-size: .8rem; }
  .sched[open] summary { border-bottom: 1px solid var(--rule); }
  .sched .pane-note { padding-bottom: 0; }
  .sched pre { border-radius: 0 0 6px 6px; }
  .scroll { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .93rem; }
  th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
  th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
  td:first-child { color: var(--ink-soft); white-space: nowrap; }
  .comparator { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; margin-top: 1.5rem; }
  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
  .tab {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: .8rem 1.1rem; font-size: .78rem; letter-spacing: .06em;
    color: var(--neutral); border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .tab[aria-selected="true"] { color: var(--seal); border-bottom-color: var(--seal); font-weight: 700; }
  .tab:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
  .pane { display: none; }
  .pane.active { display: block; }
  .pane-note { padding: 1rem 1.25rem 0; font-size: .95rem; color: var(--ink-soft); }
  pre {
    margin: 1rem 0 0; padding: 1.25rem; overflow-x: auto;
    background: var(--code-bg); color: var(--code-ink);
    font-size: .82rem; line-height: 1.55; border-radius: 0 0 6px 6px;
  }
  .c { color: var(--code-comment); font-style: italic; }
  .k { color: var(--code-accent); }
  .s { color: var(--code-green); }
  .win { color: var(--good); font-weight: 600; }
  .verdict {
    margin-top: 2rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--seal);
    background: var(--seal-soft); font-size: .85rem; line-height: 1.7;
  }
  ol.rules { padding-left: 1.2rem; }
  ol.rules li { margin: .8rem 0; max-width: 38rem; }
  ol.rules li::marker { color: var(--seal); font-weight: 700; }
  .badge {
    display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--bronze-soft); color: var(--bronze); padding: .15rem .55rem; border-radius: 3px;
    font-family: ui-monospace, monospace;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pane.active { animation: fade .18s ease; }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  }