@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600;700&family=Archivo:wght@300;400;500;600;700&display=swap');

:root{
  --display:'Bebas Neue',Impact,sans-serif;
  --head:'Oswald',system-ui,sans-serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Oswald',ui-monospace,Consolas,monospace;
  --bg:#ffffff; --panel:#f5f5f5; --tint:#f4f4f3; --ink:#0a0a0a; --ink2:#2e2e2e; --dim:#666; --dim2:#9a9a9a;
  --line:#e6e6e6; --line2:#f0f0f0; --line3:#0a0a0a;
  --accent:#0a0a0a; --pop:#2f5bff; --pop-dark:#1e3fd0;
  --up:#12b76a; --idle:#e0a100; --down:#d1382c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.55;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%}
.h1big,.h1sub,.lede,.sec,.dz-gh,.dz-h h3,.dz-gblurb,.dz-n,.dz-tk li{overflow-wrap:break-word}
::selection{background:var(--ink);color:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
section{padding:78px 0;border-top:1px solid var(--line);scroll-margin-top:78px}
/* alternating value bands so sections read as distinct without adding color */
.exp,#system{background:var(--tint)}
.exp,#skills,#system,#work{border-top:1px solid var(--line)}

/* section kicker + big display title */
.kicker{font-family:var(--head);font-weight:600;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:30px;height:2px;background:var(--ink)}
h2.sec{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:.92;
  letter-spacing:.012em;text-transform:uppercase;color:var(--ink)}
.sec-sub{font-family:var(--sans);color:var(--dim);font-size:1.02rem;margin-top:16px;max-width:62ch;line-height:1.6;
  padding-bottom:22px;border-bottom:1px solid var(--line)}

/* ===== MASTHEAD ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:60px}
.brand{font-family:var(--head);font-weight:700;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.brand i{font-style:normal}
.navright{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.navlinks{display:flex;gap:22px}
.navlinks a{font-family:var(--head);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;position:relative;transition:color .18s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--pop);transition:width .22s}
.navlinks a:hover{color:var(--pop)}.navlinks a:hover::after{width:100%}
@media(max-width:640px){.navlinks{display:none}}

/* live status (monochrome) */
.sys{display:flex;gap:12px;align-items:center;font-family:var(--head);font-weight:500;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim2);flex-wrap:wrap}
.syscount{color:var(--ink)}
.sysitem{display:inline-flex;align-items:center;gap:5px}
a.sysitem{color:inherit;text-decoration:none;cursor:pointer}
a.sysitem:hover{color:var(--pop)}
.sysarrow{font-size:.82em;opacity:.45}
a.sysitem:hover .sysarrow{opacity:1}
.sysitem.down,.syscount.down{color:var(--dim2)}
.sysitem.idle,.syscount.idle{color:var(--dim)}
.sysdim{color:var(--dim2)}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--up);display:inline-block;animation:pulse 2.4s infinite}
.sysitem.down .sdot,.syscount.down .sdot{background:var(--down)}
.sysitem.idle .sdot,.syscount.idle .sdot{background:var(--idle)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ===== HERO ===== */
.hero2 .wrap{padding:88px 32px 64px}
.hero2 .eyebrow{font-family:var(--head);font-weight:600;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);margin-bottom:30px}
.h1big{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,8.4vw,7rem);line-height:.86;
  letter-spacing:.006em;text-transform:uppercase;color:var(--ink)}
.h1big em{font-style:normal;color:var(--ink)}
.h1sub{font-family:var(--sans);font-size:clamp(1.05rem,1.8vw,1.32rem);font-weight:400;line-height:1.5;color:var(--ink2);max-width:52ch;margin-top:28px}
.lede{font-family:var(--sans);font-size:1.02rem;line-height:1.68;color:var(--dim);max-width:66ch;margin-top:20px}
.hero2 .cta{display:flex;gap:26px;align-items:center;margin-top:36px;flex-wrap:wrap}
.btn{font-family:var(--head);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.2s}
.btn.p{background:var(--ink);color:#fff;padding:13px 24px}
.btn.p:hover{background:var(--pop)}
.btn.g{color:var(--ink);padding:13px 2px;border-bottom:2px solid var(--ink)}
.btn.g:hover{color:var(--pop);border-color:var(--pop)}

/* editorial stat block — giant condensed numerals, hairline separated */
.tldr-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:58px;border-top:2px solid var(--ink)}
@media(max-width:760px){.tldr-stats{grid-template-columns:1fr 1fr}}
.tldr-stats div{padding:24px 22px 22px 0;border-right:1px solid var(--line)}
.tldr-stats div:last-child{border-right:none}
.tldr-stats b{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,5.4vw,4.4rem);line-height:.82;color:var(--ink);display:block;letter-spacing:.01em}
.tldr-stats span{font-family:var(--head);font-weight:500;font-size:.68rem;letter-spacing:.09em;color:var(--dim);line-height:1.4;display:block;margin-top:14px;text-transform:uppercase}

