/*
 * Home page only (/ and /mr/), loaded after site.css. A full-width river-blue band with the state's
 * rivers drawn faint beside the headline, the numbers that matter, a status card over the foot of the
 * band, the finder beside a framed map, four steps, and the proposal. One accent family (water blue);
 * severity colours appear only on conditions. No script.
 */
:root {
  --hero-bg: #0b2a45;
  --hero-bg-2: #061a2c;
  --hero-glow: rgba(52, 140, 205, .30);
  --hero-ink: #f3f8fc;
  --hero-ink-2: #c0d1e1;
  --hero-ink-3: #9ab3ca;
  --hero-accent: #8fd1ff;
  --hero-accent-hover: #c4e8ff;
  --hero-line: rgba(191, 222, 247, .18);
  --hero-river: #7cc6f7;
  --blue: #0b5cab;
  --blue-hover: #084a8a;
  --blue-tint: #edf4fb;
  --sea: #e3eef8;
  --card-radius: 16px;
  --card-shadow: 0 1px 2px rgba(12, 32, 56, .05), 0 18px 40px -24px rgba(12, 32, 56, .28);
  --photo-dim: 1;
}
/* Dark: the band stays visibly blue against the near-black page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-bg: #0d2c49; --hero-bg-2: #0a2139; --hero-glow: rgba(52, 140, 205, .22);
    --blue: #8cc8f5; --blue-hover: #b6dcf9; --blue-tint: #0f1b27; --sea: #0f1d2a;
    --card-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); --photo-dim: .86;
  }
  :root:not([data-theme="light"]) .home-exhibit { --water: #6b93b5; --line-strong: #8a8c93; }
}
:root[data-theme="dark"] {
  --hero-bg: #0d2c49; --hero-bg-2: #0a2139; --hero-glow: rgba(52, 140, 205, .22);
  --blue: #8cc8f5; --blue-hover: #b6dcf9; --blue-tint: #0f1b27; --sea: #0f1d2a;
  --card-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); --photo-dim: .86;
}
:root[data-theme="dark"] .home-exhibit { --water: #6b93b5; --line-strong: #8a8c93; }

/* One accent family on this page: links and focus in water blue. */
.site--bleed { --accent: var(--blue); --accent-hover: var(--blue-hover); --focus: var(--blue); }
.site-main--bleed { padding: 0; }

/* The header joins the band. The amber demonstration ribbon stays, on one line where it fits. */
.site--bleed .site-header {
  --text: var(--hero-ink); --text-2: var(--hero-ink-2); --accent: var(--hero-accent); --accent-hover: var(--hero-accent-hover); --focus: var(--hero-accent-hover);
  background: var(--hero-bg); border-bottom-color: var(--hero-line);
}
.site--bleed .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--hero-accent); }
.ribbon__op-short { display: none; }
@media (max-width: 1599px) { .ribbon__op { display: none; } .ribbon__op-short { display: inline; } }

/* ------------------------------------------------------------------ hero --- */
.hero {
  --text: var(--hero-ink); --text-2: var(--hero-ink-2); --text-3: var(--hero-ink-3);
  --accent: var(--hero-accent); --accent-hover: var(--hero-accent-hover); --focus: var(--hero-accent-hover); --line: var(--hero-line);
  --copy-w: min(880px, 62vw);
  position: relative; overflow: hidden; isolation: isolate; color: var(--text);
  background: radial-gradient(900px 520px at 80% 32%, var(--hero-glow), transparent 70%), linear-gradient(180deg, var(--hero-bg), var(--hero-bg-2));
  box-shadow: inset 0 -1px 0 rgba(143, 209, 255, .12);
}
.hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Wide screens: the whole state, sized so its coast starts just past the lede (640 px), fading out
   above the numbers. */
