/*
Theme Name: MFD Foundation
Theme URI: https://mfdahn.com
Author: Cael
Description: Lightweight block theme for the Mary F. Dahn Foundation. No page builder, no JavaScript, self-hosted fonts.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mfd-foundation
*/

/* ==========================================================================
   MFD Foundation — static prototype stylesheet
   One stylesheet, three pages. No JavaScript. Light by default,
   dark only via prefers-color-scheme.

   Section map:
     01  Fonts
     02  Tokens
     03  Reset + base
     04  Layout + helpers
     05  Navigation (phone pill / laptop rail)
     06  Cover (home hero)
     07  Story + generic two-column
     08  Programmes list
     09  Numbers strip
     10  Partners
     11  From the field (photos)
     12  News
     13  Get involved
     14  Resources band
     15  Footer
     16  Inner page head
     17  Programme detail sections
     18  Laptop layout (>=1024px)
     19  Motion + print
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/dm-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* 02 Tokens -------------------------------------------------------------- */
:root{
  /* brand */
  --forest:#061C14;
  --emerald:#075C3D;
  --bright:#39A978;
  --gold:#C49A39;
  --gold-text:#8A6A12;
  --ivory:#F7F6F0;
  --charcoal:#111A16;
  --mint:#DCEDE5;

  /* semantic — light is the default */
  --bg:#F7F6F0;
  --fg:#111A16;
  --muted:#44524A;
  --line:#DFDCD0;
  --line-strong:#CDC9B8;

  /* dark canvas (cover, footer, always dark) */
  --dark:#061C14;
  --dark-fg:#F7F6F0;
  --dark-muted:#A9BFB3;
  --dark-line:rgba(247,246,240,.16);

  /* status tags */
  --tag-1-bg:#DCEDE5; --tag-1-fg:#075C3D;
  --tag-2-bg:#F4E7C6; --tag-2-fg:#75570D;
  --tag-3-bg:#E6E4DA; --tag-3-fg:#4A544E;

  /* type */
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;

  --step--1:0.8125rem;  /* 13px */
  --step-0:1rem;        /* 16px */
  --step-1:1.125rem;    /* 18px */
  --step-2:1.375rem;    /* 22px */
  --step-3:1.75rem;     /* 28px */
  --mega:clamp(1.7rem,7.2vw,2.2rem);

  --pad:20px;
  --wrap:1280px;
  --radius:4px;
  --pill:999px;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#061C14;
    --fg:#F7F6F0;
    --muted:#B9CBC1;
    --line:#1E3A2E;
    --line-strong:#2B4A3C;
    --gold-text:#C49A39;
    --tag-1-bg:#0F3A2A; --tag-1-fg:#8FD9B6;
    --tag-2-bg:#392E11; --tag-2-fg:#E3C169;
    --tag-3-bg:#1A2C24; --tag-3-fg:#A8BCB2;
  }
}

/* 03 Reset + base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--serif);line-height:1.12;letter-spacing:-0.01em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--charcoal)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--charcoal);padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* 04 Layout + helpers ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.kicker{
  font-family:var(--sans);
  font-size:0.6875rem;      /* 11px */
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0;
}
.kicker--on-dark{color:var(--gold)}

.sec{padding-block:clamp(44px,7vw,76px)}
.sec--tight{padding-block:clamp(32px,4vw,48px)}
.sec + .sec{border-top:1px solid var(--line)}

.sec-head{max-width:34ch}
.sec-head h2{margin-top:10px;font-size:clamp(1.5rem,6vw,1.9rem);text-wrap:balance}
.sec-head p{margin-top:12px;color:var(--muted);font-size:var(--step--1);line-height:1.7}

