@layer settings, generic, elements, objects, components, utilities;

@layer settings {
  @font-face {
    font-family: "Thorn Argument Serif";
    src: url("/assets/fonts/argument-serif-09a6fa6f.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Thorn Evidence Mono";
    src: url("/assets/fonts/evidence-mono-245df87c.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Thorn Label Grotesque";
    src: url("/assets/fonts/label-grotesque-8f9bb78c.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
  }

  :root {
    color-scheme: light;

    --font-serif: "Thorn Argument Serif", Georgia, serif;
    --font-mono: "Thorn Evidence Mono", "Courier New", monospace;
    --font-grotesque: "Thorn Label Grotesque", Arial, sans-serif;

    --color-paper-newsprint: #f4efe2;
    --color-paper-raised: #fbf7ec;
    --color-paper-muted: #e8dfce;
    --color-ink: #17130d;
    --color-ink-soft: #3f372c;
    --color-ink-muted: #6d6252;
    --color-rule: #b9ac95;
    --color-rule-strong: #7c6d58;
    --color-accent-stamp: #9f261f;
    --color-accent-signal: #0e626d;
    --color-focus-ring: #143f8c;

    --color-status-fact-fg: #123c2f;
    --color-status-fact-bg: #d9ebe0;
    --color-status-inference-fg: #56370c;
    --color-status-inference-bg: #f1dfb8;
    --color-status-proven-fg: #0f402a;
    --color-status-proven-bg: #cfe8d7;
    --color-status-structural-fg: #163f62;
    --color-status-structural-bg: #d5e5ef;
    --color-status-split-fg: #553b00;
    --color-status-split-bg: #ecd99c;
    --color-status-documented-fg: #253a70;
    --color-status-documented-bg: #dce2f4;
    --color-status-unproven-fg: #4d4335;
    --color-status-unproven-bg: #e4dbcb;
    --color-status-speculative-fg: #4b2f61;
    --color-status-speculative-bg: #e6d9ed;
    --color-status-false-fg: #641d1a;
    --color-status-false-bg: #efd0cc;
    --color-status-overstated-fg: #6a330e;
    --color-status-overstated-bg: #f0d6bf;
    --color-status-needs-precision-fg: #4c3f05;
    --color-status-needs-precision-bg: #e9dfac;
    --color-status-stale-fg: #3d4655;
    --color-status-stale-bg: #d9dde3;
    --color-status-tier-fg: #22201c;
    --color-status-tier-bg: #eee6d6;
    --color-status-tier-1-fg: #22201c;
    --color-status-tier-1-bg: #eee6d6;
    --color-status-tier-2-fg: #22201c;
    --color-status-tier-2-bg: #eee6d6;
    --color-status-tier-3-fg: #22201c;
    --color-status-tier-3-bg: #eee6d6;
    --color-status-work-fg: #183f45;
    --color-status-work-bg: #d5e7e9;
    --color-status-tractability-os-fg: #183f45;
    --color-status-tractability-os-bg: #d5e7e9;
    --color-status-tractability-os-hard-fg: #183f45;
    --color-status-tractability-os-hard-bg: #d5e7e9;
    --color-status-tractability-paid-fg: #183f45;
    --color-status-tractability-paid-bg: #d5e7e9;
    --color-status-tractability-foia-fg: #183f45;
    --color-status-tractability-foia-bg: #d5e7e9;
    --color-status-tractability-likely-dead-fg: #183f45;
    --color-status-tractability-likely-dead-bg: #d5e7e9;
    --color-status-priority-fg: #5a241d;
    --color-status-priority-bg: #ecd3c8;
    --color-status-priority-p1-fg: #5a241d;
    --color-status-priority-p1-bg: #ecd3c8;
    --color-status-priority-p2-fg: #5a241d;
    --color-status-priority-p2-bg: #ecd3c8;
    --color-status-priority-p3-fg: #5a241d;
    --color-status-priority-p3-bg: #ecd3c8;
    --color-status-stance-fg: #272f5e;
    --color-status-stance-bg: #dce1f0;
    --color-status-stance-support-fg: #272f5e;
    --color-status-stance-support-bg: #dce1f0;
    --color-status-stance-oppose-fg: #272f5e;
    --color-status-stance-oppose-bg: #dce1f0;
    --color-status-stance-narrow-fg: #272f5e;
    --color-status-stance-narrow-bg: #dce1f0;
    --color-status-stance-shift-fg: #272f5e;
    --color-status-stance-shift-bg: #dce1f0;

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;

    --type-step--1: 0.875rem;
    --type-step-0: 1rem;
    --type-step-1: 1.1875rem;
    --type-step-2: 1.5rem;
    --type-step-3: 2rem;
    --type-step-4: 2.75rem;
    --leading-tight: 1.1;
    --leading-copy: 1.62;
    --leading-label: 1.25;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --border-hairline: 1px;
    --border-heavy: 2px;
    --shadow-raised: 0 1px 0 rgb(23 19 13 / 0.15), 0 12px 28px rgb(23 19 13 / 0.08);
    --motion-duration-fast: 120ms;
    --motion-duration-disclosure: 180ms;
    --motion-ease-disclosure: cubic-bezier(0.2, 0, 0.2, 1);
  }

  :root[data-theme="dark"],
  [data-theme="dark"] {
    color-scheme: dark;

    --color-paper-newsprint: #151718;
    --color-paper-raised: #202426;
    --color-paper-muted: #2d3130;
    --color-ink: #f2ecd9;
    --color-ink-soft: #d8cfb9;
    --color-ink-muted: #a99f8a;
    --color-rule: #5a625f;
    --color-rule-strong: #87908a;
    --color-accent-stamp: #e06a5f;
    --color-accent-signal: #76c9d0;
    --color-focus-ring: #f2cf65;

    --color-status-fact-fg: #d9f2e6;
    --color-status-fact-bg: #173b31;
    --color-status-inference-fg: #f8e4b6;
    --color-status-inference-bg: #4b3511;
    --color-status-proven-fg: #d8f2df;
    --color-status-proven-bg: #19432e;
    --color-status-structural-fg: #dbeaf4;
    --color-status-structural-bg: #1b3c58;
    --color-status-split-fg: #f6e4a6;
    --color-status-split-bg: #4d3d0e;
    --color-status-documented-fg: #e1e7fb;
    --color-status-documented-bg: #263966;
    --color-status-unproven-fg: #eee1cf;
    --color-status-unproven-bg: #40382e;
    --color-status-speculative-fg: #f0def7;
    --color-status-speculative-bg: #443057;
    --color-status-false-fg: #f5d3d0;
    --color-status-false-bg: #5b2421;
    --color-status-overstated-fg: #f4d9c1;
    --color-status-overstated-bg: #603317;
    --color-status-needs-precision-fg: #eee4ae;
    --color-status-needs-precision-bg: #4a410d;
    --color-status-stale-fg: #e1e5eb;
    --color-status-stale-bg: #353e4c;
    --color-status-tier-fg: #f2ecd9;
    --color-status-tier-bg: #34302a;
    --color-status-tier-1-fg: #f2ecd9;
    --color-status-tier-1-bg: #34302a;
    --color-status-tier-2-fg: #f2ecd9;
    --color-status-tier-2-bg: #34302a;
    --color-status-tier-3-fg: #f2ecd9;
    --color-status-tier-3-bg: #34302a;
    --color-status-work-fg: #d9f2f0;
    --color-status-work-bg: #1a4247;
    --color-status-tractability-os-fg: #d9f2f0;
    --color-status-tractability-os-bg: #1a4247;
    --color-status-tractability-os-hard-fg: #d9f2f0;
    --color-status-tractability-os-hard-bg: #1a4247;
    --color-status-tractability-paid-fg: #d9f2f0;
    --color-status-tractability-paid-bg: #1a4247;
    --color-status-tractability-foia-fg: #d9f2f0;
    --color-status-tractability-foia-bg: #1a4247;
    --color-status-tractability-likely-dead-fg: #d9f2f0;
    --color-status-tractability-likely-dead-bg: #1a4247;
    --color-status-priority-fg: #f3d8cf;
    --color-status-priority-bg: #5a2a22;
    --color-status-priority-p1-fg: #f3d8cf;
    --color-status-priority-p1-bg: #5a2a22;
    --color-status-priority-p2-fg: #f3d8cf;
    --color-status-priority-p2-bg: #5a2a22;
    --color-status-priority-p3-fg: #f3d8cf;
    --color-status-priority-p3-bg: #5a2a22;
    --color-status-stance-fg: #e2e6fb;
    --color-status-stance-bg: #2d3568;
    --color-status-stance-support-fg: #e2e6fb;
    --color-status-stance-support-bg: #2d3568;
    --color-status-stance-oppose-fg: #e2e6fb;
    --color-status-stance-oppose-bg: #2d3568;
    --color-status-stance-narrow-fg: #e2e6fb;
    --color-status-stance-narrow-bg: #2d3568;
    --color-status-stance-shift-fg: #e2e6fb;
    --color-status-stance-shift-bg: #2d3568;
  }
}

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

  html {
    min-height: 100%;
    background: var(--color-paper-newsprint);
  }

  body,
  h1,
  h2,
  h3,
  p,
  blockquote,
  figure,
  dl,
  dd {
    margin: 0;
  }
}

@layer elements {
  body {
    min-height: 100vh;
    background: var(--color-paper-newsprint);
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: var(--type-step-1);
    line-height: var(--leading-copy);
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    color: var(--color-ink);
    font-family: var(--font-serif);
    line-height: var(--leading-tight);
  }

  h1 {
    max-width: 12ch;
    font-size: var(--type-step-4);
  }

  h2 {
    font-size: var(--type-step-3);
  }

  h3 {
    font-size: var(--type-step-2);
  }

  p {
    max-width: 68ch;
  }

  a {
    color: var(--color-accent-signal);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-heavy);
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--color-accent-stamp);
  }

  :focus-visible {
    outline: var(--border-heavy) solid var(--color-focus-ring);
    outline-offset: 3px;
  }

  button,
  input,
  select,
  textarea {
    border: var(--border-hairline) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    background: var(--color-paper-raised);
    color: var(--color-ink);
    font: inherit;
  }

  button,
  select,
  input {
    min-height: 2.5rem;
  }

  button {
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-grotesque);
    font-size: var(--type-step-0);
    line-height: var(--leading-label);
    cursor: pointer;
  }

  input,
  select,
  textarea {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
  }

  label {
    display: grid;
    gap: var(--space-2xs);
    color: var(--color-ink-soft);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
  }
}

