/* ============================================================
   Himanshu Tiwari - "The Kisan Ledger"
   Newsprint editorial. Paper base, ink type, riso-pink party accent.
   ============================================================ */

:root{
  /* paper & ink - neutrals tinted warm toward the paper hue */
  --paper:      oklch(0.968 0.010 82);
  --paper-deep: oklch(0.930 0.014 78);
  --paper-edge: oklch(0.895 0.016 76);
  --ink:        oklch(0.235 0.014 62);
  --ink-soft:   oklch(0.455 0.016 64);
  --ink-faint:  oklch(0.620 0.014 66);
  --rule:       oklch(0.815 0.014 76);
  --rule-hair:  oklch(0.860 0.012 76);

  /* party accent: BRS pink, pulled to a printable riso ink */
  --riso:       oklch(0.630 0.196 356);
  --riso-deep:  oklch(0.470 0.150 356);
  --riso-wash:  oklch(0.930 0.040 356);

  /* 4pt scale */
  --s-2:4px; --s-1:8px; --s0:12px; --s1:16px; --s2:24px;
  --s3:32px; --s4:48px; --s5:64px; --s6:96px; --s7:144px;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 72px);
  --display: "Khand", "Noto Sans Devanagari", system-ui, sans-serif;
  --text: "Martel", Georgia, serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.7;
  font-synthesis-weight:none;
}
/* faint press-texture: a hairline baseline field, not a stock noise png */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, oklch(0.5 0.02 70 / 0.018) 3px 4px);
}
main, header, footer{position:relative; z-index:1}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.02; margin:0; letter-spacing:0.002em}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:var(--s-1) var(--s1); z-index:99;
}
.skip:focus{left:var(--s1); top:var(--s1)}

