/*
Theme Name: MDLBEAST Radio
Theme URI: https://www.mdlbeastradio.com
Author: MDLBEAST Radio
Description: The MDLBEAST Radio site, ported one to one from the Version 3C prototype. Editorial vertical-scroll home, app-style navigation, token-driven brand color combos.
Version: 1.47.0
Requires PHP: 7.4
Text Domain: mdlbeast-radio
*/

/* =====================================================================
   MDLBEAST RADIO  -  v3 "content-led"
   Near-invisible chrome, editorial vertical-scroll home, type as the hero.
   Brand tokens + 9 approved combos unchanged. Chrome colour follows the
   current moment (body[data-combo] set on scroll).
   ===================================================================== */

/* Figtree (Google Fonts, self-hosted variable font): one file serves every
   weight; the four named faces keep the theme's family-per-weight convention. */
@font-face{font-family:'Figtree Book';src:url('assets/fonts/figtree-latin.woff2') format('woff2');font-weight:400;font-display:swap;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}
@font-face{font-family:'Figtree Book';src:url('assets/fonts/figtree-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Medium';src:url('assets/fonts/figtree-latin.woff2') format('woff2');font-weight:500;font-display:swap;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}
@font-face{font-family:'Figtree Medium';src:url('assets/fonts/figtree-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Heavy';src:url('assets/fonts/figtree-latin.woff2') format('woff2');font-weight:800;font-display:swap;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}
@font-face{font-family:'Figtree Heavy';src:url('assets/fonts/figtree-latin-ext.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree Black';src:url('assets/fonts/figtree-latin.woff2') format('woff2');font-weight:900;font-display:swap;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}
@font-face{font-family:'Figtree Black';src:url('assets/fonts/figtree-latin-ext.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --am-sun:#F9D851;--skywave:#54BAFA;--modulation-violet:#5E30E7;--shortwave-sea:#58CED1;
  --frequency-pink:#F089BB;--transmitter-red:#DC4F5D;--vhf-blue:#1562F8;--black-noise:#000;--white-noise:#fff;
  --f-body:'Figtree Book',system-ui,sans-serif;--f-med:'Figtree Medium',system-ui,sans-serif;
  --f-heavy:'Figtree Heavy',system-ui,sans-serif;--f-black:'Figtree Black','Figtree Heavy',system-ui,sans-serif;
}

/* approved combos */
[data-combo="am-sun-sky"]{--bg:var(--am-sun);--ink:#000;--muted:rgba(0,0,0,.6);--accent:var(--skywave);--on-accent:#000;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#469ad0}
[data-combo="am-sun-pink"]{--bg:var(--am-sun);--ink:#000;--muted:rgba(0,0,0,.6);--accent:var(--frequency-pink);--on-accent:#000;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#d96da4}
[data-combo="sky-sun"]{--bg:var(--skywave);--ink:#000;--muted:rgba(0,0,0,.58);--accent:var(--am-sun);--on-accent:#000;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#e0be36}
[data-combo="sky-pink"]{--bg:var(--skywave);--ink:#000;--muted:rgba(0,0,0,.58);--accent:var(--frequency-pink);--on-accent:#000;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#d96da4}
[data-combo="sea-violet"]{--bg:var(--shortwave-sea);--ink:#000;--muted:rgba(0,0,0,.58);--accent:var(--modulation-violet);--on-accent:#fff;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#3a1aa6}
[data-combo="pink-sun"]{--bg:var(--frequency-pink);--ink:#000;--muted:rgba(0,0,0,.58);--accent:var(--am-sun);--on-accent:#000;--surface:#fff;--surface-ink:#000;--line:rgba(0,0,0,.14);--accent-deep:#e0be36}
[data-combo="violet-sky"]{--bg:var(--modulation-violet);--ink:#fff;--muted:rgba(255,255,255,.7);--accent:var(--skywave);--on-accent:#000;--surface:#3a1aa6;--surface-ink:#fff;--line:rgba(255,255,255,.18);--accent-deep:#469ad0}
[data-combo="red-vhf"]{--bg:var(--transmitter-red);--ink:#fff;--muted:rgba(255,255,255,.76);--accent:var(--vhf-blue);--on-accent:#fff;--surface:#9a2f3a;--surface-ink:#fff;--line:rgba(255,255,255,.2);--accent-deep:#0c3f9e}
[data-combo="vhf-red"]{--bg:var(--vhf-blue);--ink:#fff;--muted:rgba(255,255,255,.76);--accent:var(--transmitter-red);--on-accent:#fff;--surface:#0c3f9e;--surface-ink:#fff;--line:rgba(255,255,255,.2);--accent-deep:#9a2f3a}
[data-combo="black-noise"]{--bg:#000;--ink:#fff;--muted:rgba(255,255,255,.6);--accent:var(--am-sun);--on-accent:#000;--surface:#111;--surface-ink:#fff;--line:rgba(255,255,255,.22);--accent-deep:#e0be36}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .6s ease,color .6s ease}
/* height:auto is what releases the width and height attributes WordPress
   writes on every image. Without it, max-width shrinks the width while the
   height attribute stays at full size and the picture stretches. Every rule
   below that needs a fixed height sets one on a class, so those still win. */
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:0;padding:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}

/* ----------  near-invisible chrome  ---------- */
.chrome{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,3.5vw,30px) clamp(18px,4vw,46px);pointer-events:none}
.chrome > *{pointer-events:auto}
.brandmark{width:42px;height:32px;color:var(--ink);display:block;transition:color .6s ease,transform .2s}
.brandmark:hover{transform:scale(1.06)}
.brandmark svg{width:100%;height:100%;display:block}
.chrome-right{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
.cc{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink);transition:color .6s ease,opacity .2s}
.cc:hover{opacity:.6}
.cc.live{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.cc.live .live-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.menu-btn{position:relative}
.menu-btn::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;transform:scaleX(.6);transform-origin:left;transition:transform .2s}
.menu-btn:hover::after{transform:scaleX(1)}

/* ====================  HOME : editorial moments  ==================== */
.moment{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,12vh,150px) clamp(24px,6vw,90px) clamp(48px,9vh,110px);overflow:hidden;background:var(--bg);color:var(--ink)}
.moment > *{position:relative;z-index:1}

/* ---- brand motifs (used as editorial accents / particles) ---- */
.chev-bg{position:absolute;inset:0;z-index:0;background:url('assets/motifs/pattern_4_a.svg') left center/auto 132% repeat-x;opacity:.09;color:var(--ink)}
.reel{transform-box:fill-box;transform-origin:center;animation:reelspin 4s linear infinite}
@keyframes reelspin{to{transform:rotate(360deg)}}
.reel-tape{display:flex;align-items:center;gap:var(--rd,86px);color:var(--accent);margin-top:clamp(26px,5vh,52px)}
.reel-tape .rl{width:var(--rd,86px)}
.reel-tape .rl svg{width:100%;height:auto;display:block;animation:reelspin 8s linear infinite}
.rhole{fill:var(--bg,#000)}

/* city cassettes for the frequencies moment */
.fq-cass{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.5vw,26px);margin-top:clamp(24px,4vh,44px);width:100%}
.fqc .cas{display:flex;justify-content:center;margin-bottom:8px}
.fqc .cas svg,.fqc .cas img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
.fqc .city{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;opacity:.7}
.fqc .hz{font-family:var(--f-black);font-size:clamp(1.5rem,4.5vw,2.2rem);letter-spacing:-.02em;margin-top:3px}
.fqc .hz b{color:var(--accent)}
/* Optional coverage line under a frequency (Radio Settings > Stations, third part). */
.fqc .area,.freqs .fq .area{margin-top:6px;font-size:.8rem;line-height:1.35;opacity:.8;text-wrap:pretty}
.kicker{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.22em;font-size:clamp(.62rem,1.4vw,.8rem);color:var(--accent);margin-bottom:clamp(14px,2.4vh,26px)}
.display{font-family:var(--f-black);text-transform:uppercase;line-height:.86;letter-spacing:-.03em;margin:0}
.display .em{color:var(--accent)}
.lead{font-family:var(--f-med);color:var(--muted);max-width:34ch;line-height:1.5;font-size:clamp(1rem,1.5vw,1.25rem);margin-top:clamp(18px,3vh,30px)}
.m-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px)}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;padding:16px 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn svg{width:15px;height:15px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid currentColor}
.btn.big{font-size:1rem;padding:19px 32px}
/* The home screen app note under the closing buttons (iPhone steps). */
.install-note{font-family:var(--f-med);font-size:.92rem;line-height:1.6;max-width:44ch;margin:18px auto 0;opacity:.85;text-wrap:pretty}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.15s}.reveal.d3{transition-delay:.23s}

/* OPEN moment */
.m-open .display{font-size:clamp(3.4rem,15vw,11rem)}
.m-open .lead{font-size:clamp(1.05rem,2vw,1.5rem);max-width:24ch}
.scrollhint{position:absolute;left:clamp(24px,6vw,90px);bottom:clamp(28px,5vh,54px);font-family:var(--f-heavy);
  text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;color:var(--muted);display:flex;align-items:center;gap:10px}
.scrollhint svg{width:16px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* editorial split (image + type) */
.split{display:grid;grid-template-columns:1fr;gap:clamp(26px,5vw,64px);align-items:center;width:100%}
.ed-img{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--tone,var(--surface));display:grid;place-items:center;box-shadow:0 30px 80px rgba(0,0,0,.22)}
.ed-img .mk{width:38%;color:#fff;opacity:.22}
.ed-name{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(2.6rem,9vw,6rem);margin:6px 0 0}
.ed-meta{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--accent)}

/* events row */
.m-onair .events{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;margin-top:clamp(22px,4vh,40px);scrollbar-width:none}
.m-onair .events::-webkit-scrollbar{display:none}
.evt{flex:0 0 76%;scroll-snap-align:start;background:var(--surface);color:var(--surface-ink);border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.16);display:flex;flex-direction:column}
.evt .art{aspect-ratio:1/1;background:var(--tone);display:grid;place-items:center;position:relative}
.evt .art .mk{width:38%;color:#fff;opacity:.24}
.evt .art .tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.54rem;padding:5px 11px;border-radius:999px}
.evt .b{padding:14px 15px 17px}
.evt .b .t{font-family:var(--f-black);text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;line-height:1}
.evt .b .m{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;color:var(--accent);margin-top:6px}

/* feed */
.feedlist{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(22px,4vh,40px);width:100%}
.feed-row{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding:16px 0}
.feed-row .fi{width:74px;height:74px;flex:0 0 74px;border-radius:12px;background:var(--tone);display:grid;place-items:center;overflow:hidden}
.feed-row .fi .mk{width:46%;color:#fff;opacity:.22}
.feed-row .ft{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1}
.feed-row .fk{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;color:var(--accent);margin-bottom:5px}

/* frequencies */
.freqs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(22px,4vh,40px);width:100%}
.freqs .fq{border:1px solid var(--line);border-radius:16px;padding:18px}
.freqs .fq .city{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;opacity:.7}
.freqs .fq .hz{font-family:var(--f-black);font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:-.02em;margin-top:4px}
.freqs .fq .hz b{color:var(--accent)}

/* ====================  MENU overlay  ==================== */
.menu{position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,transform .35s ease,visibility .35s}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu-inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,10vh,120px) clamp(24px,6vw,90px)}
.menu-close{position:absolute;top:clamp(18px,3.5vw,34px);right:clamp(18px,4vw,46px);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem}
.menu-close:hover{color:var(--accent)}
.menu-list{display:flex;flex-direction:column;gap:clamp(4px,1vh,10px)}
.menu-list a{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(2.4rem,9vw,5.5rem);width:max-content;max-width:100%;transition:color .15s,transform .25s;position:relative}
.menu-list a:hover{color:var(--accent);transform:translateX(14px)}
.menu-list a .idx{font-family:var(--f-heavy);font-size:.8rem;letter-spacing:.1em;vertical-align:super;opacity:.5;margin-right:14px}
.menu-foot{margin-top:clamp(28px,5vh,56px);display:flex;gap:22px;flex-wrap:wrap;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--muted)}
.menu-foot a:hover{color:var(--accent)}
body.menu-open{overflow:hidden}

/* ====================  INNER PAGES (editorial)  ==================== */
.page{min-height:100svh;padding:clamp(96px,16vh,160px) clamp(24px,6vw,90px) clamp(60px,10vh,120px);background:var(--bg);color:var(--ink)}
.page-kicker{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;color:var(--accent)}
.page-title{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.03em;line-height:.88;font-size:clamp(2.8rem,11vw,7rem);margin:10px 0 0}
.page-title .em{color:var(--accent)}
/* About: the logo stands in for the page title (follows the ink via data-logo). */
.page-logo{line-height:0;margin-top:clamp(14px,2.5vh,26px)}
.page-logo img{display:block;width:clamp(240px,78vw,640px);height:auto}
/* The shipped logo's transparent border is cropped away so the artwork sits
   flush with the text column: the box is the artwork's width, the image is
   1/0.8522 of it, pulled left and up by its border (percent margins are of
   the box width). */
.page-logo.is-trimmed{width:clamp(220px,66vw,560px);overflow:hidden}
.page-logo.is-trimmed img{width:117.34%;max-width:none;margin:-3.44% 0 -3.45% -8.66%}
.page-lead{font-family:var(--f-med);color:var(--muted);max-width:52ch;line-height:1.6;margin-top:22px;font-size:clamp(1rem,1.6vw,1.2rem)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);margin-top:clamp(34px,6vh,64px)}
.tile{background:var(--surface);color:var(--surface-ink);border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.14)}
.tile .art{aspect-ratio:1/1;background:var(--tone);display:grid;place-items:center;position:relative;overflow:hidden}
.tile .art .mk{width:40%;color:#fff;opacity:.22}
.tile .art .tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.54rem;padding:5px 11px;border-radius:999px}
.tile .b{padding:14px 15px 18px}
.tile .b .t{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem;line-height:1.02}
.tile .b .m{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;color:var(--accent);margin-top:6px}
.tile .b .d{font-family:var(--f-med);font-size:.82rem;opacity:.7;margin-top:6px}
.prose{font-family:var(--f-med);font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;max-width:62ch;margin-top:26px}
.prose p{margin:0 0 18px}
.prose a:not(.wp-block-button__link){text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em;font-family:var(--f-heavy);transition:color .15s}
.prose a:not(.wp-block-button__link):hover{color:var(--accent)}
.field{margin:0 0 16px;max-width:540px}
.field label{display:block;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:var(--f-med);font-size:1rem;padding:14px 16px;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--ink);outline:none}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.backrow{margin-top:48px}

/* ====================  desktop  ==================== */
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .m-spotlight .split{grid-template-columns:1.05fr 1fr}
  .ed-img{max-width:520px}
  .m-onair .evt{flex-basis:31%}
  .feedlist{grid-template-columns:1fr}
  .freqs{grid-template-columns:repeat(4,1fr)}
  .fq-cass{grid-template-columns:repeat(4,1fr)}
  .reel-tape{--rd:120px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid.two{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:560px) and (max-width:859px){
  .m-onair .evt{flex-basis:46%}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.mimg{display:block;width:100%;height:100%;object-fit:cover}

/* =====================================================================
   v3B  -  Option 2 app navigation + revised "What is on" / "Latest"
   ===================================================================== */
:root{--nav-h:60px}
.app{min-height:100vh;display:flex;flex-direction:column}
.main{flex:1;width:100%}

/* ---- mobile header + bottom app tab bar (Option 2 style) ---- */
.topbar{display:none}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(18px,5vw,24px) 6px;position:relative;z-index:5}
.mhead .logo{height:34px;width:auto;cursor:pointer}
.live-pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font-family:var(--f-heavy);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;transition:background .6s ease,color .6s ease}
.live-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}

/* 3C feedback: the tab bar carries the accent color, matching the Live pill */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--accent);color:var(--on-accent);
  /* The bar is --nav-h of tabs PLUS the home indicator strip beneath them.
     Everything is border-box, so a fixed height with padding-bottom would
     take the strip out of the tabs instead of adding it under them: in the
     installed app that left 26px of bar and pushed the taps into the iOS
     swipe zone. In Safari the inset is 0 and this is unchanged. */
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -10px 30px rgba(0,0,0,.16);transition:background .6s ease,color .6s ease,border-color .6s ease}
/* The sliding active pill: an ink capsule that glides to the current tab,
   surviving page loads via a stored position (js/app.js initNavPill). */
