@charset "utf-8";
/* ==========================================================================
   bipinchandrapal.com — "The Newspaper That Never Stopped Thinking"
   Editorial design system. Bengal print culture x contemporary publishing.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* primary */
  --indigo:#24364B;
  --paper:#F4EEDF;
  --forest:#253B32;
  --charcoal:#202322;
  /* secondary */
  --brick:#9A4035;
  --ochre:#B18A3B;
  --ochre-ink:#7A5C1C;      /* gold text on paper */
  --ochre-bright:#CCA451;   /* gold text on dark */
  --faded:#556678;          /* metadata text — darkened from #74889A for WCAG AA on paper */
  --faded-blue:#74889A;     /* original palette blue, decorative use */
  /* derived */
  --paper-2:#EDE5D2;
  --paper-3:#E3D9C2;
  --indigo-90:rgba(36,54,75,.9);
  --rule:rgba(32,35,34,.22);
  --rule-soft:rgba(32,35,34,.12);
  --rule-ondark:rgba(244,238,223,.24);
  --rule-ondark-soft:rgba(244,238,223,.13);

  /* semantic */
  --bg:var(--paper);
  --ink:var(--charcoal);
  --ink-muted:#55605C;
  --accent:var(--brick);

  /* type */
  --display:"Bodoni Moda",'Didot','Bodoni MT','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* metrics */
  --shell:min(1560px, 100% - 6vw);
  --gap:clamp(16px,2vw,32px);
  --masthead-h:clamp(56px,7vw,68px);
  --band:clamp(56px,9vw,132px);   /* vertical section rhythm */
  --measure:68ch;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.62s;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--masthead-h) + 24px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,.55vw + 14.4px,18px);
  line-height:1.68;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
::selection{background:var(--ochre);color:var(--charcoal)}

/* ---------- 3. UTILITIES ---------- */
.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:min(78ch,100% - 8vw);margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:1200;background:var(--brick);color:var(--paper);
  padding:.7em 1.2em;font:600 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- 4. TYPE PRIMITIVES ---------- */
.kicker{
  font:500 clamp(.62rem,.28vw + .56rem,.72rem)/1.3 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--faded);
}
.kicker--brick{color:var(--brick)}
.kicker--ochre{color:var(--gold)}

.hed{
  font-family:var(--display);font-weight:700;line-height:.92;
  letter-spacing:-.018em;color:var(--ink);text-wrap:balance;
}
.hed--xxl{font-size:clamp(3rem,11.2vw,10.5rem);font-weight:900;letter-spacing:-.035em;line-height:.84}
.hed--xl{font-size:clamp(2.35rem,6.6vw,5.6rem);letter-spacing:-.026em;line-height:.9}
.hed--l{font-size:clamp(1.9rem,4.1vw,3.5rem);line-height:.96}
.hed--m{font-size:clamp(1.42rem,2.3vw,2.1rem);line-height:1.06}
.hed--s{font-size:clamp(1.12rem,1.25vw,1.34rem);line-height:1.2;letter-spacing:-.008em}

.deck{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.75vw,1.62rem);line-height:1.38;color:var(--ink-muted);
  max-width:44ch;text-wrap:pretty;
}
.lede{font-size:clamp(1.06rem,.7vw + .9rem,1.28rem);line-height:1.6;color:var(--ink)}

.prose{max-width:var(--measure)}
.prose p{margin-block:0 1.05em;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose p+h3,.prose p+h4{margin-top:1.9em}
.prose h3{font:700 clamp(1.16rem,1.3vw,1.42rem)/1.2 var(--display);letter-spacing:-.01em;margin-bottom:.5em}
.prose h4{font:600 .76rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brick);margin-bottom:.75em}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose a,.inline-link{
  color:var(--brick);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 92%;
  padding-bottom:.06em;transition:background-size .28s var(--ease),color .2s;
}
.prose a:hover,.inline-link:hover{background-size:100% 2px}
.drop::first-letter{
  font-family:var(--display);font-weight:900;font-size:4.1em;line-height:.78;
  float:left;margin:.045em .09em 0 0;color:var(--indigo);
}

/* first-word small caps opener */
.opener::first-line{font-variant-caps:all-small-caps;letter-spacing:.06em}

/* ---------- 5. THE EDITORIAL RULE (signature device) ---------- */
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule--thick{border-top-width:2px;border-color:var(--ink)}
.rule--brick{border-top-color:var(--brick)}
.rule--onDark{border-top-color:var(--rule-ondark)}

.erule{
  display:grid;gap:0;border-top:2px solid var(--ink);
  padding-top:.85rem;margin-block:0;
}
.erule__row{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:.6rem 1.4rem;padding:.62rem 0;border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.erule__row:last-child{border-bottom:0}
.erule__k{font:500 .68rem/1.4 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--faded)}
.erule__v{font-size:.97rem;line-height:1.55;color:var(--ink)}
.erule__v strong{font-weight:600}
.on-dark .erule{border-top-color:var(--paper)}
.on-dark .erule__row{border-bottom-color:var(--rule-ondark-soft)}
.on-dark .erule__k{color:rgba(244,238,223,.55)}
.on-dark .erule__v{color:var(--paper)}

/* ---------- 6. MASTHEAD / NAVIGATION (top only) ---------- */
.masthead{
  position:sticky;top:0;z-index:900;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;
  background:var(--paper);border-bottom:1px solid var(--rule-soft);
}
.masthead__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--masthead-h);
}
.brand{
  display:flex;align-items:baseline;gap:.7rem;text-decoration:none;flex-shrink:0;
}
.brand__mark{
  font:900 .82rem/1 var(--display);letter-spacing:.02em;color:var(--paper);
  background:var(--indigo);padding:.5em .55em .45em;flex-shrink:0;
}
.brand__name{
  font:700 clamp(.92rem,1.35vw,1.14rem)/1 var(--display);letter-spacing:-.012em;
  color:var(--ink);white-space:nowrap;
}
.brand:hover .brand__mark{background:var(--brick)}

.masthead__flag{
  display:none;font:500 .64rem/1.4 var(--mono);letter-spacing:.185em;text-transform:uppercase;
  color:var(--faded);text-align:right;
}
.masthead__flag b{color:var(--brick);font-weight:500}
@media (min-width:760px){.masthead__flag{display:block}}

/* row 2 — the horizontal publication index */
.nav{display:none;border-top:1px solid var(--rule-soft)}
@media (min-width:1024px){
  .nav{display:block}
  .nav__list{
    display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;
    gap:clamp(.3rem,.9vw,1.1rem);
  }
  .nav__link{
    display:flex;align-items:baseline;gap:.34em;text-decoration:none;white-space:nowrap;
    font:500 clamp(.58rem,.55vw + .1rem,.72rem)/1 var(--mono);letter-spacing:.115em;text-transform:uppercase;
    color:var(--ink);padding:.95em 0;border-bottom:2px solid transparent;
    transition:border-color .2s,color .2s,transform .22s var(--ease);
  }
  .nav__num{font-size:.85em;color:var(--faded);font-variant-numeric:tabular-nums}
  .nav__link:hover{color:var(--brick);border-bottom-color:var(--brick);transform:translateY(-1px)}
  .nav__link[aria-current="page"]{color:var(--brick);border-bottom-color:var(--brick)}
  .nav__link[aria-current="page"] .nav__num{color:var(--brick)}
}

