/* Hallmark · macrostructure: Feature-Stack · modern-minimal · green accent */
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-h)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--color-signal);color:var(--color-ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em;line-height:1.08;overflow-wrap:anywhere}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);display:inline-flex;align-items:center;gap:.6ch}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--color-signal);border-radius:2px}

/* ===== N1b · three-section nav ===== */
.nav{position:sticky;top:0;z-index:30;background:oklch(98% 0.006 150 / .82);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-rule)}
.nav .row{display:flex;align-items:center;gap:var(--sp-6);padding-block:var(--sp-3)}
.wordmark{font-family:var(--font-mono);font-weight:500;font-size:var(--text-md);letter-spacing:-0.02em;color:var(--color-ink);display:inline-flex;align-items:center;gap:.5ch}
.wordmark .dot{width:9px;height:9px;background:var(--color-signal);border-radius:2px;box-shadow:0 0 0 3px oklch(48% 0.15 150 / .18)}
.nav .links{margin-inline:auto;display:flex;gap:var(--sp-6)}
.nav .links a{color:var(--color-muted);font-size:var(--text-sm);font-weight:500}
.nav .links a:hover{color:var(--color-ink)}
.nav .cta{display:inline-flex}
@media(max-width:720px){.nav .links{display:none}}

.btn{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);
  padding:.55rem 1.1rem;border-radius:var(--radius);cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.btn.primary{background:var(--color-ink);color:var(--color-paper);border:1px solid var(--color-ink)}
.btn.primary:hover{transform:translateY(-1px);background:var(--color-accent-h);border-color:var(--color-accent-h)}
.btn.primary:active{transform:translateY(0)}
.btn.outline{background:transparent;color:var(--color-ink);border:1px solid var(--color-rule)}
.btn.outline:hover{transform:translateY(-1px);border-color:var(--color-accent)}

/* ===== hero ===== */
.hero{padding-block:var(--sp-24) var(--sp-16)}
.hero .eyebrow{margin-bottom:var(--sp-5)}
.hero h1{font-size:var(--text-display);max-width:16ch}
.hero h1 u{text-decoration:none;color:var(--color-accent);background:linear-gradient(transparent 62%,oklch(86% 0.24 150 / .45) 0);}
.hero p{color:var(--color-muted);font-size:var(--text-md);max-width:56ch;margin-top:var(--sp-6)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}

/* ===== stats strip (real numbers, count-up) ===== */
.stats{border-block:1px solid var(--color-rule);background:var(--color-paper-2)}
.stats .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);padding-block:var(--sp-10)}
@media(max-width:680px){.stats .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}}
.stat .num{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.02em;color:var(--color-ink);font-variant-numeric:tabular-nums}
.stat .num .s{color:var(--color-accent)}
.stat .lbl{color:var(--color-neutral);font-size:var(--text-sm);margin-top:var(--sp-1)}

/* ===== feature stack ===== */
.stack{padding-block:var(--sp-20)}
.stack .head{max-width:48ch;margin-bottom:var(--sp-12)}
.stack .head h2{font-size:var(--text-2xl)}
.stack .head p{color:var(--color-muted);margin-top:var(--sp-4);font-size:var(--text-md)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center;padding-block:var(--sp-12);border-top:1px solid var(--color-rule)}
.feature:nth-child(even) .media{order:-1}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:var(--sp-6)}.feature:nth-child(even) .media{order:0}}
.feature .k{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);letter-spacing:.12em;text-transform:uppercase}
.feature h3{font-size:var(--text-xl);margin:var(--sp-3) 0 var(--sp-4)}
.feature p{color:var(--color-muted)}
.feature .tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);border:1px solid var(--color-rule);border-radius:6px;padding:.2rem .55rem}
/* media block: pure CSS art, no fake browser chrome */
.media{aspect-ratio:4/3;border:1px solid var(--color-rule);border-radius:var(--radius);background:
   radial-gradient(120% 120% at 100% 0,oklch(93% 0.03 150) 0,var(--color-paper-2) 55%);
   position:relative;overflow:hidden;min-width:0}
.media .glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:clamp(2rem,7vw,3.4rem);color:var(--color-accent);opacity:.9}
.media .grid-lines{position:absolute;inset:0;background:
   linear-gradient(var(--color-rule) 1px,transparent 1px) 0 0/100% 28px,
   linear-gradient(90deg,var(--color-rule) 1px,transparent 1px) 0 0/28px 100%;opacity:.4}

/* ===== projects ===== */
.projects{padding-block:var(--sp-20);border-top:1px solid var(--color-rule)}
.projects .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--sp-4);margin-bottom:var(--sp-10)}
.projects .head h2{font-size:var(--text-2xl)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border:1px solid var(--color-rule);border-radius:var(--radius);background:var(--color-paper);
  transition:transform var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.card:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.card h3{font-size:var(--text-md)}
.card .state{font-family:var(--font-mono);font-size:var(--text-xs);display:inline-flex;align-items:center;gap:.5ch;color:var(--color-neutral)}
.card .state.live{color:var(--color-accent)}
.card .state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.card p{color:var(--color-muted);font-size:var(--text-sm);flex:1}
.card .links{display:flex;gap:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-xs)}

/* ===== hire ===== */
.hire{padding-block:var(--sp-20);border-top:1px solid var(--color-rule)}
.hire .box{border:1px solid var(--color-rule);border-radius:calc(var(--radius) + 4px);background:var(--color-paper-2);padding:var(--sp-16) var(--sp-8);text-align:center}
.hire h2{font-size:var(--text-2xl);max-width:20ch;margin-inline:auto}
.hire p{color:var(--color-muted);max-width:52ch;margin:var(--sp-4) auto 0}
.hire .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}

/* ===== Ft1 · mast-headed footer ===== */
.foot{border-top:1px solid var(--color-rule);background:var(--color-paper-2)}
.foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-6);padding-block:var(--sp-12)}
.foot .mast{max-width:34ch}
.foot .mast .wordmark{font-size:var(--text-lg)}
.foot .mast p{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--sp-3)}
.foot .cols{display:flex;gap:var(--sp-16)}
.foot .cols h4{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-neutral);margin-bottom:var(--sp-3)}
.foot .cols a{display:block;color:var(--color-muted);font-size:var(--text-sm);padding-block:.15rem}
.foot .cols a:hover{color:var(--color-ink)}
.foot .base{border-top:1px solid var(--color-rule);padding-block:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}
@media(max-width:640px){.foot .cols{gap:var(--sp-8)}}

/* reveal + count-up */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}