.rule{width:44px;height:2px;background:var(--gold);border:0;margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:var(--pill);
  font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--gold{background:var(--gold);color:#0B1A13}
.btn--gold:hover{background:#D2AA4C}
.btn--ghost{background:transparent;color:var(--dark-fg);border-color:var(--dark-line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--solid{background:var(--emerald);color:#fffffd}
.btn--solid:hover{background:#0A6E49}
.btn--line{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn--line:hover{border-color:var(--fg)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--step--1);font-weight:700;
  border-bottom:1px solid transparent;padding-bottom:2px;
  min-height:44px;
}
.link-arrow:hover{border-bottom-color:currentColor}
.link-arrow span{transition:transform .18s ease}
.link-arrow:hover span{transform:translateX(3px)}

/* 05 Navigation ---------------------------------------------------------- */
/* Phone: floating pill. Laptop: hairline rail inside the dark canvas. */
.nav{
  position:fixed;z-index:60;top:12px;left:12px;right:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:8px 8px 8px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--pill);
  box-shadow:0 12px 30px rgba(6,28,20,.18);
}
.nav__brand{
  display:flex;align-items:center;gap:10px;
  font-size:0.8125rem;font-weight:700;letter-spacing:.02em;
  color:var(--fg);max-width:58%;
}
.nav__brand b{display:block;font-weight:700;line-height:1.25}
.nav__mark{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--gold);color:#0B1A13;
  display:grid;place-items:center;
  font-family:var(--serif);font-size:13px;letter-spacing:.02em;
}
.nav__links{display:none}
.nav__right{display:flex;align-items:center;gap:10px;flex:none}
/* in dark mode the page ground equals the cover, so the pill needs its own tone */
@media (prefers-color-scheme:dark){.nav{background:#0C2A1F;box-shadow:0 12px 30px rgba(0,0,0,.45)}}

.menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:76px;min-height:44px;padding:0 18px;
  background:var(--emerald);color:var(--ivory);
  border-radius:var(--pill);
  font-size:var(--step--1);font-weight:700;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:#0A6E49}
.menu__glyph{display:none}
.menu nav{
  position:absolute;top:calc(100% + 14px);right:0;
  min-width:min(78vw,280px);
  display:grid;gap:2px;padding:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(6,28,20,.22);
}
.menu nav a{
  padding:13px 14px;border-radius:8px;
  font-size:0.9375rem;font-weight:500;
  min-height:44px;display:flex;align-items:center;
}
.menu nav a:hover{background:var(--mint);color:var(--emerald)}
@media (prefers-color-scheme:dark){.menu nav a:hover{background:#0F3A2A;color:var(--bright)}}

/* 06 Cover --------------------------------------------------------------- */
/* The signature of the site: type standing on the dark ground, people on the
   other side of a diagonal cut, one gold hairline running parallel to the cut.
   Phone: the cut turns horizontal and the photograph sits above the type. */
.stage{background:var(--dark);color:var(--dark-fg);padding-top:84px}
.stage--inner{padding-top:84px}

.cover{
  --cut:26%;            /* how far the photograph leans, as a % of its own width */
  position:relative;
  display:flex;
  flex-direction:column;
}
.cover__figure{
  position:relative;
  width:100%;
  margin:0;
  overflow:visible;
}
.cover__img{
  width:100%;height:100%;
  object-fit:cover;object-position:42% 38%;
  display:block;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 44px));
}
/* the hairline, offset below the cut */
.cover__cut{
  position:absolute;inset:0;pointer-events:none;background:var(--gold);
  clip-path:polygon(
    0 calc(100% - 32px), 100% calc(100% + 12px),
    100% calc(100% + 15px), 0 calc(100% - 29px));
}
.cover__body{padding:clamp(26px,6vw,40px) var(--pad) clamp(40px,8vw,64px)}
.cover h1{
  font-size:var(--mega);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--dark-fg);
  text-wrap:balance;
}
.cover h1 span{color:var(--gold);display:block}
.cover__lede{
  margin-top:16px;
  max-width:38ch;
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--dark-muted);
}
.cover__cta{display:grid;gap:10px;margin-top:24px}
.cover__cta .btn{width:100%}
.cover__place{
  margin:22px 0 0;
  font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark-muted);
}

/* 07 Story + generic two-column ------------------------------------------ */
.split{display:grid;gap:24px}
.split__media{margin:0}
.split__body h2{margin-top:10px;font-size:clamp(1.5rem,5.6vw,2rem);text-wrap:balance}
.split__body p{margin-top:14px;color:var(--muted);font-size:0.9375rem;line-height:1.7}
.split__body .link-arrow{margin-top:18px;color:var(--fg)}

/* placeholder image frame — swap for a real <img> at handover */
.ph{
  position:relative;margin:0;display:block;
  background:
    radial-gradient(120% 90% at 15% 10%,rgba(57,169,120,.22),transparent 60%),
    linear-gradient(160deg,#0E3A2A,#08201A 70%);
  border-radius:var(--radius);
  overflow:hidden;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(247,246,240,.05) 0 1px,transparent 1px 9px);
}
.ph figcaption,
.ph__label{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:1;
  font-size:0.6875rem;letter-spacing:.04em;
  color:rgba(247,246,240,.72);
}
/* drop a real <img> in here and it fits automatically */
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph:has(img)::after{content:none}
.ph:has(img) figcaption{
  left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(6,28,20,.85),rgba(6,28,20,0));
  color:#F7F6F0;
}
.ph--4x3{aspect-ratio:4/3}
.ph--3x2{aspect-ratio:3/2}
.ph--1x1{aspect-ratio:1/1}
.ph--16x9{aspect-ratio:16/9}

/* 08 Programmes list ----------------------------------------------------- */
.progs{margin-top:26px;border-top:1px solid var(--line)}
.prog{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 14px;
  align-items:start;
  padding-block:18px;
  border-bottom:1px solid var(--line);
}
.prog__i{
  display:none;
  font-size:0.6875rem;font-weight:700;letter-spacing:.14em;
  color:var(--muted);padding-top:6px;
}
.prog__name{
  font-family:var(--serif);font-size:1.1875rem;line-height:1.22;
  color:var(--fg);margin:0;
}
.prog__name a:hover{color:var(--emerald)}
@media (prefers-color-scheme:dark){.prog__name a:hover{color:var(--bright)}}
.prog__desc{
  grid-column:1/-1;
  margin-top:6px;
  font-size:0.875rem;line-height:1.6;color:var(--muted);
  max-width:52ch;
}
.prog__go{display:none;color:var(--muted)}

.tag{
  display:inline-block;
  font-size:0.6875rem;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:var(--pill);
  white-space:nowrap;margin:0;
}
.tag--delivered{background:var(--tag-1-bg);color:var(--tag-1-fg)}
.tag--upcoming{background:var(--tag-2-bg);color:var(--tag-2-fg)}
.tag--reported{background:transparent;color:var(--tag-3-fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.tag--proposed{background:var(--tag-3-bg);color:var(--tag-3-fg)}

.sec__foot{margin-top:22px}

/* 09 Numbers strip ------------------------------------------------------- */
.numbers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
}
.numbers b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.75rem,7vw,2.25rem);line-height:1;
}
.numbers span{display:block;margin-top:6px;font-size:0.75rem;line-height:1.4;color:var(--muted)}
.numbers__note{margin-top:16px;font-size:0.75rem;color:var(--muted)}

/* 10 Partners ------------------------------------------------------------ */
.logos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px;
}
.logo{
  display:flex;align-items:center;justify-content:center;
  min-height:64px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:0.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}
.logo--empty{border-style:dashed;color:var(--line-strong)}

/* 11 From the field ----------------------------------------------------- */
.field{display:grid;gap:14px;margin-top:24px}
.field figure{margin:0}
.field figcaption{
  margin-top:8px;font-size:0.75rem;color:var(--muted);line-height:1.5;
}

/* 12 News ---------------------------------------------------------------- */
.news{display:grid;gap:18px;margin-top:24px}
.news__feat h3{margin-top:12px;font-size:1.25rem;line-height:1.22}
.news__feat h3 a:hover{color:var(--emerald)}
@media (prefers-color-scheme:dark){.news__feat h3 a:hover{color:var(--bright)}}
.news__meta{margin-top:8px;font-size:0.75rem;letter-spacing:.04em;color:var(--muted)}
.news__list{display:grid;gap:0;border-top:1px solid var(--line)}
.news__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:16px;border-bottom:1px solid var(--line);
  font-size:0.9375rem;line-height:1.45;
}
.news__item small{flex:none;font-size:0.75rem;color:var(--muted)}
.news__item:hover{color:var(--emerald)}
@media (prefers-color-scheme:dark){.news__item:hover{color:var(--bright)}}

