/* Current Affairs public pages. Theme tokens intentionally mirror the homepage.
   They are duplicated here until the homepage can be changed and visually verified. */
:root,
[data-theme="dark"] {
  --bg-0: #0F0E1A;
  --bg-1: #15132A;
  --card: #1A1833;
  --card-2: #221F40;
  --text: #ECEAFE;
  --text-dim: #A39FCC;
  --text-mute: #6E6A95;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --glass-bg: rgba(255,255,255,0.05);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --accent: #7C3AED;
  --accent-2: #9F67FF;
  --accent-soft: rgba(124,58,237,0.18);
  --correct: #22C55E;
  --wrong: #EF4444;
  --gold: #FFD700;
  --orange: #FF6B2B;
  --coin: #FFD60A;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -20px rgba(0,0,0,0.6), 0 12px 24px -10px rgba(0,0,0,0.4);
  --shadow-float: 0 50px 80px -30px rgba(124,58,237,0.45), 0 20px 40px -15px rgba(0,0,0,0.6);
  --grid-line: rgba(255,255,255,0.06);
  /* Card edge: the accent at low alpha, so a card reads as a card on the page. */
  --card-border: rgba(159,103,255,0.32);
  --card-border-hover: rgba(159,103,255,0.6);
  --hl-bg: rgba(159,103,255,0.30);        /* ==highlight== fill; ink on it 8.6:1+ */
  --c1:#7C3AED; --c2:#22C55E; --c3:#FFD700; --c4:#EF4444; --c5:#FF6B2B;
  --c6:#38BDF8; --c7:#EC4899; --c8:#A78BFA; --c9:#14B8A6; --c10:#F59E0B;
  /* Text-safe inks. --accent / --accent-2 / --text-mute stay for fills, borders
     and glows; anything that is read uses the -ink token, which each theme sets
     to clear WCAG AA 4.5:1 on its own background. Dark keeps its current values
     here (its own shortfalls are a separate pass). */
  --accent-ink: #7C3AED;
  --accent-2-ink: #9F67FF;
  --text-mute-ink: #6E6A95;
  /* Type system. Values are the shipped scale, named so a theme can swap the
     display face without touching layout rules. */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-label: 'Space Grotesk', 'Inter', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --display-weight: 700;
  --display-tracking: -.02em;
  --fs-masthead: clamp(42px, 7vw, 76px);
  --fs-article-h1: clamp(32px, 5.4vw, 54px);
  --fs-card-h3: clamp(23px, 3vw, 31px);
  --fs-section-h2: clamp(26px, 4vw, 38px);
  --fs-lede: clamp(17px, 2vw, 20px);
  --fs-body: 16.5px;
  --lh-body: 1.6;
  --measure-body: 780px;
}
[data-theme="light"] {
  --bg-0: #F7F7F7;
  --bg-1: #ECEFF1;
  --card: #FFFFFF;
  --card-2: #F4F4F8;
  --text: #14172B;
  --text-dim: #4B4F6B;
  --text-mute: #8A8FA8;
  --border: rgba(20,23,43,0.08);
  --border-strong: rgba(20,23,43,0.14);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.75);
  --accent: #58CC02;
  --accent-2: #2FB300;
  --accent-soft: rgba(88,204,2,0.16);
  --correct: #22C55E;
  --wrong: #EF4444;
  --gold: #E0A800;
  --orange: #FF6B2B;
  --coin: #E0A800;
  --shadow-card: 0 1px 0 rgba(255,255,255,1) inset, 0 30px 50px -25px rgba(20,23,43,0.18), 0 12px 24px -10px rgba(20,23,43,0.08);
  --shadow-float: 0 40px 70px -25px rgba(88,204,2,0.35), 0 20px 40px -15px rgba(20,23,43,0.12);
  --grid-line: rgba(20,23,43,0.06);
  --card-border: rgba(47,179,0,0.38);
  --card-border-hover: rgba(47,179,0,0.7);
  --hl-bg: rgba(88,204,2,0.30);           /* 13.1:1+ */
  --c1:#58CC02; --c2:#22C55E; --c3:#E0A800; --c4:#EF4444; --c5:#FF6B2B;
  --c6:#0284C7; --c7:#DB2777; --c8:#7C3AED; --c9:#0D9488; --c10:#D97706;
  /* Measured on #F7F7F7: #58CC02 was 1.95:1, #2FB300 2.59:1, #8A8FA8 2.98:1.
     Same hues, darkened until they pass: 5.07:1, 4.89:1, 4.78:1. */
  --accent-ink: #267A00;
  --accent-2-ink: #257D00;
  --text-mute-ink: #676C8C;
}
/* Forest & Champagne — signature Current Affairs theme. Spec: bg #142B25,
   frame #203A32, headline #F7F3E8, summary #D1DBD1, divider #547263,
   source #B7C6B9, accent #E8C27C. Everything else below is derived from those
   seven; each derivation is noted. Champagne is an accent for labels, rules and
   metadata — never a fill — so the glows and floats are muted, not gilded.
   Placed after the light block so it wins at equal specificity whichever
   dark/light state the shared toggle is in. */
