/* ==========================================================================
   OUR INDIA — styling
   Made By Alakshit

   A reading site before it is anything else: one column, generous measure,
   and charts that sit inside the prose rather than interrupting it.

   Two typefaces, both already on the reader's machine — a serif for the
   headings because this is a document, and the system sans everywhere
   else. Chart text is always the sans: numbers are easier to compare when
   the letterforms are plain.

   Colour is in tokens so light and dark are the same page with different
   values. The chart colours are not chosen by eye — they are the validated
   categorical palette, checked against these two surfaces for colour-vision
   separation and contrast.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:        #faf8f4;
  --surface:      #ffffff;
  --surface-2:    #f3efe7;
  --ink:          #141310;
  --ink-2:        #4a4740;
  --ink-3:        #7d7970;
  --rule:         #e3ded2;
  --rule-strong:  #cdc6b6;
  --accent:       #9a3412;   /* deep terracotta, for rules and marks */
  --accent-soft:  #f6ebe2;
  --gold:         #8a6a13;   /* deep enough to read on paper */

  /* the validated categorical palette — light steps */
  --series-1:     #2a78d6;
  --series-2:     #eb6834;
  --series-3:     #1baf7a;
  --grid:         #e6e1d6;
  --axis:         #c9c3b4;

  --measure:      44rem;
  --radius:       14px;
  --shadow:       0 1px 2px rgba(20,19,16,.05), 0 8px 24px rgba(20,19,16,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:       #12110f;
    --surface:     #1a1917;
    --surface-2:   #232220;
    --ink:         #f6f4ef;
    --ink-2:       #c3bfb4;
    --ink-3:       #8d8981;
    --rule:        #2b2926;
    --rule-strong: #3d3a35;
    --accent:      #e8825a;
    --accent-soft: #2a201b;
    --gold:        #e3b23c;   /* lifted for the dark surface */

    --series-1:    #3987e5;
    --series-2:    #d95926;
    --series-3:    #199e70;
    --grid:        #26241f;
    --axis:        #3a3730;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       #12110f;
  --surface:     #1a1917;
  --surface-2:   #232220;
  --ink:         #f6f4ef;
  --ink-2:       #c3bfb4;
  --ink-3:       #8d8981;
  --rule:        #2b2926;
  --rule-strong: #3d3a35;
  --accent:      #e8825a;
  --accent-soft: #2a201b;
  --gold:        #e3b23c;

  --series-1:    #3987e5;
  --series-2:    #d95926;
  --series-3:    #199e70;
  --grid:        #26241f;
  --axis:        #3a3730;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.72 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }
.wide { width: min(100% - 2.5rem, 66rem); margin-inline: auto; }

/* ── the bar at the top ──────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top__in {
  display: flex; align-items: center; gap: 1rem;
  width: min(100% - 2.5rem, 66rem); margin-inline: auto;
  height: 56px;
}
.brand {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--accent); }
.top nav {
  display: flex; gap: 1.1rem; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
}
.top nav::-webkit-scrollbar { display: none; }
.top nav a {
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--ink); }
.top nav a.on { color: var(--ink); border-bottom-color: var(--accent); }

.themebtn {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.themebtn:hover { color: var(--ink); border-color: var(--rule-strong); }

/* ── the opening ─────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 9vw, 6.5rem) 0 2.5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  margin: 0 0 1.1rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6; color: var(--ink-2); margin: 0 0 1.4rem;
  max-width: 38rem;
}
.hero__rule { height: 3px; width: 74px; background: var(--accent); border: 0; margin: 0 0 1.4rem; }
.hero__note {
  font-size: 14.5px; color: var(--ink-3); max-width: 34rem;
  border-left: 2px solid var(--rule-strong); padding-left: 1rem;
}

/* ── the four numbers ────────────────────────────────────────────── */
.tiles {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; margin: 2.5rem 0 1rem;
}
.tile { background: var(--surface); padding: 1.4rem 1.3rem; }
.tile__v {
  font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.05;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  color: var(--ink);
}
.tile__k { font-size: 13.5px; color: var(--ink-2); margin-top: .5rem; line-height: 1.45; }
.tile__s { font-size: 11.5px; color: var(--ink-3); margin-top: .6rem; }

/* ── sections ────────────────────────────────────────────────────── */
/* the sticky bar is 56px, so an anchor jump stops short of it */
section { padding: clamp(2.6rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--rule);
          scroll-margin-top: 68px; }
section:first-of-type { border-top: 0; }

.eyebrow {
  font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem;
}
section > .wrap > h2, section > .wide > h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.5rem); margin: 0 0 1rem;
}
.lede { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 1.6rem; }

p { margin: 0 0 1.15rem; }
.wrap > ul, .wrap > ol { margin: 0 0 1.3rem; padding-left: 1.2rem; }
li { margin-bottom: .5rem; }

h3 { font-size: 1.32rem; margin: 2.2rem 0 .7rem; }
h3:first-child { margin-top: 0; }

strong { font-weight: 650; }
em.q { font-style: italic; color: var(--ink-2); }

/* a fact worth stopping on */
.pull {
  margin: 2rem 0; padding: 1.3rem 1.5rem;
  background: var(--accent-soft); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
  font-size: 1.05rem; line-height: 1.6; color: var(--ink);
}
.pull b { font-weight: 650; }

/* ── people and things, as cards ─────────────────────────────────── */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1.6rem 0; }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.15rem 1.2rem; box-shadow: var(--shadow);
}
.card h4 { font-size: 1.05rem; margin: 0 0 .15rem; }
.card .when { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; margin-bottom: .55rem; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ── the road the numerals took ──────────────────────────────────── */
.road { list-style: none; margin: 1.8rem 0; padding: 0; position: relative; }
.road::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: var(--rule-strong);
}
.road li { position: relative; padding: 0 0 1.5rem 2.2rem; margin: 0; }
.road li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
}
.road .when { font: 600 12px/1 system-ui, sans-serif; letter-spacing: .1em;
              text-transform: uppercase; color: var(--accent); }
