/* ============================================================ tokens */
:root{
  --bg:#F7F5F2; --bg-2:#F1EEE9; --surface:#FFFFFF; --surface-2:#FAF8F5;
  --ink:#111820; --ink-2:#2B3742; --muted:#5A6774; --faint:#8B97A3;
  --line:#E4DED5; --line-2:#D2CABE;

  --copper:#B4652F; --copper-2:#8F4E22; --copper-wash:#FBF0E8;
  --btn-bg:#9A5526; --btn-bg-hover:#7E431C; --btn-fg:#FFFFFF;   /* 5.67:1 / 7.76:1 */
  --steel:#2C5F7C;  --steel-wash:#ECF3F7;
  --green:#157F4C;  --green-wash:#EAF6F0;
  --amber:#B8791B;  --amber-wash:#FDF4E5;
  --red:#B3261E;    --red-wash:#FDF0EF;

  --grid-line:rgba(17,24,32,.055);
  --shadow-1:0 1px 2px rgba(17,24,32,.05);
  --shadow-2:0 2px 6px rgba(17,24,32,.06), 0 10px 28px rgba(17,24,32,.06);
  --shadow-3:0 4px 12px rgba(17,24,32,.09), 0 18px 48px rgba(17,24,32,.10);

  --r-sm:7px; --r:11px; --r-lg:16px;
  --display:"Chakra Petch",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --head-h:66px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1017; --bg-2:#0E141C; --surface:#121A23; --surface-2:#17212C;
    --ink:#E9E6E0; --ink-2:#CDD5DD; --muted:#93A1AE; --faint:#6F7D8A;
    --line:#223040; --line-2:#2D3D4F;

    --copper:#E0975F; --copper-2:#F0B180; --copper-wash:#241A12;
    --btn-bg:#E0975F; --btn-bg-hover:#EFAE7C; --btn-fg:#0B1017;  /* 7.96:1 / 10.0:1 */
    --steel:#7FB3D0;  --steel-wash:#0F1E28;
    --green:#5CC28C;  --green-wash:#0E2019;
    --amber:#E0AE5C;  --amber-wash:#231A0E;
    --red:#F08A82;    --red-wash:#2A1615;

    --grid-line:rgba(233,230,224,.045);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.3);
    --shadow-3:0 4px 12px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.4);
  }
}

/* ============================================================ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"ss01" 1;
}
h1,h2,h3,h4{font-family:var(--display); line-height:1.12; margin:0 0 .5rem; font-weight:600; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem); letter-spacing:-.025em}
h2{font-size:clamp(1.35rem,2.4vw,1.9rem); letter-spacing:-.018em}
h3{font-size:1.0625rem; letter-spacing:-.008em}
p{margin:0 0 1rem}
a{color:var(--copper-2); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--copper); outline-offset:3px; border-radius:4px}
.wrap{max-width:74rem; margin:0 auto; padding:0 1.5rem}
.narrow{max-width:31rem; margin:0 auto}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* technical eyebrow label, used above most headings */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--copper-2);
  margin:0 0 .85rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:1.6rem; height:1px; background:currentColor; opacity:.6}

/* ============================================================ blueprint grid */
.gridbg{position:relative; isolation:isolate}
.gridbg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}

