/* ════════════════════════════════════════════════════════════════════════
   NWCCTF — Public site stylesheet ("Sentinel")
   Requires tokens.css loaded first. Flat solids only — NO gradients.
   Sections: 1 base · 2 type/widgets · 3 ribbon/header/nav · 4 hero
   5 home sections · 6 inner-page scaffolding · 7 cards · 8 timeline
   9 forms · 10 report/tracking · 11 tables/stats · 12 gallery/events
   13 article · 14 misc widgets · 15 footer · 16 utilities/responsive
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body); color:var(--ink-900); background:var(--canvas);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }
.container { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
main section { padding:96px 0; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--green-950); color:#fff; padding:10px 18px; z-index:200; }
.skip-link:focus { left:0; }

/* ── 2. Typography & core widgets ────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--green-900); line-height:1.15; }
h1{font-size:44px} h2{font-size:32px} h3{font-size:24px} h4{font-size:18px}
.kicker { display:block; font:700 13px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); margin-bottom:12px; }
.rule { width:40px; height:3px; border:0; margin:16px 0 8px; background:var(--flag-black); box-shadow:0 3px 0 var(--flag-yellow), 0 6px 0 var(--flag-red); }
.section-head { max-width:640px; margin-bottom:40px; }
.section-head h2 { font-size:32px; }
.section-head p { color:var(--ink-600); margin-top:14px; }
.section-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head--center .rule { margin-left:auto; margin-right:auto; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 26px;
  font:600 15px/1.2 var(--font-body); border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease; }
.btn--primary { background:var(--green-800); color:#fff; }
.btn--primary:hover { background:var(--green-700); color:#fff; }
.btn--accent { background:var(--gold-500); color:var(--green-950); }
.btn--accent:hover { background:var(--gold-400); }
.btn--ghost { background:transparent; color:var(--green-800); border-color:var(--green-800); }
.btn--ghost:hover { background:var(--green-050); }
.btn--ghost-inverse { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost-inverse:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn--dark { background:var(--green-950); color:#fff; }
.btn--dark:hover { background:var(--green-800); }
.btn--sm { min-height:38px; padding:0 16px; font-size:13.5px; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

.chip { display:inline-block; font:700 11px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--radius); background:var(--green-100); color:var(--green-800); }
.chip--gold { background:var(--gold-100); color:var(--gold-600); }
.badge { display:inline-block; font:700 12px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-radius:var(--radius); }
.badge--received      { background:var(--info-soft);   color:var(--green-800); }
.badge--under_review  { background:var(--gold-100);    color:var(--gold-600); }
.badge--forwarded     { background:var(--warn-soft);   color:var(--warn); }
.badge--closed        { background:var(--ok-soft);     color:var(--ok); }
.badge--dismissed     { background:var(--danger-soft); color:var(--danger); }
.badge--upcoming      { background:var(--green-100);   color:var(--green-800); }
.badge--past          { background:var(--canvas);      color:var(--ink-400); }

.meta { font-size:13px; color:var(--ink-400); }
.arrow-link { font-weight:600; color:var(--green-800); border-bottom:2px solid var(--gold-500); padding-bottom:2px; transition:color .18s ease; }
.arrow-link:hover { color:var(--green-600); }
.mono { font-family:var(--font-mono); }

/* ── 3. Ribbon, utility strip, header, nav ───────────────────────────── */
.ribbon { background:var(--gold-500); color:var(--green-950); }
.ribbon .container { display:flex; align-items:center; justify-content:center; gap:14px; min-height:40px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; }
.ribbon strong { font-weight:700; font-size:14px; }
.ribbon a.report { font:700 13px/1 var(--font-body); text-transform:uppercase; letter-spacing:.06em; background:var(--green-950); color:#fff; padding:7px 12px; border-radius:var(--radius); }
.ribbon a.report:hover { background:var(--green-800); }
.ribbon button { margin-left:6px; background:none; border:0; font-size:16px; cursor:pointer; color:var(--green-950); opacity:.7; }
.ribbon button:hover { opacity:1; }

.utility { background:var(--green-950); color:#fff; font-size:13px; }
.utility .container { display:flex; justify-content:space-between; align-items:center; min-height:36px; }
.utility a { opacity:.85; } .utility a:hover { opacity:1; color:var(--gold-400); }
.utility .left, .utility .right { display:flex; gap:20px; align-items:center; }

.header { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header .container { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:24px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand .mark { width:48px; height:48px; background:var(--green-800); color:#fff; display:flex; align-items:center; justify-content:center;
  font:700 11px/1.1 var(--font-mono); text-align:center; border-radius:var(--radius); letter-spacing:.02em; flex:none; }
.brand img.mark-img { width:48px; height:48px; object-fit:contain; border-radius:var(--radius); }
.brand .name { line-height:1.2; }
.brand .name b { display:block; font:700 15px/1.12 var(--font-body); color:var(--green-900); }
.brand .name small { font-size:11px; color:var(--ink-400); letter-spacing:.03em; }

.nav { display:flex; align-items:center; gap:6px; }
.nav > a { font:600 14.5px/1 var(--font-body); color:var(--ink-900); padding:12px 13px; border-radius:var(--radius); position:relative; }
.nav > a:hover { color:var(--green-800); background:var(--green-050); }
.nav > a.active { color:var(--green-800); }
.nav > a.active::after { content:""; position:absolute; left:13px; right:13px; bottom:4px; height:3px; background:var(--gold-500); }
.nav .btn { margin-left:12px; }
/* Bold, borderless, animated hamburger → X toggle (no box, no border) */
.burger { display:none; position:relative; width:46px; height:46px; background:none; border:0; padding:0; cursor:pointer; color:var(--green-800); flex:none; }
.burger span { position:absolute; left:8px; right:8px; height:3.5px; border-radius:3px; background:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s cubic-bezier(.4,0,.2,1); }
.burger span:nth-child(1) { top:15px; }
.burger span:nth-child(2) { top:22px; }
.burger span:nth-child(3) { top:29px; }
.burger.is-open span:nth-child(1) { top:22px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; transform:scaleX(.3); }
.burger.is-open span:nth-child(3) { top:22px; transform:rotate(-45deg); }
.burger:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; border-radius:var(--radius); }
.scrim { display:none; position:fixed; inset:0; background:rgba(17,22,20,.45); z-index:65; }
/* When the drawer is open, lift the header (which contains the drawer) above the
   scrim so the menu is never covered by the overlay. */
body.nav-locked .header { z-index:80; }

/* Drawer header + close (mobile only; hidden on desktop) */
.nav-head { display:none; }
.nav-close { position:relative; width:40px; height:40px; background:none; border:0; cursor:pointer; flex:none; }
.nav-close span { position:absolute; left:9px; right:9px; top:50%; height:3px; border-radius:3px; background:#fff; }
.nav-close span:nth-child(1) { transform:translateY(-50%) rotate(45deg); }
.nav-close span:nth-child(2) { transform:translateY(-50%) rotate(-45deg); }
.nav-close:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }

/* ── 4. Heroes ───────────────────────────────────────────────────────── */
.hero { position:relative; background:var(--green-900); color:#fff; overflow:hidden; padding:0; }
.hero .bg { position:absolute; inset:0; }
.hero .bg img { width:100%; height:100%; object-fit:cover; }
.hero .overlay { position:absolute; inset:0; background:var(--green-900); opacity:.68; }
.hero .container { position:relative; z-index:2; padding-top:104px; padding-bottom:118px; }
.hero .kicker { color:var(--gold-400); }
.hero h1 { color:#fff; font-size:52px; max-width:16ch; margin-bottom:20px; }
.hero p { max-width:52ch; font-size:18px; color:rgba(255,255,255,.85); margin-bottom:34px; }
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero .dots { position:absolute; bottom:26px; left:var(--gutter); display:flex; gap:8px; z-index:3; }
.hero .dots button { width:26px; height:3px; border:0; padding:0; background:rgba(255,255,255,.35); cursor:pointer; }
.hero .dots button.on { background:var(--gold-500); }
.hero .slide { display:none; } .hero .slide.on { display:block; }

.page-hero { background:var(--green-800); color:#fff; padding:0; }
.page-hero .container { padding-top:56px; padding-bottom:56px; }
.page-hero h1 { color:#fff; font-size:40px; margin-top:10px; }
.page-hero .crumbs { font-size:13px; color:var(--gold-400); font-weight:600; letter-spacing:.04em; }
.page-hero .crumbs a { color:rgba(255,255,255,.75); }
.page-hero .crumbs a:hover { color:#fff; }
.page-hero .crumbs span::before { content:"›"; margin:0 8px; color:rgba(255,255,255,.45); }
.page-hero p.lede { margin-top:14px; max-width:64ch; color:rgba(255,255,255,.82); font-size:17px; }

/* ── 5. Home sections ────────────────────────────────────────────────── */
.welcome { background:var(--surface); border-bottom:1px solid var(--line); }
.welcome .grid { display:grid; grid-template-columns:380px 1fr; gap:64px; align-items:center; }
.welcome .portrait-wrap { position:relative; }
.welcome .portrait-wrap::after { content:""; position:absolute; left:-14px; bottom:-14px; width:120px; height:120px; background:var(--gold-500); z-index:0; }
.welcome .portrait { aspect-ratio:4/5; border-radius:var(--radius); position:relative; z-index:1; object-fit:cover; width:100%; background:var(--green-050); border:1px solid var(--line); }
.welcome blockquote { font-family:var(--font-display); font-size:23px; font-weight:600; line-height:1.45; color:var(--green-900); margin:6px 0 22px; }
.welcome .who { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; margin-top:6px; }
.welcome .who b { display:block; font-size:15px; color:var(--green-900); }
.welcome .who span { font-size:13px; color:var(--ink-400); }

.pillars { background:var(--green-050); }
.pillars .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; border-top:3px solid var(--green-800); transition:border-color .18s ease; }
.pillar:hover { border-color:var(--green-600); border-top-color:var(--gold-500); }
.pillar .n { font:700 13px/1 var(--font-mono); color:var(--gold-600); }
.pillar h3 { font-size:21px; margin:14px 0 10px; }
.pillar p { font-size:15px; color:var(--ink-600); }

.stats { background:var(--green-900); color:#fff; }
.stats .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat { border-top:3px solid var(--gold-500); padding-top:22px; }
.stat .num { font:700 56px/1 var(--font-mono); color:#fff; }
.stat .num em { font-style:normal; color:var(--gold-400); font-size:.6em; }
.stat .lbl { font:700 12.5px/1.4 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); margin-top:12px; }
.stat .src { font-size:12.5px; color:rgba(255,255,255,.55); margin-top:6px; }
.stats .foot { margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.65); }
.stats .foot a { color:var(--gold-400); font-weight:600; }
.stats .section-head h2 { color:#fff; }

.split-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.split-top .section-head { margin-bottom:0; }

.wall .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:16px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 12px 18px; text-align:center; transition:border-color .18s ease; display:block; }
.tile:hover { border-color:var(--green-600); }
.tile .crest { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--green-050); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font:700 12px/1 var(--font-mono); color:var(--green-700); overflow:hidden; }
.tile .crest img { width:100%; height:100%; object-fit:contain; }
.tile b { display:block; font:700 12.5px/1.3 var(--font-body); color:var(--green-900); }
.tile small { font-size:11px; color:var(--ink-400); }

.cta-report { background:var(--surface); border-top:1px solid var(--line); }
.cta-report .grid { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:stretch; }
.cta-report .panel { background:var(--gold-500); border-radius:var(--radius); padding:44px 42px; color:var(--green-950); }
.cta-report .panel .kicker { color:var(--green-950); opacity:.75; }
.cta-report .panel h2 { color:var(--green-950); font-size:30px; max-width:18ch; }
.cta-report .panel p { margin:14px 0 26px; font-size:15.5px; max-width:46ch; }
.cta-report .hotline { font:700 30px/1.1 var(--font-mono); margin-bottom:22px; }
.cta-report .hotline small { display:block; font:700 12px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; opacity:.75; }
.cta-report .actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta-report .btn--outline { background:transparent; border-color:var(--green-950); color:var(--green-950); }
.cta-report .btn--outline:hover { background:rgba(11,31,22,.08); }
.quick { background:var(--green-800); border-radius:var(--radius); padding:44px 42px; color:#fff; display:flex; flex-direction:column; }
.quick h3 { color:#fff; font-size:22px; margin-bottom:8px; }
.quick p { font-size:14px; color:rgba(255,255,255,.7); margin-bottom:22px; }
.quick li a { display:flex; justify-content:space-between; align-items:center; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.14); font-weight:600; font-size:15px; color:#fff; }
.quick li a:hover { color:var(--gold-400); }
.quick li a::after { content:"→"; color:var(--gold-500); }

.newsletter { background:var(--green-050); border-top:1px solid var(--line); padding:56px 0; }
.newsletter .container { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.newsletter h3 { font-size:24px; }
.newsletter p { color:var(--ink-600); font-size:14.5px; margin-top:6px; }
.newsletter form { display:flex; gap:10px; flex-wrap:wrap; }
.newsletter input { min-height:46px; min-width:280px; padding:0 16px; border:1px solid var(--line); border-radius:var(--radius); font:400 15px var(--font-body); background:var(--surface); color:var(--ink-900); }
.newsletter input:focus { border-color:var(--green-600); outline:2px solid var(--gold-500); outline-offset:1px; }

/* ── 6. Inner-page scaffolding ───────────────────────────────────────── */
.page-body { padding:72px 0; }
.with-subnav { display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
.subnav { position:sticky; top:110px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.subnav h4 { font:700 12px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.subnav a { display:block; padding:13px 18px; font:600 14.5px/1.3 var(--font-body); color:var(--ink-600); border-bottom:1px solid var(--line); border-left:3px solid transparent; }
.subnav a:last-child { border-bottom:0; }
.subnav a:hover { color:var(--green-800); background:var(--green-050); }
.subnav a.active { color:var(--green-800); border-left-color:var(--gold-500); background:var(--green-050); }

/* ── 7. Cards ────────────────────────────────────────────────────────── */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s ease; }
.card:hover { border-color:var(--green-600); }
.card .thumb { aspect-ratio:4/3; border-bottom:1px solid var(--line); background:var(--green-050); overflow:hidden; }
.card .thumb img { width:100%; height:100%; object-fit:cover; }
.card .body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card h3 { font-size:19px; line-height:1.3; }
.card h3 a:hover { color:var(--green-700); }
.card p { font-size:14.5px; color:var(--ink-600); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.card .foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }

.op { display:grid; grid-template-columns:320px 1fr; background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .18s ease; }
.op:hover { border-color:var(--green-600); }
.op .thumb { border-right:1px solid var(--line); min-height:220px; background:var(--green-050); }
.op .thumb img { width:100%; height:100%; object-fit:cover; }
.op .body { padding:28px 30px; display:flex; flex-direction:column; gap:12px; }
.op h3 { font-size:22px; }
.op .outcome { display:flex; gap:10px; align-items:flex-start; background:var(--green-100); border-left:3px solid var(--green-800); padding:12px 14px; font-size:14px; color:var(--green-900); border-radius:var(--radius); }
.op .outcome b { font-family:var(--font-mono); font-weight:700; }
.op-list { display:grid; gap:24px; }

.pub-card .body { gap:8px; }
.pub-card .thumb { aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; }
.pub-card .filetype { font:700 13px/1 var(--font-mono); color:var(--green-700); background:var(--surface); border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius); }
.pub-card .meta-row { display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--ink-400); }

.event-card { display:grid; grid-template-columns:96px 1fr; }
.event-card .date-block { background:var(--green-800); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 8px; }
.event-card .date-block b { font:700 34px/1 var(--font-mono); }
.event-card .date-block span { font:700 12px/1 var(--font-body); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-400); margin-top:6px; }
.event-card .body { padding:20px 22px; }

/* ── 8. Timeline (success stories) ───────────────────────────────────── */
.timeline { position:relative; padding-left:34px; }
.timeline::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--line); }
.t-item { position:relative; padding:0 0 44px; }
.t-item::before { content:""; position:absolute; left:-30px; top:8px; width:13px; height:13px; background:var(--gold-500); border:2px solid var(--surface); outline:1px solid var(--line); border-radius:50%; }
.t-item .date-pill { display:inline-block; font:700 12px/1 var(--font-mono); background:var(--green-800); color:#fff; padding:7px 12px; border-radius:var(--radius); margin-bottom:12px; }
.t-item h3 { font-size:21px; margin-bottom:8px; }
.t-item h3 a:hover { color:var(--green-700); }
.t-item p { color:var(--ink-600); font-size:15px; max-width:70ch; }
.t-item .t-meta { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.t-item .outcome-line { font:600 14px/1.5 var(--font-body); color:var(--green-900); background:var(--green-050); border-left:3px solid var(--green-800); padding:10px 14px; margin-top:12px; max-width:70ch; border-radius:var(--radius); }

/* ── 9. Forms ────────────────────────────────────────────────────────── */
.form-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:40px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-grid .full { grid-column:1 / -1; }
.field label { display:block; font:600 13.5px/1 var(--font-body); color:var(--ink-900); margin-bottom:8px; }
.field label .req { color:var(--danger); }
.field .hint { font-size:12.5px; color:var(--ink-400); margin-top:6px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date],
.field select, .field textarea {
  width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font:400 15px/1.5 var(--font-body); background:var(--surface); color:var(--ink-900); }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--green-600); outline:2px solid var(--gold-500); outline-offset:1px; }
.field .error { color:var(--danger); font-size:13px; margin-top:6px; font-weight:600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--danger); }
.checkline { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-600); }
.checkline input { width:18px; height:18px; margin-top:3px; accent-color:var(--green-800); }
.upload-box { border:1px dashed var(--line); border-radius:var(--radius); background:var(--canvas); padding:26px; text-align:center; color:var(--ink-600); font-size:14px; }
.upload-box:hover { border-color:var(--green-600); }
.upload-box input { display:none; }
.upload-box .files { margin-top:12px; font:500 13px var(--font-mono); color:var(--green-800); }

.alert { border-radius:var(--radius); padding:14px 18px; font-size:14.5px; border:1px solid; margin-bottom:20px; }
.alert--ok     { background:var(--ok-soft);     color:var(--ok);     border-color:var(--ok); }
.alert--danger { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.alert--warn   { background:var(--warn-soft);   color:var(--warn);   border-color:var(--warn); }
.alert--info   { background:var(--info-soft);   color:var(--green-800); border-color:var(--green-600); }

.safety-note { display:flex; gap:14px; background:var(--gold-100); border:1px solid var(--gold-500); border-radius:var(--radius); padding:16px 18px; font-size:14.5px; color:var(--green-950); }
.safety-note b { display:block; margin-bottom:2px; }

/* ── 10. Report tracking ─────────────────────────────────────────────── */
.code-panel { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:52px 30px; }
.code-panel .code { font:700 40px/1.1 var(--font-mono); letter-spacing:.06em; color:var(--green-800); background:var(--green-050); border:1px dashed var(--green-600); border-radius:var(--radius); display:inline-block; padding:18px 34px; margin:20px 0; }
.code-panel .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.track-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.track-card .row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:18px; }
.track-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:22px; }
.track-steps .step { text-align:center; font:700 11.5px/1.3 var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); padding-top:14px; border-top:3px solid var(--line); }
.track-steps .step.done { color:var(--green-800); border-top-color:var(--green-800); }
.track-steps .step.now { color:var(--gold-600); border-top-color:var(--gold-500); }

/* ── 11. Tables & stat figures ───────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); font-size:14.5px; }
.data-table th { background:var(--green-800); color:#fff; text-align:left; font:700 12.5px/1.3 var(--font-body); letter-spacing:.06em; text-transform:uppercase; padding:13px 16px; }
.data-table td { padding:12px 16px; border-top:1px solid var(--line); }
.data-table tbody tr:nth-child(even) { background:var(--green-050); }
.data-table td.num { font-family:var(--font-mono); text-align:right; font-weight:500; }
.stat-inline { border:1px solid var(--line); background:var(--surface); border-top:3px solid var(--gold-500); border-radius:var(--radius); padding:22px; }
.stat-inline .num { font:700 40px/1 var(--font-mono); color:var(--green-800); }
.stat-inline .lbl { font:700 12px/1.4 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-600); margin-top:10px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.chart-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.chart-box h3 { font-size:18px; margin-bottom:6px; }
.chart-box .meta { margin-bottom:16px; }

/* ── 12. Gallery, events, institutions ───────────────────────────────── */
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.media-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.media-grid figure { position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--green-050); cursor:pointer; }
.media-grid img { width:100%; height:100%; object-fit:cover; }
.media-grid figcaption { position:absolute; left:0; right:0; bottom:0; background:var(--green-950); color:#fff; font-size:12.5px; padding:8px 12px; opacity:0; transition:opacity .18s ease; }
.media-grid figure:hover figcaption { opacity:1; }
.lightbox { display:none; position:fixed; inset:0; z-index:100; background:rgba(11,31,22,.92); align-items:center; justify-content:center; padding:32px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:min(1100px,92vw); max-height:84vh; object-fit:contain; border:1px solid var(--green-700); }
.lightbox .cap { position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#fff; font-size:14px; }
.lightbox .close { position:absolute; top:20px; right:26px; background:none; border:1px solid rgba(255,255,255,.4); color:#fff; width:42px; height:42px; border-radius:var(--radius); font-size:18px; cursor:pointer; }
.video-frame { aspect-ratio:16/9; width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--green-950); }

.inst-head { display:flex; gap:26px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; margin-bottom:32px; flex-wrap:wrap; }
.inst-head .crest { width:96px; height:96px; border-radius:50%; background:var(--green-050); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font:700 18px/1 var(--font-mono); color:var(--green-700); overflow:hidden; flex:none; }
.inst-head .crest img { width:100%; height:100%; object-fit:contain; }
.kv { display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.kv > div { display:grid; grid-template-columns:220px 1fr; border-top:1px solid var(--line); }
.kv > div:first-child { border-top:0; }
.kv dt { background:var(--green-050); font:700 13px/1.5 var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--green-800); padding:16px 18px; }
.kv dd { padding:16px 18px; font-size:15px; color:var(--ink-600); }

/* ── 13. Article / prose ─────────────────────────────────────────────── */
.article { max-width:760px; }
.article .lead-img { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:28px; }
.prose > * + * { margin-top:18px; }
.prose h2 { font-size:26px; margin-top:38px; }
.prose h3 { font-size:20px; margin-top:30px; }
.prose p, .prose li { font-size:16.5px; line-height:1.75; color:var(--ink-900); }
.prose ul { list-style:none; padding-left:0; }
.prose ul li { padding-left:24px; position:relative; margin-top:10px; }
.prose ul li::before { content:""; position:absolute; left:0; top:11px; width:10px; height:3px; background:var(--gold-500); }
.prose ol { counter-reset:item; padding-left:0; }
.prose ol li { counter-increment:item; padding-left:38px; position:relative; margin-top:10px; }
.prose ol li::before { content:counter(item,decimal-leading-zero); position:absolute; left:0; top:0; font:700 14px/1.7 var(--font-mono); color:var(--gold-600); }
.prose blockquote { border-left:3px solid var(--gold-500); background:var(--green-050); padding:18px 22px; font-family:var(--font-display); font-size:19px; color:var(--green-900); border-radius:var(--radius); }
.prose a { color:var(--green-800); font-weight:600; border-bottom:2px solid var(--gold-500); }
.prose img { border:1px solid var(--line); border-radius:var(--radius); }
.article-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:18px 0 30px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.share { display:flex; gap:8px; }
.share a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius); font:700 12px var(--font-mono); color:var(--green-800); }
.share a:hover { border-color:var(--green-600); background:var(--green-050); }

/* ── 14. Misc widgets ────────────────────────────────────────────────── */
.accordion { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.accordion details { border-top:1px solid var(--line); }
.accordion details:first-child { border-top:0; }
.accordion summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; font:600 16px/1.4 var(--font-body); color:var(--green-900); }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:"+"; font:600 22px/1 var(--font-mono); color:var(--gold-600); }
.accordion details[open] summary::after { content:"–"; }
.accordion .acc-body { padding:0 24px 22px; color:var(--ink-600); font-size:15px; }
.pagination { display:flex; gap:6px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.pagination a, .pagination span { min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--radius); font:600 14px var(--font-body); color:var(--ink-600); background:var(--surface); padding:0 12px; }
.pagination a:hover { border-color:var(--green-600); color:var(--green-800); }
.pagination .current { background:var(--green-800); color:#fff; border-color:var(--green-800); }
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.filter-chips a { font:600 13.5px/1 var(--font-body); padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink-600); }
.filter-chips a:hover { border-color:var(--green-600); color:var(--green-800); }
.filter-chips a.on { background:var(--green-800); color:#fff; border-color:var(--green-800); }
.milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.milestones .m { background:var(--surface); padding:26px; border-left:1px solid var(--line); }
.milestones .m:first-child { border-left:0; }
.milestones .m .yr { font:700 22px/1 var(--font-mono); color:var(--gold-600); }
.milestones .m b { display:block; margin:10px 0 6px; color:var(--green-900); }
.milestones .m p { font-size:14px; color:var(--ink-600); }
.glossary dt { font:700 15px/1.4 var(--font-mono); color:var(--green-800); margin-top:18px; }
.glossary dd { color:var(--ink-600); font-size:15px; padding-left:2px; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.contact-card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--green-800); border-radius:var(--radius); padding:26px; }
.contact-card h4 { font-size:17px; margin-bottom:8px; }
.contact-card p, .contact-card a { font-size:14.5px; color:var(--ink-600); }
.contact-card .big { font:700 20px/1.3 var(--font-mono); color:var(--green-800); margin-top:8px; display:block; }
.map-embed { width:100%; height:420px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map-embed iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){ .map-embed { height:320px; } }
.empty-state { text-align:center; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface); padding:64px 24px; color:var(--ink-400); }
.empty-state b { display:block; font:600 17px var(--font-body); color:var(--ink-600); margin-bottom:6px; }

