/* ==========================================================================
   MECS at Penn — shared stylesheet
   Retheme from the :root token block below; nothing else hardcodes a colour.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Palette. Deliberately off Penn's official navy (#011F5B) — ours runs
     cooler and greener. No red anywhere in the system. */
  --ink:        #0E2A33;
  --ink-deep:   #071A20;
  --ink-soft:   #1B3C46;
  --bone:       #F4F1EA;
  --paper:      #FBF9F5;
  --brass:      #B07D2B;   /* accent fills: rules, markers, emblem details */
  --brass-ink:  #8A5F17;   /* accent TEXT on light grounds  (4.99:1 on bone) */
  --brass-lift: #C4913A;   /* accent TEXT on dark grounds   (5.34:1 on ink)  */
  --rule:       #D6CFC0;
  --rule-soft:  #E5E0D4;
  --rule-dark:  rgba(244, 241, 234, 0.20);
  --body:       #2B3338;
  --body-mute:  #55605F;
  --body-on-dark:      #E2E7E4;
  --body-on-dark-mute: #A9B5B4;

  /* Type. Fraunces for display, IBM Plex Sans for reading, Plex Mono for
     labels, figures, and anything that should read as instrumentation. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);
  --step--1: clamp(0.815rem, 0.79rem + 0.13vw, 0.885rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.11rem + 0.32vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.35vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.30vw, 3.5rem);
  --step-5:  clamp(2.6rem, 1.75rem + 3.80vw, 5rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(4.5rem, 3.2rem + 5.5vw, 8rem);

  /* Layout */
  --measure: 66ch;
  --container: 1200px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
}

/* ---------- 2. Reset / base --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--bone);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.03; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120; }
h2 { font-size: var(--step-3); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72; }
h3 { font-size: var(--step-1); line-height: 1.28; font-weight: 600; }
h4 { font-size: var(--step-0); font-weight: 600; }

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

img, svg { max-width: 100%; height: auto; }
ul, ol { padding-left: 1.1rem; margin: 0 0 var(--space-s); }
li + li { margin-top: var(--space-2xs); }
strong { font-weight: 600; color: var(--ink); }

:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .site-header :focus-visible { outline-color: var(--brass-lift); }
::selection { background: var(--brass); color: #fff; }

/* ---------- 3. Layout primitives ---------------------------------------- */

.container { width: min(var(--container), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - (var(--gutter) * 2)); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section + .section:not(.on-dark) { border-top: 1px solid var(--rule); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-s); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }
.on-dark .lede { color: var(--body-on-dark); }

.skip-link {
  position: absolute; left: var(--space-s); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bone); padding: 0.7rem 1rem;
  font-family: var(--font-mono); font-size: var(--step--1);
}
.skip-link:focus { top: var(--space-s); color: var(--bone); }

/* Mono label — the recurring "instrument" mark of the system */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 var(--space-s);
}
.on-dark .label { color: var(--brass-lift); }
.label--mute { color: var(--body-mute); }

.section-head { margin-bottom: var(--space-l); max-width: 62ch; }
.section-head p { color: var(--body-mute); margin-bottom: 0; }
.on-dark .section-head p { color: var(--body-on-dark-mute); }
.section-head h2 { margin-bottom: var(--space-s); }

/* A full-width hairline with a short brass segment at its left */
.rule-head { border-top: 1px solid var(--rule); position: relative; padding-top: var(--space-l); }
.rule-head::before { content: ""; position: absolute; top: -1px; left: 0; width: 4.5rem; height: 2px; background: var(--brass); }
.on-dark .rule-head { border-top-color: var(--rule-dark); }