:focus-visible{outline:2px solid var(--riso-deep); outline-offset:3px}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  box-shadow:0 1px 0 var(--paper), 0 3px 0 var(--rule-hair);
}
.masthead__inner{
  max-width:1400px; margin:0 auto; padding:var(--s0) var(--gutter);
  display:flex; align-items:baseline; gap:var(--s2);
}
.wordmark{text-decoration:none; display:flex; flex-direction:column; gap:2px; margin-right:auto}
.wordmark__name{
  font-family:var(--display); font-weight:700; font-size:clamp(21px, 2.6vw, 29px);
  letter-spacing:0.01em; line-height:1;
}
.wordmark__role{
  font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
html[data-lang="hi"] .wordmark__role{letter-spacing:0.04em; text-transform:none}

.nav{display:flex; gap:var(--s2)}
.nav a{
  font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:0.09em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
html[data-lang="hi"] .nav a{letter-spacing:0.02em; text-transform:none; font-size:17px}
.nav a:hover{color:var(--ink); border-bottom-color:var(--riso)}

.langtoggle{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:0.08em;
  background:none; border:1px solid var(--rule); color:var(--ink-soft);
  padding:4px var(--s-1); cursor:pointer; transition:border-color .18s, color .18s;
}
.langtoggle:hover{border-color:var(--ink); color:var(--ink)}
.langtoggle__sep{opacity:.4; margin:0 3px}
html[data-lang="en"] .langtoggle__on,
html[data-lang="hi"] .langtoggle__off{color:var(--riso-deep)}

.burger{display:none; background:none; border:0; cursor:pointer; padding:6px; width:36px}
.burger span{display:block; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .25s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mobile{display:none; flex-direction:column; padding:var(--s1) var(--gutter) var(--s2); border-top:1px solid var(--rule-hair)}
.nav-mobile a{
  font-family:var(--display); font-size:22px; text-decoration:none; padding:var(--s-1) 0;
  border-bottom:1px solid var(--rule-hair);
}

/* ---------- hero ---------- */
.hero{max-width:1400px; margin:0 auto; padding:var(--s4) var(--gutter) var(--s5)}

.dateline{
  display:flex; align-items:center; gap:var(--s1); margin:0 0 var(--s4);
  font-family:var(--display); font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
html[data-lang="hi"] .dateline{letter-spacing:0.03em; text-transform:none; font-size:16px}
.dateline__rule{flex:1; height:1px; background:var(--rule); min-width:20px}

.hero__grid{
  display:grid; gap:var(--s4) var(--s5);
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  align-items:start;
}
.hero__portrait{margin:0; position:relative}
.hero__portrait img{
  width:100%; filter:saturate(0.92) contrast(1.04);
  border:1px solid var(--ink);
}
.hero__portrait figcaption,
.roots__fig figcaption{
  margin-top:var(--s-1); font-family:var(--display); font-size:12px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
html[data-lang="hi"] .hero__portrait figcaption,
html[data-lang="hi"] .roots__fig figcaption{letter-spacing:0.02em; text-transform:none; font-size:15px}

.hero__kicker{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(19px, 2.1vw, 26px); color:var(--ink-soft); line-height:1.25;
  max-width:22ch; margin-bottom:var(--s-1);
}
.hero__title{
  display:block; font-size:clamp(46px, 8.2vw, 108px); line-height:0.92;
  letter-spacing:-0.012em; text-wrap:balance;
}
html[data-lang="hi"] .hero__title{font-size:clamp(38px, 6.4vw, 84px); line-height:1.06}

.lede{
  font-size:clamp(18px, 1.35vw, 21px); line-height:1.62; max-width:var(--measure);
  margin:var(--s2) 0 0; color:var(--ink);
}
.lede::first-line{font-weight:600}

.facts{list-style:none; margin:var(--s3) 0 0; padding:0; border-top:1px solid var(--ink); max-width:var(--measure)}
.facts li{
  display:grid; grid-template-columns:minmax(96px, 22%) 1fr; gap:var(--s1);
  padding:var(--s0) 0; border-bottom:1px solid var(--rule-hair);
}
.facts__k{
  font-family:var(--display); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); padding-top:5px;
}
html[data-lang="hi"] .facts__k{letter-spacing:0.02em; text-transform:none; font-size:16px; padding-top:0}
.facts__v{font-size:16px; line-height:1.5}

/* ---------- sections ---------- */
.section{max-width:1400px; margin:0 auto; padding:var(--s6) var(--gutter)}
.section--band{
  max-width:none; background:var(--paper-deep);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.section--band > *{max-width:1400px; margin-inline:auto}

.section__head{margin-bottom:var(--s4); max-width:var(--measure)}
.folio{
  display:block; font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:0.24em; color:var(--riso-deep); margin-bottom:var(--s-1);
}
.section__head h2, .roots__text h2{font-size:clamp(34px, 4.6vw, 62px); letter-spacing:-0.01em}
.section__sub{margin:var(--s0) 0 0; color:var(--ink-soft); font-size:17px}

/* ---------- ledger (chronology) ---------- */
.ledger{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.ledger__row{
  display:grid; grid-template-columns:minmax(120px, 18%) 1fr; gap:var(--s2) var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--rule-hair);
}
.ledger__when{display:flex; flex-direction:column; gap:2px}
.ledger__year{font-family:var(--display); font-weight:600; font-size:clamp(28px, 3.4vw, 42px); line-height:1; color:var(--riso-deep)}
.ledger__day{font-family:var(--display); font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint)}
html[data-lang="hi"] .ledger__day{letter-spacing:0.02em; text-transform:none; font-size:17px}
.ledger__what h3{font-size:clamp(22px, 2.3vw, 30px); margin-bottom:var(--s0); max-width:34ch}
.ledger__what p{margin:0 0 var(--s0); max-width:var(--measure); color:var(--ink-soft)}
.ledger__cite a{
  font-family:var(--display); font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--riso-deep); text-decoration:none; border-bottom:1px solid var(--riso-wash);
  transition:border-color .2s;
}
html[data-lang="hi"] .ledger__cite a{letter-spacing:0.02em; text-transform:none; font-size:16px}
.ledger__cite a:hover{border-bottom-color:var(--riso)}

/* ---------- roots ---------- */
.roots{
  display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);
  gap:var(--s5); padding:var(--s6) var(--gutter); align-items:center;
}
.roots__fig{margin:0}
.roots__fig img{width:100%; border:1px solid var(--ink); filter:saturate(0.9) contrast(1.03)}
.roots__text p{max-width:var(--measure); color:var(--ink-soft); margin:var(--s2) 0 0}
.roots__text h2{margin-top:var(--s-1)}
.pull{
  margin:var(--s3) 0 0; padding:var(--s2) 0 0; border-top:2px solid var(--riso);
  font-family:var(--display); font-weight:500; font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.22; color:var(--ink); max-width:26ch;
}

/* ---------- plates (gallery) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--s-1); margin-bottom:var(--s3)}
.filter{
  font-family:var(--display); font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  background:none; border:1px solid var(--rule); color:var(--ink-soft);
  padding:6px var(--s0); cursor:pointer; transition:border-color .18s, color .18s, background-color .18s;
}
html[data-lang="hi"] .filter{letter-spacing:0.02em; text-transform:none; font-size:17px}
.filter:hover{border-color:var(--ink); color:var(--ink)}
.filter.is-on{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.plates{columns:3; column-gap:var(--s2)}
.plate{
  break-inside:avoid; margin:0 0 var(--s2); padding:0; border:0; background:none;
  width:100%; text-align:left; cursor:pointer; display:block; color:inherit;
}
.plate img{
  width:100%; border:1px solid var(--rule);
  filter:saturate(0.94) contrast(1.03);
  transition:filter .35s var(--ease), border-color .25s;
}
.plate:hover img, .plate:focus-visible img{filter:saturate(1.02) contrast(1.05); border-color:var(--ink)}
.plate__cap{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-1);
  margin-top:6px; font-size:13.5px; line-height:1.45; color:var(--ink-soft);
}
.plate__no{
  font-family:var(--display); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--riso-deep); padding-top:3px;
}
html[data-lang="hi"] .plate__no{letter-spacing:0.02em; text-transform:none; font-size:15px; padding-top:0}
.plate[hidden]{display:none}

/* ---------- press clips ---------- */
.clips{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); max-width:1100px}
.clips li{border-bottom:1px solid var(--rule-hair)}
.clips a{
  display:grid; grid-template-columns:minmax(120px, 16%) 1fr auto; gap:var(--s1) var(--s2);
  align-items:baseline; padding:var(--s2) 0; text-decoration:none;
  transition:background-color .2s;
}
.clips a:hover{background:var(--riso-wash)}
.clip__src{font-family:var(--display); font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--riso-deep)}
html[data-lang="hi"] .clip__src{letter-spacing:0.02em; text-transform:none; font-size:17px}
.clip__title{font-size:19px; line-height:1.4}
.clip__date{font-family:var(--display); font-size:14px; letter-spacing:0.08em; color:var(--ink-faint); white-space:nowrap}

