/* Namma Weatherman v2, "Living Monsoon" (docs/REDESIGN.md).
   Colour: split-complementary. A cool monsoon field (ink, sky, peacock) against warm Kanchipuram silk
   (magenta, zari gold), 60 / 30 / 10. Data colours follow IMD scales. Motion is always driven by data. */

@property --sky-1 { syntax: "<color>"; inherits: true; initial-value: #0f1d2c; }
@property --sky-2 { syntax: "<color>"; inherits: true; initial-value: #1c3546; }
@property --sky-3 { syntax: "<color>"; inherits: true; initial-value: #3c5e6b; }
@view-transition { navigation: auto; }

:root {
    --ink: #0e1b2a;
    --ink-2: #16283a;
    --rice: #fbf7f0;
    --rice-2: #f1eadd;
    --card: #fffdf8;
    --text: #162231;
    --muted: #5b6670;
    --line: #e3dacb;
    --peacock: #0e7c7b;
    --magenta: #b5195a;
    --zari: #d9a520;
    --on-sky: #f3f6f8;

    /* IMD daily rain classes: very light, light, moderate, heavy, very heavy, extremely heavy */
    --r-1: #e8f4f8; --r-2: #bde7f2; --r-3: #5bc0de; --r-4: #2b7bb9; --r-5: #3d3a9e; --r-6: #b5195a;
    /* IMD seasonal categories, from IMD's own district-map legend (reports only) */
    --c-le: #0594ff; --c-e: #69bef7; --c-n: #68de58; --c-d: #f94112; --c-ld: #ffff01; --c-nr: #ffffff; --c-nd: #c0c0c0;

    --font-head: "Anek Tamil", "Noto Sans Tamil", system-ui, sans-serif;
    --font-mono: "Martian Mono", ui-monospace, Menlo, monospace;
    --font-body: "Newsreader", "Noto Serif Tamil", Georgia, serif;
    --col: 38rem;
    --wide: 72rem;
    --gutter: 16px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --rice: #0f1a26; --rice-2: #16222f; --card: #16222f; --text: #e8edf1; --muted: #9db0be; --line: #26394a;
        --peacock: #3fb3b0; --magenta: #e0457f;
        --r-1: #1d3446; --r-2: #23577f; --r-3: #3f88c8; --r-4: #79b4f0; --r-5: #a8a5f0; --r-6: #f06d9c;
        color-scheme: dark;
    }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rice); color: var(--text); font: 400 1.0625rem/1.6 var(--font-head); }
img { max-width: 100%; height: auto; }
a { color: var(--peacock); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--zari); outline-offset: 2px; }
p:lang(ta), li:lang(ta) { line-height: 1.85; }
h1:lang(ta), h2:lang(ta), h3:lang(ta) { line-height: 1.3; }
.wrap { max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: 20; padding: 8px 12px; background: var(--zari); color: var(--ink); }
.skip-link:focus { top: 8px; }

