:root {
  --bg: #ffffff; --ink: #1a1a1a; --charcoal: #333333; --grey: #666666; --lightgrey: #999999; --hairline: #d9d9d9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --ink: #eaeaea; --charcoal: #cccccc; --grey: #aaaaaa; --lightgrey: #777777; --hairline: #333333;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --ink: #eaeaea; --charcoal: #cccccc; --grey: #aaaaaa; --lightgrey: #777777; --hairline: #333333;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Archivo", sans-serif; font-size: 17px; line-height: 1.55; }
/* Hidden until data is ready, so the page never flashes empty/unstyled
   content before JS renders it (see each page's init()). */
body:not(.ready) { visibility: hidden; }
.wrap { max-width: 720px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

/* ---------- Recursive "types" (information pages) ----------
   Static (non-animated) uses of the Recursive variable font for
   everything structural on the information pages — headings, titles,
   dates, labels — each a different point on the axes so they read as
   distinct typographic voices rather than one repeated style. Body copy
   (paragraphs, descriptions) stays Archivo, just a touch smaller — see
   .hint / .entry-desc / .project-desc below. */
.rec-display {
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.1, "wght" 750, "slnt" 0, "CRSV" 0.15;
}
.rec-title {
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.3, "wght" 620, "slnt" 0, "CRSV" 0.35;
}
.rec-label {
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.65, "wght" 560, "slnt" -3, "CRSV" 0.55;
}
.rec-mono {
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0, "wght" 480, "slnt" 0, "CRSV" 0;
  font-variant-numeric: tabular-nums;
}

h1.name {
  font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 0.15em;
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.1, "wght" 750, "slnt" 0, "CRSV" 0.15;
}
.tagline { color: var(--charcoal); margin: 0 0 0.4rem; }
.hint { color: var(--lightgrey); font-size: 0.78rem; margin: 0 0 1.2rem; max-width: 46em; }
#site-links { font-size: 0.9rem; margin-bottom: 1rem; }
h2.section {
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--charcoal); border-bottom: 1px solid var(--lightgrey); padding-bottom: 0.3rem; margin: 2rem 0 0.5rem;
  /* Same Recursive settings as .entry-title below — the slanted/casual
     .rec-label look (used on footer) read poorly combined with this
     element's underline, so section headings use the calmer title voice
     instead. */
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.3, "wght" 620, "slnt" 0, "CRSV" 0.35;
}

/* ---------- Entry: title/venue always visible ---------- */
.entry { display: grid; grid-template-columns: 1fr; padding: 1.1rem 0; }

.date {
  color: var(--grey); font-size: 0.8rem; margin: 0 0 0.2em;
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0, "wght" 480, "slnt" 0, "CRSV" 0;
  font-variant-numeric: tabular-nums;
}
.entry-title {
  font-size: 1.02rem; margin: 0;
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.3, "wght" 620, "slnt" 0, "CRSV" 0.35;
}
.entry-venue {
  color: var(--grey); font-size: 0.88rem; margin: 0.15em 0 0.4em;
  font-family: "Recursive", "Archivo", sans-serif;
  /* Slight negative slant via the font's own axis stands in for the old
     font-style: italic — Recursive's slnt axis reads better than a
     browser-synthesized italic on top of a variable font. */
  font-variation-settings: "CASL" 0.2, "wght" 450, "slnt" -4, "CRSV" 0.25;
}
.entry-venue + .entry-collaborators { margin-top: -0.2em; }
/* Location sits alongside venue in the same line (see .venue-venue /
   .venue-location spans in js/projects.js and js/dates.js) — lighter
   weight and colour so venue reads as the primary fact, location as a
   secondary one. */
.venue-location { color: var(--lightgrey); font-variation-settings: "CASL" 0.2, "wght" 340, "slnt" -4, "CRSV" 0.2; }
a.inline-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a.inline-link:hover { color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Scramble text (js/scramble.js) ----------
   Recursive for the font-variation wobble; the character substitution
   itself is plain text content swapped per-frame, no extra markup needed. */
.scramble-char {
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" var(--r-casl, 0.3), "wght" var(--r-wght, 650), "slnt" var(--r-slnt, 0), "CRSV" var(--r-crsv, 0.4);
  white-space: pre;
}

/* ---------- Collapsed extra text/links only ---------- */
details.more { margin-top: 0.4em; }
details.more > summary {
  cursor: pointer; list-style: none; font-size: 0.85rem; color: var(--grey);
  display: inline-flex; align-items: center; gap: 0.3em;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary .chevron { transition: transform 0.15s ease-out; font-size: 0.75rem; }
details[open].more > summary .chevron { transform: rotate(90deg); }
.more-body { padding-top: 0.5em; }
.entry-desc { margin: 0 0 0.5em; font-size: 0.88rem; }
.entry-links { display: flex; gap: 1em; font-size: 0.86rem; margin-top: 0.4em; }
.entry-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

footer {
  margin-top: 3rem; color: var(--lightgrey); font-size: 0.78rem;
  font-family: "Recursive", "Archivo", sans-serif;
  font-variation-settings: "CASL" 0.65, "wght" 560, "slnt" -3, "CRSV" 0.55;
}