/* ==========================================================================
   Ninova Technology · base.css
   Design tokens, fonts, reset, typography and utilities shared by every page.
   Load order on every page:  base.css  →  components.css  →  pages/<page>.css
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License, see assets/fonts) ---------- */
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Design tokens ---------- */
:root{
  color-scheme:dark;

  /* Colour: deep space, bone-white ink, starlight accents */
  --void:#08060f;
  --void-rgb:8,6,15;
  --void-raised:#0b0916;
  --void-menu:#09080f;
  --ink:#f3ede4;
  --ink-soft:#d6d0da;
  --ink-dim:#938da0;
  --ink-faint:#7f798e;
  --ink-inverse:#0c0a12;
  --brand:#266db5;
  --brand-rgb:38,109,181;
  --sky-rgb:95,163,238;
  --teal:#6ff0d8;
  --teal-rgb:111,240,216;
  --aqua-rgb:130,235,220;
  --ember:#ff9a6b;
  --ember-rgb:255,154,107;
  --ember-hi:#ffb08a;
  --violet:#ed82ff;
  --lime:#b8e87b;
  --lime-rgb:184,232,123;
  --rose:#ff7d8f;
  --rose-rgb:255,130,157;
  --gold:#ffd27a;
  --ok:#b8e87b;
  --err:#ff8a9d;
  --line:rgba(255,255,255,.1);
  --line-soft:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.25);
  --focus:var(--ember);
  /* Live accent as an "r,g,b" triplet. Pages retune it per scene or topic. */
  --accent-rgb:130,235,220;

  /* Type */
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* the one expressive accent: an italic serif word inside a thin grotesk headline (see .cap__title em) */
  --font-accent:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --fs-micro:11px;
  --fs-small:13px;
  --fs-body:15px;
  --fs-lead:clamp(15px,1.3vw,17px);
  --fs-title:clamp(20px,2.4vw,26px);
  --fs-display:clamp(40px,7vw,108px);
  --track-caps:.16em;

  /* Space */
  --gutter:clamp(20px,6vw,80px);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --header-h:76px;

  /* Motion. The springs are sampled from a damped oscillator, not hand-drawn. */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.7,0,.2,1);
  --ease-spring:cubic-bezier(.3,1.3,.5,1);
  --ease-spring-soft:cubic-bezier(.25,1.05,.4,1);
  --t-fast:.2s;
  --t-med:.35s;
  --stagger:70ms;

  /* Layers */
  --z-content:2;
  --z-overlay:3;
  --z-footer:5;
  --z-header:20;
  --z-menu:60;
  --z-gate:90;
  --z-loader:100;
  --z-veil:110;
  --z-cursor:120;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --ease-spring:linear(0,0.008 1.5%,0.03 3%,0.064 4.5%,0.122 6.5%,0.231 9.5%,0.615 19%,0.721 22%,0.813 25%,0.878 27.5%,0.942 30.5%,0.991 33.5%,1.027 36.5%,1.048 39%,1.063 42%,1.073 48%,1.065 53.5%,1.023 68.5%,1.005 77.5%,0.995 90.5%,0.995 99.5%,1);
    --ease-spring-soft:linear(0,0.006 1.5%,0.023 3%,0.058 5%,0.105 7%,0.204 10.5%,0.513 20.5%,0.608 24%,0.692 27.5%,0.754 30.5%,0.816 34%,0.866 37.5%,0.906 41%,0.942 45%,0.97 49.5%,0.99 54.5%,1.003 60%,1.011 73.5%,1);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--void);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--safe-top));overflow-x:hidden}
body{min-height:100vh;min-height:100svh;background:var(--void);color:var(--ink);font-family:var(--font-sans);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
ul,ol{list-style:none}
address{font-style:normal}
a{color:inherit}
::selection{background:rgba(255,138,90,.38)}

/* ---------- Typography ---------- */
h1,h2,h3{font-weight:200;text-wrap:balance}
p{text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.eyebrow i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse-dot 2.4s infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(var(--lime-rgb),.6)}70%,100%{box-shadow:0 0 0 9px rgba(var(--lime-rgb),0)}}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;z-index:calc(var(--z-cursor) + 1);left:var(--gutter);top:calc(10px + var(--safe-top));padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--ink-inverse);font-size:14px;font-weight:400;text-decoration:none;transform:translateY(-250%);transition:transform var(--t-med) var(--ease-out)}
.skip-link:focus-visible{transform:none}

/* ---------- Shared entrance: elements marked [data-reveal] rise in once seen ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s var(--ease-spring-soft);transition-delay:calc(var(--i,0) * var(--stagger))}
.js [data-reveal].is-seen{opacity:1;transform:none}
[data-reveal="1"]{--i:1}[data-reveal="2"]{--i:2}[data-reveal="3"]{--i:3}[data-reveal="4"]{--i:4}

@keyframes rise-in{from{opacity:0;transform:translateY(16px)}}
@keyframes fade-in{from{opacity:0}}

/* ---------- Reduced motion: keep every state change, drop the travel ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
}