/* ===== tokens ===== */
:root{
  --paper:#E9E9E3;
  --paper-2:#E1E1D9;
  --ink:#111317;
  --ink-soft:#565B65;
  --accent:#1D3FE0;
  --accent-deep:#142fb0;
  --rule:rgba(17,19,23,.16);
  --rule-soft:rgba(17,19,23,.09);
  --display:"Archivo",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* type scale */
  --fs-display:clamp(2.4rem,6vw,4.5rem);   /* homepage hero */
  --fs-title:clamp(2.2rem,5vw,3.25rem);    /* project page title */
  --fs-h2:clamp(1.65rem,2.6vw,2.1rem);
  --fs-h3:1.15rem;
  --fs-lede:clamp(1.1rem,.4vw + 1rem,1.25rem);
  --fs-body:clamp(1rem,.2vw + .96rem,1.0625rem);
  --fs-small:.92rem;
  --fs-cap:.84rem;
  --fs-label:.7rem;

  /* spacing scale */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem;
  --sec:clamp(3rem,6vw,4.75rem);
  --gut:clamp(1.25rem,5vw,5rem);
  --measure:66ch;
  --side:12rem;                              /* label column */
  --gg:clamp(1.5rem,4vw,3rem);               /* grid gap */
}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(29,63,224,.14)}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:var(--body);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;font-family:var(--mono);font-size:.8rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
section{scroll-margin-top:4rem}
code{font-family:var(--mono);font-size:.84em;background:var(--paper-2);padding:.08em .32em}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0}
h2{font-size:var(--fs-h2);margin-bottom:var(--sp-2)}
h3{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.25;margin-bottom:.5rem}
p{margin:0 0 var(--sp-2)}
p:last-child{margin-bottom:0}
.lede{font-size:var(--fs-lede);line-height:1.5;max-width:60ch}
.mono{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;font-weight:500}

/* ===== shell ===== */
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
.topbar{position:sticky;top:0;z-index:50;background:rgba(233,233,227,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-soft)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding-block:.8rem}
.brand{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;font-weight:600;text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent)}
.nav{display:flex;gap:1.4rem;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);white-space:nowrap;padding-block:.2rem;border-bottom:1.5px solid transparent}
.nav a:focus-visible,.nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
@media(hover:hover){.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}}

/* section frame: label column + content column, one shared left edge */
.sec{padding-block:var(--sec);border-top:1px solid var(--rule-soft)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3) var(--gg)}
.grid>*{min-width:0}
@media(min-width:900px){.grid{grid-template-columns:var(--side) minmax(0,1fr)}}
.eyebrow{color:var(--accent);display:block;margin:0;padding-top:.45rem}
.eyebrow::before{content:"";display:block;width:2rem;height:2px;background:var(--accent);margin-bottom:.7rem}
.col{max-width:var(--measure);min-width:0}
.col.wide{max-width:none}
.block{margin-top:var(--sp-4)}                 /* standard gap between blocks in a section */

/* ===== hero ===== */
.hero{padding-block:clamp(3rem,9vh,6rem) var(--sec)}
.hero h1{font-size:var(--fs-display);font-weight:800;letter-spacing:-.045em;line-height:1;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{max-width:54ch;margin-top:var(--sp-3);font-size:var(--fs-lede);line-height:1.5}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-3)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.facts-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0 0;padding-top:var(--sp-2);border-top:1px solid var(--rule)}
.facts-row dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}
.facts-row dd{margin:0;line-height:1.35}

/* ===== project page header: aligned to the same two-column frame ===== */
.page-hero{padding-block:clamp(2rem,5vw,3.5rem) var(--sec)}
.page-hero h1{font-size:var(--fs-title);font-weight:800;letter-spacing:-.04em;line-height:1}
.page-hero .grid{align-items:start}
.crumb{display:inline-flex;align-self:start;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-soft)}
.crumb:hover{color:var(--accent)}

/* ===== chips (stack, flow) ===== */
.chain,.chips{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.chain li{display:flex;align-items:center;gap:.4rem}
.chain b,.chips b{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;font-weight:500;text-transform:uppercase;
  border:1px solid var(--rule);padding:.4rem .6rem;background:var(--paper-2);color:var(--ink);white-space:nowrap;display:inline-block;
}
.chain li:last-child b{border-color:var(--accent);color:var(--accent);background:transparent}
.chain li:not(:last-child)::after{content:"→";font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);opacity:.75}

/* ===== small parts ===== */
.badge{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--accent);color:var(--accent);padding:.3rem .55rem;
}
.badge::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
.project-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-bottom:var(--sp-2)}
.project-head h2,.project-head h1{margin:0}
.tagline{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.linkrow{display:flex;flex-wrap:wrap;gap:.1rem 1.5rem;margin-top:var(--sp-3)}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.tlink:hover{color:var(--accent)}
.tlink:active{color:var(--accent-deep)}
.tlink.main{font-weight:600}
.sub-h{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:var(--sp-4) 0 var(--sp-2);padding-bottom:.5rem;border-bottom:1px solid var(--rule)}

.bullets{margin:0;padding-left:1.1rem}
.bullets li{padding:.12rem 0}
.bullets li::marker{color:var(--accent)}
.two{display:grid;gap:var(--sp-3) var(--gg)}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}

