/* Studio Egregori — one stylesheet, linked by every page.
   Same-origin, so the CSP's style-src 'self' covers it. Deliberately one file:
   four inline copies of the same rules is the drift shape this site is trying
   to avoid. */

:root {
  --ink: #e8e3d9;
  --ink-dim: #9b948a;
  --ink-faint: #8e867d;   /* was #6b655d — 2.99:1 on --ground-raised, i.e. the
                             .repo line and .meta b shipped below AA. Lifted in
                             place (same hue + saturation) to 4.81:1. Found by
                             tools/check_contrast.py, 2026-08-15. */
  --ground: #14130f;
  --ground-raised: #1c1b16;
  --rule: #2e2c25;
  --accent: #c9a227;      /* old gold — the imprint mark */
  --accent-dim: #8a7220;
  --live: #7fa650;        /* shipped */
  --wip: #b17d41;         /* in progress — was #a8763e, 4.37:1 on a card */
  --measure: 68ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  padding: 0 1.5rem 5rem;
}

.wrap { max-width: 72ch; margin: 0 auto; }

/* ---- skip link ---------------------------------------------------------
   Every page puts a six-item nav between the top and the content, which a
   keyboard or screen-reader user otherwise tabs through on every single page.
   Hidden until focused, then it appears where it can actually be seen. */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ground);
  padding: 0.6rem 1rem;
  font: 600 0.9rem/1 ui-monospace, Menlo, Consolas, monospace;
  border-radius: 0 0 3px 0;
  z-index: 999;
}

.skip:focus { left: 0; }

/* Give keyboard users a visible focus ring everywhere. The browser default
   disappears against this palette. */
a:focus-visible,
.skip:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- masthead ---------------------------------------------------------- */

header.mast {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.mark {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.mark a { color: inherit; text-decoration: none; }
.mark a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-dim);
  max-width: var(--measure);
  margin: 0;
}

/* ---- nav --------------------------------------------------------------- */

nav.sections {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

nav.sections a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

nav.sections a:hover,
nav.sections a[aria-current="page"] { color: var(--accent); border-color: var(--accent-dim); }

/* ---- sections ---------------------------------------------------------- */

section { margin: 0 0 3.5rem; }

h2 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h2 .count {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  margin-left: 0.6rem;
  vertical-align: 0.25em;
}

.section-lede { color: var(--ink-dim); max-width: var(--measure); margin: 0 0 2rem; }

/* ---- project cards ----------------------------------------------------- */

.card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground-raised);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
}

.card h3 {
  margin: 0 0 0.15rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.card h3 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
.card h3 a:hover { color: var(--accent); }

.repo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
}

.card p { margin: 0 0 0.75rem; }
.card p:last-child { margin-bottom: 0; }

.meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.meta b { color: var(--ink-faint); font-weight: 400; }

/* ---- status pills ------------------------------------------------------ */

.pill {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  vertical-align: 0.15em;
  margin-left: 0.5rem;
}

.pill.live { color: var(--live); }
.pill.wip { color: var(--wip); }

/* ---- honest-state note ------------------------------------------------- */

.state {
  border-left: 2px solid var(--wip);
  padding-left: 1rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0.9rem 0 0;
}

/* ---- credential -------------------------------------------------------- */

.credential {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.credential a { color: var(--accent); }

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

footer {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  margin-top: 4rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

footer a { color: var(--ink-dim); }
footer a:hover { color: var(--accent); }

a { color: var(--accent); text-underline-offset: 2px; }

/* ---- theme picker ------------------------------------------------------
   Ordinary links to /theme/<id>, handled by functions/_middleware.js. No
   JavaScript, so this works with JS disabled and does not touch the CSP's
   script-src 'none'.

   The swatch colours are HARDCODED rather than var()-driven, and that is the
   whole point: a swatch must show the theme it offers, not the theme you are
   currently reading in. */

.themes {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
}

.themes-label {
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.themes a {
  color: var(--ink-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.1rem;
}

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

/* aria-hidden in the markup — the link text is the accessible name. */
.themes .dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}

.dot-auto    { background: linear-gradient(135deg, #14130f 50%, #f7f4ec 50%); }
.dot-dark    { background: #14130f; box-shadow: inset 0 0 0 2px #c9a227; }
.dot-light   { background: #f7f4ec; box-shadow: inset 0 0 0 2px #6f5712; }
.dot-persona { background: #0a0a0a; box-shadow: inset 0 0 0 2px #ff3b42; }
.dot-seam    { background: #f4f2ee; box-shadow: inset 0 0 0 2px #1a1a1a; }
.dot-nebula  { background: #05040a; box-shadow: inset 0 0 0 2px #a86ce8; }
.dot-court   { background: #060405; box-shadow: inset 0 0 0 2px #e84256; }
.dot-signal  { background: #0b0d0e; box-shadow: inset 0 0 0 2px #ff8a1e; }

/* ---- print / motion / narrow ------------------------------------------- */

@media (max-width: 34rem) {
  body { padding: 0 1.1rem 3rem; }
  header.mast { padding-top: 2.5rem; }
}

@media print {
  body { background: #fff; color: #000; }
  .card, .credential { border-color: #999; background: #fff; }
}