:root {
  --paper: #efe6d4;
  --paper-2: #e7dcc5;
  --card: #f6f0e3;
  --ink: #1d1912;
  --ink-2: #4a4234;
  --ink-3: #7a6f5c;
  --rule: #cfc1a4;
  --indigo: #27386b;
  --turmeric: #b8741a;
  --madder: #9a3324;
  --leaf: #4d6b3c;
  --read: var(--turmeric);
  --done: var(--indigo);
  --grain-opacity: .35;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --deva: "Tiro Devanagari Hindi", "Kohinoor Devanagari", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121726; --paper-2: #182036; --card: #1a2238;
    --ink: #ece3cf; --ink-2: #c4b9a2; --ink-3: #8e8670; --rule: #2e3a58;
    --indigo: #9fb2ee; --turmeric: #e3a548; --madder: #e17a62; --leaf: #9cc285;
    --grain-opacity: .18; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121726; --paper-2: #182036; --card: #1a2238;
  --ink: #ece3cf; --ink-2: #c4b9a2; --ink-3: #8e8670; --rule: #2e3a58;
  --indigo: #9fb2ee; --turmeric: #e3a548; --madder: #e17a62; --leaf: #9cc285;
  --grain-opacity: .18; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* khadi weave + grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 3%, transparent) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--ink) 2.5%, transparent) 3px 4px);
}
body > * { position: relative; z-index: 1; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: .5rem .8rem; z-index: 50; }
:focus-visible { outline: 2px solid var(--turmeric); outline-offset: 3px; border-radius: 2px; }
.dev, [lang="hi"] { font-family: var(--deva); }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--rule); }
.mast-inner {
  max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 9vw, 7rem) 1rem clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: end;
}
.kicker { grid-column: 1 / -1; margin: 0; font: 500 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); animation: rise .8s both; }
.kicker .dev { font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--turmeric); }
h1 {
  margin: 0; font: 400 clamp(3.2rem, 11vw, 8.6rem)/.88 var(--display); letter-spacing: -.02em;
  animation: rise .9s .08s both;
}
h1 em { font-style: italic; color: var(--madder); }
.dek { grid-column: 1; margin: 0; max-width: 38rem; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-2); animation: rise .9s .18s both; }
.tally { grid-column: 2; grid-row: 2 / span 2; display: flex; align-items: center; gap: 1rem; animation: rise .9s .28s both; }
.wheel { width: 132px; height: 132px; transform: rotate(-90deg); }
.wheel circle { fill: none; stroke-width: 7; }
.wheel-track { stroke: var(--rule); }
.wheel-read { stroke: var(--read); stroke-dasharray: 0 100; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1); opacity: .55; }
.wheel-done { stroke: var(--done); stroke-dasharray: 0 100; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1); }
.spokes { stroke: var(--ink-3); stroke-width: 1.2; fill: none; transform-origin: 60px 60px; animation: spin 60s linear infinite; }
.spokes circle { fill: var(--paper); }
.tally-text { display: grid; line-height: 1.05; }
.tally-num { font: 400 3.4rem/1 var(--display); }
.tally-of { font: 400 1.4rem var(--display); color: var(--ink-3); margin-left: .2rem; }
.tally-row { display: flex; align-items: baseline; white-space: nowrap; }
.tally-label { font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: .35rem; }
.tally-sub { font-size: .92rem; color: var(--turmeric); }

