/* ============================================================
   finish.css — the finishing layer, shared by the site's hubs.
   Added 2026-07-22 after the design audit (DESIGN_AUDIT_20260722.md).

   This file deliberately does NOT restyle pages. It adds the
   machined details the audit found missing — glass nav, one
   reveal system, focus rings, numeric and text tiers — as
   opt-in attributes and utilities, all inside the standing
   midnight/cream/gold canon. Pages keep their own inline
   systems; this rides on top.

   Contract with finish.js:
     [data-glassnav]          gets .pc-scrolled after the page
                              scrolls past a 1px sentinel.
     [data-reveal]            fades/rises in once when ~15% visible;
                              children stagger 70ms via --i.
   Both degrade to fully-visible content with no JS and under
   prefers-reduced-motion.
   ============================================================ */

:root {
  /* Text emphasis tiers on midnight (cream at ~85 / 60 / 40). */
  --ink-hi:  rgba(237, 231, 217, .92);
  --ink-mid: rgba(237, 231, 217, .62);
  --ink-low: rgba(237, 231, 217, .40);
  /* The dark elevation ladder: surfaces lighten as they rise. */
  --surface-1: rgba(237, 231, 217, .045);
  --surface-2: rgba(237, 231, 217, .075);
  --hairline:   rgba(237, 231, 217, .09);
  --hairline-2: rgba(237, 231, 217, .20);
  /* Motion tokens. One easing, three durations. Entrances only. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;   /* micro feedback */
  --dur-2: 220ms;   /* standard transitions */
  --dur-3: 520ms;   /* entrances */
  --glow-gold: rgba(201, 162, 74, .07);
}

/* ---------- focus: a visible gold ring, never a naked outline ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #E7B84E;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- optical: numerals in data are tabular ---------- */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- the glass nav ----------
   The bar starts transparent over the hero. Once the sentinel
   scrolls away it gains tint, blur, and a hairline: readable over
   anything, and visibly "arrived". Pages make the bar sticky
   themselves (their layouts differ); this handles the treatment. */
[data-glassnav] {
  transition: background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
[data-glassnav].pc-scrolled {
  background-color: rgba(15, 25, 41, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 1px 0 var(--hairline);
}

/* ---------- the reveal system ----------
   Opacity and transform only; fires once; siblings stagger via
   --i set by finish.js. Settles, never loops. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-3) var(--ease-out),
                transform var(--dur-3) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  [data-reveal].in { opacity: 1; transform: none; }
}
/* No JS at all? Never strand content invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- micro-feedback vocabulary ----------
   Two coordinated properties per hover, everywhere it is used:
   surface cards brighten their border AND lift; arrowed links
   brighten AND advance their arrow. */
.pc-lift {
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.pc-lift:hover {
  border-color: var(--hairline-2);
  transform: translateY(-2px);
}
.pc-arrow { display: inline-block; }
.pc-arrow::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur-1) var(--ease-out);
}
.pc-arrow:hover::after { transform: translateX(3px); }

/* ---------- depth for flat midnight interiors ----------
   One ambient glow high on the page plus a 2% grain so large dark
   fields stop reading as a single flat hex. Fixed-attachment-free
   (mobile Safari), zero JS, pointer-transparent. */
.pc-atmosphere { position: relative; }
.pc-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(72vh, 640px);
  pointer-events: none;
  background: radial-gradient(58% 62% at 72% 0%, var(--glow-gold), transparent 70%);
}
.pc-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- measure discipline ----------
   Running text never exceeds a comfortable measure. Headings bind to the
   text that follows them (asymmetric margins), the cheapest readability
   win in the 2026-07-22 audit. Apply to any prose block. */
.prose { max-width: 65ch; }
.prose p, .prose li { line-height: 1.65; }
.prose h2, .prose h3 { margin-top: 2.2em; margin-bottom: .55em; }