/* ---------- 4. Links and buttons ---------------------------------------- */

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem;
  transition: border-color 140ms ease, color 140ms ease;
}
.arrow-link::after { content: "\2192"; transition: transform 160ms ease; }
.arrow-link:hover { color: var(--ink); border-bottom-color: var(--brass); }
.arrow-link:hover::after { transform: translateX(3px); }
.on-dark .arrow-link { color: var(--brass-lift); border-bottom-color: var(--rule-dark); }
.on-dark .arrow-link:hover { color: var(--bone); border-bottom-color: var(--brass-lift); }

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); color: var(--ink); background: none; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn:hover { background: var(--ink); color: var(--bone); }
.on-dark .btn { border-color: var(--rule-dark); color: var(--body-on-dark); }
.on-dark .btn:hover { background: var(--bone); color: var(--ink-deep); border-color: var(--bone); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* ---------- 5. Emblem ---------------------------------------------------- */

.emblem { display: block; color: var(--bone); }
.emblem .em-ring { stroke: currentColor; opacity: 0.55; }
.emblem .em-tick { stroke: currentColor; opacity: 0.4; }
.emblem .em-line { stroke: currentColor; opacity: 0.3; }
.emblem .em-accent { stroke: var(--brass-lift); }
.emblem .em-fill { fill: var(--brass-lift); }
.emblem--dark { color: var(--ink); }
.emblem--dark .em-accent { stroke: var(--brass-ink); }
.emblem--dark .em-fill { fill: var(--brass-ink); }

/* ---------- 6. Header ---------------------------------------------------- */

.site-header { background: var(--ink-deep); color: var(--body-on-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: 4.75rem; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand .emblem { width: 32px; height: 32px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--bone); letter-spacing: 0.01em; }
.brand-sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--body-on-dark-mute); margin-top: 0.22rem; }
.brand:hover .brand-name { color: var(--brass-lift); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--rule-dark); color: var(--body-on-dark); background: none;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.55rem 0.8rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brass-lift); color: var(--brass-lift); }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.1rem, 0.3rem + 1.5vw, 2.25rem); }
.nav li { margin: 0; }
.nav a {
  color: var(--body-on-dark); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-block: 0.3rem; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--brass-lift); }
.nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--brass); }

@media (max-width: 460px) { .brand-sub { display: none; } }

@media (max-width: 860px) {
  .header-inner { min-height: 4.25rem; }
  .js .nav { display: none; }
  .js .nav.is-open { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; z-index: 30;
    background: var(--ink-deep); border-bottom: 1px solid var(--rule-dark);
    padding: var(--space-xs) var(--gutter) var(--space-m);
  }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li + li { border-top: 1px solid var(--rule-dark); }
  .nav a { display: block; padding-block: 0.95rem; }
  .nav a[aria-current="page"] { border-bottom-color: transparent; color: var(--brass-lift); }
}
@media (min-width: 861px) { .nav-toggle { display: none; } }

/* ---------- 7. Dark bands and chart texture ------------------------------ */

.on-dark { background-color: var(--ink); color: var(--body-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--bone); }
.on-dark a { color: var(--brass-lift); }
.on-dark a:hover { color: var(--bone); }
.on-dark .text-mute { color: var(--body-on-dark-mute); }

/* Bathymetric contour field, inline SVG data URI — no network request. */
.contours { position: relative; overflow: hidden; isolation: isolate; }
.contours::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='620' viewBox='0 0 1200 620' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-width='1.1'%3E%3Cpath d='M-20 60 C 180 18 330 96 520 74 C 700 54 850 108 1220 52'/%3E%3Cpath d='M-20 112 C 190 66 340 148 530 124 C 715 100 860 156 1220 98'/%3E%3Cpath d='M-20 168 C 200 118 350 202 540 176 C 730 150 872 208 1220 146'/%3E%3Cpath d='M-20 226 C 210 172 360 258 550 230 C 745 202 884 262 1220 196'/%3E%3Cpath d='M-20 286 C 220 228 370 316 560 286 C 760 256 896 318 1220 248'/%3E%3Cpath d='M-20 348 C 230 286 380 376 570 344 C 775 312 908 376 1220 302'/%3E%3Cpath d='M-20 412 C 240 346 390 438 580 404 C 790 370 920 436 1220 358'/%3E%3Cpath d='M-20 478 C 250 408 400 502 590 466 C 805 430 932 498 1220 416'/%3E%3Cpath d='M-20 546 C 260 472 410 568 600 530 C 820 490 944 562 1220 476'/%3E%3Cpath d='M-20 616 C 270 538 420 636 610 596 C 835 552 956 628 1220 538'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center; opacity: 0.10; pointer-events: none;
}
.contours--light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='620' viewBox='0 0 1200 620' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230E2A33' stroke-width='1.1'%3E%3Cpath d='M-20 60 C 180 18 330 96 520 74 C 700 54 850 108 1220 52'/%3E%3Cpath d='M-20 112 C 190 66 340 148 530 124 C 715 100 860 156 1220 98'/%3E%3Cpath d='M-20 168 C 200 118 350 202 540 176 C 730 150 872 208 1220 146'/%3E%3Cpath d='M-20 226 C 210 172 360 258 550 230 C 745 202 884 262 1220 196'/%3E%3Cpath d='M-20 286 C 220 228 370 316 560 286 C 760 256 896 318 1220 248'/%3E%3Cpath d='M-20 348 C 230 286 380 376 570 344 C 775 312 908 376 1220 302'/%3E%3Cpath d='M-20 412 C 240 346 390 438 580 404 C 790 370 920 436 1220 358'/%3E%3Cpath d='M-20 478 C 250 408 400 502 590 466 C 805 430 932 498 1220 416'/%3E%3Cpath d='M-20 546 C 260 472 410 568 600 530 C 820 490 944 562 1220 476'/%3E%3Cpath d='M-20 616 C 270 538 420 636 610 596 C 835 552 956 628 1220 538'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.06;
}
/* Fine graticule, for bands that need texture without the contour movement */
.graticule { position: relative; }
.graticule::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,241,234,0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(244,241,234,0.05) 0 1px, transparent 1px 56px);
}