[data-ca-theme="forest_champagne"] {
  --bg-0: #142B25;                          /* spec bg */
  --bg-1: #1A342D;                          /* bg → frame midpoint */
  --card: #26493E;                          /* spec frame #203A32 lifted ~1.5:1 over bg so a box reads as a box; hue kept (161°) */
  --card-2: #2C5346;                        /* card +6/+10/+8, gradient end (1.74:1 over bg; source ink still 4.85:1 on it) */
  --text: #F7F3E8;                          /* spec headline */
  --text-dim: #D1DBD1;                      /* spec summary */
  --text-mute: #B7C6B9;                     /* spec source */
  --border: rgba(247,243,232,0.10);         /* headline ink at 10% */
  --border-strong: #547263;                 /* spec divider */
  --glass-bg: rgba(247,243,232,0.05);       /* headline ink at 5% */
  --glass-bg-strong: rgba(247,243,232,0.08);/* headline ink at 8% */
  --accent: #E8C27C;                        /* spec accent */
  --accent-2: #F0D49A;                      /* accent +8/+18/+30: hover/link tint */
  --accent-soft: rgba(232,194,124,0.14);    /* accent at 14% */
  --correct: #9CCB8F;                       /* desaturated leaf green, 8.10:1 on bg */
  --wrong: #EDB0A6;                         /* desaturated brick, lifted so verdict text clears 4.5:1 on the card-2 end */
  --gold: #E8C27C;                          /* = accent (champagne is the gold) */
  --orange: #EDB0A6;                        /* = wrong; no second warm hue */
  --coin: #E8C27C;                          /* = accent */
  --shadow-card: 0 1px 0 rgba(247,243,232,0.07) inset, 0 34px 60px -18px rgba(4,12,9,0.8), 0 14px 28px -10px rgba(4,12,9,0.6); /* deeper than dark: dark-on-dark lift needs it */
  --shadow-float: 0 40px 70px -30px rgba(232,194,124,0.18), 0 20px 40px -15px rgba(6,14,11,0.6); /* accent at 18%, not 45% */
  --grid-line: rgba(247,243,232,0.06);
  --card-border: rgba(232,194,124,0.38);      /* accent at 38% */
  --card-border-hover: rgba(232,194,124,0.7); /* accent at 70% */
  --hl-bg: rgba(232,194,124,0.20);         /* headline ink on it 5.4:1 on the card-2 end */
  /* Story-role rules and chart hues: one champagne, one leaf, the rest dusty. */
  --c1:#E8C27C; --c2:#9CCB8F; --c3:#E8C27C; --c4:#EDB0A6; --c5:#EDB0A6;
  --c6:#9DB9B0; --c7:#D9B7C4; --c8:#C9B7D9; --c9:#9DB9B0; --c10:#E8C27C;
  --accent-ink: #E8C27C;                    /* 8.87:1 on bg, 7.26:1 on frame */
  --accent-2-ink: #F0D49A;                  /* 10.41:1 on bg */
  --text-mute-ink: #B7C6B9;                 /* 8.41:1 on bg */
  --font-display: 'Playfair Display', 'Space Grotesk', 'Inter', serif;
  --display-weight: 600;
  --display-tracking: -.005em;              /* Playfair needs almost none */
}
/* Obsidian & Brass. Spec: bg #0E1216, frame #1D252B, headline #F7F7F5,
   summary #BFC8CA, divider #374248, source #AAB7BA, accent #D7AA68.
   Complements the app's War identity (near-black + warm metal) without
   copying it; no glow effects, so the page glows are off. */
