/* IMAGINARIUM — tokens.css
   Designed by Duality: left informs, right inspires. */

/* Google Fonts now loaded via <link> in each page head (removes the render-blocking @import chain) */

:root {
  /* color */
  --ink:        #0B0B0C;
  --black:      #000000;
  --paper:      #F3EFE6;
  --white:      #FFFFFF;
  --blue:       #0B8CD4;   /* sampled from logo facets (dominant fill) */
  --blue-deep:  #0A6FB0;
  --blue-bright:#04A4DC;
  --sky:        #E6F3FC;
  --navy:       #0E2A3F;
  --hairline:   rgba(11,11,12,.14);
  --hairline-d: rgba(255,255,255,.18);

  /* pill family hues */
  --pill-rust:   #B5532A;
  --pill-green:  #2A7A4B;
  --pill-violet: #6A4FB8;

  /* type */
  --font-display: 'Archivo', 'Anton', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-marker:  'Caveat', cursive;

  /* surface rhythm (tweakable: paper | white) */
  --surface: var(--paper);

  --header-h: 170px; /* fallback: 14px gap + ~78px capsule + 8px + ~53px cert sub-pill + clearance; core.js measures and overrides at runtime */
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4, p { margin: 0; }

/* ---------- type voices ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.94;
  text-wrap: balance;
}
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 400;
}
.mono-tight { letter-spacing: 0.14em; }
.marker {
  font-family: var(--font-marker);
  font-weight: 700;
  color: var(--blue);
  text-transform: none;
  letter-spacing: 0;
}
body[data-marker="permanent"] .marker {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: 0.72em;
}
.marker.tilt   { display: inline-block; transform: rotate(-2.5deg); }
.marker.tilt-r { display: inline-block; transform: rotate(2deg); }
/* note: .kicker-on elements are rotated via .kicker-on rule below */

/* square full-stop */
.sqstop {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--blue);
  margin-left: 0.06em;
  vertical-align: baseline;
}
.sqstop.ink { background: var(--ink); }
.sqstop.white { background: var(--white); }

/* selective highlight — key nouns flip ink → blue on scroll-in */
.hl { transition: color .5s ease .15s; }
.in-view .hl, .hl.lit { color: var(--blue); }

/* ---------- surfaces ---------- */
.s-paper { background: var(--surface); color: var(--ink); }
.s-white { background: var(--white); color: var(--ink); }
.s-ink   { background: var(--ink);   color: var(--white); }
.s-black { background: var(--black); color: var(--white); }
.s-blue  { background: var(--blue);  color: var(--white); }
.s-sky   { background: var(--sky);   color: var(--ink); }

/* ---------- layout ---------- */
.wrap   { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.section { padding: clamp(40px, 4.5vw, 64px) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 88px) 0; }

/* large displays / TVs — only above 1920px so laptops, iPads and normal
   monitors are completely unaffected. Widens the content column so the page
   fills big screens gracefully instead of stranding a narrow centred column. */
@media (min-width: 1920px) {
  .wrap { max-width: 1520px; }
}
@media (min-width: 2560px) {
  .wrap { max-width: 1760px; padding: 0 clamp(56px, 4vw, 96px); }
}

/* blueprint grid backdrop */
.bp-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bp-line, rgba(255,255,255,.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-line, rgba(255,255,255,.06)) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.bp-grid-ink { --bp-line: rgba(11,11,12,.05); }

/* ---------- reveal motion ----------
   Hidden base states are gated on html.js; site.js runs WAAPI animations and
   sets final values inline, so print/export/no-JS always show content. */
.js .reveal { opacity: 0; }
.js .reveal-l, .js .reveal-r { opacity: 0; }
.clip-line { display: block; overflow: hidden; }
.clip-line > span { display: block; }
.js .clip-line > span { transform: translateY(110%); }
.js .kicker-on { opacity: 0; }
.kicker-on { display: inline-block; transform: rotate(-2.5deg); }

/* draw-on annotations (svg strokes) */
.js .draw path:not(.dash), .js .draw line:not(.dash), .js .draw circle:not(.dash), .js .draw polyline:not(.dash) {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}

@media (prefers-reduced-motion: reduce), print {
  .js .reveal, .js .kicker-on, .js .reveal-l, .js .reveal-r { opacity: 1 !important; }
  .js .clip-line > span { transform: none !important; }
  .js .draw path, .js .draw line, .js .draw circle, .js .draw polyline {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
  .js .draw .dash { stroke-dasharray: 4 6 !important; }
}