.nav-pill{position:absolute;top:7px;height:calc(var(--nav-h) - 14px);width:60px;left:0;border-radius:999px;
  background:var(--accent-deep,var(--ink));opacity:0;transform:translateX(-100px);z-index:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s ease,background .6s ease}
.nav-pill.on{opacity:1}
.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--f-heavy);
  text-transform:uppercase;letter-spacing:.05em;font-size:.5rem;color:var(--on-accent);opacity:.55;transition:opacity .25s,color .25s;position:relative;z-index:1}
.navbtn svg{width:21px;height:21px}
.navbtn span{white-space:nowrap}
.navbtn.active{opacity:1;color:var(--on-accent)}
.navbtn.active svg{animation:navpop .38s cubic-bezier(.22,1,.36,1)}
@keyframes navpop{0%{transform:scale(.8)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.nav-pill{transition:opacity .25s ease}.navbtn.active svg{animation:none}}

@media(max-width:899px){
  .moment{padding-bottom:calc(var(--nav-h) + 42px + env(safe-area-inset-bottom))}
  .page{padding-bottom:calc(var(--nav-h) + 44px + env(safe-area-inset-bottom))}
  /* The mobile header already sits above the page in the flow, so the tall
     desktop top padding (built for a floating header) was wasted space. */
  .page{padding-top:clamp(18px,3.5vh,32px)}
  .scrollhint{bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}
}
@media(min-width:900px){
  .mhead,.bottomnav{display:none}
  .topbar{display:flex;align-items:center;gap:22px;position:sticky;top:0;z-index:70;background:var(--bg);
    padding:14px clamp(24px,4vw,46px);width:100%;border-bottom:1px solid var(--line);transition:background .6s ease,border-color .6s ease,color .6s ease}
  .topbar .logo{height:40px;width:auto;cursor:pointer}
  .topbar nav{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
  .topbar nav button{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:9px 13px;border-radius:999px;color:var(--ink);opacity:.7;transition:.15s}
  .topbar nav button:hover{opacity:1}
  .topbar nav button.active{opacity:1;background:var(--accent);color:var(--on-accent)}
  .topbar .spacer{flex:1}
  .topbar .toplive{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--on-accent);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;padding:11px 17px;border-radius:999px}
  .topbar .toplive .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
  /* with a sticky top bar the first moment can lose its top breathing room */
  .moment{padding-top:clamp(60px,9vh,110px)}
}

/* ---- "What is on": smaller boxes, two rows ---- */
.events.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px);overflow:visible;max-width:760px;margin-top:clamp(22px,4vh,40px)}
.events.grid2 .evt{flex:none;border-radius:16px}
.events.grid2 .evt .art .tag{font-size:.5rem;padding:4px 9px}
.events.grid2 .evt .b{padding:11px 12px 14px}
.events.grid2 .evt .b .t{font-size:.92rem;line-height:1.02}
.events.grid2 .evt .b .m{font-size:.54rem;margin-top:5px}
@media(min-width:760px){ .events.grid2{grid-template-columns:repeat(3,1fr)} }