/* ---------- sticky bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--rule); }
.bar-inner { max-width: 72rem; margin: 0 auto; padding: .6rem 1rem; display: flex; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.toc { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; flex-wrap: wrap; }
.toc a { display: flex; align-items: baseline; gap: .4rem; padding: .3rem .6rem; text-decoration: none; border-radius: 999px; font-size: .92rem; color: var(--ink-2); transition: background .2s, color .2s; }
.toc a:hover, .toc a[aria-current="true"] { background: var(--paper-2); color: var(--ink); }
.toc .tn { font: 400 1.05rem var(--display); color: var(--turmeric); }
.toc .tp { font: 500 .68rem var(--mono); color: var(--ink-3); }
.filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: .28rem .75rem; font-size: .85rem; cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[data-v="hi"] { font-family: var(--deva); }
.chip.theme { width: 2rem; padding: .28rem 0; text-align: center; }
.bar-progress { height: 3px; display: flex; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.bar-progress span { height: 100%; transition: width .7s cubic-bezier(.2,.8,.2,1); }
#bar-done { background: var(--done); order: 0; }
#bar-read { background: var(--read); order: 1; opacity: .7; }

/* ---------- sections ---------- */
main { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
section { padding: clamp(3.5rem, 8vw, 6rem) 0 1rem; border-bottom: 1px solid var(--rule); }
.sec-head { display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr; gap: 0 2rem; align-items: start; margin-bottom: 2rem; }
.numeral { font: 400 clamp(3.5rem, 9vw, 7rem)/.8 var(--display); color: var(--turmeric); opacity: .9; }
h2 { margin: 0; font: 400 clamp(2.2rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: -.01em; }
h2 .h2-hi { display: block; font: 400 clamp(1.1rem, 2.4vw, 1.5rem)/1.5 var(--deva); color: var(--ink-3); margin-top: .35rem; }
.lede { margin: .9rem 0 0; max-width: 40rem; color: var(--ink-2); font-size: 1.08rem; }
.sec-meter { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; font: 500 .72rem var(--mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.sec-meter .m { flex: 0 0 12rem; height: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 4px; overflow: hidden; display: flex; }
.sec-meter .m i { display: block; height: 100%; transition: width .6s; }
.sec-meter .m .md { background: var(--done); }
.sec-meter .m .mr { background: var(--read); opacity: .7; }
h3.group { margin: 2.6rem 0 .4rem; padding-left: calc(min(9rem, 20vw) + 2rem); font: italic 400 1.6rem var(--display); color: var(--madder); }

/* ---------- entries ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr; gap: 0 2rem;
  padding: 1.15rem 0; border-top: 1px dashed var(--rule);
  transition: opacity .3s, background .3s;
}
.entry:first-child { border-top: 0; }
.entry-side { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.entry-yr { font: 500 .78rem var(--mono); color: var(--ink-3); padding-top: .4rem; }
.mark {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--ink-3);
  background: transparent; cursor: pointer; position: relative; display: grid; place-items: center;
  transition: border-color .25s, background .25s, transform .15s;
}
.mark:hover { border-color: var(--ink); transform: scale(1.06); }
.mark:active { transform: scale(.94); }
.mark::after { content: ""; width: 0; height: 0; border-radius: 50%; transition: all .3s cubic-bezier(.3,1.6,.5,1); }
.mark[data-s="1"] { border-color: var(--read); }
.mark[data-s="1"]::after { width: 100%; height: 100%; background: conic-gradient(var(--read) 0 50%, transparent 50% 100%); }
.mark[data-s="2"] { border-color: var(--done); background: var(--done); }
.mark[data-s="2"]::after { width: .55rem; height: .95rem; border-radius: 0; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: translate(0,-12%) rotate(45deg); background: none; }
.entry[data-s="2"] .entry-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--done) 55%, transparent); text-decoration-thickness: 1.5px; }
.entry[data-s="2"] .entry-body { opacity: .62; }
.entry-hi { display: block; font: 400 1.15rem/1.4 var(--deva); color: var(--turmeric); margin-bottom: .05rem; }
.entry-t { margin: 0; font: 500 1.22rem/1.3 var(--body); }
.entry-a { color: var(--ink-2); font-style: italic; }
.entry-n { margin: .35rem 0 .5rem; color: var(--ink-2); max-width: 44rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem .4rem; align-items: center; }
.tag { font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .32rem .45rem; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink-3); }
.tag.free { color: var(--leaf); border-color: color-mix(in srgb, var(--leaf) 45%, transparent); }
.tag.gated { color: var(--madder); border-color: color-mix(in srgb, var(--madder) 45%, transparent); }
.tag.print { color: var(--ink-2); border-style: dashed; }
.tag.stance { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.stance.critical, .tag.stance.hostile { background: var(--madder); border-color: var(--madder); }
.tag.stance.sympathetic, .tag.stance.convergent { background: var(--leaf); border-color: var(--leaf); }
.tag.stance.unread { background: transparent; color: var(--ink-3); border-style: dashed; border-color: var(--ink-3); }
.links { display: inline-flex; gap: .2rem .9rem; flex-wrap: wrap; margin-left: .3rem; }
.links a { font-size: .95rem; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--indigo) 40%, transparent); color: var(--indigo); padding-bottom: 1px; transition: border-color .2s; }
.links a:hover { border-bottom-color: var(--indigo); }
.links a::after { content: " ↗"; font-size: .8em; opacity: .6; }
.entry.hidden { display: none; }
.empty-note { padding: 1rem 0 0 calc(min(9rem, 20vw) + 2rem); color: var(--ink-3); font-style: italic; }

/* ---------- the thread (start here) ---------- */
.thread { list-style: none; margin: 0; padding: 0 0 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1rem; counter-reset: st; position: relative; }
.station { position: relative; padding: 1.1rem 1rem 1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; display: flex; flex-direction: column; gap: .4rem; min-height: 11rem; transition: transform .25s, box-shadow .25s; counter-increment: st; animation: rise .7s both; }
.station:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent); }
.station::before { content: counter(st, devanagari); font: 400 1.6rem/1 var(--deva); color: var(--turmeric); }
.station .who { font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.station .st-t { font: 400 1.35rem/1.15 var(--display); }
.station .st-hi { font: 400 1.05rem/1.3 var(--deva); color: var(--ink-2); }
.station .mark { position: absolute; top: .9rem; right: .9rem; width: 1.8rem; height: 1.8rem; }
.station .go { margin-top: auto; font-size: .9rem; color: var(--indigo); text-decoration: none; }
.station .go:hover { text-decoration: underline; }
.station[data-s="2"] { border-color: var(--done); box-shadow: inset 0 3px 0 var(--done); }
.station[data-s="2"] .st-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--done) 50%, transparent); }
.station[data-s="1"] { border-color: var(--read); box-shadow: inset 0 3px 0 var(--read); }
/* the cotton thread running through the stations */
.thread::before { content: ""; position: absolute; left: 0; right: 0; top: 2.4rem; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--turmeric) 55%, transparent); z-index: -1; }

