/* ============================================================
   anubsinha.com — personal library
   Editorial design system, family-resemblant to the Applied books
   (Spectral serif on warm cream, light/dark), with its own warm
   "library / leather" accent so each book keeps its own color.
   ============================================================ */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  --bg:#faf7f0; --surface:#fffdf7; --surface-2:#f4ecdc;
  --ink:#21201c; --muted:#6b675d; --faint:#928c7f; --border:#e3ddcf;
  --accent:#8c5a34; --accent-soft:rgba(140,90,52,.07); --accent-line:rgba(140,90,52,.20);
  /* per-book spine colors */
  --math:#8c2f1f; --computing:#2c4a72;

  --serif:"Spectral","Source Serif 4",Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;

  --measure:66ch; --page:920px;
  --header-h:46px;
}
[data-theme="dark"]{
  --bg:#16151a; --surface:#1e1d23; --surface-2:#26231d;
  --ink:#e9e4d8; --muted:#9a948a; --faint:#7c766c; --border:#34323b;
  --accent:#cf9c70; --accent-soft:rgba(207,156,112,.10); --accent-line:rgba(207,156,112,.24);
  --math:#d98a6a; --computing:#88aadd;
}

/* ----------------------------- BASE ----------------------------- */
*{box-sizing:border-box}
html{font-size:19px; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (max-width:900px){ html{font-size:17.5px} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:400; line-height:1.72;
  font-feature-settings:"onum" 1,"pnum" 1; letter-spacing:.001em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
::selection{ background:var(--accent-soft); }
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--accent-line);}
a:hover{text-decoration-color:var(--accent);}
strong{font-weight:600;} em{font-style:italic;} .muted{color:var(--muted);}
code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); padding:.08em .38em; border-radius:5px;}

/* tabular figures where numbers should align */
.mono,.byline time,.post time{font-feature-settings:"lnum" 1,"tnum" 1;}

/* ----------------------------- CHROME ----------------------------- */
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 0; z-index:200; font-family:var(--sans); font-weight:600;}
.skip:focus{left:0;}

#progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:120; transition:width .08s linear;}

.toolbar{position:fixed; top:9px; right:max(14px,3vw); z-index:130; display:flex; gap:8px;}
.brandmark{position:fixed; top:11px; left:max(16px,3vw); z-index:130; font-family:var(--sans); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; color:var(--ink); text-decoration:none; opacity:.0; transition:opacity .25s ease;}
.brandmark.show{opacity:.85;}
.brandmark:hover{color:var(--accent);}
.tbtn{font-family:var(--sans); font-size:.74rem; font-weight:500; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:6px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .15s, color .15s, background .15s;}
.tbtn:hover{border-color:var(--accent); color:var(--accent);}
.tbtn .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block;}

/* ----------------------------- LAYOUT ----------------------------- */
main{max-width:var(--page); margin:0 auto; padding:96px 7vw 120px;}
section{margin-top:84px;}
.eyebrow{font-family:var(--sans); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin:0 0 14px;}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.5rem,7vw,3.7rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 18px;}
h2{font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:-.012em; line-height:1.2; margin:0 0 6px;}
h3{font-family:var(--serif); font-weight:600; font-size:1.22rem; line-height:1.3; margin:0;}
p{margin:1rem 0; max-width:var(--measure);}

/* section header: a kicker + a hairline */
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:26px;}
.sec-head h2{margin:0;}
.sec-head .count{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.sec-intro{color:var(--muted); margin:-14px 0 26px; font-size:1.02rem;}

/* ----------------------------- HERO ----------------------------- */
.hero{margin-top:8px;}
.hero .lede{font-size:1.18rem; line-height:1.6; max-width:38ch; color:var(--ink);}
.hero .lede::first-letter{font-family:var(--serif); font-weight:600; color:var(--accent);
  float:left; font-size:3em; line-height:.82; padding:.06em .1em 0 0;}
.hero .sub{font-family:var(--sans); font-size:.92rem; color:var(--muted); margin-top:22px; max-width:var(--measure);}
.hero .sub a{font-weight:500;}

/* ----------------------------- THE LIBRARY (shelf) ----------------------------- */
.shelf{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; position:relative;}
@media (max-width:720px){ .shelf{grid-template-columns:1fr;} }
.book{position:relative; display:flex; gap:18px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-left:6px solid var(--spine,var(--accent));
  border-radius:6px 12px 12px 6px; padding:22px 24px; transition:transform .15s, border-color .15s, box-shadow .15s;}
.book:hover{transform:translateY(-2px); box-shadow:0 10px 30px -18px rgba(0,0,0,.35); border-color:var(--border);}
.book .mark{font-family:var(--serif); font-weight:600; font-size:2.1rem; line-height:1; color:var(--spine,var(--accent)); flex:0 0 auto; min-width:1.3ch;}
.book .meta{flex:1; min-width:0;}
.book .kicker{font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:3px;}
.book h3{margin:0 0 5px;}
.book p{margin:0 0 10px; color:var(--muted); font-size:.92rem; max-width:none;}
.book .go{font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--spine,var(--accent));}
.book .go .arrow{transition:margin-left .15s;}
.book:hover .go .arrow{margin-left:4px;}
.book.soon{border-left-style:dashed; border-left-color:var(--border); background:transparent; color:var(--muted);
  font-family:var(--sans); font-size:.9rem; font-style:italic; align-items:center;}
