/* 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{
  --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 */
  --maxw:1180px;
  --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;
}

*{box-sizing:border-box;}
html{-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(--serif);font-weight:400;font-size:18px;line-height:1.6;
  -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 40px;}
.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:rgba(244,243,239,0.92);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;}
.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-top:1px solid var(--line);border-bottom: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 (masked word rise, Anduril-ish) ---------- */
@media (prefers-reduced-motion:no-preference){
  .has-js [data-reveal-head]{visibility:hidden;}
  .has-js [data-reveal-head].reveal-ready{visibility:visible;}
  /* Mask box is padded larger than the glyph and pulled back with equal
     negative margins, so ascenders/descenders never clip and layout is unchanged. */
  /* Per-character reveal: letters rise and sharpen from a soft blur, staggered
     left to right (Anduril / Palantir / Babcock house style). */
  .word{display:inline-block;white-space:nowrap;}
  .ch{display:inline-block;opacity:0;transform:translateY(0.3em);filter:blur(6px);transition:opacity 0.28s ease,transform 0.32s cubic-bezier(0.2,0.72,0.2,1),filter 0.28s ease;will-change:opacity,transform,filter;}
  .reveal-in .ch{opacity:1;transform:translateY(0);filter:blur(0);}
  .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;}
  /* 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;}
.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) ---------- */
.foot{border-top:1px solid var(--line);background:var(--ink);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(6,1fr);gap:0;position:relative;}
.tl__track::before{content:"";position:absolute;top:5px;left:8.3%;right:8.3%;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__name{font-size:15px;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:9.5px;letter-spacing:.07em;color:var(--muted-2);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:1400px;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;}
}