/* ============================================================
   armin.zardkoohi.com - shared design system
   Hand-built static. Inter + JetBrains Mono. Larger, readable
   type with Linear/Next.js restraint; diagrams keep the KB
   light-canvas convention so article visuals drop in unchanged.
   Light theme only.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Monaco,monospace;

  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px;

  /* neutrals - warm stone, chosen to bias toward the violet accent */
  --bg:#fbfbfa;
  --bg-1:#f4f4f2;
  --bg-2:#ffffff;
  --bg-glass:rgba(251,251,250,.82);

  --line-1:rgba(20,20,22,.07);
  --line-2:rgba(20,20,22,.11);
  --line-3:rgba(20,20,22,.17);
  --line-4:rgba(20,20,22,.26);

  --t-1:#111113;
  --t-2:#2b2b30;
  --t-3:#56565e;
  --t-4:#78787f;
  --t-5:#a2a2a9;

  --acc:#6d4aff;          /* violet, a touch bluer/brighter than before */
  --acc-2:#ea580c;        /* amber-orange secondary */
  --acc-soft:color-mix(in srgb,var(--acc) 12%,transparent);
  --good:#15803d;
  --bad:#dc2626;

  --title-from:#111113;
  --title-to:#6b6b73;

  --shadow-sm:0 1px 2px rgba(17,17,19,.05);
  --shadow-md:0 6px 24px -8px rgba(17,17,19,.14),0 2px 6px -2px rgba(17,17,19,.08);
  --shadow-lg:0 20px 48px -16px rgba(17,17,19,.22);

  --diag-canvas:#ffffff;
  --diag-canvas-brd:rgba(20,20,22,.07);

  --nav-h:60px;
  --maxw:1120px;
  --read:720px;

  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  margin:0; background:var(--bg); color:var(--t-1);
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv11';
}
::selection{background:color-mix(in srgb,var(--acc) 26%,transparent)}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line-4);background-clip:padding-box}