/* menu button (mobile / tablet) */
.menu-btn{
  display:inline-flex;align-items:center;gap:.6rem;flex-shrink:0;
  font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:.55em .2em;
}
@media (min-width:1024px){.menu-btn{display:none}}
.menu-btn__bars{display:grid;gap:4px;width:22px}
.menu-btn__bars i{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* full-screen editorial menu */
.drawer{
  position:fixed;inset:0;z-index:1000;background:var(--indigo);color:var(--paper);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-1.2%);
  transition:opacity .34s var(--ease),transform .44s var(--ease),visibility .34s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible;transform:none}
.drawer__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--masthead-h);border-bottom:1px solid var(--rule-ondark);
}
.drawer__top .brand__name{color:var(--paper)}
.drawer__top .brand__mark{background:var(--paper);color:var(--indigo)}
.drawer__close{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);padding:.6em .2em}
.drawer__body{padding:clamp(1.5rem,5vw,3rem) 0 clamp(2.5rem,8vw,4rem)}
.drawer__list{border-top:1px solid var(--rule-ondark-soft)}
.drawer__item{border-bottom:1px solid var(--rule-ondark-soft)}
.drawer__link{
  display:grid;grid-template-columns:2.6rem 1fr auto;align-items:baseline;gap:.9rem;
  padding:clamp(.72rem,2vw,1rem) 0;text-decoration:none;color:var(--paper);
  transition:padding-left .3s var(--ease),color .2s;
}
.drawer__link:hover,.drawer__link:focus-visible{padding-left:.7rem;color:var(--gold)}
.drawer__link .n{font:500 .68rem/1 var(--mono);color:rgba(244,238,223,.5);font-variant-numeric:tabular-nums}
.drawer__link .t{font:700 clamp(1.35rem,5.4vw,2.15rem)/1.04 var(--display);letter-spacing:-.02em}
.drawer__link .d{font:400 .68rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,238,223,.42);text-align:right;max-width:9rem}
.drawer__link[aria-current="page"]{color:var(--gold)}
.drawer__foot{margin-top:clamp(1.8rem,5vw,3rem);display:grid;gap:.45rem}
.drawer__foot a{font:500 .82rem/1.5 var(--mono);color:var(--paper);text-decoration:none;letter-spacing:.04em}
.drawer__foot a:hover{color:var(--gold)}
body[data-lock="true"]{overflow:hidden}

/* ---------- 7. THE PAL INDEX (signature #2) ---------- */
.palindex{
  position:sticky;top:var(--masthead-h);z-index:700;
  background:var(--paper);border-bottom:1px solid var(--rule-soft);
}
.palindex__inner{display:flex;align-items:center;gap:1rem;min-height:46px}
.palindex__label{
  font:500 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brick);
  flex-shrink:0;padding-right:1rem;border-right:1px solid var(--rule-soft);display:none;
}
@media (min-width:760px){.palindex__label{display:block}}
.palindex__track{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;flex:1 1 auto;min-width:0;
}
.palindex__track::-webkit-scrollbar{display:none}
.palindex__link{
  flex-shrink:0;scroll-snap-align:start;text-decoration:none;
  font:500 .655rem/1 var(--mono);letter-spacing:.155em;text-transform:uppercase;color:var(--faded);
  padding:.95em clamp(.6rem,1.4vw,1.05rem);border-bottom:2px solid transparent;
  transition:color .22s,border-color .22s;white-space:nowrap;
}
.palindex__link:hover{color:var(--ink)}
.palindex__link[data-active="true"]{color:var(--brick);border-bottom-color:var(--brick)}

/* ---------- 8. SECTION SCAFFOLD ---------- */
.band{padding-block:var(--band);position:relative}
.band--tight{padding-block:clamp(40px,6vw,84px)}
.band--indigo{background:var(--indigo);color:var(--paper)}
.band--forest{background:var(--forest);color:var(--paper)}
.band--charcoal{background:var(--charcoal);color:var(--paper)}
.band--paper2{background:var(--paper-2)}
.band--rule-top{border-top:1px solid var(--rule)}
.on-dark,.band--indigo,.band--forest,.band--charcoal{color:var(--paper)}
.band--indigo .hed,.band--forest .hed,.band--charcoal .hed{color:var(--paper)}
.band--indigo .deck,.band--forest .deck,.band--charcoal .deck{color:rgba(244,238,223,.72)}
.band--indigo .kicker,.band--forest .kicker,.band--charcoal .kicker{color:rgba(244,238,223,.55)}
.band--indigo .kicker--ochre,.band--forest .kicker--ochre,.band--charcoal .kicker--ochre{color:var(--gold)}
.band--indigo .prose a,.band--forest .prose a,.band--charcoal .prose a{color:var(--gold)}
.band--indigo .rule,.band--forest .rule,.band--charcoal .rule{border-top-color:var(--rule-ondark)}

.sec-head{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);margin-bottom:clamp(1.8rem,4vw,3.2rem)}
.sec-head__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline}
.sec-num{font:500 .68rem/1 var(--mono);letter-spacing:.2em;color:var(--gold)}

/* ---------- 9. EDITORIAL GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
@media (max-width:900px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* column spans, desktop */
/* Span is set with grid-column-END only. Using the `grid-column` shorthand here
   would reset grid-column-start, so `.c5.start8` would collapse to one column. */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}
.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}
.c9{grid-column-end:span 9}.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start3{grid-column-start:3}.start4{grid-column-start:4}
.start5{grid-column-start:5}.start6{grid-column-start:6}.start7{grid-column-start:7}
.start8{grid-column-start:8}.start9{grid-column-start:9}.start10{grid-column-start:10}
.start11{grid-column-start:11}
@media (max-width:900px){
  .start2,.start3,.start4,.start5,.start6,.start7,
  .start8,.start9,.start10,.start11{grid-column-start:auto}
  .c1,.c2,.c3,.c4{grid-column:auto/span 3}
  .c5,.c6,.c7{grid-column:auto/span 6}
  .c8,.c9,.c10,.c11,.c12{grid-column:auto/span 6}
  .m-full{grid-column:auto/span 6!important}
}
@media (max-width:620px){
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{grid-column:auto/span 2}
  .s-half{grid-column:auto/span 1!important}
  .m-full{grid-column:auto/span 2!important}
}

