/* ---------- reset ---------- */
html{color-scheme:light dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- tokens: light is the base, both dark states redefine ---------- */
:root{
  --paper:#F1F5FA;
  --surface:#FFFFFF;
  --surface-2:#E7EDF7;
  --ink:#10203D;
  --muted:#56668A;
  --rule:#D2DBEA;
  --blue:#1B4383;
  --blue-deep:#0D2450;
  --blue-soft:#E4EBF8;
  --orange:#F47937;
  /* Small uppercase labels use this on white, on --paper and on the
     --blue-soft note panel. At #C4551B it measured 4.11 and 3.76 on the
     last two, under the 4.5 small text needs. */
  --orange-ink:#A84918;
  --gold:#FEBF50;
  --on-blue:#F3F7FF;
  --on-blue-muted:#A9BEE4;
  --shadow:0 1px 2px rgba(13,36,80,.06), 0 8px 24px -12px rgba(13,36,80,.22);
  /* The hero is dark in both themes, on purpose. A light wash over moving
     footage washes the film out and leaves the text sitting on whatever the
     frame happens to be doing. Committing to dark keeps the film legible and
     the text contrast fixed, and it matches the mastheads on every inner
     page, which are dark in both themes already. */
  --hero-fallback:#08152B;
  --hero-ink:#EAF1FF;
  --hero-sub:#B9CBEA;
  --hero-eyebrow:#FFCE72;
  --hero-scrim:linear-gradient(100deg, rgba(8,21,43,.92) 0%, rgba(8,21,43,.82) 52%, rgba(8,21,43,.34) 84%, rgba(8,21,43,.18) 100%);
  --hero-scrim-flat:linear-gradient(180deg, rgba(8,21,43,.88), rgba(8,21,43,.80));
  /* the hero's ground, painted twice: on the band itself, and on the cover
     that hides the film whenever it is not demonstrably playing */
  --hero-ground:radial-gradient(120% 140% at 78% 20%, rgba(27,67,131,.55) 0%, transparent 60%),
    linear-gradient(155deg, #0C2145 0%, var(--hero-fallback) 55%);
  --maxw:1090px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1424;
    --surface:#101E36;
    --surface-2:#16273f;
    --ink:#E9EFF9;
    --muted:#9DACC8;
    --rule:#22375B;
    --blue:#77A2E6;
    --blue-deep:#08152B;
    --blue-soft:#16273F;
    --orange:#FF9257;
    --orange-ink:#FFAE7E;
    --gold:#FFCE72;
    --on-blue:#EAF1FF;
    --on-blue-muted:#9FB6DE;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0A1424;
  --surface:#101E36;
  --surface-2:#16273f;
  --ink:#E9EFF9;
  --muted:#9DACC8;
  --rule:#22375B;
  --blue:#77A2E6;
  --blue-deep:#08152B;
  --blue-soft:#16273F;
  --orange:#FF9257;
  --orange-ink:#FFAE7E;
  --gold:#FFCE72;
  --on-blue:#EAF1FF;
  --on-blue-muted:#9FB6DE;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.ui{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.08;letter-spacing:-.015em;overflow-wrap:break-word}
p{margin:0}
a{color:var(--blue)}
img{display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.7188rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-ink);margin:0;
}
.eyebrow.on-dark{color:var(--gold)}
.lede{font-size:1.25rem;color:var(--muted);max-width:62ch}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{height:30px;width:auto}
.brand span{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.6562rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);max-width:132px;line-height:1.25;
}
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main a,nav.main button{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.875rem;font-weight:600;color:var(--ink);
  background:none;border:0;padding:9px 12px;border-radius:7px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
nav.main a:hover,nav.main button:hover{background:var(--blue-soft);color:var(--blue)}
nav.main a.on{color:var(--blue);background:var(--blue-soft)}
.cta-top{
  background:var(--blue) !important;color:var(--on-blue) !important;
  padding:9px 16px !important;border-radius:7px;
}
:root[data-theme="dark"] .cta-top,
:root:not([data-theme="light"]) .cta-top{color:#08152B !important}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .cta-top{color:#F3F7FF !important}}

nav.main button.theme-toggle{
  flex:0 0 auto;width:36px;height:36px;padding:0;margin-left:2px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);border-radius:999px;
  color:var(--ink);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
nav.main button.theme-toggle:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.theme-toggle svg{
  flex:0 0 auto;                 /* or the flex row shrinks it to 12px wide */
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 8px);width:288px;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow);padding:7px;display:flex;flex-direction:column;gap:2px;
}
.menu a{display:block;padding:10px 12px;border-radius:8px;font-size:0.875rem}
.menu a small{
  display:block;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;
  font-size:0.7188rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}
.burger{
  display:none;
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.875rem;font-weight:600;color:var(--ink);
  background:none;border:1px solid var(--rule);border-radius:7px;
  padding:8px 14px;cursor:pointer;
}

/* ---------- hero ---------- */
/* The hero opens on its own ground and the film fades in over it once it is
   actually playing. Phones, reduced-motion readers and readers saving data get
   the ground alone, which is never the wrong picture. Drop a real photograph at
   public/hero.jpg and put the img back to give them one instead; the CSS for
   it is right below. */
.hero{position:relative;color:var(--hero-ink);overflow:hidden;isolation:isolate;
  background:var(--hero-ground);}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;   /* matches the film, which is centred */
  filter:brightness(1.12) saturate(1.04)}