/* ---- "Latest": big lead box on the left, list on the right ---- */
.latest{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,30px);margin-top:clamp(22px,4vh,40px);width:100%}
@media(min-width:860px){ .latest{grid-template-columns:1.12fr 1fr;align-items:start} }
.latest-lead{display:block;background:var(--surface);color:var(--surface-ink);border-radius:20px;overflow:hidden;box-shadow:0 20px 52px rgba(0,0,0,.2);cursor:pointer;transition:transform .18s}
.latest-lead:hover{transform:translateY(-3px)}
.latest-lead .ll-art{position:relative;aspect-ratio:16/10;background:var(--tone);overflow:hidden}
.latest-lead .ll-art .tag{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;padding:6px 12px;border-radius:999px}
.latest-lead .ll-b{padding:clamp(16px,2.4vw,24px)}
.latest-lead .ll-t{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(1.5rem,3.6vw,2.4rem);margin-top:7px}
.latest-lead .ll-d{font-family:var(--f-med);opacity:.74;line-height:1.5;margin:12px 0 0;font-size:.92rem}
.latest-lead .ll-cta{display:inline-block;margin-top:15px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:var(--accent)}
.fk{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;color:var(--accent)}
.latest-list{display:flex;flex-direction:column}
.latest-list .feed-row{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding:14px 0;cursor:pointer}
.latest-list .feed-row:first-child{border-top:0;padding-top:0}
.latest-list .fi{width:64px;height:64px;flex:0 0 64px;border-radius:10px;background:var(--tone);overflow:hidden;display:grid;place-items:center}
.latest-list .ft{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(.98rem,2vw,1.25rem);line-height:1.05;margin-top:3px}

/* ---- finale: "Bookmark the beat" (Option 1 style) ---- */
.m-close.center{text-align:center;align-items:center}
.m-close .chev-row{display:flex;justify-content:center;gap:5px;color:var(--accent);margin-bottom:16px}
.m-close .chev-row svg{width:clamp(20px,4vw,30px);height:auto}
.close-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:clamp(26px,5vh,46px);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--muted)}
.close-foot a{cursor:pointer;transition:color .15s}
.close-foot a:hover{color:var(--accent)}
/* The same row, on every page that is not the homepage. */
.sitefoot{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:0 clamp(24px,6vw,90px) clamp(34px,6vh,60px);
  background:var(--bg);color:var(--muted);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem}
.sitefoot a{cursor:pointer;transition:color .15s}
.sitefoot a:hover{color:var(--accent)}
/* Clear the fixed tab bar on phones, or the row hides behind it. */
@media(max-width:899px){.sitefoot{padding-bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom))}}


/* ---- competitions: square art left of each contest ---- */
.comp-row{display:grid;grid-template-columns:clamp(104px,26vw,150px) 1fr;gap:clamp(16px,3vw,30px);
  border-top:1px solid var(--line);padding-top:22px;align-items:start}
@media(min-width:860px){.comp-row{grid-template-columns:220px 1fr}}
.comp-art{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--tone,var(--surface));display:grid;place-items:center}
.comp-art .mk{width:40%;color:#fff;opacity:.22}
.comp-art .tag{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.52rem;padding:4px 10px;border-radius:999px}

/* ---- competitions: the pinned contest runs the full width of the screen.
   Negative margins cancel the page's side padding; the creative is 12:5 on
   desktop and 4:5 on mobile (or the shape of whatever was uploaded). ---- */
.comp-pin{margin:clamp(30px,5vh,56px) calc(-1 * clamp(24px,6vw,90px)) 0}
.comp-pin-art{position:relative;width:100%;aspect-ratio:12/5;max-height:82svh;overflow:hidden;background:var(--tone,var(--surface));display:grid;place-items:center}
.comp-pin-art picture{display:contents}
.comp-pin-art .comp-pin-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comp-pin-art .mk{width:min(22%,220px);color:#fff;opacity:.22}
.comp-pin-art.is-empty{background:var(--surface)}
.comp-pin-art.is-empty .mk{color:var(--surface-ink);opacity:.18}
.comp-pin-art .tag{position:absolute;top:clamp(14px,2.4vw,26px);left:clamp(24px,6vw,90px);background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;padding:6px 13px;border-radius:999px}
.comp-pin-body{display:grid;gap:clamp(14px,3vh,28px);padding:clamp(22px,4vh,40px) clamp(24px,6vw,90px) 0}
.comp-pin .ed-name{font-size:clamp(2.4rem,8.5vw,6.5rem)}
.comp-pin .lead{max-width:56ch;margin-top:0}
.comp-pin .m-actions{margin-top:clamp(18px,3vh,28px)}
@media(min-width:900px){.comp-pin-body{grid-template-columns:1.15fr 1fr;align-items:end}}
@media(max-width:899px){
  .comp-pin-art.is-tall{aspect-ratio:4/5;max-height:none}
  .comp-pin-art.is-square{aspect-ratio:1/1;max-height:none}
}


/* ---- More sheet (mobile) ---- */
.sheetback{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
body.sheet-open .sheetback{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:96;background:var(--bg);color:var(--ink);border-radius:22px 22px 0 0;
  padding:10px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,0,1),background .6s ease,color .6s ease}
body.sheet-open .sheet{transform:none}
.sheet-grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.sheet-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:17px 6px;border-top:1px solid var(--line);
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--ink)}
.sheet-row:first-of-type{border-top:0}
.sheet-row:hover{color:var(--accent)}
.sheet-row.live{color:var(--accent)}
.sheet-row.live .dot{width:9px;height:9px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
@media(min-width:900px){.sheet,.sheetback{display:none}}


/* ---- What is on: hard square crop for real event posters ---- */
.events.grid2 .evt .art{aspect-ratio:1/1;overflow:hidden}
.events.grid2 .evt .art .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* ---- legibility: accent-colored meta inside white cards reads as ink.
   Light accents (AM Sun, Skywave) fail contrast on white surfaces. ---- */
.evt .b .m,.tile .b .m,.latest-lead .fk,.latest-lead .ll-cta{color:var(--surface-ink);opacity:.62}
.latest-lead .ll-cta{opacity:.85;border-bottom:2px solid var(--accent);padding-bottom:2px}


/* ---- The Feed: article sub-pages ---- */
.tilelink{display:block;cursor:pointer;transition:transform .18s}
.tilelink:hover{transform:translateY(-3px)}
.article-hero{position:relative;aspect-ratio:16/9;max-width:920px;border-radius:20px;overflow:hidden;
  background:var(--surface);margin-top:clamp(24px,4vh,40px)}
.article-hero .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .mk{width:24%;color:#fff;opacity:.22;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}


/* ---- article breadcrumb back to The Feed ---- */
.crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-heavy);text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:var(--muted);transition:color .15s;padding:0}
.crumb svg{width:14px;height:14px}
.crumb:hover{color:var(--accent)}