/* newspaper multi-column text */
.cols-2{column-count:2;column-gap:clamp(20px,2.4vw,44px);column-rule:1px solid var(--rule-soft)}
.cols-3{column-count:3;column-gap:clamp(20px,2.4vw,40px);column-rule:1px solid var(--rule-soft)}
.cols-2 p,.cols-3 p{margin:0 0 1em;break-inside:avoid-column}
@media (max-width:900px){.cols-3{column-count:2}}
@media (max-width:620px){.cols-2,.cols-3{column-count:1;column-rule:0}}

/* ---------- 10. FIGURES / IMAGE PRESENTATION (never crop the subject) ---------- */
.fig{margin:0;display:grid;gap:.85rem}
.fig__frame{
  background:var(--paper-3);border:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.4vw,20px);
}
.on-dark .fig__frame,.band--indigo .fig__frame,.band--forest .fig__frame,.band--charcoal .fig__frame{
  background:rgba(244,238,223,.07);border-color:var(--rule-ondark-soft);
}
.fig__frame img{
  width:100%;height:auto;object-fit:contain;object-position:center;
  filter:saturate(.94) contrast(1.03);
}
.fig__frame--tall img{max-height:min(74vh,780px);width:auto;max-width:100%}
.fig__frame--cap img{max-width:min(100%,320px);width:100%;height:auto}
.fig__cap{display:grid;gap:.35rem;border-top:1px solid var(--rule);padding-top:.6rem}
.on-dark .fig__cap,.band--indigo .fig__cap,.band--forest .fig__cap,.band--charcoal .fig__cap{border-top-color:var(--rule-ondark)}
.fig__cap b{font:600 .68rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brick)}
.band--indigo .fig__cap b,.band--forest .fig__cap b,.band--charcoal .fig__cap b{color:var(--gold)}
.fig__cap span{font-size:.86rem;line-height:1.5;color:var(--ink-muted)}
.band--indigo .fig__cap span,.band--forest .fig__cap span,.band--charcoal .fig__cap span{color:rgba(244,238,223,.68)}

.notice{
  display:inline-block;font:500 .62rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brick);border:1px solid var(--brick);padding:.4em .6em;
}
.band--indigo .notice,.band--forest .notice,.band--charcoal .notice{color:var(--gold);border-color:var(--ochre)}

/* ---------- 11. HOMEPAGE FRONT PAGE ---------- */
.frontpage{border-bottom:2px solid var(--ink);padding-bottom:clamp(1.4rem,3vw,2.4rem)}
.frontpage__flag{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.6rem;
  border-bottom:1px solid var(--rule);padding:clamp(1.1rem,2.6vw,1.9rem) 0 .8rem;
}
.frontpage__flag span{font:500 .655rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faded)}
.frontpage__flag span b{color:var(--brick);font-weight:600}

.fp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(1.6rem,3.4vw,2.8rem);align-items:start}
.fp__hed{grid-column:span 8}
.fp__portrait{grid-column:span 4}
@media (max-width:1000px){.fp__hed,.fp__portrait{grid-column:span 12}.fp__portrait{max-width:420px}}
.fp__name{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3.1rem,11.4vw,10.2rem);line-height:.82;letter-spacing:-.042em;color:var(--indigo);
  margin-bottom:.14em;
}
.fp__name em{display:block;font-style:normal}
.fp__sub{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.5vw,2.15rem);line-height:1.22;color:var(--ink);max-width:24ch;
  padding-top:.55rem;border-top:1px solid var(--rule);
}
/* Separators are drawn as cell borders rather than as a 1px grid gap over a
   coloured background: with auto-fit, a partly filled last row would otherwise
   leave the background showing as empty grey blocks. */
.fp__strap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border-block:1px solid var(--rule);margin-top:clamp(1.4rem,3vw,2.2rem);
}
.fp__strap div{
  padding:.9rem clamp(.8rem,1.3vw,1.15rem);
  border-left:1px solid var(--rule);
}
.fp__strap div:first-child{border-left:0;padding-left:0}
@media (max-width:560px){
  .fp__strap{grid-template-columns:1fr}
  .fp__strap div{border-left:0;padding-inline:0;border-top:1px solid var(--rule-soft)}
  .fp__strap div:first-child{border-top:0}
}
.fp__strap dt{font:500 .62rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faded);margin-bottom:.3rem}
.fp__strap dd{margin:0;font:600 .93rem/1.35 var(--sans);color:var(--ink)}

/* homepage teaser columns */
.teaser{display:grid;gap:.7rem;padding-top:1rem;border-top:2px solid var(--ink)}
.teaser__n{font:500 .64rem/1 var(--mono);letter-spacing:.2em;color:var(--brick)}
.teaser__h{font:700 clamp(1.1rem,1.5vw,1.34rem)/1.14 var(--display);letter-spacing:-.012em}
.teaser__p{font-size:.93rem;line-height:1.58;color:var(--ink-muted)}
.teaser a{text-decoration:none}
.teaser a:hover .teaser__h{color:var(--brick)}

/* ---------- 12. "THREE WORDS ARE NOT ENOUGH" ---------- */
.trio{display:grid;gap:clamp(1.5rem,3vw,2.6rem)}
.trio__stack{display:grid;gap:.1em}
.trio__word{
  font-family:var(--display);font-weight:900;line-height:.86;letter-spacing:-.04em;
  font-size:clamp(3.4rem,15vw,11rem);color:rgba(244,238,223,.2);
  transition:color .5s var(--ease);
}
.trio__word[data-hi="true"]{color:var(--paper)}
.trio__word span{font-size:.24em;letter-spacing:.16em;vertical-align:.9em;margin-left:.5em;font-weight:400;font-family:var(--mono);color:var(--gold)}
.fan{display:flex;flex-wrap:wrap;gap:.55rem}
.fan li{
  font:500 clamp(.68rem,.9vw,.8rem)/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper);border:1px solid var(--rule-ondark);padding:.72em .9em;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.fan li:hover{background:var(--ochre);color:var(--charcoal);border-color:var(--ochre);transform:translateY(-2px)}