/* ===== EXPERIENCE ===== */
.exp{padding:0}
.exp .wrap{padding:46px 32px}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:6px}
@media(max-width:720px){.exp-grid{grid-template-columns:1fr}}
.exp-item{padding:6px 34px;border-left:1px solid var(--line)}
.exp-item:first-child{padding-left:0;border-left:none}
.exp-org{font-family:var(--head);font-weight:600;font-size:1.24rem;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.exp-role{font-family:var(--head);font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-top:7px}
.exp-what{font-family:var(--sans);font-size:.94rem;color:var(--ink2);margin-top:12px;line-height:1.55}
.exp-badge{display:inline-block;margin-top:12px;font-family:var(--head);font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:4px 10px}

/* ===== SKILLS ===== */
#skills .stackgrid{margin-top:6px}
.stackgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.stackgrid{grid-template-columns:1fr 1fr}}
.scol{padding:0 26px;border-left:1px solid var(--line)}
.scol:first-child{padding-left:0;border-left:none}
.scol h4{font-family:var(--head);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.scol div{font-family:var(--sans);font-size:.92rem;color:var(--ink2);padding:6px 0}

/* ===== SYSTEM / GRAPH ===== */
#system .graphwrap{margin-bottom:20px}
.graphwrap{border:1px solid var(--line);background:#fff;padding:20px;overflow:hidden;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.gnode{transition:opacity .2s}
.gnode text{transition:fill .18s}
.gnode:hover circle{stroke:var(--pop)}
.gnode:hover text{fill:var(--pop);font-weight:600}
.graph-cap{font-family:var(--head);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);text-align:center;margin-top:14px}

/* role-lens filter */
.lensbar{display:flex;align-items:center;gap:16px;margin:16px 0 4px;flex-wrap:wrap}
.lens-count{font-family:var(--head);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--pop)}
.is-hidden{display:none!important}
.lens-label{font-family:var(--head);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dim2)}
.lens{display:inline-flex;gap:4px}
.lens button{font-family:var(--head);font-weight:600;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  background:none;border:none;border-bottom:2px solid transparent;padding:5px 12px;cursor:pointer;transition:.16s}
.lens button:hover{color:var(--pop)}
.lens button.on{color:var(--pop);border-color:var(--pop)}

/* ===== WORK / DOSSIER ===== */
#work .dz-group:first-of-type{margin-top:6px}
.dz-group{margin-top:58px}
.dz-gh{font-family:var(--head);font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:8px;display:flex;align-items:baseline;gap:12px}
.dz-gh .dz-note{color:var(--dim2);letter-spacing:.06em;font-size:.68rem;font-weight:400}
.dz-gblurb{font-family:var(--sans);font-size:1.04rem;color:var(--ink2);line-height:1.5;margin:16px 0 28px;max-width:74ch}

.dz{padding:32px 0;border-bottom:1px solid var(--line);transition:opacity .3s;scroll-margin-top:80px}
.dz.has-viz{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
@media(max-width:720px){.dz.has-viz{grid-template-columns:1fr;gap:18px}}
.dz.dim{opacity:.26}
.dz.flash .dz-viz{outline:2px solid var(--ink);outline-offset:6px}
.dz-viz{align-self:start}
.dz-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.dz-h h3{font-family:var(--head);font-weight:600;font-size:1.5rem;line-height:1.06;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.dz-m{font-family:var(--display);font-weight:400;font-size:1.9rem;color:var(--ink);white-space:nowrap;letter-spacing:.01em;line-height:.9}
.dz-step{font-family:var(--head);font-weight:600;font-size:.64rem;letter-spacing:.1em;color:var(--ink);border:1px solid var(--ink);
  padding:2px 8px;margin-right:12px;vertical-align:middle;white-space:nowrap;text-transform:uppercase}
.dz-sub{font-family:var(--head);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim2);margin-top:9px}
.dz-sk{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.dz-sk span{font-family:var(--head);font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);padding:4px 11px}

/* collapsible "how it works" */
.dz-more{margin-top:18px;border-top:1px solid var(--line)}
.dz-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:13px 0 2px;
  font-family:var(--head);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pop);user-select:none}
