/* harshankarthikeyan.com — the whole stylesheet.
   Generated site; edit this file, never website-personal/style.css.

   Palette is a warm-paper relative of flowlamina.com rather than a copy of it.
   Flowlamina leads with green because it is selling; this site leads with ink
   because it is reading, and keeps Flowlamina's two darkest greens as the only
   accent so the family resemblance survives.

   NOTE — the forty inlined SVG figures each carry their own <style> declaring
   their own green tokens on an `svg{}` type selector, so they are immune to
   everything below and none of these tokens reach them. That is deliberate.
   Their class rules (.t .ts .cap .num .chip .bx .bg .arr .ic …) ARE document
   scoped, so no element here may ever use one of those names. See check.py. */

:root{
  --ink:#191c1a;
  --ink-soft:#4a514c;
  --paper:#fdfdfc;
  --paper-tint:#f7f6f2;
  --rule:#e6e4de;
  --rule-soft:#efede8;
  --accent:#1b4332;
  --accent-soft:#2D6A4F;
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-read:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent-soft)}
a:hover{color:var(--accent)}

.wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:760px;margin:0 auto;padding:0 1.5rem}

h1,h2,h3,h4{color:var(--accent);letter-spacing:-.015em;line-height:1.15}
h1{font-size:clamp(2.1rem,5.2vw,3.2rem);font-weight:750;max-width:24ch}
h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:720}
h3{font-size:1.28rem;font-weight:680}
h4{font-size:1.08rem;font-weight:660}
p,li{max-width:64ch}

/* ---------- header ---------- */
.nav-wrap{position:sticky;top:0;z-index:20;background:rgba(253,253,252,.93);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:baseline;justify-content:space-between;
  gap:.9rem 1.5rem;flex-wrap:wrap;padding:.9rem 1.5rem}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem;
  letter-spacing:-.01em;white-space:nowrap}
.navlinks{display:flex;gap:1.4rem;flex-wrap:wrap}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-size:.96rem;font-weight:550}
.navlinks a:hover{color:var(--accent)}
.navlinks a[aria-current="page"]{color:var(--accent);font-weight:650}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:.9rem}
.lede{font-size:1.2rem;color:var(--ink-soft);max-width:46rem;margin:1.3rem 0 0}
.section{padding:4.2rem 0}
.section.tint{background:var(--paper-tint)}
.divider{display:flex;align-items:center;gap:1.1rem;color:var(--accent-soft);
  font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin-top:3rem;max-width:none}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.section.tint .divider::before,.section.tint .divider::after{background:var(--rule)}
.quiet{color:var(--ink-soft)}
.more{display:inline-block;margin-top:1.4rem;font-weight:620;text-decoration:none}
.more:hover{text-decoration:underline}

/* ---------- home ---------- */
.home-hero{padding:4.6rem 0 2.6rem}
.home-hero h1{max-width:20ch}
.home-hero .lede{font-size:1.22rem}
.home-sub{margin-top:1.1rem;color:var(--ink-soft);max-width:60ch}
.working{border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:2.6rem}
.working h2{font-size:1.15rem;margin-bottom:.2rem}
.working .stamp{font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-soft)}
.working ul{list-style:none;margin-top:1rem}
.working li{position:relative;padding-left:1.35rem;margin-top:.55rem;color:var(--ink-soft)}
.working li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--accent-soft)}

/* ---------- post cards (archive + home). NEVER inlines a figure. ---------- */
.cards{display:grid;gap:1.1rem;margin-top:1.8rem}
.card{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1.5rem 1.4rem;
  transition:border-color .15s ease}
.card:hover{border-color:var(--accent-soft)}
.section.tint .card{background:var(--paper)}
.card-kind{font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-soft)}
.card h3{margin:.5rem 0 .45rem;max-width:34ch}
.card-meta{font-size:.86rem;color:var(--ink-soft)}
.card-sum{margin-top:.6rem;color:var(--ink-soft);font-size:.98rem;max-width:62ch}
.tagrow{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.tag{display:inline-block;font-size:.76rem;font-weight:600;color:var(--accent-soft);
  background:var(--paper-tint);border:1px solid var(--rule);border-radius:999px;
  padding:.18rem .62rem;text-decoration:none;line-height:1.5}

/* ---------- post page ---------- */
.post-meta{font-size:.92rem;color:var(--ink-soft);border-top:1px solid var(--rule);
  padding-top:1.1rem;margin-top:1.6rem;max-width:46rem}
.post .section p,.post .section li{font-family:var(--font-read);font-size:1.12rem;
  line-height:1.72}
.post .section p+p,.post .section ul+p,.post .section p+ul{margin-top:1.05rem}
.part-head{margin-bottom:1rem}
.part-num{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:.7rem}
.part-head h2{font-size:clamp(1.8rem,3.9vw,2.5rem)}
.entry{padding-top:2.8rem;margin-top:2.8rem;border-top:1px solid var(--rule)}
.entry:first-of-type{border-top:none;margin-top:2.2rem;padding-top:0}
.entry h4{margin-top:1.9rem}
.entry ul{margin-top:.9rem;list-style:none}
.entry li{position:relative;padding-left:1.35rem;margin-top:.45rem;color:var(--ink-soft)}
.entry li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;
  border-radius:50%;background:var(--accent-soft)}
.entry p{color:var(--ink-soft)}
.entry strong{color:var(--accent);font-weight:660}

/* ---------- contents ---------- */
.toc{background:var(--paper-tint);border:1px solid var(--rule);
  border-radius:var(--radius);padding:2rem 1.8rem;margin-top:2.4rem}
