/* Evandor website v6 (light). Printed technical annual-report art direction:
   strong photography, one register of serif display type, near-monochrome.
   Ground: warm paper. Serif (Georgia stack) carries all display AND body text.
   IBM Plex Sans is retained only for wayfinding (nav, small UI). IBM Plex Mono
   survives ONLY as sparse factual marginalia — measured values, units, dates,
   company number. Sections are numbered like a printed document (ink serif
   numerals), never coloured or dashed markers. Purple appears only on text
   links. No cards, no rounded corners, no shadows, no gradient panels, no icon
   rows — ruled lines, photographs and captions only. */

@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  color-scheme:light dark;
  --paper:#F4F3EF;        /* warm paper ground */
  --paper-2:#ECEAE2;      /* recessed panel, slightly deeper warm */
  --ink:#1A1B20;          /* near-ink, primary text and headlines */
  --ink-2:#3B3C43;        /* secondary text */
  --muted:#6C6D74;        /* captions, meta */
  --muted-2:#8C8D93;      /* faintest labels */
  --line:#D8D6CF;         /* hairline rule */
  --line-2:#C3C1B7;       /* stronger rule */
  --link:#6A28D6;         /* purple: text links only */
  --link-hi:#4E17A8;
  --media-bg:#FBFAF7;     /* figure frame interior, a shade above paper */
  --topbar-bg:rgba(244,243,239,0.92);
  --maxw:1480px;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* The footer is always dark; only its ground shifts, so it stays
     distinct from a dark page body. Its text colours are fixed below. */
  --foot-bg:#1A1B20;
  --panel-bg:#FFFFFF;     /* reconstruction output panel, reads as a lit screen */
  --tag-ink:#5E5F66;      /* small mono chip labels, 5.3:1 on --paper-2 */
}

/* Dark palette, following the reader's system preference. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1A1B20;       /* deep ink ground */
    --paper-2:#24252B;     /* recessed panel, slightly lighter charcoal */
    --ink:#F4F3EF;         /* warm paper for text */
    --ink-2:#B7B8BF;       /* secondary text */
    --muted:#8C8D93;       /* captions */
    --muted-2:#6C6D74;     /* faintest labels */
    --line:#3B3C43;        /* dark hairline rule */
    --line-2:#4B4C52;      /* stronger dark rule */
    --link:#B486F7;        /* lighter purple, clears 4.5:1 on both dark grounds */
    --link-hi:#C3B2FF;
    --media-bg:#14151A;    /* slightly darker interior */
    --topbar-bg:rgba(26,27,32,0.92);
    --foot-bg:#101114;     /* deeper than the body, so the footer still reads as a base */
    --panel-bg:#24252B;    /* lit panel, lighter than its surround, without glare */
    --tag-ink:#9A9BA1;     /* 5.5:1 on the dark --paper-2 chip */
    color-scheme:dark;
  }
}



*{box-sizing:border-box;}
html{
  background:var(--paper);
  -webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden;scroll-padding-top:78px;
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;max-width:100%;overflow-x:hidden;
}
h1,h2,h3,h4,p,li{overflow-wrap:break-word;word-break:normal;}
img{max-width:100%;display:block;}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hi);text-decoration:underline;text-underline-offset:3px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:2px;}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.005em;color:var(--ink);margin:0;line-height:1.06;}
h1{font-feature-settings:"onum" 1,"pnum" 1;}
p{margin:0;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 44px;}
.container--narrow{max-width:780px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);font-weight:600;padding:10px 16px;z-index:200;font-family:var(--sans);}
.skip-link:focus{left:12px;top:12px;}

/* ---------- Sparse mono marginalia (measured values, dates, company no.) ---------- */
.mono{font-family:var(--mono);}
.metric{font-family:var(--mono);color:var(--ink);font-weight:400;font-size:0.9em;letter-spacing:-0.01em;}

/* ---------- Section marker: ink serif numeral + small italic label ---------- */
.snum{font-family:var(--serif);color:var(--muted);margin:0 0 22px;font-size:16px;}
.snum b{font-weight:400;color:var(--ink);font-feature-settings:"onum" 1;letter-spacing:0.03em;}
.snum span{margin-left:12px;}

/* Figure captions — italic serif, journal style */
.fig,.figcap{font-family:var(--serif);font-size:15px;color:var(--muted);margin-top:14px;line-height:1.5;max-width:74ch;}
.fig b,.figcap b{font-style:normal;font-weight:400;color:var(--ink);}

