/* =========================================================
   Jaafar Yazbik · Engineering portfolio
   Tokens first: change colours and type here to restyle.
   Light palette on :root; dark overrides below.
   ========================================================= */
:root{
  --bg:#F4F5F6; --paper:#FCFCFC; --sunk:#ECEEF0;
  --ink:#15191E; --ink-2:#4A525C; --ink-3:#5F6873;
  --line:#D6DADF; --line-2:#AEB5BD; --rule:#15191E;
  --accent:#0A5CC2; --accent-ink:#FFFFFF; --accent-soft:rgba(10,92,194,.08); --accent-line:rgba(10,92,194,.35);
  --green:#3B7553; --green-soft:rgba(59,117,83,.10);
  --warn:#8F5B00; --warn-soft:rgba(143,91,0,.08);
  --grid:rgba(21,25,30,.045); --grid-major:rgba(21,25,30,.075);
  --shadow:0 1px 0 rgba(21,25,30,.03),0 18px 40px -28px rgba(21,25,30,.35);
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bar-h:60px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1215; --paper:#151A1F; --sunk:#1B2128;
    --ink:#E7EAED; --ink-2:#A9B1BA; --ink-3:#8E98A3;
    --line:#262D35; --line-2:#3B4550; --rule:#C9D0D7;
    --accent:#5AB3F0; --accent-ink:#0B1116; --accent-soft:rgba(90,179,240,.10); --accent-line:rgba(90,179,240,.4);
    --green:#7DBE93; --green-soft:rgba(125,190,147,.10);
    --warn:#D6A24A; --warn-soft:rgba(214,162,74,.09);
    --grid:rgba(170,195,220,.04); --grid-major:rgba(170,195,220,.07);
    --shadow:0 18px 40px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1215; --paper:#151A1F; --sunk:#1B2128;
  --ink:#E7EAED; --ink-2:#A9B1BA; --ink-3:#8E98A3;
  --line:#262D35; --line-2:#3B4550; --rule:#C9D0D7;
  --accent:#5AB3F0; --accent-ink:#0B1116; --accent-soft:rgba(90,179,240,.10); --accent-line:rgba(90,179,240,.4);
  --green:#7DBE93; --green-soft:rgba(125,190,147,.10);
  --warn:#D6A24A; --warn-soft:rgba(214,162,74,.09);
  --grid:rgba(170,195,220,.04); --grid-major:rgba(170,195,220,.07);
  --shadow:0 18px 40px -26px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{margin:0;font-weight:600;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 14px;font-family:var(--mono);font-size:13px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.mono{font-family:var(--mono)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);flex:none}
.nr{font-family:var(--mono);font-size:.82em;color:var(--warn);letter-spacing:.02em}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap;margin-right:auto}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;position:relative}
.brand-mark::after{content:"";position:absolute;inset:3px;border:1px solid var(--accent-line)}
.brand-name{font-weight:600;font-size:14.5px;letter-spacing:.14em}
.nav{display:flex;gap:2px}
.nav a{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:2px;display:flex;gap:6px;align-items:baseline;transition:color .2s,background-color .2s}
.nav a span{font-size:10.5px;color:var(--ink-3)}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"] span{color:var(--accent)}
.bar-tools{display:flex;gap:6px}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;background:transparent;border:1px solid var(--line);border-radius:2px;cursor:pointer;color:var(--ink);transition:border-color .2s,background-color .2s}
.icon-btn:hover{border-color:var(--line-2);background:var(--sunk)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fill{fill:currentColor;stroke:none}
.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{display:grid}
  .nav{position:fixed;inset:calc(var(--bar-h) + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px clamp(16px,4vw,40px) 16px;box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s}
  .nav.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .2s var(--ease)}
  .nav a{padding:13px 4px;font-size:14px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
}
@media (max-width:420px){.brand-name{font-size:13px;letter-spacing:.1em}}

/* ---------- hero / title sheet ---------- */
.hero{padding-block:clamp(28px,5vw,56px) 0}
.sheet-meta{display:flex;gap:0;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--line)}
.sheet-meta span{padding:7px 14px 7px 0;margin-right:14px;border-right:1px solid var(--line)}
.sheet-meta span:last-child{border-right:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:stretch;padding-block:clamp(32px,5vw,56px)}
.panel{position:relative;border:1px solid var(--line-2);background:var(--paper)}
.hero-text{display:flex;flex-direction:column}
.panel-body{flex:1;display:flex;flex-direction:column;gap:22px;padding:56px clamp(20px,2.6vw,32px) 26px}
.hero-id{display:flex;align-items:stretch;gap:clamp(16px,2vw,24px)}
.portrait{margin:0;width:clamp(96px,10vw,132px);flex:none;padding:4px;border:1px solid var(--line-2);background:var(--bg);align-self:center}
.portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:saturate(.9)}
.id-meta{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--accent);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:currentColor}
.hero h1{font-size:clamp(38px,4.6vw,62px);font-weight:600;letter-spacing:.01em;line-height:.95}
.id-role{padding-top:18px;border-top:1px solid var(--line);position:relative}
.id-role::before{content:"";position:absolute;top:-3px;left:0;width:1px;height:5px;background:var(--ink-2)}
.role{font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:var(--ink)}
.domains{font-size:15px;color:var(--ink-2);margin-top:6px}
.domains i{font-style:normal;color:var(--line-2);margin-inline:3px}
.lede{font-size:clamp(16px,1.35vw,18px);line-height:1.6;max-width:46ch;color:var(--ink)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.id-block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);font-family:var(--mono);font-size:11.5px}
.id-block div{padding:7px 12px 8px;border-right:1px solid var(--line);min-width:0}
.id-block div:last-child{border-right:0}
.id-block dt{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.id-block dd{display:flex;align-items:center;gap:7px;margin-top:2px;overflow-wrap:anywhere}
.id-block .dot{width:6px;height:6px;box-shadow:none}
@media (max-width:480px){.id-block{grid-template-columns:minmax(0,1fr)}.id-block div{display:grid;grid-template-columns:78px 1fr;align-items:baseline;border-right:0;border-bottom:1px solid var(--line)}.id-block div:last-child{border-bottom:0}}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:12px 18px;border:1px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;border-radius:2px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--sunk);text-decoration:none}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn span{transition:transform .2s var(--ease)}
.btn:hover span{transform:translateX(3px)}

