/* =========================================================================
   ASEANSAI — Design Tokens & Shared Component Styles
   Static UI/UX prototype. Brand tokens are fixed by the brand manual —
   do not substitute hues. Spacing follows an 8px scale.
   ========================================================================= */

/* =========================================================================
   WEBFONTS (self-hosted)
   Barlow + EB Garamond are vendored as woff2 in assets/fonts/ so the mockup
   renders correctly with no internet connection. Previously these were loaded
   from fonts.googleapis.com.
   Source: Google Fonts (both families are SIL Open Font License 1.1).
   Barlow ships 300/400/600/700 normal + 400 italic; EB Garamond ships 400
   italic only, which is all the tagline style uses. The unicode-range values
   are Google's own, so the browser still only fetches the subsets a page
   actually needs (latin / latin-ext / vietnamese, plus greek+cyrillic for
   EB Garamond).
   NOTE: Adobe Caslon Pro (the manual's tagline face) is deliberately NOT
   embedded — it is a commercial desktop-licensed font; EB Garamond italic is
   the approved free stand-in.
   ========================================================================= */
/* Barlow italic 400 — vietnamese */
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-italic-400-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Barlow italic 400 — latin-ext */
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-italic-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow italic 400 — latin */
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-italic-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow normal 300 — vietnamese */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/barlow-normal-300-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Barlow normal 300 — latin-ext */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/barlow-normal-300-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow normal 300 — latin */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("fonts/barlow-normal-300-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow normal 400 — vietnamese */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-normal-400-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Barlow normal 400 — latin-ext */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-normal-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow normal 400 — latin */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/barlow-normal-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow normal 600 — vietnamese */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/barlow-normal-600-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Barlow normal 600 — latin-ext */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/barlow-normal-600-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow normal 600 — latin */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/barlow-normal-600-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow normal 700 — vietnamese */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/barlow-normal-700-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Barlow normal 700 — latin-ext */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/barlow-normal-700-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow normal 700 — latin */
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/barlow-normal-700-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* EB Garamond italic 400 — cyrillic-ext */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-cyrillic-ext.woff2") format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* EB Garamond italic 400 — cyrillic */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-cyrillic.woff2") format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* EB Garamond italic 400 — greek-ext */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-greek-ext.woff2") format('woff2');
  unicode-range:U+1F00-1FFF;
}
/* EB Garamond italic 400 — greek */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-greek.woff2") format('woff2');
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* EB Garamond italic 400 — vietnamese */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* EB Garamond italic 400 — latin-ext */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond italic 400 — latin */
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ebgaramond-italic-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root{
  /* Brand colors (fixed) */
  --color-primary:#AF2A36;       /* Primary red */
  --color-primary-deep:#7A232E;  /* Deep red accent */
  --color-gold:#BF9B5F;          /* Gold */
  --color-charcoal:#262729;      /* Dark charcoal/black */
  --color-white:#FFFFFF;
  --color-logo-red:#E84B37;      /* Original logo red — rare accent only */
  --color-logo-yellow:#F4CD00;   /* Original logo yellow — rare accent only */
  --color-logo-blue:#8ED8F7;     /* Original logo light blue — rare accent only */

  /* Derived neutrals for surfaces/text (not brand substitutions, just grays) */
  --color-gray-50:#F7F7F8;
  --color-gray-100:#EFEFF0;
  --color-gray-200:#E3E3E5;
  --color-gray-400:#9B9C9E;
  --color-gray-600:#5B5C5E;
  --color-text:#262729;
  --color-text-muted:#5B5C5E;

  /* Gold tint for backgrounds — lightened for AA contrast when paired with
     dark charcoal text (raw gold #BF9B5F on white body text fails 4.5:1) */
  --color-gold-tint:#F4EEE0; /* light tint, safe as a background behind dark text */

  /* Access-level badge colors (distinct from brand accents, high contrast) */
  --badge-public-bg:#E3E3E5;
  --badge-public-fg:#262729;
  --badge-members-bg:#BF9B5F;
  /* white-on-gold contrast is ~2.6:1, below WCAG AA for body text — client-directed brand exception; kept bold/larger weight where possible to aid legibility. */
  --badge-members-fg:#FFFFFF;
  --badge-restricted-bg:#AF2A36;
  --badge-restricted-fg:#FFFFFF;

  /* Typography */
  --font-body:'Barlow', system-ui, -apple-system, sans-serif;
  --font-tagline:'EB Garamond', Georgia, serif;
  --fs-base:1rem;
  --lh-base:1.5;

  /* 8px spacing scale */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:32px;
  --sp-6:48px;
  --sp-7:64px;
  --sp-8:96px;

  /* Layout */
  --container-max:1200px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(38,39,41,0.08);
  --shadow-md:0 4px 16px rgba(38,39,41,0.12);
  --header-height:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--color-text);
  background:var(--color-white);
  font-weight:400;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-3);font-weight:700;line-height:1.2;}
p{margin:0 0 var(--sp-3);}
h1{font-size:2.25rem;}
h2{font-size:1.75rem;}
h3{font-size:1.375rem;}
h4{font-size:1.125rem;}

@media (max-width:600px){
  h1{font-size:1.75rem;}
  h2{font-size:1.4rem;}
}

/* Visible focus rings everywhere — accessibility requirement */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-gold);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

.tagline{
  font-family:var(--font-tagline);
  font-style:italic;
  font-weight:400;
}

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--sp-4);
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  left:var(--sp-3);
  top:-60px;
  background:var(--color-primary);
  color:#fff;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);
  z-index:1000;
  transition:top .15s ease;
}
.skip-link:focus{top:var(--sp-3);}