/* ── 15. Footer ──────────────────────────────────────────────────────── */
.footer { background:var(--green-950); color:rgba(255,255,255,.75); font-size:14.5px; }
.footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding:72px 0 56px; }
.footer h4 { color:#fff; font:700 13px/1 var(--font-body); letter-spacing:.13em; text-transform:uppercase; margin-bottom:20px; }
.footer h4::after { content:""; display:block; width:28px; height:2px; background:var(--gold-500); margin-top:10px; }
.footer .about .brand { margin-bottom:18px; }
.footer .about .brand .name b { color:#fff; }
.footer .about .brand .name small { color:rgba(255,255,255,.5); }
.footer li { margin-bottom:11px; }
.footer a:hover { color:var(--gold-400); }
.footer .contact li { display:flex; gap:10px; }
.footer .contact i { font-style:normal; color:var(--gold-500); font-weight:700; }
.footer .hot { margin-top:16px; border:1px solid var(--gold-500); border-radius:var(--radius); padding:14px 16px; }
.footer .hot small { display:block; font:700 11px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400); margin-bottom:6px; }
.footer .hot b { font:700 20px/1 var(--font-mono); color:#fff; }
.partners-strip { border-top:1px solid rgba(255,255,255,.12); padding:26px 0; }
.partners-strip .container { display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between; }
.partners-strip span.lbl { font:700 11px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.partners-strip .logos { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.partners-strip .logos a, .partners-strip .logos i { font:600 12px/1 var(--font-body); font-style:normal; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:9px 14px; }
.partners-strip .logos a:hover { color:#fff; border-color:rgba(255,255,255,.5); }
.legal { border-top:1px solid rgba(255,255,255,.12); padding:20px 0; font-size:13px; color:rgba(255,255,255,.5); }
.legal .container { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ── 16. Utilities & responsive ──────────────────────────────────────── */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.text-center{text-align:center}
.grid-gap{display:grid;gap:24px}

@media (max-width: 1020px) {
  .burger { display:block; }
  .scrim.open { display:block; }
  /* Elegant slide-in drawer */
  .nav { position:fixed; inset:0 0 0 auto; width:min(360px,88vw); background:var(--surface); z-index:70;
    display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; overflow-y:auto;
    transform:translateX(100%); visibility:hidden; box-shadow:-12px 0 44px rgba(3,47,17,.24);
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility .32s; overscroll-behavior:contain; }
  .nav.open { transform:translateX(0); visibility:visible; }
  .nav-head { display:flex; align-items:center; gap:12px; padding:16px 16px 16px 20px; background:var(--green-800);
    color:#fff; position:sticky; top:0; z-index:2; border-bottom:3px solid var(--gold-500); }
  .nav-head img { width:36px; height:36px; object-fit:contain; flex:none; }
  .nav-head b { flex:1; font:700 16px/1 var(--font-body); color:#fff; letter-spacing:.02em; }
  .nav > a { font-size:16px; }
  .nav > a.active::after { display:none; }
  .wall .grid { grid-template-columns:repeat(4,1fr); }
  .footer .cols { grid-template-columns:1fr 1fr; gap:40px; }
  .with-subnav { grid-template-columns:1fr; gap:32px; }
  .subnav { position:static; }
  .media-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px) {
  .welcome .grid { grid-template-columns:1fr; gap:40px; }
  .welcome .portrait-wrap { max-width:320px; }
  .pillars .cards, .cards-3, .cards-2, .album-grid, .contact-cards { grid-template-columns:1fr; }
  .stats .grid, .stat-grid { grid-template-columns:repeat(2,1fr); }
  .stat .num { font-size:42px; }
  .cta-report .grid { grid-template-columns:1fr; }
  .cta-report .panel, .quick { padding:34px 26px; }
  .op { grid-template-columns:1fr; }
  .op .thumb { border-right:0; border-bottom:1px solid var(--line); min-height:180px; }
  .form-grid { grid-template-columns:1fr; }
  .milestones { grid-template-columns:1fr; }
  .milestones .m { border-left:0; border-top:1px solid var(--line); }
  .milestones .m:first-child { border-top:0; }
  .kv > div { grid-template-columns:1fr; }
  .kv dt { padding-bottom:6px; }
  .kv dd { padding-top:6px; }
}
@media (max-width: 760px) {
  main section { padding:56px 0; }
  h1{font-size:32px} h2{font-size:26px} h3{font-size:20px}
  .section-head h2 { font-size:26px; }
  .hero .container { padding-top:64px; padding-bottom:84px; }
  .hero h1 { font-size:34px; }
  .hero p { font-size:16px; }
  .page-hero h1 { font-size:30px; }
  .utility .hide-m { display:none; }
  .track-steps { grid-template-columns:repeat(2,1fr); gap:16px 8px; }
  .media-grid { grid-template-columns:repeat(2,1fr); }
  .newsletter input { min-width:0; flex:1; }
  .event-card { grid-template-columns:76px 1fr; }
}
@media (max-width: 520px) {
  .wall .grid { grid-template-columns:repeat(2,1fr); }
  .stats .grid, .stat-grid { grid-template-columns:1fr 1fr; gap:28px 16px; }
  .footer .cols { grid-template-columns:1fr; padding:56px 0 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   17. v2 — Flag rule · redesigned nav (mega/accordion) · scroll UI
   Appended for Tasks 12–14. Token-pure · 2px radius · flat · no gradients.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Flag rule (black / yellow / red stacked 3px stripes) ────────────── */
.flag-rule { width:40px; height:3px; border:0; margin:16px 0 8px;
  background:var(--flag-black); box-shadow:0 3px 0 var(--flag-yellow), 0 6px 0 var(--flag-red); }
.section-head--center .flag-rule { margin-left:auto; margin-right:auto; }

/* ── Header scrolled + utility auto-hide ────────────────────────────── */
.header .container { transition:min-height .2s ease; }
.header.scrolled { border-bottom:1px solid var(--green-600); box-shadow:var(--shadow-overlay); }
.header.scrolled .container { min-height:60px; }
.utility { overflow:hidden; max-height:64px; transition:max-height .25s ease, opacity .2s ease; }
.utility--hidden { max-height:0; opacity:0; }
body.nav-locked { overflow:hidden; }

/* ── Nav v2 : items, links, caret, mega panel ───────────────────────── */
.nav-item { position:relative; display:flex; }
.nav-link { display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font:600 14.5px/1 var(--font-body); color:var(--ink-900); padding:12px 13px; border-radius:var(--radius);
  transition:color .18s ease, background .18s ease; }
.nav-link:hover { color:var(--green-800); background:var(--green-050); }
.nav-item.active > .nav-link { color:var(--green-800); }
.nav-link:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }
.caret { font-size:11px; line-height:1; transition:transform .18s ease; }
.nav-item.open > .nav-link .caret,
.nav-link[aria-expanded="true"] .caret { transform:rotate(180deg); }

.mega { display:none; }
.mega a { display:block; padding:12px 16px; font:600 14px/1.3 var(--font-body); color:var(--ink-900);
  border-radius:var(--radius); transition:color .18s ease, background .18s ease; }
.mega a:hover { color:var(--green-800); background:var(--green-050); }
.mega a:focus-visible { outline:2px solid var(--gold-500); outline-offset:-2px; }
.nav-item.open .mega { display:block; }

/* CTA keeps .btn styling despite legacy .nav > a rules */
.nav .nav-cta { margin-left:12px; padding:0 22px; color:var(--green-950); }
.nav .nav-cta:hover { color:var(--green-950); background:var(--gold-400); }

/* ── Desktop dropdowns (hover + click), active underline ────────────── */
@media (min-width: 1021px) {
  .mega { position:absolute; top:100%; left:0; min-width:248px; margin-top:8px; padding:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-overlay); z-index:60; }
  /* Invisible hover bridge across the 8px gap so moving the pointer from the
     parent into the panel never loses :hover (the classic dropdown bug). */
  .mega::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
  .nav-item:hover .mega,
  .nav-link[aria-expanded="true"] + .mega { display:block; }
  .nav-item.active > .nav-link::after { content:""; position:absolute; left:13px; right:26px; bottom:4px;
    height:3px; background:var(--gold-500); }
  .nav-item:not(.has-menu).active > .nav-link::after { right:13px; }
}

/* ── Mobile drawer accordions (<=1020px) ────────────────────────────── */
@media (max-width: 1020px) {
  .nav-item { display:block; }
  .nav-link { width:100%; justify-content:space-between; padding:16px 20px; font-size:16px; font-weight:600;
    min-height:52px; border-bottom:1px solid var(--line); border-radius:0; color:var(--green-900); }
  .nav-item.active > .nav-link { color:var(--green-800); background:var(--green-050); box-shadow:inset 3px 0 0 var(--gold-500); }
  .nav-link .caret { font-size:13px; color:var(--green-600); transition:transform .25s ease; }
  .nav-item.open > .nav-link .caret { transform:rotate(180deg); }
  /* Accordion body: collapsed by default, expands when the item is .open */
  .mega { position:static; box-shadow:none; border:0; padding:0; background:var(--green-050);
    display:block; max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .nav-item.open .mega { max-height:520px; }
  .mega a { padding:13px 20px 13px 34px; min-height:46px; display:flex; align-items:center; font-size:14.5px;
    color:var(--ink-600); border-bottom:1px solid var(--line); }
  .mega a:last-child { border-bottom:0; }
  .mega a::before { content:"›"; margin-right:10px; color:var(--gold-600); font-weight:700; }
  /* Gold CTA pinned at the drawer foot */
  .nav .nav-cta { display:flex; margin:auto 20px 24px; min-height:52px; font-size:16px; }
}

/* ── Scroll-reveal (JS-gated so no-JS keeps content visible) ─────────── */
html.js [data-reveal] { opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease; }
html.js [data-reveal].revealed { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity:1; transform:none; }
}

/* ── Back-to-top button ─────────────────────────────────────────────── */
.to-top { position:fixed; right:24px; bottom:24px; z-index:70; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--green-800);
  border-radius:var(--radius); background:var(--green-800); color:var(--surface); font-size:20px; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, background .18s ease; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--green-700); }
.to-top:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }
@media (max-width: 760px) { .to-top { right:16px; bottom:16px; width:44px; height:44px; } }

/* ── Copy-to-clipboard feedback ─────────────────────────────────────── */
[data-copy].is-copied { color:var(--green-800); border-color:var(--green-600); }

/* ── Portrait crest fallback (home welcome, no chairperson photo) ──────── */
.portrait--crest { display:flex; align-items:center; justify-content:center; background:var(--green-050); }
.portrait--crest img { width:60%; max-width:180px; height:auto; opacity:.92; }

/* ── Hero progress bar + prev/next arrows ────────────────────────────── */
.hero-progress { position:absolute; top:0; left:0; right:0; height:4px; background:rgba(255,255,255,.18); z-index:4; }
.hero-progress span { display:block; height:100%; width:0; background:var(--gold-500); }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; background:rgba(3,47,17,.42); color:#fff;
  border:1px solid rgba(255,255,255,.4); border-radius:var(--radius); font:400 26px/1 var(--font-body);
  cursor:pointer; transition:background .18s ease, border-color .18s ease; }
.hero-arrow:hover { background:var(--green-800); border-color:#fff; }
.hero-arrow:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }
.hero-prev { left:var(--gutter); }
.hero-next { right:var(--gutter); }
@media (max-width:760px){ .hero-arrow { width:40px; height:40px; font-size:22px; } }
@media (prefers-reduced-motion: reduce){ .hero-progress span { transition:none; } }

/* ── Branded fallback for empty image tiles (never a blank void) ──────── */
.card .thumb:empty, .op .thumb:empty, .pub-card .thumb:empty {
  background-color:var(--green-050);
  background-image:url('../images/logo.png');
  background-repeat:no-repeat; background-position:center; background-size:72px auto;
}
.op .thumb:empty { background-size:96px auto; }

/* ── Mobile responsiveness refinements ───────────────────────────────── */
/* Wide tables scroll inside their own container instead of the page */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); }
.table-scroll .data-table { border:0; }
@media (max-width:640px){ .table-scroll .data-table { min-width:620px; } }

/* Hero controls on phones: arrows drop to the foot so they never cover the headline */
@media (max-width:760px){
  .hero-arrow { top:auto; bottom:18px; transform:none; width:42px; height:42px; }
  .hero-prev { left:auto; right:72px; }
  .hero-next { right:18px; }
  .hero .dots { bottom:34px; }
  .hero .actions { gap:10px; }
  .hero .actions .btn { flex:1 1 auto; }
}
@media (max-width:400px){
  .hero .actions { flex-direction:column; }
  .hero .actions .btn { width:100%; }
}

/* Never allow accidental sideways scroll on phones (real overflows are fixed above) */
html { overflow-x:clip; }

/* ── Footer legal links + discreet staff login ───────────────────────── */
.legal-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.legal-links a { color:rgba(255,255,255,.55); }
.legal-links a:hover { color:var(--gold-400); }
.legal-links .staff-login { display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:5px 12px; }
.legal-links .staff-login i { font-style:normal; }
.legal-links .staff-login:hover { color:#fff; border-color:var(--gold-500); }
@media (max-width:520px){ .legal .container { flex-direction:column; gap:12px; text-align:center; } }

/* ── Chart.js canvas containment (prevents infinite-height growth) ────── */
.chart-canvas { position:relative; height:300px; width:100%; }
.chart-canvas canvas { max-height:300px; }

/* ── Publication card branded placeholder thumb ──────────────────────── */
.pub-card .thumb { position:relative; aspect-ratio:3/2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--green-050); }
.pub-card .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pub-card .thumb .filetype { position:relative; z-index:1; }
.pub-thumb .pub-doc { width:46px; height:56px; color:var(--green-700); }
.pub-card .thumb img + .filetype { position:absolute; top:12px; right:12px; }

/* ── Branded fallback for images that fail to load at runtime ─────────── */
.thumb.img-failed, .crest.img-failed, .portrait.img-failed, figure.img-failed,
.lead-img.img-failed, .op .thumb.img-failed, .card .thumb.img-failed {
  position:relative; background-color:var(--green-050);
  background-image:url('../images/logo.png'); background-repeat:no-repeat;
  background-position:center; background-size:38% auto; min-height:120px; }