/* 13 Get involved -------------------------------------------------------- */
.involve{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--line)}
.involve__col{padding-block:20px;border-bottom:1px solid var(--line)}
.involve__col h3{font-size:1.125rem;margin-top:8px}
.involve__col p{margin-top:6px;font-size:0.875rem;line-height:1.6;color:var(--muted);max-width:38ch}
.involve__col .link-arrow{margin-top:10px}

/* 14 Resources band ------------------------------------------------------ */
.band{background:var(--emerald);color:var(--ivory);border-radius:14px;padding:26px 22px;margin-inline:var(--pad)}
.band h2{font-size:1.3125rem;margin-top:10px;color:var(--ivory)}
.band p{margin-top:8px;font-size:0.875rem;color:#CFE8DD;max-width:40ch}
.band .btn{margin-top:18px}

/* 15 Footer -------------------------------------------------------------- */
.foot{background:var(--dark);color:var(--dark-fg);margin-top:56px;padding-block:34px 26px}
.foot__tag{font-family:var(--serif);font-size:1.25rem;line-height:1.3;color:var(--gold);max-width:22ch}
.foot__remember{margin-top:14px;font-size:0.8125rem;line-height:1.5;color:var(--dark-muted);max-width:32ch}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font-size:0.875rem}
.foot__links a{min-height:44px;display:inline-flex;align-items:center;color:var(--dark-muted)}
.foot__links a:hover{color:var(--gold)}
.foot__legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--dark-line);font-size:0.75rem;color:#8B9E94}

