/* Prashant Vithani — personal site. Plain CSS, no build step. */
:root{
  --bg:#F2F4F3; --surface:#FFFFFF; --surface-2:#EAEDEB;
  --ink:#121716; --ink-2:#4E5A57; --ink-3:#77837F;
  --rule:#D8DEDB; --rule-strong:#BCC5C1;
  --accent:#1C6A5E; --accent-on:#FFFFFF; --accent-ink:#12463D; --accent-soft:#E1EEEA;
  --measure:38rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1211; --surface:#151A19; --surface-2:#1B2120;
    --ink:#E7ECEA; --ink-2:#9EAAA6; --ink-3:#77837F;
    --rule:#262E2C; --rule-strong:#374240;
    --accent:#63C4B0; --accent-on:#0E1211; --accent-ink:#8FD8C8; --accent-soft:#152C28;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1211; --surface:#151A19; --surface-2:#1B2120;
  --ink:#E7ECEA; --ink-2:#9EAAA6; --ink-3:#77837F;
  --rule:#262E2C; --rule-strong:#374240;
  --accent:#63C4B0; --accent-on:#0E1211; --accent-ink:#8FD8C8; --accent-soft:#152C28;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Literata",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img{max-width:100%; height:auto}

.wrap{max-width:64rem; margin:0 auto; padding:0 1.5rem}
.col{max-width:var(--measure)}

/* masthead */
.masthead{border-bottom:1px solid var(--rule); background:var(--bg)}
.masthead .wrap{display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:1.1rem}
.masthead a.home{
  font-family:"Instrument Serif",Georgia,serif; font-size:1.3rem; letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
}
.masthead nav{margin-left:auto; display:flex; gap:1.4rem}
.masthead nav a{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--ink-2); text-decoration:none;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"]{color:var(--accent-ink)}
.masthead nav a[aria-current="page"]{border-bottom:2px solid var(--accent); padding-bottom:2px}

main{padding:3.2rem 0 5rem}
h1{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:clamp(2.3rem,6vw,3.3rem); line-height:1.04; margin:0 0 .5rem;
  letter-spacing:-.01em; text-wrap:balance;
}
h2{font-size:1.3rem; font-weight:700; margin:2.8rem 0 .8rem; padding-top:1rem; border-top:1px solid var(--rule); text-wrap:balance}
h3{font-size:1.03rem; font-weight:700; margin:1.9rem 0 .4rem; text-wrap:balance}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem; padding-left:1.15rem}
li{margin:0 0 .5rem}
li::marker{color:var(--rule-strong)}
.kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.74rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 1.4rem;
}
.lede{font-size:1.1rem; color:var(--ink-2)}
.lede strong{color:var(--ink)}
code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em; background:var(--surface-2); padding:.08em .32em; border-radius:2px}
pre{background:var(--surface-2); border:1px solid var(--rule); border-radius:3px; padding:.9rem 1rem; overflow-x:auto; font-size:.82rem; line-height:1.5}
pre code{background:none; padding:0}
blockquote{margin:1.3rem 0; padding:.1rem 0 .1rem 1.15rem; border-left:2px solid var(--accent); color:var(--ink-2); font-style:italic}
blockquote p:last-child{margin-bottom:0}
hr{border:0; border-top:1px solid var(--rule); margin:2.4rem 0}

/* landing */
.hero{margin-bottom:2.6rem}
.hero h1{margin-bottom:.7rem}
.featured{
  background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0; padding:1.2rem 1.35rem; margin:2rem 0;
}
.featured .kicker{margin-bottom:.5rem}
.featured h3{margin:0 0 .4rem; font-size:1.12rem}
.featured h3 a{color:var(--ink); text-decoration:none}
.featured h3 a:hover{color:var(--accent-ink); text-decoration:underline}
.featured p{margin:0; color:var(--ink-2); font-size:.96rem}

/* tables */
.tablewrap{overflow-x:auto; margin:1.6rem 0; border:1px solid var(--rule); border-radius:3px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:40rem; font-size:.86rem; line-height:1.45}
th,td{text-align:left; vertical-align:top; padding:.6rem .8rem; border-bottom:1px solid var(--rule)}
thead th{font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.era{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.78rem; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums}

/* cv */
.contact{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.74rem; color:var(--ink-2); margin:0 0 1.6rem}
.entry{margin-top:1.9rem}
.entry-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:.4rem}
.entry-head h3{margin:0}
.entry-head .meta{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; color:var(--ink-3); letter-spacing:.04em; margin-left:auto; white-space:nowrap}
.stack{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.74rem; color:var(--ink-2); line-height:1.75; margin-top:1.8rem; padding-top:1rem; border-top:1px solid var(--rule)}

/* post */
.venue{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.62rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule-strong); border-radius:2px; padding:.14em .45em;
  margin-left:.5rem; white-space:nowrap; vertical-align:.12em;
}
.postmeta{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.06em; color:var(--ink-3); margin:0 0 2rem}
.footnote{font-size:.9rem; color:var(--ink-2)}

footer{border-top:1px solid var(--rule); padding:1.6rem 0 3rem; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--ink-3)}
footer .wrap{display:flex; gap:1.2rem; flex-wrap:wrap}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--accent-ink); text-decoration:underline}

@media print{
  @page{margin:16mm 15mm}
  :root{--bg:#fff;--surface:#fff;--surface-2:#f4f6f5;--ink:#000;--ink-2:#2c3533;--ink-3:#5a6663;--rule:#c8cfcc;--accent:#12554A;--accent-ink:#0E4239}
  body{background:#fff; color:#000; font-size:10pt; line-height:1.42}
  .masthead, footer, .noprint{display:none !important}
  main{padding:0}
  .wrap{max-width:none; padding:0}
  .col{max-width:none}
  h1{font-size:20pt; margin-bottom:.15rem}
  h2{font-size:12pt; margin:13pt 0 5pt; padding-top:6pt; break-after:avoid}
  h3{font-size:10.5pt; break-after:avoid}
  p{margin-bottom:6pt} li{margin-bottom:3pt}
  p,li{orphans:3; widows:3}
  .entry{margin-top:9pt; break-inside:avoid}
  .tablewrap{overflow:visible; break-inside:avoid} table{min-width:0 !important; font-size:8pt}
  a{color:inherit; text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}