/* A plain video file, cropped to the band the way a photograph would be. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;z-index:0;pointer-events:none;
  filter:brightness(1.12) saturate(1.04)}
/* The ground again, laid over the film until it is actually playing, so a
   slow network or a refused autoplay never shows a black box. site.js sets
   data-film="on" when the video fires "playing", and the film fades in. */
.hero-cover{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--hero-ground);opacity:1;transition:none}
.hero[data-film="on"] .hero-cover{opacity:0;transition:opacity .8s ease}
.hero-pause{
  position:absolute;right:18px;bottom:18px;z-index:3;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  box-shadow:var(--shadow);
}
.hero-pause svg{width:15px;height:15px;fill:currentColor}
.hero-pause:hover{border-color:var(--blue);color:var(--blue)}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-scrim);z-index:1}
@media (max-width:899px){
  .hero::after{background:var(--hero-scrim-flat)}
}
.hero .wrap{position:relative;z-index:2;padding-top:92px;padding-bottom:100px}
.hero .eyebrow{color:var(--hero-eyebrow)}
.hero h1{
  font-weight:800;font-size:clamp(2.125rem,8.6vw,5.375rem);letter-spacing:-.028em;
  margin:14px 0 18px;max-width:15ch;
}
.hero .lede{color:var(--hero-sub);font-size:1.3125rem;max-width:46ch}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.9062rem;font-weight:700;letter-spacing:.01em;
  padding:14px 26px;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;display:inline-block;
}
.btn-outline{background:var(--surface);border-color:var(--orange);color:var(--orange-ink)}
.btn-outline:hover{background:var(--blue-soft)}
.btn-ghost{border-color:rgba(169,190,228,.5);color:var(--on-blue)}
.btn-ghost:hover{border-color:var(--on-blue)}
.btn-blue{background:var(--blue);color:var(--surface)}
:root[data-theme="dark"] .btn-blue,:root:not([data-theme="light"]) .btn-blue{color:#08152B}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-blue{color:#FFFFFF}}

/* ---------- stats ---------- */
.stats{background:var(--surface);border-bottom:1px solid var(--rule)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;max-width:var(--maxw)}
.stat{padding:26px 22px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0}
.stat b{
  display:block;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:2.5rem;font-weight:800;color:var(--blue);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat span{
  display:block;margin-top:7px;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}

/* ---------- sections ---------- */
section.band{padding:78px 0}
.band-alt{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section-head{max-width:64ch;margin-bottom:34px}
.section-head h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;margin:12px 0 14px}
.section-head p{color:var(--muted)}

/* ---------- programs: the register ----------
   Four programmes are not four products, so they are not four boxes. They are
   one centre's list of what it does, set the way a practice sets a list: a
   hairline between each, a wide left field holding the one thing that really
   separates them, and the name given room.

   Programme colour used to drive four things at once, including a diagonal
   wash across the whole card, which is what turned orange and gold to brown on
   the dark ground. It now draws exactly one mark: a short rule above the
   audience label. The mark is decoration and the label under it carries the
   meaning, so nothing is lost to a reader who cannot pick the colour out. */
.prog-grid{display:block}

.prog{
  --accent:var(--blue);
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  column-gap:clamp(1.75rem,5vw,4.5rem);
  row-gap:.75rem;
  align-items:start;
  padding:clamp(2.25rem,4.4vw,3.5rem) 1.25rem;
  margin-inline:-1.25rem;          /* rules run wider than the text, inside .wrap's 22px */
  border-bottom:1px solid var(--rule);
  border-radius:3px;
  text-decoration:none;color:inherit;
  transition:background-color .28s ease;
}
.prog:first-child{border-top:1px solid var(--rule)}
.prog:hover,
.prog:focus-visible{background-color:color-mix(in srgb, var(--ink) 4%, transparent)}
.prog:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.prog.p-lp{--accent:var(--blue)}
.prog.p-women{--accent:var(--orange)}
.prog.p-comm{--accent:var(--gold)}
.prog.p-t3{--accent:var(--muted)}

/* the left field: who it is for, at full strength rather than quieted */
.prog > .eyebrow{
  grid-column:1;grid-row:1;align-self:start;
  padding-top:.5rem;
  color:var(--ink);
  font-size:.6875rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.45;
}
.prog > .eyebrow::before{
  content:"";display:block;
  width:2.75rem;height:.25rem;margin-bottom:1rem;
  background:var(--accent);
  transition:width .28s cubic-bezier(.2,.7,.3,1);
}
.prog:hover > .eyebrow::before,
.prog:focus-visible > .eyebrow::before{width:4.5rem}

/* the name is pinned to row 1 so everything else falls under it. The 404 page
   uses these same rows without a sub-line or a description and still lays out. */
.prog > :not(.eyebrow){grid-column:2}
.prog > h3{
  grid-row:1;
  font-size:clamp(1.75rem,3.2vw,2.375rem);
  font-weight:300;letter-spacing:-.022em;line-height:1.06;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:.16em;text-decoration-thickness:1px;
  transition:text-decoration-color .28s ease;
}
.prog:hover > h3,
.prog:focus-visible > h3{text-decoration-color:currentColor}
.prog .full{margin-top:-.3rem;font-size:.9375rem;font-style:italic;color:var(--muted)}
.prog p.body{max-width:54ch;font-size:1.0625rem;color:var(--muted)}
.prog .go{margin-top:.55rem;font-size:.875rem;font-weight:600;color:var(--blue)}
.prog .go .arw{display:inline-block;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.prog:hover .go .arw,
.prog:focus-visible .go .arw{transform:translateX(6px)}

@media (max-width:760px){
  .prog{
    grid-template-columns:1fr;row-gap:.6rem;
    padding-inline:1rem;margin-inline:-1rem;
  }
  .prog > .eyebrow{grid-row:auto;padding-top:0}
  .prog > h3{grid-row:auto}
  .prog > :not(.eyebrow){grid-column:1}
}

/* watch row */
.watch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.watch{
  border:1px solid var(--rule);border-radius:13px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
}
.watch .poster{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  padding:0;border:0;background:var(--blue-deep);cursor:pointer;overflow:hidden;
}
.watch .poster img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease, filter .3s ease}
.watch .poster:hover img{transform:scale(1.03);filter:brightness(.9)}
.watch .poster:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.watch .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:45px;display:block;
}
.watch .play svg{width:100%;height:100%;display:block}
.watch .play .play-bg{fill:#12121280;transition:fill .2s ease}
.watch .poster:hover .play .play-bg{fill:#E4262B}
.watch iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
/* While a clicked film loads: the hero's ground and a line of text, under the
   player, instead of a blank box. */
.watch .frame{position:relative;aspect-ratio:16/9;background:var(--hero-fallback)}
.watch .frame iframe{position:absolute;inset:0;height:100%}
.frame-status{
  position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  color:var(--hero-sub);font-size:0.9375rem;font-weight:600;
}
.watch .meta{padding:15px 17px 17px}
.watch h3{font-size:1.0625rem;font-weight:700}
.watch .meta small{
  display:block;margin-top:6px;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* notes = things that are not true yet, said out loud */
.note{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--blue-soft);border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;padding:16px 20px;font-size:0.9375rem;color:var(--ink);
}
.note b{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-ink);white-space:nowrap;padding-top:3px}

/* partners */
.partners{
  /* These are lockups, not icons. Several carry a line of small type, and
     at a 130px track the Department of Education mark is 6:1, which put
     its wording at about three pixels tall. Bigger tracks, taller cap. */
  /* Three tracks, and the two widest lockups take two of them. Nine track
     units across seven marks divides into three even rows, and it gives a
     6:1 mark like the Department of Education one the width its wording
     actually needs. */
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;padding:0;margin:0;list-style:none;
}
.partners li{
  /* Every one of these marks is dark on transparent, so they sit on a light
     plate in both themes. Recolouring somebody else's logo to suit a dark
     background is exactly what their brand guidelines forbid. */
  background:#FFFFFF;border:1px solid var(--rule);border-radius:12px;
  min-height:150px;
  display:flex;align-items:center;justify-content:center;
}
.partners li{padding:0}
.partners a{
  width:100%;height:100%;min-height:150px;padding:20px 24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;transition:transform .2s ease;
}
.partners a:hover{transform:scale(1.04)}
.partners a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.partners .p-wide{grid-column:span 2}
/* the stacked lockups are height-bound, so the cap is what sets their size */
.partners img{max-width:100%;max-height:106px;width:auto;height:auto;object-fit:contain}
/* visible to a screen reader, not on screen */
.u-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* quote */
.quote{border-left:3px solid var(--orange);padding-left:26px;max-width:60ch}
.quote p{font-size:1.5rem;line-height:1.42;font-style:italic}
.quote footer{
  margin-top:14px;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7812rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* ---------- program page template ---------- */
.masthead{background:var(--blue-deep);color:var(--on-blue);padding:52px 0 46px}
.masthead h1{font-size:clamp(1.8125rem,7vw,3.75rem);font-weight:800;margin:12px 0 14px}
.masthead .lede{color:var(--on-blue-muted);font-size:1.2188rem}
.masthead .rulebar{height:5px;width:74px;background:var(--orange);border-radius:3px;margin-bottom:22px}
.back{
  display:inline-block;margin-bottom:20px;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.8125rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--on-blue-muted);text-decoration:none;
}
.back:hover{color:var(--on-blue)}

.two-col{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:46px;align-items:start}
.prose h2{font-size:1.625rem;font-weight:800;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--orange);
}
.pull{
  background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:22px 24px;
  font-size:1.125rem;line-height:1.5;font-style:italic;color:var(--ink);
}
.pull cite{
  display:block;font-style:normal;margin-top:12px;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.7188rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
.sidecard{background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:20px 22px}
.sidecard h3{
  font-size:0.7188rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.linklist{display:flex;flex-direction:column;gap:9px}
.linklist a{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.9062rem;font-weight:600;text-decoration:none;display:flex;gap:8px;align-items:baseline}
.linklist a:hover{text-decoration:underline}
.linklist a small{font-weight:500;color:var(--muted);font-size:0.75rem;letter-spacing:.02em}
.linklist a::before{content:"\2192";color:var(--orange);font-weight:700}
.factrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--rule);font-size:0.9375rem}
.factrow:first-of-type{border-top:0;padding-top:0}
.factrow dt{color:var(--muted)}
.factrow dd{margin:0;text-align:right;font-weight:600}

/* ---------- calendar ---------- */
.series{display:flex;flex-direction:column;gap:14px}
.ev{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:22px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:20px 24px;
}
.when{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  border-right:1px solid var(--rule);padding-right:18px;
}
.when b{display:block;font-size:0.9375rem;font-weight:800;color:var(--blue);letter-spacing:.02em}
.when span{display:block;font-size:0.7188rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.ev h3{font-size:1.25rem;font-weight:700}
.ev p{font-size:0.9375rem;color:var(--muted);margin-top:4px}
.tbd{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-ink);border:1px dashed var(--orange);
  border-radius:999px;padding:6px 13px;white-space:nowrap;
}
.tbd.held{color:var(--muted);border-style:solid;border-color:var(--rule)}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.person{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:26px}
/* Displayed at exactly half the file's pixel width, so both portraits are
   sharp on a 2x screen. Yvette's original upload is only 236px wide, which is
   what sets this size; anything larger would soften it. */
.person .portrait{
  width:132px;height:176px;object-fit:cover;object-position:50% 12%;
  border-radius:10px;border:1px solid var(--rule);margin-bottom:16px;
  background:var(--blue-soft);
}
.person h3{font-size:1.4375rem;font-weight:800}
.person .role{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-ink);margin:6px 0 13px;
}
.person p{font-size:1rem;color:var(--muted)}
.person a{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.875rem;font-weight:600;display:inline-block;margin-top:12px}
.board{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:12px;margin-top:20px;padding:0;list-style:none;
}
.bm{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:14px 16px;
}
/* A monogram, not a stand-in for a photograph. Swap it for an <img> the day
   a member sends one we are allowed to publish. */