.shell{
  max-width:var(--maxw); margin:0 auto;
  padding-left:max(22px,env(safe-area-inset-left,0px));
  padding-right:max(22px,env(safe-area-inset-right,0px));
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:var(--bg-glass); backdrop-filter:saturate(1.6) blur(10px); -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line-1);
}
.nav .shell{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{display:inline-flex; align-items:center; gap:11px; font-weight:600; font-size:16px; letter-spacing:-.02em; color:var(--t-1)}
.brand .mk{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#000));
  color:#fff; font-family:var(--font-mono); font-weight:600; font-size:13px; box-shadow:var(--shadow-sm);
}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:14.5px; color:var(--t-3); padding:8px 12px; border-radius:8px; font-weight:500;
  transition:color .14s, background .14s;
}
.nav-links a:hover{color:var(--t-1); background:var(--bg-1)}
.nav-links a.cta{color:#fff; background:var(--acc); padding:8px 15px}
.nav-links a.cta:hover{background:color-mix(in srgb,var(--acc) 88%,#000); color:#fff}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:transparent;
  color:var(--t-3); cursor:pointer; display:grid; place-items:center; font-size:16px; transition:color .14s,border-color .14s;
}
.icon-btn:hover{color:var(--t-1); border-color:var(--line-3)}
@media (max-width:560px){
  .nav-links a:not(.cta){display:none}
  .brand .full{display:none}
}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:550;
  padding:11px 18px; border-radius:11px; border:1px solid var(--line-2); background:var(--bg-2);
  color:var(--t-1); cursor:pointer; transition:transform .12s, border-color .14s, background .14s; box-shadow:var(--shadow-sm);
}
.btn:hover{border-color:var(--line-3); transform:translateY(-1px)}
.btn.primary{background:var(--acc); color:#fff; border-color:transparent}
.btn.primary:hover{background:color-mix(in srgb,var(--acc) 88%,#000)}
.btn .arr{transition:transform .14s}
.btn:hover .arr{transform:translateX(2px)}
.tlink{color:var(--acc); font-weight:550; border-bottom:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.tlink:hover{border-bottom-color:var(--acc)}

/* eyebrow / labels */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--t-4);
}
.pill{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--t-2);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:100px; padding:7px 14px;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* ---------- footer ---------- */
.foot-site{
  margin-top:90px; border-top:1px solid var(--line-1); background:var(--bg-1);
}
.foot-site .shell{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between; padding-block:34px}
.foot-site .fl{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center}
.foot-site a{color:var(--t-3); font-size:14.5px; font-weight:500}
.foot-site a:hover{color:var(--t-1)}
.foot-site .cpy{color:var(--t-4); font-size:13.5px}

/* ============================================================
   HOME
   ============================================================ */
.hero{padding-block:clamp(56px,10vw,104px) 24px}
.hero .pill{margin-bottom:26px}
.hero h1{
  font-size:clamp(40px,7.5vw,74px); font-weight:650; letter-spacing:-.045em; line-height:1.02;
  margin:0 0 22px; max-width:15ch; text-wrap:balance;
  background:linear-gradient(174deg,var(--title-from),var(--title-to));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hero .intro{font-size:clamp(18px,2.4vw,22px); line-height:1.55; color:var(--t-2); max-width:640px; margin:0 0 18px}
.hero .intro strong{color:var(--t-1); font-weight:600}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:30px}

.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 26px}
.section-head h2{font-size:clamp(24px,3.4vw,32px); font-weight:620; letter-spacing:-.03em; margin:0}
.section-head .eyebrow{margin-bottom:10px; display:block}
.section{padding-block:40px}

/* project cards */
.cards{display:grid; grid-template-columns:1fr; gap:16px}
.pcard{
  position:relative; display:grid; grid-template-columns:1fr; gap:4px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-3);
  padding:26px 28px; box-shadow:var(--shadow-sm); transition:transform .14s, border-color .14s, box-shadow .14s; overflow:hidden;
}
.pcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);opacity:0;transition:opacity .14s}
.pcard:hover{transform:translateY(-2px); border-color:var(--line-3); box-shadow:var(--shadow-md)}
.pcard:hover::before{opacity:1}
.pcard .tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.ptag{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--t-3); background:var(--bg-1); border:1px solid var(--line-1); border-radius:6px; padding:3px 9px}
.ptag.live{color:var(--good); border-color:color-mix(in srgb,var(--good) 30%,var(--line-1))}
.ptag.soon{color:var(--t-4)}
.pcard h3{font-size:clamp(21px,2.6vw,26px); font-weight:620; letter-spacing:-.025em; margin:0 0 8px; line-height:1.15}
.pcard p{font-size:16px; color:var(--t-2); line-height:1.55; margin:0 0 16px; max-width:62ch}
.pcard .read{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:550; color:var(--acc)}
.pcard .read .arr{transition:transform .14s}
.pcard:hover .read .arr{transform:translateX(3px)}
.pcard.disabled{pointer-events:none; opacity:.7}
.pcard.disabled:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--line-2)}
a.pcard{color:inherit}
@media (min-width:720px){ .cards.two{grid-template-columns:1fr 1fr} }

/* about strip */
.about{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; padding-block:20px}
@media (max-width:760px){ .about{grid-template-columns:1fr; gap:26px} }
.about p{font-size:17.5px; color:var(--t-2); line-height:1.7; margin:0 0 16px; max-width:60ch}
.about .facts{display:flex; flex-direction:column; gap:12px}
.fact{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--t-2)}
.fact .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t-4); min-width:92px; padding-top:2px}
.fact .v b{color:var(--t-1); font-weight:600}

/* ============================================================
   ARTICLE (prose + diagrams, ported from the essay)
   ============================================================ */
.article{padding-block:30px 10px}
.article .back{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--t-3); font-weight:500; margin-bottom:26px}
.article .back:hover{color:var(--t-1)}
.article .back .arr{transition:transform .14s} .article .back:hover .arr{transform:translateX(-3px)}
.art-head{max-width:var(--read); margin-bottom:20px}
.art-head .pill{margin-bottom:22px}
.art-head h1{
  font-size:clamp(34px,5.6vw,58px); font-weight:650; letter-spacing:-.04em; line-height:1.04; margin:0 0 20px; text-wrap:balance;
  background:linear-gradient(176deg,var(--title-from),var(--title-to));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.art-head .dek{font-size:clamp(18px,2.3vw,22px); line-height:1.5; color:var(--t-2); margin:0 0 24px}
.art-head .dek strong{color:var(--t-1); font-weight:600}
.art-meta{display:flex; flex-wrap:wrap; gap:9px 16px; align-items:center; font-size:14.5px; color:var(--t-3); padding-top:20px; border-top:1px solid var(--line-1)}
.art-meta .who{color:var(--t-1); font-weight:600}
.art-meta .sep{color:var(--t-5)}
.art-meta .chip{font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--acc)}

