/* ============================================================
   base.css  —  shared styles, built entirely on tokens.css
   Used by every inner page (resume / roots / now) and the
   shared header/footer. The landing (index.html) inlines its
   own copy of these tokens so it loads with zero requests.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- typography ----------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-3); max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-flash); }

/* mono labels / eyebrows */
.eyebrow {
  font-family: var(--font-meta);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--meta);
  margin: 0 0 var(--sp-2);
}
.mono { font-family: var(--font-meta); }

/* --- layout primitives ---------------------------------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-7) 0; }
.section + .section { border-top: var(--hair) solid var(--hairline); }
.hairline { height: var(--hair); background: var(--hairline); border: 0; margin: var(--sp-5) 0; }

/* the inherited spectrum, used as a deliberate moment (not decoration) */
.spectrum-rule {
  display: flex; gap: 6px; height: 8px; margin: var(--sp-4) 0;
}
.spectrum-rule span { flex: 1; border-radius: 99px; }
.spectrum-rule .s1 { background: var(--limelight); }
.spectrum-rule .s2 { background: var(--peacock); }
.spectrum-rule .s3 { background: var(--imperial); }
.spectrum-rule .s4 { background: var(--magenta); }
.spectrum-rule .s5 { background: var(--garnet); }

/* --- header / nav --------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--hair) solid var(--hairline);
}
.site-header .bar {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
}
.brand {
  font-family: var(--font-wordmark);
  font-size: var(--step-2); color: var(--ink);
  text-decoration: none; line-height: 1;
}
.site-nav { display: flex; gap: var(--sp-4); align-items: baseline; }
.site-nav a {
  font-family: var(--font-meta); font-size: var(--step--1);
  letter-spacing: 0.04em; color: var(--ink-muted);
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--accent);
}

/* --- footer --------------------------------------------- */
.site-footer {
  border-top: var(--hair) solid var(--hairline);
  margin-top: var(--sp-7);
}
.site-footer .bar {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  font-family: var(--font-meta); font-size: var(--step--1);
  color: var(--meta);
}
/* /M signature mark — IRC slash-command roots, no period */
.sig { color: var(--ink); }
.sig b { color: var(--accent); font-weight: 400; }

/* the doorway in the wall — discreet passage to the workshop */
.doorway {
  font-family: var(--font-meta); font-size: var(--step--1);
  color: var(--ink-muted); text-decoration: none;
  letter-spacing: 0.02em;
}
.doorway:hover { color: var(--accent-flash); }
.doorway .arrow { transition: transform var(--dur) var(--ease); display: inline-block; }
.doorway:hover .arrow { transform: translateX(4px); }

/* --- the wyrmeling: the one thing that carries colour ---- */
.wyrmeling { display: inline-block; line-height: 0; }

/* --- accessibility floor -------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: -999px;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition: none !important; }
}

/* --- responsive ----------------------------------------- */
@media (max-width: 640px) {
  .site-header .bar { flex-wrap: wrap; gap: var(--sp-2); }
  .site-nav { gap: var(--sp-3); }
  .section { padding: var(--sp-6) 0; }
}