/* Isometric variant, biophilic palette: greens + cream + one accent. Flat and grounded (no glows).
   A palette is base colours (--a --b --c = three greens, --d = the accent); every block takes the logo's shading rule:
   top = the colour, left = x0.786, right = x0.618 (derived with color-mix, not hand-picked).
   Accent options: default terracotta, ?palette=ochre, ?palette=blue.
   Light-mode options (dark mode is always the forest palette): default fresh, ?light=mint, ?light=cream. */
:root {
  /* three greens, deep -> light, and the accent */
  --a: #2f6b4f;  --a-rgb: 47, 107, 79;      /* forest */
  --b: #6d9c4b;  --b-rgb: 109, 156, 75;     /* leaf */
  --c: #86b08a;  --c-rgb: 134, 176, 138;    /* sage */
  --d: #d9773a;  --d-rgb: 217, 119, 58;     /* terracotta */

  /* the dots take two greens */
  --fringe-a: var(--b-rgb);
  --fringe-b: var(--c-rgb);

  /* tone colours actually painted (lifted a little in dark mode, below) */
  --ta: var(--a);  --tb: var(--b);  --tc: var(--c);  --td: var(--d);

  /* LIGHT MODE default ("fresh"): bright cool-white page, faintly green-tinted neutrals */
  --bg: #f5f7f6;
  --panel: rgba(255, 255, 255, 0.68);
  --ink: #12201a;
  --muted: #4e5f56;
  --faint: #86948b;
  --line: rgba(18, 32, 26, 0.12);
  --accent: #2a5a44;
  --accent-2: #4f7a5a;
  --on-accent: #ffffff;
  --swarm: 30, 52, 40;
  --swarm-2: 90, 122, 102;

  --iso-top: #ffffff;
  --iso-left: #e6ebe8;
  --iso-right: #ccd5d0;
  --iso-edge: rgba(18, 32, 26, 0.24);
  --iso-vent: rgba(18, 32, 26, 0.16);
  --iso-socket: #eef2f0;
  --iso-floor: rgba(255, 255, 255, 0.62);
  --iso-floor-edge: rgba(18, 32, 26, 0.30);
  --iso-grid: rgba(18, 32, 26, 0.09);
  --iso-ink: rgba(18, 32, 26, 0.5);
  --iso-grit: rgba(20, 30, 24, 0.22);
  --iso-glass-top: rgba(255, 255, 255, 0.6);
  --iso-glass-left: rgba(200, 212, 206, 0.5);
  --iso-glass-right: rgba(160, 176, 168, 0.5);

  --atom: #a3aea8;
  --atom-hi: #ffffff;
  --trace-ink: #12201a;
  --label: #5e6d64;
}

