/* Hallmark · macrostructure: Workbench (cockpit) + Long-Document (system) + Playful (kid)
 * tone: technical / utilitarian · anchor hue: ember (warm ~47°)
 * theme: dark graphite HUD · ember accent · semantic teal+red for status only
 * pre-emit critique: P5 H4 E4 S4 R4 V5
 * audience: investors · incubators · co-builders · scientists · the curious
 */

/* ============================== TOKENS ============================== */
:root{
  /* paper / surface — cool graphite, near-black */
  --void:        oklch(15% 0.010 260);
  --paper:       oklch(19% 0.012 260);
  --surface:     oklch(23% 0.012 260);
  --surface-2:   oklch(27% 0.013 260);
  --line:        oklch(33% 0.012 260);
  --line-soft:   oklch(27% 0.010 260);

  /* ink */
  --ink:         oklch(96% 0.004 260);
  --mute:        oklch(74% 0.010 260);
  --faint:       oklch(56% 0.010 260);

  /* ember accent (brand warmth, threaded into the instrument grammar) */
  --ember:       oklch(72% 0.155 47);
  --ember-bright:oklch(80% 0.150 60);
  --ember-dim:   oklch(72% 0.155 47 / 0.14);
  --ember-line:  oklch(72% 0.155 47 / 0.32);

  /* semantic status — used ONLY for live/safe/hazard signals, never decoration */
  --live:        oklch(80% 0.140 168);
  --live-dim:    oklch(80% 0.140 168 / 0.14);
  --alert:       oklch(70% 0.180 27);
  --alert-dim:   oklch(70% 0.180 27 / 0.14);

  /* type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* scale — 4pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* type scale */
  --t-mono:  0.72rem;
  --t-label: 0.78rem;
  --t-body:  1.0rem;
  --t-lead:  1.22rem;
  --t-h3:    1.5rem;
  --t-h2:    clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  --t-h1:    clamp(2.5rem, 1.4rem + 5.2vw, 5.4rem);

  /* radius */
  --r-card: 10px;
  --r-pill: 9999px;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --dur:      .5s;

  --maxw: 1200px;
}

/* ============================== RESET ============================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.6;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ember); color:var(--void); }

/* film of the cockpit: faint grid behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(oklch(50% 0.01 260 / .04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(50% 0.01 260 / .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 95%);
}

/* ============================== TYPE PRIMS ============================== */
.mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.04em; }
.label{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--faint);
}
.label--ember{ color:var(--ember); }
.label--live{ color:var(--live); }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-0.02em; overflow-wrap:anywhere; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-0.01em; }
.lead{ font-size:var(--t-lead); color:var(--mute); line-height:1.5; max-width:62ch; }
strong{ color:var(--ink); font-weight:600; }
.ember{ color:var(--ember); }

/* ============================== LAYOUT ============================== */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-5); position:relative; z-index:1; }
section{ padding-block:var(--s-9); border-top:1px solid var(--line-soft); }
section:first-of-type{ border-top:0; }
section[id], [id]{ scroll-margin-top:72px; }   /* anchored sections clear the sticky system-bar */
.sec-head{ margin-bottom:var(--s-7); max-width:74ch; }
.sec-head .label{ display:block; margin-bottom:var(--s-3); }
.sec-head h2{ margin-bottom:var(--s-4); }
.sec-head p{ color:var(--mute); max-width:62ch; }

/* ============================== NAV (system-bar, not N1) ============================== */
.bar{
  position:sticky; top:0; z-index:50;
  background:oklch(15% 0.010 260 / .82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.04em;
}
.bar__in{ max-width:var(--maxw); margin-inline:auto; padding:var(--s-3) var(--s-5);
  display:flex; align-items:center; gap:var(--s-4); }
.bar__id{ color:var(--ink); font-weight:600; letter-spacing:0.02em; white-space:nowrap; }
.bar__id b{ color:var(--ember); }
.bar__status{ display:inline-flex; align-items:center; gap:var(--s-2); color:var(--live); }
.bar__dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); animation:pulse 2.4s var(--ease-out) infinite; }
.bar__nav{ margin-left:auto; display:flex; gap:var(--s-4); color:var(--faint); }
.bar__nav a{ transition:color .2s var(--ease-out); }
.bar__nav a:hover, .bar__nav a:focus-visible{ color:var(--ember); }
.bar__nav a[aria-current]{ color:var(--ink); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================== PANEL ============================== */
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  position:relative;
}
.panel--surface{ background:var(--surface); }
.panel__head{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--faint);
}
.panel__head .tick{ margin-left:auto; color:var(--ember); }
.panel__body{ padding:var(--s-5); }

/* corner ticks — instrument detail */
.ticks::before, .ticks::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
}
.ticks::before{ top:-1px; left:-1px; border-top:1px solid var(--ember-line); border-left:1px solid var(--ember-line); }
.ticks::after{ bottom:-1px; right:-1px; border-bottom:1px solid var(--ember-line); border-right:1px solid var(--ember-line); }

/* ============================== GRID HELPERS ============================== */
.grid{ display:grid; gap:var(--s-4); }
.g2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* ============================== STAT READOUT ============================== */
.readout{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.readout .cell{ background:var(--paper); padding:var(--s-4) var(--s-5); }
.readout .k{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:var(--s-2); }
.readout .v{ font-family:var(--display); font-size:1.7rem; font-weight:600; line-height:1; color:var(--ink); }
.readout .v small{ font-size:.9rem; color:var(--mute); font-family:var(--body); font-weight:400; }

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:0.06em;
  padding:var(--s-3) var(--s-5); border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink); background:var(--surface);
  cursor:pointer; transition:transform .15s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{ border-color:var(--ember-line); background:var(--surface-2); }
.btn:active{ transform:translateY(1px); }
.btn--ember{ background:var(--ember); border-color:var(--ember); color:var(--void); font-weight:600; }
.btn--ember:hover, .btn--ember:focus-visible{ background:var(--ember-bright); border-color:var(--ember-bright); }
.btn--ghost{ background:transparent; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

/* ============================== PILL / TAG ============================== */
.pill{ display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:0.08em; text-transform:uppercase; padding:var(--s-1) var(--s-3); border-radius:var(--r-pill); border:1px solid var(--line); color:var(--mute); }
.pill--ember{ color:var(--ember); border-color:var(--ember-line); background:var(--ember-dim); }
.pill--live{ color:var(--live); border-color:var(--live); background:var(--live-dim); }
.pill--alert{ color:var(--alert); border-color:var(--alert); background:var(--alert-dim); }

/* ============================== FOOTER (statement, not Ft3) ============================== */
.foot{ border-top:1px solid var(--line); padding-block:var(--s-8); }
.foot__line{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,1rem+2vw,2.4rem); line-height:1.1; max-width:24ch; margin-bottom:var(--s-6); }
.foot__meta{ display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center; font-family:var(--mono); font-size:var(--t-mono); color:var(--faint); letter-spacing:0.06em; }
.foot__meta a{ color:var(--mute); transition:color .2s var(--ease-out); }
.foot__meta a:hover{ color:var(--ember); }

/* ============================== REVEAL ============================== */
/* Hidden state applies ONLY when JS is active (html.js). No JS / JS error → content stays visible. */
.js .rise{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .rise.in, .rise{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .bar__dot{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 860px){
  .g4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .readout{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  section{ padding-block:var(--s-8); }
  .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr); }
  .bar__nav{ gap:var(--s-4); }
  .bar__id span.hide-s{ display:none; }
  .bar__nav a.opt-hide-s{ display:none; }   /* drop in-page anchors so contact stays reachable */
}