/* label / value rows (stack, lab write-ups, auth notes): no inner borders */
.facts{margin:0}
.facts>div{display:grid;gap:.1rem;padding:.4rem 0}
.facts dt{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:600;padding-top:.2rem}
.facts dd{margin:0}
@media(min-width:700px){.facts>div{grid-template-columns:8rem minmax(0,1fr);gap:var(--sp-2)}}

/* decisions: flat list, one rule between items */
.decisions{list-style:none;margin:0;padding:0}
.decisions li{padding:var(--sp-2) 0;border-top:1px solid var(--rule-soft)}
.decisions li:first-child{border-top:0;padding-top:0}
.decisions h3{margin-bottom:.25rem}
.decisions p{color:var(--ink-soft)}

/* ===== screenshots: break out to the full content width on desktop ===== */
.shots{display:grid;gap:var(--sp-2) .9rem;margin:var(--sp-4) 0 0;padding:0;list-style:none;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:900px){
  .shots{grid-template-columns:repeat(6,minmax(0,1fr));margin-left:calc(-1 * (var(--side) + var(--gg)))}
}
.shots figure{margin:0}
.shots img{border:1px solid var(--rule);background:#0d1017;width:100%;aspect-ratio:480/1066;object-fit:cover}
.shots figcaption{font-size:var(--fs-cap);line-height:1.35;color:var(--ink-soft);margin-top:.5rem}
.shots figcaption b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:.1rem}

/* ===== lab write-ups ===== */
.lab{padding:var(--sp-3) 0;border-top:1px solid var(--rule)}
.lab:first-of-type{border-top:0;padding-top:0}
.lab-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;color:var(--ink-soft);margin:0 0 var(--sp-2)}
.lab .facts{margin-top:var(--sp-2)}
.reflect{border-left:2px solid var(--accent);padding:.1rem 0 .1rem var(--sp-2);margin:var(--sp-2) 0 0;color:var(--ink-soft)}

/* ===== custom auth: one accent rule, numbered flow ===== */
.auth{--ap:clamp(.9rem,2.2vw,1.5rem);border-left:3px solid var(--accent);padding-left:var(--ap);margin-left:calc(-1 * (var(--ap) + 3px))}
.auth h2{margin-bottom:.6rem}
.steps{list-style:none;margin:var(--sp-3) 0 0;padding:0;counter-reset:s}
.steps li{position:relative;counter-increment:s;padding:0 0 var(--sp-2) 2.6rem}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.1rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--accent);
  border:1.5px solid var(--accent);background:var(--paper);border-radius:50%;
}
.steps li:not(:last-child)::after{content:"";position:absolute;left:calc(.85rem - .75px);top:2rem;bottom:.1rem;width:1.5px;background:var(--rule)}
.steps strong{font-family:var(--display);font-weight:600;letter-spacing:-.01em;display:block;line-height:1.3}
.steps span{color:var(--ink-soft);display:block;font-size:var(--fs-small);line-height:1.5}
.auth-notes{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--rule-soft)}

/* ===== skills / education / contact ===== */
.skills{display:grid;gap:var(--sp-3) var(--gg)}
@media(min-width:760px){.skills{grid-template-columns:repeat(3,1fr)}}
.skills h3{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.skills ul{list-style:none;margin:0;padding:0;font-size:var(--fs-small)}
.skills li{padding:.16rem 0;color:var(--ink-soft)}
.edu{list-style:none;margin:0;padding:0}
.edu li{padding:.8rem 0;border-top:1px solid var(--rule-soft)}
.edu li:first-child{border-top:0;padding-top:0}
.edu small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
.edu strong{font-family:var(--display);font-weight:600}
.contact-links{display:grid;margin-top:var(--sp-3);border-top:1px solid var(--rule)}
.contact-links a{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;
  padding:1rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left .18s ease,background-color .18s ease;
}
.contact-links a:hover,.contact-links a:focus-visible{padding-left:.8rem;background:var(--paper-2)}
.contact-links a:active{background:var(--rule-soft)}
.contact-links strong{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:-.015em}
.contact-links span{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft);overflow-wrap:anywhere}
.contact-links a:hover span{color:var(--accent)}
footer{padding-block:var(--sp-4) var(--sp-5);border-top:1px solid var(--rule-soft);color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--accent)}

/* ===== motion ===== */
.rise{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

/* ===== mobile ===== */
@media(max-width:700px){
  .topbar .wrap{flex-direction:column;align-items:stretch;gap:0;padding-block:.5rem 0}
  .nav{gap:1rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .nav a{padding-block:.78rem;font-size:.68rem;letter-spacing:.07em}
  .brand{padding-block:.15rem}
  section{scroll-margin-top:5.2rem}
  /* flows scroll on one line; stack chips wrap */
  .chain{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) .5rem}
  .chain::-webkit-scrollbar{display:none}
  .chain li{flex:0 0 auto}
  /* screenshots: one swipeable row, bleeding to the screen edge */
  .shots{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(150px,52vw);
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding:.25rem var(--gut) .8rem;
  }
  .shots figure{scroll-snap-align:start}
  .btn{flex:1 1 calc(50% - .35rem)}
}
@media(max-width:420px){.nav{gap:.75rem}.nav a{font-size:.64rem;letter-spacing:.05em}}
@media(max-width:380px){.nav .opt{display:none}}
@media(max-width:340px){.btn{flex-basis:100%}}
@media(hover:none){.contact-links a:hover{padding-left:.2rem;background:transparent}}