/* ============================================================================
   communistvanchana.com
   Design system lifted from the four .dc.html mockups.

   Three things the mockups did not have, added here:
   1. Malayalam typography. Bricolage Grotesque and Archivo carry no Malayalam
      glyphs, so the story pages need Anek Malayalam and Manjari behind them,
      with more leading -- Malayalam stacks vowel signs above and below the
      baseline and suffocates at Latin line-heights.
   2. Mobile. The mockups are fixed two-column layouts with 56px padding and
      would break below about 900px.
   3. A fallback for the scroll animations. The mockups use
      animation-timeline:view(), which is Chrome/Edge only -- in Safari and
      Firefox every animated section would sit at opacity 0, i.e. invisible.
   ========================================================================= */

:root{
  /* palette, sampled from the mockups */
  --cream:#FFF7EA;
  --ink:#141019;
  --white:#FFFFFF;

  --amber:#FFA51E;
  --amber-lt:#FFB84D;
  --amber-pale:#FFF1D6;
  --amber-dp:#8A5B05;
  --on-amber:#3A2A12;
  --on-amber-2:#4A3512;

  --red:#E23E2C;
  --red-dk:#C42E1E;
  --red-tint:#FFE0DA;
  --red-pale:#FFE3DF;
  --red-quote:#FFC4BB;
  --red-deep:#B3271A;

  --blue:#3B2FD9;
  --blue-lt:#5245E8;
  --blue-pale:#EDE9FF;
  --blue-pale2:#DDD6FF;
  --blue-ink:#241C3D;
  --blue-mid:#4C4266;
  --blue-soft:#D6D1FF;

  --teal:#12A4A0;
  --teal-lt:#2CB8B4;
  --teal-dk:#04302F;
  --teal-dk2:#053F3D;
  --teal-pale:#D5F2F1;
  --teal-mid:#0E7C7B;
  --teal-soft:#8FE3E0;

  --grey:#5C5468;
  --grey-2:#3E3648;
  --grey-lt:#9C93AC;
  --grey-pale:#CFC8D8;
  --grey-dim:#8B8298;
  --rule:#EDE7DA;

  --display:'Bricolage Grotesque','Anek Malayalam',system-ui,sans-serif;
  --body:'Archivo','Manjari',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --r-slab:40px;
  --r-lg:30px;
  --r-md:26px;
  --r-sm:20px;
  --pill:999px;

  --pad:56px;
  --maxw:1240px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

/* Malayalam needs more room between lines than the Latin body face does */
[lang="ml"] body,body[lang="ml"],[lang="ml"] p,[lang="ml"] li{line-height:1.85}
[lang="ml"] h1,[lang="ml"] h2,[lang="ml"] h3{line-height:1.18;letter-spacing:-.01em}

a{color:var(--blue)}
a:hover{color:var(--red)}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.slab{margin:104px 12px 0;border-radius:var(--r-slab);padding:72px var(--pad)}
.slab-ink{background:var(--ink);color:var(--cream)}
.slab-teal{background:var(--teal)}
.slab-amber{background:var(--amber)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--cream);padding:14px 22px;border-radius:0 0 12px 0;font-weight:600;
}
.skip:focus{left:0}

/* ---------- nav ---------- */
.mast{
  position:sticky;top:0;z-index:40;padding:18px 24px;
  display:flex;justify-content:center;pointer-events:none;
}
.navbar{
  pointer-events:auto;display:flex;align-items:center;gap:8px;
  background:var(--ink);border-radius:var(--pill);padding:8px 8px 8px 22px;
  box-shadow:0 12px 34px rgba(20,16,25,.22);max-width:100%;
}
.brand{
  font-family:var(--display);font-size:17px;font-weight:800;color:var(--cream);
  text-decoration:none;letter-spacing:-.01em;margin-right:14px;white-space:nowrap;
}
.brand span{color:var(--amber)}
.navlinks{
  display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;overflow-x:auto;scrollbar-width:none;
}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  color:var(--grey-pale);text-decoration:none;padding:9px 17px;
  border-radius:var(--pill);white-space:nowrap;transition:background .18s,color .18s;
}
.navlinks a:hover{color:var(--cream);background:rgba(255,255,255,.1)}
.navlinks a[aria-current="page"]{color:var(--ink);background:var(--amber)}