.book.soon .mark{color:var(--border);}

/* ----------------------------- WRITING (list) ----------------------------- */
.writing-list{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.entry{display:grid; grid-template-columns:1fr auto; gap:6px 22px; align-items:baseline; padding:20px 4px;
  border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:padding-left .15s, background .15s; border-radius:8px;}
.entry:hover{background:var(--accent-soft); padding-left:14px;}
.entry .e-title{font-family:var(--serif); font-weight:600; font-size:1.14rem; line-height:1.3;}
.entry:hover .e-title{color:var(--accent);}
.entry .e-dek{grid-column:1; color:var(--muted); font-size:.95rem; margin-top:4px; max-width:62ch;}
.entry .e-date{font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.03em; color:var(--faint); text-align:right; white-space:nowrap;}
.entry .e-tag{display:inline-block; font-family:var(--sans); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); border:1px solid var(--border); border-radius:999px; padding:2px 9px; margin-right:9px; vertical-align:1px;}

/* ----------------------------- VENTURES (cards) ----------------------------- */
.ventures{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:720px){ .ventures{grid-template-columns:1fr;} }
.venture{display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px 22px; transition:transform .15s, border-color .15s;}
.venture:hover{transform:translateY(-2px); border-color:var(--accent);}
.venture .v-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.venture h3{font-size:1.12rem;}
.venture .v-host{font-family:var(--mono); font-size:.72rem; color:var(--faint);}
.venture p{margin:0; color:var(--muted); font-size:.92rem; max-width:none;}
.venture .v-arrow{color:var(--accent); transition:transform .15s;}
.venture:hover .v-arrow{transform:translate(2px,-2px);}

/* ----------------------------- ABOUT / CONNECT ----------------------------- */
.connect{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
.chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.84rem; font-weight:500;
  text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:9px 16px; transition:border-color .15s, color .15s;}
.chip:hover{border-color:var(--accent); color:var(--accent);}
.chip .ico{width:15px; height:15px; flex:0 0 auto;}

/* ----------------------------- FOOTER ----------------------------- */
footer{margin-top:96px; padding-top:26px; border-top:1px solid var(--border);
  font-family:var(--sans); font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer a{color:var(--muted);} footer a:hover{color:var(--accent);}

/* ----------------------------- READING PAGE (.post) ----------------------------- */
.post{max-width:var(--page); margin:0 auto; padding:90px 7vw 130px;}
.post .back{font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--muted); text-decoration:none; letter-spacing:.03em;}
.post .back:hover{color:var(--accent);}
.post header.post-head{margin:26px 0 36px; padding-bottom:24px; border-bottom:1px solid var(--border);}
.post .eyebrow{margin-bottom:12px;}
.post h1{font-size:clamp(1.9rem,4.6vw,2.7rem); line-height:1.1; margin:0 0 14px;}
.post .byline{font-family:var(--sans); font-size:.82rem; color:var(--muted); letter-spacing:.02em;}
.post article{font-size:1.06rem;}
.post article > *{max-width:var(--measure); margin-left:0;}
.post article h2{font-size:1.5rem; margin:2.2em 0 .5em; line-height:1.25; scroll-margin-top:60px;}
.post article h3{font-size:1.18rem; margin:1.8em 0 .4em;}
.post article p{margin:1.05em 0;}
.post article ul,.post article ol{padding-left:1.3em; max-width:var(--measure);}
.post article li{margin:.4em 0;}
.post article li::marker{color:var(--accent);}
.post article blockquote{margin:1.4em 0; padding:4px 0 4px 20px; border-left:3px solid var(--accent-line); color:var(--muted); font-style:italic;}
.post article hr{border:none; border-top:1px solid var(--border); margin:2.4em 0;}
.post article code{font-size:.84em;}
.post article pre{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; overflow-x:auto; max-width:none;}
.post article pre code{background:none; padding:0; font-size:.8rem; line-height:1.6;}
.post article a{font-weight:500;}
.post article em{color:inherit;}
.post article strong{color:var(--ink);}
.post article > p:first-of-type::first-letter{font-family:var(--serif); font-weight:600; color:var(--accent);
  float:left; font-size:3.1em; line-height:.8; padding:.05em .09em 0 0;}
.post .post-nav{margin-top:64px; padding-top:24px; border-top:1px solid var(--border); font-family:var(--sans); font-size:.88rem;}
.post .post-nav a{font-weight:600; text-decoration:none;} .post .post-nav a:hover{text-decoration:underline; text-underline-offset:3px;}

/* ----------------------------- BACK TO TOP ----------------------------- */
#toTop{position:fixed; bottom:24px; right:24px; z-index:90; width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--accent); color:var(--accent); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s, background .15s;}
#toTop.show{opacity:1; pointer-events:auto;}
#toTop:hover{background:var(--accent-soft);}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

/* ----------------------------- REDUCED MOTION / PRINT ----------------------------- */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important;} }
@media print{
  .toolbar,.brandmark,#progress,#toTop{display:none!important;}
  body{background:#fff; color:#000;} main,.post{max-width:none; padding:0;}
  a{color:#000;} .book,.venture{break-inside:avoid;}
}