.viewport{position:relative;margin:0;border:1px solid var(--line-2);background:var(--paper);min-height:440px;max-width:100%;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,12px 12px,12px 12px;background-position:-1px -1px}
.viewport canvas{position:absolute;inset:0;width:100%;height:100%}
.panel::before,.panel::after,.viewport::before,.viewport::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--ink);z-index:2}
.panel::before,.viewport::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.panel::after,.viewport::after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.vp-bar{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;padding:8px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);border-bottom:1px solid var(--line);background:var(--paper);z-index:1}
.vp-bar b{font-weight:500;color:var(--accent)}
.coords{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);z-index:1;font-variant-numeric:tabular-nums}
.tblock{position:absolute;right:0;bottom:0;display:grid;grid-template-columns:auto auto;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);background:var(--paper);font-family:var(--mono);font-size:10.5px;z-index:1}
.tblock div{padding:4px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tblock div:nth-child(2n){border-right:0}
.tblock div:nth-last-child(-n+2){border-bottom:0}
.tblock span{display:block;font-size:8.5px;letter-spacing:.12em;color:var(--ink-3)}

.hero-sys{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.hero-sys span{padding:9px 16px 9px 0;margin-right:16px;border-right:1px solid var(--line)}
.hero-sys span:last-child{border-right:0}

.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);background:var(--paper)}
.strip div{padding:16px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:4px}
.strip div:last-child{border-right:0}
.strip dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.strip dd{font-family:var(--mono);font-size:28px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .viewport{min-height:0;aspect-ratio:1/1;width:100%}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(2){border-right:0}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .strip dd{font-size:24px}
  .hero-sys{display:none}
  .viewport{aspect-ratio:4/3.4}
  .panel-body{padding-top:50px;gap:18px}
  .tblock{font-size:9.5px}
}

/* ---------- section scaffold ---------- */
.sec{padding-top:clamp(72px,10vw,120px);scroll-margin-top:var(--bar-h)}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 22px;margin-bottom:32px;padding-bottom:16px;position:relative}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:left;transition:transform .9s var(--ease)}
.sec-head::before{content:"";position:absolute;left:0;bottom:-4px;width:1px;height:9px;background:var(--rule)}
.js .sec-head:not(.in)::after{transform:scaleX(0)}
.sec-no{font-family:var(--mono);font-size:13px;color:var(--accent);padding:4px 8px;border:1px solid var(--accent-line);line-height:1;align-self:center}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:6px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.01em}
.sec-ref{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-align:right;max-width:38ch}
.sub-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
@media (max-width:640px){
  .sec-head{grid-template-columns:auto 1fr}
  .sec-ref{grid-column:1/-1;text-align:left;max-width:none}
}