/* ---------- contact ---------- */
.contact{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--s4);
  padding:0 var(--gutter) var(--s6);
}
.contact__block h3{
  font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:var(--s0); font-weight:600;
}
html[data-lang="hi"] .contact__block h3{letter-spacing:0.02em; text-transform:none; font-size:19px}
.contact__block p{margin:0; font-size:17px}
.contact__social{display:flex; flex-wrap:wrap; gap:var(--s1)}
.contact__social a{text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .2s}
.contact__social a:hover{border-bottom-color:var(--riso)}
.contact__block a{color:var(--ink)}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--ink); padding:var(--s3) var(--gutter);
  max-width:1400px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); justify-content:space-between;
}
.foot p{margin:0; font-size:14px; color:var(--ink-soft)}

/* ---------- lightbox ---------- */
.lightbox{
  border:0; padding:0; background:oklch(0.19 0.012 62); color:var(--paper);
  width:min(96vw, 1200px); max-width:none; max-height:96vh; overflow:hidden;
}
.lightbox::backdrop{background:oklch(0.15 0.01 62 / 0.92)}
.lightbox__fig{margin:0; display:grid; grid-template-rows:1fr auto; height:min(96vh, 100%)}
.lightbox__fig img{
  width:100%; height:100%; max-height:calc(96vh - 84px); object-fit:contain; background:oklch(0.15 0.01 62);
}
.lightbox__fig figcaption{
  padding:var(--s1) var(--s2); display:flex; gap:var(--s1); align-items:baseline;
  font-size:15px; color:oklch(0.82 0.012 76); border-top:1px solid oklch(0.34 0.012 62);
}
.lightbox__plate{
  font-family:var(--display); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--riso); white-space:nowrap;
}
html[data-lang="hi"] .lightbox__plate{letter-spacing:0.02em; text-transform:none; font-size:15px}
.lightbox__close, .lightbox__nav{
  position:absolute; background:oklch(0.19 0.012 62 / 0.72); border:1px solid oklch(0.4 0.012 62);
  color:var(--paper); cursor:pointer; font-size:26px; line-height:1;
  width:44px; height:44px; display:grid; place-items:center; transition:background-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover{background:var(--riso-deep)}
.lightbox__close{top:var(--s0); right:var(--s0); z-index:2}
.lightbox__nav{top:calc(50% - 22px)}
.lightbox__nav--prev{left:var(--s0)}
.lightbox__nav--next{right:var(--s0)}

/* ---------- motion ---------- */
.js .reveal{opacity:0; transform:translateY(14px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .plate{opacity:0; transform:translateY(12px)}
.plate.is-in{opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .plate{opacity:1 !important; transform:none !important; transition:none !important}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .plates{columns:2}
  .hero__grid{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--s3)}
  .roots{gap:var(--s4); padding:var(--s5) var(--gutter)}
}
@media (max-width: 860px){
  .nav{display:none}
  .burger{display:block}
  .nav-mobile:not([hidden]){display:flex}
  .hero__grid{grid-template-columns:1fr}
  .hero__portrait{max-width:min(420px, 78%)}
  .roots{grid-template-columns:1fr}
  .section{padding:var(--s5) var(--gutter)}
  .ledger__row{grid-template-columns:1fr; gap:var(--s1)}
  .ledger__when{flex-direction:row; align-items:baseline; gap:var(--s1)}
  .clips a{grid-template-columns:1fr; gap:4px}
  .dateline{flex-wrap:wrap; gap:var(--s-1)}
  .dateline__rule{display:none}
}
@media (max-width: 560px){
  body{font-size:16px}
  .plates{columns:1}
  .facts li{grid-template-columns:1fr; gap:2px}
  .facts__k{padding-top:0}
  .lightbox{width:100vw; height:100vh; max-height:100vh}
  .lightbox__fig img{max-height:calc(100vh - 96px)}
}