/* ============================================================
   The Madnani File — Swen charter, measured from the template.
   Container 1200. Cards white, 1px border, radius 24. Images with
   a dark scrim carry the headlines. Navy #12386b is used ONLY for
   solid buttons, the active tab and links. Never as a background.
   ============================================================ */

@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'InterVar';src:url('/fonts/inter.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --accent:#12386b;
  --accent-tint:#e4ebf5;
  --yellow:#fffc4d;
  --mint-1:#d8f6dc;  --mint-2:#c3edd8;  --mint-ink:#1a8311;
  --blush:#fcd4d4;   --blush-ink:#704242;

  --page:#fff;
  --ink:rgba(0,0,0,.87);
  --ink-2:rgba(0,0,0,.6);
  --ink-3:rgba(0,0,0,.38);
  --line:rgba(0,0,0,.08);
  --sunk:rgba(0,0,0,.04);
  --scrim:rgba(0,0,0,.6);
  --white-2:rgba(255,255,255,.78);

  --shell:1200px;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --gap:24px; --pad-lg:40px; --pad:24px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font:400 16px/1.5 var(--text);letter-spacing:.1px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--accent);color:#fff;padding:12px 16px;
  border-radius:var(--r-sm);z-index:30}

/* ---------- navbar ---------- */
.site-header{padding:24px 0 0}
.navbar{display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 24px}
.brand{font:800 22px/1.2 var(--display);letter-spacing:-.6px;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--accent);text-decoration:none}
.navbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-left:auto}
.navbar nav a{font:700 16px/1.5 var(--text);color:var(--ink);white-space:nowrap}
.navbar nav a:hover{color:var(--accent);text-decoration:none}
.navbar nav a[aria-current]{color:var(--accent)}
.navbar .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-3);flex:none}
.subject-h1{font:800 40px/1.15 var(--display);letter-spacing:-1.2px;margin:28px 4px 6px}
.tagline{margin:0 4px 0;color:var(--ink-2);font-size:18px}
.hero-h{font:700 48px/1.3 var(--display);letter-spacing:-1px;margin:0;max-width:640px;color:#fff}
.hero-h a{color:#fff}.hero-h a:hover{text-decoration:underline}
main.wrap{padding-top:32px}

/* ---------- media block (image + scrim) ---------- */
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad-lg);color:#fff;background:#1b1b20}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.30) 38%,rgba(0,0,0,.88) 100%)}
.media>*:not(img){position:relative;z-index:2}
.media a{color:#fff}

.hero{min-height:450px;gap:20px}
.hero h1{font:700 48px/1.3 var(--display);letter-spacing:-1px;margin:0;max-width:640px;color:#fff}
.hero h1 a{color:#fff}
.hero p{margin:0;color:var(--white-2);max-width:56ch}
.hero .byline{color:var(--white-2)}
.hero .byline strong{color:#fff}

.tile{min-height:400px;gap:12px;padding:var(--pad-lg);justify-content:flex-start}
.tile h3{font:700 28px/1.3 var(--display);letter-spacing:-.5px;margin:16px 0 0;color:#fff}
.tile p{margin:0;color:var(--white-2);font-size:16px}
.tile .byline{margin-top:auto;padding-top:12px}
.tile .byline{color:var(--white-2)}

/* ---------- pills, badges, buttons ---------- */
.pill{align-self:flex-start;display:inline-block;font:700 14px/1.3 var(--text);
  padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:100%}
.pill-top{margin-bottom:auto}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 11px/1.2 var(--text);
  letter-spacing:.6px;text-transform:uppercase;padding:9px 14px;border-radius:999px;
  background:var(--yellow);color:rgba(0,0,0,.75);white-space:nowrap}
.btn{display:inline-block;font:700 16px/1 var(--text);padding:15px 24px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff}
.btn:hover{background:#0c2850;color:#fff;text-decoration:none}
.chip{display:inline-block;font:700 14px/1 var(--text);padding:11px 18px;border-radius:999px;
  color:var(--ink)}
.chip:hover{text-decoration:none;background:rgba(0,0,0,.06)}
.chip.on{background:var(--accent);color:#fff}
.chip.on:hover{background:var(--accent)}
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--sunk);border-radius:999px;
  padding:4px;margin:0 0 24px}

/* ---------- byline ---------- */
.byline{display:flex;align-items:center;gap:10px;font:400 16px/1.5 var(--text);color:var(--ink-2);
  margin:0}
.byline strong{font-weight:700;color:var(--ink)}
.byline .sep{color:var(--ink-3)}
.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--sunk)}

/* ---------- typography ---------- */
h1{font:700 48px/1.3 var(--display);letter-spacing:-1px;margin:0 0 16px}
h2{font:700 32px/1.3 var(--display);letter-spacing:-.5px;margin:0 0 16px}
h3{font:700 24px/1.4 var(--display);margin:0 0 12px}
.section-h{font:700 32px/1.3 var(--display);letter-spacing:-.5px;margin:56px 0 24px}
.intro{color:var(--ink-2);max-width:70ch;margin:0 0 32px}
.eyebrow{font:700 16px/1.5 var(--text);color:var(--ink-3);margin:0 0 8px}
.standfirst{font-size:20px;line-height:1.6;color:var(--ink-2);margin:0 0 32px;max-width:62ch}
.credit{font:400 13px/1.5 var(--text);color:var(--ink-3);margin:10px 0 0}
.empty{color:var(--ink-2)}
.more{margin-top:24px;font-weight:700}

/* ---------- grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:0;padding:0;list-style:none}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:0;padding:0;list-style:none}
.split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--gap);
  align-items:start;margin-top:56px}
.split .grid-2{grid-template-columns:1fr}
/* la colonne principale et la colonne laterale demarrent sur la meme ligne :
   le rythme de 56px est porte par .split, pas par le titre de section. */
.split .section-h:first-child{margin-top:0}

/* horizontal card: image left, body right */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;min-height:234px}
.card>img{width:200px;flex:none;object-fit:cover;height:auto;align-self:stretch}
.card .body{padding:var(--pad);display:flex;flex-direction:column;gap:10px;min-width:0}
.card .eyebrow{margin:0}
.card h3{margin:0;font-size:24px;line-height:1.4}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent);text-decoration:none}
.card p.summary{margin:0;color:var(--ink-2)}
.card .byline{margin-top:auto;padding-top:8px;font-size:14px}