/* ============================================================ header */
.site-head{
  position:sticky; top:0; z-index:40; min-height:var(--head-h);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:1rem; min-height:var(--head-h); flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.85rem; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand .logo-mark{color:var(--copper); transition:transform .5s var(--ease-out)}
.brand:hover .logo-mark{transform:translateY(-2px) rotate(-3deg)}
.brand-text{display:flex; flex-direction:column; gap:.18rem; line-height:1.1}
.brand-name{font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em}
.brand-sub{font-family:var(--mono); font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.nav{margin-left:auto; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap}
.nav a:not(.btn){
  color:var(--muted); font-size:.9rem; font-weight:500; padding:.45rem .75rem;
  border-radius:var(--r-sm); transition:color .18s,background .18s;
}
.nav a:not(.btn):hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
.nav a:not(.btn).current{color:var(--ink); background:var(--surface-2)}
.nav a.btn:hover{text-decoration:none}
.whoami{
  display:flex; align-items:center; gap:.45rem; font-size:.875rem; color:var(--muted);
  padding-right:.4rem; margin-right:.2rem; border-right:1px solid var(--line);
}
.whoami .ico{color:var(--copper)}

/* ============================================================ buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; font-size:.9rem; line-height:1;
  padding:.72rem 1.2rem; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .2s, background .18s, border-color .18s, color .18s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn .ico{transition:transform .25s var(--ease-out)}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); color:var(--btn-fg); box-shadow:var(--shadow-2); transform:translateY(-1px)}
.btn-primary:hover .ico{transform:translateX(3px)}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-secondary:hover{background:var(--surface-2); border-color:var(--muted); color:var(--ink); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--muted); padding:.45rem .7rem}
.btn-ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn-sm{padding:.45rem .8rem; font-size:.8125rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6; pointer-events:none}

/* ============================================================ hero */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); overflow:hidden}
.hero-inner{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center}
@media (max-width:62rem){ .hero-inner{grid-template-columns:1fr} }
.hero h1 .accent{
  background:linear-gradient(100deg,var(--copper),var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{font-size:clamp(1rem,1.5vw,1.125rem); color:var(--muted); max-width:34rem}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-facts{display:flex; gap:1.75rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.4rem; border-top:1px dashed var(--line-2)}
.fact .n{font-family:var(--display); font-size:1.5rem; font-weight:600; line-height:1; color:var(--ink)}
.fact .l{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-top:.35rem}

/* ============================================================ schematic */
.schematic{width:100%; height:auto; max-width:38rem; margin-inline:auto; display:block; overflow:visible}
.sch-grid path{stroke:var(--grid-line); stroke-width:1}
.sch-vessel rect{fill:var(--surface); stroke:var(--ink-2); stroke-width:2}
.sch-tray{stroke:var(--muted); stroke-width:1.4; opacity:.7}
.sch-tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--ink-2)}
.sch-sub{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; fill:var(--faint)}
.sch-flow-label{font-family:var(--mono); font-size:9.5px; letter-spacing:.11em}
.sch-gas{fill:var(--steel)} .sch-rich{fill:var(--copper)} .sch-lean{fill:var(--green)} .sch-vent{fill:var(--muted)}
.sch-pump circle{fill:var(--surface); stroke:var(--ink-2); stroke-width:2}
.sch-pump path{stroke:var(--ink-2); stroke-width:1.6}
.sch-flame path{stroke:var(--amber); stroke-width:2; fill:none; stroke-linecap:round}
.sch-flame{animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{50%{opacity:.5; transform:translateY(1px)}}

.flow{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:9 7}
.flow-gas{stroke:var(--steel);  color:var(--steel);  animation:flowdash 1.6s linear infinite}
.flow-rich{stroke:var(--copper); color:var(--copper); animation:flowdash 2.1s linear infinite}
.flow-lean{stroke:var(--green);  color:var(--green);  animation:flowdash 2.4s linear infinite}
.flow-vent{stroke:var(--muted);  color:var(--muted);  stroke-width:1.8; animation:flowdash 1.9s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-32}}

/* ============================================================ sections */
.section{padding:clamp(2.5rem,5vw,4rem) 0}
.section-head{margin-bottom:1.75rem}
.section-head .row{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; justify-content:space-between}
.section-head p{color:var(--muted); margin:.35rem 0 0; font-size:.9375rem; max-width:44rem}

/* ============================================================ cards */
.grid{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.35rem; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:.85rem; overflow:hidden;
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s;
}
/* copper edge wipes in on hover - a small, precise reward, not a bounce */
.card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--copper),var(--amber));
  transform:scaleY(0); transform-origin:top; transition:transform .38s var(--ease-out);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--line-2)}