/* ---------- 8. Hero ------------------------------------------------------ */

/* A background photograph can be dropped in later: set it on .hero::after with
   z-index -2 and the dark ground stays legible. See README. */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem); text-align: center; }
.hero .emblem { width: clamp(88px, 14vw, 124px); height: auto; margin: 0 auto var(--space-l); }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .hero-def {
  font-size: var(--step-1); line-height: 1.55; color: var(--body-on-dark);
  max-width: 58ch; margin: var(--space-m) auto 0;
}
.hero .hero-meta {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--body-on-dark-mute);
  margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; justify-content: center;
}
.hero .hero-meta span { display: inline-flex; align-items: center; gap: 1.25rem; }
.hero .hero-meta span + span::before { content: ""; width: 4px; height: 4px; background: var(--brass); display: inline-block; }

.page-head { padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem); }
.page-head h1 { font-size: var(--step-4); max-width: 18ch; }
.page-head .lede { margin-top: var(--space-m); }

/* ---------- 9. Facts strip ----------------------------------------------- */

.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: var(--space-l) var(--space-m) var(--space-l) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 620px) { .fact { border-right: 1px solid var(--rule); padding-left: var(--space-m); }
  .fact:nth-child(2n) { border-right: 0; } }
@media (min-width: 980px) { .fact:nth-child(2n) { border-right: 1px solid var(--rule); }
  .fact:last-child { border-right: 0; } }
.fact p { font-size: var(--step--1); color: var(--body-mute); margin: 0; }
.fact p.fact-figure {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: var(--space-xs);
}
.fact p.fact-label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: var(--space-s);
}

/* ---------- 10. The chain diagram ---------------------------------------- */

.chain { display: grid; gap: 0; counter-reset: link; }
@media (min-width: 900px) { .chain { grid-template-columns: repeat(4, 1fr); } }
.chain-link { position: relative; padding: var(--space-m) 0 var(--space-l); counter-increment: link; }
@media (min-width: 900px) { .chain-link { padding: var(--space-l) var(--space-m) var(--space-l) 0; } }
.chain-link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule);
}
/* The node punches through the rule, so its fill must match the band behind it. */
.chain-link::after {
  content: ""; position: absolute; top: -3.5px; left: 0; width: 8px; height: 8px;
  background: var(--bone); border: 1.5px solid var(--brass); border-radius: 50%;
}
.chain-icon { color: var(--ink-soft); margin: var(--space-m) 0 var(--space-s); }
.chain-icon svg { display: block; width: 52px; height: 52px; }
.chain-link h3 { margin-bottom: var(--space-xs); }
.chain-link p { font-size: var(--step--1); color: var(--body-mute); margin: 0; max-width: 34ch; }
.chain-num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.16em; color: var(--brass-ink); margin-bottom: var(--space-s); }

.on-dark .chain-link::before { background: var(--rule-dark); }
.on-dark .chain-link::after { background: var(--ink); }
.on-dark .chain-icon { color: var(--body-on-dark); }
.on-dark .chain-link p { color: var(--body-on-dark-mute); }
.on-dark .chain-num { color: var(--brass-lift); }

/* ---------- 11. Grids and cards ------------------------------------------ */

.grid { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid--split { gap: var(--space-xl); }
@media (min-width: 900px) { .grid--split { grid-template-columns: 1fr 1fr; align-items: start; } }

.card { background: var(--paper); border: 1px solid var(--rule); padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-xs); }
.card h3 { margin-bottom: 0; }
.card p { color: var(--body-mute); margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; transition: border-color 150ms ease, background-color 150ms ease; }
.card--link:hover { border-color: var(--brass); background: #fff; color: inherit; }
.card-more { margin-top: auto; padding-top: var(--space-m); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); }
.card--link:hover .card-more { color: var(--ink); }
.card-figure { border: 1px solid var(--rule-soft); background: #fff; padding: var(--space-m); margin-bottom: var(--space-s); color: var(--ink-soft); }
.on-dark .card-figure { background: rgba(244,241,234,0.03); border-color: var(--rule-dark); color: var(--body-on-dark); }
.card-figure svg { display: block; width: 100%; height: auto; }

/* People placeholders — unused until headshots exist; see README. */
.person-portrait {
  aspect-ratio: 4 / 5; border: 1px solid var(--rule); background: var(--bone);
  display: grid; place-items: center; margin-bottom: var(--space-s);
  color: var(--body-mute); font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase; position: relative; overflow: hidden;
}
.person-portrait::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(14,42,51,0.05) 0 8px, transparent 8px 16px);
}
.person-portrait span { position: relative; }
.person .role { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); }
.person .name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.person p { font-size: var(--step--1); }