/* 16 Inner page head ----------------------------------------------------- */
.pagehead{padding-block:clamp(26px,6vw,44px) clamp(32px,6vw,52px)}
.pagehead h1{font-size:clamp(2rem,9vw,3rem);line-height:1.05;letter-spacing:-0.02em;margin-top:16px;text-wrap:balance}
.pagehead p{margin-top:16px;max-width:52ch;font-size:var(--step-1);line-height:1.55;color:var(--dark-muted)}

/* 17 Programme detail sections ------------------------------------------- */
.pdet{display:grid;gap:14px;padding-block:clamp(26px,5vw,40px);border-bottom:1px solid var(--line)}
.pdet:first-of-type{border-top:1px solid var(--line)}
.pdet__name{font-size:clamp(1.25rem,5vw,1.6rem);line-height:1.18;margin-top:10px}
.pdet__desc{font-size:0.9375rem;line-height:1.7;color:var(--muted);max-width:56ch;margin-top:8px}
.pdet dl{margin:0;display:grid;gap:10px;font-size:0.8125rem}
.pdet dt{font-size:0.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text)}
.pdet dd{margin:2px 0 0;color:var(--fg);line-height:1.55}

/* 18 Laptop layout (>=1024px) -------------------------------------------- */
@media (min-width:1024px){
  :root{--pad:clamp(32px,4.6vw,72px);--mega:clamp(3.6rem,7.2vw,6.4rem)}

  body{font-size:1.0625rem}

  /* nav becomes a hairline rail sitting inside the dark canvas */
  .nav{
    position:static;top:auto;left:auto;right:auto;
    max-width:none;
    min-height:0;height:auto;
    padding:0;
    background:transparent;
    border:0;border-bottom:1px solid var(--dark-line);
    border-radius:0;box-shadow:none;
    color:var(--dark-fg);
  }
  .nav__brand{max-width:none;flex:1;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);align-items:flex-start}
  .nav__brand b{display:block;line-height:1.4}
  .nav__brand br{display:none}
  .nav__mark{display:none}
  .nav__right{flex:1;justify-content:flex-end;gap:26px}

  .menu summary{
    min-width:0;width:44px;padding:0;
    background:transparent;border-radius:6px;
  }
  .menu summary:hover{background:rgba(247,246,240,.08)}
  .menu__label{position:absolute;left:-9999px}
  .menu__glyph{display:grid;gap:5px;width:22px}
  .menu__glyph i{display:block;height:1.5px;background:currentColor;color:var(--dark-fg)}
  .menu nav{
    top:calc(100% + 18px);
    min-width:260px;
    background:var(--dark);
    border-color:var(--dark-line);
    border-radius:10px;
    padding:10px;
  }
  .menu nav a{color:var(--dark-fg);font-size:0.875rem}
  .menu nav a:hover{background:rgba(247,246,240,.08);color:var(--gold)}

  /* nav is static on laptop, so the stage needs no offset */
  .stage{padding-top:0}
  .stage--inner{padding-top:0}
  .stage > .nav-wrap{padding-block:22px}

  /* cover: the type stands on the dark ground, the photograph is cut in from
     the right, and one gold hairline runs parallel to that cut */
  .cover{
    --cut:24%;
    display:block;
    min-height:min(86svh,880px);
    padding:0;
  }
  .cover__figure{
    position:absolute;inset:0 0 0 auto;
    width:50%;height:100%;
  }
  .cover__img{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
  .cover__cut{
    clip-path:polygon(
      calc(var(--cut) - 17px) 0, calc(var(--cut) - 13px) 0,
      3px 100%, 0 100%);
  }
  .cover__body{
    position:relative;z-index:2;
    display:flex;flex-direction:column;justify-content:center;
    min-height:min(86svh,880px);
    width:100%;
    padding-block:clamp(48px,6vw,84px);
    padding-left:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
    padding-right:calc(50% + var(--pad));
  }
  .cover h1{
    font-size:clamp(2.1rem,3.6vw,3.2rem);
    line-height:1.05;
    letter-spacing:-0.025em;
    max-width:22ch;
  }
  .cover h1 span{display:block}
  .cover__lede{
    margin-top:clamp(16px,1.8vw,24px);
    max-width:34ch;
    font-size:clamp(1rem,1.2vw,1.125rem);
    line-height:1.55;
  }
  .cover__cta{display:flex;gap:14px;margin-top:clamp(26px,2.8vw,38px)}
  .cover__cta .btn{width:auto;flex:0 0 auto}
  .cover__place{
    position:absolute;left:0;bottom:clamp(26px,3vw,42px);
    margin:0;
    padding-left:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  }

  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px);align-items:start}
  .split--flip .split__media{order:2}
  .split__body h2{font-size:clamp(1.75rem,2.5vw,2.35rem);margin-top:14px}
  .split__body p{font-size:1rem}

  .sec{padding-block:clamp(64px,7vw,104px)}
  .sec-head h2{font-size:clamp(2rem,2.7vw,2.6rem)}
  .sec-head p{font-size:0.9375rem;max-width:46ch}

  /* programmes: index / name+desc / status / arrow */
  .progs{margin-top:clamp(32px,4vw,44px)}
  .prog{
    grid-template-columns:56px minmax(0,1fr) 130px 32px;
    align-items:baseline;
    gap:24px;
    padding-block:clamp(20px,2vw,26px);
    transition:background-color .18s ease;
  }
  .prog__i{display:block}
  .prog__name{font-size:clamp(1.25rem,1.7vw,1.6rem)}
  .prog__desc{grid-column:2;margin-top:4px;max-width:60ch}
  .prog__status{justify-self:start}
  .prog__go{display:block;justify-self:end;font-size:1rem;transition:transform .18s ease}
  .prog:hover{background:rgba(7,92,61,.045)}
  @media (prefers-color-scheme:dark){.prog:hover{background:rgba(57,169,120,.08)}}
  .prog:hover .prog__go{transform:translateX(4px)}
  .prog:hover .prog__name a{color:var(--emerald)}
  @media (prefers-color-scheme:dark){.prog:hover .prog__name a{color:var(--bright)}}

  .numbers{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,44px)}
  .numbers b{font-size:clamp(2.5rem,3.6vw,3.5rem)}
  .numbers span{font-size:0.8125rem;margin-top:10px}

  .logos{grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(28px,3.4vw,38px)}
  .logo{min-height:86px}

  .field{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,3.4vw,38px)}
  .field__lead{grid-column:1/-1}

  .news{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,72px);align-items:start;margin-top:clamp(28px,3.4vw,40px)}
  .news__list{border-top:0}
  .news__feat h3{font-size:clamp(1.5rem,2vw,1.9rem)}

  .involve{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line)}
  .involve__col{border-bottom:0;padding-block:26px 0}
  .involve__col + .involve__col{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,48px)}

  .band{
    margin-inline:0;
    border-radius:6px;
    padding:clamp(32px,3.5vw,48px);
    display:flex;align-items:center;justify-content:space-between;gap:40px;
  }
  .band h2{font-size:clamp(1.5rem,2vw,1.9rem)}
  .band .btn{margin-top:0;flex:none}

  .foot{margin-top:clamp(64px,7vw,104px);padding-block:clamp(44px,4.6vw,64px) 30px}
  .foot__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:48px;align-items:start}
  .foot__tag{font-size:clamp(1.5rem,2.1vw,1.9rem);max-width:24ch}
  .foot__links{margin-top:0;justify-content:flex-end}

  .pagehead{padding-block:clamp(56px,6.5vw,88px) clamp(48px,6vw,72px)}
  .pagehead h1{font-size:clamp(2.6rem,5.4vw,4.4rem);max-width:20ch}
  .pagehead p{font-size:clamp(1.0625rem,1.3vw,1.25rem);max-width:58ch}

  .pdet{grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:clamp(40px,6vw,80px);padding-block:clamp(40px,4.6vw,64px)}
  .pdet__desc{font-size:1rem}
  .pdet dl{grid-template-columns:1fr 1fr;gap:18px 32px}
}