/* ---------- hero ---------- */
.hero{
  margin:-70px 12px 0;border-radius:var(--r-slab);padding:130px var(--pad) 56px;
  position:relative;overflow:hidden;
}
.hero-amber{background:var(--amber)}
.hero-teal{background:var(--teal)}
.hero-blue{background:var(--blue)}
.hero-violet{background:var(--blue-pale)}
.blob{position:absolute;border-radius:50%;pointer-events:none}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto}

.tag{
  display:inline-flex;align-items:center;gap:10px;background:var(--ink);
  color:var(--cream);border-radius:var(--pill);padding:9px 18px;font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}

h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(44px,8vw,132px);line-height:.92;letter-spacing:-.035em;
  margin:28px 0 0;
}
[lang="ml"] h1{font-size:clamp(36px,6.4vw,96px);line-height:1.06;letter-spacing:-.02em}

.standfirst{
  font-size:20px;line-height:1.58;margin:30px 0 0;max-width:58ch;font-weight:500;
}
[lang="ml"] .standfirst{font-size:19px;line-height:1.9}

/* ---------- section furniture ---------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:104px var(--pad) 0}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.num{
  font-family:var(--display);font-size:15px;font-weight:800;width:38px;height:38px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.eyebrow .label{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);
}
.slab-ink .eyebrow .label{color:var(--grey-lt)}

h2{
  font-family:var(--display);font-size:clamp(30px,4.4vw,62px);font-weight:800;
  line-height:1;letter-spacing:-.03em;margin:0;
}
[lang="ml"] h2{font-size:clamp(27px,3.7vw,48px);line-height:1.22;letter-spacing:-.01em}
h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0}

.prose p{font-size:18.5px;line-height:1.68;color:var(--grey-2);margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
[lang="ml"] .prose p{font-size:17.5px;line-height:1.92}
.slab-ink .prose p{color:var(--grey-pale)}

.two{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:64px;align-items:start}
.two-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.cards-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}

/* ---------- stat tiles ---------- */
.stat{border-radius:24px;padding:26px 24px}
.stat .fig{
  font-family:var(--display);font-size:clamp(32px,3.4vw,44px);font-weight:800;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.stat .cap{font-size:13.5px;line-height:1.5;margin-top:10px}
[lang="ml"] .stat .cap{line-height:1.7}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:17px 26px;border-radius:var(--pill);font-size:14px;font-weight:600;
  transition:background .18s,color .18s,border-color .18s;
}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:var(--blue);color:var(--cream)}
.btn-out{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-out:hover{background:var(--cream);color:var(--ink)}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--cream);color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- quote figures ---------- */
.quote{margin:0;border-radius:var(--r-lg);padding:44px 40px}
.quote .mark{font-family:var(--display);font-size:64px;line-height:.6}
.quote blockquote{
  font-family:var(--display);font-size:clamp(22px,2.5vw,34px);line-height:1.22;
  margin:16px 0 0;padding:0;font-weight:600;letter-spacing:-.02em;
}
[lang="ml"] .quote blockquote{line-height:1.42;letter-spacing:0}
.quote figcaption{
  font-size:14px;line-height:1.6;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,247,234,.16);
}

.chip{
  display:inline-block;border-radius:var(--pill);padding:6px 14px;font-size:11.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}

/* ---------- cards ---------- */
.card{background:var(--white);border-radius:var(--r-md);padding:30px 32px}
.card h3{font-size:26px;line-height:1.14;margin:16px 0 12px}
[lang="ml"] .card h3{font-size:23px;line-height:1.35}
.card p{font-size:16.5px;line-height:1.68;color:var(--grey-2);margin:0}
[lang="ml"] .card p{line-height:1.9}