/* ---------- 13. READ THE IDEA (signature #1) ---------- */
.rti{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:1rem}
.on-dark .rti,.band--indigo .rti,.band--forest .rti,.band--charcoal .rti{border-top-color:var(--paper)}
.rti__switch{display:flex;gap:0;border:1px solid var(--rule);width:max-content;max-width:100%}
.on-dark .rti__switch,.band--indigo .rti__switch,.band--forest .rti__switch,.band--charcoal .rti__switch{border-color:var(--rule-ondark)}
.rti__btn{
  font:500 .64rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  padding:.78em 1.1em;color:var(--faded);transition:background .22s,color .22s;
}
.rti__btn+.rti__btn{border-left:1px solid var(--rule)}
.on-dark .rti__btn+.rti__btn{border-left-color:var(--rule-ondark)}
.rti__btn[aria-selected="true"]{background:var(--brick);color:var(--paper)}
.on-dark .rti__btn{color:rgba(244,238,223,.6)}
.on-dark .rti__btn[aria-selected="true"]{background:var(--ochre);color:var(--charcoal)}
.rti__panel[hidden]{display:none}
.rti__panel{display:grid;gap:.55rem;animation:rtiIn .34s var(--ease) both}
@keyframes rtiIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.rti__label{font:500 .64rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--gold)}
.rti__h{font:700 clamp(1.24rem,2.1vw,1.75rem)/1.12 var(--display);letter-spacing:-.015em}
.rti__p{font-size:.98rem;line-height:1.62;max-width:56ch;color:var(--ink-muted)}
.on-dark .rti__p,.band--indigo .rti__p,.band--forest .rti__p,.band--charcoal .rti__p{color:rgba(244,238,223,.78)}

/* ---------- 14. PULL QUOTE / VERIFIED SOURCE ---------- */
.pq{display:grid;gap:1rem;border-left:3px solid var(--brick);padding-left:clamp(1rem,2.2vw,1.8rem)}
.pq__q{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.28rem,2.9vw,2.25rem);line-height:1.24;letter-spacing:-.014em;color:var(--ink);text-wrap:pretty;
}
.band--indigo .pq__q,.band--forest .pq__q,.band--charcoal .pq__q{color:var(--paper)}
.band--indigo .pq,.band--forest .pq,.band--charcoal .pq{border-left-color:var(--ochre)}
.pq__src{font:500 .68rem/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faded)}
.pq__src em{font-style:italic;text-transform:none;letter-spacing:.03em}

/* ---------- 15. BIG TYPE STATEMENT ---------- */
.statement{
  font-family:var(--display);font-weight:900;line-height:.9;letter-spacing:-.035em;
  font-size:clamp(2.4rem,8.6vw,7.4rem);text-wrap:balance;
}
.statement em{font-style:normal;color:var(--gold)}
.statement .thin{font-weight:400;font-style:italic;letter-spacing:-.02em}

/* ---------- 16. TIMELINE (newspaper chronology) ---------- */
.chrono{border-top:2px solid var(--ink)}
.chrono__item{border-bottom:1px solid var(--rule);}
.chrono__btn{
  width:100%;display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto;
  gap:.5rem 1.6rem;align-items:baseline;text-align:left;padding:clamp(1rem,2.2vw,1.5rem) 0;
  transition:padding-left .3s var(--ease);
}
.chrono__btn:hover{padding-left:.6rem}
.chrono__yr{font:500 .96rem/1.2 var(--mono);letter-spacing:.02em;color:var(--brick);font-variant-numeric:tabular-nums}
.chrono__t{font:700 clamp(1.06rem,1.7vw,1.5rem)/1.14 var(--display);letter-spacing:-.014em;color:var(--ink)}
.chrono__ico{font:400 1.1rem/1 var(--mono);color:var(--faded);transition:transform .3s var(--ease)}
.chrono__btn[aria-expanded="true"] .chrono__ico{transform:rotate(45deg)}
.chrono__body{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:1.6rem;padding:0 0 clamp(1.1rem,2.4vw,1.7rem)}
.chrono__body[hidden]{display:none}
.chrono__body>div:first-child{font:500 .64rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
@media (max-width:700px){
  .chrono__btn{grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem}
  .chrono__yr{grid-column:1/-1}
  .chrono__body{grid-template-columns:1fr;gap:.6rem}
}

/* ---------- 17. IDEA MAP (political thought) ---------- */
.ideamap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start}
@media (max-width:900px){.ideamap{grid-template-columns:1fr}}
.ideamap__nodes{display:grid;gap:0;border-top:2px solid var(--paper)}
.ideamap__node{
  width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  padding:.95rem .2rem;border-bottom:1px solid var(--rule-ondark-soft);
  transition:padding-left .28s var(--ease),background .22s;
}
.ideamap__node .dot{width:8px;height:8px;background:var(--rule-ondark);transform:translateY(-2px);transition:background .25s,transform .25s}
.ideamap__node .lbl{font:500 .74rem/1.3 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:rgba(244,238,223,.62);transition:color .22s}
.ideamap__node:hover{padding-left:.65rem}
.ideamap__node:hover .lbl{color:var(--paper)}
.ideamap__node[aria-selected="true"] .lbl{color:var(--gold)}
.ideamap__node[aria-selected="true"] .dot{background:var(--ochre);transform:translateY(-2px) scale(1.5)}
.ideamap__panel{display:grid;gap:1.1rem;min-height:280px}
.ideamap__panel[hidden]{display:none}
.ideamap__panel h3{font:700 clamp(1.6rem,3.6vw,2.9rem)/1.02 var(--display);letter-spacing:-.025em;color:var(--paper)}
.ideamap__panel p{color:rgba(244,238,223,.8);max-width:60ch;font-size:.99rem;line-height:1.66}
.ideamap__panel .src{font:500 .64rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--rule-ondark);padding-top:.7rem}

/* ---------- 18. FLOW (swadeshi process) ---------- */
.flow{display:grid;gap:0;border-top:2px solid var(--ink)}
.flow__step{display:grid;grid-template-columns:minmax(0,4.2rem) minmax(0,1fr);gap:clamp(1rem,2.4vw,2.4rem);
  padding:clamp(1.2rem,2.6vw,2rem) 0;border-bottom:1px solid var(--rule);align-items:start}
.flow__n{font:500 .74rem/1.4 var(--mono);letter-spacing:.14em;color:var(--brick);position:relative}
.flow__n::after{content:"";position:absolute;left:.28rem;top:1.9rem;bottom:-2.2rem;width:1px;background:var(--rule)}
.flow__step:last-child .flow__n::after{display:none}
.flow__h{font:700 clamp(1.25rem,2.6vw,2rem)/1.08 var(--display);letter-spacing:-.02em;margin-bottom:.55rem}
.flow__p{max-width:62ch;color:var(--ink-muted);font-size:.98rem;line-height:1.64}
@media (max-width:620px){.flow__step{grid-template-columns:1fr;gap:.5rem}.flow__n::after{display:none}}

/* ---------- 19. COMPARATIVE (lal-bal-pal) ---------- */
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.compare__col{padding:clamp(1.2rem,2.4vw,2rem) clamp(1rem,1.8vw,1.8rem) clamp(1.4rem,3vw,2.4rem);
  border-right:1px solid var(--rule);display:grid;gap:.85rem;align-content:start}