/* ---------- 01 about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:start}
.bio p{font-size:17px;line-height:1.7;max-width:62ch;color:var(--ink)}
.bio p+p{margin-top:16px;color:var(--ink-2)}
.datapanel{border:1px solid var(--line-2);background:var(--paper)}
.datapanel div{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line)}
.datapanel div:last-child{border-bottom:0}
.datapanel dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:13px 16px;border-right:1px solid var(--line);background:var(--sunk)}
.datapanel dd{padding:12px 16px;font-size:15px;display:flex;align-items:center;gap:10px}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.datapanel div{grid-template-columns:1fr}.datapanel dt{border-right:0;padding-block:8px 6px}.datapanel dd{padding-top:8px}}

/* ---------- 02 projects ---------- */
.filterbar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px}
.filters{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);background:var(--paper)}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--ink-2);cursor:pointer;display:flex;gap:6px;align-items:baseline;transition:color .15s,background-color .15s}
.chip:last-child{border-right:0}
.chip::before{content:"[";color:var(--line-2)}
.chip::after{content:"]";color:var(--line-2)}
.chip small{font-size:10px;color:var(--ink-3);letter-spacing:0}
.chip:hover{color:var(--ink);background:var(--sunk)}
.chip[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}
.chip[aria-pressed="true"]::before,.chip[aria-pressed="true"]::after{color:var(--accent)}
.chip[aria-pressed="true"] small{color:var(--accent)}
.filter-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3)}
@media (max-width:640px){
  .filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none;padding:11px 13px}
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);transition:border-color .25s,box-shadow .3s,transform .3s var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:focus-within{border-color:var(--accent)}
.card.enter{animation:enter .45s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.card-head b{font-weight:500;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.status.pending{color:var(--warn)}
.status.pending::before{background:transparent;border:1px solid var(--warn)}
.status.contrib::before{background:var(--accent)}
.thumb{position:relative;aspect-ratio:16/9;border-bottom:1px solid var(--line);overflow:hidden;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px}
.thumb svg{width:100%;height:100%;display:block}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.card-foot .figs{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);text-align:right}
.card-body{padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:20px;letter-spacing:-.005em}
.card-short{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.spec{border-top:1px solid var(--line);margin-top:auto}
.spec div{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;align-items:baseline}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.spec dd{color:var(--ink);min-width:0}
.spec .chain{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.55}
.spec .chain i{font-style:normal;color:var(--accent);margin-inline:3px}
.spec .chain .sep{font-weight:400;color:var(--ink-3);margin-inline:6px}
.open{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:none;border:0;padding:6px 0;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.open::after{content:"";position:absolute;inset:0;z-index:1}
.open span{transition:transform .2s var(--ease)}
.card:hover .open span{transform:translateX(4px)}
.card:focus-within .open{text-decoration:underline;text-underline-offset:4px}
.card .open:focus-visible{outline:none}
.card:has(.open:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* thumbnail line-drawing classes */
.s{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.s2{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:round}
.sg{fill:none;stroke:var(--green);stroke-width:1.3;stroke-linecap:round}
.dim{fill:none;stroke:var(--ink-3);stroke-width:.7;stroke-dasharray:3 3}
.acc{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.fillb{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.1}
.fillg{fill:var(--green-soft);stroke:var(--green);stroke-width:1.1}
.fa{fill:var(--accent)}
.txt{fill:var(--ink-3);font-family:var(--mono);font-size:9px;letter-spacing:.06em}
.txt-big{fill:var(--green);font-family:var(--mono);font-size:18px;font-weight:500}
.flow{stroke-dasharray:6 5}
.card:hover .flow{animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.card:hover .spin{animation:spin 8s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.card:hover .sweep{animation:spin 5s linear infinite;transform-origin:160px 110px}
.card:hover .swing{animation:swing 3s ease-in-out infinite;transform-origin:120px 150px}
@keyframes swing{50%{transform:rotate(-8deg)}}

/* ---------- tables (capability matrix, register, certificates) ---------- */
.tbl{border:1px solid var(--line-2);background:var(--paper);overflow-x:auto}
.tbl.flat{border-color:var(--line)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--sunk);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:var(--accent-soft)}
.ref{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.matrix .cap{font-weight:600;white-space:nowrap}
.matrix .use{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;font-weight:400;white-space:normal}
.techs{display:flex;flex-wrap:wrap;gap:4px}
.techs span{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.prj-refs{display:flex;flex-wrap:wrap;gap:4px}
.prj-ref{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border:1px solid var(--accent-line);color:var(--accent);background:transparent;cursor:pointer;border-radius:0;transition:background-color .15s}
.prj-ref:hover{background:var(--accent-soft)}
.prj-ref.cert{border-color:var(--line-2);color:var(--ink-2);cursor:default}
.qty{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.matrix th:last-child{text-align:right}
.meter{display:inline-flex;gap:2px;vertical-align:middle;margin-left:8px}
.meter i{width:4px;height:10px;background:var(--line)}
.meter i.on{background:var(--accent)}

.register td{vertical-align:middle}
.doc-title{font-weight:500}
.doc-title small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400;margin-top:2px;letter-spacing:.04em}
.st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;background:var(--green)}
.st.pending{color:var(--warn)}
.st.pending::before{background:transparent;border:1px solid var(--warn)}
.doc-link{font-family:var(--mono);font-size:12px;white-space:nowrap}
.register td:last-child{text-align:right}

/* stacked rows on narrow screens instead of sideways scrolling */
@media (max-width:720px){
  .tbl.stack{overflow:visible}
  .stack table,.stack tbody,.stack tr,.stack td{display:block}
  .stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .stack tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .stack tbody tr:last-child{border-bottom:0}
  .stack td{padding:3px 0;border:0}
  .stack td[data-h]::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 4px}
  .stack .qty,.stack td:last-child{text-align:left}
  .matrix .cap{white-space:normal}
}

/* ---------- 05 education + 06 certificates ---------- */
.edu-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.edu-grid{grid-template-columns:minmax(0,1fr)}}
.timeline{list-style:none;border-left:1px solid var(--line-2);margin-left:5px;display:grid;gap:28px;padding-block:4px}
.timeline li{position:relative;padding-left:26px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;background:var(--bg);border:1px solid var(--ink-2)}
.timeline li.current::before{background:var(--accent);border-color:var(--accent)}
.period{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.timeline h3{font-size:18px;margin-top:6px}
.timeline .school{color:var(--ink);margin-top:4px;font-size:15px}
.timeline .detail{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.certs td:first-child{font-weight:500}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:1px 6px;border:1px solid var(--line-2);color:var(--ink-2);margin-right:8px;vertical-align:1px}
.certs .muted{color:var(--ink-3);font-family:var(--mono);font-size:12px}

/* ---------- next revision (only shown when filled) ---------- */
.future{display:grid;grid-template-columns:repeat(3,1fr);border:1px dashed var(--line-2);background:var(--paper)}
.fcol{padding:20px 22px;border-right:1px dashed var(--line)}
.fcol:last-child{border-right:0}
.fcol h3{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.fcol ul{list-style:none;display:grid;gap:10px}
.fcol li{font-size:15px}
.fcol li span{display:block;font-size:13px;color:var(--ink-2)}
@media (max-width:860px){.future{grid-template-columns:1fr}.fcol{border-right:0;border-bottom:1px dashed var(--line)}.fcol:last-child{border-bottom:0}}

/* ---------- 07 contact ---------- */
.contact-sec{padding-top:clamp(72px,10vw,120px);scroll-margin-top:var(--bar-h)}
.contact{--c-bg:#15191E;--c-ink:#E7EAED;--c-ink-2:#A9B1BA;--c-line:#2C343C;--c-accent:#5AB3F0;
  background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-bg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;position:relative;
  background-image:linear-gradient(rgba(170,195,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(170,195,220,.05) 1px,transparent 1px);background-size:24px 24px}
:root[data-theme="dark"] .contact{--c-bg:#1B2128;border-color:var(--line-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact{--c-bg:#1B2128;border-color:var(--line-2)}}
.contact-id{padding:clamp(28px,5vw,52px);border-right:1px solid var(--c-line)}
.sec-label.on-dark{color:var(--c-accent)}
.contact h2{font-size:clamp(32px,4.6vw,52px);letter-spacing:.01em;margin-top:6px}
.contact-lede{color:var(--c-ink-2);margin-top:18px}
.areas{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.areas li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:5px 10px;border:1px solid var(--c-line);color:var(--c-ink)}
.channels{list-style:none;display:grid;align-content:center;padding:clamp(20px,4vw,40px)}
.channels li{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.channels li:last-child{border-bottom:0}
.ch-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.ch-label svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ch-val{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0;font-size:15px}
.ch-val a{color:var(--c-ink);text-decoration:none;overflow-wrap:anywhere}
.ch-val a:hover{color:var(--c-accent);text-decoration:underline}
.contact :focus-visible{outline-color:var(--c-accent)}
.copy{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--c-accent);border:1px solid var(--c-line);padding:5px 10px;cursor:pointer;border-radius:2px}
.copy:hover{border-color:var(--c-accent)}
.pending{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#D6A24A}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}.contact-id{border-right:0;border-bottom:1px solid var(--c-line)}}
@media (max-width:460px){.channels li{grid-template-columns:1fr;gap:6px}}

.foot{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding-block:28px calc(36px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}

/* ---------- project dialog: design review ---------- */
dialog{border:1px solid var(--line-2);background:var(--paper);color:var(--ink);padding:0;width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:rgba(10,13,16,.6);backdrop-filter:blur(2px)}
dialog[open]{animation:dlgIn .28s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dl-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 20px;background:var(--paper);border-bottom:1px solid var(--rule)}
.dl-ref{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-ref b{color:var(--accent);font-weight:500}
.dl-nav{display:flex;gap:6px;flex:none}
.dl-body{padding:24px clamp(18px,3.5vw,32px) 32px}
.dl-title{font-size:clamp(26px,4vw,36px);letter-spacing:-.01em}
.dl-short{font-size:17px;color:var(--ink-2);margin-top:10px;max-width:64ch}
.idblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line-2);margin-top:22px}
.idblock div{padding:10px 14px;border-right:1px solid var(--line);min-width:0}
.idblock div:last-child{border-right:0}
.idblock dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.idblock dd{font-size:14px;font-weight:500;margin-top:3px;overflow-wrap:anywhere}
@media (max-width:640px){.idblock{grid-template-columns:1fr 1fr}.idblock div:nth-child(2){border-right:0}.idblock div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.rv{margin-top:30px}
.rv-h{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:14px}
.rv-h span{color:var(--accent)}
.rv p{max-width:70ch;line-height:1.7}
.arch{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;row-gap:10px}
.arch .node{font-family:var(--mono);font-size:12px;padding:9px 12px;border:1px solid var(--line-2);background:var(--bg);display:flex;align-items:center}
.arch .node:first-child,.arch .arch-break+.node{border-color:var(--accent-line);color:var(--accent)}
.arch .arch-break{flex-basis:100%;height:0}
.arch .link{display:flex;align-items:center;width:26px;position:relative}
.arch .link::before{content:"";flex:1;height:1px;background:var(--ink-3)}
.arch .link::after{content:"";width:0;height:0;border-left:5px solid var(--ink-3);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.outcomes{list-style:none;display:grid;gap:8px}
.outcomes li{display:grid;grid-template-columns:34px 1fr;gap:8px;font-size:15px}
.outcomes li b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-3);padding-top:3px}
.toolgrid{display:flex;flex-wrap:wrap;gap:6px}
.toolgrid span{font-family:var(--mono);font-size:12px;padding:4px 9px;border:1px solid var(--line);background:var(--bg)}
.figs-grid{display:grid;gap:16px}
.figs-grid figure{margin:0;border:1px solid var(--line-2);background:var(--bg)}
.figs-grid img{width:100%;height:auto;image-rendering:auto}
.figs-grid figcaption{display:flex;gap:10px;font-size:13px;color:var(--ink-2);padding:9px 12px;border-top:1px solid var(--line);background:var(--paper)}
.figs-grid figcaption b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink);white-space:nowrap;padding-top:1px}
.figs-grid .small img{max-width:480px;margin-inline:auto}
.open-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);border:1px dashed var(--warn);background:var(--warn-soft);padding:10px 14px;margin-top:14px}
.open-item b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--warn);white-space:nowrap;padding-top:2px}
.doclinks{display:grid;gap:0;border:1px solid var(--line)}
.doclinks a,.doclinks span.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14.5px}
.doclinks > :last-child{border-bottom:0}
.doclinks a:hover{background:var(--accent-soft)}
.doclinks .go{font-family:var(--mono);font-size:12px;color:var(--accent);white-space:nowrap}
.dl-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.dl-foot .btn{font-size:12px;padding:10px 14px}
@media (max-width:640px){
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0}
  .dl-head{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .dl-body{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  .arch .link{width:18px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .sec-head:not(.in)::after{transform:none}
}