/* Shared styles for the Resume, Projects and About pages. Tokens match the AI work page (index.html). */
@font-face{font-family:"Archivo";src:url(archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#FFFFFF; --bg-soft:#F3F4FA; --bg-card:#FFFFFF; --bg-sunk:#F7F8FC;
  --ink:#15173D; --ink-2:#464A6B; --ink-3:#5E6286;
  --line:#DDE0EC; --line-strong:#B6BAD2;
  --hero:#15173D; --hero-ink:#FFFFFF; --hero-ink-2:#C5C8E6; --hero-line:rgba(255,255,255,.16);
  --focus:#4B3BFF; --focus-hero:#FFD23F;
  --lc:#6A3DF0; --af:#F2A11F; --pm:#F0602B; --cm:#D6336C; --mo:#2B6FF2; --ds:#0E9F94;
  --radius-lg:28px; --radius:18px; --radius-sm:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0D0F22; --bg-soft:#13152F; --bg-card:#161937; --bg-sunk:#11132B;
    --ink:#EEEFFA; --ink-2:#B9BCD9; --ink-3:#9A9DBE;
    --line:#2A2E57; --line-strong:#41467E;
    --hero:#191C47; --hero-ink:#FFFFFF; --hero-ink-2:#C5C8E6; --hero-line:rgba(255,255,255,.14);
    --focus:#9C93FF; --focus-hero:#FFD23F;
    --lc:#8D6BFF; --af:#F6B13D; --pm:#FF7A45; --cm:#F0558C; --mo:#5590FF; --ds:#27BCB0;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D0F22; --bg-soft:#13152F; --bg-card:#161937; --bg-sunk:#11132B;
  --ink:#EEEFFA; --ink-2:#B9BCD9; --ink-3:#9A9DBE;
  --line:#2A2E57; --line-strong:#41467E;
  --hero:#191C47; --hero-ink:#FFFFFF; --hero-ink-2:#C5C8E6; --hero-line:rgba(255,255,255,.14);
  --focus:#9C93FF; --focus-hero:#FFD23F;
  --lc:#8D6BFF; --af:#F6B13D; --pm:#FF7A45; --cm:#F0558C; --mo:#5590FF; --ds:#27BCB0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));background:var(--hero)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;font-stretch:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.top :focus-visible,.foot :focus-visible{outline-color:var(--focus-hero)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:#fff;color:#15173D;padding:12px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1216px;margin-inline:auto;padding-inline:clamp(16px,4.6vw,56px)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- top bar (same markup as index.html) ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--hero);color:var(--hero-ink);border-bottom:1px solid var(--hero-line)}
@supports (backdrop-filter:blur(8px)){.top{background:color-mix(in srgb,var(--hero) 90%,transparent);backdrop-filter:saturate(1.3) blur(12px)}}
.top-in{display:flex;align-items:center;gap:20px;min-height:64px}
.me{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.mono{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;color:#15173D;font-weight:860;font-stretch:125%;font-size:13.5px;letter-spacing:-.02em}
.me-name{font-weight:720;font-stretch:108%;font-size:16px;letter-spacing:-.01em}
.pages{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:6px 2px}
.pages::-webkit-scrollbar{display:none}
.pages a{padding:8px 13px;border-radius:999px;text-decoration:none;font-size:14.5px;font-weight:560;color:var(--hero-ink-2);white-space:nowrap}
.pages a:hover{color:#fff;background:rgba(255,255,255,.09)}
.pages a[aria-current="page"]{color:#15173D;background:#fff}

/* ---------- hero ---------- */
.hero{background:var(--hero);color:var(--hero-ink);padding:clamp(44px,6vw,88px) 0 clamp(36px,5vw,64px);position:relative;isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(106,61,240,.28),transparent 70%);z-index:-1;pointer-events:none}
.kicker{font-size:15px;font-weight:620;color:var(--hero-ink-2);margin:0 0 22px}
.hero h1{margin:0;font-size:clamp(40px,5.7vw,84px);line-height:.98;font-weight:830;font-stretch:110%;letter-spacing:-.04em;text-wrap:balance}
.dek{margin-top:clamp(20px,3vw,30px);font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--hero-ink-2);max-width:62ch}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.soft{background:var(--bg-soft)}
.sec.tight{padding-top:clamp(40px,5vw,64px)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px 64px;align-items:end;margin-bottom:clamp(30px,4.5vw,52px)}
.sec-head h2{margin:0;font-size:clamp(32px,4.5vw,60px);line-height:1;font-weight:820;font-stretch:113%;letter-spacing:-.036em;max-width:16ch;text-wrap:balance}
.sec-head p{color:var(--ink-2);font-size:18px;line-height:1.55;max-width:52ch}
h3{margin:0;font-size:clamp(21px,2vw,26px);line-height:1.15;font-weight:760;font-stretch:108%;letter-spacing:-.018em}
.mini-h{font-size:14px;font-weight:680;color:var(--ink-2);margin:0 0 10px}
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,38px);min-width:0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-card);font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
a.pill:hover{border-color:var(--line-strong);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:680;font-size:15.5px;text-decoration:none;min-height:44px}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.hero .btn{background:#fff;color:#15173D}
.hero .btn.ghost{background:transparent;color:#fff}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- footer ---------- */
.foot{background:var(--hero);color:var(--hero-ink-2);padding:40px 0 48px;font-size:14.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.foot b{color:#fff;font-weight:700}
.foot a{color:#fff}

@media (max-width:960px){.sec-head{grid-template-columns:1fr}}
@media (max-width:640px){
  body{font-size:16.5px}
  .top-in{gap:10px;min-height:58px}
  .me-name{display:none}
  .pages a{padding:7px 10px;font-size:14px}
}
@media (max-width:420px){.pages{gap:0}.pages a{padding:6px 7px;font-size:13.5px}}
@media (max-width:380px){.top-in{gap:8px}.pages a{padding:6px 5px;font-size:13px}}
@media print{.top,.skip{display:none}.hero,.foot{background:#fff;color:#000}}