/* 19 Motion + print ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
  .nav,.menu,.foot,.band{background:transparent;color:#000}
  .stage{background:#fff;color:#000}
}


/* ==========================================================================
   WORDPRESS LAYER — neutralise core block defaults so the design CSS rules.
   Everything above this line is the design and is identical to site/.
   ========================================================================== */
body{background:var(--bg)}
.wp-site-blocks{padding:0;margin:0}
.wp-site-blocks > *{margin-block-start:0}
.wp-block-group{margin-block-start:0;margin-block-end:0;padding:0;border:0}
.wp-block-group.has-background{padding:0}
.wp-block-heading{margin:0;font-family:var(--serif);font-weight:400}
.wp-block-paragraph{margin:0}
.wp-block-image{margin:0}
.wp-block-image img{width:100%;height:auto}
.wp-block-image.cover__figure{margin:0;width:100%}
.wp-block-image figcaption{margin-top:8px;font-size:0.75rem;color:var(--muted)}
.wp-block-buttons{margin:0}
.wp-block-button{margin:0}
.wp-block-separator{margin:0}
.wp-block-post-terms{margin:0}
.wp-block-post-title{margin:0}
.wp-block-post-excerpt{margin:0}
.wp-block-post-excerpt__excerpt{margin:0}
.wp-block-post-featured-image{margin:0}
.alignfull{width:100%;max-width:100%}
.alignwide{max-width:var(--wrap);margin-inline:auto}
.admin-bar .nav{top:44px}
@media (min-width:783px){.admin-bar .nav{top:44px}}