.compare__col:first-child{padding-left:0}
.compare__col:last-child{border-right:0;padding-right:0}
.compare__col--pal{background:var(--paper-2)}
.compare__region{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
.compare__name{font:700 clamp(1.18rem,1.9vw,1.7rem)/1.08 var(--display);letter-spacing:-.018em}
.compare__dates{font:400 .74rem/1.4 var(--mono);color:var(--faded);letter-spacing:.05em}
.compare__p{font-size:.92rem;line-height:1.58;color:var(--ink-muted)}
@media (max-width:820px){
  .compare{grid-template-columns:1fr}
  .compare__col{border-right:0;border-bottom:1px solid var(--rule);padding-inline:0}
  .compare__col--pal{padding-inline:clamp(1rem,4vw,1.6rem)}
  .compare__col:last-child{border-bottom:0}
}
.matrix{width:100%;border-collapse:collapse;font-size:.9rem}
.matrix caption{text-align:left;font:500 .66rem/1.5 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--faded);padding-bottom:.8rem}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:.85rem 1.1rem .85rem 0;border-bottom:1px solid var(--rule-soft);line-height:1.5}
.matrix thead th{font:600 .66rem/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brick);border-bottom:1.5px solid var(--ink)}
.matrix tbody th{font-weight:600;color:var(--ink);width:11rem}
.matrix td{color:var(--ink-muted)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:640px}

/* ---------- 20. LIBRARY (writings) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.filter{
  font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.75em 1em;color:var(--ink-muted);
  transition:background .2s,color .2s,border-color .2s;
}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.search{
  display:flex;align-items:center;gap:.8rem;border-bottom:2px solid var(--ink);padding-bottom:.6rem;
  margin-bottom:clamp(1.2rem,2.6vw,2rem);max-width:520px;
}
.search input{
  flex:1;border:0;background:transparent;font:400 1.02rem/1.4 var(--sans);color:var(--ink);padding:.35em 0;
}
.search input::placeholder{color:var(--faded)}
.search input:focus{outline:0}
.search label{font:500 .64rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brick)}

.works{border-top:2px solid var(--ink)}
.work{
  display:grid;grid-template-columns:minmax(0,6rem) minmax(0,1fr) minmax(0,11rem);
  gap:.5rem 1.6rem;padding:clamp(1rem,2.2vw,1.5rem) 0;border-bottom:1px solid var(--rule);
  align-items:baseline;transition:padding-left .28s var(--ease);
}
.work:hover{padding-left:.55rem}
.work[hidden]{display:none}
.work__yr{font:500 .9rem/1.3 var(--mono);color:var(--brick);font-variant-numeric:tabular-nums}
.work__t{font:700 clamp(1.02rem,1.5vw,1.28rem)/1.2 var(--display);letter-spacing:-.008em}
.work__t i{font-style:italic;font-weight:400}
.work__d{font-size:.9rem;line-height:1.55;color:var(--ink-muted);margin-top:.4rem}
.work__tag{font:500 .62rem/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faded);text-align:right}
@media (max-width:820px){
  .work{grid-template-columns:minmax(0,4.6rem) minmax(0,1fr)}
  .work__tag{grid-column:2;text-align:left;margin-top:.5rem}
}
@media (max-width:520px){
  .work{grid-template-columns:1fr;gap:.25rem}
  .work__tag{grid-column:1}
}
.empty{padding:2.5rem 0;font:400 1rem/1.5 var(--sans);color:var(--faded)}
.empty[hidden]{display:none}

/* ---------- 21. ARCHIVE CONTACT SHEET ---------- */
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);align-items:start}
@media (max-width:900px){.sheet{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plate{margin:0;display:grid;gap:.7rem;align-content:start}
.plate--xl{grid-column:span 6}
.plate--l{grid-column:span 4}
.plate--m{grid-column:span 3}
.plate--s{grid-column:span 3}
.plate--wide{grid-column:span 8}
@media (max-width:900px){
  .plate--xl,.plate--wide{grid-column:span 6}
  .plate--l{grid-column:span 3}
  .plate--m,.plate--s{grid-column:span 3}
}
@media (max-width:560px){
  .plate--xl,.plate--wide{grid-column:span 2}
  .plate--l{grid-column:span 2}
  .plate--m,.plate--s{grid-column:span 1}
}
.plate__frame{
  background:var(--paper-3);border:1px solid var(--rule-soft);padding:clamp(8px,1vw,16px);
  display:flex;align-items:center;justify-content:center;min-height:120px;position:relative;overflow:hidden;
}
.plate__frame img{width:100%;height:auto;object-fit:contain;object-position:center;transition:transform .55s var(--ease)}
.plate:hover .plate__frame img{transform:scale(1.018)}
.plate__no{
  position:absolute;top:0;left:0;background:var(--indigo);color:var(--paper);
  font:500 .58rem/1 var(--mono);letter-spacing:.12em;padding:.45em .55em;
}
.plate__meta{display:grid;gap:.32rem;border-top:1px solid var(--rule);padding-top:.55rem}
.plate__t{font:600 .84rem/1.3 var(--sans);color:var(--ink)}
.plate__d{font:400 .77rem/1.5 var(--sans);color:var(--ink-muted)}
.plate__s{font:500 .6rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faded)}
.plate__s b{color:var(--brick);font-weight:500}
.note-plate{
  grid-column:span 4;border:1px solid var(--rule);padding:clamp(1rem,2vw,1.5rem);display:grid;gap:.6rem;align-content:start;
}
@media (max-width:900px){.note-plate{grid-column:span 3}}
@media (max-width:560px){.note-plate{grid-column:span 2}}
.note-plate h3{font:700 1.05rem/1.16 var(--display);letter-spacing:-.01em}
.note-plate p{font-size:.86rem;line-height:1.56;color:var(--ink-muted)}

/* ---------- 22. LINK ROWS / CTA ---------- */
.linkrow{display:grid;gap:0;border-top:2px solid var(--ink)}
.on-dark .linkrow,.band--indigo .linkrow,.band--forest .linkrow,.band--charcoal .linkrow{border-top-color:var(--paper)}
.linkrow a{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;text-decoration:none;
  padding:clamp(1rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .3s var(--ease);
}
.on-dark .linkrow a,.band--indigo .linkrow a,.band--forest .linkrow a,.band--charcoal .linkrow a{border-bottom-color:var(--rule-ondark-soft)}
.linkrow a:hover{padding-left:.7rem}
.linkrow .lr__t{font:700 clamp(1.24rem,3vw,2.1rem)/1.06 var(--display);letter-spacing:-.024em}
.linkrow .lr__d{font:400 .82rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faded);margin-top:.35rem}
.on-dark .linkrow .lr__d,.band--indigo .linkrow .lr__d{color:rgba(244,238,223,.5)}
.linkrow .lr__a{font:400 1.15rem/1 var(--mono);color:var(--brick);transition:transform .3s var(--ease)}
.on-dark .linkrow .lr__a,.band--indigo .linkrow .lr__a{color:var(--gold)}
.linkrow a:hover .lr__a{transform:translateX(5px)}
.linkrow a:hover .lr__t{color:var(--brick)}
.on-dark .linkrow a:hover .lr__t,.band--indigo .linkrow a:hover .lr__t{color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;
  font:500 .7rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  border:1.5px solid var(--ink);padding:1.05em 1.5em;color:var(--ink);
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--brick{border-color:var(--brick);color:var(--brick)}
.btn--brick:hover{background:var(--brick);color:var(--paper);border-color:var(--brick)}
.on-dark .btn,.band--indigo .btn,.band--forest .btn,.band--charcoal .btn{border-color:var(--paper);color:var(--paper)}
.on-dark .btn:hover,.band--indigo .btn:hover,.band--forest .btn:hover,.band--charcoal .btn:hover{background:var(--paper);color:var(--indigo)}

/* ---------- 23. NEXT / PREV CHAPTER ---------- */
.chapternav{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--ink)}
.chapternav a{
  display:grid;gap:.4rem;padding:clamp(1.2rem,2.6vw,2rem) 0;text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.chapternav a:last-child{text-align:right;padding-left:1.5rem;border-left:1px solid var(--rule)}
.chapternav a:first-child{padding-right:1.5rem}
.chapternav .cn__k{font:500 .62rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faded)}
.chapternav .cn__t{font:700 clamp(1.05rem,2vw,1.55rem)/1.1 var(--display);letter-spacing:-.018em}
.chapternav a:hover .cn__t{color:var(--brick)}
@media (max-width:620px){
  .chapternav{grid-template-columns:1fr}
  .chapternav a:last-child{text-align:left;padding-left:0;border-left:0}
  .chapternav a:first-child{padding-right:0}
}

/* ---------- 24. SOURCES BLOCK ---------- */
.sources{border-top:1px solid var(--rule);padding-top:1.1rem}
.sources h2,.sources h3{font:500 .64rem/1.5 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--faded);margin-bottom:.8rem}
.sources ol{list-style:none;counter-reset:s;display:grid;gap:.55rem}
.sources li{counter-increment:s;padding-left:2.1rem;position:relative;font-size:.84rem;line-height:1.55;color:var(--ink-muted)}
.sources li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.12em;
  font:500 .66rem/1.4 var(--mono);color:var(--brick);letter-spacing:.06em;
}
.sources cite{font-style:italic}
.on-dark .sources li,.band--indigo .sources li{color:rgba(244,238,223,.7)}
.on-dark .sources,.band--indigo .sources{border-top-color:var(--rule-ondark)}