.card:hover::before{transform:scaleY(1)}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.card h3{margin:0}
.card p.sum{margin:0; color:var(--muted); font-size:.9125rem}
.card-foot{margin-top:auto; padding-top:.95rem; border-top:1px dashed var(--line); display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.card.is-soon{opacity:.72}
.card.is-soon:hover{transform:none; box-shadow:var(--shadow-1)}

.meta{display:flex; gap:1rem; flex-wrap:wrap; font-size:.8125rem; color:var(--faint); font-family:var(--mono); letter-spacing:.03em}
.meta span{display:inline-flex; align-items:center; gap:.35rem}
.meta .ico{width:14px; height:14px}

.tags{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.tag{
  font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; padding:.28rem .55rem; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted); white-space:nowrap;
}
.tag-ok{background:var(--green-wash); border-color:transparent; color:var(--green)}
.tag-run{background:var(--copper-wash); border-color:transparent; color:var(--copper-2)}
.tag-soon{background:var(--bg-2); border-color:transparent; color:var(--faint)}
.tag-cat{background:var(--steel-wash); border-color:transparent; color:var(--steel)}

/* progress ring */
.ring{flex:none}
.ring-track{stroke:var(--line)}
.ring-bar{stroke:var(--copper); transition:stroke-dashoffset 1.1s var(--ease-out)}
.ring-label{font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--ink)}
.card.is-done .ring-bar{stroke:var(--green)}

/* ============================================================ stat tiles */
.stats{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); margin-bottom:2rem}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow-1);
}
.stat .n{font-family:var(--display); font-size:1.85rem; font-weight:600; line-height:1}
.stat .l{font-family:var(--mono); font-size:.625rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:.25rem}
.dial{width:58px; height:40px; flex:none}
.dial-track{stroke:var(--line)}
.dial-bar{stroke:var(--copper); transition:stroke-dashoffset 1.2s var(--ease-out)}
.dial-needle{stroke:var(--ink); transition:transform 1.2s var(--ease-out)}
.dial-hub{fill:var(--ink)}

/* ============================================================ panels & forms */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.35rem,3.5vw,2rem); box-shadow:var(--shadow-2);
}
.field{margin-bottom:1.05rem}
.field label{display:block; font-weight:600; font-size:.8125rem; margin-bottom:.4rem; letter-spacing:.01em}
.field .hint{display:block; font-size:.78125rem; color:var(--faint); margin-top:.4rem}
.input-wrap{position:relative; display:flex; align-items:center}
.input-wrap .ico{position:absolute; left:.75rem; color:var(--faint); pointer-events:none; transition:color .18s}
.field input{
  width:100%; font:inherit; font-size:.9375rem; padding:.7rem .8rem .7rem 2.35rem;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.field input::placeholder{color:var(--faint)}
.field input:focus{
  outline:none; border-color:var(--copper); background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--copper) 16%,transparent);
}
.field input:focus + .ico,.input-wrap:focus-within .ico{color:var(--copper)}
.field input[aria-invalid="true"]{border-color:var(--red); background:var(--red-wash)}
.field .err{display:flex; align-items:center; gap:.35rem; color:var(--red); font-size:.78125rem; margin-top:.4rem; font-weight:500}
.field.ok input{border-color:color-mix(in srgb,var(--green) 55%,var(--line-2))}
.row2{display:grid; gap:0 1rem; grid-template-columns:1fr 1fr}
@media (max-width:34rem){ .row2{grid-template-columns:1fr} }
.req{color:var(--red); font-weight:400}

/* password strength */
.pw-meter{display:flex; gap:.25rem; margin-top:.5rem}
.pw-meter i{flex:1; height:3px; border-radius:2px; background:var(--line); transition:background .3s}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:var(--red)}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:var(--amber)}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:var(--steel)}
.pw-meter[data-score="4"] i{background:var(--green)}
.pw-note{font-size:.75rem; color:var(--faint); margin-top:.35rem; font-family:var(--mono); letter-spacing:.04em}