main{display:block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:44px;
  padding:10px 20px;
  border-radius:var(--radius-md);
  border:2px solid transparent;
  font-weight:600;
  font-size:0.9375rem;
  line-height:1;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{
  background:var(--color-primary);
  color:#fff;
}
.btn-primary:hover{background:var(--color-primary-deep);}
.btn-outline{
  background:transparent;
  border-color:var(--color-charcoal);
  color:var(--color-charcoal);
}
.btn-outline:hover{background:var(--color-charcoal);color:#fff;}
.btn-outline-white{
  background:transparent;
  border-color:#fff;
  color:#fff;
}
.btn-outline-white:hover{background:#fff;color:var(--color-primary);}
.btn-gold{
  background:var(--color-gold);
  /* white-on-gold contrast is ~2.6:1, below WCAG AA for body text — client-directed brand exception; kept bold/larger weight where possible to aid legibility. */
  color:var(--color-white);
  font-weight:700;
}
.btn-gold:hover{background:#a8824a;}
.btn-block{width:100%;}
.btn-sm{min-height:36px;padding:6px 14px;font-size:0.8125rem;}

/* =========================================================================
   HEADER + MEGA MENU
   ---------------------------------------------------------------------------
   THEMING: every colour the header paints is routed through a --header-*
   custom property declared on .site-header below. The values here ARE the
   light (default) variant — nothing changed visually when they were extracted.
   A variant then only has to re-declare these tokens; see the
   [data-header-theme="dark"] block after the mega menu rules. The build script
   stamps data-header-theme on <body>, so one markup source serves every theme.
   ========================================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:500;

  /* ---- light theme defaults ---- */
  --header-bg:#fff;
  --header-text:var(--color-charcoal);
  --header-text-hover:var(--color-primary);
  --header-border:var(--color-gray-200);
  --header-badge-bg:var(--color-primary);
  --header-badge-text:#fff;
  --header-search-bg:var(--color-gray-50);
  --header-search-border:var(--color-gray-200);
  --header-search-text:var(--color-text);
  --header-search-icon:var(--color-gray-600);
  --header-mobile-bg:#fff;
  /* The dropdown panel is a white surface in BOTH themes — a red panel under a
     red header would collapse the visual separation, and white keeps the panel
     text comfortably above AA. Tokenised anyway so a future theme can change it. */
  --header-panel-bg:#fff;
  --header-panel-border:var(--color-gray-200);
  --header-panel-hover-bg:var(--color-gray-50);

  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
}
.header-inner{
  display:flex;
  align-items:center;
  /* sp-3 not sp-4: the brand lockup is a wide landscape image, so the row needs
     every px it can get before the nav has to fold into the drawer. See
     "HEADER ROW WIDTH BUDGET" below. */
  gap:var(--sp-3);
  min-height:var(--header-height);
  padding:var(--sp-2) var(--sp-4);
  max-width:var(--container-max);
  margin:0 auto;
  position:relative;
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-shrink:0;
}
.brand-badge{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--header-badge-bg);
  color:var(--header-badge-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.02em;
  flex-shrink:0;
}
/* .brand-badge and .brand-name above are now used by the FOOTER only — the
   header brand is a single flat lockup image (emblem + wordmark + tagline baked
   into one PNG), one file per theme. Kept here because partials/footer.html
   still renders that badge/name pair. */
.brand-name{
  font-weight:700;
  font-size:1.15rem;
  color:var(--header-text);
  white-space:nowrap;
}

/* -------------------------------------------------------------------------
   Header brand lockup (single flat image per theme)
   -------------------------------------------------------------------------
   Source files: assets/img/brand/logo-aseansai-{light,dark}.png
     intrinsic 1800x400 px  ->  aspect ratio exactly 4.5:1
     ink bounding box       ->  x 70..1727, y 0..357

   Sizing: height is fixed and width:auto, so the 4.5:1 ratio is never
   distorted — this lockup is LANDSCAPE and must not be squared off.
   The height is the FULL --header-height (72px), which renders 72 x 4.5 =
   324px wide. It is deliberately capped at exactly --header-height and never
   more: the logo is what would otherwise force the bar taller on all 34 pages.

   The source canvas has ~70px of transparent margin left and right (12.6px and
   13.1px once scaled to 324px) which supplies the emblem's clear space, so no
   extra padding is added here.

   NO transform here. An earlier 44px version carried translateY(5.25%) to
   optically re-centre the artwork, because the ink is flush to the canvas top
   (y=0) with all 42px of empty canvas at the BOTTOM. Verified again by pixel
   count: row y=0 holds 451 ink pixels and rows y=393..399 hold none. Now that
   the lockup is TOP-ALIGNED to the bar rather than centred in it, that ink
   edge already lands on y=0 and any nudge would push it off. */
.brand-logo-img{
  /* Full --header-height (72px -> 324px wide) wherever it fits, and never more.
     Below ~420px viewport it cannot fit: the row is
     24px padding + logo + 16px gap + 44px hamburger, so the logo may only be
     (100vw - 84px) wide, i.e. (100vw - 84px)/4.5 tall. The subtrahend here is
     96px rather than 84px to leave ~12px of slack for browsers that count a
     scrollbar inside 100vw.

     Expressed as a fluid cap instead of breakpoints so the lockup is always
     exactly as large as the viewport allows: 72px down to 420px, then
     65.3px at 390, 58.7px at 360, 49.8px at 320 — every one of those still
     larger than the 44px this lockup started at, and none of them overflow. */
  height:min(var(--header-height), calc((100vw - 96px) / 4.5));
  width:auto;
  display:block;
}
/* Pull the lockup flush to the very top edge of the bar.
   .header-inner is align-items:center, so align-self:flex-start lifts ONLY this
   child to the top of the content box; nav, search and the CTA keep their
   centred position untouched. The content box still starts var(--sp-2) below
   the bar's top edge, so a matching negative margin-top cancels that padding
   and puts the image's y=0 on the bar's y=0.

   The negative margin-BOTTOM is what keeps the bar from growing. A flex item's
   outer height here is 72 - 8 - 8 = 56px, exactly the content height the old
   44px lockup produced, so --header-height keeps its meaning and no page gets a
   thicker header. Without it the mobile bar (where there is no 72px-tall nav
   trigger to set the height) measured 80px instead of 72px, which would also
   have desynced the drawer overlay — it is positioned at inset:var(--header-height).

   Scoped to .header-inner on purpose: .brand-mark is SHARED with
   partials/footer.html, which must keep its centred badge+name layout. */
.header-inner .brand-mark{
  align-self:flex-start;
  margin-top:calc(-1 * var(--sp-2));
  margin-bottom:calc(-1 * var(--sp-2));
}

/* Light is the default; the dark lockup only appears under the red header. */
.brand-logo-img--dark{display:none;}
[data-header-theme="dark"] .brand-logo-img--light{display:none;}
[data-header-theme="dark"] .brand-logo-img--dark{display:block;}

.main-nav{
  flex:1;
  display:flex;
}
.main-nav > ul{
  display:flex;
  align-items:stretch;
  /* No gap: each .nav-trigger already carries its own horizontal padding, so
     the labels stay visually separated without spending 4 x 4px on gaps. */
  gap:0;
}
.nav-item{position:relative;}
.nav-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  height:var(--header-height);
  /* 8px, down from var(--sp-3)/16px: five triggers x two sides means every px
     here costs 10px of row width, and this is the cheapest 80px available. With
     .main-nav > ul gap at 0 the labels sit 16px apart, which the chevrons keep
     legible; the trigger is still full --header-height tall, so the click
     target stays large. This is what buys the 1280px laptop a real safety
     margin (31px) instead of the 1.2px it had at 11px padding. */
  padding:0 8px;
  background:transparent;
  border:none;
  color:var(--header-text);
  font-weight:600;
  font-size:0.9375rem;
  white-space:nowrap;
}
.nav-trigger .ti-chevron-down{font-size:16px;transition:transform .15s ease;}
.nav-item.open .nav-trigger,.nav-trigger:hover{color:var(--header-text-hover);}
.nav-item.open .nav-trigger .ti-chevron-down{transform:rotate(180deg);}

/* =========================================================================
   HEADER ROW WIDTH BUDGET
   -------------------------------------------------------------------------
   The brand is now a 198px-wide landscape lockup (see .brand-logo-img), so the
   desktop row — logo + five mega-menu triggers + search + Member Login — is
   genuinely tight. Measured minimums at 44px logo height:

     logo 198  +  nav 669.3 (five nowrap labels)  +  CTA 137.5  +  32 gaps

   That is ~1037px before the search field, against 1152px of usable width
   inside the 1200px container — so a 150px search input can NEVER fit, and the
   row unavoidably spills a little past the 1200px content column on its right.
   That spill is fine (the header bar is full-bleed and the LEFT edge still
   lines up with the page content); what matters is that it stays inside the
   VIEWPORT. Two mechanisms guarantee that:

   1. DETERMINISTIC SEARCH WIDTH (below). Rather than leaving the field to flex
      shrink — which negotiated its way to a 53px input and even pushed the
      magnifier outside the field's own border — the desktop search is sized
      explicitly: 100px, dropping to 85px in the tight 1280-1339px band.
   2. DRAWER TAKEOVER at <=1279px (media query further down). Below that even a
      collapsed search cannot make five triggers fit, so the nav folds into the
      hamburger drawer instead of spilling.

   Measured result: no horizontal overflow at ANY width, with >=28px of viewport
   clearance at every desktop step. This also removes a PRE-EXISTING overflow —
   before this change the row already overflowed below ~1450px, and the wider
   lockup alone would have pushed that to ~1580px.
   ========================================================================= */
.header-utility{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  flex-shrink:0;
}
/* Nothing in the utility cluster shrinks: sizes are set explicitly instead, so
   "Member Login" can never wrap or clip and the search field can never shrink
   below its own contents. */
.header-utility .btn{flex-shrink:0;}
.search-form{
  display:flex;
  align-items:center;
  background:var(--header-search-bg);
  border:1px solid var(--header-search-border);
  border-radius:var(--radius-md);
  padding:0 var(--sp-2);
  height:40px;
}
.search-form input[type="search"]{
  border:none;
  background:transparent;
  padding:0 var(--sp-2);
  height:100%;
  width:150px;
  color:var(--header-search-text);
}
/* Desktop bar only — deliberately NOT applied to the copy of this form inside
   .mobile-only-row, which stays full-width in the drawer (rule further down).
   100px keeps ~84px of text width, comfortably more than the ~62px the
   "Search..." placeholder needs. */
.header-utility .search-form{flex:0 0 auto;}
.header-utility .search-form input[type="search"]{
  flex:0 0 auto;
  width:100px;
}
.search-form input[type="search"]:focus{outline:none;}
.search-form button{
  background:none;border:none;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:var(--header-search-icon);
}
.search-form button:hover{color:var(--header-text-hover);}

.hamburger{
  display:none;
  background:none;
  border:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  color:var(--header-text);
  font-size:26px;
  flex-shrink:0;
}

/* Mega menu panel (desktop) — sized to its own content, not a fixed/full-width
   box. Width is set per-menu via a size modifier (sm/md/lg below); a shared
   viewport clamp prevents any panel from overflowing past the edge of
   smaller desktop windows. Horizontal position defaults to centered under a
   narrow trigger (used by the single-column Committees/Knowledge Hub-sized
   menus); wider 2-column menus use an explicit left/right alignment modifier
   so they don't spill off the header edge. */
.mega-panel{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  max-width:calc(100vw - 32px);
  background:var(--header-panel-bg);
  border:1px solid var(--header-panel-border);
  border-top:none;
  box-shadow:var(--shadow-md);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:var(--sp-4);
  z-index:400;
}
/* Size modifiers — proportional to actual item count/columns. sm/md are wide
   because their items carry a description line that needs enough measure to wrap
   to at most two short lines. lg is NARROWER than md, not wider: the Member SAIs
   panel is 10 single-line country names with no descriptions, so its widest
   column only has to fit a flag swatch plus "Brunei Darussalam". */
.mega-panel--sm{width:380px;}   /* 1 column, 4 described items: Committees, Knowledge Hub */
.mega-panel--md{width:660px;}   /* 2 columns, 5-6 described items: About, News & Events */
.mega-panel--lg{width:480px;}   /* 2 columns x 5 single-line country names: Member SAIs */

/* Alignment modifiers — align the panel under its trigger instead of
   centering across the whole header; left-align for menus near the left of
   the nav, right-align for menus near the right so they stay on-screen. */
.mega-align-left{left:0;transform:none;}
.mega-align-right{left:auto;right:0;transform:none;}
.nav-item.open .mega-panel{display:block;}

/* Narrow desktops (just above the 901px mega-menu breakpoint) don't have room to
   hang a 660px panel off a trigger that already sits well into the header —
   anchoring to the trigger would push the panel past the right edge of the
   viewport. Between 901px and 1279px the panels therefore anchor to the nav
   block instead of to their individual trigger. Setting .nav-item back to static
   is what re-points the panel's containing block from the trigger to .main-nav.
   Above 1280px there is room, so trigger-anchoring (which reads better) resumes.

   This deliberately only CLAMPS the width rather than setting it: an earlier
   version forced every panel to 660px here, which would now inflate the 480px
   Member SAIs panel and the 380px one-column panels back to full width. The
   clamp reserves ~280px for the brand block and nav offset that sit to the left
   of an anchored panel, so the widest panel (md, 660px) shrinks to ~620px at
   901px and is unclamped again by ~1180px. Panels narrower than the clamp are
   untouched at every width. */
/* REMOVED: an @media (min-width:901px) and (max-width:1279px) block used to
   re-anchor the mega panels for the narrow-desktop band. That band no longer
   renders a desktop nav at all — the drawer now takes over at <=1279px (see
   the HEADER ROW WIDTH BUDGET note above) — so those rules were dead code. */

.mega-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2) var(--sp-5);
}
.mega-cols.cols-2{grid-template-columns:1fr 1fr;}

