/* maitria.org (toolkit site) — design system.
   Same typographic family as the coalition site (EB Garamond voice,
   PT Sans wayfinding, #252525 frame, paper with a whisper of noise),
   applied more quietly: compact masthead, documentation density.
   Self-hosted subset fonts; no CDNs, no trackers; JavaScript only for
   the front page's one interactive figure, and self-hosted like the
   fonts. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/ebgaramond-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/ebgaramond-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/ebgaramond-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond SC";
  src: url("/fonts/ebgaramond-sc.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/ptsans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- palette (shared with the coalition site) ---------- */

:root {
  color-scheme: light dark;
  --paper: #f2f2f2;
  --ink: #222;
  --muted: #595959;
  --frame: #252525;
  --frame-ink: #e0e0e0;
  --frame-muted: #9a9a9a;
  --card: #fbfbfa;
  --rule: rgba(0, 0, 0, 0.16);
  --rule-soft: rgba(0, 0, 0, 0.09);
  --link: #17638f;
  --glow: #268bd2;
  --tk-ink: #6d5410;
  --tk-bg: #f1e5c2;
  --tk-border: #c0a041;
  --ok: #2e6b30;
  --flight: #8a5a12;
  --frontier: #5a5a5a;
  --mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #292929;
    --ink: #dcdcdc;
    --muted: #a6a6a6;
    --frame: #1c1c1c;
    --frame-ink: #e0e0e0;
    --frame-muted: #8f8f8f;
    --card: #2f2f2f;
    --rule: rgba(255, 255, 255, 0.17);
    --rule-soft: rgba(255, 255, 255, 0.09);
    --link: #7db9e8;
    --glow: #268bd2;
    --tk-ink: #e0c26a;
    --tk-bg: #363019;
    --tk-border: #8c7638;
    --ok: #8fce93;
    --flight: #e0b063;
    --frontier: #a9a9a9;
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  font-family: "EB Garamond", "PT Serif", Georgia, Times, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper) url("/assets/noise.png") top left;
  font-feature-settings: "onum" 1, "pnum" 1, "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
a:hover { text-shadow: 0 0 0.22em var(--glow); }
a:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
::selection { background: #268bd2; color: #fff; }

.sans, nav, .tk, .badge, .status, footer.site, .banner { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
.sc { font-family: "EB Garamond SC", "EB Garamond", serif; letter-spacing: 0.06em; }
code, pre { font-family: var(--mono); font-size: 0.82em; }
pre {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0.7em 0.9em;
  overflow-x: auto;
  line-height: 1.45;
}

/* ---------- masthead: quiet bar, not a hero ---------- */

header.mast {
  background: var(--frame) url("/assets/noise.png") top left;
  color: var(--frame-ink);
  padding: 1.1rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
.mast-inner {
  max-width: 60rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem;
}
.wordmark {
  font-family: "EB Garamond SC", "EB Garamond", serif;
  font-size: 1.65rem; letter-spacing: 0.09em;
  color: var(--frame-ink); text-decoration: none;
}
.wordmark:hover { text-shadow: 0 0 0.3em var(--glow); }
.mast .expansion { color: var(--frame-muted); font-size: 0.98rem; font-style: italic; }
nav.site {
  margin-left: auto; font-size: 0.92rem;
}
nav.site a { color: var(--frame-ink); text-decoration: none; margin-left: 1.1em; }
nav.site a:hover { text-shadow: 0 0 0.3em var(--glow); }
nav.site a[aria-current="page"] { border-bottom: 2px solid var(--glow); }

/* campaign banner */
.banner {
  background: var(--card);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9rem; color: var(--muted);
  text-align: center; padding: 0.45em 1em;
}

/* ---------- layout ---------- */

main { max-width: 60rem; margin: 0 auto; padding: 2.2rem 1.5rem 4rem; }
main.narrow { max-width: 46rem; }
h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 400; margin: 0 0 0.6em; }
h2 { font-size: 1.45rem; font-weight: 700; margin: 1.9em 0 0.5em; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5em 0 0.4em; }
h2 .stopnum { color: var(--muted); font-weight: 400; margin-right: 0.35em; }
p, li { max-width: 46rem; }
.lede { font-size: 1.28rem; line-height: 1.5; }
.muted { color: var(--muted); }
.callout {
  max-width: 46rem;
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--flight);
  border-radius: 5px;
  background: var(--card);
}
.callout h2 { margin: 0 0 0.35em; font-size: 1.18rem; }
.callout p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- status + artifact badges ---------- */

.badge, .status {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 3px; padding: 0.08em 0.5em;
  border: 1px solid var(--rule); color: var(--muted);
  vertical-align: 0.12em; white-space: nowrap;
}
.status.shipped, .badge.checked { color: var(--ok); border-color: var(--ok); }
.status.flight { color: var(--flight); border-color: var(--flight); }
.status.partial { color: var(--flight); border-color: var(--flight); }
.status.absent, .status.owed { color: var(--muted); border-color: var(--muted); border-style: dashed; }
.status.frontier { color: var(--frontier); border-style: dashed; }
.badge.paper { color: var(--link); border-color: var(--link); }
.badge.preview { color: var(--flight); border-color: var(--flight); }
.badge.public { color: var(--ok); border-color: var(--ok); }
.badge.described { border-style: dashed; }

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0; }
th, td {
  text-align: left; vertical-align: top;
  padding: 0.45em 0.8em;
  border-bottom: 1px solid var(--rule-soft);
}
th { font-family: "PT Sans", sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- component cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.card {
  background: var(--card);
  border: 1px solid var(--rule-soft); border-radius: 5px;
  padding: 1rem 1.1rem;
}
.card h3 { margin: 0 0 0.3em; }
.card p { font-size: 1rem; margin: 0.4em 0; }
.card .meta { font-size: 0.85rem; color: var(--muted); }

/* ---------- the layer-stack figure ---------- */

.stack { margin: 2rem auto; max-width: 34rem; font-family: "PT Sans", sans-serif; font-size: 0.95rem; }
.stack .layer {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--card);
  padding: 0.55em 1em; margin: 0.35rem 0;
  display: flex; justify-content: space-between; gap: 1em; align-items: baseline;
}
.stack .layer .tag { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; }
.stack .plane { border-style: double; border-width: 3px; }
.stack .arrow { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0.05rem 0; }

/* ---------- the measured-scaling figure ---------- */

figure.plot { margin: 2rem auto; max-width: 46rem; }
#lean-route-plot { width: 100%; height: 420px; }
figure.plot figcaption {
  font-size: 0.92rem; color: var(--muted);
  margin-top: 0.6rem; line-height: 1.45;
}
@media (max-width: 40rem) {
  #lean-route-plot { height: 320px; }
}

/* ---------- the campaign ledger ---------- */

.day { margin: 2.4rem 0; }
.day h2 {
  display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.25em;
}
.day .date { color: var(--muted); font-size: 1rem; font-weight: 400; }
.day ul { padding-left: 1.2em; }
.day li { margin: 0.45em 0; }
.check { font-size: 0.9em; color: var(--muted); }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  color: var(--muted); font-size: 0.85rem;
  padding: 1.4rem 1.5rem 2.5rem;
}
footer.site .inner { max-width: 60rem; margin: 0 auto; }
footer.site p { margin: 0.4em 0; max-width: none; }

.skip { position: absolute; left: -999em; top: 0; background: var(--frame); color: var(--frame-ink); padding: 0.5em 1em; }
.skip:focus { left: 0.5em; top: 0.5em; z-index: 10; }

@media (max-width: 40rem) {
  nav.site { margin-left: 0; }
  html { font-size: 16px; }
}