/* ═══════════════════════════════════════════════════════════════════
   ARKHIVE — v2 skin for the v1 pages
   ───────────────────────────────────────────────────────────────────
   The v2 design (see assets/arkhive-v2.css) shipped as three standalone
   pages. The rest of the site was still v1: Syne display type, JetBrains
   Mono accents, and square corners (--ark-r*: 0).

   Rewriting ~29 pages by hand would be slow and risky. Instead this
   layer re-points the v1 design tokens at their v2 equivalents. Most
   pages already consume those tokens, so they inherit the new language
   for free; the handful that hardcode fonts are caught by the
   typography rule below.

   Load AFTER assets/arkhive.css (and styles.css) on every v1 page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground ──────────────────────────────────────────────────── */
  --ark-ink:          #08090b;
  --ark-ink-2:        #101114;
  --ark-ink-3:        #16181c;
  --ark-bg:           #08090b;
  --ark-bg-deep:      #050608;
  --ark-bg-elev:      #101114;
  --ark-bg-panel:     rgba(255, 255, 255, 0.035);
  --ark-bg-panel-2:   rgba(255, 255, 255, 0.055);

  /* ── Ink ─────────────────────────────────────────────────────── */
  --ark-paper:        #f3f4f6;
  --ark-paper-soft:   #a1a3a9;
  --ark-paper-mute:   #8e9096;
  --ark-paper-faint:  #76787e;
  --ark-text:         #f3f4f6;
  --ark-text-soft:    #a1a3a9;
  --ark-text-mute:    #8e9096;
  --ark-text-faint:   #76787e;
  /* #6b6d73 measured 3.85:1 against the #08090b ground — below the 4.5:1
     WCAG AA minimum for body text. Lifted to the smallest value on the
     same hue that clears it (4.51:1), so the step stays the quietest in
     the ramp: it is still well below --*-text-mute at 6.24:1. */

  /* ── Lines ───────────────────────────────────────────────────── */
  --ark-line:         rgba(255, 255, 255, 0.09);
  --ark-line-2:       rgba(255, 255, 255, 0.14);
  --ark-line-3:       rgba(255, 255, 255, 0.22);

  /* ── Accent. v1 spread several glow slots around; they all collapse
        onto the single v2 blue so nothing reintroduces a second hue. ── */
  --ark-accent:       #4f83f1;
  --ark-gold:         #4f83f1;
  --ark-glow:         #4f83f1;
  --ark-glow-warm:    #4f83f1;
  --ark-glow-cool:    #4f83f1;
  --ark-glow-mag:     #4f83f1;
  --ark-glow-grn:     #4f83f1;

  /* ── Type: one family, no display face, no monospace. ────────── */
  --ark-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 system-ui, 'Helvetica Neue', Arial, sans-serif;
  --ark-body:    var(--ark-display);
  --ark-mono:    var(--ark-display);

  /* ── Radii: v1 was square end to end. ────────────────────────── */
  --ark-r-sm:   8px;
  --ark-r:      12px;
  --ark-r-md:   16px;
  --ark-r-lg:   22px;
  --ark-pill:   999px;
}

/* ═══════════════════════════════════════════════════════════════════
   Typography
   ───────────────────────────────────────────────────────────────────
   Eight pages set font-family: 'Syne' / 'JetBrains Mono' literally in
   their own <style> blocks, and the shared styles.css does it in ~30
   more places, so re-pointing the tokens alone does not reach them.
   CSS cannot select "elements whose font resolves to Syne", so this
   forces the family and exempts the icon font, which genuinely needs
   its own face to render glyphs rather than letters.
   ═══════════════════════════════════════════════════════════════════ */
body:not(.v2) *:not(.material-symbols-outlined):not(.material-icons):not([class*="mapboxgl-ctrl-icon"]),
body:not(.v2) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, 'Helvetica Neue', Arial, sans-serif !important;
}
.material-symbols-outlined,
.material-icons {
  font-family: 'Material Symbols Outlined', 'Material Icons' !important;
}

/* Syne carried wide display tracking that looks wrong on Inter, which is
   already generously spaced at large sizes. */
h1, h2, h3, .lp-hero-head, .ark-h1, .ark-h2 { letter-spacing: -0.02em; }

/* v1 used uppercase + heavy tracking as a mono substitute in eyebrows and
   labels. Kept, but tightened to the v2 value. */