/* ---------- Top nav (sans wayfinding) ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:100;transition:transform 0.28s ease;will-change:transform;background:var(--topbar-bg);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line);}

body{padding-top:66px;}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:center;}
.brand img{height:23px;width:auto;}
/* The wordmark is ink on paper, so a light variant is swapped in for dark. */
.brand__dark{display:none;}
@media (prefers-color-scheme: dark){
  .brand__light{display:none;}
  .brand__dark{display:block;}
}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--sans);font-size:14px;letter-spacing:0.02em;padding:7px 12px;cursor:pointer;}
.main-nav{display:flex;align-items:center;gap:4px;}
.main-nav a{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--ink-2);
  padding:8px 14px;position:relative;}
.main-nav a:hover{color:var(--ink);text-decoration:none;}
.main-nav a.is-active{color:var(--ink);}
.main-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;}
.main-nav a:hover::after,.main-nav a.is-active::after{transform:scaleX(1);}

/* ---------- Section rhythm ---------- */
.s{padding:78px 0;}
.s--compact{padding:74px 0;}
.s--tight{padding:60px 0;}
.s--panel{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.rule-top{border-top:1px solid var(--line);}

/* ---------- Hero (headline + one paragraph, no tiered stack) ---------- */
.hero{padding:100px 0 48px;}
.hero__inner{max-width:940px;}
.eyebrow{font-family:var(--serif);font-size:16.5px;color:var(--ink-2);letter-spacing:0.02em;margin:0 0 22px;display:flex;align-items:center;gap:14px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line-2);flex:none;}
.hero h1{font-size:clamp(37px,5.2vw,66px);line-height:1.03;letter-spacing:-0.012em;}
.hero__lead{margin-top:32px;font-size:20px;line-height:1.55;color:var(--ink);max-width:74ch;}
.hero__lead .named{}
.hero__lead .metric{white-space:nowrap;}

/* ---------- Full-bleed photographic plate (edge-to-edge, ruled, captioned) ---------- */
.plate{margin:0;}
.plate__img{width:100%;height:auto;display:block;max-height:78vh;object-fit:cover;
  border:1px solid var(--line);}
.plate__cap{padding-top:14px;}

/* ---------- Hardware plates row (ruled contact sheet) ---------- */
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:12px;}
.plates figure{margin:0;display:flex;flex-direction:column;}
.plates .frame{border:1px solid var(--line);background:var(--media-bg);padding:16px;
  display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;}
.plates .frame img{max-width:100%;max-height:100%;width:auto;height:auto;}
.plates figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.45;}

/* ---------- Combustion time-series figure (native labels on paper) ---------- */
.tsfig{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;margin:0;}
.tsfig__map{grid-column:1;grid-row:1;}
.tsfig__map img{width:100%;height:auto;display:block;border:1px solid var(--line);}
.tsfig__yside{grid-column:2;grid-row:1;display:flex;flex-direction:column;width:98px;}
.tsfig__yside span{display:flex;align-items:center;font-size:13.5px;color:var(--muted);line-height:1.2;padding-left:2px;}
.tsfig__yside span + span{border-top:1px solid var(--line);}
.tsfig__phases{grid-column:1;grid-row:2;display:flex;margin-top:9px;}
.tsfig__phases span{text-align:center;font-size:13.5px;color:var(--muted);padding:0 4px;}
.tsfig__phases span + span{border-left:1px solid var(--line);}
.tsfig__time{grid-column:1;grid-row:3;text-align:center;font-size:15px;color:var(--ink);letter-spacing:0.12em;text-transform:uppercase;margin-top:12px;}
@media (max-width:600px){
  .tsfig{column-gap:9px;}
  .tsfig__yside{width:62px;}
  .tsfig__yside span{font-size:10.5px;}
  .tsfig__phases span{font-size:10px;padding:0 2px;}
  .tsfig__time{font-size:11px;}
}