.linkcard{
  border-radius:var(--r-lg);padding:34px 32px 30px;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;min-height:200px;
  transition:background .2s,transform .2s;
}
.linkcard:hover{transform:translateY(-3px)}
.linkcard .t{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.06}
[lang="ml"] .linkcard .t{font-size:25px;line-height:1.3}
.linkcard .b{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.linkcard .b span:first-child{font-size:14.5px;line-height:1.5}
.linkcard .arrow{font-size:26px;line-height:1}

/* ---------- footer ---------- */
footer.site{margin:104px 12px 12px;border-radius:var(--r-slab);padding:60px var(--pad)}
footer.site .inner{
  max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;
}
footer.site .mark{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em}
footer.site p{font-size:15px;line-height:1.72;margin:16px 0 0;max-width:62ch}
[lang="ml"] footer.site p{line-height:1.9}
footer.site nav{display:flex;flex-direction:column;gap:10px;font-size:14.5px;font-weight:500}
footer.site nav a{text-decoration:none}

/* ---------- scroll reveal ----------
   Content is visible by DEFAULT. The hidden state is applied by JS only, and
   only to elements below the fold, via .armed.

   This ordering is deliberate. If the reveal state lived in CSS, then any
   failure -- script blocked, IntersectionObserver throttled in a background
   tab, a crawler that does not execute JS -- would leave a page of invisible
   text. Putting the hidden state behind JS means the worst case is "no
   animation", never "no content". site.js also unarms everything on a timer
   if the observer never reports, so nothing can get stranded at opacity 0. */
.rise{opacity:1;transform:none}
.rise.armed{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.rise.armed.in{opacity:1;transform:none}
.rise-d1.armed{transition-delay:.08s}
.rise-d2.armed{transition-delay:.16s}
.rise-d3.armed{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.armed{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  :root{--pad:32px}
  .two,.two-even{grid-template-columns:1fr;gap:32px}
  footer.site .inner{grid-template-columns:1fr;gap:32px}
  .slab{padding:56px var(--pad)}
  .hero{padding:118px var(--pad) 48px}
  .sec{padding:72px var(--pad) 0}
}
@media (max-width:640px){
  :root{--pad:20px;--r-slab:28px;--r-lg:22px;--r-md:20px}
  .mast{padding:12px 12px}
  .navbar{padding:7px 7px 7px 16px;gap:4px}
  .brand{font-size:15px;margin-right:8px}
  .navlinks{font-size:12px}
  .navlinks a{padding:8px 12px}
  .slab,.hero,footer.site{margin-left:8px;margin-right:8px}
  .hero{padding:104px var(--pad) 40px}
  .standfirst{font-size:17.5px}
  [lang="ml"] .standfirst{font-size:16.5px}
  .prose p{font-size:17px}
  [lang="ml"] .prose p{font-size:16.5px}
  .quote{padding:30px 24px}
  .card{padding:24px 22px}
  .btn{padding:15px 22px}
}

@media print{
  .mast,.blob{display:none}
  body{background:#fff}
  .js .rise{opacity:1!important;transform:none!important}
}

/* ===== components ======================================================= */

.lead{font-size:18px;line-height:1.7;color:var(--grey);margin:16px 0 0;max-width:58ch}
[lang="ml"] .lead{line-height:1.9}
.lead-dark{color:var(--grey-pale)}
.slab-teal .lead{color:var(--teal-dk2)}

/* inline citation: every claim points at the sheet that carries it */
.cite{
  display:inline-block;font-family:var(--mono);font-size:.76em;text-decoration:none;
  background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-pale2);
  padding:1px 7px;border-radius:var(--pill);white-space:nowrap;vertical-align:.08em;
  transition:background .15s,color .15s;
}
.cite:hover{background:var(--blue);color:var(--cream)}
.slab-ink .cite{background:rgba(255,165,30,.14);color:var(--amber);border-color:rgba(255,165,30,.3)}
.slab-ink .cite:hover{background:var(--amber);color:var(--ink)}
.slab-amber .cite,.slab-teal .cite{background:rgba(20,16,25,.12);color:var(--ink);border-color:rgba(20,16,25,.2)}
.c-cite{margin-top:14px!important}

/* document thumbnail strip under each story section */
.dstrip-wrap{margin-top:46px}
.dstrip-label{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px;
}
.slab-ink .dstrip-label{color:var(--grey-lt)}
.dstrip-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.dstrip{
  flex:0 0 auto;width:200px;text-decoration:none;scroll-snap-align:start;
  background:var(--white);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s;
}
.dstrip:hover{transform:translateY(-4px)}
.dstrip img{width:100%;height:150px;object-fit:cover;object-position:top center;display:block}
.dstrip-n{
  font-family:var(--mono);font-size:11px;color:var(--red);padding:10px 12px 0;font-weight:700;
}
.dstrip-t{font-size:13px;line-height:1.45;color:var(--ink);padding:4px 12px 14px}

/* pull quotes */
.quote{background:var(--ink);color:var(--cream);margin-top:40px}
.quote.q-light{background:var(--white);color:var(--ink)}
.quote .mark{color:var(--amber)}
.quote.q-light .mark{color:var(--red)}
.quote blockquote{color:inherit}
.q-ml{
  font-size:17px;line-height:1.85;margin:18px 0 0;color:var(--grey-pale);
  border-left:3px solid var(--amber);padding-left:16px;
}
.quote.q-light .q-ml{color:var(--grey-2);border-left-color:var(--red)}
.quote figcaption{color:var(--grey-lt)}
.quote.q-light figcaption{color:var(--grey);border-top-color:var(--rule)}

/* ---- timeline ---- */
.tl{padding-top:72px}
.tl-year{display:grid;grid-template-columns:180px minmax(0,1fr);gap:40px;padding-bottom:56px}
.tl-y{position:sticky;top:104px;align-self:start}
.tl-num{font-family:var(--display);font-size:58px;font-weight:800;line-height:.9;letter-spacing:-.04em}
.tl-rule{width:52px;height:5px;background:var(--amber);border-radius:99px;margin-top:12px}
.tl-items{display:flex;flex-direction:column;gap:14px}
.tl-item{background:var(--white);border-radius:var(--r-md);padding:28px 30px}
.tl-item h3{font-size:24px;line-height:1.3;margin:14px 0 10px}
.tl-item p{font-size:16px;line-height:1.8;color:var(--grey-2);margin:0}
.tl-date{background:var(--blue-pale);color:var(--blue)}
.tl-link{
  display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;
  text-decoration:none;color:var(--red);
}
.tl-link:hover{text-decoration:underline}
@media (max-width:820px){
  .tl-year{grid-template-columns:1fr;gap:18px}
  .tl-y{position:static}
  .tl-num{font-size:44px}
}

/* ---- Gandhi's questions ---- */
.gqs{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.gq{background:rgba(255,247,234,.05);border:1px solid rgba(255,247,234,.14);border-radius:var(--r-md)}
.gq summary{
  list-style:none;cursor:pointer;display:flex;gap:16px;align-items:flex-start;padding:22px 26px;
}
.gq summary::-webkit-details-marker{display:none}
.gq-n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--amber);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.gq-q{font-size:18px;line-height:1.6;color:var(--cream);font-weight:500}
.gq[open] .gq-q{color:var(--amber)}
.gq-body{padding:0 26px 24px 72px}
.gq-en{font-size:14.5px;line-height:1.65;color:var(--grey-lt);font-style:italic;margin:0 0 18px}
.gq-a{border-left:3px solid var(--amber);padding-left:18px}
.gq-a-label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px;
}
.gq-a p{font-size:16.5px;line-height:1.9;color:var(--grey-pale);margin:0}
@media (max-width:640px){.gq-body{padding-left:26px}}

/* ---- featured document cards ---- */
.dcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:30px}
.dcard{margin:0;background:var(--white);border-radius:var(--r-lg);overflow:hidden}
.dcard img{width:100%;height:230px;object-fit:cover;object-position:top center;display:block}
.dcard figcaption{padding:24px 26px 26px}
.dcard h3{font-size:21px;line-height:1.32;margin:12px 0 8px}
.dcard p{font-size:15px;line-height:1.8;color:var(--grey);margin:0}
.dc-chip{background:var(--teal-pale);color:var(--teal-mid)}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;border-radius:var(--r-md);background:var(--white)}
.slab-ink .tablewrap{background:rgba(255,247,234,.05)}
table{border-collapse:collapse;width:100%;min-width:620px}
thead th{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);
}
.slab-ink thead th{color:var(--grey-lt);border-bottom-color:rgba(255,247,234,.16)}
tbody td{padding:12px 18px;border-bottom:1px solid var(--rule);font-size:14.5px;vertical-align:top}
.slab-ink tbody td{border-bottom-color:rgba(255,247,234,.09);color:var(--grey-pale)}
tbody tr:last-child td{border-bottom:0}
.s-name{font-weight:600}
.slab-ink .s-name{color:var(--cream)}
.s-doc a,.fa-no a,.fa-title a{text-decoration:none}
.fa-no{font-family:var(--mono);font-weight:700;color:var(--red);white-space:nowrap;font-size:13px}
.fa-date{font-family:var(--mono);font-size:12.5px;color:var(--grey);white-space:nowrap}
.fa-from{font-size:13.5px;color:var(--grey)}
.fa-sig{text-align:center;color:var(--blue)}
.empty{display:none;padding:44px 0;text-align:center;color:var(--grey);font-style:italic}
.empty.on{display:block}