/* vertical card inside a panel: image on top */
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);
  display:flex;flex-direction:column;gap:12px}
.vcard>img{border-radius:var(--r-md);width:100%;aspect-ratio:293/155;object-fit:cover}
.vcard h3{margin:0;font-size:24px;line-height:1.4}
.vcard h3 a{color:var(--ink)}
.vcard h3 a:hover{color:var(--accent);text-decoration:none}
.vcard p{margin:0;color:var(--ink-2);font-size:16px}
.vcard .byline{margin-top:auto;padding-top:4px;font-size:14px}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-lg)}

/* accent side cards */
.aside-card{border-radius:var(--r-md);padding:var(--pad);display:flex;flex-direction:column;gap:16px}
.aside-mint{background:linear-gradient(150deg,var(--mint-1) 0%,var(--mint-2) 100%)}
.aside-mint h3{color:var(--mint-ink);margin:0}
.aside-blush{background:var(--blush)}
.aside-blush h3{color:var(--blush-ink);margin:0}
.aside-card p{margin:0;color:var(--ink-2);font-size:16px}
.aside-card .icon{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;font:700 26px/1 var(--display)}
.aside-mint .icon{color:var(--mint-ink)} .aside-blush .icon{color:var(--blush-ink)}
.aside-card a.btn{align-self:stretch;text-align:center}
.gap-top{margin-top:24px}
.aside-mint a.btn{background:var(--mint-ink)} .aside-mint a.btn:hover{background:#12610c}
.aside-blush a.btn{background:var(--blush-ink)} .aside-blush a.btn:hover{background:#563030}

/* ---------- documents ---------- */
.doc{max-width:820px;margin:0 auto}
.crumbs{color:var(--ink-3);margin:0 0 16px}
.doc-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:12px}
.doc-head h1{flex:1;margin:0}
.doc>.byline{margin:0 0 32px}
.doc-figure{margin:0 0 40px}
.doc-figure img{border-radius:var(--r-lg);width:100%;aspect-ratio:1200/560;object-fit:cover}
/* un diagramme se lit en entier : il deborde la colonne de texte et garde son ratio */
.doc-figure.wide{margin:40px 0;width:min(1160px,calc(100vw - 40px));
  position:relative;left:50%;transform:translateX(-50%)}
.doc-figure.wide img{aspect-ratio:2400/900;object-fit:contain;background:#0d1b2e}
.prose{font-size:18px;line-height:1.7}
.prose p{margin:0 0 24px}
.prose h2{font-size:32px;line-height:1.3;letter-spacing:-.5px;margin:48px 0 16px}
.prose h3{font-size:24px;margin:40px 0 12px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 24px}
.prose li{margin-bottom:10px}
.prose blockquote{margin:32px 0;padding:var(--pad);background:var(--sunk);border-radius:var(--r-md);
  border-left:4px solid var(--accent)}
.prose blockquote p:last-child{margin:0}
.prose img{border-radius:var(--r-md);margin:32px 0}
.prose code{font-size:.9em;background:var(--sunk);padding:2px 6px;border-radius:6px}
.prose a{text-decoration:underline;text-underline-offset:.18em}

/* ---------- the record ---------- */
.record{margin:40px 0;display:grid;gap:16px}
.record-h{font:700 24px/1.4 var(--display);margin:0 0 4px}
.rec{border-radius:var(--r-md);padding:var(--pad)}
.rec h3{font:700 12px/1 var(--text);letter-spacing:.8px;text-transform:uppercase;margin:0 0 14px}
.rec ul{margin:0;padding-left:20px;line-height:1.6}
.rec li{margin-bottom:12px} .rec li:last-child{margin-bottom:0}
.rec-est{background:var(--mint-1)} .rec-est h3{color:var(--mint-ink)}
.rec-all{background:var(--yellow)} .rec-all h3{color:rgba(0,0,0,.62)}
.rec-unr{background:var(--sunk)}  .rec-unr h3{color:var(--ink-2)}

.factbox{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0 0 32px;
  background:var(--sunk);border-radius:var(--r-md);padding:var(--pad)}
.factbox dt{font:700 12px/1.5 var(--text);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.factbox dd{margin:0}

/* ---------- timeline ---------- */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 28px 28px;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
/* la pastille fait 12px + 3px de bordure de chaque cote = 18px de large.
   Pour centrer son axe sur celui du trait de 2px, il faut left = -(18/2) - 1 = -10px. */
.timeline li::before{content:"";position:absolute;left:-10px;top:5px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:3px solid #fff;box-sizing:content-box}
.timeline time{display:block;font:700 14px/1.5 var(--text);color:var(--accent);margin-bottom:6px}
.timeline p{margin:0 0 6px;line-height:1.6}
.timeline .from{font-size:14px;color:var(--ink-3)}
.cite{display:inline-block;font:700 11px/1 var(--text);letter-spacing:.6px;text-transform:uppercase;
  background:var(--sunk);color:var(--ink-2);padding:6px 10px;border-radius:999px;
  white-space:nowrap;margin-left:6px}
.cite:hover{text-decoration:none;background:var(--accent);color:#fff}

/* ---------- entities ---------- */
.table-scroll{overflow-x:auto}
.entities{width:100%;border-collapse:collapse}
.entities th{font:700 12px/1 var(--text);letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 20px 16px 0;border-bottom:1px solid var(--line)}
.entities td{padding:20px 20px 20px 0;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--ink-2)}
.entities tr:last-child td{border-bottom:0}
.entities td:first-child{font:700 18px/1.4 var(--display);letter-spacing:-.3px}

/* ---------- sources ---------- */
.sources{margin-top:56px;background:var(--sunk);border-radius:var(--r-lg);padding:var(--pad-lg)}
.sources h2{font:700 24px/1.4 var(--display);margin:0 0 20px}
.sources ol{padding-left:20px;margin:0;line-height:1.6}
.sources li{margin-bottom:16px} .sources li:last-child{margin-bottom:0}
.link-cat{margin-bottom:24px}
.link-cat h2{font:700 24px/1.4 var(--display);margin:0 0 20px}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.link-list li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.link-list a{font-weight:700}
.src{display:inline-block;font:700 12px/1.4 var(--text);letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-3);margin-left:8px}
.note{display:block;color:var(--ink-2);font-size:14px;margin-top:6px}

.pagination,.prevnext{display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:48px;color:var(--ink-2)}
.prevnext a{font-weight:700}
.prevnext .next{margin-left:auto;text-align:right}

/* ---------- footer ---------- */
.site-footer{margin-top:80px;padding:0 0 40px}
.footer-card{background:var(--sunk);border-radius:var(--r-lg);padding:var(--pad-lg)}
.site-footer p{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.ed{font:700 20px/1.4 var(--display)!important;color:var(--ink)!important;margin-bottom:16px!important}
.disclaimer{max-width:80ch}
.built{font-size:13px!important;color:var(--ink-3)!important;margin-bottom:0!important}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px} h1,.doc-head h1{font-size:38px}
  .tile h3{font-size:26px}
}
@media (max-width:760px){
  .navbar{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .navbar nav{margin-left:0;gap:16px} .navbar .dot{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .card{flex-direction:column;min-height:0}
  .card>img{width:100%;height:180px}
  .media{padding:24px} .hero{min-height:380px} .tile{min-height:300px}
  .panel,.sources,.footer-card{padding:24px}
  h1,.doc-head h1,.hero h1{font-size:30px;letter-spacing:-.5px}
  .section-h,h2,.prose h2,.tile h3{font-size:24px}
  .standfirst{font-size:18px} .prose{font-size:17px}
  .doc-head{flex-direction:column;gap:12px}
}
@media (max-width:520px){
  .factbox{grid-template-columns:1fr;gap:4px}
  .factbox dt{margin-top:12px}
}