/* ============================================================ auth pages */
.auth-wrap{max-width:52rem; padding-block:clamp(1.75rem,5vw,3.25rem)}
.auth-wrap.narrow-form{max-width:29rem}
.auth-head{margin-bottom:1.5rem}
.auth-head h1{font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:.5rem}
.auth-head p{color:var(--muted); font-size:.9375rem; margin:0; max-width:44ch}
.auth-alt{margin-top:1.1rem; text-align:center; color:var(--muted); font-size:.9rem}

/* what the account gives you, as a compact strip rather than a bullet list */
.perks{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); margin-bottom:1.5rem}
.perk{
  display:flex; gap:.65rem; align-items:flex-start; padding:.8rem .9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.perk .ico{color:var(--copper); flex:none; margin-top:.2rem}
.perk b{display:block; font-size:.875rem; font-weight:600; line-height:1.3}
.perk span{display:block; font-size:.8125rem; color:var(--muted); line-height:1.4}

/* fills as required fields are completed, so the end of the form is visible */
.form-progress{height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:1.6rem}
.form-progress i{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--copper),var(--amber));
  transition:width .35s var(--ease-out);
}

fieldset.fs{border:0; padding:0; margin:0 0 1.6rem; min-width:0}
fieldset.fs:last-of-type{margin-bottom:1.75rem}
.fs-legend{display:flex; align-items:center; gap:.7rem; width:100%; padding:0; margin-bottom:.9rem}
.fs-legend .n{font-size:.7rem; font-weight:600; color:var(--copper); letter-spacing:.08em}
.fs-legend .t{font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--ink)}
.fs-legend .line{flex:1; height:1px; background:var(--line)}

.field.full{grid-column:1/-1}
.btn-lg{padding:.85rem 1.3rem; font-size:.95rem}