/* cover: the diagonal hairline as a pseudo-element, so the block markup stays clean */
.cover__figure{position:relative}
.cover__figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--gold);
  clip-path:polygon(0 calc(100% - 32px),100% calc(100% + 12px),100% calc(100% + 15px),0 calc(100% - 29px));
}
@media (min-width:1024px){
  .cover__figure::after{
    clip-path:polygon(calc(var(--cut) - 17px) 0,calc(var(--cut) - 13px) 0,3px 100%,0 100%);
  }
}

/* query loops: programmes and news reuse the static markup's classes */
.wp-block-query .wp-block-post-template{margin:0;padding:0;list-style:none}
.progs .wp-block-post-template > li,.progs > li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:start;padding-block:18px;border-bottom:1px solid var(--line)}
@media (min-width:1024px){
  .progs .wp-block-post-template > li,.progs > li{grid-template-columns:56px minmax(0,1fr) 130px 32px;align-items:baseline;gap:24px;padding-block:clamp(20px,2vw,26px)}
  .progs .wp-block-post-template > li:hover,.progs > li:hover{background:rgba(7,92,61,.045)}
}
.prog__name{font-size:1.1875rem}
@media (min-width:1024px){.prog__name{font-size:clamp(1.25rem,1.7vw,1.6rem)}}