.road .place { font-family: "Iowan Old Style", Palatino, Georgia, serif;
               font-size: 1.08rem; font-weight: 600; margin: .3rem 0 .25rem; }
.road p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ── plain tables ────────────────────────────────────────────────── */
.tbl { width: 100%; overflow-x: auto; margin: 1.5rem 0; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl thead th { font: 600 11.5px/1.3 system-ui, sans-serif; letter-spacing: .08em;
                text-transform: uppercase; color: var(--ink-3); }
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr:hover td, .tbl tr:hover th { background: var(--surface-2); }

/* ── charts ──────────────────────────────────────────────────────── */
.viz {
  margin: 2rem 0; padding: 1.3rem 1.3rem 1rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.viz__head { margin-bottom: .9rem; }
.viz__title { font-size: 1.1rem; margin: 0; }
.viz__unit { font: 400 12.5px/1 system-ui, sans-serif; color: var(--ink-3); margin: .35rem 0 0; }
.viz__plot { position: relative; }
.viz__svg { display: block; width: 100%; overflow: visible; }

.viz__grid { stroke: var(--grid); stroke-width: 1; }
.viz__mark { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 4; }
.viz__marklab { font: 500 10.5px system-ui, sans-serif; fill: var(--ink-3); }
.viz__tick { font: 400 11.5px system-ui, sans-serif; fill: var(--ink-3); text-anchor: middle; }
.viz__tick--y { text-anchor: end; font-variant-numeric: tabular-nums; }

.viz__area { fill: var(--series-1); opacity: .12; }
.viz__line { fill: none; stroke: var(--series-1); stroke-width: 2;
             stroke-linejoin: round; stroke-linecap: round; }
.viz__dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2;
            pointer-events: none; }   /* the hit target above it does the work */
.viz__endlab { font: 600 12.5px system-ui, sans-serif; fill: var(--ink); }

.viz__bartrack { fill: var(--surface-2); }
.viz__bar { fill: var(--series-1); }
.viz__bar--hi { fill: var(--series-2); }
.viz__barlab { font: 400 13px system-ui, sans-serif; fill: var(--ink-2); }
.viz__row.is-india .viz__barlab { fill: var(--ink); font-weight: 600; }
.viz__barval { font: 600 13px system-ui, sans-serif; fill: var(--ink);
               font-variant-numeric: tabular-nums; }

.viz__gaplab { font: 600 13.5px system-ui, sans-serif; fill: var(--ink); }
.viz__gapline { stroke: var(--rule-strong); stroke-width: 2; }
.viz__gapdot { stroke: var(--surface); stroke-width: 2; }
.viz__gapdot--in { fill: var(--series-2); }
.viz__gapdot--we { fill: var(--series-1); }
.viz__gapyears { font: 500 11.5px system-ui, sans-serif; fill: var(--ink-3); }

.viz__hit { fill: transparent; cursor: default; }

.viz__tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: var(--paper);
  border-radius: 9px; padding: .5rem .65rem;
  font: 400 12.5px/1.45 system-ui, sans-serif; max-width: 260px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.viz__tip b { display: block; font-weight: 600; margin-bottom: .1rem; }
.viz__tip span { display: block; opacity: .85; }

.viz__foot { margin-top: .9rem; border-top: 1px solid var(--rule); padding-top: .75rem; }
.viz__note { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 0 .7rem; }
.viz__srcrow { display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline;
               justify-content: space-between; margin: 0; }
.viz__src { font-size: 11.5px; color: var(--ink-3); }
.viz__toggle {
  font: 500 12px system-ui, sans-serif; color: var(--ink-2);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: .28rem .7rem; cursor: pointer; white-space: nowrap;
}
.viz__toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.viz__table { margin-top: .8rem; overflow-x: auto; }
.viz__table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.viz__table th, .viz__table td { text-align: left; padding: .4rem .55rem;
                                 border-bottom: 1px solid var(--rule); }
.viz__table thead th { font-weight: 600; color: var(--ink-3); font-size: 11.5px;
                       text-transform: uppercase; letter-spacing: .07em; }
.viz__table td { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: -0.4rem 0 1rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem;
               font-size: 12.5px; color: var(--ink-2); }
.legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ── sourced facts, where a chart would have to be invented ──────── */
.facts {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.fact { background: var(--surface); padding: 1.1rem 1.1rem 1.2rem; }
.fact__v {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--ink);
}
.fact__k { font-size: 13px; color: var(--ink-2); margin-top: .45rem; line-height: 1.45; }
.fact__n { font-size: 12px; color: var(--ink-3); margin-top: .5rem; line-height: 1.5; }

/* ── honesty box ─────────────────────────────────────────────────── */
.caveat {
  margin: 2rem 0; padding: 1.2rem 1.35rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--surface);
}
.caveat h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.caveat p, .caveat li { font-size: 14.5px; color: var(--ink-2); }
.caveat ul { margin: .6rem 0 0; padding-left: 1.15rem; }

/* ── sources ─────────────────────────────────────────────────────── */
.srclist { font-size: 14px; color: var(--ink-2); }
.srclist li { margin-bottom: .7rem; }

footer {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem;
  font-size: 13.5px; color: var(--ink-3);
}
footer b { color: var(--ink-2); }

/* the credit, last thing on the page and the largest thing in the footer */
.madeby {
  margin: 1.8rem 0 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 4.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--gold);
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .top nav { display: none; }
  .viz { padding: 1rem .85rem .8rem; }
}