.toc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;margin-top:1.3rem}
.toc h2{font-size:1.1rem}
.toc-col b{display:block;font-size:.73rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:.5rem}
.toc-col a{display:block;font-size:.93rem;color:var(--ink-soft);text-decoration:none;
  padding:.16rem 0}
.toc-col a:hover{color:var(--accent)}
@media(max-width:860px){.toc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.toc-grid{grid-template-columns:1fr}}

/* ---------- figures ----------
   Bottom margin matches the divider rhythm, so a diagram is clearly separated
   from the paragraph that follows it. */
.figure{margin:2.2rem 0 2.6rem;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 34px rgba(25,28,26,.07)}
.figure .fig-body{padding:1.2rem 1.1rem .9rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{padding:.9rem 1.25rem 1rem;border-top:1px solid var(--rule);
  font-size:.93rem;color:var(--ink-soft);line-height:1.6;font-family:var(--font)}
.figure.wide{width:min(94vw,1500px);margin-left:calc(50% - min(47vw,750px))}
.figure.wide figcaption{max-width:72ch;margin-inline:auto;font-size:.97rem}
@media(max-width:1180px){.figure.wide{width:100%;margin-left:0}}
/* dense diagrams stay readable on a phone: pan inside the figure, never the page */
@media(max-width:820px){
  .figure.wide .fig-body svg{min-width:660px}
  .figure .fig-body svg{min-width:460px}
  .figure figcaption::after{content:"Scroll the diagram sideways to read it.";
    display:block;margin-top:.4rem;font-size:.82rem;color:var(--accent-soft);font-weight:600}
}

/* ---------- endnote + footer ---------- */
.endnote{background:var(--accent);padding:3.6rem 0;color:#cfe0d6}
.endnote h2{color:#fff}
.endnote p{color:#cfe0d6;margin-top:1rem;max-width:56ch}
.site-foot{padding:2.4rem 0;border-top:1px solid var(--rule)}
.site-foot p{font-size:.9rem;color:var(--ink-soft);max-width:none}
.site-foot .links{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:.9rem}
.site-foot .links a{font-size:.94rem;text-decoration:none;font-weight:600}
.site-foot .links a:hover{text-decoration:underline}

@media(max-width:700px){
  .section{padding:3.1rem 0}
  .home-hero,.post-hero{padding:2.9rem 0 1.9rem}
  .section.founder{padding:3.2rem 0}
}

/* the hero already carries generous bottom padding; the first section need not */
.home-hero + .section{padding-top:.5rem}
.post > .section:first-child{padding-top:.6rem}
.post .entry:first-of-type{margin-top:0}

/* ---------- byline ---------- */
.byline{font-weight:650;color:var(--accent)}

/* ================= HOME ================= */
.home-hero{padding:5rem 0 3.2rem}
.home-hero h1{max-width:19ch;font-size:clamp(2.4rem,6vw,3.9rem)}
.home-hero .lede{font-size:clamp(1.15rem,2.2vw,1.38rem);color:var(--ink-soft);
  max-width:34ch;margin-top:1.5rem}

/* --- founder band: portrait in a soft tinted panel, copy beside it.
       Two grid children only (panel + .copy), so any number of paragraphs can
       be added without the layout re-flowing into the wrong column. --- */
.section.founder{padding:4.4rem 0}
.section.founder .wrap{display:grid;grid-template-columns:minmax(0,24rem) 1fr;
  gap:3.4rem;align-items:center}
.portrait-panel{background:linear-gradient(165deg,#eff3ed 0%,#e2eae3 100%);
  border-radius:30px;overflow:hidden;display:flex;align-items:flex-end;
  justify-content:center;box-shadow:0 18px 46px rgba(27,67,50,.10);padding-top:1.6rem}
.portrait-panel .portrait{width:100%;height:auto;display:block}
.section.founder h2{font-size:clamp(1.9rem,3.6vw,2.55rem);margin-bottom:1rem}
.section.founder .copy p{color:var(--ink-soft);max-width:54ch}
.section.founder .copy > * + *{margin-top:1.5rem}
.section.founder .copy p{font-size:1.06rem}
.section.founder .copy > p:first-child{font-size:clamp(1.2rem,2.1vw,1.45rem);
  font-weight:640;color:var(--accent);line-height:1.4;letter-spacing:-.01em;
  max-width:30ch}
.section.founder .copy a{font-weight:640}
@media(max-width:860px){
  .section.founder .wrap{grid-template-columns:1fr;gap:2rem}
  .portrait-panel{max-width:18rem}
}

/* --- latest --- */
.section.latest{padding-top:3.4rem}
.section.latest h2{margin-bottom:.3rem}


/* ---------- icon tones (the workspace four-tone system) ---------- */
.tone-green {background:#dfeae1;color:#2D6A4F}
.tone-amber {background:#F3E6C8;color:#8F6A1C}
.tone-blue  {background:#D8E4EC;color:#33667F}
.tone-rose  {background:#F3DDD6;color:#A85C4B}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;
  max-width:34rem}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.15rem}
.stat-ico{width:44px;height:44px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;margin-bottom:.7rem}
.stat-ico svg{width:23px;height:23px}
.stat-num{font-size:1.9rem;font-weight:760;color:var(--accent);letter-spacing:-.02em;
  line-height:1.1}
.stat-label{font-size:.93rem;color:var(--ink-soft)}

/* ---------- credential cards ---------- */
.credcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;
  max-width:40rem}
.credcard{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.5rem 1.4rem;display:flex;
  flex-direction:column;gap:.9rem}
.cred-ico{width:44px;height:44px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center}
.cred-ico svg{width:23px;height:23px}
.cred-label{font-weight:660;color:var(--accent);font-size:1.02rem;line-height:1.35}
@media(max-width:620px){
  .stats,.credcards{grid-template-columns:1fr}
}