/* ---- small square thumbs: the full poster as a chip on a white tile,
   a 9:16 poster cropped into 64px never reads ---- */
.latest-list .fi{background:var(--surface);position:relative}
.latest-list .fi .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center !important;padding:4px;border-radius:8px}

/* =====================================================================
   WordPress port adjustments: nav items are real links for SEO.
   Rules mirror the button styling from the 3C source above.
   ===================================================================== */
.topbar nav a{display:inline-block;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:9px 13px;border-radius:999px;color:var(--ink);opacity:.7;transition:.15s}
.topbar nav a:hover{opacity:1}
.topbar nav a.active{opacity:1;background:var(--accent);color:var(--on-accent)}
a.navbtn{color:var(--on-accent)}
a.sheet-row{border-top:1px solid var(--line)}
a.sheet-row:first-of-type{border-top:0}

/* =====================================================================
   Feature slide rotator: published Feature Slides crossfade in the
   "Latest" lead position, each for its own duration.
   ===================================================================== */
.fbrot{position:relative}
.fbrot .fb-slide{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.fbrot .fb-slide.on{position:relative;z-index:1;opacity:1;visibility:visible}
.fb-slide .latest-lead{display:block;height:100%}
.ll-art video.mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ll-art{position:relative}

/* overlay layout: text on the media, in the solid-scrim style of the tags */
.latest-lead.fb-overlay{position:relative}
.latest-lead.fb-overlay .ll-art{aspect-ratio:16/12}
.latest-lead.fb-overlay .ll-b{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;border-radius:14px;padding:16px 18px}
.latest-lead.fb-overlay .ll-b .fk{color:rgba(255,255,255,.8);opacity:1}
.latest-lead.fb-overlay .ll-cta{color:#fff;opacity:1;border-bottom-color:var(--accent)}
.latest-lead.fb-overlay .ll-d{opacity:.9}

/* media-only layout */
.latest-lead.fb-media .ll-art{aspect-ratio:16/12}

/* custom code slides run in a sandboxed frame shaped like the card */
.fb-code{position:relative;width:100%;aspect-ratio:16/13;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 20px 52px rgba(0,0,0,.2)}
.fb-code iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* rotation dots */
.fb-dots{display:flex;gap:9px;margin-top:14px}
.fb-dots button{width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.25;transition:opacity .2s,background .2s;padding:0}
.fb-dots button.on{opacity:1;background:var(--accent)}

/* per-device slides */
@media(max-width:899px){.fb-desktop-only{display:none!important}}
@media(min-width:900px){.fb-mobile-only{display:none!important}}

/* =====================================================================
   Hero feature box: full-screen slides in the opening moment. The page
   chrome combo follows the active slide.
   ===================================================================== */
.moment.hero-rot{padding:0}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding:clamp(80px,12vh,150px) clamp(24px,6vw,90px) clamp(48px,9vh,110px)}
.hero-slide.on{z-index:1;opacity:1;visibility:visible}
.hero-slide > *{position:relative;z-index:2}
.hero-slide .chev-bg{position:absolute;inset:0;z-index:0}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero-slide.has-media,.hero-slide.has-media .kicker{color:#fff}
.hero-slide.has-media .lead{color:rgba(255,255,255,.85)}
.hero-code{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.hero-dots{position:absolute;right:clamp(24px,6vw,90px);bottom:clamp(28px,5vh,54px);display:flex;gap:9px;z-index:5}
.hero-dots button{width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.25;transition:opacity .2s,background .2s;padding:0}
.hero-dots button.on{opacity:1;background:var(--accent)}
@media(max-width:899px){.hero-dots{bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}}
.moment.hero-rot .scrollhint{z-index:5}

/* =====================================================================
   Desktop top nav pinned to the viewport. The 3C position:sticky breaks
   under overflow-x:hidden ancestors, so fixed with an equal flow offset
   reproduces the same geometry reliably.
   ===================================================================== */
@media(min-width:900px){
  .topbar{position:fixed;top:0;left:0;right:0;z-index:90}
  .main{padding-top:69px}
  body.admin-bar .topbar{top:32px}
}

/* hero media <picture> wrapper stays transparent to the layout */
.hero-media picture{display:contents}

/* core block buttons inside article bodies match the site's pill button */
.prose .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;padding:16px 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;border:0}
.prose .wp-block-button__link:hover{filter:brightness(1.05)}

/* "What is on" grid: fill the row on desktop instead of hugging the left */
@media(min-width:900px){.events.grid2{max-width:none;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}}

/* "Latest": balance the list column against the tall lead box on desktop.
   Rows share the full column height and thumbnails grow to match. */
@media(min-width:900px){
  .latest{align-items:stretch}
  .latest-list{height:100%}
  .latest-list .feed-row{flex:1;align-items:center;padding:18px 0}
  .latest-list .fi{width:88px;height:88px;flex:0 0 88px}
  .latest-list .ft{font-size:clamp(1.1rem,1.4vw,1.45rem)}
}

/* =====================================================================
   Accessibility pass: skip link, visible keyboard focus, real touch
   targets on the rotator controls, pause control.
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;padding:14px 22px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.navbtn:focus-visible,.live-pill:focus-visible,.toplive:focus-visible{outline-offset:4px;border-radius:999px}

/* rotator controls: 10px dots inside 28px targets, plus a pause toggle */
.hero-controls{position:absolute;right:clamp(24px,6vw,90px);bottom:clamp(20px,4vh,44px);display:flex;align-items:center;gap:6px;z-index:5}
@media(max-width:899px){.hero-controls{bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom))}}
.hero-dots{position:static;display:flex;gap:0}
.hero-dots button{width:28px;height:28px;background:none;opacity:1;position:relative;padding:0}
.hero-dots button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.25;transition:opacity .2s,background .2s}
.hero-dots button.on::after{opacity:1;background:var(--accent)}
.hero-pause{width:28px;height:28px;display:grid;place-items:center;color:var(--ink);opacity:.6;padding:0}
.hero-pause:hover{opacity:1}
.hero-pause svg{width:14px;height:14px}
.hero-pause .hp-play{display:none}
.hero-pause[aria-pressed="true"] .hp-pause{display:none}
.hero-pause[aria-pressed="true"] .hp-play{display:block}

/* ---- FAQ accordion (details/summary, brand styled) ---- */
.faqs{max-width:820px;margin-top:6px}
.faq{border-top:1px solid var(--line)}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
  padding:20px 4px;list-style:none;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.95rem,1.4vw,1.15rem);transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq-toggle{flex:0 0 26px;width:26px;height:26px;position:relative}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .2s}
.faq-toggle::before{width:16px;height:2.5px;transform:translate(-50%,-50%)}
.faq-toggle::after{width:2.5px;height:16px;transform:translate(-50%,-50%)}
.faq[open] .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .faq-a{margin:0;padding:0 4px 22px;max-width:62ch}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---- prose structure for long-form pages (legal, articles) ---- */
.prose h2{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.1;margin:clamp(28px,4vh,44px) 0 12px}
.prose h3,.prose h4{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1rem,1.8vw,1.2rem);margin:clamp(20px,3vh,32px) 0 10px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em;line-height:1.65}
.prose li{margin-bottom:8px}
/* A video embedded in an article body (YouTube). The Watch column is for the
   interview clip; this is for anything the story itself refers to. */
.prose .wp-block-embed{margin:clamp(28px,4.5vh,44px) 0;max-width:640px}
.prose .wp-block-embed iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:14px;background:var(--surface)}
.prose .wp-block-embed figcaption{margin-top:10px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;opacity:.7}

/* A pull quote in an article: the line the piece turns on, set big. */
.prose blockquote{margin:clamp(28px,4.5vh,44px) 0;padding:0;border:0;max-width:22ch}
.prose blockquote p{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--accent);margin:0}
.prose blockquote cite{display:block;margin-top:12px;font-family:var(--f-heavy);font-style:normal;text-transform:uppercase;
  letter-spacing:.12em;font-size:.62rem;opacity:.7}
.prose table{border-collapse:collapse;margin:0 0 18px;font-size:.92em}
.prose td,.prose th{border:1px solid var(--line);padding:8px 12px;text-align:left}

/* cassettes rewind on hover */
.fqc:hover .reel,.fqc:focus-within .reel{animation-direction:reverse}

/* ---- archive pagination, brand pills ---- */
.pagination{margin-top:clamp(30px,5vh,50px)}
.pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;
  border-radius:999px;border:2px solid var(--ink);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;transition:.15s}