.bm-mono{
  flex:0 0 auto;width:44px;height:44px;border-radius:10px;
  background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.9062rem;font-weight:700;letter-spacing:.03em;
}
/* A member's photograph, once there is one we may publish: the same square in
   the same place, so the row does not shift. In about.html, replace
   <span class="bm-mono" ...>PL</span> with
   <img class="bm-photo" src="/board-lessane.jpg" alt="" width="88" height="88">.
   The alt is empty because the name is printed right beside it. */
.bm-photo{flex:0 0 auto;width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--blue-soft)}
.bm-text{display:flex;flex-direction:column;min-width:0}
.bm-text b{font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.9688rem;font-weight:700;line-height:1.25}
.bm-text small{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}

/* ---------- footer ---------- */
footer.site{background:var(--blue-deep);color:var(--on-blue);padding:48px 0 26px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:2fr repeat(3,auto);gap:32px 44px;align-items:start}
@media (max-width:1000px){
  /* no room for the address beside three lists: address on top, lists across */
  footer.site .cols{grid-template-columns:repeat(3,1fr)}
  footer.site .cols > :first-child{grid-column:1/-1}
}
footer.site img{height:34px;width:auto;margin-bottom:14px}
footer.site p{color:var(--on-blue-muted);font-size:0.9688rem;max-width:38ch}
footer.site address{color:var(--on-blue-muted);font-size:0.9688rem;font-style:normal;margin-top:12px;line-height:1.5}
.section-head address{font-style:normal;color:var(--muted);font-size:1rem}
footer.site h2{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:13px;
}
/* Only the link columns stack. Written as footer.site nav, this rule also
   caught the policies bar and stood its nine links in a column. */