.mega-col-label{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--color-gray-600);
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
  margin-top:var(--sp-2);
}
.mega-col-label:first-child{margin-top:0;}

/* Mega menu link — icon on the left, title stacked over a short description.
   align-items:flex-start (not center) so the icon lines up with the FIRST line
   of text rather than floating in the middle of a two-line block. Country links
   in the Member SAIs panel intentionally have no description and stay one line;
   flex-start keeps those aligned too. */
.mega-link{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px var(--sp-3);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  font-weight:400;
  line-height:1.35; /* normalises the icon/text baseline for the described items
                       AND the bare single-line country links, which keep their
                       original markup */
  min-height:44px;
}
.mega-link i{
  font-size:20px;
  line-height:1.35;      /* matches .mega-link-title so icon and title share a baseline */
  flex-shrink:0;
  color:var(--color-primary);
  opacity:0.55;          /* muted at rest so a panel of 6+ icons doesn't read as busy */
  transition:opacity .15s ease;
}
.mega-link-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mega-link-title{
  font-weight:600;
  color:var(--color-charcoal);
  line-height:1.35;
}
.mega-link-desc{
  font-size:0.8125rem;
  line-height:1.35;
  color:var(--color-text-muted);
}
.mega-link:hover,.mega-link:focus-visible{
  background:var(--header-panel-hover-bg);
  color:var(--color-primary);
}
/* On hover/focus the icon goes solid and the title picks up the brand red;
   the description stays muted so the title remains the emphasis. */
.mega-link:hover i,.mega-link:focus-visible i{opacity:1;}
.mega-link:hover .mega-link-title,.mega-link:focus-visible .mega-link-title{
  color:var(--color-primary);
}