.pagination a.page-numbers:hover{background:var(--ink);color:var(--bg)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pagination .page-numbers.dots{border:0;min-width:auto;padding:0 4px}

/* event cards are links */
a.evt{cursor:pointer;transition:transform .18s}
a.evt:hover{transform:translateY(-3px)}

.display{font-kerning:normal}

/* =====================================================================
   The site-wide player (js/player.js): once the stream starts, a slim bar
   follows the listener across every page. It inverts the page combo (ink
   capsule, bg text) so it reads on every approved pair, and the play button
   carries the accent.
   ===================================================================== */
.miniplayer{position:fixed;z-index:89;left:10px;right:10px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  display:flex;align-items:center;gap:10px;padding:7px 7px 7px 8px;border-radius:999px;background:var(--ink);color:var(--bg);
  box-shadow:0 12px 30px rgba(0,0,0,.22);transition:background .6s ease,color .6s ease;animation:mpin .38s cubic-bezier(.22,1,.36,1)}
.miniplayer[hidden]{display:none}
@keyframes mpin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.mp-open{flex:1;min-width:0;display:flex;align-items:center;gap:11px;color:inherit}
.mp-disc{position:relative;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:repeating-radial-gradient(circle at 50% 50%,#0b0b0b 0 1.6px,#1c1c1c 1.6px 3.2px);
  animation:reelspin 3.6s linear infinite;animation-play-state:paused}
.miniplayer.on .mp-disc{animation-play-state:running}
.mp-disc i{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;background:var(--accent);transition:background .6s ease}
.mp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mp-kick{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.2em;font-size:.55rem;opacity:.75}
.mp-kick .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.miniplayer.on .mp-kick .dot{animation:blink 1.2s infinite}
.mp-title{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-btn{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  transition:transform .15s,background .6s ease,color .6s ease}
.mp-btn:active{transform:scale(.94)}
.mp-btn svg{width:18px;height:18px;display:block}
.miniplayer.loading .mp-btn{animation:mpload 1s ease-in-out infinite}
@keyframes mpload{50%{opacity:.55}}
.mp-close{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:none;place-items:center;color:inherit;opacity:.7}
.mp-close svg{width:15px;height:15px;display:block}
.miniplayer:not(.on) .mp-close{display:grid}
.mp-close:hover{opacity:1}
.mp-open:focus-visible,.mp-btn:focus-visible,.mp-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
@media(max-width:899px){
  body.mp-on .moment,body.mp-on .page{padding-bottom:calc(var(--nav-h) + 110px + env(safe-area-inset-bottom))}
  body.mp-on .hero-controls{bottom:calc(var(--nav-h) + 80px + env(safe-area-inset-bottom))}
  body.mp-on .scrollhint{bottom:calc(var(--nav-h) + 86px + env(safe-area-inset-bottom))}
  /* The hero's slides fill it edge to edge, so the padding above never
     reaches them: lift their content clear of the raised controls. */
  body.mp-on .moment.hero-rot{padding-bottom:0}
  body.mp-on .hero-slide{padding-bottom:calc(var(--nav-h) + 130px + env(safe-area-inset-bottom))}
}
@media(min-width:900px){
  .miniplayer{left:auto;right:24px;bottom:24px;width:340px}
  body.mp-on .page{padding-bottom:110px}
  body.mp-on .hero-controls,body.mp-on .scrollhint{bottom:100px}
}
@media(prefers-reduced-motion:reduce){.miniplayer{animation:none}}

/* Page swaps: a thin accent bar runs along the top and the page dims
   gently if the next page takes a moment to arrive. */
body.soft-loading .main{opacity:.55;transition:opacity .2s ease .12s}
/* A real element that stays in the page (js/player.js): a pseudo-element
   removed mid-animation could stay painted on iPhone Safari. */
.softbar{position:fixed;top:0;left:0;z-index:200;height:3px;width:100%;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
body.soft-loading .softbar{opacity:1;animation:softbar 2.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes softbar{from{transform:scaleX(0)}to{transform:scaleX(.92)}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================
   Site search: header buttons, the overlay (footer.php + js/search.js)
   and the full results page (search.php). Colors come from the current
   combo tokens, so search always matches the page it opens over.
   ===================================================================== */
.srch-ico{width:18px;height:18px;flex:0 0 auto}
.topsearch{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 13px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;cursor:pointer;transition:border-color .15s,color .6s ease}
.topsearch:hover{border-color:currentColor}
.topsearch kbd{font-family:var(--f-heavy);font-size:.6rem;line-height:1;padding:4px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.mhead-actions{display:flex;align-items:center;gap:8px}
.msearch{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.msearch .srch-ico{width:16px;height:16px}

html.srch-lock,html.srch-lock body{overflow:hidden}
/* display:flex would override the hidden attribute and leave an invisible
   full-screen layer over the page, so hidden must win explicitly. */
.srch[hidden]{display:none!important}
.srch:not(.is-open){pointer-events:none}
.srch{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;padding:clamp(56px,11vh,120px) 20px 20px}
.srch-back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease}
.srch-panel{position:relative;width:100%;max-width:760px;max-height:calc(100svh - clamp(56px,11vh,120px) - 20px);display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;
  opacity:0;transform:translateY(-14px) scale(.985);transition:opacity .22s ease,transform .28s cubic-bezier(.32,.72,0,1)}
.srch.is-open .srch-back{opacity:1}
.srch.is-open .srch-panel{opacity:1;transform:none}
.srch-bar{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 22px;border-bottom:1px solid var(--line)}
.srch-bar .srch-ico{width:22px;height:22px;color:var(--accent)}
.srch.is-busy .srch-bar .srch-ico{animation:blink 1s infinite}
.srch-input{flex:1;min-width:0;background:transparent;border:0;outline:0;border-radius:0;-webkit-appearance:none;appearance:none;color:var(--ink);
  font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.25rem,3vw,1.9rem);line-height:1.15;padding:6px 0}
.srch-input::placeholder{color:var(--muted);opacity:1}
.srch-input::-webkit-search-cancel-button,.srch-input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.srch-x{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.srch-x svg{width:16px;height:16px}
.srch-x:hover{border-color:currentColor}
.srch-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 22px 24px}
.srch-label{display:flex;align-items:center;gap:8px;margin:20px 0 8px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;color:var(--accent)}
.srch-label span{color:var(--muted);letter-spacing:.06em}
.srch-chips{display:flex;flex-wrap:wrap;gap:8px}
.srch-chip{display:inline-flex;align-items:center;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;line-height:1;padding:11px 15px;border-radius:999px;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.srch-chip:hover,.srch-chip:focus-visible{border-color:var(--accent);background:var(--accent);color:var(--on-accent);outline:0}
.srch-row{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:14px;margin:0 -10px;padding:10px;border-radius:14px;color:var(--ink);transition:background .12s}
.srch-row:hover,.srch-row:focus-visible{background:var(--line);outline:0}
.srch-thumb{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;overflow:hidden;background:var(--surface);color:var(--surface-ink)}
.srch-thumb.is-faq{background:var(--accent);color:var(--on-accent)}
.srch-thumb img{width:100%;height:100%;object-fit:cover}
.srch-thumb .mk{width:58%;opacity:.32}
.srch-thumb .mk svg{display:block;width:100%;height:auto}
.srch-thumb b{font-family:var(--f-black);font-size:1.5rem}
.srch-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.srch-meta{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.56rem;color:var(--muted)}
.srch-t{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(.98rem,1.8vw,1.15rem);line-height:1.08;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srch-d{font-family:var(--f-med);font-size:.84rem;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-row mark,.srch-page mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.16em;text-underline-offset:.16em}
.srch-go{width:18px;height:18px;color:var(--ink);opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.srch-row:hover .srch-go,.srch-row:focus-visible .srch-go{opacity:.8;transform:none}
.srch-all{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:15px 18px;border-radius:14px;background:var(--accent);color:var(--on-accent);
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem}
.srch-all .srch-go{color:currentColor;opacity:1;transform:none}
.srch-empty{padding:24px 0 4px}
.srch-empty p{margin:0;color:var(--muted);font-family:var(--f-med)}
.srch-empty .srch-empty-t{margin:0 0 6px;color:var(--ink);font-family:var(--f-black);text-transform:uppercase;font-size:clamp(1.2rem,3vw,1.6rem)}
@media(max-width:899px){
  .srch{padding:0}
  .srch-panel{max-width:none;height:100%;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top);transform:translateY(-10px)}
  .srch-bar{padding:10px 12px 10px 18px}
  .srch-input{font-size:1.25rem}
  .srch-body{padding:0 18px calc(28px + env(safe-area-inset-bottom))}
  .srch-d{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .srch-go{display:none}
  .srch-row{grid-template-columns:52px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.srch-back,.srch-panel{transition:opacity .15s ease}.srch-panel,.srch.is-open .srch-panel{transform:none}}

/* results page */
.srch-page .srch-page-title{font-size:clamp(2.2rem,8vw,5.5rem);overflow-wrap:anywhere}
.srch-page .srch-bar{max-width:760px;margin-top:clamp(22px,4vh,36px);padding:6px 6px 6px 20px;border:1.5px solid var(--line);border-radius:999px}
.srch-page .srch-input{font-size:clamp(1.05rem,2.2vw,1.4rem)}
.srch-page .srch-bar .btn{flex:0 0 auto}
.srch-page .srch-group,.srch-page .srch-empty{max-width:760px;margin-top:clamp(22px,4vh,36px)}
.srch-page .srch-label{margin-top:0}
@media(max-width:899px){.srch-page .srch-bar .btn{padding:13px 18px}}

/* links into a spot on a page (from search) land clear of the top bar */
.comp-row,.comp-pin,.faq{scroll-margin-top:24px}
@media(min-width:900px){.comp-row,.comp-pin,.faq{scroll-margin-top:96px}}

/* =====================================================================
   What's On: Upcoming / Past events tabs, and the past event showcase
   (write-up, photo gallery with full-screen viewer, Instagram posts).
   ===================================================================== */
.ev-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:clamp(20px,3.5vh,32px);padding:5px;border-radius:999px;border:1.5px solid var(--line)}
.ev-tab{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;color:var(--ink);opacity:.72;
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;line-height:1;transition:background .2s,color .2s,opacity .2s}
.ev-tab span{font-size:.62rem;opacity:.7}
.ev-tab:hover{opacity:1}
.ev-tab.is-on{background:var(--accent);color:var(--on-accent);opacity:1}
.ev-tab:focus-visible{outline-offset:3px}
.ev-panel[hidden]{display:none}
.ev-year{margin:clamp(34px,6vh,56px) 0 0;font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1}
.ev-grid{margin-top:clamp(14px,2.5vh,22px)}
.ev-story{max-width:62ch;margin-top:clamp(28px,5vh,48px)}
.ev-block{margin-top:clamp(40px,7vh,72px)}
.ev-block .page-kicker{display:block}
.ev-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.4vw,14px);margin-top:clamp(14px,2.5vh,22px)}
@media(min-width:760px){.ev-gallery{grid-template-columns:repeat(3,1fr)}}
.ev-photo{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--surface);cursor:zoom-in}
.ev-photo:first-child{grid-column:span 2;grid-row:span 2}
.ev-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ev-photo:hover img{transform:scale(1.04)}
.ev-insta{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(12px,2vw,20px);align-items:start;margin-top:clamp(14px,2.5vh,22px)}
.ev-insta .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:none!important}
.ev-insta blockquote.instagram-media{display:grid;place-items:center;min-height:160px;padding:20px;border-radius:14px;background:var(--surface);color:var(--surface-ink)}
.ev-insta-link{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;text-decoration:underline;text-underline-offset:.2em}
.ev-pitch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(40px,7vh,72px);padding:clamp(22px,4vw,40px);border-radius:22px;background:var(--surface);color:var(--surface-ink)}
.ev-pitch h2{margin:0;max-width:22ch;font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1}

html.lb-lock,html.lb-lock body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.lb.is-open{opacity:1;visibility:visible}
.lb-img{max-width:min(92vw,1600px);max-height:84svh;object-fit:contain;border-radius:8px}
.lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-btn svg{width:22px;height:22px}
.lb-btn[hidden]{display:none}
.lb-x{top:calc(14px + env(safe-area-inset-top));right:14px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;color:#fff;font-family:var(--f-heavy);letter-spacing:.14em;font-size:.72rem}
@media(max-width:899px){.lb-prev,.lb-next{top:auto;bottom:calc(8px + env(safe-area-inset-bottom));transform:none}}

/* ---- The Feed: filter chips (All, Stories, On Demand, Events, Competitions) ---- */
.feed-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3.5vh,32px)}
.feed-chip{display:inline-flex;align-items:center;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;line-height:1;transition:background .15s,border-color .15s,color .15s}
.feed-chip:hover{border-color:currentColor}
.feed-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.feed-chip:focus-visible{outline-offset:3px}

/* =====================================================================
   On Demand item with video. Phones: headline, summary, a Watch button,
   the opening paragraphs, the video, then the rest of the story. Wide
   screens: the story on the left, the video in a column on the right that
   stays in view while reading when it fits the window.
   ===================================================================== */
.od-layout{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(20px,3.5vh,34px)}
.od-head .ed-name{font-size:clamp(2rem,6.4vw,4.2rem)}
.od-head .lead{max-width:56ch}
.od-intro,.od-rest{max-width:66ch}
.od-intro{margin-top:clamp(18px,3vh,30px)}
.od-rest{margin-top:0}
.od-watch{margin:clamp(22px,4vh,36px) 0 clamp(26px,4vh,40px);scroll-margin-top:24px}
.od-watch .page-kicker{display:block;margin:0 0 12px}
.od-videos{display:grid;gap:18px;max-width:440px}
.od-videos .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:none!important}
.od-videos blockquote.instagram-media{display:grid;place-items:center;min-height:200px;padding:20px;border-radius:14px;background:var(--surface);color:var(--surface-ink)}
/* 9:16 videos. Instagram draws every post in a 4:5 box under a 54px header,
   so a 9:16 video sits between black bars. The frame shows the video only:
   the embed is 1.424x the frame's width (4:5 height over 9:16 width, plus a
   hair so no bar peeks in), slid left by half the extra and up past the
   header. Height is capped so the frame fits beside the text on laptops. */
.ig-frame{position:relative;overflow:hidden;aspect-ratio:9/16;width:min(100%,max(240px,calc((100svh - 240px) * 9 / 16)));
  border-radius:14px;background:var(--surface);container-type:inline-size}
.od-videos .ig-frame iframe.instagram-media{position:absolute!important;top:-54px!important;left:-21.5cqw!important;width:143cqw!important;height:calc(54px + 181cqw)!important;
  max-width:none!important;min-width:0!important;margin:0!important;border:0!important;border-radius:0!important}
.od-videos .ig-frame blockquote.instagram-media{position:absolute;inset:0;min-height:0;border-radius:0}
/* TikTok's player is 9:16 already, so it simply fills the frame. */
.ig-frame iframe.tt-player{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0}
.ig-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--ink);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;line-height:1}
.ig-open svg{width:13px;height:13px}
.ig-open:hover{text-decoration:underline;text-underline-offset:3px}
.od-jump{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,3vh,26px);padding:12px 18px 12px 14px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;line-height:1}
.od-jump svg{width:16px;height:16px}
@media(min-width:1000px){
  .od-layout{grid-template-columns:minmax(0,1fr) clamp(320px,28vw,400px);column-gap:clamp(40px,5vw,96px);
    grid-template-areas:"head watch" "intro watch" "rest watch";grid-template-rows:auto auto 1fr;align-items:start}
  .od-head{grid-area:head}
  .od-intro{grid-area:intro}
  .od-rest{grid-area:rest}
  .od-watch{grid-area:watch;margin:0}
  .od-videos{max-width:none}
  .od-jump{display:none}
  .od-intro .wp-block-heading:first-child,.od-rest>h2:first-child,.od-rest>h3:first-child{margin-top:clamp(22px,3vh,34px)}
}
/* Staying in view needs a scrolling ancestor that is not clipped: body
   normally hides horizontal overflow, which disables sticky, so clip it
   instead on these pages. Several videos show one at a time, so it fits.
   Past events use the same layout when they carry a clip, so they need the
   same treatment: without their body class here the rule below applies but
   does nothing, and the video scrolls away. */
