/* ═══════════════════════════════════════════════════════════════════════
   DEVMARK LIBRARY — base: reset, type, layout primitives, focus
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the fixed navigation. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* The page is warm paper. Leaving this at dark gave the browser's own
     furniture — scrollbars, form controls, spell-check underlines — a dark
     treatment on a cream page. */
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── The room ────────────────────────────────────────────────────────────
   A reading room is never a flat sheet of cream. Three layers give the page
   depth without anything the eye can catch moving:

     1. A fixed light bloom from the upper left, as if from a window. Fixed,
        so it stays put while content scrolls past it — the page feels lit
        rather than painted.
     2. A second, cooler pool low and right, which keeps the first from
        reading as a vignette.
     3. A paper tooth: a very fine repeating texture at under 3% opacity.
        Below the threshold where it reads as a pattern, above the one where
        the surface reads as a screen.

   The bloom drifts, extremely slowly and over a very small distance. At 48s
   per cycle and 1.5% of the viewport it is not perceptible as motion; it
   only means the page is never quite identical two minutes apart. There are
   no particles, no blobs, and nothing crosses the reading column. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(62% 48% at 18% 4%,
      rgba(255, 246, 228, .85), rgba(255, 246, 228, 0) 70%),
    radial-gradient(52% 44% at 88% 82%,
      rgba(214, 198, 172, .30), rgba(214, 198, 172, 0) 72%);
  animation: room-drift 48s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .028;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(60, 40, 20, 1) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(60, 40, 20, 1) 0 1px, transparent 1px 4px);
}

@keyframes room-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1.5%, 1%, 0); }
}

/* Motion off means off: the light stops where it is, and the texture stays.
   Nothing here is load-bearing, so removing the drift removes nothing. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

body {
  background: var(--ink-900);
  color: var(--paper-2);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* The library never scrolls sideways. Individual rails opt back in. */
  overflow-x: hidden;
  min-height: 100svh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; background: var(--ink-800); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ── Focus ───────────────────────────────────────────────────────────────
   One visible, high-contrast focus treatment used everywhere. It is drawn
   with outline (never box-shadow) so it survives overflow:hidden ancestors,
   and offset so it never sits on top of the thing it marks. */
:focus { outline: none; }
:focus-visible {
  /* NOT the signal green. It measures 1.00:1 against these creams, so a
     lime focus ring on this page is an invisible focus ring — the one piece
     of UI that must never be subtle. */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-2);
}
/* Where an element is clipped by its parent, the ring is drawn inside. */
.is-clipped :focus-visible { outline-offset: -2px; }

::selection { background: var(--signal); color: var(--signal-ink); }

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 10px 16px;
  background: var(--signal); color: var(--signal-ink);
  font-size: var(--t-small); font-weight: 700;
  border-radius: var(--r-2);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip:focus-visible { transform: translateY(0); outline-offset: 2px; }

/* ── Layout primitives ─────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--read { max-width: calc(var(--maxw-read) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--band { background: var(--ink-850); }

.rule { height: 1px; background: var(--hair); border: 0; }

/* ── Type roles ──────────────────────────────────────────────────────────
   Classes name a role in the page, not a size. */
.kicker {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-3);
  display: flex; align-items: center; gap: var(--s-3);
}
.kicker::before {
  content: ""; width: 18px; height: 1px;
  background: var(--accent); flex: none;
}
.kicker--plain::before { display: none; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--paper);
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; }

.h2 {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-h2);
  line-height: var(--lh-snug); letter-spacing: var(--ls-display);
  color: var(--paper); text-wrap: balance;
}
.h3 {
  font-family: var(--font-ui);
  font-weight: 700; font-size: var(--t-h3);
  line-height: 1.3; color: var(--paper);
}
.lead {
  font-size: var(--t-lead); line-height: 1.5;
  color: var(--paper-2); text-wrap: pretty;
  max-width: 56ch;
}
.meta {
  font-size: var(--t-small); color: var(--paper-3);
  line-height: 1.45;
}
.micro {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 700; color: var(--paper-3);
}
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.tnum { font-variant-numeric: tabular-nums; }

/* Visually hidden but available to assistive technology. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Section head ────────────────────────────────────────────────────────
   Used by every band on the homepage, so the page has one rhythm. */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4) var(--s-6);
  align-items: end;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--hair);
}
.sec-head__text { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.sec-head__aside { display: flex; align-items: center; gap: var(--s-4); }
@media (max-width: 640px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .sec-head__aside { justify-content: flex-start; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Three roles only: primary (one per view), quiet, and ghost/inline. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-line: var(--hair-2);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 11px 20px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-spring-snap);
  will-change: transform;
}
.btn:hover { --btn-line: var(--hair-3); background: rgba(242,240,234,0.05); }
.btn:active { transform: scale(0.972); }

.btn--primary {
  --btn-bg: var(--signal); --btn-fg: var(--signal-ink); --btn-line: var(--signal);
}
.btn--primary:hover { background: #E4FF6B; border-color: #E4FF6B; }

.btn--ghost { --btn-line: transparent; padding-inline: 8px; color: var(--paper-3); }
.btn--ghost:hover { color: var(--paper); background: transparent; }

/* An inline text link inside prose: underline drawn as a background so it
   can animate from the left without shifting the baseline. */
.link {
  color: var(--paper);
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--d-ui) var(--e-out);
  padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* ── Chips (filters, tags) ─────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 500;
  color: var(--paper-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-spring-snap);
}
.chip:hover { color: var(--paper); border-color: var(--hair-3); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  background: var(--paper); color: var(--ink-900); border-color: var(--paper);
  font-weight: 700;
}
.chip__count {
  font-size: var(--t-micro); font-variant-numeric: tabular-nums;
  color: var(--paper-4);
}
.chip[aria-pressed="true"] .chip__count { color: rgba(8,9,11,0.55); }

.tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--paper-3);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
a.tag:hover { color: var(--paper); border-color: var(--hair-3); }

/* ── Scrollbar (opt-in, used on rails) ─────────────────────────────────── */
.thin-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
.thin-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 99px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── No-JS ───────────────────────────────────────────────────────────────
   Everything that JS would reveal is visible by default; motion.js hides it
   only after confirming it can animate it back in. See motion.js. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }