:root{
  --navy:#0D3B66;
  --navy-deep:#082644;
  --paper:#F4F1E8;
  --paper-2:#E9E4D4;
  --ink:#0B1F33;
  --cyan:#9FDBFF;
  --signal:#FF7A1A;
  --signal-ink:#A8390A;
  --line:rgba(11,31,51,.22);
  --f-display:"Bricolage Grotesque",Georgia,serif;
  --f-text:"Hanken Grotesk",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6.5rem;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:var(--ink);padding:.75rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;margin:0;letter-spacing:-.02em}
.mono{font-family:var(--f-mono)}
.tag{font:500 .78rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--navy-deep);color:#EAF3FB;border-bottom:1px solid rgba(159,219,255,.25)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:var(--s2)}
.brand{font:700 1.15rem var(--f-display);text-decoration:none;display:flex;gap:.6rem;align-items:center;min-height:44px}
.brand i{width:14px;height:14px;background:var(--signal);display:inline-block;transform:rotate(45deg)}
.nav-d{display:none;gap:.25rem}
.nav-d a,.nav-m a{font:500 .82rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.7rem .85rem;display:inline-flex;align-items:center;min-height:44px}
.nav-d a:hover,.nav-m a:hover{color:var(--signal)}
.nav-d a.cta{border:1px solid var(--cyan);color:var(--cyan)}
.nav-m summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;gap:.5rem;font:500 .82rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--cyan);padding:0 .9rem;color:var(--cyan)}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m{position:relative}
.nav-m .panel{position:absolute;right:0;top:calc(100% + 10px);background:var(--navy-deep);border:1px solid var(--cyan);min-width:220px;display:flex;flex-direction:column;padding:.4rem}
@media(min-width:900px){.nav-d{display:flex}.nav-m{display:none}}