/* ---------- questions ---------- */
.qlist { list-style: none; margin: 0; padding: 0 0 3rem calc(min(9rem, 20vw) + 2rem); counter-reset: q; }
.qlist li { counter-increment: q; position: relative; padding: .9rem 0 .9rem 3rem; border-top: 1px dashed var(--rule); font: italic 400 1.4rem/1.35 var(--display); max-width: 46rem; }
.qlist li::before { content: counter(q, devanagari); position: absolute; left: 0; top: .9rem; font: normal 400 1.4rem var(--deva); color: var(--turmeric); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); background: var(--paper-2); }
.foot-inner { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 4rem; color: var(--ink-2); font-size: .98rem; }
.fine { font-size: .85rem; color: var(--ink-3); }
.link-btn { background: none; border: 0; padding: 0; color: var(--madder); border-bottom: 1px solid currentColor; cursor: pointer; font-size: .95rem; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 1480px) {
  .toc .tp { display: none; }
  .toc a { padding: .3rem .45rem; }
}
@media (max-width: 960px) {
  .thread { grid-template-columns: repeat(2, 1fr); }
  .thread::before { display: none; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 9.5rem; }
  .mast-inner { grid-template-columns: 1fr; }
  .tally { grid-column: 1; grid-row: auto; }
  .wheel { width: 96px; height: 96px; }
  .tally-num { font-size: 2.6rem; }
  .sec-head, .entry { grid-template-columns: 1fr; }
  .numeral { font-size: 3rem; margin-bottom: .4rem; }
  .entry-side { flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin-bottom: .5rem; }
  .entry-yr { padding-top: 0; }
  h3.group, .empty-note, .qlist { padding-left: 0; }
  .thread { grid-template-columns: 1fr; }
  .station { min-height: 0; }
  .toc .tp { display: none; }
  .bar-inner { padding: .5rem 1rem; gap: .5rem; }
  .toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .toc a { white-space: nowrap; }
}