/* Shared across every page: tokens, reset, the primitives the layouts are
   built from, and the motion system. Page-specific rules stay in the page. */

/* ── tokens ───────────────────────────────────────────────────────────── */
:root{
  --paper:#FAF9F6; --ink:#0A0A0A; --accent:#3F4224;
  --mute:#6E6960; --rule:#DCD8CF; --dim:#8B8579;
  --pad:clamp(20px,4vw,64px); --wrap:1240px;
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,p,figure,dl,dd{margin:0}
a{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}

/* ── shared primitives ────────────────────────────────────────────────── */
.k-wrap{max-width:var(--wrap);margin:0 auto}
.k-rule{height:1px;background:var(--ink)}
.k-hair{height:1px;background:var(--rule)}
.k-row{display:flex;flex-wrap:wrap;gap:16px clamp(24px,5vw,64px)}
.k-tag{flex:0 0 200px;font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--accent)}
.k-body{flex:1 1 420px;min-width:0}
.k-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:60ch}
.k-h2{font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.k-it{font-family:var(--serif);font-style:italic}
.k-dark{background:var(--ink);color:var(--paper)}
section,footer{position:relative;z-index:6}

/* the ←KRINO backlink, on paper and on ink */
.k-back{display:inline-block;font-size:12px;letter-spacing:.14em;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ── footer ───────────────────────────────────────────────────────────── */
.k-foot{padding:min(14vh,120px) var(--pad) 40px}
.k-foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-bottom:14px;font-size:12px;letter-spacing:.12em}
.k-foot__rule{height:1px;background:var(--paper)}
.k-foot__meta{padding-top:14px;font-size:11px;letter-spacing:.08em;color:var(--dim)}
.k-foot__legal{padding-top:12px;max-width:70ch;font-size:11px;line-height:1.6;letter-spacing:.04em;color:var(--dim)}

/* ── motion ───────────────────────────────────────────────────────────────
   Everything below is gated on [data-motion="on"], which scripts/motion.js sets
   from the first animation frame — i.e. only once the document is really being
   rendered. Without that attribute — no JS, reduced-motion, a tab that has not
   been looked at yet — the page renders fully visible and completely static.
   Nothing here can strand content at opacity 0.

   Reveals are time-based and driven by IntersectionObserver rather than
   `animation-timeline: view()`, so every browser gets the same animation
   instead of scroll-scrubbing in some and nothing in others. */

@keyframes kdraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes krise{from{transform:translateY(106%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes kfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes kbar{from{transform:scaleY(0);background:var(--mute)}to{transform:scaleY(1);background:var(--f)}}

/* entrance — plays once on load */
[data-motion="on"] [data-anim="fade"]{animation:kfade 520ms cubic-bezier(.16,1,.3,1) both}
[data-motion="on"] [data-anim="rise"]{animation:krise 760ms cubic-bezier(.16,1,.3,1) both}
[data-motion="on"] [data-anim="draw"]{animation:kdraw 820ms cubic-bezier(.16,1,.3,1) both}
[data-motion="on"] [data-anim="meta"]{animation:kfade 900ms cubic-bezier(.16,1,.3,1) both}
[data-motion="on"] [data-anim="page"]{animation:kfade 600ms cubic-bezier(.16,1,.3,1) both}

/* on-scroll — hidden until the observer marks the element in view */
[data-motion="on"] [data-reveal]{opacity:0}
[data-motion="on"] [data-reveal].is-in{animation:kfade 900ms cubic-bezier(.16,1,.3,1) both}

[data-motion="on"] [data-line]{transform:scaleX(0)}
[data-motion="on"] [data-line].is-in{animation:kdraw 900ms cubic-bezier(.16,1,.3,1) both}

/* the figure observes its container once, then the bars sweep out on their own
   per-bar --d delay — one observer instead of seventy-two */
[data-motion="on"] [data-bars] [data-bar]{transform:scaleY(0);background:var(--mute)}
[data-motion="on"] [data-bars].is-in [data-bar]{animation:kbar 780ms cubic-bezier(.16,1,.3,1) var(--d,0ms) both}