/* ==========================================================================
   DMUN Foundation — stylesheet.

   Palette tokens:
     --header  #14283C
     --panel   #1B3048
     --blue    #002147
     --accent  #2278B5
     --sky     #44B8F3
   ========================================================================== */

@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/roboto-900.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/roboto-400i.woff2') format('woff2'); }

:root {
  --utility:#151515;
  --header:#14283C;
  --panel:#1B3048;
  --blue:#002147;
  --accent:#2278B5;
  --sky:#44B8F3;
  --black:#151515;
  --ink:#1F2933;
  --gray:#3D3D41;
  --muted:#6E7A87;
  --gray-50:#F6F6F7;
  --gray-100:#EBEBEB;
  --white:#FFFFFF;
  --container:1200px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:'Roboto',Arial,sans-serif;
  font-size:17px; line-height:1.6; color:var(--ink); background:var(--white);
}
img { max-width:100%; display:block; }
a { color:var(--accent); }
h1,h2,h3,h4 { line-height:1.15; margin:0 0 .5em; font-weight:700; }
p { margin:0 0 1em; }
ul { padding-left:1.25em; }
.container { max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.measure { max-width:72ch; }
.lede { font-size:18px; max-width:60ch; }

.kicker {
  display:block; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.on-dark .kicker, .band-blue .kicker, .band-deep .kicker { color:#9DB4C9; }

/* ---------- buttons: flat outline pills ---------- */
.btn {
  display:inline-block; padding:10px 28px; border-radius:999px;
  font-weight:700; font-size:15.5px; line-height:1.3; text-decoration:none;
  border:2px solid var(--accent); color:var(--accent); background:transparent;
  transition:background .15s ease, color .15s ease; cursor:pointer;
}
.btn:hover { background:var(--accent); color:#fff; }
.btn-white { border-color:#fff; color:#fff; }
.btn-white:hover { background:#fff; color:var(--header); }
.btn-solid { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-solid:hover { background:#013169; border-color:#013169; }
.btn-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }

/* ---------- utility bar ---------- */
.utility { background:var(--utility); color:#DCDCDC; font-size:13.5px; }
.utility .container { display:flex; justify-content:space-between; align-items:center; min-height:32px; }
.utility a { color:#DCDCDC; text-decoration:none; margin-left:18px; }
.utility a:hover { color:#fff; text-decoration:underline; }
.utility strong { color:#fff; font-weight:700; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:1000;
  background:var(--header); color:#fff;
}
.site-header .container { display:flex; align-items:center; gap:32px; min-height:88px; }
.brand { display:flex; align-items:center; text-decoration:none; color:#fff; }
.brand img { height:52px; width:auto; }
.brand-name { display:none; }

.nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-item { position:relative; }
a.nav-link {
  display:block; padding:32px 15px; color:#fff; text-decoration:none;
  font-weight:700; font-size:17px;
}
a.nav-link:hover, .nav-item:focus-within > a.nav-link, .nav-item.active > a.nav-link {
  text-decoration:underline; text-decoration-thickness:2.5px; text-underline-offset:7px;
}
.nav .caret { font-size:10px; opacity:.75; margin-left:5px; }

.dropdown {
  position:absolute; top:100%; left:0; min-width:250px;
  background:#fff; color:var(--ink); padding:14px 0;
  border-top:3px solid var(--sky);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity:1; visibility:visible; }
.dropdown a {
  display:block; padding:9px 22px; color:var(--gray); text-decoration:none; font-size:15.5px;
}
.dropdown a:hover {
  color:var(--accent); text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:4px;
}

/* header search (decorative, underlined input) */
.search-box {
  display:flex; align-items:center; gap:6px;
  border-bottom:2.5px solid #fff; padding-bottom:3px; margin-left:8px;
}
.search-box input {
  background:transparent; border:0; outline:0; color:#fff;
  font-family:inherit; font-size:16px; width:130px;
}
.search-box input::placeholder { color:#fff; opacity:.9; }
.search-box svg { flex:0 0 auto; }

.nav-toggle { display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; padding:8px; }

/* ---------- hero (solid dark,  homepage style) ---------- */
.hero-home { background:var(--header); color:#fff; padding:56px 0 88px; }
.hero-home h1 { font-size:clamp(30px,3.4vw,40px); font-weight:700; max-width:60%; }
.hero-home p { color:#E4EAF0; font-size:17.5px; max-width:520px; padding-right:8%; }

/* photo hero for subpages */
.hero {
  position:relative; color:#fff; background:var(--header);
  display:flex; align-items:flex-end; min-height:400px; overflow:hidden;
}
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,20,32,.85) 0%, rgba(10,20,32,.55) 55%, rgba(10,20,32,.15) 100%);
}
.hero .container { position:relative; z-index:2; padding-block:64px 56px; }
.hero h1 { font-size:clamp(40px,5.4vw,64px); font-weight:900; }
.hero p.lede { color:#E4EAF0; }

/* ---------- slider (image left, caption box right) ---------- */
.slider { position:relative; background:var(--panel); color:#fff; overflow:hidden; }
.slider-track { display:flex; transition:transform .55s ease; }
.slide { flex:0 0 100%; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); min-height:480px; max-height:640px; }
.slide-img { width:100%; height:100%; object-fit:cover; min-height:300px; max-height:640px; }
.slide-box { background:var(--panel); padding:56px 48px 110px; display:flex; flex-direction:column; justify-content:center; }
.slide-box h2 { font-size:clamp(24px,2.6vw,32px); font-weight:700; color:#fff; }
.slide-box p { color:#C2CEDA; font-size:16.5px; }
.slide-box .btn { align-self:flex-start; margin-top:10px; }
.slider-controls {
  position:absolute; right:44px; bottom:30px; z-index:3;
  display:flex; align-items:center; gap:16px; font-size:15px; color:#E4EAF0;
}
.slider-controls button {
  width:48px; height:48px; border-radius:50%; border:2px solid #fff; background:transparent;
  color:#fff; font-size:20px; line-height:1; cursor:pointer; transition:background .15s ease;
}
.slider-controls button:hover { background:rgba(255,255,255,.16); }

/* ---------- section scaffolding ---------- */
.section { padding-block:64px; }
.section-tight { padding-block:44px; }
.band-gray { background:var(--gray-50); }
.band-blue { background:var(--blue); color:#fff; }
.band-deep { background:var(--header); color:#fff; }
.band-blue h2, .band-deep h2 { color:#fff; }
.band-blue p, .band-deep p { color:#D5E0EA; }
.section h2 { font-size:clamp(26px,3vw,36px); color:var(--black); }
.band-blue h2, .band-deep h2, .section.band-blue h2, .section.band-deep h2 { color:#fff; }

.section-row { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:28px; }
.section-row h2 { margin:0; }
.section-row .all-link { font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
.section-row .all-link:hover { text-decoration:underline; }

/* ---------- news cards (flat, site) ---------- */
.news-slider { position:relative; }
.news-viewport { overflow:hidden; }
.news-track { display:flex; gap:28px; transition:transform .5s ease; }
.news-card { flex:0 0 calc((100% - 56px) / 3); background:#fff; }
.news-card img { width:100%; height:200px; object-fit:cover; }
.news-card h3 { font-size:17.5px; margin:14px 0 8px; }
.news-card h3 a { color:var(--black); text-decoration:none; }
.news-card h3 a:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.news-card p { font-size:14.5px; color:var(--gray); margin-bottom:8px; }
.news-card .news-date { font-size:14px; color:var(--muted); }
.news-nav { display:flex; align-items:center; gap:14px; }
.news-nav button {
  width:46px; height:46px; border-radius:50%; border:2px solid var(--accent);
  background:transparent; color:var(--accent); font-size:19px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.news-nav button:hover { background:var(--accent); color:#fff; }
.news-nav .news-count { font-size:15px; color:var(--muted); }

/* static grid variant (newsroom page) */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 28px; }
.news-grid .news-card { flex:none; }

/* ---------- blue topic strip ---------- */
.strip { background:var(--blue); color:#fff; padding-block:56px; }
.strip h2 { color:#fff; font-size:clamp(26px,3vw,36px); margin-bottom:26px; }
.chip-row { display:flex; flex-wrap:wrap; gap:14px; }
.chip {
  border:2px solid #fff; color:#fff; text-decoration:none; font-weight:700; font-size:15.5px;
  padding:9px 26px; border-radius:999px; transition:background .15s ease, color .15s ease;
}
.chip:hover { background:#fff; color:var(--blue); }

/* ---------- media split (what's going on) ---------- */
.split { display:grid; grid-template-columns:2fr 1fr; align-items:center; }
.split-img img { width:100%; height:100%; object-fit:cover; max-height:520px; }
.split-body { padding:40px 20px 40px 48px; }
.split-body h2 { font-size:22px; }
.split-body p { font-size:16px; padding-right:10%; }

/* ---------- explore tiles ---------- */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; }
.tile { text-decoration:none; display:block; }
.tile img { width:100%; height:220px; object-fit:cover; }
.tile-label { display:block; margin-top:12px; font-size:19px; font-weight:700; color:var(--accent); }
.tile:hover .tile-label { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }

/* ---------- feature panels on blue band ---------- */
.panel { background:#fff; color:var(--ink); padding:44px; margin-bottom:44px; }
.panel:last-child { margin-bottom:0; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.panel h2, .band-blue .panel h2, .section.band-blue .panel h2 { color:var(--black); font-size:clamp(24px,2.6vw,32px); }
.panel p { color:var(--ink); }
.panel img { width:100%; max-height:400px; object-fit:cover; }
.panel.reverse .panel-media { order:-1; }

/* ---------- milestone / generic cards (flat text blocks) ---------- */
.cards { display:grid; gap:40px 28px; }
.cards-2 { grid-template-columns:repeat(2,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.card { display:flex; flex-direction:column; align-items:flex-start; }
.card img { width:100%; height:190px; object-fit:cover; margin-bottom:16px; }
.card h3 { color:var(--accent); font-size:18px; margin-bottom:8px; }
.card p { font-size:15.5px; color:var(--gray); }
.card .btn { margin-top:auto; font-size:14.5px; padding:8px 24px; }
.card p + .btn { margin-top:14px; }
.band-blue .card h3, .band-deep .card h3 { color:var(--sky); }
.band-blue .card p, .band-deep .card p { color:#C9D6E2; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.stat b { display:block; font-size:clamp(36px,4vw,54px); font-weight:900; color:#fff; line-height:1; }
.stat span { display:block; margin-top:8px; font-size:15px; color:#AFC3D4; }

/* ---------- numbered steps ---------- */
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step::before {
  counter-increment:step; content:counter(step) ".";
  font-size:38px; font-weight:900; color:var(--sky); display:block; margin-bottom:4px; line-height:1;
}
.step h3 { font-size:18px; color:#fff; }
.step p { font-size:15.5px; color:#C9D6E2; }
.band-gray .step h3, .band-white .step h3 { color:var(--blue); }
.band-gray .step p, .band-white .step p { color:#4A5560; }

/* ---------- CTA band ---------- */
.cta-band .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.cta-band h2 { margin:0; }
.cta-band p { margin:6px 0 0; }

/* ---------- footer ---------- */
.site-footer { background:var(--header); color:#C7D3DF; font-size:15px; }
.site-footer a { color:#E4EAF0; text-decoration:none; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-main { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr; gap:40px; padding-block:56px 40px; }
.footer-brand img { height:72px; margin-bottom:20px; }
.footer-brand p { font-size:15px; color:#C7D3DF; }
.footer-col h4 {
  color:#fff; font-size:16px; font-weight:700; margin-bottom:14px;
}
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin-bottom:9px; }
.footer-contact {
  border-top:1px solid rgba(255,255,255,.15); padding-block:26px;
  display:flex; flex-wrap:wrap; gap:48px; font-size:14px;
}
.footer-legal {
  border-top:1px solid rgba(255,255,255,.15); padding-block:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:13.5px; color:#9DB4C9;
}
.footer-legal a { color:#9DB4C9; margin-left:22px; }

/* ---------- misc ---------- */
.anchor-offset { scroll-margin-top:110px; }
::selection { background:var(--sky); color:var(--blue); }

/* ---------- responsive ---------- */
@media (max-width:1020px) {
  .hero-home h1 { max-width:100%; }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .news-card { flex-basis:calc((100% - 28px) / 2); }
  .news-grid { grid-template-columns:repeat(2,1fr); }
  .tiles { grid-template-columns:repeat(2,1fr); }
  .footer-main { grid-template-columns:1fr 1fr; }
  .slide { grid-template-columns:1fr; }
  .slide-img { max-height:320px; }
  .slide-box { padding-bottom:110px; }
  .split { grid-template-columns:1fr; }
  .split-body { padding:36px 20px; }
  .search-box { display:none; }
}
@media (max-width:760px) {
  .nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--header); padding:8px 0 16px; box-shadow:0 12px 24px rgba(0,0,0,.35);
    max-height:calc(100vh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .nav.open { display:flex; }
  a.nav-link { padding:13px 24px; }
  .dropdown {
    position:static; opacity:1; visibility:visible; box-shadow:none; border-top:0;
    background:transparent; padding:0 0 6px;
  }
  .dropdown a { color:#C7D3DF; padding:8px 42px; }
  .dropdown a:hover { color:#fff; }
  .nav-toggle { display:block; }
  .cards-2, .cards-3, .cards-4 { grid-template-columns:1fr; }
  .news-card { flex-basis:100%; }
  .news-grid { grid-template-columns:1fr; }
  .tiles { grid-template-columns:1fr; }
  .panel-grid { grid-template-columns:1fr; }
  .panel.reverse .panel-media { order:0; }
  .steps { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr; gap:32px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- publication list rows ---------- */
.pub-list { border-top:1px solid var(--gray-100); margin-top:10px; }
.pub-item {
  display:flex; justify-content:space-between; align-items:baseline; gap:28px;
  padding:18px 2px; border-bottom:1px solid var(--gray-100);
}
.pub-item h3 { font-size:16.5px; margin:0; font-weight:700; max-width:78ch; }
.pub-item h3 a { color:var(--ink); text-decoration:none; }
.pub-item h3 a:hover { color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.pub-item p { font-size:14.5px; color:var(--muted); margin:6px 0 0; }
.pub-date { white-space:nowrap; color:var(--muted); font-size:14.5px; }

/* ---------- timeline cards ---------- */
.year { font-size:30px; font-weight:900; color:var(--accent); margin-bottom:6px; }

/* ---------- official-website masthead ---------- */
.govbar { background:#151515; color:#DCDCDC; font-size:13.5px; }
.govbar .container { display:flex; align-items:center; gap:9px; min-height:34px; flex-wrap:wrap; }
.govbar .gov-lion { flex:0 0 auto; display:flex; }
.gov-toggle {
  background:none; border:0; padding:2px 2px; cursor:pointer; font:inherit;
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.gov-toggle .lbl { text-decoration:underline; text-underline-offset:2px; }
.gov-links { margin-left:auto; }
.gov-links a { color:#DCDCDC; text-decoration:none; margin-left:18px; }
.gov-links a:hover { color:#fff; text-decoration:underline; }
.gov-toggle .chev { display:inline-block; transition:transform .2s ease; font-size:10px; }
.govbar.open .gov-toggle .chev { transform:rotate(180deg); }
.gov-panel { display:none; background:#F0F1F2; }
.govbar.open + .gov-panel { display:block; }
.gov-panel .container {
  display:grid; grid-template-columns:1fr 1fr; gap:26px 60px; padding-block:22px 26px;
}
.gov-item { display:flex; gap:14px; font-size:14.5px; color:#3D4348; }
.gov-item svg { flex:0 0 22px; margin-top:2px; }
.gov-item strong { display:block; color:#1F2933; font-size:15.5px; margin-bottom:4px; }
.gov-item p { margin:0; max-width:52ch; }
.gov-item a { color:#2278B5; font-weight:600; }
@media (max-width:760px) { .gov-panel .container { grid-template-columns:1fr; gap:18px; } }

/* ---------- explore: asymmetric tile grid, labels inside images ---------- */
.explore { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
.explore h2 { margin-top:8px; }
.ex-tiles { display:grid; grid-template-columns:repeat(12,1fr); gap:26px; }
.ex-tile { position:relative; display:block; overflow:hidden; }
.ex-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.ex-tile:hover img { transform:scale(1.04); }
.ex-tile .ex-label {
  position:absolute; left:0; right:0; bottom:0; padding:46px 22px 18px;
  background:linear-gradient(transparent, rgba(8,16,26,.72));
  color:#fff; font-weight:700; font-size:21px; line-height:1.25;
}
.ex-w  { grid-column:span 12; height:340px; }
.ex-m1 { grid-column:span 6;  height:330px; }
.ex-m2 { grid-column:span 6;  height:330px; }
.ex-s  { grid-column:span 4;  height:215px; }
.ex-s .ex-label { font-size:17px; padding:36px 16px 14px; }
@media (max-width:1020px) {
  .explore { grid-template-columns:1fr; }
  .ex-m1, .ex-m2 { grid-column:span 6; }
  .ex-s { grid-column:span 6; }
}
@media (max-width:760px) {
  .ex-w, .ex-m1, .ex-m2, .ex-s { grid-column:span 12; height:240px; }
}

/* ---------- mission page ( our-mission format) ---------- */
.hero-mission { position:relative; color:#fff; background:var(--header); display:flex; align-items:center; min-height:480px; overflow:hidden; }
.hero-mission .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-mission::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,20,32,.88) 0%, rgba(10,20,32,.55) 50%, rgba(10,20,32,.18) 100%); }
.hero-mission .container { position:relative; z-index:2; padding-block:70px; }
.hero-mission h1 { font-size:clamp(54px,7.6vw,92px); font-weight:900; margin:0 0 22px; }
.hero-mission .motto { font-size:19px; font-weight:700; color:#E4EAF0; }

.mission-feature { position:relative; color:#fff; overflow:hidden; background:var(--header); }
.mission-feature .mf-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.mission-feature .container { position:relative; z-index:2; padding-block:72px; }
.mission-feature h2 { font-size:clamp(38px,5vw,62px); font-weight:900; color:#fff; margin:0 0 40px; }
.mf-body { max-width:560px; margin-left:auto; font-size:17.5px; }
.mf-body ul { padding-left:1.2em; }
.mf-body li { margin-bottom:10px; }

.goals { position:relative; color:#fff; overflow:hidden; background:var(--blue); }
.goals .g-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; }
.goals .container { position:relative; z-index:2; padding-block:72px; }
.goals h2 { font-size:clamp(38px,5vw,62px); font-weight:900; color:#fff; }
.goal-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:34px 0 10px; }
.goal-cols h3 { color:#fff; font-size:19px; }
.goals h4 { color:#fff; font-size:26px; font-weight:700; margin:28px 0 12px; }
.goals ul { padding-left:1.3em; }
.goals li { margin-bottom:8px; color:#E4EAF0; }
.cta-solid-row { text-align:center; margin-top:44px; }
.cta-solid {
  display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:16.5px;
  padding:14px 30px; border-radius:8px; border:2px solid #fff; text-decoration:none;
}
.cta-solid:hover { background:#1B639A; }
@media (max-width:900px) { .goal-cols { grid-template-columns:1fr 1fr; } .mf-body { max-width:100%; } }

/* ---------- governance article ( our-governance format) ---------- */
.article { max-width:800px; }
.article > p { font-size:17.5px; }
.article h2 { font-size:clamp(26px,3vw,34px); color:var(--black); margin:52px 0 18px; }
.fig { margin:22px 0 6px; }
.fig img { width:100%; max-height:470px; object-fit:cover; display:block; }
.figcap { font-size:13px; color:var(--muted); font-style:italic; margin:8px 0 18px; }
.org h3 { font-size:20px; color:var(--black); margin:26px 0 2px; }
.org h3.role-group { font-size:26px; margin-top:44px; color:var(--black); }
.org p { color:var(--gray); margin:0; font-size:16.5px; }

/* ---------- language selector ---------- */
.lang { position:relative; margin-left:auto; }
.lang-toggle {
  background:none; border:0; cursor:pointer; font:inherit; color:#DCDCDC;
  display:inline-flex; align-items:center; gap:6px; padding:4px 2px;
}
.lang-toggle:hover { color:#fff; }
.lang-toggle .chev { font-size:9px; transition:transform .2s ease; }
.lang.open .lang-toggle .chev { transform:rotate(180deg); }
.lang-menu {
  position:absolute; right:0; top:100%; min-width:150px; z-index:1200;
  background:#fff; border-top:3px solid var(--sky); box-shadow:0 12px 24px rgba(0,0,0,.28);
  padding:8px 0; display:none;
}
.lang.open .lang-menu { display:block; }
.lang-menu a { display:block; padding:8px 18px; color:var(--gray); text-decoration:none; font-size:14.5px; }
.lang-menu a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.lang-menu a.cur { font-weight:700; color:var(--black); }

/* ---- Library (Dag Hammarskjöld Library format) ---- */
.lib-brand { background:#fff; border-bottom:1px solid var(--gray-100); }
.lib-brand .container { display:flex; align-items:center; gap:22px; padding-block:26px; }
.lib-brand img { height:56px; width:auto; }
.lib-brand .lb-sep { width:1px; height:52px; background:#C9CFD6; }
.lib-brand h1 { font-size:clamp(24px,2.6vw,32px); font-weight:900; color:#333; margin:0; letter-spacing:.2px; }
.lib-brand p { margin:4px 0 0; color:var(--muted); font-size:14px; }

.lib-search { background:#F0F1F2; padding-block:30px; }
.lib-search .container { display:flex; align-items:center; gap:18px; }
.lib-search form { display:flex; flex:1; background:#fff; border:1px solid #C9CFD6; }
.lib-search input { flex:1; border:0; padding:16px 18px; font-size:17px; font-family:inherit; color:var(--ink); outline:none; }
.lib-search .lib-go { background:#fff; border:0; border-left:1px solid #E3E6E9; padding:0 22px; cursor:pointer; display:flex; align-items:center; }
.lib-ask { position:relative; background:var(--accent); color:#fff; font-weight:900; text-decoration:none; text-align:center; line-height:1.15; padding:10px 18px 12px; border-radius:10px; border:2px solid #17557F; box-shadow:0 2px 0 #17557F; }
.lib-ask small { display:block; font-weight:700; font-size:12px; }
.lib-ask::after { content:""; position:absolute; left:16px; bottom:-9px; border:9px solid transparent; border-top-color:var(--accent); border-bottom:0; border-left:0; }
.lib-ask:hover { background:#17557F; }

.lib-h2 { font-size:clamp(24px,2.6vw,30px); font-weight:900; color:#151515; margin-bottom:8px; }
.lib-h2::after { content:""; display:block; width:150px; height:4px; background:var(--sky); margin-top:12px; }
.lib-sec { padding-block:52px; }

.lib-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:34px; }
.lib-tile { display:block; text-decoration:none; }
.lib-tile img { width:100%; height:170px; object-fit:cover; display:block; }
.lib-tile h3 { font-size:19px; font-weight:900; color:#151515; margin:16px 0 0; }
.lib-tile .lt-bar { width:56px; height:3px; background:var(--sky); margin-top:10px; }
.lib-tile p { color:var(--gray); font-size:15px; line-height:1.55; margin-top:12px; }
.lib-tile:hover h3 { color:var(--accent); }

.lib-more { display:block; width:max-content; margin:38px auto 0; border:1px solid var(--accent); color:var(--accent); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px; padding:12px 26px; text-decoration:none; }
.lib-more:hover { background:var(--accent); color:#fff; }

.lib-split { display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; margin-top:34px; }
.lib-picks { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pick { display:block; text-decoration:none; border:1px solid var(--gray-100); background:#fff; }
.pick img { width:100%; height:190px; object-fit:cover; display:block; }
.pick h4 { font-size:14.5px; font-weight:700; color:var(--ink); padding:12px 12px 4px; margin:0; line-height:1.4; }
.pick span { display:block; color:var(--muted); font-size:12.5px; padding:0 12px 14px; }
.pick:hover h4 { color:var(--accent); }

.lib-events { border:2px solid var(--accent); background:#fff; }
.lib-events h3 { background:var(--accent); color:#fff; font-size:16px; font-weight:900; margin:0; padding:12px 16px; }
.lib-events ul { list-style:none; margin:0; padding:6px 0; }
.lib-events li { padding:12px 16px; border-bottom:1px solid var(--gray-100); }
.lib-events li:last-child { border-bottom:0; }
.lib-events a { color:var(--accent); font-weight:700; text-decoration:none; font-size:15.5px; }
.lib-events a:hover { text-decoration:underline; }
.lib-events small { display:block; color:var(--muted); margin-top:3px; font-size:13px; }
.lib-stat { background:var(--accent); color:#fff; text-align:center; padding:34px 24px; margin-top:26px; }
.lib-stat .n { font-size:clamp(26px,2.6vw,34px); font-weight:900; line-height:1.2; }
.lib-stat p { color:#EAF4FB; margin-top:8px; font-size:14.5px; }

@media (max-width:1020px) {
  .lib-tiles, .lib-picks { grid-template-columns:1fr 1fr; }
  .lib-split { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .lib-search .container { flex-direction:column; align-items:stretch; }
  .lib-tiles, .lib-picks { grid-template-columns:1fr; }
  .lib-brand .container { gap:14px; }
}

/* ---- Secretariat directory (UN about-us/secretariat format) ---- */
.dir-group { margin-top:44px; }
.dir-group > h3 { font-size:22px; font-weight:900; color:var(--black); border-bottom:3px solid var(--sky); padding-bottom:10px; }
.dir-group h4 { font-size:15px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-top:26px; }
.dir-list { list-style:none; margin:14px 0 0; padding:0; columns:2; column-gap:48px; }
.dir-list.one { columns:1; }
.dir-list li { break-inside:avoid; border-bottom:1px solid var(--gray-100); }
.dir-list a { display:block; padding:11px 2px; color:var(--accent); font-weight:700; text-decoration:none; font-size:16.5px; }
.dir-list a:hover { text-decoration:underline; }
.fn-list { list-style:none; margin:22px 0 0; padding:0; max-width:820px; }
.fn-list li { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--gray-100); font-size:17px; color:var(--gray); }
.fn-list li::before { content:"—"; color:var(--sky); font-weight:900; }
.crumb { display:inline-block; margin-bottom:18px; color:var(--accent); font-weight:700; text-decoration:none; font-size:14.5px; }
.crumb:hover { text-decoration:underline; }
@media (max-width:760px) { .dir-list { columns:1; } }

/* ---- newsroom category filter ---- */
.news-filter { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.nf-chip {
  border:2px solid var(--accent); background:#fff; color:var(--accent); font-family:inherit;
  font-weight:700; font-size:15px; padding:8px 24px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nf-chip:hover { background:var(--accent); color:#fff; }
.nf-chip.active { background:var(--accent); color:#fff; }
.news-cat { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-top:12px; }
.news-card .news-cat + h3 { margin-top:6px; }

/* ---- programme groups ( experiments format) ---- */
.lib-tiles.cols-3 { grid-template-columns:repeat(3,1fr); }
.prog-group { margin-top:48px; }
.prog-group:first-child { margin-top:0; }
@media (max-width:1020px) { .lib-tiles.cols-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .lib-tiles.cols-3 { grid-template-columns:1fr; } }

/* programme tile logos */
.lib-tile img.logo { object-fit:contain; background:#fff; padding:20px 24px; border:1px solid var(--gray-100); }

/* trial-phase banner */
.trialbar { background:#232323; color:#DCDCDC; font-size:13.5px; border-top:1px solid #2E2E2E; }
.trialbar .container { display:flex; align-items:center; gap:9px; min-height:34px; flex-wrap:wrap; }
.trial-toggle {
  background:none; border:0; padding:2px 2px; cursor:pointer; font:inherit;
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.trial-toggle .lbl { text-decoration:underline; text-underline-offset:2px; }
.trial-toggle .chev { font-size:9px; transition:transform .15s; }
.trialbar.open .trial-toggle .chev { transform:rotate(180deg); }
.trial-panel { display:none; background:#F0F1F2; }
.trialbar.open + .trial-panel { display:block; }
.trial-panel .container {
  display:grid; grid-template-columns:1fr 1fr; gap:26px 60px; padding-block:22px 26px;
}
@media (max-width:760px) { .trial-panel .container { grid-template-columns:1fr; } }