/* ============================================================ alerts */
.alert{
  display:flex; gap:.6rem; align-items:flex-start; border-radius:var(--r-sm);
  padding:.8rem .95rem; font-size:.9rem; margin-bottom:1.25rem; border:1px solid transparent;
}
.alert .ico{flex:none; margin-top:.15rem}
.alert-err{background:var(--red-wash); color:var(--red); border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.alert-ok{background:var(--green-wash); color:var(--green); border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.alert ul{margin:.35rem 0 0; padding-left:1.1rem}

/* ============================================================ steps */
.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.steps li{counter-increment:s; position:relative; padding-top:2.6rem; color:var(--muted); font-size:.9375rem}
.steps li::before{
  content:"0" counter(s); position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:.8125rem; font-weight:600; color:var(--copper-2);
  padding-bottom:.4rem; border-bottom:2px solid var(--copper); letter-spacing:.08em;
}
.steps li strong{display:block; color:var(--ink); font-family:var(--display); font-size:1.02rem; margin-bottom:.3rem; font-weight:600}

/* ============================================================ empty state */
.empty{
  text-align:center; padding:3rem 1.5rem; border:1px dashed var(--line-2);
  border-radius:var(--r-lg); background:var(--surface-2); color:var(--muted);
}
.empty .ico{width:28px; height:28px; color:var(--copper); margin-bottom:.6rem}

/* ============================================================ module viewer */
.viewer-bar{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:var(--surface); border-bottom:1px solid var(--line); padding:.55rem 1rem;
  position:sticky; top:0; z-index:30;
}
.viewer-bar .title{font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:-.01em}
.viewer-bar .spacer{margin-left:auto}
.viewer-frame{width:100%; height:calc(100vh - 53px); border:0; display:block; background:var(--bg)}

/* ============================================================ footer */
.site-foot{border-top:1px solid var(--line); margin-top:2rem; padding:2.25rem 0; color:var(--faint); font-size:.875rem}
.site-foot .wrap{display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; align-items:center}
.site-foot a{color:var(--muted)}

/* ============================================================ metrics band */
.band{background:var(--surface);border-block:1px solid var(--line);padding:clamp(2rem,4vw,2.75rem) 0}
.metrics{display:grid;gap:1.25rem 2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.metric{text-align:center;position:relative}
.metric + .metric::before{
  content:"";position:absolute;left:-1rem;top:12%;bottom:12%;width:1px;background:var(--line);
}
@media (max-width:52rem){ .metric + .metric::before{display:none} }
.metric .n{
  font-family:var(--display);font-weight:600;line-height:1;
  font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--copper),var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.metric .u{font-family:var(--display);font-size:1rem;color:var(--copper);-webkit-text-fill-color:var(--copper)}
.metric .l{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:.5rem}

/* ============================================================ instructor */
.bio{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
@media (max-width:58rem){ .bio{grid-template-columns:1fr} }
.bio-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.35rem,3vw,1.9rem);box-shadow:var(--shadow-2);
}
.bio-name{font-family:var(--display);font-size:1.45rem;font-weight:600;letter-spacing:-.015em;margin:0}
.bio-role{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--copper-2);margin:.3rem 0 1rem}
.bio-card p{font-size:.9375rem;color:var(--muted)}

/* career timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;width:1px;background:var(--line-2)}
.timeline li{position:relative;padding:0 0 1.15rem 1.65rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:.5rem;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2);
}
.timeline li.now::before{border-color:var(--copper);background:var(--copper);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--copper) 18%,transparent)}
.timeline .yr{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--faint)}
.timeline .ttl{display:block;font-weight:600;font-size:.9375rem;margin-top:.1rem}
.timeline .org{display:block;color:var(--muted);font-size:.875rem}

/* credential chips */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.35rem}
.chip{
  font-size:.78125rem;padding:.35rem .7rem;border-radius:999px;
  border:1px solid var(--line-2);color:var(--muted);background:var(--surface);
  transition:border-color .2s,color .2s,transform .2s var(--ease-out);
}
.chip:hover{border-color:var(--copper);color:var(--ink);transform:translateY(-1px)}

/* value props */
.props{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.prop{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem;box-shadow:var(--shadow-1);
}
.prop .ico{width:22px;height:22px;color:var(--copper);margin-bottom:.65rem}
.prop h3{margin:0 0 .35rem}
.prop p{margin:0;color:var(--muted);font-size:.9125rem}

/* closing CTA */
.cta{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.75rem,4vw,2.75rem);text-align:center;box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--copper),var(--amber),transparent);
}
.cta h2{margin-bottom:.5rem}
.cta p{color:var(--muted);max-width:40rem;margin-inline:auto}

/* ============================================================ showcase */
.showcase{position:relative}
/* Scenes are stacked in one grid cell so the container takes the height of the
   tallest one and they crossfade without any layout shift. */
.scenes{display:grid; position:relative}
.scene{
  grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transform:scale(.985);
}
.scene.is-on{opacity:1; visibility:visible; transform:none}
.scene svg{width:100%; height:auto; display:block; overflow:visible}
.scene figcaption{
  margin-top:.9rem; display:flex; flex-direction:column; gap:.15rem; text-align:center;
}
.scene-title{font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--ink)}
.scene-note{font-size:.8125rem; color:var(--muted)}

.sc-tabs{display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:1.1rem}
.sc-tab{
  font:inherit; font-size:.7rem; font-family:var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); background:none; border:0; cursor:pointer;
  padding:.3rem .2rem; display:flex; flex-direction:column; gap:.4rem; align-items:stretch;
  min-width:5.5rem; flex:1 1 auto; max-width:9rem; transition:color .2s;
}
.sc-tab:hover{color:var(--muted)}
.sc-tab.on{color:var(--ink)}
.sc-bar{display:block; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden}
.sc-bar i{display:block; height:100%; width:0; background:var(--copper); border-radius:2px}
/* The active tab's bar fills over the dwell time, so the rotation is legible
   rather than surprising. Duration is set from JS to stay in one place. */