/* key stats row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:36px 0 8px; max-width:var(--read)}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2); padding:18px; box-shadow:var(--shadow-sm); min-width:0}
.stat .n{font-family:var(--font-mono); font-size:clamp(24px,4vw,33px); font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--t-1); font-variant-numeric:tabular-nums}
.stat .n.hot{color:var(--acc-2)}
.stat .l{font-size:13px; color:var(--t-3); margin-top:9px; line-height:1.35}

/* body measure */
.article section{padding-block:26px 4px}
.prose{max-width:var(--read)}
.prose p,.prose ul,.prose ol{max-width:var(--read)}
.secmark{display:flex; align-items:center; gap:13px; margin:48px 0 22px; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--t-3)}
.secmark .ph{color:var(--acc); font-weight:600}
.secmark::after{content:'';flex:1;height:1px;background:var(--line-2)}
.article h2{font-size:clamp(25px,3.6vw,34px); font-weight:630; letter-spacing:-.03em; line-height:1.12; margin:0 0 18px; max-width:20ch; text-wrap:balance}
.article h3{font-size:20px; font-weight:620; letter-spacing:-.02em; margin:30px 0 12px; color:var(--t-1)}
.prose p{font-size:18.5px; line-height:1.72; color:var(--t-2); margin:0 0 20px}
.prose strong{color:var(--t-1); font-weight:600}
.prose em{color:var(--t-2)}
.prose a{color:var(--acc); border-bottom:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.prose a:hover{border-bottom-color:var(--acc)}
.prose ul,.prose ol{padding-left:24px; margin:0 0 20px; font-size:18.5px; color:var(--t-2)}
.prose li{margin-bottom:10px; line-height:1.65}
.prose ul li::marker{color:var(--t-4)}
.prose ol li::marker{color:var(--acc); font-family:var(--font-mono); font-weight:600}

.pull{
  max-width:var(--read); margin:32px 0; padding:4px 0 4px 26px; border-left:3px solid var(--acc);
  font-size:clamp(22px,3vw,29px); font-weight:500; letter-spacing:-.02em; line-height:1.3; color:var(--t-1); text-wrap:balance;
}
.pull cite{display:block; margin-top:14px; font-size:14px; font-weight:400; font-style:normal; color:var(--t-4); font-family:var(--font-mono)}

.note{
  max-width:var(--read); margin:28px 0; background:var(--bg-2); border:1px solid var(--line-2); border-left:3px solid var(--acc-2);
  border-radius:0 var(--r-2) var(--r-2) 0; padding:17px 22px; font-size:15.5px; color:var(--t-2); line-height:1.6;
}
.note .tl{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-2); font-weight:600; display:block; margin-bottom:7px}

.fw{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  color:var(--acc); background:var(--acc-soft); border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
  border-radius:6px; padding:1px 8px; white-space:nowrap;
}