/* National flag swatch in the Member SAIs panel, replacing the generic ti-flag
   icon. Artwork comes from the vendored flag-icons SVGs in
   assets/vendor/flags/4x3/ — see that folder's README.
   IMPORTANT: these are national FLAGS, not the SAI institutional logos in
   assets/logos/. Those logos are wordmarks (e.g. singapore.png is the
   Auditor-General's Office wordmark) and belong on the country profile pages,
   where they are still used; an earlier revision wrongly used them here.

   Sized 28x21px = exactly 4:3, matching every flag's viewBox="0 0 640 480", so
   the artwork fills the box with no letterboxing. Because the ratios are
   identical, object-fit:contain and cover would render the same thing — contain
   is kept as the safer default: if a future flag ever ships a different ratio it
   letterboxes instead of silently cropping the design.

   The opacity hover further up is scoped to the `i` ELEMENT, so it does not
   touch these swatches (verified in code, not assumed) — a flag faded to 55%
   would just look broken. The swatch gets its own border hover instead. */
.mega-link-flag{
  width:28px;
  height:21px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;   /* small breathing room; official flags read better not edge-to-edge */
  background:var(--color-gray-100);
  border:1px solid transparent;
  border-radius:3px;
  overflow:hidden;
  transition:border-color .15s ease;
}
.mega-link-flag img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.mega-link:hover .mega-link-flag,.mega-link:focus-visible .mega-link-flag{
  border-color:var(--color-primary);
}
/* NOTE: .mega-link-flag--placeholder was removed here. It existed only because
   Myanmar had no institutional logo file; now that real national flags are used,
   mm.svg exists like every other country and all 10 items are uniform. The
   separate .profile-logo-placeholder on member-sais/myanmar.html is unrelated and
   still in use, since assets/logos/ genuinely has no Myanmar logo. */

/* Mobile accordion (re-uses same markup, toggled via CSS class + JS) */
/* Narrow-desktop band: the 60px just above the drawer breakpoint, where the row
   is at its tightest. Trimming the search input to 85px (still ~69px of text
   width, enough for the full "Search..." placeholder) keeps the viewport
   clearance here comfortable instead of marginal. Above 1339px the 100px
   default already clears by 40px+, so large screens are not penalised. */
@media (min-width:1280px) and (max-width:1339px){
  .header-utility .search-form input[type="search"]{width:85px;}
}

/* Drawer takeover. Was max-width:900px; raised to 1279px because the five
   nowrap mega-menu labels need ~1290px of row on their own — between 901px and
   1279px the desktop row could not fit at any search width and overflowed the
   viewport horizontally (a pre-existing bug, see HEADER ROW WIDTH BUDGET). The
   drawer already carries both the search field and Member Login in
   .mobile-only-row, so nothing is lost in that band. */
@media (max-width:1279px){
  .main-nav{display:none;}
  .header-utility .search-form{display:none;}
  .hamburger{display:flex;}

  .site-header.nav-open .main-nav{
    display:block;
    position:fixed;
    inset:var(--header-height) 0 0 0;
    background:var(--header-mobile-bg);
    overflow-y:auto;
    padding:var(--sp-3) 0 var(--sp-7);
    z-index:450;
  }
  .site-header.nav-open .main-nav > ul{
    flex-direction:column;
    gap:0;
  }
  .site-header.nav-open .mobile-only-row{
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--header-border);
  }
  .site-header.nav-open .mobile-only-row .search-form{display:flex;width:100%;}
  .site-header.nav-open .mobile-only-row .search-form input{width:100%;}

  .nav-item{border-bottom:1px solid var(--header-border);}
  .nav-trigger{
    width:100%;
    height:auto;
    padding:var(--sp-3) var(--sp-4);
    justify-content:space-between;
  }
  /* !important here guarantees the mobile single-column accordion always
     wins over the desktop size/alignment modifiers (mega-panel--sm/md/lg,
     mega-align-left/right), regardless of stylesheet source order. */
  .mega-panel{
    display:none;
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:0 var(--sp-3) var(--sp-3);
  }
  .nav-item.open .mega-panel{display:block;}
  .mega-cols,.mega-cols.cols-2{grid-template-columns:1fr;}
}

.mobile-only-row{display:none;}
/* Kept in step with the drawer breakpoint above (was 900px). */
@media (max-width:1279px){
  .mobile-only-row{display:none;}
  .site-header.nav-open .mobile-only-row{display:flex;}
}

/* Drop the header's Member Login pill (137.5px). It is a DUPLICATE —
   .mobile-only-row renders the same CTA full-width inside the drawer — so the
   action is still one tap away via the hamburger.
   Threshold is 599px, not the 480px this rule originally carried: with the
   lockup at 324px wide the pill-visible row measures
   24 + 324 + 16 + 137.5 + 16 + 44 = 561.5px, so it only clears a viewport from
   ~562px up. At 600px that leaves 38.5px; at 481px it overflowed by 80px. */
@media (max-width:599px){
  .header-utility .btn-primary{display:none;}
}

/* =========================================================================
   HEADER VARIANT - dark (red) header
   Activated by data-header-theme="dark" on <body>, which "npm run build:dark"
   stamps onto every page in MOCKUP-02-DARK/. No markup is duplicated: this block
   only re-declares the --header-* tokens defined on .site-header above, so the
   selector is more specific than .site-header and wins without !important.

   Contrast notes: white text on primary red #AF2A36 is 6.55:1, comfortably AA.
   Nav labels stay white on hover as well, with a gold UNDERLINE carrying the
   accent, so no header text ever drops below AA. The dropdown panel stays white,
   so every panel text colour keeps its light-theme contrast unchanged — note
   .mega-link does not use --header-text-hover at all: it hovers to
   var(--color-primary) on a white panel (6.2:1), which is already compliant and
   is deliberately left untouched by this variant.
   ========================================================================= */
[data-header-theme="dark"] .site-header{
  /* PANTONE 188 C -> PANTONE 1805 C, per Corporate Design Manual p.6 */
  --header-bg:linear-gradient(90deg, var(--color-primary-deep), var(--color-primary));
  --header-text:#fff;
  /* Hover text stays WHITE (6.55:1 on the red bar) — the gold accent is carried
     by the underline below instead of by the text colour. See note there. */
  --header-text-hover:#fff;
  --header-border:var(--color-primary-deep);
  /* On a red bar the red circular badge would vanish, so it inverts. */
  --header-badge-bg:#fff;
  --header-badge-text:var(--color-primary);
  /* Translucent white keeps the search field legible on red without adding a
     colour outside the brand palette. */
  --header-search-bg:rgba(255,255,255,0.16);
  --header-search-border:rgba(255,255,255,0.45);
  --header-search-text:#fff;
  --header-search-icon:rgba(255,255,255,0.85);
  --header-mobile-bg:var(--color-primary);
}
/* RESOLVED (was: gold hover text on red measured 2.5:1, failing WCAG AA).
   The hover/open state now keeps the label WHITE — 6.55:1 on primary red, passing
   AA for normal text — and moves the gold accent onto the underline instead. The
   gold sits on a 2px rule rather than on glyphs, where the low 2.5:1 ratio against
   red does not affect legibility: the text itself is what has to be readable, and
   an underline is a shape cue, not a colour-only cue. Visually this still reads as
   "gold accent on hover", so the brand intent survives. */