/* ---- people index ---- */
.people{border-top:1px solid var(--rule)}
.prow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;
  padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.pname{font-size:15px;font-weight:600}
.pname span{display:block;font-weight:400;font-size:12.5px;color:var(--grey);margin-top:3px}
.pdocs{display:flex;flex-wrap:wrap;gap:5px}
.pdocs a{
  font-family:var(--mono);font-size:11.5px;text-decoration:none;padding:3px 8px;
  background:var(--white);border:1px solid var(--rule);color:var(--grey);border-radius:6px;
}
.pdocs a:hover{border-color:var(--red);color:var(--red)}
@media (max-width:820px){.prow{grid-template-columns:1fr;gap:8px}}

.notlist{margin:20px 0 0;padding:0 0 0 22px;color:var(--grey-pale);font-size:16.5px;line-height:1.9}
.notlist li{margin-bottom:10px}

/* ---- archive controls ---- */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  margin:42px 0 0;background:rgba(20,16,25,.12);
}
.fact{background:var(--blue-pale);padding:18px 18px 20px}
.fact b{
  display:block;font-family:var(--display);font-size:30px;font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--blue-ink);
}
.fact span{
  display:block;margin-top:6px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-mid);
}
.controls{
  position:sticky;top:0;z-index:30;background:var(--cream);
  border-bottom:1px solid var(--rule);padding:14px 0;margin-top:34px;
}
.cinner{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.searchbox{flex:1 1 260px;min-width:0;background:var(--white);border:1px solid var(--rule);border-radius:10px}
.searchbox:focus-within{border-color:var(--blue)}
#q{width:100%;font-family:var(--body);font-size:14px;color:var(--ink);background:transparent;border:0;padding:11px 15px}
#q:focus{outline:none}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{
  font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;cursor:pointer;color:var(--grey);
  background:transparent;border:1px solid var(--rule);border-radius:var(--pill);
}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--cream)}
.count{font-family:var(--mono);font-size:12px;color:var(--grey);margin-left:auto}