.hero-art {
  position: absolute; top: 68px; right: calc(max(0px, (100% - var(--content-max)) / 2) - 24px);
  width: auto; height: min(640px, (100vw - 664px) * .83); max-width: none; overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.hero-art__land { fill: rgba(143, 209, 255, .06); stroke: rgba(191, 222, 247, .35); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-art__glow, .hero-art__rivers { fill: none; stroke: var(--hero-river); stroke-linecap: round; stroke-linejoin: round; }
.hero-art__glow { stroke-opacity: .12; stroke-width: 5; }
.hero-art__rivers { stroke-opacity: .8; stroke-width: 1.8; }
.hero-art__sites circle { fill: #d6efff; stroke: rgba(143, 209, 255, .22); stroke-width: 8; paint-order: stroke; vector-effect: non-scaling-stroke; }
.hero-art__towns { fill: var(--hero-ink-3); font: 600 13px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
html[lang="mr"] .hero-art__towns { font-family: "Plex Sans Devanagari", var(--font-sans), "Nirmala UI", sans-serif; font-size: 14px; letter-spacing: 0; }
.hero__inner { position: relative; padding-top: 48px; padding-bottom: 40px; }
.hero__copy { max-width: var(--copy-w); }
.hero__kicker { margin: 0 0 14px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hero-accent); }
/* English page: seven Devanagari letters are not worth an 80 KB font, so they use the system's. */
.hero__kicker [lang="mr"] { letter-spacing: .02em; font-family: "Nirmala UI", "Noto Sans Devanagari", "Mangal", var(--font-sans); }
.site-main .hero__h1 { margin: 0; max-width: none; font: 500 clamp(40px, 3.2vw + 22px, 68px)/1.04 var(--font-serif); letter-spacing: -.025em; text-wrap: balance; }
.hero__hl { display: block; color: var(--hero-accent); }
.hero__lede { margin: 22px 0 0; max-width: min(640px, 100%); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; color: var(--hero-ink-2); }
.hero__sub { color: var(--hero-ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(191, 222, 247, .42); color: var(--hero-ink); font-size: 16px; font-weight: 600; line-height: 1.2;
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.hero__btn:hover { text-decoration: none; color: var(--hero-ink); background: rgba(191, 222, 247, .1); border-color: rgba(191, 222, 247, .75); }
.hero__btn--primary, .hero__btn--primary:hover { color: #04223b; }
.hero__btn--primary { background: var(--hero-accent); border-color: var(--hero-accent); }
.hero__btn--primary:hover { background: var(--hero-accent-hover); border-color: var(--hero-accent-hover); }
.hero__cta .hero__btn { text-decoration: none; }
.hero__btn:focus-visible { outline-offset: 3px; border-radius: 999px; }
.arrow { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s var(--ease-out); }
.hero__btn--primary:hover .arrow { transform: translateY(2px); }
.hero__btn:not(.hero__btn--primary):hover .arrow, .more-link:hover .arrow { transform: translateX(3px); }
.hero__pilot { margin: 20px 0 0; font-size: 14px; line-height: 26px; color: var(--hero-ink-2); }
.hero__pill { display: inline-block; margin-right: 6px; padding: 1px 10px; border: 1px solid rgba(191, 222, 247, .4); border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--hero-ink); }
.hero__pilot a { margin-left: 4px; color: var(--hero-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.en-note { font-weight: 400; }
.hero .mr-notice { margin: 0 0 24px; max-width: 720px; background: rgba(191, 222, 247, .08); border-left-color: var(--hero-accent); color: var(--hero-ink); }

/* The numbers: the problem, then this pilot. Each carries its source. */
.figs { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; padding-bottom: 128px; }
.figs__group { padding-top: 20px; border-top: 1px solid var(--hero-line); }
.figs__cap { margin: 0 0 16px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hero-ink-2); }
.figs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.fig { padding-left: 20px; border-left: 1px solid var(--hero-line); }
.fig p { margin: 0; }
.fig__n { font: 500 48px/1 var(--font-serif); letter-spacing: -.02em; color: var(--hero-ink); white-space: nowrap; }
.figs__group--problem .fig__n { font-size: clamp(56px, 5vw, 96px); letter-spacing: -.03em; }
.fig__n--hot { color: var(--hero-accent); }
.fig__q, .fig__unit { font: 500 max(14px, .3em)/1 var(--font-sans); letter-spacing: 0; color: var(--hero-ink-2); }
.fig p.fig__label { margin-top: 14px; max-width: 32ch; font-size: 15px; line-height: 22px; color: var(--hero-ink); }
.fig p.fig__src { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--hero-ink-3); }
.fig__src a { color: var(--hero-ink-2); }

/* ------------------------------------------------ status, finder and map --- */
/* The status card and the map rise over the foot of the band. The source order (status, finder, map)
   matches every one-column layout. */
.home-main { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "now map" "list map"; column-gap: 48px; align-items: start; margin-top: -64px; }
.home-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.home-h2 { margin: 0 0 12px; font: 500 clamp(28px, 2.5vw, 38px)/1.15 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }

.home-now { grid-area: now; padding: 28px 32px 26px; }
.home-now__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.home-now__label { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.home-now__label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.home-now__answer { margin: 0 0 18px; max-width: 40em; font: 500 22px/32px var(--font-serif); letter-spacing: -.005em; color: var(--text); }
/* Nothing current: calmer, not louder. */
.home-now__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.home-now__pill svg { width: 12px; height: 12px; }
.home-now--quiet .home-now__answer { font-size: 19px; line-height: 28px; }
.home-now__tally { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
.home-now__tally li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); }
.home-now__tally svg { width: 12px; height: 12px; flex: none; }
.home-now__tally .is-zero { color: var(--text-3); background: none; box-shadow: inset 0 0 0 1px var(--line); }
/* "Last known": only when nothing is current. Hollow dashed glyphs in ink, never a severity colour. */
.home-now__last { margin: 0 0 4px; }
.home-now__lastlead { margin: 0 0 10px; max-width: 64ch; font-size: 14px; line-height: 21px; color: var(--text-2); }
.home-now__lastlead strong { color: var(--text); font-weight: 600; }
.home-now__tally--last svg { width: 13px; height: 13px; fill: none; stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 2 1.4; }
.home-now__meta { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--text-2); }
.home-now__meta .system-state { margin-right: 4px; font-weight: 500; }
.home-now .tag:lang(mr) { letter-spacing: 0; }

.home-exhibit { grid-area: map; padding: 24px 24px 20px; }
.home-exhibit .figure__title { font-size: 16px; line-height: 24px; }
.home-exhibit .exhibit { width: 100%; max-width: none; margin: 0; border-radius: 12px; background: var(--sea); box-shadow: inset 0 0 0 1px var(--line); }
/* The home map only (the app's maps keep base.css): land filled inside a neat line, labels with a halo,
   towns for bearings, and "no current reading" rings in --text-3 to match their legend key (WCAG 1.4.11). */
.home-exhibit .ex-land { fill: var(--land); opacity: 1; stroke-opacity: .7; }
.home-exhibit .ex-river-label, .home-exhibit .ex-place text { paint-order: stroke; stroke: var(--land); stroke-width: 3px; stroke-linejoin: round; }
.home-exhibit .ex-place rect { fill: var(--text-2); }
.home-exhibit .ex-place text { fill: var(--text-2); font-size: 11px; }
.home-exhibit .ex-silent { stroke: var(--text-3); stroke-width: 1.75; }
.home-exhibit .exhibit-legend { margin-top: 14px; }
.home-exhibit .exhibit-legend .sev { font-weight: 400; }
.home-exhibit .exhibit-legend .sev > span { color: var(--text-2); }
.home-exhibit .exhibit-legend .fresh { white-space: normal; }
.home-exhibit .exhibit-legend svg { flex: none; }
.legend__lead { font-weight: 600; }
.twin-key { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.home-exhibit .table { font-size: 13px; line-height: 18px; }
.home-exhibit .table th { background: var(--surface); }
.home-exhibit .table th, .home-exhibit .table td { padding: 8px 12px 8px 0; }
@media (min-width: 1024px) and (min-height: 880px) { .home-exhibit { position: sticky; top: 24px; } .home-exhibit:has(.table-twin[open]) { position: static; } }

.finder { grid-area: list; margin-top: 64px; scroll-margin-top: 24px; }
.finder__help, .finder__missing { margin: 0 0 20px; max-width: 64ch; font-size: 15px; line-height: 23px; color: var(--text-2); }
.finder__sim { font-weight: 600; color: var(--text); }
.finder__missing { margin: 20px 0 0; font-size: 14px; line-height: 21px; }
.finder__key { margin: 16px 0 0; }
.finder__key > summary { font-size: 14px; }
.finder__key dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 8px; max-width: 76ch; font-size: 13px; line-height: 20px; }
.finder__key dd { margin: 0; color: var(--text-2); }
.finder__key p { margin: 0 0 4px; max-width: 76ch; font-size: 13px; line-height: 20px; color: var(--text-2); }

/* Regions: one framed group; each opens to its water bodies. */
.regions { border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); overflow: hidden; }
.region { scroll-margin-top: 24px; }
.region + .region { border-top: 1px solid var(--line); }
.region__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 12px 24px; padding: 20px 28px; cursor: pointer; list-style: none; transition: background-color .16s var(--ease-out); }
.region__sum::-webkit-details-marker { display: none; }
.region__sum:hover, .region[open] > .region__sum { background: var(--surface-2); }
.region__sum:focus-visible { outline-offset: -3px; border-radius: 0; }
.region__name { display: block; font: 500 20px/28px var(--font-serif); letter-spacing: -.005em; color: var(--text); }
.region__count { display: block; font-size: 13px; line-height: 20px; color: var(--text-3); }
.region__worst { display: grid; justify-items: end; gap: 2px; font-size: 14px; line-height: 20px; }
.region__cap { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.region__cov { font-size: 12px; line-height: 16px; color: var(--text-2); }
.region__chev {
  box-sizing: border-box; width: 32px; height: 32px; padding: 8px; border: 1px solid var(--line); border-radius: 50%;
  fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease-out), background-color .16s var(--ease-out);
}
.region__sum:hover .region__chev, .region[open] .region__chev { border-color: transparent; background: var(--blue-tint); stroke: var(--blue); }
.region[open] .region__chev { transform: rotate(180deg); }
.region__body { padding: 12px 16px 8px; }
.finder__cols, .wb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, .9fr); column-gap: 24px; }
.finder__cols { padding: 0 8px 6px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.finder__cols span:last-child, .wb__age { text-align: right; }
.wb-list { list-style: none; margin: 0; padding: 0; }
.wb { position: relative; align-items: start; padding: 14px 8px; border-radius: 10px; transition: background-color .16s var(--ease-out); }
.wb + .wb::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; border-top: 1px solid var(--line); }
.wb:hover { background: var(--surface-2); }
.wb:hover::before, .wb:hover + .wb::before { visibility: hidden; }
.wb__name a { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.wb:hover .wb__name a { color: var(--accent); }
.wb__name a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.wb__places, .wb__stamp { display: block; font-size: 13px; line-height: 20px; color: var(--text-3); font-weight: 400; }
.wb__cond, .wb__age { font-size: 15px; line-height: 22px; }
.wb__age { font-weight: 500; }
.wb__age--same { font-weight: 400; color: var(--text-2); }
.wb__detail { display: block; font-size: 13px; line-height: 20px; color: var(--text-2); }

/* ----------------------------------------------------------- how it works --- */
/* A process line, not four boxes: one rule through four icon nodes. */
.how { margin-top: 96px; padding: 88px 0 80px; background: var(--blue-tint); }
.sec-head { margin-bottom: 44px; }
.sec-head__lede { margin: 0; max-width: 56ch; font-size: 17px; line-height: 26px; color: var(--text-2); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.how__step { position: relative; }
.how__step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 68px; right: -20px; border-top: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.how__node { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--blue); color: var(--blue); }
.how__icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.how__n { display: block; margin: 24px 0 8px; font: 500 40px/1 var(--font-serif); color: var(--blue); }
.how__step h3 { margin: 0 0 8px; font-size: 20px; line-height: 28px; }
.how__step p { margin: 0; max-width: 36ch; font-size: 16px; line-height: 25px; color: var(--text-2); }
.how__more { margin: 44px 0 0; }
.more-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
p a.more-link { text-decoration: none; }
.more-link:hover { text-decoration: underline; }

/* ------------------------------------------------------ about and trust --- */
.home-about { padding-top: 104px; padding-bottom: 24px; scroll-margin-top: 16px; }
.home-about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.home-about__body { padding-top: 70px; }
.home-about__big { margin: 20px 0 0; max-width: 30ch; font: 500 clamp(22px, 2.1vw, 30px)/1.38 var(--font-serif); letter-spacing: -.01em; color: var(--text); }
.home-about__body p { margin: 0 0 14px; max-width: 60ch; font-size: 16px; line-height: 26px; color: var(--text-2); }
.home-about__body p.home-about__links { margin: 20px 0 0; }
.home-trust { padding-top: 88px; padding-bottom: 24px; }
.home-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.home-claim { padding: 32px 36px 34px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); }
.home-claim.is-ai { border: 1px dashed var(--ai); }
.home-claim h3 { margin: 0 0 10px; font-size: 20px; line-height: 28px; }
.home-claim p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 25px; color: var(--text-2); }
/* The evidence you can check: one strip of rows. */
.home-proof { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.home-proof li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 8px 32px; align-items: baseline; padding: 22px 4px; }
.home-proof li + li { border-top: 1px solid var(--line); }
.home-proof h3 { margin: 0; font-size: 17px; line-height: 24px; }
.home-proof p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 23px; color: var(--text-2); }
.home-proof .more-link { justify-self: end; }

