/* Layout: single-column editorial page on a dark slate ground. Serif headlines carry
   the voice; the identity-record panel and tracked sans labels carry the technical detail. */

@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#11161a;
  --surface:#171e23;
  --ink:#e5e9ec;
  --muted:#98a3ac;
  --line:#28323a;
  --accent:#86c3d4;
  --ok:#a3cf93;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::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:400 1.02rem/1.65 var(--sans);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
p,h1,h2,h3,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,8vw,96px)}
main{display:flex;flex-direction:column;gap:clamp(56px,8vw,96px)}

.label{font:600 .72rem var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

nav{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;padding-top:28px}
nav .name{font:500 1.2rem var(--serif);color:var(--ink);text-decoration:none}
nav .links{display:flex;gap:24px}
nav .links a{color:var(--muted);text-decoration:none}
nav .links a:hover{color:var(--ink)}

.hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:end}
.hero .copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1{font:400 clamp(2.1rem,5.4vw,4rem)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.hero h1 em{color:var(--accent)}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}
.linkedin{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--accent);border-radius:4px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.linkedin:hover{background:var(--accent);color:var(--bg)}

.record{background:var(--surface);border:1px solid var(--line);border-radius:6px;min-width:0}
.record .bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.record .status{font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.record dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;padding:16px;font-size:.92rem;font-variant-numeric:tabular-nums}
.record dt{color:var(--muted);font-size:.8rem;padding-top:2px}
.record dd{overflow-wrap:anywhere}
.record dd ul{display:flex;flex-direction:column;gap:4px}
.record .yr{color:var(--accent);display:inline-block;width:2.9em}
.record .ok{color:var(--ok)}

.arc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.arc li{padding:20px 22px 0 0;display:flex;flex-direction:column;gap:8px}
.arc li + li{padding-left:22px;border-left:1px solid var(--line)}
.arc h3{font:400 1.5rem/1.2 var(--serif)}
.arc .verb{color:var(--accent)}
.arc p{color:var(--muted);font-size:.95rem}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.feature .head{display:flex;flex-direction:column;gap:10px}
.feature h2{font:400 clamp(1.9rem,3.4vw,2.5rem)/1.1 var(--serif);text-wrap:balance}
.feature .body{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:.8rem;border:1px solid var(--line);padding:4px 10px;border-radius:3px}

.also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-top:28px;border-top:1px solid var(--line)}
.also > .label{grid-column:1/-1}
.also h3{font:500 1.15rem var(--serif);margin-bottom:6px}
.also p{color:var(--muted);font-size:.93rem}

.creds{display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:1px solid var(--line)}
.creds ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.creds li{background:var(--bg);display:flex}
.creds li > a,.creds li:not(:has(a)){padding:14px 16px;display:flex;flex-direction:column;gap:2px;width:100%}
.creds li > a{color:var(--ink);text-decoration:none}
.creds li > a:hover{background:var(--surface)}
.creds li > a:hover span{color:var(--accent)}
.creds b{font-weight:600}
.creds li span{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}

footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid var(--line)}
footer p{font:400 1.4rem var(--serif)}

.notfound{display:flex;flex-direction:column;gap:22px;padding-block:clamp(48px,12vw,140px)}
.notfound h1{font:400 clamp(2.1rem,5.4vw,3.4rem)/1.1 var(--serif);letter-spacing:-.02em}
.notfound p{color:var(--muted);max-width:52ch}

@media (max-width:780px){
  .hero,.feature{grid-template-columns:minmax(0,1fr)}
  .arc,.also{grid-template-columns:minmax(0,1fr)}
  .arc li{padding-right:0}
  .arc li + li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px}
  nav .links{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}