/* hero */
.hero{background:var(--navy);color:#EAF3FB;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(234,243,251,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(234,243,251,.07) 1px,transparent 1px),linear-gradient(rgba(234,243,251,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(234,243,251,.04) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.hero .wrap{padding-top:var(--s5);padding-bottom:var(--s5);display:grid;gap:var(--s4)}
.hero .tag{color:var(--cyan);display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.hero .tag b{background:var(--signal);color:var(--ink);padding:.25rem .6rem;font-weight:600}
.hero h1{font-size:clamp(3.2rem,11vw,8.4rem);font-weight:800;margin:var(--s2) 0;line-height:.92}
.hero h1 span{display:block;color:var(--cyan)}
.hero .hrole{font:500 1.05rem var(--f-mono);color:#fff;margin:0 0 var(--s2);max-width:34rem}
.hero .sum{max-width:40rem;font-size:1.15rem;color:#DCE9F5;margin:0 0 var(--s3)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.5rem 1.2rem;font:600 .95rem var(--f-text);text-decoration:none;border:2px solid currentColor;transition:transform .2s,background .2s,color .2s}
.btn.p{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn.p:hover{background:#fff;border-color:#fff;transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--signal)}
.btn.s{color:#fff}.btn.s:hover{background:#fff;color:var(--navy)}
.btn.d{color:var(--ink)}.btn.d:hover{background:var(--ink);color:var(--paper)}
.readouts{border:1px solid rgba(159,219,255,.55);background:rgba(8,38,68,.82);padding:var(--s3);display:grid;gap:var(--s3);align-self:end}
.readouts h2{font:500 .78rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.ro{display:grid;gap:.35rem}
.ro .v{font:800 2.6rem/1 var(--f-display);color:#fff}
.ro .l{font-size:.92rem;color:#C9DCEE;line-height:1.3}
.bar{height:8px;background:rgba(159,219,255,.2);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--signal)}
.dots{display:flex;gap:5px;height:8px}
.dots i{flex:1;background:var(--signal);max-width:12px}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.6fr 1fr;padding-top:var(--s6);padding-bottom:var(--s6);gap:var(--s5)}
}

/* sections */
section{padding:var(--s6) 0}
.sec-h{display:grid;gap:.6rem;margin-bottom:var(--s4);max-width:46rem}
.sec-h .tag{color:var(--signal-ink)}
.sec-h h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800}
.on-navy .sec-h .tag{color:var(--signal)}
@media(max-width:700px){section{padding:var(--s5) 0}}

/* about */
.about-g{display:grid;gap:var(--s4)}
.about-g p{margin:0 0 var(--s2);max-width:42rem}
.about-g p:first-child{font:500 1.5rem/1.35 var(--f-display);letter-spacing:-.01em}
.facts{margin:0;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--s2);padding:.75rem 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 .76rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#46586b;padding-top:.2rem}
.facts dd{margin:0;font-weight:600}
@media(min-width:900px){.about-g{grid-template-columns:1.3fr 1fr;gap:var(--s5)}}

/* experience */
.exp{background:var(--paper-2);border-block:2px solid var(--ink)}
.roles{display:grid;gap:var(--s4)}
.role{background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);display:grid}
.role-h{padding:var(--s3);border-bottom:2px solid var(--ink);display:grid;gap:var(--s2);align-content:start}
.logo{background:#fff;border:1px solid var(--line);width:150px;height:72px;display:grid;place-items:center;padding:.6rem}
.logo img{max-height:100%;max-width:100%;object-fit:contain}
.role h3{font-size:1.9rem;font-weight:800}
.role .co{font:600 1.05rem var(--f-text);margin:0}
.when{font:500 .85rem var(--f-mono);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.when b{background:var(--signal);padding:.1rem .5rem;font-weight:600}
.role-b{padding:var(--s3)}
.role-b>p{margin:0 0 var(--s2)}
.role ul{padding:0;margin:0 0 var(--s2);list-style:none;display:grid;gap:.6rem}
.role li{padding-left:1.4rem;position:relative}
.role li::before{content:"";position:absolute;left:0;top:.65em;width:.7rem;height:2px;background:var(--signal-ink)}
ul.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}
ul.chips li{padding-left:.55rem;font:500 .78rem var(--f-mono);border:1px solid var(--ink);padding:.2rem .55rem;background:transparent;line-height:1.4}
ul.chips li::before{display:none}
ul.chips li{padding:.2rem .55rem}
@media(min-width:900px){
  .role{grid-template-columns:.8fr 1.6fr}
  .role-h{border-bottom:0;border-right:2px solid var(--ink)}
}

/* projects */
.proj{background:var(--navy);color:#EAF3FB;background-image:linear-gradient(rgba(234,243,251,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,243,251,.05) 1px,transparent 1px);background-size:48px 48px}
.proj .sec-h .tag{color:var(--signal)}
.proj .sec-h p{color:#C9DCEE;margin:0}
.pgrid{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2);list-style:none;margin:0;padding-left:0}
.pc{flex:0 0 86%;scroll-snap-align:start;background:var(--navy-deep);border:1px solid rgba(159,219,255,.5);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.pc:hover{border-color:var(--signal);transform:translateY(-4px)}
.fig{background:#0D3B66;border-bottom:1px solid rgba(159,219,255,.5);display:block}
.fig img,.fig svg{width:100%;height:auto;display:block}
.pc-b{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.pc .cat{color:var(--signal)}
.pc h3{font-size:1.65rem;font-weight:700;color:#fff}
.slug{font:400 .8rem var(--f-mono);color:var(--cyan);word-break:break-all}
.pc p{margin:0;color:#DCE9F5;font-size:1rem}
.pc ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.95rem;color:#DCE9F5}
.pc ul li{padding-left:1.1rem;position:relative}
.pc ul li::before{content:"";position:absolute;left:0;top:.7em;width:.55rem;height:2px;background:var(--signal)}
.pc ul.chips{margin-top:auto}
.pc ul.chips li{border-color:rgba(159,219,255,.6);color:var(--cyan)}
.links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.links a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font:600 .92rem var(--f-text);color:#fff;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:5px;text-decoration-thickness:2px}
.links a:hover{color:var(--signal)}
.hint{font:500 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 var(--s2)}
@media(min-width:900px){
  .hint{display:none}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;gap:var(--s4) var(--s3)}
  .pc{flex:none}
  .pc.feat{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
  .pc.feat .fig{border-bottom:0;border-right:1px solid rgba(159,219,255,.5);display:grid;align-items:center}
  .pc.feat h3{font-size:2.4rem}
}
@media(min-width:900px) and (max-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}}

/* skills */
.sk{display:grid;gap:2px;border:2px solid var(--ink);background:var(--ink)}
.sg{padding:var(--s3);background:var(--paper)}
.sg h3{font:500 .8rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);margin-bottom:var(--s2)}
.sg.key{background:var(--navy-deep);color:var(--paper)}
.sg.key h3{color:var(--signal)}
.sg.key ul.chips li{border-color:var(--cyan);color:var(--cyan)}
@media(min-width:760px){.sk{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sk{grid-template-columns:repeat(4,1fr)}.sg.key{grid-column:span 2}}

/* education */
.edu{background:var(--paper-2);border-top:2px solid var(--ink)}
.eg{display:grid;gap:var(--s3)}
.card{border:2px solid var(--ink);padding:var(--s3);background:var(--paper);display:grid;gap:.5rem;align-content:start}
.card h3{font-size:1.6rem;font-weight:800}
.card p{margin:0}
.badge{font:600 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:.15rem .5rem;justify-self:start}
.badge.prog{background:var(--signal)}
@media(min-width:900px){.eg{grid-template-columns:repeat(3,1fr)}}
.pc ul.chips{display:flex}
.pwrap{overflow:hidden}
@media(min-width:900px){.pwrap{overflow:visible}}
@media(min-width:760px){.sg.wide{grid-column:1/-1}}
@media(min-width:1100px){.sg.wide{grid-column:span 4}}
.more{margin-top:var(--s4)}
@media(max-width:700px){
  .more .pc-b>ul:not(.chips){display:none}
  .pc:not(.feat) .pc-b>ul:not(.chips) li:nth-child(n+3){display:none}
  .more .pc h3{min-height:0;font-size:1.35rem}
  .pc h3{font-size:1.4rem}
  .more{margin-top:var(--s3)}
}
@media(min-width:1100px){.more .pgrid>.pc:last-child{grid-column:2}}
.more-h{font:500 .85rem/1.4 var(--f-mono)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--cyan);border-top:1px solid rgba(159,219,255,.5);padding-top:var(--s3);margin-bottom:var(--s3)}
.count{display:none;font:500 .8rem var(--f-mono);color:var(--cyan);text-align:center;margin:0}
@media(max-width:899px){.count{display:block}}
.cl a.dl{background:var(--signal);border-color:var(--signal);color:var(--ink);font-weight:600;justify-content:center}
.cl a.dl:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}
/* compact phone */
@media(max-width:700px){
  section{padding:var(--s4) 0}
  .sec-h h2{font-size:1.9rem}
  .readouts{grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s2)}
  .readouts h2{grid-column:1/-1}
  .ro .v{font-size:1.9rem}
  .ro .l{font-size:.82rem}
  .dots i{max-width:7px}
  .facts{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s2)}
  .facts div{display:block}
  .facts dt{padding:0;font-size:.7rem}
  .facts dd{font-size:.95rem;line-height:1.35}
  .role-h .when{margin:0}
  .pc{flex:0 0 100%}
  .card .tag{font-size:.7rem}
  .card h3{font-size:1.3rem}
  .pc-b{padding:var(--s2) var(--s3)}
  body{font-size:1rem;line-height:1.55}
  .hero .wrap{padding-top:var(--s4);padding-bottom:var(--s4);gap:var(--s3)}
  .hero .sum{font-size:1.02rem}
  .about-g p:first-child{font-size:1.2rem}
  .facts div{grid-template-columns:7rem 1fr;padding:.5rem 0}
  .role-h{padding:var(--s2) var(--s3);gap:.4rem}
  .logo{width:120px;height:56px}
  .role h3{font-size:1.5rem}
  .role-b{padding:var(--s2) var(--s3)}
  .role ul{gap:.45rem;font-size:.95rem}
  .sec-h{margin-bottom:var(--s3)}
  .sg{padding:var(--s2) var(--s3)}
  .card{padding:var(--s2) var(--s3)}
  .pc{flex:0 0 84%}
  .pgrid{align-items:flex-start;scroll-padding-left:0}
  .cl a{font-size:.8rem;gap:.7rem;padding:.9rem}
  .btns .btn{flex:1 1 40%;justify-content:center}
  .btns .btn.p{flex:1 1 100%}
}
.hero .hrole{max-width:48rem}
@media(min-width:900px){.pc h3{min-height:2.1em}.pc.feat h3{min-height:0}}
footer .wrap{align-items:center}
.logo{width:170px}
@media(max-width:700px){.logo{width:130px}}

/* contact */
.contact{background:var(--navy-deep);color:#EAF3FB;background-image:linear-gradient(rgba(234,243,251,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,243,251,.05) 1px,transparent 1px);background-size:48px 48px}
.contact .sec-h p{margin:0;color:#DCE9F5;font-size:1.2rem}
.contact h2{color:#fff}
.cl{display:grid;gap:var(--s2);margin-top:var(--s3)}
.cl a{display:flex;align-items:center;gap:var(--s2);border:1px solid var(--cyan);padding:.9rem 1.2rem;min-height:56px;text-decoration:none;font:500 1.1rem var(--f-mono);overflow-wrap:anywhere;transition:background .2s,color .2s}
.cl a:hover{background:var(--cyan);color:var(--navy-deep)}
@media(min-width:760px){.cl{grid-template-columns:1fr 1fr}.cl a:last-child{grid-column:1/-1}}
@media(max-width:700px){.cl a{font-size:.8rem;gap:.7rem;padding:.9rem}}
.slug{word-break:normal;overflow-wrap:anywhere}
footer{background:var(--ink);color:#C9D6E3;padding:var(--s3) 0;font:.85rem var(--f-mono)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2)}
footer a{display:inline-flex;min-height:44px;align-items:center}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}