/* ---------- Heading reveal on load (single block rise, no per-character effect) ---------- */
@media (prefers-reduced-motion:no-preference){
  .has-js [data-reveal-head]{visibility:hidden;}
  .has-js [data-reveal-head].reveal-ready{visibility:visible;opacity:0;transform:translateY(14px);}
  .has-js [data-reveal-head].reveal-ready.reveal-in{opacity:1;transform:none;transition:opacity 0.7s ease,transform 0.75s cubic-bezier(0.19,0.75,0.22,1);}
  .word{display:inline-block;white-space:nowrap;}
  .ch{display:inline;}
  .has-js [data-reveal-fade]{opacity:0;transform:translateY(14px);}
  .has-js [data-reveal-fade].fade-in{opacity:1;transform:translateY(0);transition:opacity 0.85s ease,transform 0.85s cubic-bezier(0.19,0.75,0.22,1);}
  /* Heritage timeline: rule draws across, nodes step in left to right */
  .has-js .reveal-tl .tl__track::before{transform:scaleX(0);transform-origin:left center;}
  .has-js .reveal-tl.sr-in .tl__track::before{transform:scaleX(1);transition:transform 1.1s cubic-bezier(0.5,0.12,0.15,1) 0.1s;}
  .has-js .reveal-tl .tl__item{opacity:0;transform:translateY(10px);}
  .has-js .reveal-tl.sr-in .tl__item{opacity:1;transform:none;transition:opacity 0.55s ease,transform 0.55s cubic-bezier(0.19,0.75,0.22,1);}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(1){transition-delay:0.15s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(2){transition-delay:0.35s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(3){transition-delay:0.55s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(4){transition-delay:0.75s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(5){transition-delay:0.95s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(6){transition-delay:1.15s;}
  .has-js .reveal-tl.sr-in .tl__item:nth-child(7){transition-delay:1.35s;}
  /* Schematic: strokes draw themselves on */
  .has-js .reveal-draw [data-len]{stroke-dashoffset:var(--len);}
  .has-js .reveal-draw.sr-in [data-len]{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(0.5,0.12,0.15,1);}
}

/* ---------- Method comparison table (ruled, journal style) ---------- */
.cmp{border-top:1px solid var(--line-2);margin-top:28px;}
.cmp__row{display:grid;grid-template-columns:280px 210px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.cmp__m{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.2;}
.cmp__q{font-family:var(--sans);font-size:13.5px;color:var(--muted);letter-spacing:0.01em;}
.cmp__row p{font-size:17px;color:var(--ink-2);}
.cmp__row--dim .cmp__m{color:var(--muted);}
.cmp__row--dim p{color:var(--muted);}
@media (max-width:860px){
  .cmp__row{grid-template-columns:1fr;gap:6px;}
}

/* ---------- Full-bleed figure band (real photograph) ---------- */
.bleed{background:var(--paper);}
.bleed .container{padding-top:0;padding-bottom:0;}
.bleed img{width:100%;height:auto;display:block;margin:0 auto;max-width:1400px;border:1px solid var(--line);}
.bleed__cap .container{padding-top:14px;padding-bottom:0;}

/* ---------- Framed figure (renders / diagrams on the paper) ---------- */
.figure{margin-top:0;}
.figure figure{margin:0;}
.figure .frame{border:1px solid var(--line);background:var(--media-bg);padding:22px;}
.figure .frame img{width:100%;height:auto;display:block;}

/* ---------- Editorial asymmetric two-column ---------- */
.split{display:grid;grid-template-columns:minmax(0,0.74fr) minmax(0,1.26fr);gap:72px;align-items:start;}
.split__aside h2{font-size:34px;line-height:1.08;}
.split__aside .note{margin-top:20px;font-size:16px;line-height:1.55;color:var(--muted);}
.flow > * + *{margin-top:20px;}
.flow p{color:var(--ink-2);font-size:18px;}
.flow .lead-p{font-size:22px;color:var(--ink);line-height:1.42;}
.more{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--link);}
.more:hover{color:var(--link-hi);}
/* In the aside/flow split layout, give the standalone call-to-action link
   clear separation from the paragraph above so it reads as an action. */
.flow .more{margin-top:28px;}

/* ---------- Micro-interactions (hover): arrow nudge, photo zoom, row brighten ---------- */
.more,.pub__link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.cmp__row--dim:hover .cmp__m{color:var(--ink);}
.cmp__row--dim:hover p{color:var(--ink-2);}
@media (prefers-reduced-motion:no-preference){
  .main-nav a::after{transition:transform 0.28s cubic-bezier(0.19,0.75,0.22,1);}
  .plates .frame img,.member__media img{transition:transform 0.6s cubic-bezier(0.19,0.75,0.22,1);}
  .plates .frame:hover img,.member__media:hover img{transform:scale(1.035);}
  .cmp__row--dim .cmp__m,.cmp__row--dim p{transition:color 0.3s ease;}
}

.wide-measure{max-width:68ch;}
.wide-measure p{color:var(--ink-2);font-size:19px;}
.wide-measure p + p{margin-top:22px;}

/* ---------- Ruled list (applications / architecture / comparison) — spec sheet --- */
.hlist{margin-top:10px;border-top:1px solid var(--line-2);}
.hrow{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,2.08fr);gap:52px;
  padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.hrow h3{font-size:24px;font-weight:400;color:var(--ink);letter-spacing:0;line-height:1.14;}
.hrow h3 .q{display:block;margin-top:8px;font-size:16px;font-weight:400;color:var(--muted);}
.hrow p{color:var(--ink-2);font-size:17px;}

/* ---------- Numbered process (Technology) ---------- */
.steps{margin-top:10px;border-top:1px solid var(--line-2);}
.step{display:grid;grid-template-columns:58px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start;}
.step__n{font-size:27px;color:var(--muted);font-feature-settings:"onum" 1;line-height:1;padding-top:2px;}
.step__t{font-size:24px;font-weight:400;color:var(--ink);}
.step p{margin-top:8px;color:var(--ink-2);font-size:17px;}
.how{display:grid;grid-template-columns:1.12fr 0.88fr;gap:64px;align-items:center;}
.how__media{background:var(--media-bg);border:1px solid var(--line);padding:30px;display:flex;align-items:center;justify-content:center;}
.how__media img{max-width:86%;height:auto;}
.how__media svg{width:100%;height:auto;max-width:420px;}
.how__media figure{margin:0;width:100%;}
.how__media figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:16px;}

/* ---------- Merged sensing plate (Technology): diagram + tied 01/02/03 legend ---------- */
.sensing{margin:0;background:var(--media-bg);border:1px solid var(--line);padding:34px 34px 30px;}
.sensing #ectRing{display:block;width:100%;height:auto;max-width:640px;margin:0 auto;}
/* Reconstruction output panel, themed rather than a fixed white plate */
.recon-panel{fill:var(--panel-bg);stroke:var(--line-2);}

/* The inline diagram SVGs carry palette hexes as presentation attributes, which
   would not invert. CSS rules outrank presentation attributes, so each hex is
   remapped here to its palette variable and follows the theme. Keep these in
   step with the :root values above if a palette colour ever changes. */
[stroke="#1A1B20"]{stroke:var(--ink);}
[stroke="#3B3C43"]{stroke:var(--ink-2);}
[stroke="#C3C1B7"]{stroke:var(--line-2);}
[stroke="#8C8D93"]{stroke:var(--muted-2);}
[stroke="#6C6D74"]{stroke:var(--muted);}
[fill="#6C6D74"]{fill:var(--muted);}
[fill="#FBFAF7"]{fill:var(--media-bg);}
.sensing__legend{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:24px;padding-top:26px;border-top:1px solid var(--line);}
.sensing__n{font-size:22px;color:var(--muted);font-feature-settings:"onum" 1;line-height:1;}
.sensing__t{display:block;font-size:20px;color:var(--ink);margin-top:6px;}
.sensing__stage p{margin-top:9px;color:var(--ink-2);font-size:16px;line-height:1.5;}

/* ---------- Spec / figures block (printed spec sheet, mono figures) ---------- */
.spec{margin-top:10px;border-top:1px solid var(--line-2);}
.spec__row{display:grid;grid-template-columns:150px 1fr minmax(0,0.9fr);gap:36px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.spec__fig{font-family:var(--mono);font-size:23px;color:var(--ink);letter-spacing:-0.02em;}
.spec__desc{color:var(--ink-2);font-size:16.5px;}
.spec__src{font-size:15px;color:var(--muted);line-height:1.5;}
.caveat{margin-top:26px;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:90ch;}

/* ---------- Paired figure media ---------- */
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:10px;}
.figpair figure{margin:0;}
.figpair .frame{background:var(--media-bg);border:1px solid var(--line);padding:14px;}
.figpair .frame img{width:100%;height:auto;}

/* ---------- Team roster ---------- */
.roster{margin-top:10px;border-top:1px solid var(--line-2);}
.member{display:grid;grid-template-columns:210px 1fr;gap:48px;padding:46px 0;border-bottom:1px solid var(--line);align-items:start;}
.member__media{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;border:1px solid var(--line-2);padding:5px;}
.member__media img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.04);}
.member__body h3{font-size:30px;color:var(--ink);}
.member__role{font-size:17px;font-weight:400;color:var(--muted);margin-top:8px;}
.member__body p{color:var(--ink-2);font-size:17px;margin-top:20px;max-width:60ch;}
.member__body .more{margin-top:18px;}

/* ---------- Publications ---------- */
.pubs{margin-top:10px;border-top:1px solid var(--line-2);}
.pub{display:grid;grid-template-columns:1fr auto;gap:36px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.pub__title{font-size:23px;color:var(--ink);line-height:1.2;}
.pub__meta{font-size:16px;color:var(--muted);margin-top:10px;line-height:1.5;}
.pub__link{font-family:var(--sans);font-size:15px;letter-spacing:0;white-space:nowrap;color:var(--link);}

/* ---------- Contact strip ---------- */
.contact{border-top:1px solid var(--line);}
.contact h2{font-size:clamp(30px,3.6vw,44px);}
.contact p{margin-top:18px;color:var(--ink-2);font-size:19px;max-width:58ch;}
.contact__mail{display:inline-block;margin-top:28px;font-family:var(--mono);font-size:17px;letter-spacing:0.01em;color:var(--link);}

/* ---------- Page head (interior) ---------- */
.phead{padding:100px 0 8px;}
.phead h1{font-size:clamp(35px,4.8vw,58px);line-height:1.03;}
.phead .lead{margin-top:28px;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:66ch;}

/* ---------- Footer (ink-dark band) ---------- */
/* The footer is dark in both themes, so its text colours are fixed rather than
   drawn from the palette variables, which invert. */
.foot{border-top:1px solid var(--line);background:var(--foot-bg);color:#B7B8BF;padding:66px 0 36px;}
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;}
.foot__brand img{height:22px;width:auto;margin-bottom:18px;}
.foot__brand p{color:#8C8D93;font-size:14.5px;max-width:34ch;line-height:1.55;font-family:var(--sans);}
.foot__col h4{font-size:16px;letter-spacing:0;color:#DAD9D5;margin:0 0 14px;font-weight:400;}
.foot__col ul{list-style:none;margin:0;padding:0;}
.foot__col li + li{margin-top:8px;}
.foot__col a,.foot__col span{color:#B7B8BF;font-size:14.5px;font-family:var(--sans);letter-spacing:0;}
.foot__col a:hover{color:#fff;text-decoration:none;}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.14);color:#7C7D84;font-family:var(--mono);font-size:11.5px;letter-spacing:0.02em;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .split,.how,.figpair{grid-template-columns:1fr;gap:38px;}
  .plates{grid-template-columns:1fr;gap:32px;}
  .hrow{grid-template-columns:1fr;gap:10px;padding:28px 0;}
  .spec__row{grid-template-columns:1fr;gap:8px;padding:24px 0;}
  .member{grid-template-columns:1fr;gap:24px;}
  .member__media{max-width:250px;}
  .pub{grid-template-columns:1fr;gap:14px;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .foot__brand{grid-column:1 / -1;}
  .s{padding:76px 0;}
  .how__media img{max-width:70%;}
}
@media (max-width:600px){
  body{font-size:17px;}
  .container{padding:0 24px;}
  .cover__inner{padding-left:24px;padding-right:24px;}
  .s{padding:58px 0;}
  .standfirst{padding-top:48px;}
  .standfirst p{font-size:18.5px;}
  .nav-toggle{display:inline-block;}
  .main-nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 16px;}
  .main-nav.is-open{display:flex;}
  .main-nav a{padding:13px 4px;border-bottom:1px solid var(--line);}
  .main-nav a.is-active::after{display:none;}
  .main-nav a.is-active{text-decoration:underline;text-underline-offset:4px;}
  .foot__grid{grid-template-columns:1fr;}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:10px;}
  .spec__row,.step{grid-template-columns:1fr;}
  .step{gap:6px;}
  .step__n{padding-top:0;}
  .sensing{padding:24px 22px 20px;}
  .sensing__legend{grid-template-columns:1fr;gap:0;margin-top:20px;padding-top:8px;}
  .sensing__stage{padding:20px 0;border-top:1px solid var(--line);}
  .sensing__stage:first-child{border-top:0;padding-top:6px;}
  .arch__band{grid-template-columns:78px 1fr;column-gap:16px;padding:15px 0;}
  .arch__band::before{left:39px;}
  .arch > .arch__band::after{left:39px;}
  .arch__glyph{padding:5px 6px;}
  .arch__glyph--tank{width:58px;}
  .arch__glyph--feed{width:76px;}
  .arch__glyph--chamber{width:72px;}
  .arch__glyph--core{width:66px;}
  .arch__glyph--data{width:42px;}
  .arch__h{font-size:18px;}
  .arch__body p{font-size:15px;}
}

/* ---------- Heritage timeline (light, monochrome) ---------- */
.tl{margin-top:60px;}
.tl__track{display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative;}
.tl__track::before{content:"";position:absolute;top:5px;left:7.1%;right:7.1%;height:1px;background:var(--line-2);}
.tl__item{position:relative;text-align:center;padding:0 12px;}
.tl__item::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--ink);margin:0 auto 20px;position:relative;top:1px;z-index:1;}
.tl__item--now::before{background:var(--paper);border:2px solid var(--ink);box-sizing:border-box;width:12px;height:12px;top:-0.5px;margin-bottom:17.5px;}
.tl__year{font-family:var(--mono);font-size:12px;color:var(--ink);letter-spacing:0.04em;margin-bottom:8px;}
.tl__name{font-size:14.5px;color:var(--ink-2);line-height:1.4;}
.tl__val{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:6px;letter-spacing:0.01em;}
@media (max-width:760px){
  .tl__track{grid-template-columns:1fr;gap:28px;}
  .tl__track::before{left:5px;right:auto;top:5px;bottom:5px;width:1px;height:auto;}
  .tl__item{text-align:left;padding-left:28px;}
  .tl__item::before{position:absolute;left:1px;top:4px;margin:0;}
  .tl__item--now::before{left:-0.5px;top:2.5px;}
}

/* ---------- Organic "one platform, many geometries" figure ---------- */
.platform-fig{margin:36px 0 10px;}
.platform-fig svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;}
@media (max-width:600px){.platform-fig svg{max-width:100%;}}

/* ---------- Vira platform backbone (Products): glyph rail + folded-in descriptions ---------- */
.arch{display:block;margin:32px 0 12px;max-width:768px;}
.arch__band{display:grid;grid-template-columns:132px 1fr;column-gap:30px;align-items:center;position:relative;padding:20px 0;}
.arch__band::before{content:"";position:absolute;left:66px;top:0;bottom:0;width:1.4px;background:var(--ink-2);opacity:.5;z-index:0;}
.arch__band:first-child::before{top:50%;}
.arch__band:last-child::before{bottom:50%;}
.arch__rail{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;}
.arch__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--tag-ink);margin-top:9px;background:var(--paper-2);padding:1px 5px;}
.arch__glyph{display:block;height:auto;background:var(--paper-2);padding:7px 9px;box-sizing:content-box;}
.arch__glyph--tank{width:104px;}
.arch__glyph--feed{width:130px;}
.arch__glyph--chamber{width:122px;}
.arch__glyph--core{width:110px;}
.arch__glyph--data{width:66px;}
.arch__body{min-width:0;}
.arch > .arch__band::after{content:"";position:absolute;left:66px;bottom:-1px;width:7px;height:7px;border-right:1.3px solid var(--ink-2);border-bottom:1.3px solid var(--ink-2);transform:translateX(-50%) rotate(45deg);opacity:.55;}
.arch__plat{border:1px solid var(--line);background:var(--media-bg);padding:4px 18px 10px 0;margin-top:12px;}
.arch__plat .arch__glyph{background:var(--media-bg);}
.arch__eyebrow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.arch__h{font-size:20px;font-weight:400;color:var(--ink);line-height:1.16;}
.arch__q{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);}
.arch__body p{margin-top:9px;color:var(--ink-2);font-size:16px;line-height:1.5;max-width:52ch;}
.tl__key{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:30px;letter-spacing:.02em;}
.reveal-up{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.72,.2,1);}
.reveal-up.sr-in{opacity:1;transform:none;}