@layer objects {
  .o-container {
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
  }

  .o-page-shell {
    width: min(100% - 1.5rem, 82rem);
    margin-inline: auto;
    padding-block: var(--space-2xl);
  }

  .o-stack {
    display: grid;
    gap: var(--space-lg);
  }

  .o-stack[data-density="compact"] {
    gap: var(--space-sm);
  }

  .o-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .o-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-lg);
  }

  .o-grid[data-density="dense"] {
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-sm);
  }

  .o-dossier-layout {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(min(18rem, 100%), 24rem);
    gap: var(--space-2xl);
    align-items: start;
  }

  .o-dossier-layout > * {
    min-width: 0;
  }

  .o-reading-column {
    max-width: 68ch;
  }

  .o-reading-column > * + * {
    margin-block-start: var(--space-lg);
  }

  .o-apparatus-column {
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
    line-height: 1.5;
  }

  .o-apparatus-column > * + * {
    margin-block-start: var(--space-md);
  }

  .o-record-row {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-md);
    border-block-start: var(--border-hairline) solid var(--color-rule);
  }

  .o-record-row[data-density="dense"] {
    grid-template-columns: minmax(0, 0.75fr) minmax(14rem, 1.5fr) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    padding-block: var(--space-sm);
    font-size: var(--type-step-0);
  }

  .o-timeline-rail {
    border-inline-start: var(--border-heavy) solid var(--color-rule-strong);
    padding-inline-start: var(--space-md);
  }

  .o-timeline-item {
    position: relative;
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-sm);
  }

  .o-timeline-item::before {
    content: "";
    position: absolute;
    inset-block-start: 1.15em;
    inset-inline-start: calc(-1 * var(--space-md) - var(--border-heavy));
    width: 0.65rem;
    height: 0.65rem;
    border: var(--border-heavy) solid var(--color-rule-strong);
    background: var(--color-paper-newsprint);
  }

  .o-callout {
    border: var(--border-hairline) solid var(--color-rule-strong);
    border-inline-start-width: 0.375rem;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: var(--color-paper-raised);
  }

  .o-callout[data-tone="method"] {
    border-style: double;
    background: var(--color-paper-newsprint);
  }

  .o-callout[data-tone="caveat"] {
    border-inline-start-color: var(--color-accent-stamp);
  }

  @media (max-width: 56rem) {
    .o-dossier-layout,
    .o-record-row[data-density="dense"] {
      grid-template-columns: 1fr;
    }
  }
}

