/* Sangam Europa — briefing, data and timeline components. Built only from tokens.css. */

/* chart colours: series need 3:1 against the page and against each other, in both themes */
:root { --chart-blue: var(--europa-blue); --chart-grey: #7c8bb2; }
[data-theme="dark"] { --chart-blue: #3d6bff; --chart-grey: #d0d6e6; }

/* home hero */
.hero-mark { background: var(--surface-raised); display: grid; place-items: center; padding: var(--space-12) var(--space-8); min-height: 260px; }
.hero-mark img { width: min(320px, 70%); height: auto; }
.lede { max-width: 64ch; }

/* figures row */
.stats { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border-top: 1px solid var(--line); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: 2.125rem; line-height: 2.375rem; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; color: var(--ink-muted); }
.stat p { font-size: 1rem; line-height: 1.5rem; }
.src { font-family: var(--font-display); font-size: 0.8125rem; line-height: 1.1875rem; font-weight: 500; color: var(--ink-muted); }
.src a { color: var(--ink-muted); }
.src a:hover { color: var(--blue-text); }

/* pillars */
.pillars { display: grid; gap: var(--space-6); }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar { border-top: 1px solid var(--line); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.pillar h3 a { color: var(--ink); text-decoration: none; }
.pillar h3 a:hover { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }

/* fact list on section pages */
.facts { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-12); } }
.fact { border-top: 1px solid var(--line); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.fact .when { font-family: var(--font-display); font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron-text); }
.fact p { font-size: 1.0625rem; line-height: 1.6875rem; }

/* planned list */
.planned { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .planned { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-12); } }
.planned li { list-style: none; border-top: 1px solid var(--line); padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.planned ul, ul.planned { margin: 0; padding: 0; }
.planned .title-sm { font-size: 1.0625rem; line-height: 1.4375rem; }
.planned .note { font-family: var(--font-display); font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-muted); font-weight: 500; }

/* briefing links */
.brief-links { display: grid; gap: var(--space-6); }
@media (min-width: 700px) { .brief-links { grid-template-columns: repeat(3, 1fr); } }
.brief-links a { display: grid; gap: var(--space-2); text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.brief-links a:hover :is(h2, h3) { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }

/* status steps (FTA) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 4px solid var(--line); }
.steps li.done { border-top-color: var(--chart-blue); }
.steps li.next { border-top-color: var(--saffron); }
.steps .state { font-family: var(--font-display); font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.steps li.done .state { color: var(--blue-text); }
.steps li.next .state { color: var(--saffron-text); }
.steps b { font-family: var(--font-display); font-size: 1rem; line-height: 1.375rem; }
.steps p { font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink); }

/* tables */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-family: var(--font-display); font-size: 0.875rem; line-height: 1.25rem; }
table.data th, table.data td { text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text); font-weight: 700; border-bottom-color: var(--line-strong); }
table.data td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td:first-child, table.data tbody th { font-weight: 600; }
table.data tbody th { font-size: 0.875rem; color: var(--ink); border-bottom-color: var(--line); }