[data-header-theme="dark"] .site-header .nav-item.open .nav-trigger,
[data-header-theme="dark"] .site-header .nav-trigger:hover,
[data-header-theme="dark"] .site-header .nav-trigger:focus-visible{
  text-decoration:underline;
  text-decoration-color:var(--color-gold);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
[data-header-theme="dark"] .site-header .search-form input::placeholder{
  color:rgba(255,255,255,0.75);
}
/* Member Login is .btn-primary - solid brand red, invisible on a red header.
   Invert to a white pill with red text (same 6.5:1 ratio, well above AA). */
[data-header-theme="dark"] .site-header .btn-primary{
  background:#fff;
  color:var(--color-primary);
}
[data-header-theme="dark"] .site-header .btn-primary:hover{
  background:rgba(255,255,255,0.88);
  color:var(--color-primary-deep);
}
/* Focus rings default to gold, which is weak on red - use white on the bar... */
[data-header-theme="dark"] .site-header a:focus-visible,
[data-header-theme="dark"] .site-header button:focus-visible,
[data-header-theme="dark"] .site-header input:focus-visible{
  outline-color:#fff;
}
/* ...but inside the white dropdown panel the default gold ring is correct. */
[data-header-theme="dark"] .site-header .mega-panel a:focus-visible{
  outline-color:var(--color-gold);
}

/* =========================================================================
   HERO
   ---------------------------------------------------------------------------
   All hero photos are stored LOCALLY in assets/img/hero/ so the mockup opens
   fully offline — there are deliberately no external CDN hotlinks left here.
   Per-photo source/photographer/license credits are listed in the
   "HERO PHOTO CREDITS" block further below, and mirrored in
   assets/img/hero/_credits-*.txt for the client deliverable trail.

   MECHANISM: the red overlay gradient is declared ONCE on .hero, and each
   page swaps only its photo through the --hero-photo custom property
   (e.g. .hero--about-overview sets --hero-photo to its own img/hero/ file).
   NOTE: url() inside a stylesheet resolves relative to the STYLESHEET, not
   the HTML document — since this file lives in assets/, the correct path is
   "img/hero/x.jpg" (NOT "../assets/img/hero/x.jpg"). One rule therefore
   works correctly from every folder depth in the site.

   OVERLAY: vertical (to bottom) instead of diagonal, so the photo reads
   clearly near the top and the overlay deepens toward the bottom where
   .hero-inner's text/CTA sit. Bottom stop stays at 0.80 alpha — composited
   against a worst-case near-white photo region, white text over
   rgba(175,42,54,0.80) computes to 4.5:1, exactly WCAG AA for normal text.
   Going lower there would fail AA in the brightest parts of a photo. The top
   stop is 0.35 so the photo dominates where there is no text to protect.
   primary-red -> deep-red pairing (top to bottom) is unchanged.
   ========================================================================= */
.hero{
  position:relative;
  background-image:
    linear-gradient(to bottom, rgba(175,42,54,0.35), rgba(122,35,46,0.80)),
    var(--hero-photo, none);
  background-color:var(--color-primary-deep); /* fallback if a photo is missing */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  padding:var(--sp-7) var(--sp-4);
  overflow:hidden;
}

/* ---- Homepage-only crossfade slider ------------------------------------
   The homepage hero cycles two photos instead of showing one. The photos
   live on stacked .hero-slide layers behind the red overlay; the overlay is
   re-applied on .hero-slides::after so it always sits above whichever photo
   is fading. Text in .hero-inner is untouched and never animates.        */
.hero--home{--hero-photo:none;}
.hero--home{background-image:none;background-color:var(--color-charcoal);}
.hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.hero-slide.is-active{opacity:1;}
.hero-slides::after{
  /* 3-zone vertical overlay (dark top -> dark-tinted middle -> brand-red bottom),
     matching MOCKUP-03-IMAGE's home-header.css override stop-for-stop so the
     homepage hero slider reads consistently across all three mockups. Opacity
     was raised across all three zones (including the middle, previously left
     near-transparent so the photo would show undimmed) because headline/
     tagline/CTA legibility over ANY photo now takes priority over showing the
     photo at full/true colour. Applied above the photos, same as before. */
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(
    to bottom,
    rgba(20,20,22,0.92) 0%,
    rgba(20,20,22,0.62) 18%,
    rgba(20,20,22,0.45) 38%,
    rgba(30,18,20,0.55) 58%,
    rgba(122,35,46,0.48) 82%,
    rgba(122,35,46,0.60) 100%
  );
}
@media (prefers-reduced-motion: reduce){
  /* hold on the first slide; initHeroSlider() also skips cycling entirely */
  .hero-slide{transition:none;}
}
.hero-inner{
  position:relative;
  z-index:2; /* keeps hero text above the slider photo layers */
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  gap:var(--sp-4);
}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.8125rem;
  font-weight:700;
  color:var(--color-gold);
}
.hero h1{color:#fff;max-width:20ch;}
.hero-tagline{
  font-family:var(--font-tagline);
  font-style:italic;
  font-size:1.25rem;
  max-width:42ch;
  color:#fff;
}
.hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;}

/* =========================================================================
   PER-PAGE HERO PHOTOS
   One line per page: only the photo changes, the overlay gradient and all
   other hero styling stay inherited from .hero / .profile-hero above.
   Paths are relative to THIS stylesheet (assets/), not to the HTML page.
   ========================================================================= */
.hero-slide--1{background-image:url("img/hero/light-hero-01.jpg");}
.hero-slide--2{background-image:url("img/hero/light-hero-02.jpg");}
.hero--about-overview{--hero-photo:url("img/hero/about-overview-putrajaya-perdana-putra.jpg");}
/* This photo has a large bright overcast sky, the worst case for white text, so its
   overlay is bumped back toward the old 0.86/0.84 to keep comfortable contrast
   headroom. Same vertical direction and same primary-red -> deep-red pair. */
.hero--about-overview{
  background-image:
    linear-gradient(to bottom, rgba(175,42,54,0.40), rgba(122,35,46,0.86)),
    var(--hero-photo);
}
.hero--about-governance{--hero-photo:url("img/hero/about-governance-parliament-house-facade.jpg");}
.hero--about-agreement{--hero-photo:url("img/hero/about-agreement-state-reception-hall-long-table.jpg");}
.hero--about-rules{--hero-photo:url("img/hero/about-rules-law-library-compact-shelving.jpg");}
.hero--about-strategic{--hero-photo:url("img/hero/about-strategic-high-rise-upward-view.jpg");}
.hero--about-secretariat{--hero-photo:url("img/hero/about-secretariat-staff-at-desks.jpg");}
.hero--cmte-strategic-planning{--hero-photo:url("img/hero/cmte-strategic-planning-boardroom-documents.jpg");}
.hero--cmte-rules-procedures{--hero-photo:url("img/hero/cmte-rules-procedures-document-review.jpg");}
.hero--cmte-knowledge-sharing{--hero-photo:url("img/hero/cmte-knowledge-sharing-auditorium-speaker.jpg");}
.hero--cmte-training{--hero-photo:url("img/hero/cmte-training-seminar-room-presentation.jpg");}
.hero--kh-explore{--hero-photo:url("img/hero/kh-explore-grand-library-reading-hall.jpg");}
.hero--kh-publications{--hero-photo:url("img/hero/kh-publications-printed-press-stack.jpg");}
.hero--kh-capacity{--hero-photo:url("img/hero/kh-capacity-training-seminar-notes.jpg");}
.hero--kh-library{--hero-photo:url("img/hero/kh-library-labelled-record-binders.jpg");}
.hero--news-hub{--hero-photo:url("img/hero/news-hub-event-venue-hall.jpg");}
.hero--news-aseansai{--hero-photo:url("img/hero/news-aseansai-podium-microphone.jpg");}
.hero--news-member{--hero-photo:url("img/hero/news-member-row-of-national-flags.jpg");}
.hero--news-calendar{--hero-photo:url("img/hero/news-calendar-desk-planner-scheduling.jpg");}
.hero--news-archive{--hero-photo:url("img/hero/news-archive-card-catalog-drawers.jpg");}
.hero--news-gallery{--hero-photo:url("img/hero/news-gallery-event-photographers.jpg");}