.sc-tab.on .sc-bar i{width:100%; transition:width var(--dwell,7s) linear}
.sc-tab.on.no-anim .sc-bar i{transition:none; width:0}
.sc-label{display:block; text-align:center; line-height:1.25}
@media (max-width:40rem){
  .sc-label{font-size:.6rem}
  .sc-tab{min-width:4rem}
}

/* ---- scene internals ---- */
.sch-machine path{stroke:var(--ink-2); stroke-width:1.8; fill:var(--surface-2)}
.sch-coil{stroke:var(--steel); stroke-width:1.5; opacity:.75; fill:none}
.rotor circle{fill:var(--surface); stroke:var(--ink-2); stroke-width:1.8}
.rotor path{stroke:var(--copper); stroke-width:1.6; stroke-linecap:round}
.rotor{animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sch-gen circle{fill:var(--surface); stroke:var(--ink-2); stroke-width:2}
.sch-genletter{font-family:var(--display); font-size:22px; font-weight:600; fill:var(--ink-2)}

.sch-level{stroke-width:2; stroke-dasharray:5 4}
.sch-level-oil{stroke:var(--copper); animation:flowdash 3s linear infinite}
.sch-level-water{stroke:var(--steel); animation:flowdash 3.6s linear infinite}

.sch-header{stroke:var(--ink-2); stroke-width:2.4; stroke-linecap:round; fill:none}
.sch-pad rect{fill:var(--surface-2); stroke:var(--ink-2); stroke-width:1.8}
.sch-pad path{stroke:var(--copper); stroke-width:1.6; stroke-linecap:round}

.sch-land path{fill:color-mix(in srgb,var(--ink) 8%,transparent); stroke:none}
.sch-sea .wave{fill:color-mix(in srgb,var(--steel) 13%,transparent); stroke:none}
.sch-sea .wave-2{fill:color-mix(in srgb,var(--steel) 9%,transparent)}
.wave-1{animation:swell 7s ease-in-out infinite alternate}
.wave-2{animation:swell 9s ease-in-out infinite alternate-reverse}
@keyframes swell{to{transform:translateX(-38px)}}
.sch-seabed path{fill:color-mix(in srgb,var(--ink) 13%,transparent); stroke:none}
.sch-barge path{fill:var(--surface); stroke:var(--ink-2); stroke-width:1.8}
.sch-barge{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-.8deg)}}

.flow-hot{stroke:var(--amber); color:var(--amber); animation:flowdash 1.3s linear infinite}
.flow-steam{stroke:var(--steel); color:var(--steel); animation:flowdash 1.1s linear infinite}
.sch-hot{fill:var(--amber)} .sch-steam{fill:var(--steel)}

/* ============================================================ subjects */
.subjects{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,1.75rem); box-shadow:var(--shadow-2);
}
.subject{
  display:flex; align-items:center; gap:.85rem; padding:.7rem 0;
  border-bottom:1px dashed var(--line);
}
.subject:last-child{border-bottom:0; padding-bottom:0}
.subject-n{font-size:.7rem; color:var(--copper); font-weight:600; letter-spacing:.05em}
.subject-name{flex:1; font-weight:500; font-size:.9375rem}
.subject-count{
  font-size:.7rem; color:var(--faint); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:.15rem .5rem; min-width:1.9rem; text-align:center;
}

/* ============================================================ motion */
/* Elements start hidden and are revealed by IntersectionObserver. If JS never
   runs, the .no-js fallback below makes everything visible - content must never
   depend on script to be readable. */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1!important; transform:none!important}
  .flow,.sch-level{stroke-dasharray:none}
  .rotor,.sch-barge,.wave-1,.wave-2,.sch-flame{animation:none!important}
  .scene{transform:none!important}
}