/* Video plate with dynamic sensor label */
.plate__media{position:relative;max-width:1139px;margin:0 auto;}
.plate__media video,.plate__media img{width:100%;height:auto;display:block;border:1px solid var(--line);}
.plate__label{position:absolute;left:22%;top:58%;opacity:0;transition:opacity 0.9s ease;}
.plate__label.is-visible{opacity:1;}
.plate__label-head{display:block;font-family:var(--serif);font-size:32px;line-height:1.02;color:#F7F6F2;text-shadow:0 1px 16px rgba(0,0,0,0.7);}
.plate__label-text{display:block;margin-top:7px;font-family:var(--serif);font-size:15px;color:#EFEEEA;text-shadow:0 1px 14px rgba(0,0,0,0.65);max-width:262px;line-height:1.4;}
.plate__label-line{position:absolute;left:-205px;top:14px;width:205px;height:1px;background:rgba(244,243,239,0.85);transform:rotate(7deg);transform-origin:right center;}
@media (prefers-reduced-motion:reduce){.plate__label{opacity:1;transition:none;}}
@media (max-width:760px){
  /* Overlay annotation gets cramped over the flame on small screens;
     the figure caption already names the ECT sensor head, so drop it. */
  .plate__label{display:none;}
}

.topbar--hidden{transform:translateY(-100%);}
@media (prefers-reduced-motion:reduce){.topbar{transition:none;}}

/* =============================================================================
   Six-electrode ECT sensing ring  (figure: #ectRing)
   A single attribute on the svg root, data-active="0..5", drives the whole
   figure: it shows one .ef field group and inks its matching .pad.
   ========================================================================== */

/* ---- structural strokes ---------------------------------------------------- */
#ectRing .wall{
  fill:none;
  stroke:#C3C1B7;          /* line-2 : vessel wall */
  stroke-width:2;
}
#ectRing .ef path{
  fill:none;
  stroke:#9A98A2;          /* faint sensing-field line */
  stroke-width:.8;
}
#ectRing .pad{
  stroke:#3B3C43;          /* ink-2 : inactive electrode */
  stroke-width:6;
  stroke-linecap:round;
}