.profile-hero--brunei{--hero-photo:url("img/hero/sai-brunei-omar-ali-saifuddien-mosque-sunset.jpg");}
.profile-hero--cambodia{--hero-photo:url("img/hero/sai-cambodia-phnom-penh-river-sunset-skyline.jpg");}
.profile-hero--indonesia{--hero-photo:url("img/hero/sai-indonesia-jakarta-monas-skyline.jpg");}
.profile-hero--laos{--hero-photo:url("img/hero/sai-laos-vientiane-that-luang-aerial.jpg");}
.profile-hero--malaysia{--hero-photo:url("img/hero/sai-malaysia-kuala-lumpur-petronas-sunset.jpg");}
.profile-hero--myanmar{--hero-photo:url("img/hero/sai-myanmar-yangon-aerial-skyline.jpg");}
.profile-hero--philippines{--hero-photo:url("img/hero/sai-philippines-makati-dusk-skyline.jpg");}
.profile-hero--singapore{--hero-photo:url("img/hero/sai-singapore-marina-bay-dusk.jpg");}
.profile-hero--thailand{--hero-photo:url("img/hero/sai-thailand-bangkok-lumpini-dusk-skyline.jpg");}
.profile-hero--vietnam{--hero-photo:url("img/hero/sai-vietnam-ho-chi-minh-landmark81-sunset.jpg");}

/* =========================================================================
   HERO PHOTO CREDITS
   Local copies live in assets/img/hero/ (no external hotlinks anywhere, so the
   mockup renders fully offline). Machine-readable manifests: _credits-*.txt.
   Both the Pexels and Unsplash licenses permit free commercial use with no
   attribution required; credited here for the client deliverable trail.

   --- Homepage slider ---
   homepage slider, first frame
     light-hero-01.jpg (replaces the earlier hero-01-jakarta-dusk-skyline.jpg;
     that file is still on disk in this folder but no longer referenced —
     source/license not on record for this replacement, confirm before
     using this credits block for a client deliverable)
   homepage slider, second frame
     light-hero-02.jpg (replaces the earlier hero-02-kuala-lumpur-dusk-aerial.jpg;
     that file is still on disk in this folder but no longer referenced —
     source/license not on record for this replacement, confirm before
     using this credits block for a client deliverable)

   --- Section pages (.hero, red overlay) ---
   About ASEANSAI — Overview  [about/index.html]
     about-overview-putrajaya-perdana-putra.jpg
     Shahbaz Hussain — https://www.pexels.com/photo/the-perdana-putra-building-in-putrajaya-malaysia-4610271/
     Pexels License — free to use, no attribution required
     (Replaced an earlier shot of BANGLADESH's parliament — not an ASEAN member.)
   Organization and Governance  [about/governance.html]
     about-governance-parliament-house-facade.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   ASEANSAI Agreement  [about/agreement.html]
     about-agreement-state-reception-hall-long-table.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Rules and Procedures  [about/rules-procedures.html]
     about-rules-law-library-compact-shelving.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Strategic Plan  [about/strategic-plan.html]
     about-strategic-high-rise-upward-view.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Secretariat  [about/secretariat.html]
     about-secretariat-staff-at-desks.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Strategic Planning Committee  [committees/strategic-planning.html]
     cmte-strategic-planning-boardroom-documents.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Rules and Procedures Committee  [committees/rules-and-procedures.html]
     cmte-rules-procedures-document-review.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Knowledge Sharing Committee  [committees/knowledge-sharing.html]
     cmte-knowledge-sharing-auditorium-speaker.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Training Committee  [committees/training.html]
     cmte-training-seminar-room-presentation.jpg
     SOURCE: *** PROVENANCE NOT RECORDED — see note at end of this block ***
   Knowledge Hub — Explore All Resources  [knowledge-hub/index.html]
     kh-explore-grand-library-reading-hall.jpg
     Michael D. Beckwith — https://www.pexels.com/photo/31376296/
     Pexels License — free to use, no attribution required
   Publications  [knowledge-hub/publications.html]
     kh-publications-printed-press-stack.jpg
     Brotin Biswas — https://www.pexels.com/photo/518543/
     Pexels License — free to use, no attribution required
   Capacity Development Resources  [knowledge-hub/capacity-development.html]
     kh-capacity-training-seminar-notes.jpg
     MBA Classroom — https://www.pexels.com/photo/34947115/
     Pexels License — free to use, no attribution required
   Public Document Library  [knowledge-hub/public-library.html]
     kh-library-labelled-record-binders.jpg
     Zulfugarkarimov — https://www.pexels.com/photo/34293528/
     Pexels License — free to use, no attribution required
   News & Events — hub  [news-events/index.html]
     news-hub-event-venue-hall.jpg
     Doan Thanh Binh — https://www.pexels.com/photo/36834057/
     Pexels License — free to use, no attribution required
   ASEANSAI News  [news-events/news.html]
     news-aseansai-podium-microphone.jpg
     Nacho Gomez — https://www.pexels.com/photo/37012314/
     Pexels License — free to use, no attribution required
   News from Member SAIs  [news-events/member-news.html]
     news-member-row-of-national-flags.jpg
     Mike Van Schoonderwalt — https://www.pexels.com/photo/5505451/
     Pexels License — free to use, no attribution required
   Events Calendar  [news-events/events-calendar.html]
     news-calendar-desk-planner-scheduling.jpg
     RDNE Stock project — https://www.pexels.com/photo/6170644/
     Pexels License — free to use, no attribution required
   Past Events / Event Archive  [news-events/event-archive.html]
     news-archive-card-catalog-drawers.jpg
     cottonbro studio — https://www.pexels.com/photo/6333856/
     Pexels License — free to use, no attribution required
   Media Gallery  [news-events/media-gallery.html]
     news-gallery-event-photographers.jpg
     Tahir — https://www.pexels.com/photo/32957317/
     Pexels License — free to use, no attribution required

   --- Member SAI profiles (.profile-hero, charcoal overlay) ---
   Brunei Darussalam  [member-sais/brunei.html]
     sai-brunei-omar-ali-saifuddien-mosque-sunset.jpg
     Bojana Noemi Molnar — https://www.pexels.com/photo/sultan-omar-ali-saifuddin-mosque-at-sunset-in-brunei-35851017/
     Pexels License — free to use, no attribution required
   Cambodia  [member-sais/cambodia.html]
     sai-cambodia-phnom-penh-river-sunset-skyline.jpg
     Sae Senghong Senghai — https://www.pexels.com/photo/scenic-view-of-phnom-penh-skyline-at-sunset-36095025/
     Pexels License — free to use, no attribution required
   Indonesia  [member-sais/indonesia.html]
     sai-indonesia-jakarta-monas-skyline.jpg
     capturavisualmoment — https://www.pexels.com/photo/national-monument-of-indonesia-in-jakarta-cityscape-38093463/
     Pexels License — free to use, no attribution required
   Lao PDR  [member-sais/laos.html]
     sai-laos-vientiane-that-luang-aerial.jpg
     Meklay YOTKHAMSAY — https://unsplash.com/photos/an-aerial-view-of-a-city-with-many-buildings-NyMqkY7BCBc
     Unsplash License — free to use, no attribution required
   Malaysia  [member-sais/malaysia.html]
     sai-malaysia-kuala-lumpur-petronas-sunset.jpg
     Indragunawan — https://www.pexels.com/photo/view-of-cityscape-against-sky-during-sunset-313032/
     Pexels License — free to use, no attribution required
   Myanmar  [member-sais/myanmar.html]
     sai-myanmar-yangon-aerial-skyline.jpg
     Thiha Soe — https://www.pexels.com/photo/aerial-photography-of-yangon-city-in-myanmar-14825306/
     Pexels License — free to use, no attribution required
   Philippines  [member-sais/philippines.html]
     sai-philippines-makati-dusk-skyline.jpg
     Padrechaks — https://www.pexels.com/photo/skyscrapers-in-downtown-of-makati-philippines-20835811/
     Pexels License — free to use, no attribution required
   Singapore  [member-sais/singapore.html]
     sai-singapore-marina-bay-dusk.jpg
     realcereal — https://www.pexels.com/photo/clouds-over-city-in-evening-15480458/
     Pexels License — free to use, no attribution required
   Thailand  [member-sais/thailand.html]
     sai-thailand-bangkok-lumpini-dusk-skyline.jpg
     Khoi Pham — https://www.pexels.com/photo/bangkok-cityscape-at-dusk-with-modern-skyscrapers-36483736/
     Pexels License — free to use, no attribution required
   Viet Nam  [member-sais/vietnam.html]
     sai-vietnam-ho-chi-minh-landmark81-sunset.jpg
     Felix Schickel — https://www.pexels.com/photo/stunning-ho-chi-minh-city-skyline-at-sunset-33101042/
     Pexels License — free to use, no attribution required

   NOTE ON MISSING PROVENANCE
   9 photo(s) below were downloaded before their source manifest was
   written, so photographer/source-page details still need to be recovered
   (all were taken from Pexels or Unsplash, both of which permit commercial use
   with no attribution required, so usage is licensed — only the audit trail is
   incomplete). Recover by reverse-image-searching these files, then fold the
   result into assets/img/hero/_credits-b.txt and this block:
     - about-governance-parliament-house-facade.jpg
     - about-agreement-state-reception-hall-long-table.jpg
     - about-rules-law-library-compact-shelving.jpg
     - about-strategic-high-rise-upward-view.jpg
     - about-secretariat-staff-at-desks.jpg
     - cmte-strategic-planning-boardroom-documents.jpg
     - cmte-rules-procedures-document-review.jpg
     - cmte-knowledge-sharing-auditorium-speaker.jpg
     - cmte-training-seminar-room-presentation.jpg
   ========================================================================= */

