/* ============================================================
   shared/base.css — relic design system, dark theme + page frame
   ------------------------------------------------------------
   Imported by every site (launcher is currently self-contained
   but follows the same tokens; the blog and portfolio import
   this directly).

   Contains:
     - the reset
     - the dark theme tokens (--bg, --panel, --ink, etc.)
     - the page frame (.page)
     - the site footer (.site-foot)
     - the shared link base + ::selection

   Does NOT contain:
     - any accent colour (each site declares its own --accent)
     - the header / nav (shared/header.css)
     - any site-specific article components
     - any animation (each site owns its own)
   ============================================================ */

:root {
  /* palette — clinical dark, neutral. Shared across all three sites.
     The accent is declared per-site in main.css. */
  --bg:         #0C0E11;
  --panel:      #12151A;
  --ink:        #C9CED4;
  --ink-bright: #E9ECEF;
  --ink-faint:  #5F6772;
  --hairline:   #22262D;

  /* rhythm — shared */
  --measure: 40rem;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --leading: 1.65;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: var(--leading);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }

/* ---------- shared link base ----------
   The base colour inherits body copy. Each site's main.css
   overrides a:hover with its own --accent. Sites that need
   a different base link colour override this block. */
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--bg); }
/* NOTE: ::selection uses --accent which each site must declare.
   If a site's main.css forgets to set --accent, selection will
   be invisible. That's intentional — the selection colour is
   part of the site's accent identity. */

/* ---------- page frame ----------
   Same max-width and gutter on every page of every site.
   Vertical padding is intentionally generous — the empty
   space is part of the design. */
.page {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) var(--gutter) 4rem;
}

/* ---------- shared footer ----------
   The footer chrome (border, layout, typography) is identical
   across sites. Site-specific content (rev number, link list)
   lives in each page's HTML. */
.site-foot {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.site-foot nav { display: flex; gap: 1.5rem; }
.site-foot .rev { color: var(--ink-faint); }
.site-foot .rev b { color: var(--accent); font-weight: 400; }
/* NOTE: .site-foot .rev b uses --accent. Each site must declare
   --accent in its own main.css or this rule has no effect. */