[data-ca-theme="obsidian_brass"] {
  --bg-0: #0E1216;                          /* spec bg */
  --bg-1: #151B20;                          /* bg → frame midpoint */
  --card: #232D34;                          /* spec frame #1D252B lifted to 1.5:1 over bg (same reason as forest) */
  --card-2: #2A363E;                        /* card +7/+9/+10, gradient end */
  --text: #F7F7F5;                          /* spec headline */
  --text-dim: #BFC8CA;                      /* spec summary */
  --text-mute: #AAB7BA;                     /* spec source */
  --border: rgba(247,247,245,0.10);
  --border-strong: #374248;                 /* spec divider */
  --glass-bg: rgba(247,247,245,0.05);
  --glass-bg-strong: rgba(247,247,245,0.08);
  --accent: #D7AA68;                        /* spec accent */
  --accent-2: #E4BE85;                      /* accent lifted: hover/link */
  --accent-soft: rgba(215,170,104,0.14);
  --correct: #9CCB8F;                       /* 10.17:1 on bg */
  --wrong: #EDB0A6;                         /* 10.17:1 on bg */
  --gold: #D7AA68; --coin: #D7AA68; --orange: #EDB0A6;
  --shadow-card: 0 1px 0 rgba(247,247,245,0.07) inset, 0 34px 60px -18px rgba(0,0,0,0.85), 0 14px 28px -10px rgba(0,0,0,0.6);
  --shadow-float: 0 20px 40px -15px rgba(0,0,0,0.6); /* no accent glow */
  --grid-line: rgba(247,247,245,0.06);
  --c1:#D7AA68; --c2:#9CCB8F; --c3:#D7AA68; --c4:#EDB0A6; --c5:#EDB0A6;
  --c6:#9FB3BC; --c7:#D9B7C4; --c8:#C3B6D6; --c9:#9FB3BC; --c10:#D7AA68;
  --card-border: rgba(215,170,104,0.36);
  --card-border-hover: rgba(215,170,104,0.7);
  --hl-bg: rgba(215,170,104,0.24);         /* 7.3:1+ */
  --accent-ink: #D7AA68;                    /* 8.81:1 on bg */
  --accent-2-ink: #E4BE85;                  /* 10.75:1 on bg */
  --text-mute-ink: #AAB7BA;                 /* 9.13:1 on bg */
  --font-display: 'Playfair Display', 'Space Grotesk', 'Inter', serif;
  --display-weight: 600;
  --display-tracking: -.005em;
}
/* Parchment & Oxblood. Spec: bg #F4F0E7, frame #FFFCF6, headline #272E2B,
   summary #48524C, divider #CFC8BA, source #515C53, accent #873E48.
   Oxblood only on labels, rules and links; headings stay charcoal. */