/* light-mode alternatives (?light=mint | cream). Each only changes light mode's neutrals: the dark block below comes later and re-declares all of them. */
[data-light="mint"] {   /* very pale green-white */
  --bg: #eff5ee;
  --panel: rgba(250, 254, 248, 0.66);
  --iso-top: #fbfdf9;  --iso-left: #e2ebdf;  --iso-right: #c9d6c5;
  --iso-floor: rgba(250, 254, 248, 0.62);
  --iso-glass-top: rgba(250, 254, 248, 0.6);  --iso-glass-left: rgba(196, 210, 192, 0.5);  --iso-glass-right: rgba(154, 172, 150, 0.5);
  --atom: #a2ae9c;
}
[data-light="cream"] {  /* the previous light mode, for reference */
  --bg: #f6f1e6;  --panel: rgba(255, 252, 244, 0.62);  --ink: #1b2a21;  --muted: #55645a;  --faint: #8a9488;  --line: rgba(27, 42, 33, 0.13);
  --on-accent: #f6f1e6;  --swarm: 34, 52, 42;
  --iso-top: #fdfaf2;  --iso-left: #ebe4d3;  --iso-right: #d3cab4;  --iso-socket: #f3eee0;  --iso-floor: rgba(255, 252, 244, 0.62);
  --iso-glass-top: rgba(255, 252, 244, 0.6);  --iso-glass-left: rgba(208, 198, 176, 0.5);  --iso-glass-right: rgba(170, 160, 138, 0.5);
  --atom: #a9a48f;
}
[data-palette="ochre"] { --d: #d9a441; --d-rgb: 217, 164, 65; }     /* ochre / marigold */
[data-palette="blue"]  { --d: #4f7fd0; --d-rgb: 79, 127, 208; }     /* dusty blue */

@media (prefers-color-scheme: dark) {
  :root {
    --ta: color-mix(in srgb, var(--a) 84%, white);
    --tb: color-mix(in srgb, var(--b) 88%, white);
    --tc: color-mix(in srgb, var(--c) 92%, white);
    --td: color-mix(in srgb, var(--d) 88%, white);

    --bg: #0d1410;
    --panel: rgba(20, 28, 22, 0.62);
    --ink: #eef0e2;
    --muted: #a3b0a0;
    --faint: #6f7d6f;
    --line: rgba(226, 232, 214, 0.13);
    --accent: #dfe9d2;
    --accent-2: #9dbb92;
    --on-accent: #0d1410;
    --swarm: 226, 232, 214;
    --swarm-2: 150, 172, 146;

    --iso-top: #222a22;
    --iso-left: #171d17;
    --iso-right: #0c100c;
    --iso-edge: rgba(232, 236, 214, 0.26);
    --iso-vent: rgba(0, 0, 0, 0.5);
    --iso-socket: #0e130e;
    --iso-floor: rgba(20, 26, 20, 0.6);
    --iso-floor-edge: rgba(232, 236, 214, 0.24);
    --iso-grid: rgba(232, 236, 214, 0.07);
    --iso-ink: rgba(232, 236, 214, 0.4);
    --iso-grit: rgba(236, 240, 226, 0.10);
    --iso-glass-top: rgba(60, 72, 58, 0.45);
    --iso-glass-left: rgba(22, 28, 22, 0.6);
    --iso-glass-right: rgba(8, 10, 8, 0.65);

    --atom: #5d6656;
    --atom-hi: #f1efe0;
    --trace-ink: #eceedb;
    --label: #8f9a88;
  }
}

body { background: var(--bg); }
.iso-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* boxes: soft edges, three flat tones */
.iso-svg polygon, .iso-svg path { stroke: var(--iso-edge); stroke-width: 0.9; stroke-linejoin: round; }
.iso-t { fill: var(--iso-top); }
.iso-l { fill: var(--iso-left); }
.iso-r { fill: var(--iso-right); }
.iso-vent { fill: var(--iso-vent); stroke: none !important; }
.iso-socket { fill: var(--iso-socket); }
.glass .iso-t { fill: var(--iso-glass-top); }
.glass .iso-l { fill: var(--iso-glass-left); }
.glass .iso-r { fill: var(--iso-glass-right); }
.slab .iso-t { fill: none; stroke: none; }

/* toned blocks: the whole prism takes the tone, shaded by the logo's rule */
.tone-a .iso-t { fill: var(--ta); }  .tone-a .iso-l { fill: color-mix(in srgb, var(--ta) 78.6%, black); }  .tone-a .iso-r { fill: color-mix(in srgb, var(--ta) 61.8%, black); }
.tone-b .iso-t { fill: var(--tb); }  .tone-b .iso-l { fill: color-mix(in srgb, var(--tb) 78.6%, black); }  .tone-b .iso-r { fill: color-mix(in srgb, var(--tb) 61.8%, black); }
.tone-c .iso-t { fill: var(--tc); }  .tone-c .iso-l { fill: color-mix(in srgb, var(--tc) 78.6%, black); }  .tone-c .iso-r { fill: color-mix(in srgb, var(--tc) 61.8%, black); }
.tone-d .iso-t { fill: var(--td); }  .tone-d .iso-l { fill: color-mix(in srgb, var(--td) 78.6%, black); }  .tone-d .iso-r { fill: color-mix(in srgb, var(--td) 61.8%, black); }
.tone-a .iso-socket, .tone-b .iso-socket, .tone-c .iso-socket, .tone-d .iso-socket { fill: rgba(0, 0, 0, 0.22); }

/* floor */
.floor-fill { fill: var(--iso-floor); stroke: none !important; }
.floor-grid { stroke: var(--iso-grid); stroke-width: 0.8; }
.floor-edge { fill: none !important; stroke: var(--iso-floor-edge) !important; stroke-width: 1 !important; }

/* atoms: flat discs with a small highlight */
/* atoms: banded shading by the logo's rule (lit cap = the colour, mid = x0.786, body = x0.618), fine rim, no highlight blob */
.atom-body { fill: color-mix(in srgb, var(--atom) 61.8%, black); stroke: var(--iso-edge); stroke-width: 0.6; }
.atom-mid  { fill: color-mix(in srgb, var(--atom) 78.6%, black); }
.atom-lit  { fill: var(--atom); }
.atom-a .atom-body { fill: color-mix(in srgb, var(--ta) 61.8%, black); }  .atom-a .atom-mid { fill: color-mix(in srgb, var(--ta) 78.6%, black); }  .atom-a .atom-lit { fill: var(--ta); }
.atom-b .atom-body { fill: color-mix(in srgb, var(--tb) 61.8%, black); }  .atom-b .atom-mid { fill: color-mix(in srgb, var(--tb) 78.6%, black); }  .atom-b .atom-lit { fill: var(--tb); }
.atom-c .atom-body { fill: color-mix(in srgb, var(--tc) 61.8%, black); }  .atom-c .atom-mid { fill: color-mix(in srgb, var(--tc) 78.6%, black); }  .atom-c .atom-lit { fill: var(--tc); }
.atom-d .atom-body { fill: color-mix(in srgb, var(--td) 61.8%, black); }  .atom-d .atom-mid { fill: color-mix(in srgb, var(--td) 78.6%, black); }  .atom-d .atom-lit { fill: var(--td); }
.bond { stroke: var(--iso-edge); stroke-width: 0.8; opacity: 0.8; }

/* surface grit and panel seams */
.grit { fill: var(--iso-grit); stroke: none; }
.grit-top { opacity: 0.55; }
.seam { stroke: var(--iso-edge); stroke-width: 0.55; opacity: 0.8; }

/* floor wear */
.tile .iso-t { fill: color-mix(in srgb, var(--iso-top) 93%, black); }
.hatch { stroke: var(--iso-grid); stroke-width: 0.8; }
.crack { fill: none; stroke: var(--iso-ink, rgba(18,32,26,0.5)); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
.crack-b { stroke-width: 0.6; }
.drip { stroke: var(--iso-grit); stroke-linecap: round; }

.shadow { fill: rgba(18, 32, 26, 0.11); stroke: none !important; }
@media (prefers-color-scheme: dark) { .shadow { fill: rgba(0, 0, 0, 0.32); } }

/* grammar parts: facade decor (flat, on the faces) */
.iso-svg .win { fill: var(--iso-vent); stroke: none; }
.iso-svg .lit-b { fill: var(--tb); } .iso-svg .lit-c { fill: var(--tc); } .iso-svg .lit-d { fill: var(--td); }
.iso-svg .spine { fill: var(--iso-vent); opacity: 0.45; stroke: none; }
.iso-svg .louver-panel { fill: var(--iso-vent); opacity: 0.35; stroke: none; }
.louver { stroke: var(--iso-edge); stroke-width: 0.5; }
.iso-svg .hatch-panel { fill: var(--iso-vent); opacity: 0.55; stroke: none; }
.iso-svg .fan { fill: var(--iso-vent); stroke: none; }
.fan-bar { stroke: var(--iso-edge); stroke-width: 0.6; }
.skylight .iso-t { fill: var(--iso-socket); }
/* grammar parts: small solids get finer edges, so they read as detail rather than outline */
.iso-svg .moss path, .iso-svg .growth path, .iso-svg .fin path, .iso-svg .rail path, .iso-svg .mast path,
.iso-svg .pipe path, .iso-svg .finial path, .iso-svg .unit path, .iso-svg .course path,
.iso-svg .rod path, .iso-svg .tube path, .iso-svg .strut path { stroke-width: 0.45; }
.groove { stroke: var(--iso-edge); stroke-width: 0.6; }

/* traces, beam, plumb lines: crisp lines */
.trace { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.trace-a { stroke: var(--ta); }  .trace-b { stroke: var(--tb); }  .trace-c { stroke: var(--tc); }  .trace-d { stroke: var(--td); }
.trace-dash { stroke: var(--trace-ink); stroke-dasharray: 3 5; opacity: 0.5; }
.trace-node { stroke: none !important; }
.node-a { fill: var(--ta); }  .node-b { fill: var(--tb); }  .node-c { fill: var(--tc); }  .node-d { fill: var(--td); }
.node-dash { fill: var(--trace-ink); }
.beam { stroke: var(--td); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; }
.beam-node { fill: var(--td); stroke: none !important; }
.plumb { stroke: var(--iso-edge); stroke-width: 1; stroke-dasharray: 2 5; }

/* labels */
.iso-label { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; fill: var(--label); }
.leader { stroke: var(--label); stroke-width: 1; opacity: 0.6; }

/* site touches: the palette shows up in small, quiet ways */
.grad { background: linear-gradient(100deg, var(--ink), var(--ta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timeline::after { background: linear-gradient(90deg, var(--ta), var(--tb), var(--td)); }
.kicker, .label { color: var(--ta); }

/* ---------- layout ---------- */
.hero.iso-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1rem; align-items: center; min-height: 92vh; }
.hero.iso-hero > * { max-width: none; }
.hero-copy { max-width: 40rem; }
.hero-art { margin-right: -1rem; }
@media (max-width: 980px) {
  .hero.iso-hero { grid-template-columns: 1fr; min-height: 0; }
  .hero.iso-hero > .hero-art { margin: 1.5rem auto 0; max-width: 560px; width: 100%; }
}

.thesis .iso-slot { margin: -0.4rem 0 1.2rem; }
.thesis .iso-slot .iso-svg { max-width: 420px; margin: 0 auto; }
.iso-strip { margin: 0 0 2.4rem; }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; align-items: end; }
.strip-grid figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.strip-grid .iso-svg { width: 100%; height: auto; max-height: 230px; }
.strip-grid figcaption { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--label); }
@media (max-width: 760px) { .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- machine illustrations (iso/machine.js) ---------- */
/* blocks: each component class sets --f; faces follow the logo rule (top = colour, left x0.786, right x0.618) */
.machine .top { fill: var(--f); stroke: var(--iso-edge); stroke-width: 0.5; }
.machine .wl { fill: color-mix(in srgb, var(--f) 78.6%, black); stroke: var(--iso-edge); stroke-width: 0.5; }
.machine .wr { fill: color-mix(in srgb, var(--f) 61.8%, black); stroke: var(--iso-edge); stroke-width: 0.5; }
.m-base { --f: var(--iso-top); } .m-base2 { --f: var(--ta); } .m-core { --f: var(--tb); } .m-hub { --f: var(--iso-top); } .m-hub3 { --f: var(--tc); }
.m-tip { --f: var(--tc); } .m-tip-d { --f: var(--td); }
.machine .sqframe { fill: none; stroke: var(--ta); stroke-width: 1.3; stroke-linejoin: round; }
.machine .sqcollar { fill: none; stroke: var(--tb); stroke-width: 1.2; stroke-linejoin: round; }
.machine .mring { fill: none; stroke: var(--ink); stroke-width: 0.9; opacity: 0.45; }
.machine .collar { fill: none; stroke: var(--ta); stroke-width: 1.4; }
.machine .emit { fill: none; stroke: var(--td); stroke-width: 0.8; opacity: 0.7; }
.machine .tube { fill: none; stroke: color-mix(in srgb, var(--ta) 80%, black); stroke-linecap: round; }
.machine .tube-hi { fill: none; stroke: color-mix(in srgb, var(--tb) 65%, white); stroke-linecap: round; opacity: 0.85; }
.machine .rod { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, var(--bg)); stroke-linecap: round; }
.machine .wire { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, var(--bg)); stroke-width: 0.8; }
.machine .signal { fill: none; stroke: var(--td); stroke-width: 1; stroke-dasharray: 3 3; }
.machine .plumb { fill: none; stroke: var(--iso-edge); stroke-width: 1; stroke-dasharray: 2 4; }
.machine .gfloor { fill: var(--iso-floor); stroke: var(--iso-floor-edge); stroke-width: 1; }
.machine .deck { fill: color-mix(in srgb, var(--tc) 14%, transparent); stroke: var(--iso-edge); stroke-width: 1; }
.machine .plate { fill: var(--iso-glass-top); stroke: var(--iso-floor-edge); stroke-width: 1; }
.node .nb { fill: color-mix(in srgb, var(--n) 61.8%, black); stroke: var(--iso-edge); stroke-width: 0.5; }
.node .nm { fill: color-mix(in srgb, var(--n) 78.6%, black); }
.node .nl { fill: var(--n); }
.n-a { --n: var(--ta); } .n-b { --n: var(--tb); } .n-c { --n: var(--tc); } .n-d { --n: var(--td); }

/* layer themes: band 0 forest (the default palette), band 1 sage and cool, band 2 terracotta with forest tips.
   Decks and plates take a tint of the band above them. */
.band-1 { --ta: color-mix(in srgb, var(--c) 85%, var(--a)); --tb: color-mix(in srgb, var(--c) 55%, white); --tc: color-mix(in srgb, var(--c) 28%, white); }
.band-2 { --ta: color-mix(in srgb, var(--d) 72%, black); --tb: var(--d); --tc: color-mix(in srgb, var(--d) 48%, white); --td: var(--b); }
.machine .deck-1, .machine .plate-1 { fill: color-mix(in srgb, var(--c) 20%, transparent); stroke: color-mix(in srgb, var(--c) 70%, var(--iso-edge)); }
.machine .deck-2, .machine .plate-2 { fill: color-mix(in srgb, var(--d) 12%, transparent); stroke: color-mix(in srgb, var(--d) 60%, var(--iso-edge)); }
.machine .plate-0 { fill: color-mix(in srgb, var(--a) 8%, var(--iso-glass-top)); }
@media (prefers-color-scheme: dark) {
  .band-1 { --ta: color-mix(in srgb, var(--c) 80%, white); --tb: color-mix(in srgb, var(--c) 90%, white); --tc: color-mix(in srgb, var(--c) 50%, white); }
  .band-2 { --ta: color-mix(in srgb, var(--d) 85%, black); --tb: color-mix(in srgb, var(--d) 92%, white); --tc: color-mix(in srgb, var(--d) 55%, white); --td: color-mix(in srgb, var(--b) 88%, white); }
}

/* ---------- approach: step cards and timeline ---------- */
/* the four step illustrations sit on glass with a soft blur, like the timeline cards below them */
.strip-grid figure { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 12px; backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
/* the progress line is one gradient fixed across the whole rail, revealed by a clip as you scroll, so the colour at
   any point never changes; dots sit in front of it, filled with the page colour until the line reaches them, then
   take the line's colour at their own position (--dot-c, set by script.js) */
.timeline::before, .timeline::after { z-index: 0; }
.timeline li { z-index: 1; }
.timeline::after { width: auto; right: 0; background: linear-gradient(90deg, var(--ta), var(--tb), var(--td)); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.timeline li::before { background: var(--bg); border-color: var(--faint); transition: background 0.2s, border-color 0.2s; }
.timeline li.passed::before { background: var(--dot-c); border-color: var(--dot-c); }
@media (max-width: 980px) {
  .timeline::after { width: 2px; right: auto; height: auto; bottom: 0; background: linear-gradient(180deg, var(--ta), var(--tb), var(--td)); clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
}