/* ---- callouts -------------------------------------------------------------- */
#ectRing .lead{
  stroke:#8C8D93;          /* muted-2 leader */
  stroke-width:.6;
}
#ectRing .lbl{
  fill:#6C6D74;            /* muted label */
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* =============================================================================
   STATIC BASELINE  (always applied; correct with NO JavaScript)
   The markup ships data-active="0", so electrode 0's field shows and its pad
   inks even when the script never runs (and under reduced motion).
   ========================================================================== */
#ectRing .ef{opacity:0;}
#ectRing[data-active="0"] .ef[data-e="0"]{opacity:1;}
#ectRing[data-active="0"] .pad[data-e="0"]{stroke:#1A1B20;stroke-width:7;}   /* ink : excited */

/* =============================================================================
   INTERACTIVE / ANIMATED LAYER
   Slot this whole block into the site's existing
       @media (prefers-reduced-motion: no-preference){ ... }
   The JS advances data-active only when motion is allowed, so states 1..5 are
   never reached under reduced motion and the baseline above stays in force.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  #ectRing .ef{transition:opacity .3s ease;}
  #ectRing .pad{transition:stroke .3s ease;}

  #ectRing[data-active="1"] .ef[data-e="1"]{opacity:1;}
  #ectRing[data-active="1"] .pad[data-e="1"]{stroke:#1A1B20;stroke-width:7;}

  #ectRing[data-active="2"] .ef[data-e="2"]{opacity:1;}
  #ectRing[data-active="2"] .pad[data-e="2"]{stroke:#1A1B20;stroke-width:7;}

  #ectRing[data-active="3"] .ef[data-e="3"]{opacity:1;}
  #ectRing[data-active="3"] .pad[data-e="3"]{stroke:#1A1B20;stroke-width:7;}

  #ectRing[data-active="4"] .ef[data-e="4"]{opacity:1;}
  #ectRing[data-active="4"] .pad[data-e="4"]{stroke:#1A1B20;stroke-width:7;}

  #ectRing[data-active="5"] .ef[data-e="5"]{opacity:1;}
  #ectRing[data-active="5"] .pad[data-e="5"]{stroke:#1A1B20;stroke-width:7;}
}