/* ------------------------------------------------------------- proposal --- */
/* One reading order at every width: who, the status, the disclaimer, the credit; then what it asks. */
.home-proposal { padding-top: 88px; padding-bottom: 104px; }
.home-proposal__card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; padding: 48px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.people { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px 40px; }
.people li { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 18px; }
.people img { flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line); filter: brightness(var(--photo-dim)); }
.people strong { display: block; font-size: 17px; line-height: 24px; font-weight: 600; }
.people__title { display: block; margin-top: 2px; max-width: 34ch; font-size: 14px; line-height: 20px; color: var(--text-2); }
.home-proposal__status { margin: 28px 0 0; padding: 12px 16px; max-width: 68ch; border-left: 3px solid var(--system); border-radius: 0 10px 10px 0; background: var(--surface-2); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.home-proposal__note { margin: 14px 0 8px; max-width: 68ch; font-size: 14px; line-height: 21px; color: var(--text-2); }
.home-proposal__credit { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.home-proposal__ask { align-self: start; padding: 28px; border-radius: 14px; background: var(--blue-tint); }
.home-proposal__ask h3 { margin: 0 0 10px; font-size: 17px; line-height: 24px; }
.home-proposal__ask p { margin: 0 0 12px; font-size: 15px; line-height: 24px; color: var(--text-2); }
.home-proposal__ask p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- widths --- */
/* Below 1280 px: the west of the state (Mumbai, Nashik, Pune), large, starting where the copy ends,
   so no line or dot passes under the text. */
@media (max-width: 1279px) {
  .hero { --copy-w: min(520px, 58vw); }
  .hero-art {
    right: auto; left: calc(var(--gutter) + var(--copy-w) - 12px); top: 32px; height: 720px;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 80%); mask-image: linear-gradient(to bottom, #000 50%, transparent 80%);
  }
  .hero-art__towns { font-size: 11px; }
  html[lang="mr"] .hero-art__towns { font-size: 12px; }
  .hero__lede { max-width: none; }
}
@media (max-width: 1023px) {
  .hero__inner { padding-top: 56px; }
  .figs { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .home-about__body { padding-top: 0; }
  .home-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "list" "map"; }
  .home-exhibit { margin-top: 48px; }
  /* The caption and legend read top-down beside the map. */
  .home-exhibit .figure { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .home-exhibit figcaption { grid-column: 2; grid-row: 1; }
  .home-exhibit .exhibit { grid-column: 1; grid-row: 1 / span 3; }
  .home-exhibit .exhibit-legend { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding-top: 8px; }
  .home-exhibit .table-twin { grid-column: 1 / -1; grid-row: 4; }
  .how { margin-top: 72px; padding: 64px 0; }
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .how__step:nth-child(2n)::after { display: none; }
  .home-about__grid, .home-proposal__card { grid-template-columns: minmax(0, 1fr); }
  .home-about { padding-top: 72px; }
  .home-claims { gap: 20px; }
  .home-claim { padding: 26px 26px 28px; }
  .home-proof li { grid-template-columns: minmax(0, 1fr) auto; }
  .home-proof p { grid-column: 1 / -1; grid-row: 2; }
  .home-proof .more-link { grid-column: 2; grid-row: 1; }
  .home-proposal__card { padding: 36px; }
}
/* Phones: the art gets a band of its own between the copy and the numbers, clear of all text. */
@media (max-width: 639px) {
  .ribbon__op-short { display: block; }
  .hero { --copy-w: 100%; display: flex; flex-direction: column; }
  .hero > .container { width: 100%; }
  .hero__inner { order: 1; padding-top: 40px; padding-bottom: 8px; }
  .hero__art { order: 2; position: relative; inset: auto; height: 260px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); }
  .hero-art { left: calc(50% - 140px); top: -60px; height: 420px; -webkit-mask-image: none; mask-image: none; }
  .hero-art__towns { font-size: 19px; }
  html[lang="mr"] .hero-art__towns { font-size: 20px; }
  .figs { order: 3; row-gap: 28px; padding-bottom: 88px; }
  .hero__lede { margin-top: 18px; }
  .hero__btn { flex: 1 1 auto; justify-content: center; }
  .figs__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fig { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; padding-left: 0; border-left: 0; }
  .fig__n, .figs__group--problem .fig__n { grid-row: 1 / span 2; font-size: 38px; }
  .figs__group--problem .fig__n { font-size: 44px; }
  .fig__q, .fig__unit { font-size: 14px; }
  .fig p.fig__label { margin-top: 0; }
  .home-main { margin-top: -48px; }
  .home-now { padding: 22px 20px 20px; }
  .home-now__answer { font-size: 19px; line-height: 28px; }
  .home-exhibit { padding: 16px 16px 14px; }
  .home-exhibit .figure { display: block; }
  .home-exhibit .exhibit-legend { flex-direction: row; gap: 4px 14px; margin-top: 14px; padding-top: 0; }
  .exhibit-legend .legend__lead { flex-basis: 100%; }
  .finder { margin-top: 48px; }
  .finder__cols, .wb__stamp { display: none; }
  .finder__key dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .finder__key dd { margin-bottom: 6px; }
  .region__sum { grid-template-columns: minmax(0, 1fr) 32px; padding: 16px; }
  .region__name { font-size: 18px; line-height: 26px; }
  .region__worst { grid-row: 2; grid-column: 1; display: flex; flex-wrap: wrap; justify-content: start; align-items: center; gap: 2px 8px; }
  .region__cov { flex-basis: 100%; }
  .region__chev { grid-row: 1 / span 2; grid-column: 2; }
  .region__body { padding: 4px 8px; }
  .wb { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name age" "cond cond"; row-gap: 6px; padding: 12px 8px; }
  .wb__name { grid-area: name; } .wb__cond { grid-area: cond; }
  .wb__age { grid-area: age; font-size: 13px; line-height: 24px; font-weight: 400; color: var(--text-2); }
  .how { margin-top: 56px; padding: 52px 0; }
  .sec-head { margin-bottom: 32px; }
  .how__steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .how__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; }
  .how__node { grid-row: 1 / span 3; }
  .how__step:not(:last-child)::after { display: block; top: 64px; bottom: -24px; left: 27px; right: auto; border-top: 0; border-left: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); }
  .how__n { margin: 8px 0 6px; font-size: 32px; }
  .home-claims { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .home-claim { padding: 22px 20px; }
  .home-claim h3 { font-size: 18px; line-height: 25px; }
  .home-about, .home-trust { padding-top: 56px; }
  .home-proof li { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .home-proof .more-link { grid-column: 1; grid-row: 3; justify-self: start; }
  .home-proposal { padding-top: 56px; padding-bottom: 64px; }
  .home-proposal__card { padding: 24px 20px; }
  .home-proposal__ask { padding: 22px 20px; }
  .people { flex-direction: column; gap: 20px; }
  .people li { flex: none; }
  .people img { width: 80px; height: 80px; }
}

/* Marathi: Devanagari is set in Plex Sans Devanagari, and never letter-spaced. */
html[lang="mr"] .site-main .hero__h1, html[lang="mr"] .home-h2, html[lang="mr"] .home-about__big, html[lang="mr"] .home-now__answer, html[lang="mr"] .fig__q, html[lang="mr"] .fig__unit, html[lang="mr"] .region__name {
  font-family: "Plex Sans Devanagari", var(--font-sans), "Nirmala UI", "Noto Sans Devanagari", sans-serif; font-weight: 600; letter-spacing: 0;
}
html[lang="mr"] .site-main .hero__h1 { font-size: clamp(32px, 2.6vw + 20px, 60px); line-height: 1.28; }
html[lang="mr"] .hero__hl { display: inline; }
html[lang="mr"] .home-h2 { line-height: 1.35; }
html[lang="mr"] .home-now__answer, html[lang="mr"] .home-about__big { font-weight: 400; line-height: 1.55; }
html[lang="mr"] .hero__kicker, html[lang="mr"] .figs__cap, html[lang="mr"] .home-now__label, html[lang="mr"] .region__cap, html[lang="mr"] .hero__pill { letter-spacing: 0; }

/* ---------------------------------------------------------------- motion --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-art { animation: hero-art-in 1.6s var(--ease-out) both; }
  @keyframes hero-art-in { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .arrow, .region__chev { animation: none; transition: none; }
}
/* Print: dark-band ink would vanish on paper, so the band prints in black on white, and regions print open. */
@media print {
  .hero, .site--bleed .site-header {
    --hero-ink: #000; --hero-ink-2: #333; --hero-ink-3: #555; --hero-accent: #0b5cab; --hero-line: #ccc;
    --text: #000; --text-2: #333; --text-3: #555; --accent: #0b5cab;
    background: none; color: #000; box-shadow: none;
  }
  .hero__hl, .site--bleed .site-nav a[aria-current="page"] { color: inherit; }
  .hero__art, .hero__cta { display: none; }
  .home-main { margin-top: 0; }
  .home-card, .regions, .home-proposal__card { box-shadow: none; }
  details.region::details-content { content-visibility: visible; }
}