[data-ca-theme="parchment_oxblood"] {
  --bg-0: #F4F0E7;                          /* spec bg */
  --bg-1: #EDE8DC;                          /* bg −7: page gradient end */
  --card: #FFFCF6;                          /* spec frame */
  --card-2: #FAF6EE;                        /* frame → bg midpoint, gradient end */
  --text: #272E2B;                          /* spec headline */
  --text-dim: #48524C;                      /* spec summary */
  --text-mute: #515C53;                     /* spec source */
  --border: rgba(39,46,43,0.10);            /* headline ink at 10% */
  --border-strong: #CFC8BA;                 /* spec divider */
  --glass-bg: rgba(255,252,246,0.6);        /* frame at 60% */
  --glass-bg-strong: rgba(255,252,246,0.82);
  --accent: #873E48;                        /* spec accent */
  --accent-2: #6F2F38;                      /* accent deepened: links on a light ground */
  --accent-soft: rgba(135,62,72,0.12);
  --correct: #2F6B3A;                       /* 5.62:1 on bg */
  --wrong: #9B2F2F;                         /* 6.50:1 on bg */
  --gold: #8A6A2B; --coin: #8A6A2B; --orange: #9B2F2F;
  --shadow-card: 0 1px 0 rgba(255,255,255,1) inset, 0 30px 50px -25px rgba(39,46,43,0.20), 0 12px 24px -10px rgba(39,46,43,0.10);
  --shadow-float: 0 20px 40px -15px rgba(39,46,43,0.14);
  --grid-line: rgba(39,46,43,0.06);
  --c1:#873E48; --c2:#2F6B3A; --c3:#8A6A2B; --c4:#9B2F2F; --c5:#9B2F2F;
  --c6:#3B6A7A; --c7:#873E48; --c8:#6A4C93; --c9:#3B6A7A; --c10:#8A6A2B;
  --card-border: rgba(135,62,72,0.32);
  --card-border-hover: rgba(135,62,72,0.65);
  --hl-bg: rgba(135,62,72,0.16);           /* 10.1:1+ */
  --accent-ink: #873E48;                    /* 6.56:1 on bg */
  --accent-2-ink: #6F2F38;                  /* 8.63:1 on bg */
  --text-mute-ink: #515C53;                 /* 6.14:1 on bg */
  --font-display: 'Playfair Display', 'Space Grotesk', 'Inter', serif;
  --display-weight: 600;
  --display-tracking: -.005em;
}
/* Porcelain & Evergreen — the quiet one. Spec: bg #F6F8F3, frame #FFFFFF,
   headline #182C25, summary #47574F, divider #C9D5CA, source #506157,
   accent #20634A. Whitespace and type carry it; shadows and tints stay faint. */
[data-ca-theme="porcelain_evergreen"] {
  --bg-0: #F6F8F3;                          /* spec bg */
  --bg-1: #EEF2EC;                          /* bg −6: page gradient end */
  --card: #FFFFFF;                          /* spec frame */
  --card-2: #FAFCF8;                        /* frame → bg midpoint */
  --text: #182C25;                          /* spec headline */
  --text-dim: #47574F;                      /* spec summary */
  --text-mute: #506157;                     /* spec source */
  --border: rgba(24,44,37,0.10);
  --border-strong: #C9D5CA;                 /* spec divider */
  --glass-bg: rgba(255,255,255,0.6);
  --glass-bg-strong: rgba(255,255,255,0.85);
  --accent: #20634A;                        /* spec accent */
  --accent-2: #1A5240;                      /* accent deepened */
  --accent-soft: rgba(32,99,74,0.10);
  --correct: #20634A;                       /* = accent, 6.67:1 */
  --wrong: #A33A3A;                         /* 6.09:1 on bg */
  --gold: #7A6A2E; --coin: #7A6A2E; --orange: #A33A3A;
  --shadow-card: 0 1px 0 rgba(255,255,255,1) inset, 0 24px 44px -26px rgba(24,44,37,0.16), 0 10px 20px -10px rgba(24,44,37,0.08);
  --shadow-float: 0 16px 32px -14px rgba(24,44,37,0.12);
  --grid-line: rgba(24,44,37,0.06);
  --c1:#20634A; --c2:#20634A; --c3:#7A6A2E; --c4:#A33A3A; --c5:#A33A3A;
  --c6:#2E6B80; --c7:#8B4A6B; --c8:#5F4B8B; --c9:#2E6B80; --c10:#7A6A2E;
  --card-border: rgba(32,99,74,0.28);
  --card-border-hover: rgba(32,99,74,0.6);
  --hl-bg: rgba(32,99,74,0.14);            /* 11.6:1+ */
  --accent-ink: #20634A;                    /* 6.67:1 on bg */
  --accent-2-ink: #1A5240;                  /* 8.45:1 on bg */
  --text-mute-ink: #506157;                 /* 6.16:1 on bg */
  --font-display: 'Playfair Display', 'Space Grotesk', 'Inter', serif;
  --display-weight: 600;
  --display-tracking: -.005em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh; overflow-x: hidden;
  background: var(--bg-0); color: var(--text);
  font-family: var(--font-ui); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  width: 680px; height: 680px; border-radius: 50%; filter: blur(120px); opacity: .32;
}
body::before { top: -360px; left: -220px; background: radial-gradient(circle, var(--accent), transparent 70%); }
body::after { bottom: -420px; right: -260px; background: radial-gradient(circle, var(--c6), transparent 70%); opacity: .18; }
[data-theme="light"] body::before { opacity: .16; }
[data-theme="light"] body::after { opacity: .1; }
[data-ca-theme="forest_champagne"] body::before { opacity: .12; }
[data-ca-theme="forest_champagne"] body::after { opacity: .06; }
[data-ca-theme="obsidian_brass"] body::before, [data-ca-theme="obsidian_brass"] body::after { opacity: 0; } /* no glow effects */
[data-ca-theme="parchment_oxblood"] body::before, [data-ca-theme="porcelain_evergreen"] body::before { opacity: .08; }
[data-ca-theme="parchment_oxblood"] body::after, [data-ca-theme="porcelain_evergreen"] body::after { opacity: .04; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }

.nav {
  position: sticky; top: 18px; z-index: 20; width: min(1120px, calc(100% - 32px)); margin: 18px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px 10px 22px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--glass-bg-strong);
  box-shadow: var(--shadow-card); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font: 700 15px 'Space Grotesk', sans-serif; white-space: nowrap; }
.brand-logo { display: block; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 6px 18px -6px rgba(30,99,191,.65); }
.nav-links { display: flex; align-items: center; gap: 20px; color: var(--text-dim); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--glass-bg); }
.theme-toggle:hover { transform: rotate(20deg) scale(1.05); }

.page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0 72px; }
.eyebrow { color: var(--accent-ink); font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.masthead { max-width: 760px; margin-bottom: 46px; }
.masthead h1 { margin: 12px 0 14px; font-size: var(--fs-masthead); line-height: .98; }
.masthead p { max-width: 620px; margin: 0; color: var(--text-dim); font-size: clamp(16px, 2vw, 19px); }
.edition-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; color: var(--text-dim); font-size: 14px; }
.edition-pill, .chip { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--glass-bg); }
.edition-pill { padding: 7px 11px; color: var(--text); font-weight: 600; }
.edition-section { margin: 38px 0 14px; color: var(--text-dim); font-size: 15px; }
.edition-section h2 { margin: 4px 0 0; color: var(--text); font-size: var(--fs-section-h2); }
.article-grid { display: grid; gap: 18px; }
.article-card { display: block; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(145deg, var(--card), var(--card-2)); box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .18s ease; }
.article-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.article-card.coming-soon { cursor: default; }
.article-card.coming-soon:hover { transform: none; border-color: var(--border); }
.article-card h3 { font-size: var(--fs-card-h3); line-height: 1.13; }
.article-card p { margin: 12px 0 18px; color: var(--text-dim); font-size: 16px; }
.card-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { padding: 5px 9px; color: var(--text-dim); font-size: 12px; }
.chip.primary { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); background: var(--accent-soft); }
.read-more { margin-left: auto; color: var(--accent-2-ink); font-size: 13px; font-weight: 700; }
.coming-soon-note { color: var(--text-mute-ink); font-size: 13px; font-weight: 700; }
.empty { max-width: 700px; padding: 38px; border: 1px dashed var(--border-strong); border-radius: 22px; background: var(--glass-bg); color: var(--text-dim); }
.empty h2 { color: var(--text); font-size: 27px; }
.empty p { margin: 10px 0 0; }
.archive-link { display: inline-flex; margin-top: 38px; padding: 13px 17px; border: 1px solid var(--border-strong); border-radius: 13px; color: var(--text); background: var(--glass-bg); font-weight: 700; }
.archive-link:hover { border-color: var(--accent); }
.archive-link.coming-soon { color: var(--text-dim); cursor: default; }
.archive-link.coming-soon:hover { border-color: var(--border-strong); }
.loading { display: grid; gap: 14px; }
.skeleton { height: 140px; border-radius: 22px; background: linear-gradient(100deg, var(--card) 35%, var(--card-2) 50%, var(--card) 65%); background-size: 200% 100%; animation: pulse 1.4s infinite; }
@keyframes pulse { to { background-position: -200% 0; } }
.footer { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 42px; border-top: 1px solid var(--border); color: var(--text-mute-ink); font-size: 13px; }
.footer a { color: var(--text-dim); }