@supports (overflow:clip){
  @media(min-width:1000px) and (min-height:700px){
    /* body only: clip on the root element passes to the viewport as
       'no scrolling' and freezes the page. */
    body.single-radio_ondemand,body.single-radio_event{overflow-x:clip}
    .od-watch{position:sticky;top:96px}
  }
}

/* Release card styles live in css/music-card.css (a component used across the site). */

/* ---- On Demand: Video 1 / Video 2 tabs ---- */
.od-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.od-tab{padding:10px 15px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;line-height:1;transition:background .15s,border-color .15s,color .15s}
.od-tab:hover{border-color:currentColor}
.od-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.od-tab:focus-visible{outline-offset:3px}
.od-video[hidden]{display:none}

/* ---- On Demand item with video: square artwork beside the title. Phones
   keep it small so the headline still leads; the summary runs full width. ---- */
.od-head.has-art{display:grid;grid-template-columns:clamp(88px,25vw,128px) minmax(0,1fr);column-gap:16px;align-items:start;
  grid-template-areas:"art titles" "lead lead" "jump jump"}
.od-head.has-art .od-art{grid-area:art}
.od-head.has-art .od-titles{grid-area:titles;min-width:0}
.od-head.has-art .lead{grid-area:lead}
.od-head.has-art .od-jump{grid-area:jump;justify-self:start}
.od-head.has-art .ed-name{font-size:clamp(1.4rem,6vw,2rem);line-height:.95}
.od-head.has-art .od-art .tag{display:none}
@media(min-width:760px){
  .od-head.has-art{grid-template-columns:clamp(170px,17vw,220px) minmax(0,1fr);column-gap:clamp(22px,2.6vw,34px);grid-template-areas:"art titles" "art lead" "art jump"}
  .od-head.has-art .ed-name{font-size:clamp(2rem,3.3vw,3.2rem)}
  .od-head.has-art .od-art .tag{display:block}
}