/* status flags for contested facts */
.flag{
  display:inline-flex;align-items:center;gap:.4em;
  font:500 .6rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:.32em .5em;border:1px solid currentColor;white-space:nowrap;
}
.flag--fact{color:var(--forest)}
.flag--interp{color:var(--indigo)}
.flag--contested{color:var(--brick)}
.band--indigo .flag--fact,.band--indigo .flag--interp{color:var(--gold)}

/* ---------- 25. CONTACT ---------- */
.contactline{display:grid;gap:.5rem;padding:clamp(1.2rem,2.6vw,1.8rem) 0;border-bottom:1px solid var(--rule)}
.contactline dt{font:500 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
.contactline dd{margin:0}
.contactline a{
  font:700 clamp(1.35rem,3.6vw,2.5rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;word-break:break-word;transition:color .2s;
}
.contactline a:hover{color:var(--brick)}

/* ---------- 26. FOOTER ---------- */
.colophon{background:var(--charcoal);color:var(--paper);padding-block:clamp(2.6rem,6vw,4.6rem) clamp(1.6rem,3vw,2.4rem)}
.colophon a{color:var(--paper);text-decoration:none}
.colophon__top{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);padding-bottom:clamp(1.8rem,4vw,3rem);
  border-bottom:1px solid var(--rule-ondark);
}
@media (max-width:900px){.colophon__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.colophon__top{grid-template-columns:1fr}}
.colophon__mast{font:900 clamp(1.6rem,4vw,2.5rem)/1 var(--display);letter-spacing:-.028em;margin-bottom:.7rem}
.colophon__blurb{font-size:.88rem;line-height:1.6;color:rgba(244,238,223,.65);max-width:36ch}
.colophon h3{font:500 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.colophon__list{display:grid;gap:.5rem}
.colophon__list a{font-size:.87rem;line-height:1.4;color:rgba(244,238,223,.82);transition:color .2s}
.colophon__list a:hover{color:var(--gold)}
.colophon__contact a{display:block;font:600 .96rem/1.5 var(--sans);color:var(--paper);word-break:break-word}
.colophon__contact a:hover{color:var(--gold)}
.social{display:flex;gap:.55rem;margin-top:1.2rem;flex-wrap:wrap}
.social__i{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--rule-ondark);
  color:rgba(244,238,223,.55);
}
.social__i svg{width:16px;height:16px;fill:currentColor}
.social__note{font:400 .68rem/1.5 var(--mono);letter-spacing:.06em;color:rgba(244,238,223,.4);margin-top:.7rem;max-width:34ch}
.colophon__bottom{
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;align-items:baseline;
  padding-top:clamp(1.1rem,2.4vw,1.6rem);
}
.colophon__bottom p,.colophon__bottom a{font:400 .74rem/1.6 var(--mono);letter-spacing:.05em;color:rgba(244,238,223,.55);margin:0}
.colophon__bottom a{color:var(--gold)}
.colophon__bottom a:hover{text-decoration:underline}

/* ---------- 27. READING PROGRESS ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--brick);width:0;z-index:1100;transition:width .1s linear}

/* ---------- 28. ANIMATION: print becoming digital ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
[data-reveal][data-shown="true"]{opacity:1;transform:none}
[data-reveal="rule"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease)}
[data-reveal="rule"][data-shown="true"]{clip-path:inset(0 0 0 0)}
[data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
[data-reveal="mask"][data-shown="true"]{clip-path:inset(0 0 0 0)}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}

/* homepage press intro (< 1.2s) */
.press-intro{position:fixed;inset:0;z-index:1500;background:var(--paper);pointer-events:none}
.press-intro__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.press-intro__cols i{background:var(--paper);border-right:1px solid var(--rule-soft);transform-origin:top;
  animation:colDrop .62s var(--ease) forwards}
.press-intro__cols i:nth-child(1){animation-delay:.02s}
.press-intro__cols i:nth-child(2){animation-delay:.08s}
.press-intro__cols i:nth-child(3){animation-delay:.14s}
.press-intro__cols i:nth-child(4){animation-delay:.2s}
.press-intro__cols i:nth-child(5){animation-delay:.26s}
.press-intro__cols i:nth-child(6){animation-delay:.32s}
@keyframes colDrop{to{transform:scaleY(0)}}
.press-intro[data-done="true"]{display:none}
/* The masthead headline must never depend on an animation completing in order
   to be visible: no animation-delay, no fill-mode. If animations are throttled,
   blocked or unsupported, the element simply renders in its natural state. */
html[data-intro="run"] .fp__name,html[data-intro="run"] .fp__sub{opacity:0}
html[data-intro="done"] .fp__name{animation:typeset .62s var(--ease)}
html[data-intro="done"] .fp__sub{animation:typeset .82s var(--ease)}
@keyframes typeset{
  0%{opacity:0;transform:translateY(14px) scaleY(.985);letter-spacing:-.055em}
  100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .press-intro{display:none!important}
  html[data-intro="run"] .fp__name,html[data-intro="run"] .fp__sub{opacity:1}
}

/* ---------- 29. PRINT ---------- */
@media print{
  .masthead,.palindex,.drawer,.progress,.press-intro,.chapternav,.colophon .social{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .band{padding-block:1.2rem}
  .band--indigo,.band--forest,.band--charcoal{background:#fff!important;color:#000!important}
  .band--indigo .hed,.band--forest .hed,.band--charcoal .hed{color:#000!important}
  a{text-decoration:underline}
}

/* ---------- 30. MASTHEAD ROW ADJUSTMENTS ---------- */
.masthead__bar{min-height:clamp(52px,6vw,62px)}
:root{--masthead-h:clamp(52px,6vw,62px)}
@media (min-width:1024px){:root{--masthead-h:calc(clamp(52px,6vw,62px) + 42px)}}
.drawer[data-open="false"]{opacity:0;visibility:hidden}

/* ---------- 31. HOMEPAGE "WORLD THAT MADE HIM" STRIPS ---------- */
.strips{display:grid;gap:0;border-top:2px solid var(--paper)}
.strip{
  display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:clamp(.8rem,2.4vw,2.6rem);
  padding:clamp(1.05rem,2.3vw,1.7rem) 0;border-bottom:1px solid var(--rule-ondark-soft);align-items:baseline;
}
.strip__k{font:500 .68rem/1.5 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.strip__v{color:rgba(244,238,223,.82);font-size:.97rem;line-height:1.62;max-width:66ch}
.strip__v b{color:var(--paper);font-weight:600}
@media (max-width:620px){.strip{grid-template-columns:1fr;gap:.35rem}}

/* ---------- 32. COLUMN SIMULATION (journalist page) ---------- */
.desk{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
}
.desk__col{
  padding:clamp(1.1rem,2.2vw,1.7rem) clamp(1rem,1.6vw,1.6rem) clamp(1.3rem,2.6vw,2rem) 0;
  border-right:1px solid var(--rule-soft);display:grid;gap:.6rem;align-content:start;
}
.desk__col:last-child{border-right:0}
.desk__k{font:500 .63rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
.desk__h{font:700 clamp(1.06rem,1.5vw,1.3rem)/1.14 var(--display);letter-spacing:-.01em}
.desk__p{font-size:.89rem;line-height:1.58;color:var(--ink-muted)}
@media (max-width:620px){.desk__col{border-right:0;border-bottom:1px solid var(--rule-soft);padding-right:0}
  .desk__col:last-child{border-bottom:0}}

/* ---------- 33. MASTHEAD SLUG (journalist mastheads list) ---------- */
.slugs{display:grid;gap:0;border-top:2px solid var(--ink)}
.slug{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,7rem) minmax(0,1fr);
  gap:.4rem 1.6rem;padding:clamp(1rem,2.1vw,1.5rem) 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.slug__t{font:700 clamp(1.12rem,1.9vw,1.55rem)/1.12 var(--display);font-style:italic;letter-spacing:-.014em}
.slug__y{font:500 .82rem/1.4 var(--mono);color:var(--brick);font-variant-numeric:tabular-nums}
.slug__d{font-size:.92rem;line-height:1.58;color:var(--ink-muted)}
@media (max-width:820px){.slug{grid-template-columns:minmax(0,1fr) minmax(0,6rem)}
  .slug__d{grid-column:1/-1;margin-top:.35rem}}
@media (max-width:520px){.slug{grid-template-columns:1fr;gap:.2rem}.slug__d{margin-top:.4rem}}

/* ---------- 34. LAYERS (swadeshi five levels) ---------- */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:var(--rule-ondark)}
.layer{background:var(--forest);padding:clamp(1.1rem,2.2vw,1.8rem);display:grid;gap:.6rem;align-content:start}
.layer__n{font:500 .62rem/1 var(--mono);letter-spacing:.2em;color:var(--gold)}
.layer__h{font:700 clamp(1.05rem,1.5vw,1.28rem)/1.14 var(--display);color:var(--paper)}
.layer__p{font-size:.87rem;line-height:1.56;color:rgba(244,238,223,.74)}

/* ---------- 35. SPEECH LIST (orator) ---------- */
.speeches{display:grid;gap:0;border-top:2px solid var(--paper)}
.speech{
  display:grid;grid-template-columns:minmax(0,3rem) minmax(0,1fr);gap:clamp(.8rem,2vw,2rem);
  padding:clamp(1.1rem,2.3vw,1.7rem) 0;border-bottom:1px solid var(--rule-ondark-soft);
}
.speech__n{font:500 .74rem/1.5 var(--mono);color:var(--gold)}
.speech__t{font:700 clamp(1.2rem,2.4vw,1.85rem)/1.08 var(--display);letter-spacing:-.018em;color:var(--paper);margin-bottom:.45rem}
.speech__p{font-size:.94rem;line-height:1.6;color:rgba(244,238,223,.76);max-width:62ch}
@media (max-width:620px){.speech{grid-template-columns:1fr;gap:.35rem}}

/* ---------- 36. BLACKBOARD (national education) ---------- */
.board{
  background:var(--forest);border:1px solid rgba(244,238,223,.18);
  padding:clamp(1.4rem,4vw,3.4rem);display:grid;gap:clamp(1rem,2.4vw,1.8rem);
}
.board__line{font:400 clamp(1.05rem,2.4vw,1.85rem)/1.4 var(--display);font-style:italic;color:var(--paper);
  padding-bottom:.7rem;border-bottom:1px dashed rgba(244,238,223,.24)}
.board__line:last-child{border-bottom:0;padding-bottom:0}
.board__line b{font-style:normal;font-weight:700;color:var(--gold)}

/* ---------- 37. FIGURE STAT ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:1px;background:var(--rule)}
.stat{background:var(--paper);padding:clamp(1rem,2vw,1.5rem) 1rem clamp(1.1rem,2.2vw,1.6rem) 0}
.stat__n{font:900 clamp(2rem,4.4vw,3.4rem)/.9 var(--display);letter-spacing:-.035em;color:var(--indigo);margin-bottom:.4rem}
.stat__l{font:500 .64rem/1.45 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}
.band--paper2 .stat{background:var(--paper-2)}

/* ---------- 38. SAFETY: never allow sideways scroll ---------- */
.band,.shell,.grid,.sheet{max-width:100%}
.cols-2,.cols-3{max-width:100%}

/* ---------- 39. PROSE SUB-LABEL (keeps h4's look at h3's level) ---------- */
.prose h3.sublabel{
  font:600 .76rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick);margin-bottom:.75em;
}
.prose p+h3.sublabel{margin-top:1.9em}

/* ---------- 40. CONTRAST: context-aware gold + on-dark text weights ----------
   --gold resolves to a dark gold on paper and a light gold on dark surfaces,
   so the same rules pass WCAG AA in both contexts. Verified ratios:
   #7A5C1C on #F4EEDF = 5.38:1 · on #EDE5D2 = 4.96:1
   #CCA451 on #24364B = 5.28:1 · on #253B32 = 5.14:1 · on #202322 = 6.79:1     */
:root{--gold:var(--ochre-ink)}
.band--indigo,.band--forest,.band--charcoal,.colophon,.drawer,.on-dark,.layer,.board{--gold:var(--ochre-bright)}

/* on-dark secondary text raised to meet AA at small sizes */
.band--indigo .kicker,.band--forest .kicker,.band--charcoal .kicker{color:rgba(244,238,223,.68)}
.drawer__link .n{color:rgba(244,238,223,.62)}
.drawer__link .d{color:rgba(244,238,223,.62)}
.social__note{color:rgba(244,238,223,.58)}
.on-dark .linkrow .lr__d,.band--indigo .linkrow .lr__d,
.band--forest .linkrow .lr__d,.band--charcoal .linkrow .lr__d{color:rgba(244,238,223,.62)}
.on-dark .erule__k,.band--indigo .erule__k,
.band--forest .erule__k,.band--charcoal .erule__k{color:rgba(244,238,223,.68)}
.on-dark .rti__btn,.band--indigo .rti__btn,
.band--forest .rti__btn,.band--charcoal .rti__btn{color:rgba(244,238,223,.72)}
.ideamap__node .lbl{color:rgba(244,238,223,.72)}
.compare__col .compare__dates{color:var(--faded)}
.band--indigo .compare__dates,.band--forest .compare__dates,
.band--charcoal .compare__dates{color:rgba(244,238,223,.66)}
.band--indigo .fig__cap span,.band--forest .fig__cap span,
.band--charcoal .fig__cap span{color:rgba(244,238,223,.76)}

/* Metadata blue is unreadable on dark surfaces: redefine the token per context
   so every var(--faded) usage inherits a legible value automatically. */
.band--indigo,.band--forest,.band--charcoal,.colophon,.drawer,.on-dark{--faded:rgba(244,238,223,.70)}

/* Arrow + hover colour in link rows on every dark surface (not just indigo) */
.band--forest .linkrow .lr__a,.band--charcoal .linkrow .lr__a{color:var(--gold)}
.band--forest .linkrow a:hover .lr__t,.band--charcoal .linkrow a:hover .lr__t{color:var(--gold)}
.band--forest .linkrow .lr__d,.band--charcoal .linkrow .lr__d{color:rgba(244,238,223,.62)}

/* Status flags on dark surfaces */
.band--forest .flag--fact,.band--forest .flag--interp,.band--forest .flag--contested,
.band--charcoal .flag--fact,.band--charcoal .flag--interp,.band--charcoal .flag--contested{color:var(--gold)}

/* LAL / BAL / PAL — the unhighlighted words must still be readable (AA large text) */
.trio__word{color:rgba(244,238,223,.45)}

/* The selected tab keeps its own foreground on dark bands: the generic
   on-dark .rti__btn colour must not override paper-on-brick (5.75:1). */
.band--indigo .rti__btn[aria-selected="true"],.band--forest .rti__btn[aria-selected="true"],
.band--charcoal .rti__btn[aria-selected="true"],.on-dark .rti__btn[aria-selected="true"]{color:var(--paper)}

/* The highlighted Pal column is tinted, which lifts its background: use a
   brighter gold there so the region label still clears AA. */
.band--indigo .compare__col--pal .compare__region,
.band--forest .compare__col--pal .compare__region,
.band--charcoal .compare__col--pal .compare__region{color:#D8B468}

/* ---------- 41. DARK-BAND PARITY ----------------------------------------
   Components were given dark-surface styles under `.on-dark`, but the pages
   mark dark sections with `.band--indigo/--forest/--charcoal`. Without this
   block, `.erule` text renders dark-on-dark (invisible). Every `.on-dark`
   rule therefore has a band-class equivalent here.                        */
.band--indigo .erule,.band--forest .erule,.band--charcoal .erule{border-top-color:var(--paper)}
.band--indigo .erule__row,.band--forest .erule__row,.band--charcoal .erule__row{border-bottom-color:var(--rule-ondark-soft)}
.band--indigo .erule__v,.band--forest .erule__v,.band--charcoal .erule__v{color:var(--paper)}
.band--indigo .erule__v em,.band--forest .erule__v em,.band--charcoal .erule__v em{color:rgba(244,238,223,.78)}

.band--indigo .rti,.band--forest .rti,.band--charcoal .rti{border-top-color:var(--paper)}
.band--indigo .rti__switch,.band--forest .rti__switch,.band--charcoal .rti__switch{border-color:var(--rule-ondark)}
.band--indigo .rti__btn+.rti__btn,.band--forest .rti__btn+.rti__btn,
.band--charcoal .rti__btn+.rti__btn{border-left-color:var(--rule-ondark)}
.band--indigo .rti__p,.band--forest .rti__p,.band--charcoal .rti__p{color:rgba(244,238,223,.80)}

.band--indigo .linkrow,.band--forest .linkrow,.band--charcoal .linkrow{border-top-color:var(--paper)}
.band--indigo .linkrow a,.band--forest .linkrow a,.band--charcoal .linkrow a{border-bottom-color:var(--rule-ondark-soft)}

.band--indigo .sources,.band--forest .sources,.band--charcoal .sources{border-top-color:var(--rule-ondark)}
.band--indigo .sources li,.band--forest .sources li,.band--charcoal .sources li{color:rgba(244,238,223,.78)}

.band--indigo .fig__frame,.band--forest .fig__frame,.band--charcoal .fig__frame{
  background:rgba(244,238,223,.07);border-color:var(--rule-ondark-soft)}

.band--indigo .prose,.band--forest .prose,.band--charcoal .prose{color:rgba(244,238,223,.82)}
.band--indigo .prose strong,.band--forest .prose strong,.band--charcoal .prose strong{color:var(--paper)}
.band--indigo .lede,.band--forest .lede,.band--charcoal .lede{color:var(--paper)}
.band--indigo .prose h3,.band--forest .prose h3,.band--charcoal .prose h3{color:var(--paper)}

/* The tinted "Pal" column sits on a lighter ground — brighten its gold. */
.band--indigo .compare__col--pal,.band--forest .compare__col--pal,
.band--charcoal .compare__col--pal{--gold:#D8B468}