@media (max-width: 680px) {
  .nav { top: 10px; margin-top: 10px; padding: 10px 15px; border-radius: 22px; flex-wrap: wrap; }
  .nav-links { display: flex; order: 3; flex-basis: 100%; justify-content: space-around; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
  .nav-links a { display: grid; place-items: center; min-height: 36px; padding: 0 7px; }
  .page { width: min(100% - 28px, 1120px); padding-top: 58px; }
  .masthead { margin-bottom: 32px; }
  .article-card { border-radius: 18px; }
  .read-more { width: 100%; margin-left: 0; margin-top: 6px; }
}

/* ---------- Images by role ----------
   primary: fixed 16:9 slot, cover, author's focal point (inline object-position).
   The slot reserves its height via aspect-ratio, so nothing jumps while loading.
   map: natural ratio, full width, never cropped, tap to open the file. */
.card-hero, .primary-hero { margin: 0; overflow: hidden; background: var(--card-2); }
/* The ratio lives on the img (no percentage height): WebKit does not reliably resolve a child's height:100% against an aspect-ratio parent. */
.card-hero img, .primary-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 16 / 9) {
  .card-hero, .primary-hero { position: relative; padding-top: 56.25%; }
  .card-hero img, .primary-hero img { position: absolute; inset: 0; height: 100%; }
}
.article-card.has-hero { padding-top: 0; }
.article-card .card-hero { margin: 0 calc(-1 * clamp(22px, 4vw, 32px)) 18px; border-radius: 22px 22px 0 0; }
.primary-hero { margin-top: 22px; border-radius: 18px; }
.story-body figure.map { margin: 0; }
.story-body figure.map a { display: block; }
.story-body figure.map img { width: 100%; height: auto; object-fit: contain; border-radius: 10px; background: #fff; }
.story-body figure.map figcaption .dim { color: var(--accent-2-ink); }

/* ---------- Article page ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dim { color: var(--text-mute-ink); }
.article { max-width: var(--measure-body); }
.article-head .eyebrow a:hover { text-decoration: underline; }
.article-head h1 { margin: 12px 0 14px; font-size: var(--fs-article-h1); line-height: 1.04; }
.article-head .summary { margin: 0; color: var(--text-dim); font-size: var(--fs-lede); line-height: 1.5; }
.article-head .event-date { margin: 12px 0 0; font-size: 14px; }
/* Every article section is a card, in the same language as the story card:
   frame gradient, accent-tinted edge, one padding. */
.article-section { margin-top: 26px; padding: clamp(20px, 4vw, 28px); border: 1px solid var(--card-border); border-radius: 22px; background: linear-gradient(150deg, var(--card), var(--card-2)); box-shadow: var(--shadow-card); }
.article-section h2 { margin-bottom: 14px; font-size: clamp(22px, 3vw, 28px); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.source-list, .pyq-list, .practice-list, .archive-editions, .archive-briefs { margin: 0; padding: 0; list-style: none; }
.source-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.source-list a:hover { color: var(--accent-2-ink); }
.syllabus-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.syllabus-table th, .syllabus-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.syllabus-table th { color: var(--text-mute-ink); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.pyq, .practice { margin-bottom: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--glass-bg); }
.pyq-meta { display: block; margin-bottom: 6px; color: var(--accent-2-ink); font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pyq p, .practice-q { margin: 0; }
/* Question text comes from the PYQ bank / practice editor with real newlines
   between statements ("1. …\n  \n  2. …"); the app's Text renders them as line
   breaks. pre-line keeps those breaks (and collapses the whitespace-only
   lines to blank lines) instead of running the statements together. Scoped
   to question, option and answer text only; story cards are untouched. */
.practice-q, .practice-options li, .practice-options li .choice, .practice-answer p, .pyq > p, .pyq p { white-space: pre-line; }
.practice-q { font-weight: 600; }
.practice-options { margin: 12px 0 0; padding-left: 26px; color: var(--text-dim); }
.practice-options li { padding: 3px 0; }
/* Interactive options (JS only; the li text is moved into the button) */
.practice-options li .choice { display: block; width: 100%; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--glass-bg); color: inherit; text-align: left; font: inherit; line-height: 1.45; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.practice-options li .choice:hover:not(:disabled) { border-color: var(--accent); }
.practice-options li .choice:disabled { cursor: default; }
.practice-options li.is-correct .choice { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 14%, transparent); color: var(--text); }
.practice-options li.is-wrong .choice { border-color: var(--wrong); background: color-mix(in srgb, var(--wrong) 14%, transparent); color: var(--text); }
.practice-verdict { margin: 10px 0 0; font-weight: 700; }
.practice-verdict.good { color: var(--correct); }
.practice-verdict.bad { color: var(--wrong); }
.practice-answer { margin-top: 12px; }
.practice-answer summary { cursor: pointer; color: var(--accent-2-ink); font-weight: 700; }
.practice-answer p { margin: 10px 0 0; }
/* Mains practice hints: an ordered list behind the same <details>; pre-line
   for the same reason as the question text above. */
.mains-hints { margin: 10px 0 0; padding-left: 26px; color: var(--text-dim); }
.mains-hints li { padding: 3px 0; white-space: pre-line; }
.article-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }

/* Story cards. Default (no JavaScript): a vertical, fully readable list. */
.stories { margin-top: 36px; }
.story-track { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.story-card { padding: clamp(20px, 4vw, 30px); border: 1px solid var(--card-border); border-radius: 22px; background: linear-gradient(150deg, var(--card), var(--card-2)); box-shadow: var(--shadow-card); }
.story-card[data-role="context"] { border-top: 3px solid var(--c6); }
.story-card[data-role="key_highlights"] { border-top: 3px solid var(--c3); }
.story-card[data-role="key_concepts"] { border-top: 3px solid var(--c8); }
.story-card[data-role="way_forward"] { border-top: 3px solid var(--c2); }
.story-card[data-role="free"] { border-top: 3px solid var(--border-strong); }
.story-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.story-role { color: var(--accent-2-ink); font: 700 12px 'Space Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.story-count { color: var(--text-mute-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.story-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.story-body h3 { margin: 0 0 10px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.2; }
.story-body h4 { margin: 14px 0 6px; font-size: 17px; }
.story-body p { margin: 0 0 12px; }
.story-body ul, .story-body ol { margin: 0 0 12px; padding-left: 22px; }
.story-body li { margin: 4px 0; }
.story-body li > ul, .story-body li > ol { margin: 4px 0 0; padding-left: 20px; }
/* ==highlight==: a tinted fill from the theme, text keeps the body ink. */
.story-body .ca-hl { background: var(--hl-bg); color: inherit; padding: 0 .22em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story-body blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.story-body code { padding: 1px 5px; border-radius: 5px; background: var(--glass-bg-strong); font-size: .92em; }
.story-body figure { margin: 0; }
.story-body img { display: block; width: 100%; height: auto; border-radius: 14px; }
.story-body figcaption, .story-caption { margin-top: 8px; color: var(--text-mute-ink); font-size: 13.5px; }
.story-body a { color: var(--accent-2-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
/* ++underline++ vs a link: a link is accent-coloured text with a thin, close
   rule; an underline keeps the body ink and carries a thick rule set well
   below the baseline. Colour, weight and offset all differ, in every theme. */
.story-body .ca-underline { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: currentColor; text-underline-offset: .22em; }
/* -# small text: a footnote or aside, one step down in size and in ink. */
.story-body .ca-small { font-size: .875em; line-height: 1.5; color: var(--text-dim); }
/* JavaScript on: a swipeable, scroll-snapped horizontal sequence. */
.stories-enabled .story-track { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; transition: height .25s ease; scroll-snap-type: x mandatory; scroll-padding: 0; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stories-enabled .story-track::-webkit-scrollbar { display: none; }
.stories-enabled .story-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 22px; }
.stories-enabled .story-card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 160px; opacity: .55; transition: opacity .25s ease; }
.stories-enabled .story-card.active { opacity: 1; }
.story-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.story-btn { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text); border: 1px solid var(--card-border); border-radius: 50%; background: var(--glass-bg); font-size: 22px; line-height: 1; }
.story-btn:hover { border-color: var(--card-border-hover); background: var(--accent-soft); }
/* Ten cards = ten dots. The row shrinks before it overflows (each bar can
   compress from 26px to 8px); a 6px bar is an indicator, not a touch target. */
.story-dots { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.story-dot { flex: 0 1 26px; width: 26px; min-width: 8px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--card-border); transition: background .2s ease; }
.story-dot.on { background: var(--accent-2); }
.story-hint { margin: 10px 0 0; color: var(--text-mute-ink); font-size: 13px; text-align: center; }
@media (hover: none) { .story-btn { display: none; } }

/* ---------- Archive ---------- */
.archive-month + .archive-month { margin-top: 12px; }
.archive-edition { margin-bottom: 14px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(150deg, var(--card), var(--card-2)); box-shadow: var(--shadow-card); }
.archive-edition h3 { font-size: clamp(19px, 2.4vw, 23px); }
.archive-briefs { margin-top: 10px; }
.archive-briefs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.archive-briefs a { flex: 1 1 240px; font-weight: 600; }
.archive-briefs a:hover { color: var(--accent-2-ink); }

@media (max-width: 680px) {
  .article-section { margin-top: 18px; border-radius: 18px; }
  .syllabus-table { font-size: 14px; }
  .story-card { border-radius: 18px; }
  .stories-enabled .story-card { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.section-note { margin: -6px 0 14px; font-size: 14px; }
.pyq-missing { border-style: dashed; }
/* The nav bolt is white on the accent gradient; on champagne it needs the forest ink. */
/* With a Current Affairs theme on, the ✦ glyph takes the accent so the button reads as "a theme is on". */
[data-ca-theme] .theme-toggle { color: var(--accent); border-color: var(--card-border-hover); }
/* Theme menu (built by ca-render.js beside #theme-toggle). Six choices: the
   shared dark/light pair, then the four Current Affairs themes by their public
   names. Swatches are the themes' own page/frame/accent colours. */
.theme-menu { position: absolute; right: 12px; top: calc(100% + 8px); z-index: 30; min-width: 268px; padding: 6px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }
.theme-menu button { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: 500 14px var(--font-ui); }
.theme-menu button:hover, .theme-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.theme-menu button[aria-checked="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--card-border-hover); }
.theme-menu .theme-name { grid-column: 2; }
.theme-menu .theme-sub { grid-column: 2; color: var(--text-mute-ink); font-size: 12px; font-weight: 400; }
.theme-swatch { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-accent) 50% 100%); }
.theme-swatch[data-swatch="dark"] { --sw-bg: #0F0E1A; --sw-accent: #7C3AED; }
.theme-swatch[data-swatch="light"] { --sw-bg: #F7F7F7; --sw-accent: #58CC02; }
.theme-swatch[data-swatch="forest_champagne"] { --sw-bg: #142B25; --sw-accent: #E8C27C; }
.theme-swatch[data-swatch="obsidian_brass"] { --sw-bg: #0E1216; --sw-accent: #D7AA68; }
.theme-swatch[data-swatch="parchment_oxblood"] { --sw-bg: #F4F0E7; --sw-accent: #873E48; }
.theme-swatch[data-swatch="porcelain_evergreen"] { --sw-bg: #F6F8F3; --sw-accent: #20634A; }
@media (max-width: 680px) { .theme-menu { right: 8px; left: 8px; min-width: 0; } }