/* ---- document page ---- */
.docpage{padding:96px 0 0}
.crumb{font-family:var(--mono);font-size:12px;color:var(--grey);margin-bottom:26px}
.crumb a{text-decoration:none}
.dochead{display:flex;gap:22px;align-items:flex-start;margin-bottom:32px}
.crayon{
  font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--red);
  letter-spacing:-.04em;transform:rotate(-4deg);flex:0 0 auto;padding-top:4px;
}
.doctitle{font-family:var(--display);font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.chip.c-cat{background:var(--white);color:var(--grey);border:1px solid var(--rule)}
.chip.c-secret{background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue)}
.docgrid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:start}
.docscan{margin:0}
.docscan a{display:block;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--white);cursor:zoom-in}
.docscan img{display:block;width:100%;height:auto}
.docscan figcaption{font-size:13px;line-height:1.6;color:var(--grey);margin-top:12px;font-style:italic}
.enh-btn{
  margin-top:14px;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 16px;cursor:pointer;border-radius:var(--pill);
  background:transparent;border:1px solid var(--teal);color:var(--teal-mid);
}
.enh-btn[aria-pressed="true"]{background:var(--teal);color:var(--cream)}
.enh-note{font-size:12.5px;line-height:1.6;color:var(--grey);margin:10px 0 0}
.meta{margin:0 0 26px}
.mrow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
.mrow dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.mrow dd{margin:0;font-size:14.5px;line-height:1.55}
.sigs h2,.marg h2{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin:0 0 14px}
.sigs ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sigs li{border-left:3px solid var(--red);padding-left:16px}
.sg-name{display:block;font-size:15.5px;font-weight:600}
.sg-role{display:block;font-size:13.5px;color:var(--grey);margin-top:2px}
.sg-note{display:block;font-size:13px;color:var(--grey);font-style:italic;margin-top:4px}
.sigs.unsigned p{margin:0;font-size:14px;color:var(--grey);font-style:italic}
.marg{margin-top:26px}
.marg p{margin:0;font-size:14px;line-height:1.7;color:var(--grey)}
.mlnote{margin-top:28px;background:var(--amber);border-radius:var(--r-md);padding:22px 24px}
.mlnote-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-amber-2);margin-bottom:8px}
.mlnote b{display:block;font-size:18px;line-height:1.5;margin-bottom:8px}
.mlnote p{margin:0 0 12px;font-size:15px;line-height:1.85;color:var(--on-amber)}
.mlnote a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.transcript-block{margin-top:44px}
.transcript-block h2{
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.verbatim{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:none;
  padding:3px 8px;background:var(--red-pale);color:var(--red-deep);border:1px solid var(--red);border-radius:4px;
}
.tscroll{overflow-x:auto;background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--red);border-radius:0 12px 12px 0}
.tscroll pre{margin:0;padding:26px 28px;font-family:var(--mono);font-size:12.6px;line-height:1.72;white-space:pre;color:var(--ink)}
.docnav{display:flex;justify-content:space-between;gap:16px;margin:44px 0 0;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13px}
.docnav a{text-decoration:none}
@media (max-width:900px){
  .docgrid{grid-template-columns:1fr;gap:28px}
  .mrow{grid-template-columns:1fr;gap:2px}
  .tscroll pre{font-size:11.6px;padding:18px}
}

