/*
╔══════════════════════════════════════════════════════════════════════╗
║ THE MUDDA — VISUAL MANIFESTO ║
║ ║
║ Ink before ornament. One white page, hard contrast, civic ║
║ restraint. Colour names systems, never parties. Serif authority, ║
║ sans utility. No glow, no emoji in chrome, no gradients — ║
║ publish like India's public record. ║
║ ║
║ Evidence-backed reset (NYT / FT / Hindu / Frontline / ProPublica): ║
║ 1. Pure white background — every serious newsroom does this ║
║ 2. Near-black ink (#1A1A1A) — universal, not pure black ║
║ 3. Maroon accent (#B01220) — Hindu/Express/Caravan/EPW heritage ║
║ 4. Serif headlines + sans UI — never reversed ║
║ 5. Accent on ≤5% of surface — masthead + section rules only ║
║ 6. Status pills are TYPOGRAPHIC (ALL-CAPS), never coloured fills ║
║ 7. Zero emoji in editorial chrome ║
║ 8. Images rectangular — border-radius: 0 always ║
║ 9. Flat-colour masthead, never gradient ║
║ 10. Single-mode publication — no dark-light toggle ║
╚══════════════════════════════════════════════════════════════════════╝
*/
/* ====================== TOKENS — NEWSROOM RESET ====================== */
:root {
/* Surface — pure white, no cream */
--bg: #ffffff;
--bg-alt: #F8F8F8; /* hover only, not a card fill */
--card: #ffffff;
--card-alt: #FAFAF7; /* very subtle differentiation when needed */
/* Ink */
--text: #1A1A1A; /* near-black, ~18:1 contrast */
--muted: #6B6B6B; /* bylines, datelines, captions */
--muted-strong: #4A4A4A; /* darker secondary */
/* Rules */
--border: #DEDEDE; /* 1px primary divider */
--border-soft: #EFEFEF; /* card separators, weak dividers */
/* Brand — single Indian-institutional maroon */
--brand: #B01220; /* The Hindu lineage; institutional, not party */
--brand-strong: #8E0F1A; /* hover */
--brand-soft: #F8E7E9; /* faintest tint for the rare wash */
/* Severity — ONLY for Breaking/Live + Crisis/Accountability rule */
--live: #CC0000;
/* Civic verdict ink for Verify/Vote actions */
--civic: #1A3D7C;
/* Legacy semantic colours preserved (deprecated, slowly migrating) */
--saffron: #B01220; /* aliased to brand so old refs don't shout */
--green: #1A4D34;
--outrage: #B01220;
--hope: #6B5320;
--good: #1A4D34;
--bad: #6B5320;
--ugly: #B01220;
--ink-on-acc: #ffffff;
/* Type — The Hindu's validated production stack */
--display: 'Playfair Display', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
--serif: 'Merriweather', 'Noto Serif Devanagari', Georgia, serif;
--sans: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: ui-monospace, 'SF Mono', Menlo, monospace;
--serif-deva: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Playfair Display', Georgia, serif;
/* No shadows — newsrooms don't drop-shadow */
--shadow-1: none;
--shadow-2: none;
/* Layout */
--maxw: 1180px;
--gutter: 22px;
/* Radius — newsrooms square corners. Editorial chrome only gets 0–2px. */
--radius: 2px;
--radius-lg: 2px;
}
/* Dark-mode block intentionally deleted — single-mode publication. */
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { font-size: 16px; line-height: 1.55; padding-bottom: 80px; /* room for mobile bottom nav */ }
img { border-radius: 0 !important; } /* newsrooms square corners on photographs */
/* CRITICAL: many sections below use display:grid/flex which would override the
browser's default [hidden] { display: none } rule. Restore the contract. */
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { color: var(--saffron); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--text); color: var(--bg); padding: 8px 12px; z-index: 1000; border-radius: 6px; }
/* ====================== TOPBAR (slimmed, newsroom-flat) ====================== */
.topbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 14px;
padding: 16px 26px;
background: #ffffff;
border-bottom: 2px solid var(--text); /* heavy newsroom rule under masthead */
}
.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
/* Flag mark in brand row: real Indian flag SVG (3:2), with a hairline border
and faint drop so it reads like an actual flag, not just a coloured rectangle */
.brand .flag, .brand .lamp {
width: 42px; height: 28px;
border: 1px solid var(--border-soft);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
display: inline-block; vertical-align: middle;
background: #fff;
}
header .flag {
width: 28px; height: 18px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
display: inline-block; vertical-align: middle;
background: #fff;
}
.brand h1 { font-family: var(--display); font-size: 30px; line-height: 1; margin: 0; font-weight: 900; letter-spacing: -0.015em; color: var(--text); overflow: visible; }
.brand h1 a { text-decoration: none; display: inline-block; white-space: nowrap; vertical-align: bottom; }
/* Flag + motto now stack vertically (flag on top, सत्यमेव जयते beneath) so the
motto no longer eats horizontal room to the right of the logo. The small
downward nudge drops the flag from beside the logo's pulse-wave to beside the
"PULSE" wordmark, so the mark and the logo read as one aligned lockup. Reset
at ≤1360px where the motto is hidden and the lone flag centres on its own. */
.brand-mark { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; line-height: 1; position: relative; top: 11px; }
.brand .motto { font-family: var(--serif); font-size: 11.5px; color: var(--muted); margin: 0; letter-spacing: 0.01em; font-weight: 400; font-style: italic; white-space: nowrap; text-align: center; }
.brand .tag { display: none; }
/* Brand wordmark is now the THE MUDDA NEWS logo lockup (raster, transparent
on the white masthead); the tricolour flag stays to its left. */
.brand-title { margin: 0; display: inline-flex; align-items: center; }
.brand-logo { height: 58px; width: auto; display: block; }
.controls { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap; row-gap: 8px; }
.controls #filters-toggle { display: none; } /* ⚙ appears only once the filter selects fold away (≤1360px) */
.search { position: relative; display: inline-flex; align-items: center; }
.search-ico { position: absolute; left: 10px; color: var(--muted); font-size: 14px; }
.search input { background: var(--bg); border: 1px solid var(--border); color: var(--text);
padding: 8px 12px 8px 30px; border-radius: 0; font-size: 13px; width: 200px; transition: width .2s, border-color .2s; font-family: var(--sans); }
.search input:focus { width: 280px; border-color: var(--brand); outline: none; }
.select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 0; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }
.iconbtn {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
background: transparent; border: 1px solid var(--border); border-radius: 0;
color: var(--text); font-size: 11px; font-weight: 700; transition: .15s; text-decoration: none;
text-transform: uppercase; letter-spacing: 0.06em;
}
.iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.iconbtn.contribute { background: var(--brand); color: #ffffff; border-color: var(--brand); }
.iconbtn.contribute:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #ffffff; }
.iconbtn.bebaak { font-family: var(--display); font-size: 14px; padding: 0 14px; text-transform: none; letter-spacing: 0; font-weight: 700; }
/* Hide the dark/light theme toggle — single-mode publication. */
#theme-toggle { display: none !important; }
.ln.masala-toggle { opacity: .65; }
.ln.masala-toggle.active { opacity: 1; border-color: var(--brand); color: var(--brand); }
/* ====================== LIVE TICKER (now a thin meta-strip) ====================== */
.ticker {
display: none; /* radically simplified — replaced by metabar */
}
/* ====================== MOOD-OVER-TIME STRIP (homepage) ====================== */
/* Thin newsroom strip under the metabar. 7-day mood sparkline + one-line
interpretation. Pure typography — ink ticks for substance days, brand
maroon for high-bad days. No animation. Hidden until ≥3 days of data. */
.moodstrip {
display: flex; align-items: center; gap: 16px;
max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter);
font-family: var(--sans); font-size: 11px;
color: var(--muted); border-bottom: 1px solid var(--border-soft);
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.moodstrip-kicker { color: var(--text); font-weight: 700; white-space: nowrap; }
.moodstrip-spark {
display: inline-grid; grid-template-columns: repeat(7, 8px); gap: 3px;
align-items: end; height: 22px; flex-shrink: 0;
}
.moodstrip-spark .col {
width: 8px; min-height: 2px; background: var(--text); transition: opacity .15s;
}
.moodstrip-spark .col[data-tone="strain"] { background: var(--brand); }
.moodstrip-spark .col[data-tone="strain-high"] { background: var(--brand-strong); }
.moodstrip-spark .col[data-today="1"] { outline: 1px solid var(--brand); outline-offset: 1px; }
.moodstrip-line { flex: 1; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--serif); font-size: 13px; font-style: italic; }
.moodstrip-line b { font-style: normal; font-weight: 700; color: var(--brand); }
.moodstrip-cta { color: var(--brand); border-bottom: 1px solid var(--brand); text-decoration: none; white-space: nowrap; font-size: 10.5px; font-weight: 700; }
.moodstrip-cta:hover { color: var(--brand-strong); border-color: var(--brand-strong); }
@media (max-width: 700px) {
.moodstrip { padding: 6px 14px; font-size: 10.5px; gap: 10px; flex-wrap: wrap; }
.moodstrip-cta { display: none; }
.moodstrip-line { font-size: 12px; }
}
/* ====================== TICKER (newsroom-chyron LATEST scroller) ====================== */
.ticker {
background: #1A1A1A; color: #ffffff;
display: flex; align-items: stretch; gap: 0;
border-bottom: 1px solid #000;
position: relative; overflow: hidden;
}
.ticker-kicker {
display: inline-flex; align-items: center; gap: 8px;
background: var(--brand); color: #ffffff;
padding: 0 16px;
font-family: var(--sans, 'Inter', sans-serif);
font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase;
position: relative; z-index: 2;
white-space: nowrap;
/* faux 'flag tail' notch on the right edge */
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
padding-right: 22px;
}
.ticker-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #fff;
animation: tickerpulse 1.1s ease-out infinite;
box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes tickerpulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ticker-viewport {
flex: 1; overflow: hidden;
padding: 0; height: 38px;
display: flex; align-items: center;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
}
.ticker-track {
display: inline-flex; align-items: center; gap: 0;
white-space: nowrap;
animation: tickerscroll 80s linear infinite;
will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerscroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* track contains content twice */
}
.ticker-item {
display: inline-flex; align-items: center; gap: 10px;
padding: 0 18px;
color: #fff; text-decoration: none;
font-family: var(--serif, 'Merriweather', Georgia, serif);
font-size: 13.5px; font-weight: 400; line-height: 1;
border-right: 1px solid rgba(255,255,255,0.10);
}
.ticker-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker-item .ti-time {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 10.5px; font-weight: 700;
color: #FF9F45; /* tricolor saffron — small brand wink */
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ticker-item .ti-source {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 10.5px; font-weight: 600;
color: rgba(255,255,255,0.55);
}
@media (max-width: 720px) {
.ticker-kicker { padding: 0 12px; padding-right: 18px; font-size: 10.5px; }
.ticker-viewport { height: 34px; }
.ticker-item { font-size: 12.5px; padding: 0 14px; }
.ticker-track { animation-duration: 60s; }
}
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
.ticker-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ====================== METABAR (single thin status row) ====================== */
.metabar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter);
font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border-soft);
}
.metabar .left, .metabar .right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.metabar .livepulse { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-right: 6px;
box-shadow: 0 0 0 0 var(--green); animation: lp 1.6s ease-out infinite; }
@keyframes lp { 0% { box-shadow: 0 0 0 0 rgba(31,138,91,0.6); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.metabar b { color: var(--text); font-weight: 600; }
.metabar .flip-pill { padding: 3px 9px; background: rgba(231,111,36,0.10); color: var(--saffron); border-radius: 999px; font-weight: 600; }
/* ====================== SECTIONS NAV (horizontal scroll) ====================== */
.sections {
display: flex; gap: 4px; padding: 14px var(--gutter) 6px;
max-width: var(--maxw); margin: 0 auto; overflow-x: auto; scrollbar-width: none;
}
.sections::-webkit-scrollbar { display: none; }
.sec {
background: transparent; border: 0; padding: 8px 14px; border-radius: 999px;
color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: .15s;
}
.sec:hover { color: var(--text); background: var(--bg-alt); }
.sec.active { color: var(--text); background: var(--card); border: 1px solid var(--border); }
.sec-div { width: 1px; height: 22px; background: var(--border); margin: 6px 6px; align-self: center; flex-shrink: 0; }
/* ====================== SUBNAV (lens + masala + chips) ====================== */
.subnav { display: flex; gap: 12px; padding: 4px var(--gutter) 14px; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; align-items: center; }
.lens { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-alt); border-radius: 999px; border: 1px solid var(--border-soft); }
.ln { background: transparent; border: 0; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 500; transition: .15s; }
.ln:hover { color: var(--text); }
.ln.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px; color: var(--muted); font-size: 12px; transition: .15s; }
.chip:hover { color: var(--text); border-color: var(--saffron); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip b { font-weight: 600; color: inherit; margin-left: 6px; opacity: .7; }
/* ====================== MAIN ====================== */
main { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter) 40px; }
/* ====================== MAST: MANIFESTO TAGLINE STRIP ====================== */
/* A newspaper's tagline area. Ink on white, ALL-CAPS, restrained. The
publication's standing position, visible always, never decorative. */
.manifesto {
background: #ffffff;
color: var(--muted);
padding: 10px 26px;
font-size: 11.5px; line-height: 1.5;
display: flex; align-items: center; gap: 14px;
border-bottom: 1px solid var(--border);
font-family: var(--sans);
text-transform: uppercase; letter-spacing: 0.06em;
}
.manifesto .m-stamp {
font-family: var(--display); font-size: 11px;
border-left: 3px solid var(--brand); padding: 0 0 0 10px;
white-space: nowrap; color: var(--text); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
}
.manifesto .m-body { flex: 1; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.manifesto .m-body b { color: var(--brand); font-weight: 700; }
.manifesto .m-link {
color: var(--brand); opacity: .9; font-size: 11px; text-decoration: none;
border-bottom: 1px solid currentColor; white-space: nowrap; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
}
.manifesto .m-link:hover { opacity: 1; color: var(--brand-strong); border-color: var(--brand-strong); }
/* ====================== MAST: बेबाक EDITORIAL QUOTE STRIP ====================== */
/* Editorial column brand. Flat off-white, heavy maroon top rule, bilingual
lockup. No gradient. No emoji. The lockup IS the brand. */
.bebaak-mast {
display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start;
padding: 13px 24px; margin: 14px 0 20px;
background: var(--card-alt);
border: 1px solid var(--border);
border-top: 3px solid var(--brand);
border-radius: 0;
position: relative;
}
.bebaak-mast .bm-name {
font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', var(--display);
font-size: 22px; line-height: 1.05; color: var(--text); font-weight: 400;
letter-spacing: -0.005em; align-self: start; padding: 2px 16px 0 0; border-right: 1px solid var(--border);
}
.bebaak-mast .bm-name::after {
content: 'BEBAAK · EDITORIAL';
display: block; font-family: var(--sans); font-size: 9px; font-weight: 700;
letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 6px;
}
.bebaak-mast .bm-body {
font-family: var(--serif); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.45;
color: var(--text); margin: 0; font-weight: 400; letter-spacing: 0;
}
.bebaak-mast .bm-body em {
font-style: normal; color: var(--brand); font-weight: 700;
font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
border: 0; padding: 0; margin-right: 10px; white-space: nowrap; display: inline-block; vertical-align: 2px;
border-bottom: 2px solid var(--brand);
}
.bebaak-mast .bm-cta {
font-size: 11px; color: var(--brand); text-decoration: none; white-space: nowrap;
border: 1px solid var(--brand); padding: 8px 14px; border-radius: 0; transition: .15s;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.bebaak-mast .bm-cta:hover { background: var(--brand); color: #ffffff; }
.bebaak-mast::before { display: none; } /* drop the decorative fist watermark */
/* Carousel inner: holds the rotating slide content (verdict + body + foot).
Transitions opacity on .bm-fading for the cross-fade between slides. */
.bebaak-mast .bm-inner {
grid-column: 2 / 3;
display: flex; flex-direction: column; gap: 8px; min-width: 0;
transition: opacity .18s ease-out;
}
.bebaak-mast .bm-inner.bm-fading { opacity: 0; }
.bebaak-mast .bm-foot {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
font-size: 12px; color: var(--muted);
}
.bebaak-mast .bm-headline { font-style: italic; }
.bebaak-mast .bm-headline i { color: var(--text); font-style: italic; }
.bebaak-mast .bm-foot .bm-cta { margin-left: auto; }
/* ====================== THE MUDDA RADIO (browser TTS dock) ====================== */
/* Trigger pill in the masthead controls */
.iconbtn.radio-trigger,
#radio-trigger {
background: #1A1A1A; color: #fff; border-color: #1A1A1A;
font-weight: 800; letter-spacing: 0.06em; padding: 6px 12px;
}
.iconbtn.radio-trigger:hover,
#radio-trigger:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Floating dock — bottom-right, fixed, always above content */
.radio-dock {
position: fixed; right: 18px; bottom: 18px; z-index: 1000;
width: min(420px, calc(100vw - 36px));
background: #1A1A1A; color: #fff;
border: 1px solid #000;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
border-left: 4px solid var(--brand);
font-family: var(--sans);
}
.radio-dock .radio-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px; padding: 12px 14px;
}
.radio-dock .radio-dot {
width: 12px; height: 12px; border-radius: 50%;
background: rgba(255,255,255,0.25);
transition: background .2s, box-shadow .2s;
}
.radio-dock .radio-dot.on {
background: var(--brand);
box-shadow: 0 0 0 0 rgba(176,18,32,0.7);
animation: radio-pulse 1.4s ease-out infinite;
}
@keyframes radio-pulse {
0% { box-shadow: 0 0 0 0 rgba(176,18,32,0.7); }
70% { box-shadow: 0 0 0 10px rgba(176,18,32,0); }
100% { box-shadow: 0 0 0 0 rgba(176,18,32,0); }
}
.radio-dock .radio-info { min-width: 0; }
.radio-dock .radio-kicker {
font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 4px;
}
.radio-dock .radio-kicker b { color: var(--brand); font-weight: 800; }
.radio-dock .radio-now {
font-family: var(--serif); font-size: 14px; line-height: 1.3;
color: #fff; font-weight: 400;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.radio-dock .radio-meta {
font-size: 10.5px; color: rgba(255,255,255,0.50);
margin-top: 4px; font-weight: 500;
}
.radio-dock .radio-controls { display: flex; align-items: center; gap: 4px; }
.radio-dock .radio-btn {
background: transparent; color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.18); padding: 6px 9px;
font-size: 13px; line-height: 1; cursor: pointer; border-radius: 0;
transition: .15s;
}
.radio-dock .radio-btn:hover { color: #fff; border-color: var(--brand); background: var(--brand); }
.radio-dock .radio-play { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.radio-dock .radio-play:hover { background: var(--brand); color: #fff; }
.radio-dock .radio-close { font-size: 11px; }
@media (max-width: 540px) {
.radio-dock { right: 10px; left: 10px; bottom: 10px; width: auto; }
.radio-dock .radio-now { font-size: 13px; }
}
/* Rotation indicator: small typographic dots under the body */
.bebaak-mast .bm-dots {
grid-column: 2 / 3; display: flex; align-items: center; gap: 8px;
margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border-soft);
}
.bebaak-mast .bm-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border); border: 0; padding: 0; cursor: pointer;
transition: background .15s;
}
.bebaak-mast .bm-dot:hover { background: var(--muted); }
.bebaak-mast .bm-dot.on { background: var(--brand); }
.bebaak-mast .bm-counter {
margin-left: auto; font-family: var(--sans); font-size: 10.5px;
color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
@media (max-width: 700px) {
.manifesto { padding: 8px 14px; font-size: 10.5px; flex-wrap: wrap; gap: 8px; }
.manifesto .m-stamp { display: none; }
.manifesto .m-body { font-size: 12px; }
.bebaak-mast { grid-template-columns: 1fr; gap: 10px; padding: 13px 16px; margin: 12px 0 16px; }
.bebaak-mast .bm-name { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 8px; font-size: 20px; }
.bebaak-mast .bm-body { font-size: 14.5px; }
.bebaak-mast .bm-cta { justify-self: start; }
.bebaak-mast .bm-inner, .bebaak-mast .bm-dots { grid-column: 1 / 2; }
}
/* ====================== ACTION CHIPS — newsroom flat ====================== */
/* Cardvotebar + action chips are unified visually: same flat ALL-CAPS Inter
buttons in one tight row separated by 1px dividers. No emoji, no rounded
chrome, no colour-coded categories. */
.card-actions {
display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--border-soft);
}
.action-chip {
display: inline-flex; align-items: center; gap: 0; padding: 4px 0;
background: transparent; border: 0; color: var(--muted);
border-radius: 0; font-family: var(--sans);
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
cursor: pointer; transition: color .15s; text-decoration: none;
}
.action-chip:hover { color: var(--brand); }
/* Drop the per-action colour coding — newsroom restraint */
.action-chip[data-act="vote"], .action-chip[data-act="verify"], .action-chip[data-act="share"], .action-chip[data-act="whatsapp"] {
color: var(--muted); border-color: transparent;
}
.action-chip:hover { color: var(--text); }
/* WhatsApp: brand-recognisable green hover so the reader sees the channel */
.action-chip[data-act="whatsapp"]:hover { color: #25D366; }
.action-chip[data-act="whatsapp"]::before {
content: ''; display: inline-block; width: 12px; height: 12px;
margin-right: 5px; vertical-align: -1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ====================== WEEKLY USE-THIS-WEEK COLUMN ====================== */
.use-week {
background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
border: 1px solid var(--border); border-left: 4px solid var(--saffron);
border-radius: var(--radius-lg); padding: 22px 26px; margin: 28px 0;
}
.use-week-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.use-week-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--saffron); font-weight: 700; }
.use-week-head h2 { font-family: var(--display); font-size: 22px; margin: 0; font-weight: 400; letter-spacing: -0.005em; }
.use-week-tag { font-size: 12px; color: var(--muted); }
.use-week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.use-week-item { padding: 14px 16px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; transition: .15s; }
.use-week-item:hover { border-color: var(--saffron); transform: translateY(-1px); }
.use-week-item .uw-verb { font-family: var(--serif); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); font-weight: 600; margin-bottom: 5px; }
.use-week-item .uw-act { font-size: 14.5px; line-height: 1.4; color: var(--text); margin: 0 0 8px; font-weight: 500; }
.use-week-item .uw-by { font-size: 11.5px; color: var(--muted); }
.use-week-item a { color: inherit; text-decoration: none; }
@media (max-width: 700px) {
.use-week { padding: 16px 18px; }
.use-week-grid { grid-template-columns: 1fr; gap: 10px; }
.use-week-item { padding: 12px 14px; }
}
/* ====================== PULSE BOARD (hero) ====================== */
.pulseboard {
display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px;
/* Don't force the rail to stretch to the lead's height — let each card
be its natural size. Prevents the editorial-desk void below the take. */
align-items: start;
padding: 0 0 26px; border-bottom: 1px solid var(--border-soft); margin-bottom: 30px;
}
.pb-lead {
display: grid; grid-template-rows: auto 1fr;
background: var(--card); border: 1px solid var(--border); border-radius: 0;
overflow: hidden; cursor: pointer; transition: border-color .15s;
}
.pb-lead:hover { border-color: var(--text); }
.pb-lead-media {
/* Wider/shorter ratio so the image doesn't dominate desktop viewports. */
aspect-ratio: 16/8.5; max-height: 380px; overflow: hidden; background: var(--bg-alt);
}
.pb-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pb-lead:hover .pb-lead-media img { transform: scale(1.02); }
.pb-lead-body { padding: 22px 24px 24px; display: grid; gap: 12px; align-content: start; }
.pb-strip { display: flex; gap: 10px; align-items: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--muted); }
.pb-strip .verdict-tag { padding: 2px 8px; border-radius: 4px; color: var(--bg); font-weight: 700; letter-spacing: 0.06em; }
.verdict-tag.good { background: var(--good); }
.verdict-tag.bad { background: var(--bad); }
.verdict-tag.ugly { background: var(--ugly); }
.verdict-tag.progress { background: var(--good); }
.verdict-tag.strain { background: var(--brand); }
.verdict-tag.noise { background: var(--muted); }
/* ====================== CIVIC STATUS PILL — TYPOGRAPHIC ====================== */
/* No coloured fills, no emoji, no rounded chrome. ALL-CAPS Inter Bold kicker
in ink, like Guardian / NYT / Hindu section labels. Severity (Crisis +
Accountability) earns a 4px maroon top rule on the CARD, not on the pill. */
.status-pill {
display: inline-flex; align-items: center; gap: 0;
padding: 0; border-radius: 0;
font-family: var(--sans);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
border: 0; background: transparent;
white-space: nowrap;
color: var(--text);
}
.status-pill .ic { display: none; } /* emojis off in editorial chrome */
.status-pill[data-s="noise"] { color: var(--muted); font-weight: 600; }
.status-pill[data-s="crisis"],
.status-pill[data-s="accountability"] { color: var(--brand); }
.status-pill[data-s="strategic"],
.status-pill[data-s="milestone"] { color: var(--text); }
/* Card-level severity rule — applied via card.cat-crisis / .cat-accountability
in the rendering layer. Maroon 4px top stripe like Guardian's section rule. */
.card.cat-crisis, .card.cat-accountability,
.pb-side-card.cat-crisis, .pb-side-card.cat-accountability {
border-top: 4px solid var(--brand);
}
/* Confidence — small italic kicker after the status, ink only */
.confidence-chip {
display: inline-flex; align-items: center; gap: 0;
padding: 0;
font-family: var(--serif);
font-size: 11px; font-weight: 400; font-style: italic;
letter-spacing: 0;
background: transparent; border: 0;
color: var(--muted);
text-transform: none;
}
.confidence-chip::before { content: '·'; margin: 0 6px 0 0; opacity: .5; }
.confidence-chip[data-c="developing"] { color: var(--muted-strong); }
.confidence-chip[data-c="alleged"] { color: var(--brand); font-weight: 700; }
.confidence-chip[data-c="confirmed"] { display: none; }
.pb-lead-title {
font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
margin: 0; font-weight: 400; letter-spacing: -0.015em; color: var(--text);
}
.pb-lead-sum { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.pb-receipts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* बेबाक rail (DEPRECATED in homepage — moved to bebaak-mast above the
Pulse Board). The .pb-bebaak class is kept for the desk page's hero. */
.pb-bebaak-stack { display: grid; gap: 14px; }
.pb-bebaak {
display: grid; grid-template-rows: auto auto 1fr auto;
background: linear-gradient(180deg, var(--card) 0%, var(--card-alt) 100%);
border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px 16px;
position: relative; overflow: hidden;
}
.pb-bebaak.compact { padding: 14px 20px 14px; background: var(--card); }
.pb-bebaak.compact .pb-bebaak-head { display: none; }
.pb-bebaak.compact .pb-bebaak-body { font-size: 14px; line-height: 1.55; }
.pb-bebaak.compact::before { display: none; }
.pb-bebaak::before {
content: '✊'; position: absolute; right: -8px; bottom: -22px; font-size: 110px; opacity: 0.045;
}
/* SIDE-STACK: 4 secondary headlines in the right rail of the Pulse Board.
Fills the rail naturally to match the lead height. Classic magazine front-
page pattern (Frontline, NYT, Guardian). */
.pb-side-stack { display: flex; flex-direction: column; gap: 12px; }
.pb-side-card {
padding: 13px 16px; background: var(--card);
border: 1px solid var(--border-soft); border-radius: 10px;
cursor: pointer; transition: .15s; display: grid; gap: 6px;
}
.pb-side-card:hover { border-color: var(--saffron); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pb-side-top { display: flex; align-items: center; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.pb-side-headline {
font-family: var(--serif); font-size: 16px; line-height: 1.25; margin: 0; font-weight: 400; letter-spacing: -0.005em; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-side-headline a { color: inherit; text-decoration: none; }
.pb-side-meta { font-size: 11px; color: var(--muted); }
.pb-side-meta b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
.pb-side-card { padding: 11px 13px; }
.pb-side-headline { font-size: 14.5px; -webkit-line-clamp: 2; }
}
.pb-bebaak-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pb-bebaak-head h2 {
/* Devanagari first — Tiro Devanagari Hindi has properly placed matras,
unlike serif fallbacks that clip them under tight line-heights. */
font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', var(--serif);
font-size: 34px; margin: 0; font-weight: 400; letter-spacing: -0.005em;
/* Solid saffron — gradient + -webkit-background-clip:text was clipping
the matras above the headline. Cleaner and more dignified. */
color: var(--saffron);
/* Devanagari needs line-height ≥ 1.1 or matras get clipped. */
line-height: 1.15;
}
.pb-bebaak-head .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
.pb-bebaak-verdict { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; align-self: start; width: fit-content; margin: 10px 0 12px; }
.pb-bebaak-verdict[data-v="hope"] { color: var(--good); }
.pb-bebaak-verdict[data-v="concern"] { color: var(--bad); }
.pb-bebaak-verdict[data-v="outrage"] { color: var(--ugly); }
.pb-bebaak-verdict[data-v="question"]{ color: var(--civic); }
.pb-bebaak-verdict[data-v="idea"] { color: var(--civic); }
.pb-bebaak-verdict[data-v="shame"] { color: var(--ugly); }
.pb-bebaak-verdict[data-v="pride"] { color: var(--green); }
.pb-bebaak-verdict[data-v="reform"] { color: var(--civic); }
.pb-bebaak-body { font-size: 15.5px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.pb-bebaak-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pb-bebaak-meta a { color: var(--saffron); font-weight: 600; text-decoration: none; }
.pb-bebaak-meta a:hover { text-decoration: underline; }
.pb-bebaak-empty { font-size: 13px; color: var(--muted); padding: 18px 0; line-height: 1.5; }
.pb-bebaak-empty a { color: var(--saffron); font-weight: 600; }
/* ====================== TRUST RECEIPTS — TYPOGRAPHIC ====================== */
/* No filled chips, no rounded chrome, no tinted backgrounds. Plain ALL-CAPS
Inter small caps separated by interpuncts — newsroom dateline style. */
.card-receipts {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
font-family: var(--sans); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
color: var(--muted); line-height: 1.5;
}
.card-receipts .receipt + .receipt::before {
content: '·'; margin: 0 8px; opacity: .55;
}
.receipt {
display: inline; padding: 0; border: 0; border-radius: 0;
background: transparent; color: var(--muted); font-weight: 600;
white-space: nowrap;
}
.receipt b { color: var(--text); font-weight: 700; }
.receipt.r-newsrooms b { color: var(--text); }
.receipt.r-flipped { color: var(--brand); font-weight: 700; }
.receipt.r-flipped b { color: var(--brand); }
.receipt.r-single { color: var(--brand); font-weight: 700; }
.receipt.r-translated{ color: var(--text); }
.receipt.r-region { color: var(--text); }
/* ====================== FEED ====================== */
.feed { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.feed-foot { text-align: center; margin: 26px 0; }
.load-more { background: transparent; border: 1px solid var(--border); padding: 10px 22px; border-radius: 999px; color: var(--text); font-size: 13.5px; font-weight: 500; }
.load-more:hover { border-color: var(--saffron); color: var(--saffron); }
.feed-end { color: var(--muted); font-size: 13px; font-style: italic; }
/* ====================== CARD v2 (newsroom-flat) ====================== */
.card {
display: grid; grid-template-rows: auto 1fr; background: var(--card);
border: 1px solid var(--border); border-radius: 0; overflow: hidden;
transition: border-color .15s; position: relative; animation: fade-in .35s ease both;
}
.card:hover { border-color: var(--text); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); cursor: pointer; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { padding: 16px 18px 16px; display: grid; gap: 10px; align-content: start; }
.card-top { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.card-top .verdict-tag { padding: 1px 7px; border-radius: 3px; color: var(--bg); font-weight: 700; }
.card-title {
font-family: var(--display); font-size: 22px; line-height: 1.18; margin: 0; font-weight: 400;
letter-spacing: -0.005em; cursor: pointer; color: var(--text);
}
.card-title:hover { color: var(--saffron); }
.card-sum { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-why { font-size: 12.5px; line-height: 1.5; color: var(--muted-strong); margin: 7px 0 0; padding-left: 9px; border-left: 2px solid var(--brand);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-why-label { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; color: var(--brand); margin-right: 5px; white-space: nowrap; }
.card.no-img { padding-top: 6px; }
.card.no-img .card-title { font-size: 20px; }
.card-receipts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bookmark { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center; background: rgba(255,253,248,0.88);
border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 14px;
transition: .15s; backdrop-filter: blur(4px); }
.bookmark:hover { color: var(--saffron); border-color: var(--saffron); }
.bookmark.on { color: var(--saffron); background: var(--card); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border-soft); margin-top: 4px; }
.card-foot .read-link { font-size: 12px; color: var(--muted); font-weight: 600; text-decoration: none; }
.card-foot .read-link:hover { color: var(--saffron); }
.card-foot .src { font-size: 11.5px; color: var(--muted); font-weight: 500; }
/* ====================== VOTE BAR (newsroom-flat) ====================== */
/* No more rounded toggle pills. Three flat ALL-CAPS Inter buttons sharing a
1px border, like an old typesetter's quoin. The selected vote inverts. */
.votebar {
display: flex; gap: 0; margin-top: 8px;
border: 1px solid var(--border);
}
.votebar.err { animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }
.votebtn {
flex: 1; background: transparent; border: 0;
border-right: 1px solid var(--border);
padding: 7px 4px; border-radius: 0;
color: var(--muted); font-family: var(--sans);
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
transition: background .15s, color .15s;
display: flex; align-items: center; justify-content: center; gap: 5px;
min-height: 30px; cursor: pointer;
}
.votebtn:last-child { border-right: 0; }
.votebtn:hover { color: var(--text); background: var(--bg-alt); }
.votebtn .vc {
font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums;
font-weight: 600; letter-spacing: 0;
}
.votebtn.picked { background: var(--text); color: #ffffff; }
.votebtn.picked .vc { color: #ffffff; opacity: .75; }
.votebtn.lead .vc { color: var(--brand); font-weight: 700; }
.votebtn.picked.lead .vc { color: #ffffff; }
/* ====================== SECTIONS UNDER FEED ====================== */
.spotlight, .factcheck, .citizen, .bebaak-rail, .pageone {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 22px 24px; margin: 28px 0;
}
.spotlight-head, .factcheck-head, .citizen-head, .bebaak-rail-head, .pageone-head {
display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.spotlight-kicker, .factcheck-kicker, .bebaak-rail-kicker, .pageone-kicker {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600;
}
.spotlight-head h2, .factcheck-head h2, .citizen-head h2, .bebaak-rail-head h2, .pageone-head h2 {
font-family: var(--display); font-size: 24px; margin: 0; font-weight: 400; letter-spacing: -0.01em;
}
.spotlight-name { background: transparent; border: 0; font-family: var(--display); font-size: 24px; padding: 0; cursor: pointer; color: var(--text); letter-spacing: -0.01em; }
.spotlight-name:hover { color: var(--saffron); }
.spotlight-sub, .factcheck-sub { color: var(--muted); font-size: 13px; }
.spotlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spot-item { display: block; padding: 12px 14px; background: var(--bg); border-radius: 8px; text-decoration: none; color: var(--text); transition: .15s; border: 1px solid transparent; }
.spot-item:hover { border-color: var(--border); }
.spot-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; }
.spot-meta .dot { width: 6px; height: 6px; border-radius: 50%; align-self: center; }
.dot.progress { background: var(--good); } .dot.strain { background: var(--ugly); } .dot.noise { background: var(--muted); }
/* On Page One Today — print-edition rail (newsroom feel) */
.pageone-sub { color: var(--muted); font-size: 13px; }
.pageone-sub em { font-style: italic; color: var(--text); }
.pageone-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
border-top: 2px solid var(--ink); /* the bold print-page rule */
}
.po-item {
display: block; padding: 14px 16px;
border-right: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
text-decoration: none; color: var(--text);
transition: background .15s;
background: var(--card);
}
.po-item:hover { background: var(--brand-soft); }
.po-item .po-kicker {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--brand); font-weight: 700; margin-bottom: 6px; display: block;
}
.po-item .po-title {
font-family: var(--display); font-size: 16.5px; line-height: 1.28; font-weight: 600;
letter-spacing: -0.005em; color: var(--text);
}
.po-item .po-meta {
font-size: 11.5px; color: var(--muted); margin-top: 8px;
display: flex; gap: 10px; align-items: center;
}
.po-item .po-meta .po-region { font-weight: 600; color: var(--text); }
.po-item.po-lead {
grid-column: 1 / -1;
padding: 22px 24px;
border-bottom: 2px solid var(--ink);
}
.po-item.po-lead .po-title { font-size: 28px; line-height: 1.15; font-weight: 700; }
.po-item.po-lead .po-kicker { font-size: 11.5px; }
@media (max-width: 720px) {
.pageone-list { grid-template-columns: 1fr; }
.po-item.po-lead .po-title { font-size: 22px; }
}
/* Fact-check */
.factcheck-list { display: grid; gap: 8px; }
.fc-item { display: block; padding: 14px 16px; background: var(--bg); border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: .15s; }
.fc-item:hover { border-color: var(--border); }
.fc-tag { display: inline-block; padding: 1px 7px; background: var(--ugly); color: var(--bg); border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 8px; }
.fc-meta { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; }
/* Citizen */
.cz-card { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.cz-flag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ugly); font-weight: 700; margin-bottom: 8px; }
.cz-title { font-family: var(--display); font-size: 20px; margin: 0 0 10px; font-weight: 400; }
.cz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.cz-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cz-col p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cz-col a { color: var(--civic); word-break: break-all; }
.cz-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
/* Citizen Desk empty state — three concrete civic-action examples so the
desk page looks alive even before any reader has submitted. */
.cz-empty { padding: 6px 0 0; }
.cz-empty-h { font-family: var(--display); font-size: 24px; margin: 0 0 8px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.cz-empty-lede { font-family: var(--serif); font-size: 14.5px; color: var(--muted); margin: 0 0 18px; max-width: 60ch; line-height: 1.5; }
.cz-empty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 18px; }
.cz-empty-card { padding: 14px 16px; background: var(--bg); border: 1px solid var(--border-soft); border-left: 3px solid var(--brand); }
.cz-empty-kicker { font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.cz-empty-card h4 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.cz-empty-card p { font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; }
.cz-empty-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
/* ====================== CHARTER + FOOTER ====================== */
.charter { max-width: var(--maxw); margin: 30px auto 0; padding: 22px var(--gutter); color: var(--muted); font-size: 13.5px; line-height: 1.6; border-top: 1px solid var(--border-soft); }
.charter h3 { font-family: var(--serif); color: var(--text); font-weight: 400; font-size: 22px; margin: 0 0 8px; }
footer { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px; color: var(--muted); font-size: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-soft); }
footer a { color: inherit; border-bottom: 1px dotted currentColor; text-decoration: none; }
footer a:hover { color: var(--saffron); border-color: var(--saffron); }
/* ====================== TO TOP + MODAL (now only for submissions) ====================== */
.totop {
position: fixed; bottom: 96px; right: 22px; width: 42px; height: 42px;
background: var(--text); color: var(--bg); border: 0; border-radius: 50%; font-size: 17px;
opacity: 0; pointer-events: none; transition: .2s; box-shadow: var(--shadow-2); z-index: 20;
}
.totop.show { opacity: 1; pointer-events: auto; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; font-size: 14px; z-index: 1; }
.modal-body { padding: 28px 30px 24px; }
.m-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.m-title { font-family: var(--display); font-size: 32px; line-height: 1.15; margin: 0 0 12px; font-weight: 400; }
.m-summary { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.m-note, .m-note2 { font-size: 13px; color: var(--muted); }
.badge { padding: 2px 9px; border-radius: 4px; color: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.badge.good { background: var(--good); } .badge.bad { background: var(--bad); } .badge.ugly { background: var(--ugly); }
.sub-form { display: grid; gap: 12px; }
.sub-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.sub-form input, .sub-form textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: var(--sans); width: 100%; }
.sub-form textarea { min-height: 80px; resize: vertical; }
.sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-actions { display: flex; gap: 10px; }
.btn-primary { background: var(--text); color: var(--bg); border: 0; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.btn-primary:hover { background: var(--saffron); color: var(--ink-on-acc); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.sub-thanks { padding: 16px; background: rgba(31,138,91,0.10); color: var(--good); border-radius: 8px; font-weight: 500; }
.sub-msg.err { color: var(--ugly); font-size: 13px; }
/* ====================== MOBILE BOTTOM NAV ====================== */
.bottomnav {
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
background: var(--card); border-top: 1px solid var(--border);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
justify-content: space-around;
}
.bn-item {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 6px 4px; background: transparent; border: 0; color: var(--muted);
font-size: 10.5px; font-weight: 500; transition: .15s; text-decoration: none; min-height: 48px;
}
.bn-item .bn-icon { font-size: 19px; line-height: 1; }
.bn-item.active, .bn-item:hover { color: var(--saffron); }
.bn-item .bn-label.devanagari { font-family: var(--serif); font-size: 11px; }
/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--bg-alt) 0%, var(--card) 50%, var(--bg-alt) 100%);
background-size: 200% 100%; animation: shimmer 1.4s infinite linear;
border-radius: var(--radius); height: 220px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
mark { background: rgba(231,111,36,0.25); color: var(--text); padding: 0 2px; border-radius: 2px; }
/* ====================== RESPONSIVE ====================== */
/* ── Masthead responsive declutter ─────────────────────────────────────────
The wordmark is the publication's identity and must never truncate. As the
viewport narrows, non-essential controls fold away in priority order so the
logo + primary navigation always fit on one tidy row:
≤1360 region/language selects fold into the ⚙ filter button; motto drops
≤1024 language toggle folds into ⚙ too; AI Pulse + radio label drop
≤860 primary nav (बेबाक/Exams/Contribute) moves to the bottom nav */
@media (max-width: 1360px) {
.brand .motto { display: none; }
.brand-mark { top: 0; } /* motto hidden → lone flag centres on its own */
.controls .select { display: none; }
.controls #filters-toggle { display: inline-flex; }
.topbar.filters-open .select { display: inline-flex; }
}
@media (max-width: 1024px) {
.topbar { padding: 14px 20px; }
.brand h1 { font-size: 26px; }
.iconbtn.ai-pulse { display: none; }
.radio-trigger .rt-label { display: none; }
.radio-trigger { padding: 0 10px; }
.search input { width: 160px; }
.search input:focus { width: 200px; }
.controls #lang-mode { display: none; }
.topbar.filters-open #lang-mode { display: inline-flex; }
}
@media (max-width: 860px) {
.brand h1 { font-size: 22px; }
.iconbtn.contribute, .iconbtn.bebaak, .iconbtn.exams-link { display: none; }
.bottomnav { display: flex; }
.totop { display: none; }
body { padding-bottom: 70px; }
}
@media (max-width: 1100px) {
.pulseboard { grid-template-columns: 1.4fr 1fr; gap: 18px; }
}
@media (max-width: 960px) {
.pulseboard { grid-template-columns: 1fr; gap: 16px; }
.pb-lead-title { font-size: clamp(24px, 5vw, 32px); }
.feed { grid-template-columns: 1fr 1fr; gap: 14px; }
.spotlight-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.topbar { padding: 10px 14px; gap: 8px; }
.brand h1 { font-size: 20px; }
.brand-logo { height: 36px; }
.brand .motto { display: none; }
.controls { gap: 6px; }
/* On phones the radio button collapses to just the 📻 glyph to save width */
.radio-trigger .rt-label { display: none; }
.radio-trigger { padding: 0 10px; }
.controls .select, .controls #lang-mode, .controls #filters-toggle { display: none; }
.topbar.filters-open .select, .topbar.filters-open #lang-mode { display: inline-flex; }
.controls #filters-toggle { display: inline-flex; }
.search input { width: 130px; }
.search input:focus { width: 160px; }
/* Hide non-essential topbar buttons on phone — bottom nav covers them */
.iconbtn.contribute, .iconbtn.bebaak { display: none; }
.metabar { font-size: 11px; padding: 8px 14px; }
.sections { padding: 10px 14px 4px; }
.subnav { padding: 0 14px 10px; gap: 8px; }
main { padding: 6px 14px 30px; }
.pb-lead-body { padding: 16px 18px 18px; }
.pb-bebaak { padding: 16px 18px 16px; }
.pb-bebaak-head h2 { font-size: 28px; }
.pb-bebaak-body { font-size: 14.5px; }
.feed { grid-template-columns: 1fr 1fr; gap: 12px; }
.card-body { padding: 12px 14px 12px; }
.card-title { font-size: 16px; }
.card.no-img .card-title { font-size: 17px; }
.card-sum { font-size: 12.5px; -webkit-line-clamp: 2; }
.card-receipts .receipt { font-size: 11px; padding: 2px 7px; }
.charter { padding: 16px 14px; font-size: 12.5px; }
/* Modal full-screen on phone */
.modal-overlay { padding: 0; align-items: stretch; }
.modal { max-width: 100%; min-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
.modal-body { padding: 22px 18px 100px; }
/* Show bottom nav */
.bottomnav { display: flex; }
.totop { display: none; }
body { padding-bottom: 70px; }
}
@media (max-width: 460px) {
.feed { grid-template-columns: 1fr; gap: 14px; }
.search input { width: 104px; }
.search input:focus { width: 150px; }
.card-media { aspect-ratio: 16/10; }
.pb-lead-media { aspect-ratio: 16/10; }
.pb-lead-title { font-size: 24px; }
.cz-grid { grid-template-columns: 1fr; }
.sub-row { grid-template-columns: 1fr; }
}