/* ==========================================================================
   aquifer.fyi — the apex.

   Its own stylesheet, not the shared style.css: that one belongs to _template/
   and changing it to suit this page would drift every future project stub.

   Deliberately not Cadora's palette. This is the parent space, so it stays
   quiet and lets the project it points at carry the colour.
   Self-contained: system fonts, no CDN, no network assets.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:  #FBFAF8;
  --surf:   #F3F1EC;
  --ink:    #17171A;
  --ink-2:  #5C5C64;
  --accent: #2F5D62;
  --on-accent: #FBFAF8;
  --rule:   #E3E1DC;

  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6rem;
  --measure: 34rem;
  --page: 52rem;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #131316;
    --surf:   #1B1B1F;
    --ink:    #ECEAE6;
    --ink-2:  #9A9AA2;
    --accent: #8FC3C8;
    --on-accent: #131316;
    --rule:   #2A2A2F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.65 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.skip { position: absolute; left: -9999px; background: var(--accent); color: var(--on-accent); padding: .7rem 1rem; z-index: 50; }
.skip:focus { left: 0; top: 0; }

.container { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.top {
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
}
.top .container { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.host { font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
.host span { color: var(--ink-2); }
.top nav { display: flex; gap: 1.1rem; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: .88rem; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── Intro ───────────────────────────────────────────────────────────────── */
.intro { padding-block: var(--s-6) var(--s-5); }
.intro h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.12; letter-spacing: -.02em;
  max-width: 20ch; margin-block-end: var(--s-2);
}
.intro p { color: var(--ink-2); max-width: var(--measure); }
.intro p + p { margin-block-start: var(--s-2); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding-block-end: var(--s-5); }
.section > h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.01em;
  border-block-start: 1px solid var(--ink);
  padding-block-start: .8rem;
  margin-block-end: var(--s-3);
}

/* ── Project entries ─────────────────────────────────────────────────────── */
.project {
  display: grid; gap: .5rem var(--s-3);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--rule);
}
.project:first-of-type { border-block-start: 0; padding-block-start: 0; }
.project h3 { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; letter-spacing: -.01em; }
.project h3 a { color: var(--ink); text-decoration: none; }
.project h3 a:hover { color: var(--accent); text-decoration: underline; }
.project p { color: var(--ink-2); max-width: 56ch; }
.project .meta {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-2); padding-block-start: .3rem;
}
.project .links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .92rem; margin-block-start: .2rem; }
@media (min-width: 40rem) {
  .project { grid-template-columns: 8rem minmax(0, 1fr); }
}

/* A status word that is a fact, not a badge. */
.state { color: var(--ink); font-weight: 500; }
.state::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-inline-end: .45rem; vertical-align: .1em;
}

/* ── Private work ────────────────────────────────────────────────────────── */
.private {
  background: var(--surf);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--s-3);
  color: var(--ink-2);
  max-width: 56ch;
}
.private strong { color: var(--ink); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s-3) var(--s-5);
  color: var(--ink-2); font-size: .88rem;
}
.foot .container { display: flex; flex-wrap: wrap; gap: .8rem var(--s-3); justify-content: space-between; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--accent); }