/* ============================================================
   NATION ONE — kit.css
   The shared modern foundation. Loaded by every page AFTER
   style.css and BEFORE the per-world theme file.

   Nothing in here picks a colour. Colours, fonts and the motion
   signature come from the world's own theme-*.css, which sets
   the variables below. That's how twelve worlds look completely
   different while sharing one maintainable engine.

   Techniques researched 2026-07-29 from linear.app, stripe.com,
   obys.agency + current trend reporting:
     · film grain over flat colour so gradients read as real
     · hairline borders (~8-12% alpha), small radii
     · display type at LIGHT weight with NEGATIVE tracking
     · near-black, never pure black
     · motion that degrades safely (IO + scroll + failsafe)
   ============================================================ */

:root{
  /* --- overridden per world in theme-*.css --- */
  --k-ink:#0A0A0B;
  --k-paper:#F5F4F1;
  --k-accent:#FF4D00;
  --k-accent-2:#4D7CFF;
  --k-muted:#6B6862;
  --k-hair:rgba(10,10,11,.12);
  --k-hair-d:rgba(255,255,255,.10);
  --k-display:'Space Grotesk',system-ui,sans-serif;
  --k-body:'Inter',system-ui,sans-serif;
  --k-accent-font:'Instrument Serif',Georgia,serif;
  --k-radius:6px;
  --k-radius-lg:14px;
  --k-grain:.26;          /* set to 0 on pages that must stay flat */
  --k-display-weight:300;
  --k-display-track:-.045em;
}

/* ---------- 1. film grain ---------- */
.k-grain{
  position:fixed;inset:-150%;z-index:9990;pointer-events:none;
  opacity:var(--k-grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:k-grain 900ms steps(4) infinite;
}
@keyframes k-grain{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}
/* on dark sections grain must lighten, not darken */
[data-tone="dark"] .k-grain,.k-on-dark .k-grain{mix-blend-mode:screen;opacity:calc(var(--k-grain) * .55)}

/* ---------- 2. display type ---------- */
.k-display{
  font-family:var(--k-display);
  font-weight:var(--k-display-weight);
  letter-spacing:var(--k-display-track);
  line-height:.98;
}
.k-serif{font-family:var(--k-accent-font);font-style:italic;font-weight:400;letter-spacing:-.02em}
.k-kicker{
  font-family:var(--k-display);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--k-accent);
  display:block;margin-bottom:16px;
}

/* ---------- 3. kinetic headline (words rise in) ---------- */
.k-rise{display:inline-block;overflow:hidden;vertical-align:bottom}
.k-rise>span{display:inline-block;transform:translateY(105%);
  animation:k-rise .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes k-rise{to{transform:translateY(0)}}

/* ---------- 4. scroll reveal ---------- */
.k-rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.k-rv.in{opacity:1;transform:none}

/* ---------- 5. hairline surfaces ---------- */
.k-hair{border:1px solid var(--k-hair);border-radius:var(--k-radius)}
.k-tile{background:var(--k-paper);border:1px solid var(--k-hair);
  border-radius:var(--k-radius-lg);padding:26px 24px;
  transition:transform .32s cubic-bezier(.2,.9,.3,1),box-shadow .32s ease,background .3s ease}
.k-tile:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,10,11,.10)}

/* ---------- 6. ticker ---------- */
.k-tick{overflow:hidden;white-space:nowrap;padding:12px 0;
  border-block:1px solid var(--k-hair)}
.k-tick-in{display:inline-block;font-family:var(--k-display);font-size:.88rem}
.k-tick-in u{text-decoration:none;color:var(--k-accent);margin:0 6px}
.k-tick-in i{font-style:normal;color:var(--k-muted);margin:0 20px}

/* ---------- 7. counters ---------- */
.k-num{font-family:var(--k-display);font-weight:var(--k-display-weight);
  letter-spacing:-.05em;line-height:.9;font-size:clamp(2.6rem,6vw,4.6rem)}