/* figures / diagrams */
figure.diag{margin:38px 0; max-width:var(--read); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-3); padding:24px 26px 22px; box-shadow:var(--shadow-sm)}
figure.diag.wide{max-width:none}
figure.diag .cap{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--t-3); margin:0 0 18px; display:flex; align-items:center; gap:8px}
figure.diag .cap::before{content:'//'; color:var(--acc); font-weight:600}
figure.diag figcaption{margin-top:16px; font-size:14.5px; line-height:1.55; color:var(--t-3)}
figure.diag figcaption b{color:var(--t-2)}
.canvas{background:var(--diag-canvas); border:1px solid var(--diag-canvas-brd); border-radius:var(--r-2); padding:16px; overflow-x:auto}
.canvas svg{display:block; width:100%; height:auto; max-width:100%}
.canvas svg text{font-family:var(--font-sans)}
.t{fill:#16171a; font-weight:600} .s{fill:#6b7280} .mono{font-family:var(--font-mono)}
.f-acc{fill:#6d4aff} .st-acc{stroke:#6d4aff}
.f-acc2{fill:#ea580c} .st-acc2{stroke:#ea580c}
.f-bad{fill:#dc2626} .st-bad{stroke:#dc2626}
.f-good{fill:#15803d} .st-good{stroke:#15803d}
.f-mut{fill:#d6d3d1} .st-mut{stroke:#9ca3af}
.f-ink{fill:#16171a} .st-ink{stroke:#16171a}

/* equation / compare / roadmap / adopt (shared from essay) */
.eq{max-width:var(--read); margin:30px 0; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-3); padding:24px; box-shadow:var(--shadow-sm); text-align:center; font-family:var(--font-mono)}
.eq .frac{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 6px}
.eq .frac .num{padding:0 12px 8px; border-bottom:2px solid var(--line-3)}
.eq .frac .den{padding:8px 12px 0}
.eq .lbl{font-size:13.5px; color:var(--acc); font-weight:600}
.eq .term{font-size:16px; color:var(--t-1); font-weight:600}
.eq .eqname{display:block; font-family:var(--font-sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-4); margin-bottom:16px}

.compare{max-width:var(--read); display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0}
@media (max-width:620px){ .compare{grid-template-columns:1fr} }
.cc{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2); padding:18px 20px; box-shadow:var(--shadow-sm); min-width:0}
.cc.bad{border-color:color-mix(in srgb,var(--bad) 30%,var(--line-2))}
.cc.good{border-color:color-mix(in srgb,var(--good) 32%,var(--line-2))}
.cc .h{font-size:14px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.cc .h .d{width:8px;height:8px;border-radius:50%}
.cc.bad .h .d{background:var(--bad)} .cc.good .h .d{background:var(--good)}
.cc ul{margin:0; padding-left:18px} .cc li{font-size:14.5px; color:var(--t-2); margin-bottom:7px}
.cc .tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t-4)}

.road{max-width:var(--read); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 10px}
@media (max-width:720px){ .road{grid-template-columns:1fr} }
.ph{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2); padding:18px; box-shadow:var(--shadow-sm); min-width:0}
.ph .w{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); font-weight:600}
.ph .ttl{font-size:16px; font-weight:620; margin:6px 0 12px}
.ph ul{margin:0; padding-left:17px} .ph li{font-size:14px; color:var(--t-2); margin-bottom:7px}
.spine{max-width:var(--read); margin:6px 0 0; text-align:center; font-size:15px; color:var(--t-3); font-style:italic}

.adopt{max-width:var(--read); margin:28px 0; display:flex; flex-direction:column; gap:10px}
.ai{display:flex; gap:14px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2); padding:16px 18px; box-shadow:var(--shadow-sm)}
.ai .mk{flex-shrink:0; width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px}
.ai.no .mk{border:1.5px solid var(--line-4); color:var(--t-5)}
.ai.part .mk{background:var(--acc-2); color:#fff}
.ai .bd{min-width:0} .ai .bd b{font-size:15.5px}
.ai .bd p{margin:4px 0 0; font-size:14.5px; color:var(--t-3); line-height:1.5}
.ai .st{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; margin-left:auto; flex-shrink:0; padding-top:3px}
.ai.no .st{color:var(--t-5)} .ai.part .st{color:var(--acc-2)}

.takeaways{max-width:var(--read); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:50px 0 0; padding-top:30px; border-top:1px solid var(--line-1)}
@media (max-width:760px){ .takeaways{grid-template-columns:1fr} }
.takeaways>div{position:relative; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2); padding:22px; font-size:15px; color:var(--t-2); line-height:1.5; overflow:hidden; box-shadow:var(--shadow-sm)}
.takeaways>div::before{content:'';position:absolute;top:0;left:0;width:50%;height:1px;background:linear-gradient(90deg,var(--acc),transparent)}
.takeaways .n{display:block; font-family:var(--font-mono); font-size:38px; font-weight:300; color:var(--t-1); opacity:.12; line-height:1; margin-bottom:8px}
.takeaways b{color:var(--t-1)}

/* companion-deck callout */
.deckcta{
  max-width:var(--read); margin:36px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(120deg,var(--acc-soft),transparent 70%); border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line-2));
  border-radius:var(--r-3); padding:22px 26px;
}
.deckcta .l b{font-size:17px; color:var(--t-1)}
.deckcta .l p{margin:4px 0 0; font-size:14.5px; color:var(--t-3)}

/* article colophon */
.colophon{max-width:var(--read); margin-top:46px; padding-top:26px; border-top:1px solid var(--line-1); font-size:14px; color:var(--t-4); line-height:1.6}
.colophon .refs{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}
.colophon .refs span{font-family:var(--font-mono); font-size:11.5px; color:var(--t-3); background:var(--bg-2); border:1px solid var(--line-2); border-radius:6px; padding:3px 10px}