/* ---- lightbox ---- */
.lb{
  position:fixed;inset:0;z-index:100;background:rgba(12,10,7,.94);display:flex;
  align-items:center;justify-content:center;padding:26px;cursor:zoom-out;opacity:0;transition:opacity .2s;
}
.lb.on{opacity:1}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-hint{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#b8ae9c;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* ===== story: chapter accordion ========================================= */

.hook{
  font-family:var(--display);font-size:clamp(21px,2.5vw,32px);font-weight:700;
  line-height:1.4;letter-spacing:-.01em;margin:30px 0 0;max-width:26ch;color:var(--ink);
}
.howto{
  font-size:15px;line-height:1.85;color:var(--on-amber-2);margin:26px 0 0;max-width:52ch;
  padding-left:16px;border-left:3px solid var(--ink);
}
.story{padding-top:72px}
.storybar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:8px;
}
.storybar-c{font-size:13px;color:var(--grey)}
.storybar-c b{font-family:var(--display);font-size:19px;color:var(--ink);margin-right:4px}
.storybar-b{
  margin-left:auto;font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.06em;padding:9px 16px;cursor:pointer;border-radius:var(--pill);
  background:transparent;border:1px solid var(--ink);color:var(--ink);
}
.storybar-b:hover{background:var(--ink);color:var(--cream)}