/* Section pattern used across pages */
.section{padding:var(--sp-7) 0;}
.section-alt{background:var(--color-gray-50);}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}
.section-head h2{margin-bottom:var(--sp-1);}
.section-lead{color:var(--color-text-muted);max-width:60ch;}

/* =========================================================================
   CARDS
   ========================================================================= */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-4);
}
.card{
  background:#fff;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow .15s ease,transform .15s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);flex:1;}
.card-eyebrow{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--color-primary);
}
.card h3{margin-bottom:var(--sp-1);}
.card p{color:var(--color-text-muted);margin-bottom:0;}
.card-meta{
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
  font-size:0.8125rem;
  color:var(--color-text-muted);
  margin-top:auto;
}
.card-footer{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--color-gray-100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
}

/* Country / logo cards */
.country-card{
  align-items:center;
  text-align:center;
  padding:var(--sp-4);
  gap:var(--sp-3);
}
.country-logo-wrap{
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-200);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0 auto;
}
.country-logo-wrap img{
  width:80%;
  height:80%;
  object-fit:contain;
}
.country-logo-placeholder{
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--color-charcoal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
  margin:0 auto;
}

/* =========================================================================
   BADGES (access level — color + icon + text, not color alone)
   ========================================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.badge i{font-size:14px;}
.badge-public{background:var(--badge-public-bg);color:var(--badge-public-fg);}
.badge-members{background:var(--badge-members-bg);color:var(--badge-members-fg);}
.badge-restricted{background:var(--badge-restricted-bg);color:var(--badge-restricted-fg);}

.badge-generic{
  background:var(--color-gold-tint);
  color:var(--color-charcoal);
  border:1px solid var(--color-gray-200);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{
  background:linear-gradient(to bottom, var(--color-charcoal), #1a1b1c);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.footer-inner{
  position:relative;
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--sp-7) var(--sp-4) var(--sp-5);
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:var(--sp-5);
}
.footer-brand{display:flex;flex-direction:column;gap:var(--sp-3);}
.footer-brand .brand-name{color:#fff;}
.footer-tagline{
  font-family:var(--font-tagline);
  font-style:italic;
  color:var(--color-gray-200);
  max-width:32ch;
}
.footer-col h4{
  color:#fff;
  font-size:0.875rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:var(--sp-3);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-2);}
.footer-col a{color:var(--color-gray-200);}
.footer-col a:hover{color:var(--color-gold);}
.footer-bottom{
  position:relative;
  border-top:1px solid rgba(255,255,255,0.12);
  padding:var(--sp-3) var(--sp-4);
}
.footer-bottom-inner{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  font-size:0.8125rem;
  color:var(--color-gray-400);
}
.footer-bottom a{color:var(--color-gray-400);}
.footer-bottom a:hover{color:var(--color-gold);}

@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .footer-inner{grid-template-columns:1fr;}
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.breadcrumb{
  padding:var(--sp-3) 0;
  font-size:0.875rem;
  color:var(--color-text-muted);
}
.breadcrumb a:hover{color:var(--color-primary);}
.breadcrumb .sep{margin:0 6px;}

/* =========================================================================
   SUBNAV — local lateral navigation between the sibling pages of a split
   section (About / Knowledge Hub / News & Events), since each sub-item is
   its own page rather than an anchor on a shared page.
   ========================================================================= */