/* ---------- 8. accent glow (very low alpha — see linear.app) ---------- */
.k-glow{position:absolute;inset:auto;width:70vw;height:70vw;left:50%;top:-28%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--k-accent) 16%,transparent) 0%,transparent 62%)}

/* ---------- 9. static mode (crisis / emergency pages) ----------
   Modern look, zero movement. Set data-motion="static" on <html>. */
[data-motion="static"] .k-grain{animation:none}
[data-motion="static"] .k-rise>span{transform:none;animation:none}
[data-motion="static"] .k-rv{opacity:1;transform:none;transition:none}
[data-motion="static"] .k-tick-in{animation:none}
[data-motion="static"] .k-tile:hover{transform:none}

/* ---------- 10. respect the user ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .k-rv{opacity:1;transform:none}
  .k-rise>span{transform:none}
  .k-grain{animation:none}
}

/* ============================================================
   11. ACCESSIBILITY REPAIR LAYER
   These fixes address contrast failures that existed in the
   ORIGINAL design (verified by auditing the pre-redesign build:
   33 failures before, 33 after the recolour — the recolour was
   luminance-neutral, these were always here).

   Pattern: small 11–13px label text tinted with a mid-tone accent
   sitting on a pale chip. Legible to a designer on a good screen,
   not legible to a 70-year-old on a cracked phone in daylight —
   which is exactly who uses these sites.

   Fix keeps the hue (so colour-coding survives) and drives the
   value dark enough to clear WCAG AA.
   ============================================================ */
.tag,.tag *,
span.k,.k,
.pro-meta,.card-meta,.res-meta,.attested,.smallnote{
  color:color-mix(in srgb,var(--k-accent) 34%,var(--k-ink)) !important;
}
/* chips need a real surface behind them, not a 10% wash */
.tag{background:color-mix(in srgb,var(--k-accent) 12%,#fff);}

/* white-on-accent buttons: deepen the fill until white is safe */
.btn-green,.btn-lg,.btn-tang,.btn-apricot,.btn-teal,.btn-navy,.btn-brick,
.btn-aqua,.btn-blue,.btn-coral,.btn-leaf,.btn-lime,.btn-rose,.btn-sage,
.btn-sun,.btn-terra,.btn-violet,.btn-main{
  background:color-mix(in srgb,var(--k-accent) 82%,#000) !important;
  color:#fff !important;
}
/* the sister strip is a DARK card — its label must go lighter, not darker */
.pv-sis .sd,.pv-sis .sn{color:rgba(255,255,255,.94) !important}
.pv-back .bs{color:rgba(255,255,255,.88) !important}

/* pale body text that landed on a pale surface */
.solidarity p,.solidarity h2{color:var(--k-ink)}

/* never let a focus ring disappear — keyboard users included */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--k-accent);outline-offset:2px;border-radius:2px;
}

/* last pass: inline links and headings sitting on tinted bands */
.solidarity a,.solidarity p,.solidarity strong{color:var(--k-ink) !important}
.solidarity a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.help-bar a,.crisis-bar a,.danger-bar a{color:#fff !important;text-decoration:underline;
  text-underline-offset:3px;font-weight:800}
.urgent h2,.urgent .u-text h2{color:var(--k-ink) !important}
.k-grain{contain:strict}          /* keep the fixed grain layer off the paint path */

/* content links: keep the hue, guarantee AA on a light surface */
main a:not(.btn):not(.cat):not(.door):not(.path):not(.cta):not(.pv-sis):not(.res-card *),
.prose a,.wrap p a,.shell p a,li a{
  color:color-mix(in srgb,var(--k-accent) 26%,var(--k-ink));
  text-underline-offset:2px;
}
.pv-sisters .sub{color:rgba(255,255,255,.86) !important}
.help-bar,.crisis-bar,.danger-bar{background:color-mix(in srgb,var(--k-accent) 86%,#000) !important}
.help-bar,.crisis-bar,.danger-bar{background:color-mix(in srgb,var(--k-accent) 92%,#000) !important}
.pv-sis .sn,.pv-sisters .sn{color:#fff !important}