footer.site .cols nav, footer.site .stack{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
footer.site a{color:var(--on-blue);text-decoration:none;font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.9062rem;font-weight:500;
  display:inline-block;min-height:24px;line-height:1.55}
footer.site a:hover{text-decoration:underline;color:var(--gold)}
/* One bar under the columns: the copyright, then the policies, ours and the
   university's, wrapping the way a line of text does. */
.policies{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
footer.site .policies a{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.8438rem;font-weight:500;
  color:var(--on-blue);text-decoration:none;
  display:inline-block;min-height:24px;line-height:1.55;
}
.policies a:hover{color:var(--gold);text-decoration:underline}
.policies-from{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-blue-muted);
  margin-left:10px;
}
.legal{
  margin-top:36px;padding-top:18px;border-top:1px solid rgba(169,190,228,.22);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px 32px;flex-wrap:wrap;
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7812rem;color:var(--on-blue-muted);
}

/* ---------- contact bar, small screens only ----------
   Below 900px the header's Contact button folds into the menu, which left most
   pages with no way to reach EDAC in view until the footer. */
.sticky-cta{display:none}
@media (max-width:900px){
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--blue-deep);border-top:1px solid rgba(169,190,228,.22);
    box-shadow:0 -6px 18px rgba(8,21,43,.18);
  }
  .sticky-cta a{
    display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;
    font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:0.9375rem;font-weight:700;text-decoration:none;
    color:var(--on-blue);border:1px solid rgba(169,190,228,.35);
  }
  .sticky-cta a.sticky-cta-main{background:var(--gold);border-color:var(--gold);color:var(--blue-deep)}
  .sticky-cta a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  /* room under the footer so the bar never covers its last line */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media print{.sticky-cta{display:none}}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  /* --blue lifts to a light tint on the dark theme, and white on that is
     2.6:1. --blue-deep is dark in both themes and --on-blue is light in
     both, so this pair holds either way. */
  background:var(--blue-deep);color:var(--on-blue);padding:12px 20px;border-radius:0 0 8px 8px;
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.875rem;font-weight:700;
  text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:0}
