:root {
    color-scheme: light;
    --paper: #f6f1e7;
    --ink: #1c1a17;
    --muted: #5c554b;
    --accent: #7a1f2b;
    --accent-strong: #5a1520;
    --rule: #d9d0c0;
    --rule-strong: #8c8171;
    --accent-wash: rgba(122, 31, 43, 0.09);
    --measure: 40rem;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Noto Serif", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Referenced by .address since it was written, never declared until now -
       the fallback list silently won every time. */
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #17181b;
    --ink: #ece4d3;
    --muted: #a89f8f;
    --accent: #c9a45c;
    --accent-strong: #e0bd78;
    --rule: #2c2d31;
    --rule-strong: #6b675f;
    --accent-wash: rgba(201, 164, 92, 0.16);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #17181b;
      --ink: #ece4d3;
      --muted: #a89f8f;
      --accent: #c9a45c;
      --accent-strong: #e0bd78;
      --rule: #2c2d31;
      --rule-strong: #6b675f;
      --accent-wash: rgba(201, 164, 92, 0.16);
    }
  }

  * { box-sizing: border-box; }
  html { background: var(--paper); }
  body {
    margin: 0;
    border-top: 0.375rem solid var(--accent);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
  }
  ::selection { background: var(--accent); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* No underline, ever - that is a standing operator ruling (AGENTS.md,
     2026-07-27). So the affordance has to come from somewhere else: full
     accent colour at 600, and a tinted bed that appears under the pointer and
     under keyboard focus, which reads as "this is a control" without a rule
     through the text. */
  a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-radius: 2px;
    transition: background-color 120ms ease, color 120ms ease;
  }
  a:hover, a:focus-visible {
    color: var(--accent-strong);
    background: var(--accent-wash);
    box-shadow: 0 0 0 0.15em var(--accent-wash);
  }
  @media (prefers-reduced-motion: reduce) { a { transition: none; } }

  header, main, footer { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }
  header { padding-top: 1rem; }
  .masthead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .founded { margin: 0; }
  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
  .languages { display: flex; gap: 1rem; }

  /* The reading nav: evidence, archive, people, act. It sits under the
     masthead rule rather than in `.controls`, because on a 320px screen the
     language switcher and the theme button already fill that row. */
  .sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    padding: 0.6rem 0 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .sections a { padding-bottom: 0.15rem; border-bottom: 2px solid transparent; }
  .sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  /* Who is listed and why, said once and above the list rather than in a
     footnote nobody reads. */
  .disclaimer {
    margin: 0 0 2rem;
    padding: 0.75rem 1rem;
    border-left: 2px solid var(--rule-strong);
    background: var(--accent-wash);
    font-size: 0.95rem;
    color: var(--muted);
  }
  .people .record-title { font-weight: 600; }
  .people .dateline { display: block; margin-top: 0.15rem; text-transform: none; letter-spacing: 0; }
  .contents { margin: 1.5rem 0 2rem; padding: 1rem; background: var(--accent-wash); }
  .contents h2 { margin-top: 0; }
  .contents ul { margin-bottom: 0; padding-left: 1.25rem; }
  .contents li { margin: 0.35rem 0; }
  .contents .contents-chapter { margin-top: 1rem; font-weight: 600; }
  .person-profile { margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .person-profile h4 { margin: 0 0 0.5rem; font-size: 1.3rem; }
  .profile-role, .profile-statement, .profile-quote figcaption { color: var(--muted); font-size: 0.9rem; }
  .profile-quote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--rule-strong); }
  .profile-quote blockquote { margin: 0; }
  .profile-translation q { quotes: '"' '"'; }
  .profile-assessment, .boycott-assessment { padding-left: 1rem; border-left: 2px solid var(--accent); }
  .languages a { padding-bottom: 0.15rem; border-bottom: 2px solid transparent; }
  .languages a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

  /* One control, two states. It was a THEME / AUTO / LIGHT / DARK segmented
     strip: four words of chrome above the masthead, and on a 320px screen it
     was the widest thing on the page. Then it was a single button cycling
     auto -> light -> dark. Now the system decides until the reader disagrees,
     so there is no "auto" to name: the glyph shows the theme in force and the
     accessible name says which. Inert without the script that backs it, so it
     stays hidden until that script has run; the media query alone dresses the
     page meanwhile. */
  .theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: the smallest thing a finger reliably hits. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
  }
  html:not([data-js]) .theme { display: none; }
  .theme::before { content: "☀"; }
  .theme[data-mode="dark"]::before { content: "☾"; }
  .theme:hover { color: var(--accent); border-color: var(--accent); }
  .theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .theme { transition: none; } }

  h1 {
    margin: 2.5rem 0 0;
    font-weight: 400;
    font-size: clamp(2.5rem, 7vw, 3.5rem);
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .tagline { margin: 0.6rem 0 0; font-size: 1.35rem; font-style: italic; color: var(--muted); }
  .lead {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 1.25rem;
    line-height: 1.55;
  }

  /* Headings read as headings. They used to be 0.78rem uppercase eyebrows
     carrying a CSS counter - 01, 02, 03 - with a hairline rule running off to
     the right, which is how a finding aid numbers boxes in a basement. This is
     a record of something still happening, so the sections are titled, not
     catalogued, and they are separated by space rather than by rules. */
  main { padding-bottom: 3.5rem; }
  section { margin-top: 3rem; }
  h2 {
    margin: 0 0 0.85rem;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    color: var(--ink);
  }
  p { margin: 0; }
  p + p { margin-top: 1rem; }
  ul { margin: 0; padding: 0; list-style: none; }
  li { position: relative; padding: 0.55rem 0 0.55rem 1.5rem; }
  li + li { border-top: 1px solid var(--rule); }
  li::before {
    content: "";
    position: absolute;
    left: 0;
    /* em, not rem: the dash sits on the first line's optical centre at any
       body size, instead of at one distance tuned to the desktop one. */
    top: 1.35em;
    width: 0.75rem;
    border-top: 1px solid var(--accent);
  }

  footer {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    color: var(--muted);
  }
  footer h2 { margin-top: 1.5rem; }
  address { font-style: normal; }
  .rights { margin-left: 1rem; }
  .colophon {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* The saying that gives the archive its name, set as the epigraph it is. */
  .saying {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--muted);
  }

  /* The two pages the site actually wants read get a card on the home page,
     with a real button rather than a link buried in a paragraph. */
  .to-page { margin-top: 1.25rem; }
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--sans);
    font-size: 0.95rem;
  }
  .cta::after { content: "→"; }
  .cta:hover, .cta:focus-visible { background: var(--accent); color: var(--paper); box-shadow: none; }
  .act-close {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    font-size: 0.95rem;
    color: var(--muted);
  }

  /* Support. The address is long and must be selectable in one gesture. */
  .support-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
  .support-actions a, .support-actions button {
    min-height: 2.75rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 0.55rem 1.1rem;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .support-actions a:hover, .support-actions button:hover { background: var(--accent); color: var(--paper); }
  .address {
    display: block;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
  }
  .address-label {
    display: block;
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .support-note { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }

  /* The imprint, its privacy note and the ask for money are metadata: quiet
     footer links, not sections of the page. Laid out with a gap rather than
     a separator glyph, so the links never run together whatever the language
     sets. */
  .meta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 1.5rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .meta-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--muted);
    font-weight: 400;
  }
  .meta-links a:hover { color: var(--accent); }

  /* The archive. An entry is a record, so it reads as one: a dateline, a
     summary set apart, then the account and what it rests on. */
  .breadcrumb {
    margin: 1.75rem 0 0;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .breadcrumb a { font-weight: 600; }
  .breadcrumb span { margin: 0 0.5rem; color: var(--rule-strong); }
  .entry-title {
    margin: 1.25rem 0 0;
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: none;
  }
  .dateline {
    margin-top: 0.75rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .dateline span { margin: 0 0.5rem; color: var(--rule-strong); }
  .entry-body { margin-top: 1.5rem; }
  .records li { padding-left: 0; }
  .records li::before { content: none; }
  .records a { display: block; font-weight: 400; }
  .records .record-title { font-size: 1.2rem; line-height: 1.3; }
  .records .record-summary { margin-top: 0.35rem; color: var(--ink); font-weight: 400; }
  .records .dateline { margin-top: 0.35rem; }
  .sources li { font-size: 0.95rem; }
  .sources .publisher { color: var(--muted); }
  .citations { margin: 1rem 0; }
  .citations summary { cursor: pointer; color: var(--accent); font-family: var(--sans); font-size: 0.85rem; padding: 0.5rem 0; }
  .citations a { overflow-wrap: anywhere; }
  .policy-table { border-collapse: collapse; width: 100%; text-align: left; }
  .policy-table th, .policy-table td { vertical-align: top; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .policy-table th { font-family: var(--sans); font-size: 0.85rem; }
  .policy-table th[scope="row"] { width: 24%; padding-right: 1.25rem; }
  .policy-table td p:first-child { margin-top: 0; }
  .policy-table td p { font-size: 1rem; }
  .watch-entry { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .involvement { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
  .involvement li { padding: 0.25rem 0.55rem; margin: 0; border: 1px solid var(--rule-strong); font-family: var(--sans); font-size: 0.75rem; }
  .involvement li::before { content: none; }
  .to-archive { margin-top: 2.5rem; font-family: var(--sans); font-size: 0.85rem; }

  @media (max-width: 40rem) {
    body { font-size: 1.0625rem; }
    .masthead-row { flex-direction: column; align-items: flex-start; }
    /* Once the controls have a line to themselves they should use it: the
       languages keep the left gutter and the theme button takes the right
       one, the way it sits on a wide screen. Without this the button trails
       the last language link and stops in the middle of an empty row. */
    .controls { align-self: stretch; justify-content: space-between; }
    h1 { letter-spacing: 0.1em; }
    .lead { font-size: 1.15rem; }
    section { margin-top: 2.5rem; }
  }
  /* The narrow phone. The masthead used to stack "FOUNDED 2026" above a
     language nav and a three-segment theme strip - three rows of chrome before
     any content. The row now stays a row, because the theme control is one
     button, and only the padding tightens. */
  @media (max-width: 30rem) {
    .policy-table th[scope="row"] { width: 29%; padding-right: 0.7rem; overflow-wrap: anywhere; }
    .policy-table td p { font-size: 0.95rem; }
    header, main, footer { padding: 0 1rem; }
    .masthead-row { flex-direction: row; align-items: center; gap: 0.5rem 0.75rem; }
    /* The row stays a row, but it wraps: "FOUNDED 2026" plus three language
       links plus the button need more than a 320px line. flex-basis 100%
       makes that wrap deliberate - the controls take the second line whole,
       so space-between above still puts the button on the right margin. */
    .controls { flex: 1 1 100%; gap: 0.5rem 0.9rem; }
    .founded { letter-spacing: 0.06em; }
    .languages { gap: 0.75rem; }
    .colophon, .address-label { letter-spacing: 0.08em; }
    .support-actions a, .support-actions button, .cta { width: 100%; justify-content: center; }
  }
  @media print {
    body { border-top-width: 0.125rem; background: #fff; color: #000; }
    .controls { display: none; }
    a { color: inherit; }
  }