/* ---------- 12. Ruled rows ----------------------------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-l); border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) { .row { grid-template-columns: 16rem 1fr; } }
.row dt, .row .row-key { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--ink); }
.row dd { margin: 0; color: var(--body-mute); max-width: 56ch; }
.on-dark .row dt, .on-dark .row .row-key { color: var(--bone); }
.on-dark .row dd { color: var(--body-on-dark-mute); }
.row .addr { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink); word-break: break-word; }

/* ---------- 13. Notices and flags ---------------------------------------- */

.notice {
  border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  background: var(--paper); padding: var(--space-m);
  font-size: var(--step--1); color: var(--body-mute);
}
.notice strong { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; }
.on-dark .notice { background: rgba(244,241,234,0.04); border-color: var(--rule-dark); border-left-color: var(--brass); color: var(--body-on-dark-mute); }
.on-dark .notice strong { color: var(--bone); }

.badge { display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); border: 1px solid var(--rule); padding: 0.2rem 0.5rem; }
.badge--sample { color: var(--ink); background: rgba(176, 125, 43, 0.15); border-color: rgba(176, 125, 43, 0.45); }
.tbd { background: rgba(176, 125, 43, 0.15); border-bottom: 1px dotted var(--brass-ink); padding: 0 0.2em; color: var(--ink); }
.on-dark .tbd { background: rgba(196, 145, 58, 0.22); border-bottom-color: var(--brass-lift); color: var(--bone); }

/* ---------- 14. Research archive ----------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-m); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); align-items: center; }
.filters-label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--body-mute); margin-right: var(--space-xs); }
.filter { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; padding: 0.5rem 0.95rem; border: 1px solid var(--rule); background: transparent; color: var(--body); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.post-grid { margin-top: var(--space-l); }
.post-card { gap: var(--space-xs); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-mute); }
.post-card h3 a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--brass), var(--brass)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 180ms ease; }
.post-card h3 a:hover { background-size: 100% 1px; }
.post-card .post-byline { font-family: var(--font-mono); font-size: var(--step--2); color: var(--body-mute); margin-bottom: 0; }
.post-card .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding: var(--space-m) 0 0; list-style: none; }
.post-card .tags li { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); color: var(--body-mute); border: 1px solid var(--rule); padding: 0.12rem 0.42rem; }
.empty-state { padding: var(--space-xl) 0; text-align: center; color: var(--body-mute); }

/* ---------- 15. Footer ---------------------------------------------------- */

.site-footer { background: var(--ink-deep); color: var(--body-on-dark-mute); padding-block: var(--space-xl) var(--space-m); font-size: var(--step--1); }
.footer-grid { display: grid; gap: var(--space-l); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-mark { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-s); }
.footer-mark .emblem { width: 40px; height: 40px; flex: none; }
.footer-mark p { font-family: var(--font-display); font-size: var(--step-0); color: var(--bone); margin: 0; line-height: 1.25; }
.site-footer h2 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--body-on-dark); margin-bottom: var(--space-s); }
.site-footer p { color: var(--body-on-dark-mute); max-width: 40ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2xs); }
.site-footer a { color: var(--body-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--brass-lift); text-decoration: underline; }
.footer-bottom { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--rule-dark); display: grid; gap: var(--space-s); }
.disclaimer { font-size: var(--step--2); line-height: 1.65; color: var(--body-on-dark-mute); max-width: 82ch; }
.disclaimer strong { color: var(--body-on-dark); font-weight: 500; }
.colophon { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--body-on-dark-mute); }

/* ---------- 16. Motion ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .fade-up { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
  .js .fade-up.is-visible { opacity: 1; transform: none; }
}

/* ---------- 17. Utilities ------------------------------------------------- */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack-l > * + * { margin-top: var(--space-l); }
.stack-m > * + * { margin-top: var(--space-m); }
.text-mute { color: var(--body-mute); }
.signature { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); font-variation-settings: "SOFT" 40, "WONK" 1; margin-top: var(--space-l); }
.on-dark .signature { color: var(--bone); }

@media print { .site-header, .nav-toggle, .btn { display: none; } body { background: #fff; color: #000; } }