main:focus{outline:none}

:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

/* ---------- podcasts ---------- */
/* the group label is a real heading, so it needs the eyebrow look back;
   .section-head h2 would otherwise make it a 40px title */
.pod-group{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:0.7188rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 8px;line-height:1.4;
}
.section-head h2.pod-group{font-size:0.7188rem;margin:0 0 8px}
.pod-list{display:flex;flex-direction:column;gap:16px;margin-bottom:42px}
.pod{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:20px;
}
.pod-art{display:block;border-radius:9px;overflow:hidden;border:1px solid var(--rule);background:var(--blue-deep)}
.pod-art img{width:100%;height:auto;display:block}
.pod-body h3{font-size:1.3125rem;font-weight:800}
.pod-body h3 a{color:var(--ink);text-decoration:none}
.pod-body h3 a:hover{color:var(--blue);text-decoration:underline}
.pod-channel{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.7188rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px;
}
.pod-blurb{font-size:1rem;color:var(--muted);margin-top:11px;max-width:62ch}
.pod-recent{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);margin-top:17px;
}
.pod-eps{list-style:none;padding:0;margin:9px 0 0;display:flex;flex-direction:column;gap:4px}
.pod-eps a{
  color:var(--ink);text-decoration:none;font-size:0.9375rem;
  display:inline-block;min-height:24px;line-height:1.6;
}
.pod-eps a:hover{color:var(--blue);text-decoration:underline}
.pod-all{margin-top:13px}
.pod-all a{
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:0.875rem;font-weight:600;
  text-decoration:none;display:inline-block;min-height:24px;line-height:1.55;
}
.pod-all a::after{content:" →";color:var(--orange)}
.pod-all a:hover{text-decoration:underline}
@media (max-width:720px){
  .pod{grid-template-columns:1fr;gap:16px}
}