@layer components {
  .c-specimen {
    padding-block: var(--space-2xl);
  }

  .c-masthead {
    border-block: var(--border-heavy) solid var(--color-ink);
    padding-block: var(--space-md);
  }

  .c-masthead[data-scale="compact"] {
    border-block-width: var(--border-hairline);
  }

  .c-nameplate {
    font-family: var(--font-serif);
    font-size: var(--type-step-4);
    line-height: var(--leading-tight);
  }

  .c-kicker,
  .c-byline,
  .c-token-label {
    color: var(--color-ink-soft);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    letter-spacing: 0;
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-standfirst {
    color: var(--color-ink-soft);
    font-family: var(--font-serif);
    font-size: var(--type-step-2);
    line-height: 1.35;
  }

  .c-dateline,
  .c-source-note {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
  }

  .c-byline {
    text-transform: none;
  }

  .c-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
  }

  .c-marker,
  .c-verdict,
  .c-tier,
  .c-work-tag,
  .c-priority,
  .c-stance,
  .c-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    border: var(--border-hairline) solid currentColor;
    border-radius: var(--radius-xs);
    padding: 0.1rem 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: var(--leading-label);
  }

  .c-marker::before,
  .c-verdict::before,
  .c-tier::before,
  .c-work-tag::before,
  .c-priority::before,
  .c-stance::before,
  .c-tag::before {
    display: inline-grid;
    min-width: 1.15em;
    height: 1.15em;
    place-items: center;
    border: var(--border-hairline) solid currentColor;
    font-size: 0.72em;
    line-height: 1;
  }

  .c-marker::before {
    content: "!";
    border-radius: 999px;
    font-family: var(--font-grotesque);
  }

  .c-verdict::before {
    content: "";
    transform: rotate(45deg);
  }

  .c-tier::before {
    content: "T";
    border-style: double;
  }

  .c-work-tag::before {
    content: "R";
    border-style: dashed;
  }

  .c-priority::before {
    content: "P";
    border-radius: 999px;
  }

  .c-stance::before {
    content: "S";
    border-block-width: var(--border-heavy);
  }

  .c-tag::before {
    content: "#";
    border-radius: var(--radius-xs);
  }

  .c-marker[data-kind="fact"] {
    background: var(--color-status-fact-bg);
    color: var(--color-status-fact-fg);
  }

  .c-marker[data-kind="inference"] {
    background: var(--color-status-inference-bg);
    color: var(--color-status-inference-fg);
  }

  .c-verdict[data-status="proven"] {
    background: var(--color-status-proven-bg);
    color: var(--color-status-proven-fg);
  }

  .c-verdict[data-status="structural"] {
    background: var(--color-status-structural-bg);
    color: var(--color-status-structural-fg);
  }

  .c-verdict[data-status="split"] {
    background: var(--color-status-split-bg);
    color: var(--color-status-split-fg);
  }

  .c-verdict[data-status="documented"] {
    background: var(--color-status-documented-bg);
    color: var(--color-status-documented-fg);
  }

  .c-verdict[data-status="unproven"] {
    background: var(--color-status-unproven-bg);
    color: var(--color-status-unproven-fg);
  }

  .c-verdict[data-status="speculative"] {
    background: var(--color-status-speculative-bg);
    color: var(--color-status-speculative-fg);
  }

  .c-verdict[data-status="false"] {
    background: var(--color-status-false-bg);
    color: var(--color-status-false-fg);
  }

  .c-verdict[data-status="overstated"] {
    background: var(--color-status-overstated-bg);
    color: var(--color-status-overstated-fg);
  }

  .c-verdict[data-status="needs-precision"] {
    background: var(--color-status-needs-precision-bg);
    color: var(--color-status-needs-precision-fg);
  }

  .c-verdict[data-status="stale"] {
    background: var(--color-status-stale-bg);
    color: var(--color-status-stale-fg);
  }

  .c-tier {
    --status-bg: var(--color-status-tier-bg);
    --status-fg: var(--color-status-tier-fg);

    background: var(--status-bg);
    color: var(--status-fg);
    border-style: double;
    font-family: var(--font-grotesque);
  }

  .c-tier[data-tier="1"] {
    --status-bg: var(--color-status-tier-1-bg);
    --status-fg: var(--color-status-tier-1-fg);
  }

  .c-tier[data-tier="2"] {
    --status-bg: var(--color-status-tier-2-bg);
    --status-fg: var(--color-status-tier-2-fg);
  }

  .c-tier[data-tier="3"] {
    --status-bg: var(--color-status-tier-3-bg);
    --status-fg: var(--color-status-tier-3-fg);
  }

  .c-work-tag {
    --status-bg: var(--color-status-work-bg);
    --status-fg: var(--color-status-work-fg);

    background: var(--status-bg);
    color: var(--status-fg);
    border-style: dashed;
    border-radius: 0;
  }

  .c-work-tag[data-tractability="os"] {
    --status-bg: var(--color-status-tractability-os-bg);
    --status-fg: var(--color-status-tractability-os-fg);
  }

  .c-work-tag[data-tractability="os-hard"] {
    --status-bg: var(--color-status-tractability-os-hard-bg);
    --status-fg: var(--color-status-tractability-os-hard-fg);
  }

  .c-work-tag[data-tractability="paid"] {
    --status-bg: var(--color-status-tractability-paid-bg);
    --status-fg: var(--color-status-tractability-paid-fg);
  }

  .c-work-tag[data-tractability="foia"] {
    --status-bg: var(--color-status-tractability-foia-bg);
    --status-fg: var(--color-status-tractability-foia-fg);
  }

  .c-work-tag[data-tractability="likely-dead"] {
    --status-bg: var(--color-status-tractability-likely-dead-bg);
    --status-fg: var(--color-status-tractability-likely-dead-fg);
  }

  .c-priority {
    --status-bg: var(--color-status-priority-bg);
    --status-fg: var(--color-status-priority-fg);

    background: var(--status-bg);
    color: var(--status-fg);
    border-radius: 999px;
  }

  .c-priority[data-priority="p1"] {
    --status-bg: var(--color-status-priority-p1-bg);
    --status-fg: var(--color-status-priority-p1-fg);
  }

  .c-priority[data-priority="p2"] {
    --status-bg: var(--color-status-priority-p2-bg);
    --status-fg: var(--color-status-priority-p2-fg);
  }

  .c-priority[data-priority="p3"] {
    --status-bg: var(--color-status-priority-p3-bg);
    --status-fg: var(--color-status-priority-p3-fg);
  }

  .c-stance {
    --status-bg: var(--color-status-stance-bg);
    --status-fg: var(--color-status-stance-fg);

    background: var(--status-bg);
    color: var(--status-fg);
    border-block-width: var(--border-heavy);
    font-family: var(--font-grotesque);
  }

  .c-stance[data-position="support"] {
    --status-bg: var(--color-status-stance-support-bg);
    --status-fg: var(--color-status-stance-support-fg);
  }

  .c-stance[data-position="oppose"] {
    --status-bg: var(--color-status-stance-oppose-bg);
    --status-fg: var(--color-status-stance-oppose-fg);
  }

  .c-stance[data-position="narrow"] {
    --status-bg: var(--color-status-stance-narrow-bg);
    --status-fg: var(--color-status-stance-narrow-fg);
  }

  .c-stance[data-position="shift"] {
    --status-bg: var(--color-status-stance-shift-bg);
    --status-fg: var(--color-status-stance-shift-fg);
  }

  .c-tag {
    background: var(--color-paper-raised);
    color: var(--color-ink-soft);
    font-family: var(--font-grotesque);
  }

  .c-redaction {
    background:
      repeating-linear-gradient(
        135deg,
        var(--color-ink) 0,
        var(--color-ink) 0.45rem,
        var(--color-paper-newsprint) 0.45rem,
        var(--color-paper-newsprint) 0.65rem
      );
    color: transparent;
    border-radius: var(--radius-xs);
  }

  .c-status-board {
    display: grid;
    gap: var(--space-lg);
  }

  .c-status-family {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding-block-start: var(--space-sm);
  }

  .c-status-family > p {
    max-width: none;
  }

  .c-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .c-source-apparatus {
    border-block: var(--border-heavy) solid var(--color-rule);
    padding-block: var(--space-md);
  }

  .c-source-row {
    display: grid;
    grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-block-start: var(--border-hairline) solid var(--color-rule);
  }

  .c-source-row:first-of-type {
    border-block-start: 0;
  }

  .c-source-row dt {
    color: var(--color-ink);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .c-source-row dd {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .c-method-block {
    display: grid;
    gap: var(--space-sm);
    border-block-start: var(--border-heavy) solid var(--color-rule-strong);
    padding-block-start: var(--space-md);
  }

  .c-record-key {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
  }

  .c-record-title {
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: var(--type-step-1);
    line-height: var(--leading-tight);
  }

  .c-record-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
  }

  .c-module-frame {
    display: grid;
    gap: var(--space-md);
    border-block: var(--border-heavy) solid var(--color-rule-strong);
    padding-block: var(--space-md);
  }

  .c-module-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    justify-content: space-between;
    border-block-end: var(--border-hairline) solid var(--color-rule);
    padding-block-end: var(--space-sm);
  }

  .c-module-heading > * {
    max-width: none;
  }

  .c-ledger-entry,
  .c-result-row,
  .c-source-list-row,
  .c-research-row {
    display: grid;
    gap: var(--space-sm);
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding-block: var(--space-md);
  }

  .c-ledger-entry {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1.8fr);
  }

  .c-ledger-claim {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
  }

  .c-corrected-wording {
    display: grid;
    gap: var(--space-xs);
    border-inline-start: var(--border-heavy) solid var(--color-accent-stamp);
    padding-inline-start: var(--space-md);
  }

  .c-corrected-wording del {
    color: var(--color-ink-muted);
    text-decoration-thickness: var(--border-heavy);
  }

  .c-corrected-wording ins {
    color: var(--color-ink);
    font-family: var(--font-mono);
    text-decoration: none;
  }

  .c-caveat-note,
  .c-route-note,
  .c-backref {
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
    line-height: 1.5;
  }

  .c-caveat-note {
    border-inline-start: var(--border-heavy) solid var(--color-accent-stamp);
    padding-inline-start: var(--space-sm);
  }

  .c-backref {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2xs);
    border-block-end: var(--border-heavy) solid currentColor;
    color: var(--color-accent-signal);
    text-decoration: none;
  }

  .c-backref::before {
    content: "->";
  }

  .c-scorecard {
    width: 100%;
    border-block: var(--border-heavy) solid var(--color-rule);
    border-collapse: collapse;
    table-layout: fixed;
  }

  .c-coverage-audit {
    display: grid;
    gap: var(--space-md);
  }

  .c-coverage-row {
    display: grid;
    grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.4fr) minmax(12rem, 0.9fr);
    gap: var(--space-sm);
    align-items: start;
    padding-block: var(--space-sm);
    border-block-start: var(--border-hairline) solid var(--color-rule);
  }

  .c-audit-answer {
    display: grid;
    gap: var(--space-xs);
    border-inline-start: var(--border-heavy) solid var(--color-accent-signal);
    padding-inline-start: var(--space-sm);
  }

  .c-scorecard-row > * {
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding: var(--space-sm);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .c-scorecard thead .c-scorecard-row > * {
    border-block-start: 0;
  }

  .c-scorecard-head {
    color: var(--color-ink-soft);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-scorecard-cell {
    min-width: 0;
  }

  .c-scorecard-cell > * + *,
  .c-scorecard-cell .c-backref {
    margin-block-start: var(--space-xs);
  }

  .c-scorecard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-sm);
  }

  .c-scorecard-summary-item {
    display: grid;
    gap: var(--space-xs);
    border-block-start: var(--border-heavy) solid var(--color-rule-strong);
    padding-block-start: var(--space-sm);
  }

  .c-tiered-index {
    display: grid;
    gap: var(--space-md);
  }

  .c-tier-group {
    display: grid;
    gap: var(--space-sm);
    border-block-start: var(--border-heavy) double var(--color-rule-strong);
    padding-block-start: var(--space-md);
  }

  .c-result-row {
    grid-template-columns: minmax(9rem, 0.7fr) minmax(16rem, 1.7fr) minmax(12rem, 0.9fr);
  }

  .c-result-row > :first-child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .c-result-row .c-record-key {
    flex-basis: 100%;
  }

  .c-result-context {
    color: var(--color-ink-soft);
    font-size: var(--type-step-0);
  }

  .c-source-list-row {
    grid-template-columns: minmax(7rem, 0.5fr) minmax(12rem, 0.9fr) minmax(16rem, 1.6fr) minmax(12rem, 1fr);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
  }

  .c-source-list-row > * {
    min-width: 0;
  }

  .c-source-list-row .o-stack {
    gap: var(--space-xs);
  }

  .c-research-row {
    grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 0.65fr) minmax(14rem, 1.1fr) minmax(12rem, 0.9fr);
  }

  .c-research-state {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .c-operational-label {
    color: var(--color-ink-muted);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-route-note .c-backref {
    margin-inline-start: var(--space-2xs);
  }

  .c-entity-card,
  .c-affiliation-list,
  .c-revolving-door,
  .c-funding-flow,
  .c-relationship-diagram {
    display: grid;
    gap: var(--space-sm);
    border-block-start: var(--border-heavy) solid var(--color-rule-strong);
    padding-block-start: var(--space-md);
  }

  .c-entity-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: start;
    justify-content: space-between;
  }

  .c-entity-heading > * {
    max-width: none;
  }

  .c-entity-name {
    font-family: var(--font-serif);
    font-size: var(--type-step-3);
    line-height: var(--leading-tight);
  }

  .c-entity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .c-affiliation-row,
  .c-flow-step,
  .c-relationship-edge {
    display: grid;
    gap: var(--space-sm);
    align-items: start;
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding-block: var(--space-sm);
  }

  .c-affiliation-row {
    grid-template-columns: minmax(7rem, 0.55fr) minmax(12rem, 1fr) minmax(16rem, 1.6fr) minmax(12rem, 1fr);
  }

  .c-revolving-door .o-timeline-rail {
    margin-block-start: var(--space-xs);
  }

  .c-flow-step,
  .c-relationship-edge {
    grid-template-columns: max-content minmax(7rem, 0.55fr) minmax(10rem, 0.9fr) minmax(8rem, 0.7fr) minmax(10rem, 0.9fr) minmax(14rem, 1.2fr);
    border-inline-start: var(--border-heavy) solid var(--color-rule-strong);
    padding-inline-start: var(--space-sm);
  }

  .c-flow-step::before,
  .c-relationship-edge::before {
    display: inline-grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: var(--border-hairline) solid currentColor;
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
    line-height: 1;
  }

  .c-flow-step[data-flow="money"] {
    border-inline-start-style: solid;
  }

  .c-flow-step[data-flow="money"]::before {
    content: "$";
  }

  .c-relationship-edge[data-tie="non-money"] {
    border-inline-start-style: dashed;
  }

  .c-relationship-edge[data-tie="non-money"]::before {
    content: "tie";
    width: 2.3rem;
  }

  .c-relationship-label {
    color: var(--color-ink-muted);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-edge-note {
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
    line-height: 1.5;
    border-inline-start: var(--border-hairline) dashed var(--color-rule-strong);
    padding-inline-start: var(--space-sm);
  }

  .c-stance-grid {
    width: 100%;
    border-block: var(--border-heavy) solid var(--color-rule);
    border-collapse: collapse;
    table-layout: fixed;
  }

  .c-stance-row > * {
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding: var(--space-sm);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .c-stance-grid thead .c-stance-row > * {
    border-block-start: 0;
  }

  .c-stance-head {
    color: var(--color-ink-soft);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-disclosure {
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding-block-start: var(--space-sm);
  }

  .c-disclosure summary {
    cursor: pointer;
    color: var(--color-ink);
    font-family: var(--font-grotesque);
    font-size: var(--type-step--1);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .c-disclosure[open] summary {
    margin-block-end: var(--space-sm);
  }

  .c-disclosure > :not(summary) {
    font-family: var(--font-mono);
    font-size: var(--type-step--1);
  }

  @media (max-width: 64rem) {
    .c-flow-step,
    .c-relationship-edge,
    .c-coverage-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 36rem) {
    .c-source-row,
    .c-ledger-entry,
    .c-result-row,
    .c-source-list-row,
    .c-research-row,
    .c-affiliation-row,
    .c-flow-step,
    .c-relationship-edge {
      grid-template-columns: 1fr;
    }
  }

  .c-token-swatch {
    min-height: 6rem;
    border: var(--border-hairline) solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: var(--swatch-bg, var(--color-paper-raised));
    color: var(--swatch-fg, var(--color-ink));
    box-shadow: var(--shadow-raised);
  }

  .c-token-swatch[data-token="paper"] {
    --swatch-bg: var(--color-paper-raised);
  }

  .c-token-swatch[data-token="ink"] {
    --swatch-bg: var(--color-ink);
    --swatch-fg: var(--color-paper-newsprint);
  }

  .c-token-swatch[data-token="stamp"] {
    --swatch-bg: var(--color-accent-stamp);
    --swatch-fg: var(--color-paper-raised);
  }

  .c-token-swatch[data-token="signal"] {
    --swatch-bg: var(--color-accent-signal);
    --swatch-fg: var(--color-paper-raised);
  }

  .c-token-swatch[data-token="status"] {
    --swatch-bg: var(--color-status-documented-bg);
    --swatch-fg: var(--color-status-documented-fg);
  }

  .c-token-swatch[data-token="measure"] {
    --swatch-bg: var(--color-paper-muted);
  }

  .c-parts-bin {
    gap: var(--space-xl);
  }

  .c-parts-section {
    display: grid;
    gap: var(--space-md);
    border-block-start: var(--border-hairline) solid var(--color-rule);
    padding-block-start: var(--space-md);
  }

  .c-token-grid,
  .c-type-role-grid,
  .c-parts-status-grid,
  .c-object-inventory,
  .c-module-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-sm);
  }

  .c-theme-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-sm);
  }

  .c-theme-specimen,
  .c-type-role {
    display: grid;
    gap: var(--space-xs);
    border: var(--border-hairline) solid var(--color-rule-strong);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: var(--color-paper-raised);
  }

  .c-state-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: start;
  }

  .c-state-example {
    min-width: min(18rem, 100%);
  }

  .c-state-example[data-state="hover"] {
    color: var(--color-accent-stamp);
  }

  .c-state-example[data-state="focus"] {
    outline: var(--border-heavy) solid var(--color-focus-ring);
    outline-offset: 3px;
  }

  .c-state-example[data-state="active"] {
    border-color: var(--color-accent-stamp);
    box-shadow: inset 0 0 0 var(--border-hairline) var(--color-accent-stamp);
    transform: translateY(1px);
  }

  .c-object-inventory > *,
  .c-module-index > * {
    min-width: 0;
  }

  .c-module-index .c-ledger-entry,
  .c-module-index .c-result-row,
  .c-module-index .c-source-list-row,
  .c-module-index .c-research-row,
  .c-module-index .c-affiliation-row,
  .c-module-index .c-flow-step,
  .c-module-index .c-relationship-edge {
    grid-template-columns: 1fr;
  }
}

@layer utilities {
  .u-serif {
    font-family: var(--font-serif);
  }

  .u-mono {
    font-family: var(--font-mono);
  }

  .u-grotesque {
    font-family: var(--font-grotesque);
  }

  .u-muted {
    color: var(--color-ink-muted);
  }

  .u-dark-register {
    background: var(--color-paper-newsprint);
    color: var(--color-ink);
  }

  /* App addition: skip link (accessibility). Off-screen until focused. */
  .u-skip-link {
    position: absolute;
    left: var(--space-sm);
    top: -3rem;
    z-index: 100;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-ink);
    color: var(--color-paper-newsprint);
    font-family: var(--font-grotesque);
    text-decoration: none;
    transition: top var(--duration-fast, 120ms) ease;
  }

  .u-skip-link:focus {
    top: var(--space-sm);
  }
}