/* ---- A portrait inside an article body, sized to match the square artwork
   beside the headline, so the two read as one family. ---- */
.prose .od-figure{margin:clamp(26px,4vh,38px) 0;max-width:clamp(88px,25vw,128px)}
.prose .od-figure img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.prose .od-figure figcaption{margin-top:10px;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;opacity:.7}
@media(min-width:760px){.prose .od-figure{max-width:clamp(170px,17vw,220px)}}

/* A night's posters, dropped into the section each one belongs to. They are
   portrait artwork rather than photographs, so unlike .od-figure they keep
   their own shape instead of being cropped square, and they stay narrow
   enough to sit inside the text column rather than interrupt it. Two in a
   row share the width; one on its own keeps a poster's proportions. */
.prose .ev-posters{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);margin:clamp(24px,4vh,36px) 0}
.prose .ev-posters figure{margin:0;flex:0 1 auto;min-width:0;max-width:clamp(140px,32vw,200px)}
.prose .ev-posters img{display:block;width:100%;height:auto;aspect-ratio:1081/1340;object-fit:cover;border-radius:14px}
.prose .ev-posters figcaption{margin-top:9px;font-family:var(--f-heavy);text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;opacity:.7}
@media(min-width:760px){.prose .ev-posters figure{max-width:200px}}
/* Past events set their artwork on a different grid, so the figure follows that one. */
.ev-past:not(.has-watch) .prose .od-figure{max-width:clamp(104px,26vw,150px)}
@media(min-width:860px){.ev-past:not(.has-watch) .prose .od-figure{max-width:220px}}

/* ---- Home Feed lead: square artwork (On Demand, events, competitions)
   stays square. Wide screens set just the title in a panel over the image,
   covering as little of it as possible; phones stack the text below. ---- */