/* ---------- scroll-driven depth ----------
   Sections settle as they come up the page. This is scroll-timeline only:
   there is no observer, no JavaScript, and where the browser does not support
   it the rule never applies and everything is simply visible.

   Movement only, no fade. A section stuck part-way through an opacity ramp
   would sit below the contrast this site is measured against; a section stuck
   part-way through a translate is just a few pixels low and perfectly
   readable. Not worth trading legibility for a fade. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section.band > .wrap,
    .stats > .wrap {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
    @keyframes settle {
      from { transform: translateY(30px) }
      to   { transform: none }
    }
    /* The film cards arrive just behind their section. The programme cards
       are deliberately not here: a filled animation outranks inline style, so
       settling them would overwrite the tilt transform and freeze it. */
    .watch-grid > .watch {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 30%;
    }
  }
}

/* the films get more room than the reading columns; they are the one band
   on the page that benefits from scale */
.band-wide .wrap{max-width:1320px}
.band-wide .watch-grid{gap:22px}
@media (max-width:1400px){
  .band-wide .wrap{max-width:var(--maxw)}
}

/* ---------- spacing utilities ----------
   These were inline style attributes. They live here so the Content Security
   Policy can forbid inline styles outright. */
.u-mt-0{margin-top:0}
.u-mt-18{margin-top:18px}
.u-mt-22{margin-top:22px}
.u-mt-26{margin-top:26px}
.u-mb-0{margin-bottom:0}
.u-mb-22{margin-bottom:22px}
.u-mb-24{margin-bottom:24px}
.u-mb-26{margin-bottom:26px}
.u-mb-30{margin-bottom:30px}
.u-section-gap{margin:48px 0 22px}
.rulebar-gold{background:var(--gold)}
.rulebar-muted{background:var(--on-blue-muted)}
.btn-quiet{border-color:var(--rule);color:var(--ink)}
/* the testimonial and partners pair; as an inline grid it never collapsed on a phone */
.two-up{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:860px){
  .two-up{grid-template-columns:1fr;gap:34px}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .partners{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .partners{grid-template-columns:1fr}
  .partners .p-wide{grid-column:span 1}
  /* Three across cannot hold "1,233" at this width; two would strand the third. */
  .stats .wrap{grid-template-columns:1fr}
  .stat{border-left:0}
  .stat + .stat{border-top:1px solid var(--rule)}
}
@media (max-width:860px){
  .two-col{grid-template-columns:1fr;gap:32px}
  .side{position:static}
  .prog-grid,.people{grid-template-columns:1fr}
  .watch-grid{grid-template-columns:1fr}
  /* two or three across on a tablet, one on a phone, with the address on top */
  footer.site .cols{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:28px}
  footer.site .cols > :first-child{grid-column:1/-1}
  .legal{flex-direction:column}
}
@media (max-width:560px){
  /* on a phone, two short lists side by side rather than one long one */
  footer.site .cols{grid-template-columns:1fr 1fr;gap:24px 20px}
}
/* The full menu needs about 850px. Below 900 it folds into the Menu button;
   it used to fold only at 720, and ran 47px off the side of an 800px window. */
@media (max-width:900px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:10px;gap:2px}
  nav.main.open{display:flex}
  nav.main .menu-wrap{position:static}
  .menu{position:static;width:auto;box-shadow:none;border:0;background:var(--surface-2);margin-top:4px}
  .burger{display:inline-flex;margin-left:auto;align-items:center;gap:8px}
}
@media (max-width:720px){
  .brand span{display:none}
  .ev{grid-template-columns:1fr;gap:14px}
  .when{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 12px 0;display:flex;gap:10px;align-items:baseline}
  .when span{margin-top:0}
  .hero .wrap{padding-top:66px;padding-bottom:74px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}