[class*="eyebrow"], [class*="-lbl"], [class*="label"] { letter-spacing: 0.18em; }

/* ═══════════════════════════════════════════════════════════════════
   Geometry — v1 shipped square; v2 is round. These are the shared
   component classes from arkhive.css / styles.css that read as boxes
   once the token change alone is not enough.
   ═══════════════════════════════════════════════════════════════════ */
.ark-btn,
button.ark-btn,
a.ark-btn { border-radius: var(--ark-pill) !important; }

/* Page-local button/chip classes (.adm-btn, .dsc-chip, .hd-pill ...).
   v1 named them per page, so the shared .ark-btn selector above misses
   most of them; matching on the suffix catches the rest. Chips take the
   small radius rather than the pill, matching v2's filter chips. */
[class*="-btn"], [class*="-cta"] { border-radius: var(--ark-pill) !important; }
[class*="-chip"], [class*="-tag"], [class*="-badge"] { border-radius: var(--ark-r-sm) !important; }

.ark-card, .ark-panel, .ark-tile, .ark-modal,
[class*="-card"], [class*="-panel"], [class*="-tile"] {
  border-radius: var(--ark-r-md);
}

input, select, textarea,
.ark-input, .ark-field, [class*="-input"] {
  border-radius: var(--ark-r) !important;
}

img[class*="avatar"], [class*="avatar"] img { border-radius: var(--ark-pill); }

/* Focus ring matches v2 so keyboard users get one consistent affordance. */
:focus-visible {
  outline: 2px solid var(--ark-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Ground
   ───────────────────────────────────────────────────────────────────
   Several pages set their page background to a legacy literal (#07080b,
   #0c0e11, #000) rather than to a token, in stylesheets the cascade here
   cannot reach selectively. Pinning it guarantees one ground across all
   29 pages.

   background-COLOR specifically, not the background shorthand: pages
   like /reset layer a grid pattern via background-image, and the
   shorthand would wipe it out.
   ═══════════════════════════════════════════════════════════════════ */
html, body { background-color: var(--ark-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════
   Logo compositing
   ───────────────────────────────────────────────────────────────────
   arkhive-logo.webm / .mp4 have a black background baked into the asset.
   On v1's pure-black surfaces that was invisible; against the v2 ground
   and its lighter card fills it shows as a black square around the mark
   (seen on /portal and /reset). The mark is white on black, so screen
   blending drops the black out. On a black surface this is a no-op, so
   it is safe to apply everywhere the asset appears.
   ═══════════════════════════════════════════════════════════════════ */
[class*="logo"] > video,
video[class*="logo"],
[class*="brand"] > video,
video[class*="brand"],
img[src*="arkhive-logo"] { mix-blend-mode: screen; }

/* ═══════════════════════════════════════════════════════════════════
   Display face
   ───────────────────────────────────────────────────────────────────
   The v2 landing and map moved to Instrument Sans for headings, nav and
   the wordmark. Without this the other 29 pages stayed on Inter and the
   site read as two products: a visitor going from the home page to
   /discover watched the typeface change under them.

   Specificity is the whole difficulty here. The blanket rule above is
   `body:not(.v2) *:not(.a):not(.b):not([class*=c])` — (0,3,1) and
   !important — so a plain `h1` selector loses silently. `:is()` takes
   the specificity of its heaviest argument (a class, 0,1,0), and the
   three :not()s add (0,3,0), which clears it at (0,4,1).

   Headings, navigation and buttons only. Body copy and every form
   control stay on Inter: Instrument Sans draws `l` and `I` as
   near-identical strokes, which is invisible in a headline and a real
   problem in an invite code or a handle.
   ═══════════════════════════════════════════════════════════════════ */
body:not(.v2) :is(
  h1, h2, h3,
  .ark-h1, .ark-h2, .ark-h3,
  .lp-hero-head, .lp-section-head,
  .ark-brand span, .ark-brand em,
  .ark-nav a, .ark-topbar nav a,
  .ark-btn, [class*="-btn"], [class*="-cta"],
  [class*="eyebrow"]
):not(.material-symbols-outlined):not(.material-icons):not([class*="mapboxgl-ctrl-icon"]) {
  font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Instrument Sans is a touch wider than Inter at display size, so the
   tracking the v1 headings carried now reads loose. */
body:not(.v2) :is(h1, h2, .ark-h1, .ark-h2, .lp-hero-head) {
  letter-spacing: -0.024em;
}