.dz-more>summary::-webkit-details-marker{display:none}
.dz-more>summary::after{content:"↓";transition:transform .22s}
.dz-more[open]>summary::after{transform:rotate(180deg)}
.dz-more>summary:hover{color:var(--pop-dark)}
.dz-more .c{display:none}.dz-more[open] .o{display:none}.dz-more[open] .c{display:inline}
.dz-n{font-family:var(--sans);font-size:1rem;line-height:1.72;color:var(--ink2);margin-top:14px;max-width:74ch}
/* real project screenshots inside the dropdown — grayscale, color on hover */
.dz-shotsnote{font-family:var(--sans);font-size:.88rem;font-style:italic;color:var(--dim);line-height:1.5;margin:16px 0 4px;max-width:76ch}
.dz-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin:10px 0 6px}
.dz-shot{margin:0}
.dz-shot img{display:block;width:100%;border:1px solid var(--line3);filter:grayscale(1) contrast(1.03);transition:filter .4s ease}
.dz-shot img:hover{filter:none}
.dz-shot figcaption{font-family:var(--head);font-weight:500;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);margin-top:9px}
.dz-shot figcaption::after{content:" · hover for color";color:var(--g3,#c4c4c4)}
.dz-tk{margin-top:20px;padding-top:18px;border-top:1px solid var(--line2)}
.dz-tkh{font-family:var(--head);font-weight:600;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim2);margin-bottom:12px}
.dz-tk ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.dz-tk li{position:relative;padding-left:22px;font-family:var(--sans);font-size:.94rem;line-height:1.62;color:var(--ink2);max-width:78ch}
.dz-tk li::before{content:"—";position:absolute;left:0;color:var(--ink)}
.dz-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;font-family:var(--head);font-weight:500;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.dz-l .arw{color:var(--ink)}
.dz-l2{display:flex;gap:22px;margin-top:16px}
.dz-l2 a{font-family:var(--head);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pop);text-decoration:none;border-bottom:2px solid var(--pop);padding-bottom:1px;transition:.16s}
.dz-l2 a:hover{color:var(--pop-dark);border-color:var(--pop-dark)}

/* ===== FOOTER ===== */
footer{padding:84px 0 62px;border-top:2px solid var(--ink)}
footer .big{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);max-width:20ch}
footer .links{margin-top:30px;display:flex;gap:28px;font-family:var(--head);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap}
footer a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;transition:.16s}
footer a:hover{color:var(--dim);border-color:var(--dim)}
.cred{margin-top:36px;font-family:var(--head);font-weight:400;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}

/* ===== MOTION ===== */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  /* subtle two-beat stagger: heading arrives, then the section body rises behind it */
  .reveal .kicker,.reveal .sec,.reveal .sec-sub,.reveal .dz-gh,.reveal .dz-gblurb,
  .reveal .exp-item,.reveal .scol,.reveal .graphwrap,.reveal .dz{opacity:0;transform:translateY(12px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in .kicker,.reveal.in .sec,.reveal.in .sec-sub,.reveal.in .dz-gh,.reveal.in .dz-gblurb,
  .reveal.in .exp-item,.reveal.in .scol,.reveal.in .graphwrap,.reveal.in .dz{opacity:1;transform:none}
  .reveal.in .kicker,.reveal.in .dz-gh{transition-delay:.04s}
  .reveal.in .sec{transition-delay:.11s}
  .reveal.in .sec-sub,.reveal.in .dz-gblurb{transition-delay:.18s}
  .reveal.in .exp-item,.reveal.in .scol,.reveal.in .graphwrap,.reveal.in .dz{transition-delay:.24s}
  .hero2 .eyebrow,.hero2 .h1big,.hero2 .h1sub,.hero2 .lede,.hero2 .cta,.hero2 .tldr-stats{opacity:0;animation:riseIn .9s cubic-bezier(.2,.7,.3,1) forwards}
  .hero2 .eyebrow{animation-delay:.05s}.hero2 .h1big{animation-delay:.16s}.hero2 .h1sub{animation-delay:.34s}
  .hero2 .lede{animation-delay:.46s}.hero2 .cta{animation-delay:.56s}.hero2 .tldr-stats{animation-delay:.66s}
}
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* graph self-draws on scroll (JS adds .anim, then .draw when in view) */
@media(prefers-reduced-motion:no-preference){
  #graph.anim line{stroke-dasharray:640;stroke-dashoffset:640}
  #graph.anim circle,#graph.anim text{opacity:0}
  #graph.anim.draw line{animation:gdraw 1.15s cubic-bezier(.45,.6,.2,1) forwards}
  #graph.anim.draw circle{animation:gfade .55s ease .3s forwards}
  #graph.anim.draw text{animation:gfade .7s ease .5s forwards}
}
@keyframes gdraw{to{stroke-dashoffset:0}}
@keyframes gfade{from{opacity:0}to{opacity:1}}

/* colophon */
.colophon{margin-top:12px;font-family:var(--head);font-weight:400;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}

/* mobile hardening */
@media(max-width:560px){
  .dz-h{flex-wrap:wrap;gap:2px}
  .dz-m{white-space:normal}
  .tldr-stats div{padding-right:12px}
  .tldr-stats b{font-size:2.4rem}
}