/* charts: plain HTML bars */
.chart { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.chart h2 { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -.01em; }
.chart .what { max-width: 64ch; font-size: 1.0625rem; line-height: 1.6875rem; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i { width: 12px; height: 12px; display: inline-block; }
.c-blue { background: var(--chart-blue); }
.c-saffron { background: var(--saffron); }
.c-ink { background: var(--chart-grey); }
.bars { display: grid; gap: var(--space-3); }
.bar-row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); }
@media (min-width: 700px) { .bar-row { grid-template-columns: 180px 1fr; gap: var(--space-4); align-items: center; } }
.bar-row .lab { font-family: var(--font-display); font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; }
.bar-group { display: grid; gap: 3px; }
.bar { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar i { display: block; height: 18px; min-width: 2px; }
.bar em { font-style: normal; color: var(--ink-muted); font-weight: 500; }
@media (max-width: 699px) { .bar-group { gap: var(--space-2); } .bar { flex-direction: column-reverse; align-items: flex-start; gap: 2px; } }

/* two-way (butterfly) chart */
.flow { display: grid; gap: var(--space-2); }
.flow-head, .flow-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); align-items: center; }
.flow-row .lab { grid-column: 1 / -1; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; text-align: center; color: var(--ink); }
@media (min-width: 760px) { .flow-head, .flow-row { grid-template-columns: 1fr 200px 1fr; } .flow-row .lab { grid-column: auto; order: 0; } .flow-row .l { order: -1; } }
.flow .l { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.flow .r { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-2); }
.flow i { display: block; height: 16px; min-width: 2px; }
.flow .v { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.flow-head { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.flow-head .l { color: var(--blue-text); }
.flow-head .r { color: var(--saffron-text); }
.flow-head .mid { display: none; }
@media (min-width: 760px) { .flow-head .mid { display: block; } }

details.datatable summary { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--blue-text); cursor: pointer; }
details.datatable[open] summary { margin-bottom: var(--space-3); }

/* two-lane timeline */
.tl-key { display: flex; flex-wrap: wrap; gap: var(--space-6); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-block: var(--space-6) var(--space-2); }
.tl-key .ideas { color: var(--saffron-text); }
.tl-key .states { color: var(--blue-text); }
.tl { list-style: none; margin: 0; padding: 0 0 var(--space-16); }
.tl li { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.tl .yr { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; }
.tl .ev { display: grid; gap: var(--space-1); }
.tl .ev .lane { font-family: var(--font-display); font-size: 0.8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tl .ideas .lane { color: var(--saffron-text); }
.tl .states .lane { color: var(--blue-text); }
.tl .ev p { font-size: 1.0625rem; line-height: 1.625rem; }
@media (min-width: 900px) {
  .tl li { grid-template-columns: 1fr 88px 1fr; gap: var(--space-8); }
  .tl .yr { text-align: center; grid-column: 2; grid-row: 1; }
  .tl .ideas { grid-column: 1; grid-row: 1; text-align: right; }
  .tl .states { grid-column: 3; grid-row: 1; }
  .tl .ev .lane { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tl-key { display: grid; grid-template-columns: 1fr 88px 1fr; gap: var(--space-8); }
  .tl-key .ideas { text-align: right; }
  .tl-key .states { grid-column: 3; }
}

/* sources */
.sources { padding-block: var(--space-8) var(--space-12); border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.125rem; line-height: 1.5rem; margin-bottom: var(--space-4); }
.sources ol { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); font-family: var(--font-display); font-size: 0.875rem; line-height: 1.3125rem; color: var(--ink-muted); }
.sources a { color: var(--ink-muted); word-break: break-word; }
.sources a:hover { color: var(--blue-text); }
.sources .asof { margin-top: var(--space-4); }

/* closing band without a form */
.band .btn { border-color: var(--on-blue); }
.band .note { font-family: var(--font-display); font-size: 0.875rem; }
.notice { background: var(--saffron-soft); color: var(--ink); font-family: var(--font-display); font-size: 0.875rem; line-height: 1.25rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); max-width: 680px; }
.src a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.fact p.src, .stat p.src, .tl .ev p.src, .chart p.src, .quote p.src { font-size: 0.8125rem; line-height: 1.1875rem; }
@media (max-width: 899px) { .hero-mark { min-height: 160px; padding: var(--space-8); } }

/* ===================================================================
   v2 refinements: one bold element (the river), quiet typography elsewhere
   =================================================================== */

/* opening */
.opening { padding-top: var(--space-12); }
.opening-grid { display: grid; gap: var(--space-6); align-items: end; }
@media (min-width: 960px) { .opening-grid { grid-template-columns: 7fr 5fr; gap: var(--space-12); } }
.headline-xl { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6.6vw, 5.5rem); line-height: .98; overflow-wrap: break-word; letter-spacing: -.035em; color: var(--ink); max-width: 11ch; }
.opening-side { display: grid; gap: var(--space-6); padding-bottom: var(--space-2); }
.opening-side .standfirst { max-width: 44ch; }

/* the river: EU–India goods trade as two currents */
.river { margin: var(--space-12) 0 0; }
.river-svg { display: block; width: 100%; height: clamp(150px, 26vw, 380px); }
.river-svg path { fill: none; stroke-linecap: butt; }
.cur-blue { stroke: var(--chart-blue); }
.cur-saffron { stroke: var(--saffron); }
@media (prefers-reduced-motion: no-preference) {
  .river-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: flow 1.9s cubic-bezier(.45,.05,.2,1) forwards; }
  .river-svg .cur-saffron { animation-delay: .25s; }
  @keyframes flow { to { stroke-dashoffset: 0; } }
}
.river figcaption { display: grid; gap: var(--space-3); padding-block: var(--space-4) var(--space-12); border-bottom: 1px solid var(--line); }
.river-key { display: grid; gap: var(--space-2) var(--space-8); }
@media (min-width: 760px) { .river-key { grid-template-columns: auto auto 1fr; } .river-key .sum { justify-self: end; text-align: right; } }
.river-key p { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.375rem; font-weight: 500; color: var(--ink-muted); }
.river-key b { color: var(--ink); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.river-key .sw { width: 14px; height: 14px; display: inline-block; align-self: center; }
.river-key .sum span { order: 0; }

/* contents page */
.toc { display: grid; }
.toc-row { display: grid; gap: var(--space-2) var(--space-8); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.toc-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .toc-row { grid-template-columns: 5fr 7fr; } }
.toc-row h3 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.toc-row h3 a { color: var(--ink); text-decoration: none; }
.toc-row h3 a:hover { color: var(--blue-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.toc-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.toc-row li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: baseline; font-size: 1.125rem; line-height: 1.6875rem; }
.toc-row .f { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--saffron-text); white-space: nowrap; }

/* ledger: dated facts with the date in the margin */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.ledger .entry { display: grid; gap: var(--space-1) var(--space-8); padding-block: var(--space-5, 20px); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .ledger .entry { grid-template-columns: 200px minmax(0, 680px); } }
.ledger .when { font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.75rem; font-weight: 700; color: var(--saffron-text); font-variant-numeric: tabular-nums; }
.ledger .entry > div > p:first-child { font-size: 1.125rem; line-height: 1.8125rem; }
.ledger .entry .src { margin-top: var(--space-1); }

/* sources: short names inline */
.src { font-size: 0.8125rem; }
.src::before { content: "Source: "; }
.sources .src::before, .sources .asof::before { content: none; }

/* planned list */
.planned li h3 { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; }
.planned .note { font-size: 0.875rem; }

/* quote original */
.quote .orig { margin-top: var(--space-2); max-width: 64ch; }
.quote figcaption { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }

/* calmer labels: sentence case where caps carried no information */
.steps .state, table.data th, .tl-key, .footer h2 { text-transform: none; letter-spacing: 0; }
.steps .state { font-size: 0.8125rem; }
table.data th { font-size: 0.8125rem; }
.tl-key { font-size: 0.875rem; }
.footer h2 { font-size: 0.875rem; line-height: 1.25rem; }
.section-head .more { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.brief-links a { gap: var(--space-2); }

/* dark mode follows the reader's system setting (values from tokens.css).
   color-scheme tells browsers with their own forced dark mode that the site has one already. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0b1330; --surface-raised: #141d40; --surface-sunken: #060b20; --line: #26305a; --line-strong: #5a6a9e;
    --ink: #eef1f8; --ink-muted: #aab4d2; --blue-text: #8fabff; --blue-soft: #17265a; --saffron-text: #ff9933; --saffron-soft: #3a2408;
    --action: #8fabff; --on-action: #0b1330; --link: var(--blue-text); --error: #ff9b92; --focus: #8fabff;
    --shadow-sm: 0 1px 2px #00000080; --shadow-lg: 0 12px 32px -4px #000000cc; --focus-ring: 0 0 0 2px #0b1330, 0 0 0 4px #8fabff;
  }
  :root:not([data-theme="light"]) { --chart-blue: #3d6bff; --chart-grey: #d0d6e6; }
}
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); row-gap: var(--space-5, 20px); } }
.flow-head { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }

/* river v3: drawn like the Sangam mark */
.river-svg path { stroke: none; }
.river-svg .cur-saffron { fill: var(--saffron); }
.river-svg .cur-gap { fill: none; stroke: var(--surface); stroke-width: 14; stroke-linejoin: round; }
.river-svg .stop-blue { stop-color: var(--chart-blue); }
.river-svg .stop-saffron { stop-color: var(--saffron); }
.river-svg path { animation: none; stroke-dasharray: none; }
@media (prefers-reduced-motion: no-preference) {
  .river-svg .reveal { transform-box: fill-box; transform-origin: 0 50%; animation: reveal 2.2s cubic-bezier(.45,.05,.2,1) both; }
  @keyframes reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.river-svg .cur-blue { fill: url(#tailgrad); }

/* print: light colours, no navigation, full source addresses */
@media print {
  :root, :root:not([data-theme="light"]) {
    --surface: #ffffff; --surface-raised: #f5f6fa; --surface-sunken: #e8eefb; --line: #d9deea; --line-strong: #7686ad;
    --ink: #0f1a3a; --ink-muted: #4f5a7a; --blue-text: #003399; --blue-soft: #e8eefb; --saffron-text: #a85400; --saffron-soft: #fff1e0;
    --link: #003399; --chart-blue: #003399; --chart-grey: #7c8bb2;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 11pt; line-height: 1.45; }
  html { scroll-padding-top: 0; }
  .masthead { position: static; }
  .brand img { content: url(logo.svg); height: 48px; }
  .nav, .nav-mobile, .masthead-action, .skip, .band, .footer .wrap, details.datatable summary { display: none; }
  .footer { background: none; }
  .opening-side .btn { display: none; }
  .chart, .ledger .entry, .tl li, .steps li, .toc-row, .stat, table.data tr, .quote { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .sources a { color: var(--ink-muted); text-decoration: none; }
  .sources a[href^="http"]::after { content: " " attr(href); overflow-wrap: anywhere; }
  .river-svg .reveal { animation: none; }
}

/* home: why now */
.why-grid { display: grid; gap: var(--space-4) var(--space-12); max-width: 1080px; }
@media (min-width: 860px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-grid p { font-size: 1.1875rem; line-height: 1.6; }
.why .src { margin-top: var(--space-4); }
.prose > .src { margin-top: calc(-1 * var(--space-2)); }

/* ---- Sangam Shira: custom display face (v0.3, 18 Oct 2026) ----
   Headlines, the home-page hero and the key figures. Labels, navigation and UI stay in Montserrat.
   To revert, delete this block and the @font-face at the end of fonts/fonts.css. */
:root { --font-headline: "Sangam Shira", var(--font-display); }
h1, h2, .toc-row h3, .card.lead h3, .headline-xl, .stat .num, .tl .yr, .river-key b { font-family: var(--font-headline); }
.footer h2 { font-family: var(--font-display); }
.headline-xl { letter-spacing: -.015em; }
h1 { letter-spacing: -.005em; }