/* the timeline rail runs down the number column */
.chapters{position:relative}
.chapters::before{
  content:"";position:absolute;left:19px;top:26px;bottom:26px;width:2px;
  background:var(--rule);
}
.ch{position:relative;border-bottom:1px solid var(--rule)}
.ch-head{margin:0;font-size:inherit;font-weight:inherit}
.ch-btn{
  width:100%;display:flex;align-items:flex-start;gap:18px;text-align:left;
  background:transparent;border:0;cursor:pointer;padding:20px 44px 20px 0;
  font-family:inherit;color:inherit;
}
.ch-n{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:15px;font-weight:800;
  background:var(--white);border:2px solid var(--rule);color:var(--grey);
  position:relative;z-index:1;transition:background .18s,color .18s,border-color .18s;
}
.ch-doc .ch-n{border-color:var(--red);color:var(--red)}
.ch-end .ch-n{background:var(--ink);border-color:var(--ink);color:var(--amber)}
.ch-btn:hover .ch-n{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.ch[data-open] .ch-n{background:var(--red);border-color:var(--red);color:var(--cream)}
.ch-end[data-open] .ch-n{background:var(--ink);border-color:var(--ink);color:var(--amber)}
.ch-t{
  font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:700;
  line-height:1.45;letter-spacing:-.005em;padding-top:6px;
}
.ch-btn:hover .ch-t{color:var(--red)}
.ch[data-open] .ch-t{color:var(--red)}
.ch-end[data-open] .ch-t{color:var(--ink)}
.ch-mark{
  position:absolute;right:6px;top:32px;width:11px;height:11px;flex:0 0 auto;
  border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);
  transform:rotate(45deg);transition:transform .2s ease;
}
.ch[data-open] .ch-mark{transform:rotate(-135deg);border-color:var(--red)}

.ch-body[hidden]{display:none}
.ch-inner{padding:0 0 34px 58px;max-width:74ch}
.ch-inner p{font-size:17.5px;line-height:1.95;color:var(--grey-2);margin:0 0 18px}
.ch-inner p:last-of-type{margin-bottom:0}
.ch-context{
  font-size:14px!important;line-height:1.8!important;color:var(--blue-mid)!important;
  background:var(--blue-pale);border-left:3px solid var(--blue);
  padding:12px 16px;border-radius:0 10px 10px 0;margin-bottom:22px!important;
}
.ch-docs{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.ch-docs-l{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px;
}
.ch-chips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--pill);
  padding:7px 15px 7px 8px;transition:border-color .15s,background .15s;
}
.dchip:hover{border-color:var(--red);background:var(--red-pale)}
.dchip-n{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--cream);
  background:var(--red);border-radius:var(--pill);padding:3px 9px;
}
.dchip-t{font-size:13px;color:var(--ink);line-height:1.4}
.ch-foot{margin-top:26px}
.ch-next{
  font-family:var(--body);font-size:13px;font-weight:600;cursor:pointer;
  background:transparent;border:0;color:var(--blue);padding:0;
}
.ch-next:hover{text-decoration:underline}

@media (max-width:640px){
  .chapters::before{left:15px}
  .ch-n{width:32px;height:32px;font-size:13px}
  .ch-btn{gap:12px;padding:16px 32px 16px 0}
  .ch-t{font-size:16.5px;padding-top:4px}
  .ch-mark{top:26px;width:9px;height:9px}
  .ch-inner{padding-left:44px;padding-bottom:28px}
  .ch-inner p{font-size:16.5px}
}

/* ===== slide-in document panel ========================================== */

.dp{position:fixed;inset:0;z-index:80}
.dp[hidden]{display:none}
.dp-scrim{
  position:absolute;inset:0;background:rgba(20,16,25,.5);
  opacity:0;transition:opacity .25s;
}
.dp.on .dp-scrim{opacity:1}
.dp-sheet{
  position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);
  background:var(--cream);display:flex;flex-direction:column;
  box-shadow:-16px 0 48px rgba(20,16,25,.22);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.dp.on .dp-sheet{transform:none}