.subnav{
  background:var(--color-gray-50);
  border-bottom:1px solid var(--color-gray-200);
}
.subnav-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  padding:var(--sp-3) 0;
}
.subnav .chip{background:#fff;}
.subnav .chip.active-chip{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}

/* =========================================================================
   TABS (Committee pages)
   ========================================================================= */
.tabs{width:100%;}
.tablist{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1);
  border-bottom:2px solid var(--color-gray-200);
  margin-bottom:var(--sp-5);
}
.tab-btn{
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:var(--sp-3) var(--sp-3);
  font-weight:600;
  color:var(--color-text-muted);
  min-height:44px;
  margin-bottom:-2px;
}
.tab-btn:hover{color:var(--color-primary);}
.tab-btn[aria-selected="true"]{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* =========================================================================
   FILTERS (Knowledge Hub / News archive)
   ========================================================================= */
.filter-bar{
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.filter-field{display:flex;flex-direction:column;gap:6px;}
.filter-field label{font-size:0.8125rem;font-weight:600;color:var(--color-text-muted);}
.filter-field select,.filter-field input{
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  min-height:44px;
  background:#fff;
}
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  grid-column:1/-1;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--color-gray-200);
  background:#fff;
  font-size:0.8125rem;
  font-weight:600;
  min-height:36px;
}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary);}
.chip[aria-pressed="true"]{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}
.filter-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:var(--sp-2);}

.results-meta{
  color:var(--color-text-muted);
  font-size:0.875rem;
  margin-bottom:var(--sp-3);
}

/* =========================================================================
   FORMS (Login)
   ========================================================================= */
.form-shell{
  max-width:420px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:var(--sp-6) var(--sp-5);
}
.form-field{margin-bottom:var(--sp-4);}
.form-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:0.9375rem;
}
.form-field input{
  width:100%;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  min-height:44px;
}
.form-field input:focus{border-color:var(--color-primary);}
.form-hint{font-size:0.8125rem;color:var(--color-text-muted);margin-top:var(--sp-2);}
.form-check{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-4);}

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dash-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:var(--sp-5);
}
.dash-side{
  background:var(--color-gray-50);
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  padding:var(--sp-3);
  align-self:start;
}
.dash-side a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px var(--sp-3);
  border-radius:var(--radius-sm);
  font-weight:600;
  color:var(--color-text);
  min-height:44px;
}
.dash-side a i{font-size:20px;}
.dash-side a:hover,.dash-side a.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-sm);}
.dash-side hr{border:none;border-top:1px solid var(--color-gray-200);margin:var(--sp-2) 0;}

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.stat-card{
  background:#fff;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
}
.stat-card .stat-value{font-size:1.75rem;font-weight:700;color:var(--color-primary);}
.stat-card .stat-label{color:var(--color-text-muted);font-size:0.875rem;}

.admin-note{
  background:var(--color-gold-tint);
  border:1px solid var(--color-gold);
  border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);
  font-size:0.875rem;
  color:var(--color-charcoal);
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:var(--sp-5);
}
.admin-note i{color:var(--color-gold);font-size:20px;margin-top:2px;}

@media (max-width:800px){
  .dash-layout{grid-template-columns:1fr;}
}

/* =========================================================================
   PROFILE PAGE (Member SAI)
   ========================================================================= */
/* Member SAI profile banner.
   Each country page sets its own city/landmark photo via --hero-photo.
   The overlay stays CHARCOAL here (not the red used on .hero) to preserve the
   existing visual distinction between a section banner and a member profile
   banner — the colour scheme of this component is unchanged, only a photo was
   added underneath it. Charcoal is far darker than the red, so a lower 0.72/
   0.70 alpha is safe: against a worst-case near-white photo region, white
   text over rgba(38,39,41,0.72) computes to ~5.6:1, comfortably WCAG AA.
   Photo credits are listed in the HERO PHOTO CREDITS block above. */
.profile-hero{
  position:relative;
  background-image:
    linear-gradient(135deg, rgba(38,39,41,0.72), rgba(38,39,41,0.70)),
    var(--hero-photo, none);
  background-color:var(--color-charcoal); /* fallback if a photo is missing */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  padding:var(--sp-6) var(--sp-4);
}
.profile-hero-inner{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.profile-logo{
  width:88px;
  height:88px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.profile-logo img{width:75%;height:75%;object-fit:contain;}
.profile-logo-placeholder{
  width:88px;height:88px;border-radius:50%;
  background:var(--color-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;flex-shrink:0;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
@media (max-width:700px){.info-grid{grid-template-columns:1fr;}}
.info-block{
  background:#fff;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
}
.info-block dt{font-weight:600;color:var(--color-text-muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.04em;margin-top:var(--sp-2);}
.info-block dt:first-child{margin-top:0;}
.info-block dd{margin:2px 0 0;}

.link-list a{
  display:flex;align-items:center;gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--color-gray-100);
  font-weight:600;
}
.link-list a:last-child{border-bottom:none;}
.link-list a:hover{color:var(--color-primary);}
.link-list i{font-size:18px;}

/* Stub/placeholder notice used on the 9 lightly-stubbed country & committee pages */
.stub-notice{
  background:var(--color-gray-50);
  border:1px dashed var(--color-gray-400);
  border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);
  color:var(--color-text-muted);
  font-size:0.875rem;
  margin-bottom:var(--sp-5);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.stub-notice i{color:var(--color-primary);font-size:18px;margin-top:2px;}

/* =========================================================================
   MISC UTILITIES
   ========================================================================= */
.flag-emoji-strip{font-size:1.5rem;}
.text-muted{color:var(--color-text-muted);}
.mt-0{margin-top:0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
@media (max-width:700px){.grid-2{grid-template-columns:1fr;}}

.event-timeline{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.event-year-group h3{
  color:var(--color-primary);
  border-bottom:2px solid var(--color-gray-200);
  padding-bottom:var(--sp-2);
}
.event-list-item{
  display:flex;
  gap:var(--sp-3);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--color-gray-100);
}
.event-date-chip{
  flex-shrink:0;
  width:64px;
  text-align:center;
  background:var(--color-gray-50);
  border-radius:var(--radius-sm);
  padding:var(--sp-2) 0;
  font-weight:700;
  color:var(--color-primary);
  font-size:0.8125rem;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--sp-2);
}
.gallery-item{
  aspect-ratio:4/3;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:0.8125rem;
  text-align:center;
  padding:var(--sp-2);
}

.calendar-mock{
  background:#fff;
  border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-top:var(--sp-3);
}
.calendar-grid .cal-dow{
  text-align:center;
  font-size:0.75rem;
  font-weight:700;
  color:var(--color-text-muted);
  padding-bottom:6px;
}
.calendar-grid .cal-day{
  aspect-ratio:1;
  border-radius:var(--radius-sm);
  background:var(--color-gray-50);
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:6px;
  font-size:0.8125rem;
  color:var(--color-text-muted);
  position:relative;
}
.calendar-grid .cal-day.has-event{
  background:var(--color-gold-tint);
  color:var(--color-charcoal);
  font-weight:700;
}
.calendar-grid .cal-day.has-event::after{
  content:"";
  position:absolute;
  bottom:6px;right:6px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--color-primary);
}