/* ==========================================================================
   WORDPRESS LAYER 2 — header parts, block buttons, article pages
   ========================================================================== */

/* header is its own part now, so the dark ground lives here */
.mfd-head{background:var(--dark);color:var(--dark-fg);padding-top:84px}
.coverwrap{background:var(--dark);color:var(--dark-fg)}
@media (min-width:1024px){
  .mfd-head{padding-top:0;padding-block:22px}
}

/* cover photograph: clip-path lives on the image, not a span */
.cover__figure img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:42% 38%;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 44px));
}
@media (min-width:1024px){
  .cover__figure img{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
}

/* block buttons: the .btn class sits on the wrapper, so style the link */
.wp-block-button.btn{display:inline-flex;padding:0;background:none;border:0;border-radius:0;margin:0}
.wp-block-button.btn .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:var(--pill);
  font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  border:1px solid transparent;text-align:center;text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.wp-block-button.btn--gold .wp-block-button__link{background:var(--gold);color:#0B1A13}
.wp-block-button.btn--gold .wp-block-button__link:hover{background:#D2AA4C}
.wp-block-button.btn--ghost .wp-block-button__link{background:transparent;color:var(--dark-fg);border-color:var(--dark-line)}
.wp-block-button.btn--ghost .wp-block-button__link:hover{border-color:var(--gold);color:var(--gold)}
.wp-block-button.btn--line .wp-block-button__link{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.wp-block-button.btn--line .wp-block-button__link:hover{border-color:var(--fg)}
.wp-block-button.btn--solid .wp-block-button__link{background:var(--emerald);color:#fffffd}
.cover__cta .wp-block-button.btn{width:100%}
@media (min-width:1024px){.cover__cta .wp-block-button.btn{width:auto}}
.band .wp-block-buttons{margin-top:18px}

/* article / page bodies */
.article{padding-block:clamp(32px,5vw,56px)}
.article h2{font-size:clamp(1.5rem,4.5vw,1.9rem);margin-top:1.6em}
.article h3{font-size:1.125rem;margin-top:1.4em}
.article p,.article li{font-size:1rem;line-height:1.7;color:var(--muted);margin-top:1em}
.article ul{list-style:disc;padding-left:1.2em}
.article a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.article strong{color:var(--fg)}

/* single post / programme meta */
.postmeta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:0.75rem;color:var(--muted);margin-bottom:6px}
.postmeta .tag{font-size:0.6875rem}