:root{
  --paper:#f2f4f7; --ink:#101b3a; --blue:#2f5bff; --yellow:#ffd23f; --mint:#bfe8d4; --grey:#5b6680; --line:#d3d9e4;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#141c33; --ink:#eef1f8; --grey:#a2adc7; --line:#2b3658; --mint:#2d5a50}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:#101b3a;padding:.5rem .8rem;border-radius:6px;z-index:10}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);line-height:1.02;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;margin-bottom:2rem}
section,.top,footer{padding-inline:max(16px,5vw)}
.top{display:flex;justify-content:space-between;align-items:center;padding-block:1.1rem;position:relative;z-index:2}
.mark{font:800 1.25rem var(--display);text-decoration:none;letter-spacing:-.02em}
nav{display:flex;gap:1.4rem}
nav a{text-decoration:none;font-weight:500;padding:.25rem 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--blue)}

.hero{position:relative;min-height:min(88vh,780px);display:grid;align-items:end;padding-block:2rem 4rem;overflow:hidden}
#skyline{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-text{position:relative;z-index:1;max-width:min(44rem,54vw)}
h1{font-size:clamp(2.75rem,8vw,5.75rem);font-weight:800;margin-bottom:1.4rem}
.lede{max-width:34rem;font-size:1.2rem;margin:0 0 1.8rem;color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:999px;box-shadow:0 5px 0 var(--blue);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--blue)}

.work{padding-block:5rem 3rem}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:center;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.glyph{width:260px;height:170px;max-width:100%;background:color-mix(in srgb,var(--mint) 55%,var(--paper));border-radius:4px}
.row h3{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;margin-bottom:.6rem}
.row p{margin:0 0 .6rem;max-width:38rem}
.stack{color:var(--grey);font-size:.95rem}

.about{padding-block:4rem}
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}
.big{font:500 clamp(1.4rem,3vw,2rem)/1.3 var(--display);margin:0;max-width:30rem}
.about-side p{margin-top:0;max-width:30rem}
.tools{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.2rem 0 0}
.tools li{background:var(--yellow);color:#101b3a;padding:.3rem .8rem;border-radius:999px;font-weight:600;font-size:.95rem}

.contact{padding-block:3rem 5rem;border-top:2px solid var(--ink)}
.muted{color:var(--grey);margin-top:.8rem}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.5rem 2.5rem;color:var(--grey);font-size:.95rem}
footer p{margin:0}

@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:1rem}
  .glyph{width:100%;height:auto;aspect-ratio:260/170}
  .about-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero{min-height:100svh;padding-bottom:2.5rem}
  .hero-text{max-width:none}
  nav{gap:1rem}
}

.soon{font-size:.9rem;color:var(--grey);font-style:italic;margin-top:.2rem}

.skills,.timeline{padding-block:3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}
.card{border:2px solid var(--ink);border-radius:6px;padding:1.3rem 1.4rem;background:color-mix(in srgb,var(--mint) 30%,var(--paper));box-shadow:0 5px 0 var(--blue)}
.card h3{font-size:1.5rem;font-weight:800;margin-bottom:.6rem}
.card p{margin:0}
.steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.steps li{display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.steps .when{font:800 1.4rem var(--display);color:var(--blue)}
.steps h3{font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.steps p{margin:0;max-width:38rem}
.print-link{color:var(--grey)}
@media (max-width:760px){.steps li{grid-template-columns:1fr;gap:.3rem}}
@media print{
  :root{--paper:#fff;--ink:#000;--grey:#444;--line:#bbb}
  .top nav,.skip,.btn,.print-link,#skyline,.glyph,footer a{display:none!important}
  .hero{min-height:0;padding-block:1rem}.hero-text{max-width:none}
  section{break-inside:avoid;padding-block:1rem}
  .card{box-shadow:none}
  a{text-decoration:none}
}