/* Living sky (sky.js sets data-preset from live weather; presets cross-fade through @property) */
.sky {
    --sky-1: #0f1d2c; --sky-2: #1c3546; --sky-3: #3c5e6b; --scrim: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--on-sky);
    background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--sky-3) 100%);
    transition: --sky-1 1.4s var(--ease), --sky-2 1.4s var(--ease), --sky-3 1.4s var(--ease);
}
.sky[data-preset="dawn"] { --sky-1: #23314f; --sky-2: #b5707a; --sky-3: #f4b36b; --scrim: .55; }
.sky[data-preset="day-clear"] { --sky-1: #1f6fb2; --sky-2: #4fa3d9; --sky-3: #bfe3f2; --scrim: .45; }
.sky[data-preset="day-cloud"] { --sky-1: #5b7385; --sky-2: #8ba3b3; --sky-3: #c9d6dd; --scrim: .55; }
.sky[data-preset="rain"] { --sky-1: #0f1d2c; --sky-2: #1c3546; --sky-3: #3c5e6b; }
.sky[data-preset="storm"] { --sky-1: #0a121b; --sky-2: #18262f; --sky-3: #2e3d45; }
.sky[data-preset="dusk"] { --sky-1: #1a2340; --sky-2: #7a4e62; --sky-3: #e8894a; --scrim: .5; }
.sky[data-preset="night-clear"] { --sky-1: #060b18; --sky-2: #0e1a33; --sky-3: #1b2e4f; }
.sky[data-preset="night-cloud"] { --sky-1: #0b1219; --sky-2: #16222c; --sky-3: #24333d; }
.sky::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(6 12 22 / var(--scrim)) 0%, rgb(6 12 22 / 0) 78%); }
.sky-gl, .sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky-gl { opacity: 0; transition: opacity 1.2s var(--ease); }
.has-gl .sky-gl { opacity: 1; }
.sky-canvas { z-index: 1; }
.sky-inner { position: relative; z-index: 2; padding-top: 10px; padding-bottom: 104px; text-shadow: 0 1px 2px rgb(6 12 22 / .3), 0 0 24px rgb(6 12 22 / .35); }
.sky-compact .sky-inner { padding-bottom: 14px; }
/* Home: the sky fills the screen. Text up top, "now" standing on the horizon, the lead story peeking from below */
.sky:not(.sky-compact) { display: flex; flex-direction: column; min-height: calc(100svh - 40px); }
.sky:not(.sky-compact) .sky-inner { display: flex; flex: 1; flex-direction: column; width: 100%; }
.sky:not(.sky-compact) .site-nav { margin-bottom: max(48px, 20svh); }   /* open sky for the sun, moon and lightning */
.sky:not(.sky-compact) .sky-foot { margin-top: auto; }
.sky:not(.sky-compact) .now { margin-top: 0; }
.sky:not(.sky-compact) .now-temp { grid-row: span 2; }
.sky:not(.sky-compact) .now-stats { grid-column: 2; flex-direction: column; margin: 0 0 .5rem; }
.sky:not(.sky-compact)::after { content: ""; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(0deg, rgb(6 12 22 / .62), rgb(6 12 22 / 0)); transition: opacity 1.2s var(--ease); }
.sky.has-gl::after { opacity: 0; }
.dateline { display: flex; align-items: center; justify-content: space-between; gap: 12px; opacity: .8; }
.lang-switch { display: flex; margin-right: -8px; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; color: inherit; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-decoration: none; }
.lang-switch a:lang(ta) { font: 600 .9rem/1 var(--font-head); letter-spacing: 0; }
.lang-switch a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--zari); }
.wordmark { display: block; width: fit-content; margin-top: 14px; color: inherit; text-decoration: none; }
.wordmark-ta {
    display: block;
    font: 800 clamp(2.4rem, 11vw, 5.4rem)/.95 var(--font-head);
    font-stretch: 92%;
    letter-spacing: -.01em;
}
.wordmark-en { display: block; margin-top: 8px; opacity: .65; letter-spacing: .3em; }
/* lightning (sky.js sets --flash) lights up the masthead and the temperature */
.wordmark-ta, .now-temp { text-shadow: 0 0 calc(var(--flash, 0) * 48px) rgb(214 230 255 / calc(var(--flash, 0) * .9)), 0 1px 2px rgb(6 12 22 / .3), 0 0 24px rgb(6 12 22 / .35); }
.sky-compact .wordmark-ta { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.sky-compact .wordmark-en { display: none; }
.site-nav .nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 0; padding: 0; list-style: none; }
.site-nav a { display: grid; align-content: center; min-height: 48px; color: inherit; text-decoration: none; }
.nav-en { font: 650 1rem/1.15 var(--font-head); }
.nav-ta { font: 500 .75rem/1.3 var(--font-head); opacity: .72; }
.site-nav .nav-current a { box-shadow: inset 0 -2px 0 var(--zari); }

.now { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 18px; margin-top: 26px; }
.now-temp { margin: 0; font: 100 clamp(7rem, 36vw, 15rem)/.78 var(--font-head); font-stretch: 88%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.now-deg { font-weight: 200; }
.now-meta { padding-bottom: .35rem; min-width: 0; }
.now-cond { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 clamp(1.15rem, 4.6vw, 1.5rem)/1.2 var(--font-head); }
.now-place { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; opacity: .82; font: 500 1rem/1 var(--font-head); cursor: pointer; }
.now-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; opacity: .8; }
.sky-compact .now { margin-top: 6px; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; }
.sky-compact .now-temp { font-size: 2.6rem; line-height: 1; font-weight: 200; }
.sky-compact .now-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding: 0; }

/* Next 12 hours of rain: bar height = mm/h, colour = WMO intensity, chance underneath */
.hours { margin: 26px 0 0; max-width: 34rem; }
.hours-cap { margin: 0 0 12px; font: 600 .95rem/1.3 var(--font-head); }
.hours-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 4px; }
.hour { display: grid; grid-template-rows: 64px 18px 12px; align-items: end; }
.hour::before { content: ""; grid-area: 1 / 1; height: calc(var(--p) * 1%); background: rgb(243 246 248 / .1); box-shadow: inset 0 1px 0 rgb(243 246 248 / .28); }
.hour-bar { grid-area: 1 / 1; height: calc(var(--h) * 1%); min-height: 2px; background: rgb(243 246 248 / .3); }
.hour::before, .hour-bar { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease) calc(var(--i) * 45ms); }
.is-in .hour::before, .is-in .hour-bar { transform: none; }
.hour-bar:not(.rain-dry) { box-shadow: inset 0 2px 0 rgb(255 255 255 / .8); }
.rain-light { background: #bde7f2; }
.rain-moderate { background: #5bc0de; }
.rain-heavy { background: #2b7bb9; }
.rain-violent { background: #b5195a; }
.hour-p, .hour-t { font: 500 .6875rem/1 var(--font-mono); white-space: nowrap; }
.hour-p { grid-area: 2 / 1; align-self: center; opacity: .85; }
.hour-t { grid-area: 3 / 1; opacity: .7; }
@media (min-width: 60rem) {
    .sky:not(.sky-compact) .sky-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
    .sky:not(.sky-compact) .hours { flex: 0 1 26rem; margin: 0; }
}

.alert { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 12px; color: #14212b; text-decoration: none; }
.alert-chip { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
.alert-yellow { background: #f5c400; }
.alert-orange { background: #f28500; }
.alert-red { background: #c8102e; color: #fff; }
.alert-level { font-weight: 600; }
.alert-text { font: 650 .95rem/1.3 var(--font-head); }

/* Home */
.home { position: relative; z-index: 2; margin-top: -78px; }
.section { margin-top: 52px; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--muted); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kicker [lang="ta"] { font: 600 .875rem/1 var(--font-head); letter-spacing: 0; text-transform: none; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }

/* Monsoon Pulse: dark map band. Halo colours step up in lightness on the dark stage, then turn to silk
   indigo and magenta for the IMD extremes. */
.pulse { margin-top: 56px; padding: 40px 0 44px; background: var(--ink); color: var(--on-sky); }
.hc-none, .hc-dry { --hc: #6d8597; } .hc-vlight { --hc: #2e6587; } .hc-light { --hc: #3d8fcc; } .hc-moderate { --hc: #4fc0e0; }
.hc-heavy { --hc: #b6ecf7; } .hc-vheavy { --hc: #a99cf5; } .hc-xheavy { --hc: #f0609a; }
.pulse-title { margin: 0; font: 750 clamp(1.9rem, 7vw, 2.9rem)/1.04 var(--font-head); font-stretch: 84%; }
.pulse-title span { display: block; margin-top: 6px; color: #b9c7d1; font: 600 1rem/1.4 var(--font-head); font-stretch: 100%; }
.pulse-sub { max-width: 36rem; margin: 10px 0 0; color: #9fb4c2; font-size: .95rem; line-height: 1.5; }
.pulse-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pulse-days button { min-height: 44px; padding: 0 14px; border: 1px solid #2d4c5e; background: transparent; color: #dde7ee; font: 600 .9rem/1 var(--font-head); cursor: pointer; transition: border-color .18s, background .18s; }
.pulse-days button[aria-pressed="true"] { border-color: var(--zari); background: #13283a; color: #fff; box-shadow: inset 0 -2px 0 var(--zari); }
.pulse-body { display: grid; gap: 24px; margin-top: 22px; }
.pulse-stage { position: relative; max-width: 34rem; }
.pulse-map { display: block; width: 100%; height: auto; overflow: visible; }
.map-land { fill: #132536; }   /* neighbours: land only, no state or province lines */
.map-tn { fill: #1a3550; stroke: #3fb3b0; stroke-width: 1.2; stroke-linejoin: round; }
.halo { cursor: pointer; }
.halo-glow { fill: var(--hc); opacity: .34; transition: opacity .18s; }
.halo-core { fill: var(--hc); stroke: var(--ink); stroke-width: 1.4; }
.halo-hit { fill: transparent; }
.halo:hover .halo-glow { opacity: .6; }
.pulse-wind, .pulse-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.halo-label { position: absolute; transform: translate(10px, -50%); color: var(--on-sky); font: 650 .8rem/1 var(--font-head); white-space: nowrap; text-shadow: 0 0 4px var(--ink), 0 0 10px var(--ink); }
.pulse-lead { margin: 0 0 12px; font: 600 1.05rem/1.45 var(--font-head); }
.pulse-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.pulse-list:not(.is-all) li:nth-child(n + 11) { display: none; }
.pulse-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3rem, 6rem) 4.6rem 2.4rem; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 0; border: 0; border-bottom: 1px solid #1d3142; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.pulse-row:hover .pr-name { text-decoration: underline; text-underline-offset: 3px; }
.pr-name { min-width: 0; overflow: hidden; font: 650 1rem/1.2 var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
.pr-ta { display: block; margin-top: 3px; color: #9fb4c2; font: 500 .8rem/1.2 var(--font-head); }
.pr-bar { height: 10px; background: linear-gradient(var(--hc), var(--hc)) 0 0 / var(--w) 100% no-repeat, #16293a; }
.pr-mm, .pr-models { font: 500 .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.pr-models { color: #9fb4c2; }
.pulse-more { min-height: 44px; margin-top: 10px; padding: 0 14px; border: 1px solid #2d4c5e; background: transparent; color: #dde7ee; font: 600 .9rem/1 var(--font-head); cursor: pointer; }
.pulse-more span { margin-left: 6px; color: #9fb4c2; }
.pulse-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 0; padding: 0; list-style: none; color: #9fb4c2; }
.pulse-key li { display: flex; align-items: center; gap: 6px; }
.pulse-key li::before { content: ""; width: 10px; height: 10px; background: var(--hc); }
.pulse-note { margin: 10px 0 0; color: #7f95a5; font-size: .8125rem; line-height: 1.5; }
.sat { margin: 28px 0 0; }
.sat img { display: block; width: 100%; height: auto; aspect-ratio: 458 / 351; background: var(--ink); }
.sat figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; }
.sat-title { font: 700 1.05rem/1.3 var(--font-head); }
.sat-title span { margin-left: 6px; color: #9fb4c2; font-weight: 500; }
.sat-time { color: var(--zari); }
.sat-credit { flex-basis: 100%; color: #7f95a5; font-size: .8125rem; line-height: 1.5; }
.pulse-sheet { position: fixed; inset: auto 0 0; z-index: 30; max-width: 30rem; margin-inline: auto; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 6px solid var(--peacock); background: var(--card); color: var(--text); box-shadow: inset 0 2px 0 var(--zari), 0 -16px 48px rgb(6 12 22 / .4); transform: translateY(100%); transition: transform .28s var(--ease); }
.pulse-sheet.is-open { transform: none; }
.pulse-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pulse-sheet-title { margin: 0 44px 12px 0; font: 750 1.6rem/1.1 var(--font-head); font-stretch: 86%; }
.pulse-sheet-title:focus { outline: none; }
.ps-ta { display: block; margin-top: 4px; color: var(--muted); font: 600 1rem/1.3 var(--font-head); font-stretch: 100%; }
.pulse-sheet-days { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pulse-sheet-days li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-left: 6px solid var(--hc); background: var(--rice-2); }
.ps-day { font: 650 .95rem/1.3 var(--font-head); }
.ps-mm { font: 600 .9rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ps-word, .ps-models { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.pulse-ask { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--magenta); font: 650 1rem/1.3 var(--font-head); }
@media (min-width: 60rem) {
    .pulse-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px; }
    .pulse-stage { max-width: none; }
    .pulse-sheet { inset: auto 24px 24px auto; }
}

/* Silk-border card: thick band says the kind of post, zari line beneath it */
.card { --band: var(--peacock); position: relative; border: 1px solid var(--line); border-top: 6px solid var(--band); background: var(--card); box-shadow: inset 0 2px 0 var(--zari); color: var(--text); }
.card-report { --band: var(--magenta); }
.card-orange { --band: #f28500; }
.card-red { --band: #c8102e; }
.card-yellow { --band: #f5c400; }
.card-link { display: block; height: 100%; padding: 14px 16px 18px; color: inherit; text-decoration: none; }
.stamp { margin: 0; color: var(--muted); }
.card-title { margin: 8px 0 0; font: 750 1.4rem/1.14 var(--font-head); font-stretch: 84%; text-wrap: balance; }
.card-link:hover .card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-dek { margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.card-lead { max-width: 48rem; }
.card-lead .card-link { padding: 18px 20px 22px; }
.card-lead .card-title { font-size: clamp(1.9rem, 7.4vw, 3rem); line-height: 1.04; font-stretch: 80%; }
.card-lead .card-dek { font-size: 1.1rem; }
.card-img { display: block; width: calc(100% + 40px); max-width: none; margin: -18px -20px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
img.card-img { filter: url(#duotone); }   /* feed photos in the brand duotone; true colour on hover and on the post */
.card-link:is(:hover, :focus-visible) img.card-img { filter: none; }
/* Generative cover (site.js) for posts without a photo: a rain field seeded by the post id, accents in the band colour */
.cover { display: block; overflow: hidden; background: linear-gradient(180deg, #0e1b2a 0%, #1c3546 100%); }
.cover:empty { display: none; }
.cover svg { display: block; width: 100%; height: 100%; }
.card-img.cover { aspect-ratio: 16 / 7; }
.post-cover { aspect-ratio: 16 / 6; }
.is-report .post-cover { --band: var(--magenta); }
.card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--magenta); font: 650 1rem/1 var(--font-head); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; font: 500 .6875rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; }

/* Ask band: dark stage with the question box */
.ask-band { margin-top: 64px; padding: 44px 0 52px; background: var(--ink); color: var(--on-sky); }
.ask-box-label { margin: 0 0 16px; font: 750 clamp(1.7rem, 6.4vw, 2.6rem)/1.08 var(--font-head); font-stretch: 84%; }
.ask-box-label span { display: block; margin-top: 6px; color: #b9c7d1; font: 500 1rem/1.5 var(--font-head); font-stretch: 100%; }
.ask-box-row, .ask-form { display: flex; gap: 8px; }
.ask-box input, .ask-form input {
    flex: 1; min-width: 0; min-height: 54px; padding: 10px 16px;
    border: 1px solid #2d4c5e; border-radius: 2px; background: #0a1520; color: var(--on-sky);
    font: 400 1.05rem/1.4 var(--font-head);
}
.ask-box input::placeholder, .ask-form input::placeholder { color: #7f95a5; }
.ask-box button, .ask-form button {
    min-height: 54px; padding: 0 22px; border: 0; border-radius: 2px;
    background: var(--magenta); color: #fbf7f0; font: 700 1.05rem/1 var(--font-head); cursor: pointer;
    transition: transform .18s var(--ease);
}
.ask-box button:active, .ask-form button:active { transform: scale(.97); }
.ask-form button:disabled { opacity: .55; cursor: progress; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ask-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #2d4c5e; color: #dde7ee; font: 600 .9rem/1 var(--font-head); text-decoration: none; transition: border-color .18s, color .18s; }
.ask-chips a:hover { border-color: var(--zari); color: #fff; }
.ask-box-note { margin: 14px 0 0; color: #93a6b3; font-size: .875rem; line-height: 1.5; }

/* Post */
.post-header { padding-top: 32px; }
.post-header::before { content: ""; display: block; width: 56px; height: 6px; margin-bottom: 18px; background: var(--band, var(--peacock)); box-shadow: 0 4px 0 -2px var(--zari); }
.is-report .post-header { --band: var(--magenta); }
.post-title { margin: 10px 0 0; font: 800 clamp(2.1rem, 8vw, 3.4rem)/1.03 var(--font-head); font-stretch: 80%; letter-spacing: -.01em; text-wrap: balance; }
.post-dek { margin: 14px 0 0; color: var(--muted); font-size: 1.2rem; line-height: 1.5; text-wrap: pretty; }
.post-figure { margin: 24px 0 0; }
.post-figure figcaption, .kg-card figcaption { margin-top: 8px; color: var(--muted); font: .6875rem/1.5 var(--font-mono); letter-spacing: .06em; }
.stale { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--zari); background: var(--rice-2); font-size: 1rem; line-height: 1.5; }
.jump { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--magenta); font: 650 1rem/1 var(--font-head); }
.tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.tr-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--peacock); background: transparent; color: var(--peacock); font: 650 1rem/1 var(--font-head); cursor: pointer; transition: background .18s, color .18s; }
.tr-toggle:hover { background: var(--peacock); color: var(--rice); }
.tr-toggle:disabled { opacity: .6; cursor: progress; }
.tr-note { flex-basis: 100%; margin: 0; padding-left: 12px; border-left: 3px solid var(--zari); color: var(--muted); font-size: .9rem; line-height: 1.5; }
.post-body {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, 9rem)
        [main-start] min(var(--col), 100% - 2 * var(--gutter))
        [main-end] minmax(0, 9rem)
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    padding-block: 24px 8px;
    font: 400 1.15rem/1.7 var(--font-body);
}
.post-body > * { grid-column: main; margin: 0; }
.post-body > * + * { margin-top: 1em; }
.post-body > .kg-width-wide { grid-column: wide; }
.post-body > .kg-width-full { grid-column: full; }
.post-body > .kg-width-full img { width: 100%; }
.post-body h2 { margin-top: 1.7em; font: 750 1.65rem/1.15 var(--font-head); font-stretch: 84%; }
.post-body h3 { margin-top: 1.4em; font: 700 1.25rem/1.25 var(--font-head); font-stretch: 90%; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body blockquote { margin-inline: 0; padding-left: 18px; border-left: 4px solid var(--magenta); font-style: italic; }
.post-body hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.post-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.share { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--text); color: var(--text); font: 650 .95rem/1 var(--font-head); text-decoration: none; transition: background .18s, color .18s; }
.share:hover { background: var(--text); color: var(--rice); }
.post-ask { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--magenta); font: 650 1rem/1.4 var(--font-head); }
.archive-header { padding: 32px 0 20px; }
.kg-image { display: block; margin-inline: auto; }
.kg-callout-card, .kg-toggle-card, .kg-bookmark-container { border-radius: 2px; }
.kg-bookmark-container { background: var(--card); color: var(--text); }

/* Ask console: dark stage, answers as silk cards laid on it */
.ask-stage { padding-bottom: 8px; background: var(--ink); color: var(--on-sky); }
.ask { padding-top: 28px; }
.ask .post-title { color: var(--on-sky); }
.ask-sub { margin: 8px 0 0; color: #b9c7d1; }
.ask-log { display: grid; gap: 14px; margin: 24px 0; padding: 0; list-style: none; }
.msg { margin: 0; }
.msg-q { justify-self: end; max-width: 85%; padding: 10px 14px; border: 1px solid #2d4c5e; background: var(--ink-2); color: var(--on-sky); }
.msg-a { padding: 16px; border-top: 6px solid var(--peacock); background: var(--card); color: var(--text); box-shadow: inset 0 2px 0 var(--zari); }
.msg-a > p { margin: 0 0 6px; }
.msg-a > .msg-verdict { margin-bottom: 10px; font: 700 clamp(1.25rem, 4.8vw, 1.6rem)/1.28 var(--font-head); font-stretch: 92%; text-wrap: pretty; }
.msg-wait { color: #9fb4c2; font: 500 .8rem/1.4 var(--font-mono); letter-spacing: .06em; }
.msg-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-left: 4px solid var(--magenta); background: var(--card); color: var(--text); }
.retry { min-height: 44px; padding: 0 14px; border: 1px solid var(--text); background: transparent; color: var(--text); font: 650 .95rem/1 var(--font-head); cursor: pointer; }
.ask .ask-form { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #1d3142; background: var(--ink); }
.ask-note { margin: 8px 0 0; color: #93a6b3; font-size: .8125rem; line-height: 1.5; }
.strip-place { margin-bottom: 6px; color: var(--muted); font: 600 .6875rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* Rain curtain: bar = middle of nine models, whisker = ensemble 10th-90th percentile, ring = models >= 2.5 mm */
.curtain { margin: 16px 0 0; }
.curtain-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; border-bottom: 1px solid var(--line); }
.cday { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 6px 0 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cday[aria-pressed="true"] { background: var(--rice-2); box-shadow: inset 0 -2px 0 var(--zari); }
.cday-plot { position: relative; width: 100%; height: 124px; }
.cday-bar { position: absolute; bottom: 0; left: 50%; width: min(22px, 58%); height: var(--h); min-height: 2px; transform: translateX(-50%); background: var(--bar, var(--line)); box-shadow: inset 0 0 0 1px rgb(14 27 42 / .14); transition: height .5s var(--ease); }
.cday-whisker { position: absolute; bottom: var(--lo); left: 50%; height: max(0px, calc(var(--hi) - var(--lo))); border-left: 2px solid var(--text); }
.cday-whisker::before, .cday-whisker::after { content: ""; position: absolute; left: -6px; width: 10px; border-top: 2px solid var(--text); }
.cday-whisker::before { top: 0; }
.cday-whisker::after { bottom: 0; }
.cday:not(.has-spread) .cday-whisker { display: none; }
.cday-ring {
    width: 24px; height: 24px; border-radius: 50%;
    background: conic-gradient(var(--peacock) 0 calc(var(--wet) / var(--of) * 360deg), var(--line) 0);
    mask: radial-gradient(farthest-side, transparent 55%, #000 58%), repeating-conic-gradient(#000 0 calc(360deg / var(--of) - 7deg), transparent 0 calc(360deg / var(--of)));
    mask-composite: intersect;
}
.cday-date { font: 600 .6875rem/1.1 var(--font-mono); text-align: center; white-space: nowrap; }
.cday-date:lang(ta) { font: 600 .75rem/1.1 var(--font-head); }
.cday-mm { color: var(--muted); font: 500 .6875rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.bar-none { --bar: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 4px); }
.bar-vlight { --bar: var(--r-1); } .bar-light { --bar: var(--r-2); } .bar-moderate { --bar: var(--r-3); }
.bar-heavy { --bar: var(--r-4); } .bar-vheavy { --bar: var(--r-5); } .bar-xheavy { --bar: var(--r-6); }
.curtain-detail { min-height: 1.5em; margin: 8px 0 0; color: var(--muted); font: .75rem/1.55 var(--font-mono); }
.strip-key { margin: 10px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.imd-box { display: grid; gap: 4px; margin: 0 0 10px; }
.imd-line { margin: 0; padding: 8px 12px; border-left: 6px solid var(--alert); background: var(--rice-2); font-size: .95rem; line-height: 1.45; }
.imd-red { --alert: #c8102e; } .imd-orange { --alert: #f28500; } .imd-yellow { --alert: #f5c400; }
.mode-note { margin: 10px 0 0; color: var(--muted); font: .6875rem/1.4 var(--font-mono); letter-spacing: .06em; }
.ask-related { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.ask-related-title { margin: 0; color: var(--muted); font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ask-related ul { margin: 0; padding: 0; list-style: none; }
.ask-related a { display: inline-flex; align-items: center; min-height: 44px; font: 650 1rem/1.3 var(--font-head); }

/* Report kit: Mama's class names, v2 colours (IMD category colours unchanged) */
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).le, .gh-content .badge-le { --cat: var(--c-le); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).e, .gh-content .badge-e { --cat: var(--c-e); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).n, .gh-content .badge-n { --cat: var(--c-n); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).d, .gh-content .badge-d { --cat: var(--c-d); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).ld, .gh-content .badge-ld { --cat: var(--c-ld); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).nr, .gh-content .badge-nr { --cat: var(--c-nr); }
.gh-content :is(.stat-card, .legend-dot, .dep-bars li).nd, .gh-content .badge-nd { --cat: var(--c-nd); }
.gh-content .report-meta { padding: 10px 0; border-block: 1px solid var(--line); color: var(--muted); font: 500 .6875rem/1.7 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gh-content .section-label { margin-top: 2.8em; color: var(--magenta); font: 600 .6875rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.gh-content .section-label + .section-title { margin-top: .35em; }
.gh-content .section-title { font: 800 clamp(1.6rem, 5.4vw, 2.2rem)/1.08 var(--font-head); font-stretch: 80%; text-wrap: balance; }
.gh-content h3.section-title { margin-top: 1.8em; font-size: 1.4rem; }
.gh-content .prose p { margin: 0 0 1em; }
.gh-content .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; font-family: var(--font-head); }
.gh-content .stat-card { position: relative; overflow: hidden; padding: 18px 14px 12px; border: 1px solid var(--line); background: var(--card); }
.gh-content .stat-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--cat, var(--line)); }
.gh-content .stat-region { color: var(--muted); font: 600 .6875rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gh-content .stat-actual { margin-top: 6px; font: 200 2.6rem/1 var(--font-head); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.gh-content .stat-unit { color: var(--muted); font: 500 .75rem/1 var(--font-mono); }
.gh-content .stat-normal { margin-top: 6px; color: var(--muted); font: .75rem/1.3 var(--font-mono); }
.gh-content .stat-dep { margin-top: 8px; font: 750 1.35rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.gh-content :is(.stat-cat, .badge) { display: inline-block; padding: 2px 7px; background: var(--cat, var(--line)); color: #14212b; font: 700 .625rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gh-content .stat-cat { margin-top: 10px; }
.gh-content .badge { vertical-align: .15em; }
.gh-content :is(.nr .stat-cat, .badge-nr, .legend-dot.nr, .dep-bars li.nr::after) { box-shadow: inset 0 0 0 1px var(--muted); }
.gh-content .legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; list-style: none; color: var(--muted); font: .75rem/1.4 var(--font-mono); }
.gh-content .legend-item { display: flex; align-items: center; gap: 6px; margin: 0; }
.gh-content .legend-dot { flex: none; width: 12px; height: 12px; background: var(--cat); }
.gh-content .month-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 10px; font-family: var(--font-head); }
.gh-content .month-card { padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--peacock); background: var(--card); }
.gh-content .month-name { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.gh-content .month-rows { display: grid; gap: 6px; }
.gh-content .month-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .95rem; line-height: 1.35; }
.gh-content .mr-label { color: var(--muted); }
.gh-content .mr-val { font: 600 .8125rem/1.3 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.gh-content .mr-sp { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.gh-content .table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
.gh-content table { width: 100%; min-width: 34rem; border-collapse: collapse; font: .8125rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.gh-content th { padding: 10px 12px; border-bottom: 2px solid var(--text); color: var(--muted); font: 700 .625rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.gh-content td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.gh-content tr:last-child td { border-bottom: 0; }
.gh-content .td-b { font-weight: 700; }
.gh-content .td-dim { color: var(--muted); }
.gh-content .source-note { color: var(--muted); font: .875rem/1.5 var(--font-head); }
.gh-content :is(.nino-box, .kpi-box) { padding: 20px; background: var(--ink); color: var(--on-sky); border-top: 6px solid var(--peacock); box-shadow: inset 0 2px 0 var(--zari); font-family: var(--font-head); }
.gh-content .nino-source { color: #9fb4c2; font: 600 .625rem/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gh-content .nino-title { margin-top: 8px; font: 800 1.5rem/1.12 var(--font-head); font-stretch: 82%; }
.gh-content .nino-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 16px; margin: 18px 0; }
.gh-content .kpi-label { color: #9fb4c2; font: .6875rem/1.4 var(--font-mono); letter-spacing: .04em; }
.gh-content .kpi-val { margin-top: 4px; color: var(--zari); font: 200 2.4rem/1 var(--font-head); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.gh-content .nino-body { margin: 0; color: #c9d6df; font-size: 1rem; line-height: 1.6; }
.gh-content .mechanism-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; font-family: var(--font-head); }
.gh-content .mech-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-top: 3px solid var(--magenta); background: var(--card); }
.gh-content .step-num { flex: none; color: var(--magenta); font: 200 2.2rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.gh-content .step-body { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.gh-content .step-body strong { display: block; margin-bottom: 4px; color: var(--text); font: 700 1.05rem/1.25 var(--font-head); }
.gh-content .callout { padding: 16px 18px; border-left: 4px solid var(--magenta); background: var(--rice-2); font: 1.02rem/1.6 var(--font-head); }
.gh-content .info-card { padding: 20px; border: 1px solid var(--line); border-top: 6px solid var(--peacock); background: var(--card); box-shadow: inset 0 2px 0 var(--zari); font-family: var(--font-head); }
.gh-content .info-card > * { margin: 0; }
.gh-content .info-card > * + * { margin-top: .8em; }
.gh-content .info-card h3 { font: 750 1.3rem/1.2 var(--font-head); font-stretch: 85%; }
.gh-content .disclaimer { color: var(--muted); font-size: .875rem; font-style: italic; }
.gh-content .dep-bars { padding: 16px 18px; border: 1px solid var(--line); background: var(--card); }
.gh-content .dep-bars figcaption { margin-bottom: 12px; color: var(--muted); font: .875rem/1.45 var(--font-head); }
.gh-content .dep-bars ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gh-content .dep-bars li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 3.6em; align-items: center; gap: 10px; margin: 0; font: .8125rem/1.3 var(--font-mono); }
.gh-content .dep-bars li span { color: var(--muted); }
.gh-content .dep-bars li b { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.gh-content .dep-bars li::before, .gh-content .dep-bars li::after { content: ""; grid-row: 1; grid-column: 2; height: 18px; }
.gh-content .dep-bars li::before { background: linear-gradient(var(--text), var(--text)) center / 1px 100% no-repeat, var(--rice-2); }
.gh-content .dep-bars li::after { width: calc(max(var(--v), -1 * var(--v)) * .5%); margin-left: calc(50% + min(var(--v), 0) * .5%); background: var(--cat, var(--muted)); }
.gh-content .sources-list { padding: 0; list-style: none; font-family: var(--font-head); }
.gh-content .sources-list li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .95rem; line-height: 1.5; }
.gh-content .src-name { color: var(--text); font-weight: 650; }
.gh-content .src-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--peacock); color: var(--peacock); font: 700 .5625rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: .15em; }
@media (min-width: 48rem) {
    .is-report .post-body > :is(.stats-grid, .month-grid, .table-wrap, .mechanism-grid) { grid-column: wide; }
}

/* Kolam (partials/kolam.hbs, dev/make_kolam.py): one unbroken line round a grid of dots */
.kolam { display: block; color: var(--zari); }
.kolam-divider { width: 150px; height: 54px; margin: 48px auto 0; opacity: .85; }
.kolam-end { width: 54px; height: 45px; margin: 28px auto 0; }
.kolam-loader { display: inline-block; width: 34px; height: 28px; margin-right: 10px; vertical-align: middle; stroke-dasharray: 100; animation: kolam-draw 2.4s linear infinite; }
@keyframes kolam-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }

/* Footer */
.site-footer { margin-top: 0; padding: 36px 0 44px; background: var(--ink); color: #9fb4c2; border-top: 2px solid var(--zari); font-size: .9rem; }
.ask-band + .site-footer { border-top-color: #1d3142; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: var(--on-sky); }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0 0 12px; font: 650 1rem/1.2 var(--font-head); }
.follow a { display: inline-flex; align-items: center; min-height: 44px; }
.follow-label { color: #7f95a5; }
.footer-mark { margin-bottom: 16px; color: var(--on-sky); font: 800 1.6rem/1 var(--font-head); font-stretch: 84%; }

/* Motion: scroll reveals and view transitions; nothing moves when reduced motion is asked for */
@supports (animation-timeline: view()) {
    .card:not(.card-lead), .ask-band .wrap-wide { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .sky:not(.sky-compact) .sky-inner { animation: sky-out linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }   /* .sky clips, so name the page */
    /* reports unfold as you read: blocks rise in, departure bars grow out from the zero line (site.js counts the numbers) */
    .is-report .gh-content :is(.stat-card, .month-card, .mech-step, .info-card, .nino-box, .table-wrap, .callout, .dep-bars) { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .is-report .gh-content .dep-bars li { view-timeline: --dep; }
    .is-report .gh-content .dep-bars li::after { animation: dep-grow linear both; animation-timeline: --dep; animation-range: entry 30% cover 50%; }
}
@keyframes dep-grow { from { clip-path: inset(0 clamp(0%, calc(var(--v) * 1000%), 100%) 0 clamp(0%, calc(var(--v) * -1000%), 100%)); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sky-out { to { opacity: .2; transform: translateY(22vh); } }   /* hero text lags and fades as you scroll */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
/* the masthead and sky carry over between pages; a clicked card title becomes the post title (site.js names it) */
.wordmark { view-transition-name: masthead; }
.sky { view-transition-name: sky; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    @view-transition { navigation: none; }
}