@media (prefers-reduced-motion:reduce){
  .dp-scrim,.dp-sheet{transition:none}
}
.dp-top{
  display:flex;align-items:center;gap:14px;padding:16px 22px;
  background:var(--ink);color:var(--cream);flex:0 0 auto;
}
.dp-no{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
  background:var(--amber);border-radius:var(--pill);padding:4px 12px;
}
.dp-close{
  margin-left:auto;background:transparent;border:0;color:var(--cream);
  font-size:26px;line-height:1;cursor:pointer;padding:0 4px;
}
.dp-close:hover{color:var(--amber)}
.dp-scroll{overflow-y:auto;padding:26px 24px 40px;-webkit-overflow-scrolling:touch}
.dp-scroll h2{
  font-family:var(--display);font-size:21px;font-weight:800;line-height:1.3;
  letter-spacing:-.015em;margin:0 0 6px;
}
.dp-ml{font-size:15px;line-height:1.85;color:var(--grey);margin:0 0 18px}
.dp-scroll img{
  width:100%;height:auto;display:block;border:1px solid var(--rule);
  border-radius:12px;background:var(--white);
}
.dp-cap{font-size:12.5px;line-height:1.6;color:var(--grey);font-style:italic;margin:10px 0 20px}
.dp-meta{margin:0 0 20px;font-size:13.5px}
.dp-meta div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
.dp-meta dt{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.dp-meta dd{margin:0;line-height:1.5}
.dp-sec{
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin:22px 0 10px;
}
.dp-sig{border-left:3px solid var(--red);padding-left:14px;margin-bottom:12px}
.dp-sig b{display:block;font-size:14.5px}
.dp-sig span{display:block;font-size:13px;color:var(--grey);margin-top:2px}
.dp-marg{font-size:13.5px;line-height:1.7;color:var(--grey);margin:0}
#dp-tr{
  margin:10px 0 0;padding:20px;background:var(--white);border:1px solid var(--rule);
  border-left:3px solid var(--red);border-radius:0 10px 10px 0;
  font-family:var(--mono);font-size:11.6px;line-height:1.7;white-space:pre;
  overflow-x:auto;color:var(--ink);
}
.dp-full{
  display:inline-block;margin-top:22px;font-size:13.5px;font-weight:600;
  color:var(--blue);text-decoration:none;
}
.dp-full:hover{text-decoration:underline}
.dp-loading{padding:40px 0;text-align:center;color:var(--grey);font-style:italic}

/* ---- search over the story ---- */
.chsearch{
  flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:0;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--pill);
  padding:0 6px 0 14px;
}
.chsearch:focus-within{border-color:var(--red)}
.chsearch-i{width:17px;height:17px;flex:0 0 auto;color:var(--grey)}
.chsearch:focus-within .chsearch-i{color:var(--red)}
#chq{
  flex:1 1 auto;min-width:0;font-family:var(--body);font-size:14.5px;color:var(--ink);
  background:transparent;border:0;padding:11px 10px;
}
#chq:focus{outline:none}
#chq::placeholder{color:var(--grey);opacity:.85}
#chq::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.chsearch-x{
  flex:0 0 auto;width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  color:var(--grey);font-size:20px;line-height:1;border-radius:50%;
}
.chsearch-x:hover{background:var(--red-pale);color:var(--red)}
.chsearch-x[hidden]{display:none}

.ch[hidden]{display:none}
.ch-empty{
  padding:56px 0;text-align:center;color:var(--grey);font-size:16px;line-height:1.8;
}
.ch-empty[hidden]{display:none}

/* the hit that made a collapsed chapter match, so you can see why without opening it */
.ch-snip{
  margin:0 0 18px 58px;padding:12px 16px;background:var(--amber-pale);
  border-left:3px solid var(--amber);border-radius:0 10px 10px 0;
  font-size:14.5px;line-height:1.8;color:var(--grey-2);
}
.ch-snip[hidden]{display:none}
.ch mark,.ch-snip mark{background:var(--amber);color:var(--ink);padding:0 2px;border-radius:2px}
.storybar-c{white-space:nowrap}

@media (max-width:820px){
  .storybar{gap:10px}
  .chsearch{flex:1 1 100%;order:-1}
  .ch-snip{margin-left:44px}
}

/* ---- language toggle ---- */
.langtog{
  flex:0 0 auto;margin-left:6px;font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.03em;text-decoration:none;white-space:nowrap;
  color:var(--ink);background:var(--cream);border-radius:var(--pill);
  padding:9px 15px;transition:background .18s,color .18s;
}
.langtog:hover{background:var(--amber);color:var(--ink)}
@media (max-width:640px){.langtog{padding:8px 11px;font-size:11.5px;margin-left:3px}}