.latest-lead.ll-square .ll-art{aspect-ratio:1/1}
@media(min-width:860px){
  .latest-lead.ll-square{position:relative}
  .latest-lead.ll-square .ll-art{height:100%}
  .latest-lead.ll-square .ll-b{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(0,0,0,.6);color:#fff;border-radius:14px;padding:14px 18px}
  .latest-lead.ll-square .ll-b .fk{color:rgba(255,255,255,.8);opacity:1}
  .latest-lead.ll-square .ll-t{font-size:clamp(1.3rem,2vw,1.9rem)}
  .latest-lead.ll-square .ll-b .fk,.latest-lead.ll-square .ll-d,.latest-lead.ll-square .ll-cta{display:none}
  .latest-lead.ll-square .ll-t{margin-top:0}
}

/* ---- Wide screens: The Feed stops growing with the viewport. The lead story
   holds the left half, the rest of the feed sits beside it as two columns of
   cards, and the whole row is capped so nothing balloons on a large monitor. ---- */
@media(min-width:1100px){
  .latest{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2vw,32px);
    max-width:1280px;align-items:start}
  .latest-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,26px);height:auto}
  .latest-list .feed-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;
    flex:none;border-top:0;padding:0}
  .latest-list .fi{width:100%;height:auto;flex:none;aspect-ratio:1/1;border-radius:14px}
  .latest-list .fi .mimg{padding:0;border-radius:14px}
  .latest-list .ft{font-size:clamp(1rem,1.1vw,1.25rem);margin-top:2px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- Wide screens: four "What is on" cards per row so the artwork sits at a
   sensible size. Below that the row stays three wide and the extra cards are
   held back, so the last row is never ragged. ---- */
@media(min-width:1280px){ .m-onair .events.grid2{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1279px){ .m-onair .events.grid2 .evt:nth-child(n+7){display:none} }

/* ---- Very wide screens: a third column of feed cards, so the section fills
   the row instead of leaving a gap on the right. Lead plus six cards, sized
   to one grid. Below this the row holds two columns and four cards. ---- */
@media(max-width:1599px){ .latest-list .feed-row:nth-child(n+5){display:none} }
@media(min-width:1600px){
  .latest{grid-template-columns:minmax(0,2fr) minmax(0,3fr);max-width:1900px;
    gap:clamp(20px,1.5vw,28px)}
  .latest-list{grid-template-columns:repeat(3,1fr);gap:clamp(20px,1.5vw,28px)}
}

/* ---- Home Feed lead on desktop: text below the artwork, like the cards
   beside it, instead of a panel over the image. The lead loses its own
   surface box so the whole section reads as one grid. Phones keep the
   stacked card they already have. ---- */
@media(min-width:860px){
  .latest-lead{background:none;color:inherit;box-shadow:none;border-radius:0;overflow:visible}
  .latest-lead .ll-art{border-radius:16px;overflow:hidden}
  .latest-lead.ll-square{position:static}
  .latest-lead.ll-square .ll-art{height:auto;aspect-ratio:1/1}
  .latest-lead .ll-b,.latest-lead.ll-square .ll-b{position:static;left:auto;right:auto;
    bottom:auto;background:none;color:inherit;border-radius:0;padding:11px 0 0}
  .latest-lead .fk,.latest-lead.ll-square .ll-b .fk{display:block;color:var(--accent);opacity:1}
  .latest-lead .ll-t,.latest-lead.ll-square .ll-t{margin-top:6px;
    font-size:clamp(1.5rem,2.1vw,2.3rem)}
  .latest-lead .ll-cta{color:inherit;opacity:.85}
}

/* ---- Listen Live sits in the middle of the tab bar and uses the same play
   triangle as every other Listen control on the site. The icon runs a little
   larger than its neighbours; negative margins keep all five labels on one
   line. ---- */
.navbtn-live svg{width:26px;height:26px;margin:-2px 0 -3px}

/* The Listen player is one app-like screen that must not scroll, so the
   site-wide legal row would push it 98px past the viewport. The player
   carries its own link to the legal hub instead. */
body.is-listen .sitefoot{display:none}

/* ---- Episode reel: a horizontal strip of videos inside an article, for a
   run of episodes where embedding every one down the page would bury the
   story. Each card plays where it sits. The frames are lazy, so only the
   ones scrolled into view are ever fetched. ---- */
.prose .ep-reel{display:flex;gap:clamp(10px,1.4vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 16px;margin:18px 0 6px;scrollbar-width:none;max-width:none}
.prose .ep-reel::-webkit-scrollbar{display:none}
.prose .ep-card{flex:0 0 min(84%,300px);scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--surface);color:var(--surface-ink);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.14)}
.prose .ep-embed{position:relative;width:100%;aspect-ratio:300/500;background:#000;overflow:hidden}
.prose .ep-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.prose .ep-cap{display:flex;flex-direction:column;gap:5px;padding:13px 15px 15px;text-decoration:none;color:inherit}
.prose .ep-cap:hover{text-decoration:none}
.prose .ep-cap:hover .ep-name{color:var(--accent)}
.prose .ep-card .ep-arc{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;
  font-size:.56rem;color:var(--accent)}
.prose .ep-card .ep-name{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.05;font-size:clamp(1rem,2.2vw,1.2rem);transition:color .15s}
.prose .ep-card .ep-when{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;
  font-size:.56rem;opacity:.6}
.prose .ep-hint{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.56rem;
  color:var(--muted);margin:0 0 14px}
@media(min-width:760px){.prose .ep-card{flex-basis:300px}}
/* Instagram refuses to embed a post it has age restricted: the frame renders
   its own "this link may be broken" page even though the post opens fine for
   anyone logged in. A card like that carries this tile instead, so the reel
   reads as deliberate rather than faulty. Swap it back for an iframe the day
   the restriction is lifted. */
.prose .ep-embed-off{display:flex}
.prose .ep-embed-off a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;height:100%;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}
.prose .ep-embed-off a:hover{text-decoration:none}
.prose .ep-embed-off .ep-off-play{display:flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:50%;border:2px solid rgba(255,255,255,.75);transition:transform .15s,border-color .15s}
.prose .ep-embed-off a:hover .ep-off-play{transform:scale(1.07);border-color:#fff}
.prose .ep-embed-off .ep-off-play svg{width:20px;height:20px;margin-left:3px;fill:currentColor}
.prose .ep-embed-off .ep-off-t{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.12em;
  font-size:.6rem;text-align:center;padding:0 18px;opacity:.85}

/* WordPress turns a bare video URL in the content into an iframe carrying its
   own width and height attributes, wrapped in nothing but a paragraph, so the
   .wp-block-embed rule further up never sees it and the fixed 500px runs off
   the side of a phone. */
.prose .track-block iframe,
.prose p > iframe:only-child{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;
  border-radius:14px;background:var(--surface)}

/* A release card sits under the video it belongs to, so the pair reads as one
   item rather than the cards all stacking at the foot of the page. */
.prose .track-block{margin:clamp(26px,4vh,40px) 0}
.prose .track-block .wp-block-embed{margin:0 0 14px}
.prose .track-credits{font-size:.82rem;line-height:1.55;opacity:.72;margin-top:12px}

/* The reason a related card is being suggested, under its title. It sits
   between the title and the meta line, in the accent so it reads as the
   link between the two pieces rather than as more description. */
.tile .b .why{font-family:var(--f-heavy);font-size:.68rem;line-height:1.35;color:var(--accent);
  margin:5px 0 0;text-wrap:balance}
.tile .b .why + .m{margin-top:5px}

/* An image placed in the body of an article. Keeps its own shape, never
   crops, and sits in the column like everything else around it. */
.prose figure.wp-block-image{margin:clamp(24px,4vh,36px) 0}
.prose figure.wp-block-image img{width:100%;height:auto;border-radius:14px}
.prose figure.wp-block-image figcaption{margin-top:10px;font-family:var(--f-heavy);text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;opacity:.7}

/* ---- where to find it: the location card that closes a place article ---- */

.ev-where{margin-top:clamp(36px,6vh,60px)}
.where-card{margin-top:clamp(14px,2.4vh,22px);padding:clamp(18px,3vw,26px);border-radius:18px;
  background:var(--surface);color:var(--surface-ink);max-width:62ch}
.where-name{font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(1.3rem,3.4vw,1.75rem);margin:0}
.where-at{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;
  color:var(--accent);margin:8px 0 0}
.where-line{font-family:var(--f-med);font-size:.92rem;line-height:1.6;opacity:.8;margin:10px 0 0}
.where-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:clamp(14px,2.4vh,20px)}
.where-phone{font-family:var(--f-heavy);font-size:.8rem;text-decoration:underline;
  text-underline-offset:.2em;color:inherit}
/* One plain line, not a banner. It should read as a footnote to the card. */
.where-partner{font-family:var(--f-med);font-size:.92rem;line-height:1.6;opacity:.8;
  margin:clamp(14px,2.4vh,20px) 0 0;max-width:62ch}
.where-partner a{font-family:var(--f-heavy);text-decoration:underline;text-underline-offset:.2em;
  color:var(--accent)}

/* ---- About page hero photos (core plugin: the Hero photos box on the page).
   The same frame as the Feed story hero: 16:9, rounded, inside the page
   margins, at most 920px. js/app.js shows a few at a time, picked at random,
   and wipes from one to the next: hard-edged, never a fade. ---- */
.about-hero{position:relative;aspect-ratio:16/9;width:100%;max-width:920px;margin:clamp(26px,4vh,40px) 0 0;border-radius:20px;overflow:hidden;background:var(--surface)}
.about-hero .ah-sl{position:absolute;inset:0}
.about-hero .ah-sl img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.about-hero.rot .ah-sl{clip-path:inset(0 0 0 100%);transition:clip-path .9s cubic-bezier(.2,.8,.2,1)}
.about-hero.rot .ah-sl.on{clip-path:inset(0);z-index:1}
.about-hero.rot .ah-sl.off{clip-path:inset(0 100% 0 0);transition-duration:.6s;transition-timing-function:cubic-bezier(.6,0,.8,.4)}
.about-hero .ah-dots{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:6px}
.about-hero .ah-dots button{width:9px;height:9px;padding:0;border-radius:9px;background:#fff;opacity:.5;transition:width .25s ease}
.about-hero .ah-dots button.on{opacity:1;width:22px}
@media(max-width:899px){.about-hero{border-radius:16px}}

/* ---------- Embedded games ([mdlb_embed], core plugin includes/embeds.php) ---------- */
.mdlb-embed{margin:clamp(20px,3vh,32px) 0}
.mdlb-embed-frame{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#111}
.mdlb-embed-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.mdlb-embed figcaption{margin-top:14px}
.prose a.mdlb-embed-go{text-decoration:none}
.prose a.mdlb-embed-go:hover{color:inherit}
/* Top centre: the game keeps its scoreboard top left and its pause and sound
   buttons top right, and the sky is free while a match is on. */
.mdlb-embed-close{position:absolute;z-index:2;top:max(6px,env(safe-area-inset-top));left:50%;margin-left:-17px;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.6);color:#fff;
  font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.mdlb-embed-close[hidden]{display:none}
/* Full screen: the same frame, fixed over everything. */
.mdlb-embed.is-full .mdlb-embed-frame{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto!important;border-radius:0}
.mdlb-embed-frame:fullscreen{aspect-ratio:auto!important;border-radius:0}
/* A phone held upright (or with rotation lock on, which never turns the
   screen): the game is turned sideways, so turning the phone is all it takes.
   When the screen does rotate, this lets go and the game sits upright. */
@media(orientation:portrait) and (hover:none) and (pointer:coarse){
  .mdlb-embed.is-full .mdlb-embed-frame{inset:auto;top:0;left:100vw;width:100vh;width:100dvh;height:100vw;transform:rotate(90deg);transform-origin:0 0}
}
html.mdlb-embed-lock,html.mdlb-embed-lock body{overflow:hidden}
/* Phone card ([mdlb_embed poster=...]): on phones the game would only show a
   cramped menu at article width, so a card with a shot from the game stands in
   and a tap opens the game full screen. Computers keep the game in the page.
   Touch screens get the card at any width: a phone turned sideways is wider
   than 699px, and a game in the page there sits under the tab bar. */
.mdlb-embed-launch{display:none}
@media(max-width:699px),(hover:none) and (pointer:coarse){
  .mdlb-embed.has-launch .mdlb-embed-frame,.mdlb-embed.has-launch figcaption{display:none}
  .mdlb-embed.has-launch.is-full .mdlb-embed-frame{display:block}
  .mdlb-embed-launch{display:block;border-radius:20px;overflow:hidden;background:#111;color:#fff;text-decoration:none}
  .prose a.mdlb-embed-launch{text-decoration:none;font-family:var(--f-med)}
  .prose a.mdlb-embed-launch:hover{color:#fff}
  .mel-shot{position:relative;display:block;aspect-ratio:4/3;background:#111}
  .mel-shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
  .mel-tag{position:absolute;left:12px;bottom:12px;background:var(--accent);color:var(--on-accent);font-family:var(--f-heavy);
    text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;line-height:1;padding:8px 11px;border-radius:999px}
  .mel-play{position:absolute;right:12px;bottom:10px;width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--on-accent);
    display:grid;place-items:center;box-shadow:0 0 0 7px rgba(255,255,255,.22)}
  .mel-play svg{width:24px;height:24px;margin-left:4px}
  .mel-body{display:block;padding:18px 18px 20px}
  .mel-title{display:block;font-family:var(--f-black);text-transform:uppercase;font-size:1.45rem;line-height:1.05;letter-spacing:-.01em}
  .mel-sub{display:block;margin-top:8px;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.78)}
  .mel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .mel-tags span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 10px;font-family:var(--f-heavy);
    text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;line-height:1.2}
  .mel-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:16px;border-radius:999px;
    background:var(--accent);color:var(--on-accent);font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;line-height:1}
  .mel-btn svg{width:14px;height:14px}
  .mel-hint{display:block;margin-top:10px;text-align:center;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.08em;
    font-size:.72rem;color:rgba(255,255,255,.6)}
  .mdlb-embed-launch:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
}

/* ---------- Sitemap page (page-templates/template-sitemap.php) ---------- */
.smap{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,48px);margin-top:clamp(36px,6vh,64px)}
.smap-title{font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--accent);margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.smap-title span{color:var(--muted);letter-spacing:.08em;margin-left:6px}
.smap ul{list-style:none;margin:0;padding:0}
.smap li{padding:7px 0;line-height:1.35}
.smap a{font-family:var(--f-heavy);text-decoration:none;color:var(--ink);transition:color .15s}
.smap a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.smap-meta{display:block;font-family:var(--f-med);font-size:.86rem;color:var(--muted);margin-top:2px}
.smap-intro p{margin:0 0 12px}
.smap-xml{margin-top:clamp(36px,6vh,56px);font-size:.9rem;color:var(--muted)}
.smap-xml a{color:inherit;text-decoration:underline;text-underline-offset:.2em}