/* Radio 888 - opmaak. Eén stylesheet, geen framework: dat houdt de site snel. */

/* Archivo, alleen de latijnse subset, zelf gehost. Bewust NIET via Google's CDN:
   dat is voor een Nederlands bedrijf een AVG-risico, en zelf hosten verhuist
   gewoon mee naar zijn eigen hosting. Eén variabel bestand van 35 kB dekt elke
   dikte die we gebruiken. */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  /* Houdt de layout stil terwijl het lettertype nog laadt. */
  size-adjust:101%;
  ascent-override:92%;
  descent-override:24%;
}

:root{
  --navy-950:#010512;
  --navy-900:#010725;
  --navy-850:#01103c;
  --navy-800:#011459;
  --navy-700:#012371;
  --blue-700:#01349E;
  --blue-600:#0160D1;
  --blue-500:#0164E0;
  --blue-400:#3d8bff;
  --blue-300:#7db4ff;
  --gold:#FFC107;
  --gold-light:#FDE76D;
  --gold-dark:#D49E00;
  --red:#ff453a;
  --ink:#eaf1ff;
  --ink-dim:#9fb3d9;
  --ink-faint:#6f85ad;
  --line:rgba(80,140,255,.22);
  --line-soft:rgba(80,140,255,.12);
  --radius:16px;
  --radius-sm:10px;
  --wrap:1240px;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Archivo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  /* Eén kaartrecept. Op een donkere ondergrond maakt een lichter vlak met een
     lichtrand bovenaan de diepte, niet een slagschaduw: die wordt hier modder. */
  /* Vlakke varianten voor rijen en knoppen die geen volledige kaart zijn. */
  --card:rgba(255,255,255,.032);
  --card-2:rgba(255,255,255,.06);
  --surface:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  --surface-lift:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-deep:0 24px 48px -24px rgba(0,0,0,.6);

  /* Twee maten opschrift, niet vijf. */
  --kicker-a:.75rem;
  --kicker-b:.6875rem;

  --gap-section:clamp(56px,8vw,84px);
}

*,*::before,*::after{box-sizing:border-box}

/* De schuifbalk. Standaard is die lichtgrijs, wat op een donkere site een
   lichte streep aan de rand geeft. Bewust gewoon breed gehouden: een dunne of
   verborgen schuifbalk oogt netjes maar werkt vervelend, zeker voor het wat
   oudere publiek van dit station. */
html{scrollbar-color:#2b4a86 var(--navy-950);scrollbar-width:auto}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--navy-950)}
::-webkit-scrollbar-thumb{
  background:#2b4a86;border-radius:8px;
  border:3px solid var(--navy-950);   /* lucht rondom, anders raakt hij de rand */
}
::-webkit-scrollbar-thumb:hover{background:var(--blue-500)}
::-webkit-scrollbar-corner{background:var(--navy-950)}
html{-webkit-text-size-adjust:100%}
/* Achtervang: geen enkele pagina mag zijwaarts schuiven. */
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-300);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--display);margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.02em}
h3{font-size:1.125rem;line-height:1.25;font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.r888-i{width:1em;height:1em;flex:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--gold);color:#000;padding:10px 16px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Achtergrond: skyline-sfeer zonder zware afbeelding ---------- */
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1100px 520px at 78% -8%,rgba(1,100,224,.30),transparent 62%),
  radial-gradient(760px 420px at 8% 4%,rgba(1,52,158,.34),transparent 60%),
  linear-gradient(180deg,var(--navy-850) 0%,var(--navy-900) 46%,var(--navy-950) 100%);
}
/* Ruis over de verlopen. Zonder dit gaan de grote gloedvlakken banderen op
   8-bits schermen; met 2,5% ruis is dat weg en zie je de ruis zelf niet. */
.bg::before{
  content:"";position:absolute;inset:0;opacity:.025;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(1,7,37,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.header-in{display:flex;align-items:center;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:13px;flex:none;color:inherit}
/* Zijn eigen logo. Hij zei letterlijk dat hij zijn banner mooi vindt, dus die
   staat hier, niet een door ons getypte variant ervan. */
.brand img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(1,100,224,.5))}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-family:var(--display);font-size:1.05rem;font-weight:800;letter-spacing:.02em;color:#fff}
.brand-txt span{font-size:var(--kicker-b);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--blue-300)}

.nav{margin-left:auto}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:9px 14px;border-radius:9px;font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.nav a:hover{color:#fff;background:var(--card-2)}
.nav .current-menu-item>a,.nav .current_page_item>a{color:#fff;background:rgba(1,100,224,.2);box-shadow:inset 0 -2px 0 var(--blue-500)}

.socials{display:flex;gap:8px;flex:none}
.socials a,.socials span.social{display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:50%;color:var(--ink-dim);font-size:1.05rem}
.socials a:hover{color:#fff;border-color:var(--blue-500);background:rgba(1,100,224,.18)}
/* Voorbeeldweergave zolang de adressen nog niet binnen zijn: te zien, niet te klikken. */
.socials .social--preview{opacity:.55;cursor:default}
/* Appen naar de studio, in de kleur van WhatsApp zodat je hem herkent zonder
   label. Dezelfde ronde vorm als de andere twee, dus de rij blijft één ding. */
.socials .social--wa{border-color:rgba(37,211,102,.5);color:#25D366}
.socials .social--wa:hover{color:#fff;border-color:#25D366;background:rgba(37,211,102,.22)}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:4px auto;background:currentColor;border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .header-in{flex-wrap:wrap}
  .burger{display:block}
  .nav{order:5;flex:0 0 100%;margin:0;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:2px;padding:10px 0 4px}
  .nav a{padding:12px 14px}
  .socials{order:4}
}
@media (max-width:560px){
  .socials a{width:34px;height:34px}
}

/* ---------- Hero ---------- */
.hero{padding:34px 0 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);gap:20px}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--surface-lift)}
/* De diepe schaduw is er alleen voor de twee kaarten die echt vooraan staan. */
.card--raised{box-shadow:var(--surface-lift),var(--shadow-deep)}

.onair-card{position:relative;overflow:hidden;padding:38px 38px 34px;min-height:360px;display:flex;flex-direction:column;justify-content:center}
/* Een neonbord heeft een muur nodig. Deze foto is sfeer, geen bewering: het is
   niet zijn studio en hij staat er nergens als zodanig bij. Ontkleurd en op 22%
   zodat de gekleurde faders niet met zijn palet vechten, en weggemaskerd onder
   de tekstkolom zodat de kop op schoon marineblauw blijft staan. */
.onair-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  filter:grayscale(.65) brightness(.75) contrast(1.05);
  mask-image:linear-gradient(90deg,transparent 0 38%,#000 66%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 38%,#000 66%);
}
/* De afbeelding staat BINNEN de media query, niet alleen de dekking: anders
   haalt een telefoon het bestand alsnog op om het vervolgens niet te tonen. */
@media (min-width:860px){
  .onair-card::before{
    background:var(--hero-desk) right center/cover no-repeat;
    opacity:.22;
  }
}

.onair-card::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;
  background:radial-gradient(560px 300px at 88% 40%,rgba(1,100,224,.42),transparent 66%);
}
.onair-card>*{position:relative;z-index:1}
/* Equalizer over de volle breedte van de hero, achter de tekst door. Puur CSS,
   dus geen extra request. Aan de randen weggemaskerd zodat hij niet afkapt. */
.hero-eq{position:absolute;left:0;right:0;bottom:0;z-index:0;display:flex;align-items:flex-end;
  gap:6px;height:150px;padding:0 22px;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.hero-eq i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--blue-400),rgba(1,52,158,0));
  opacity:.42;animation:heq 1.4s ease-in-out infinite;transform-origin:bottom}
/* Een dansende equalizer boven een stil station is een leugentje. */
.hero-eq.off i{animation-play-state:paused;opacity:.16;transform:scaleY(.3)}
.hero-eq i:nth-child(4n){background:linear-gradient(180deg,var(--gold),rgba(212,158,0,0));opacity:.3}
.hero-eq i:nth-child(3n){animation-duration:1.05s}
.hero-eq i:nth-child(3n+1){animation-duration:1.75s}
.hero-eq i:nth-child(1){height:24%;animation-delay:-.2s}
.hero-eq i:nth-child(2){height:52%;animation-delay:-.9s}
.hero-eq i:nth-child(3){height:33%;animation-delay:-.4s}
.hero-eq i:nth-child(4){height:70%;animation-delay:-1.2s}
.hero-eq i:nth-child(5){height:44%;animation-delay:-.6s}
.hero-eq i:nth-child(6){height:86%;animation-delay:-.1s}
.hero-eq i:nth-child(7){height:36%;animation-delay:-1.5s}
.hero-eq i:nth-child(8){height:62%;animation-delay:-.8s}
.hero-eq i:nth-child(9){height:98%;animation-delay:-.3s}
.hero-eq i:nth-child(10){height:48%;animation-delay:-1.1s}
.hero-eq i:nth-child(11){height:74%;animation-delay:-.5s}
.hero-eq i:nth-child(12){height:29%;animation-delay:-1.4s}
.hero-eq i:nth-child(13){height:60%;animation-delay:-.7s}
.hero-eq i:nth-child(14){height:90%;animation-delay:-.25s}
.hero-eq i:nth-child(15){height:40%;animation-delay:-1.3s}
.hero-eq i:nth-child(16){height:66%;animation-delay:-.95s}
.hero-eq i:nth-child(17){height:26%;animation-delay:-.45s}
.hero-eq i:nth-child(18){height:56%;animation-delay:-1.6s}
.hero-eq i:nth-child(19){height:80%;animation-delay:-1.05s}
.hero-eq i:nth-child(20){height:38%;animation-delay:-.35s}
.hero-eq i:nth-child(21){height:64%;animation-delay:-1.45s}
.hero-eq i:nth-child(22){height:30%;animation-delay:-.75s}
.hero-eq i:nth-child(23){height:72%;animation-delay:-.15s}
.hero-eq i:nth-child(24){height:46%;animation-delay:-1.25s}
@keyframes heq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}

/* Het ON AIR-bord. De mockup had hier een studiofoto met een neonbord; de foto
   hebben we niet, het bord kunnen we wel eerlijk namaken. Hij dooft mee met de
   stream: uit als het station offline is. */
.onair-sign{
  position:absolute;top:50%;right:6%;z-index:1;transform:translateY(-50%) rotate(-3deg);
  display:grid;place-items:center;width:214px;height:96px;border-radius:12px;
  font-family:var(--display);font-size:1.85rem;font-weight:800;letter-spacing:.16em;
  color:#fff;border:2px solid rgba(255,69,58,.55);background:rgba(255,69,58,.06);
  text-shadow:0 0 4px #fff,0 0 14px rgba(255,69,58,.95),0 0 34px rgba(255,69,58,.55);
  box-shadow:0 0 30px rgba(255,69,58,.32),inset 0 0 18px rgba(255,69,58,.18);
  transition:opacity .5s,filter .5s;
}
.onair-sign.off{opacity:.28;filter:grayscale(1) brightness(.7);box-shadow:none;text-shadow:none}
@media (max-width:1100px){.onair-sign{width:168px;height:78px;font-size:1.45rem;right:4%}}
@media (max-width:860px){
  .onair-sign{position:static;order:2;transform:rotate(-2deg);margin:20px 0 2px;width:148px;height:62px;font-size:1.15rem}
  /* Uitgedoofd tussen de equalizerbalken zag het bord eruit als een vlek.
     Op een telefoon tonen we het alleen als het echt brandt. */
  .onair-sign.off{display:none}
}

.onair-kicker{display:inline-flex;align-items:center;gap:9px;font-size:var(--kicker-a);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.dot{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:pulse 2s infinite}
.dot.off{background:var(--ink-faint);animation:none;box-shadow:none}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

.onair-show{font-size:clamp(1.9rem,4.1vw,3.1rem);font-weight:800;margin:0 0 6px;letter-spacing:-.025em}
.onair-host{font-size:.95rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-400);margin:0 0 4px}
.onair-time{font-size:1.15rem;font-weight:600;color:var(--ink-dim);margin:0 0 24px}

.play-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.play-btn{
  display:grid;place-items:center;width:76px;height:76px;flex:none;border-radius:50%;cursor:pointer;
  border:0;background:var(--blue-500);color:#fff;font-size:1.9rem;
  box-shadow:0 0 0 8px rgba(1,100,224,.15),0 10px 34px rgba(1,100,224,.45);
  transition:transform .18s,background .18s,box-shadow .18s;
}
.play-btn:hover{transform:scale(1.06);background:var(--blue-400);box-shadow:0 0 0 10px rgba(1,100,224,.2),0 0 40px rgba(1,100,224,.75)}
.play-btn .r888-i{margin-left:.06em}
.play-btn.is-playing .r888-i{margin-left:0}
.play-btn.is-loading{animation:spinp 1.1s ease-in-out infinite}
@keyframes spinp{50%{opacity:.45}}
.play-label{display:flex;flex-direction:column;line-height:1.25}
.play-label b{font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase}
.play-label span{font-size:.86rem;color:var(--blue-400);font-weight:600}

/* Rechterkolom: daarna + nu draaiend nummer */
.side-card{padding:24px}
.side-title{font-size:var(--kicker-a);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-400);margin:0 0 12px}
.next-time{font-size:.95rem;color:var(--ink-dim);margin:0}
.next-show{font-size:1.35rem;font-weight:700;margin:2px 0 0;color:#fff}
.side-sep{height:1px;background:var(--line);margin:20px 0}

.track{display:flex;gap:14px;align-items:flex-start}
.track-art{width:60px;height:60px;flex:none;border-radius:10px;object-fit:cover;background:var(--navy-800);border:1px solid var(--line)}
.track-meta{min-width:0}
.track-kicker{display:flex;align-items:center;gap:7px;font-size:var(--kicker-b);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.track-artist{font-weight:700;color:#fff;margin:0;overflow-wrap:anywhere}
.track-title{color:var(--ink-dim);margin:0;overflow-wrap:anywhere}

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(1,100,224,.1);color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:.18s;
}
.btn:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.btn-inline{width:auto}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#0a0a0a}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:#0a0a0a}

/* ---------- Blokken ---------- */
.section{padding:var(--gap-section) 0}
/* Eén afwijkende ondergrond breekt de stapel identieke kaarten. */
.section--band{background:rgba(1,5,18,.55);border-block:1px solid var(--line-soft)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.section-head h2{margin:0}
.eyebrow{font-size:var(--kicker-a);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-400);margin:0 0 8px}

.grid-2{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);gap:20px;align-items:start}
/* Zonder dit mag een grid-kolom groeien met zijn inhoud mee en duwt een brede
   tabel de hele pagina breder dan het scherm. */
.grid-2>*,.hero-grid>*{min-width:0}
@media (max-width:960px){.grid-2{grid-template-columns:1fr}}

/* Vandaag-tabel */
.today{padding:24px}
.table-scroll{overflow-x:auto}
.today table{width:100%;border-collapse:collapse;font-size:.95rem}
.today td{padding:11px 12px;border-bottom:1px solid var(--line-soft)}
.today tr:last-child td{border-bottom:0}
.today .t-time{width:132px;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.today .t-live{background:var(--blue-500);color:#fff;border-radius:8px}
.today .t-live td{border-bottom-color:transparent;font-weight:700}
.today .t-live .t-time{color:#dce9ff}
.live-badge{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;
  font-size:var(--kicker-b);font-weight:800;letter-spacing:.14em;
  background:rgba(255,69,58,.14);border:1px solid rgba(255,69,58,.4);color:#ff8079}
/* Binnen de blauwe live-regel moet hij juist wit zijn, anders vecht rood met blauw. */
.t-live .live-badge,.slot.now .live-badge{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.today .t-flag{float:right}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:3px;background:currentColor;border-radius:1px;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(1){height:5px;animation-delay:-.5s}
.eq i:nth-child(2){height:12px;animation-delay:-.25s}
.eq i:nth-child(3){height:8px}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* Iconkaarten */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cards--half{grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cards,.cards--half{grid-template-columns:1fr}}
.icard{padding:22px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;transition:.2s;box-shadow:none}
.icard:hover{border-color:var(--blue-500);transform:translateY(-3px);box-shadow:var(--surface-lift),0 14px 34px -14px rgba(1,100,224,.45)}
.icard .r888-i{font-size:2.1rem;color:var(--blue-400);margin-bottom:4px}
.icard h3{margin:0;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.icard p{margin:0;font-size:.92rem;color:var(--ink-dim)}
.icard .btn{margin-top:12px}
/* Eigen klasse voor de balkvariant: anders erft die de 76px-ronde knop en wordt
   hij zichtbaar groter dan zijn buren. */
.btn.is-play .r888-i{font-size:1.1rem}

/* Laatst gedraaid */
.recent-list{display:grid;gap:10px}
.recent-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--card)}
.recent-row img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--navy-800)}
.recent-row .rt{min-width:0;flex:1}
.recent-row b{display:block;color:#fff;font-size:.98rem;overflow-wrap:anywhere}
.recent-row span{display:block;color:var(--ink-dim);font-size:.9rem;overflow-wrap:anywhere}
.recent-row time{color:var(--ink-faint);font-size:.82rem;font-variant-numeric:tabular-nums;flex:none}
.muted{color:var(--ink-dim)}

@media (max-width:520px){
  .today{padding:18px}
  .today td{padding:10px 7px}
  .today .t-time{width:100px;font-size:.85rem}
  .today .t-flag{float:none;display:flex;margin-top:4px}
}

/* Verhaalblok */
.story{padding:34px}
.story p:last-child{margin-bottom:0}
.story .lead{font-size:1.1rem;color:#fff}

/* ---------- Programma's ---------- */
.page-hero{padding:52px 0 8px}
.page-hero h1{margin:0 0 8px}
.page-hero p{color:var(--ink-dim);max-width:62ch;margin:0}

.daybar{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 24px}
.daybar button{
  padding:10px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:.85rem;font-weight:700;
  letter-spacing:.06em;border:1px solid var(--line);background:var(--card);color:var(--ink-dim);transition:.16s;
}
.daybar button:hover{color:#fff;border-color:var(--blue-500)}
.daybar button[aria-selected="true"]{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.daybar button .tag{display:block;font-size:var(--kicker-b);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.daybar button[aria-selected="true"] .tag{color:#fff}
.schedule-overview{margin:0 auto 34px;max-width:760px}
.schedule-overview img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--surface-lift)}

.day-panel[hidden]{display:none}
.slot-list{display:grid;gap:12px}
.slot{display:flex;gap:18px;align-items:center;padding:16px 20px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--card);transition:.16s}
.slot:hover{border-color:var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}
.slot.now{border-color:var(--blue-500);background:rgba(1,100,224,.14)}
.slot-time{width:140px;flex:none;font-variant-numeric:tabular-nums;font-weight:700;color:var(--blue-300);white-space:nowrap}
.slot.now .slot-time{color:#fff}
.slot-body{min-width:0;flex:1}
.slot-body h3{margin:0;font-size:1.1rem}
.slot-body p{margin:2px 0 0;color:var(--ink-dim);font-size:.93rem}
.slot-live{flex:none}
@media (max-width:640px){
  .slot{flex-wrap:wrap;gap:8px}
  .slot-time{width:100%}
}

.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:940px){.posters{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.posters{grid-template-columns:1fr}}
/* Programmakaart. De dag staat als badge op de poster zelf, zodat de regel
   eronder alleen nog de naam en de presentator draagt: één ding per regel in
   plaats van een losse afkorting die nergens bij hoort. */
.poster{display:flex;flex-direction:column;border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;background:var(--card);
  color:inherit;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.poster:hover{transform:translateY(-4px);border-color:var(--blue-500);
  box-shadow:var(--surface-lift),0 16px 36px -16px rgba(1,100,224,.5)}
.poster:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.poster-media{position:relative;line-height:0}
.poster-media img{width:100%;aspect-ratio:1050/1490;object-fit:cover;transition:transform .4s}
.poster:hover .poster-media img{transform:scale(1.03)}
/* Verloop onderaan de poster: de badge moet leesbaar blijven op elke afbeelding. */
.poster-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(1,7,37,.85))}

.poster-tag{position:absolute;left:11px;bottom:11px;z-index:1;
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:999px;
  font-size:var(--kicker-b);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(1,20,89,.78);border:1px solid rgba(125,180,255,.35);
  backdrop-filter:blur(4px)}
.poster--live .poster-tag{padding:0;background:none;border:0;backdrop-filter:none}

.poster-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.poster-body b{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.25;color:#fff}
.poster-body span{font-size:.88rem;color:var(--ink-dim)}

/* ---------- Contact ---------- */
.form-grid{display:grid;gap:16px;max-width:620px}
.field label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:7px}
.field input,.field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.field input:focus,.field textarea:focus{border-color:var(--blue-500);outline:none;box-shadow:0 0 0 3px rgba(1,100,224,.25)}
.field textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);background:rgba(1,100,224,.14);margin-bottom:20px}
.notice.err{border-color:rgba(255,90,80,.5);background:rgba(255,90,80,.12)}

.contact-aside{padding:26px}
.contact-aside dt{font-size:var(--kicker-b);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-400);margin-top:20px}
.contact-aside dt:first-child{margin-top:0}
.contact-aside dd{margin:4px 0 0}

/* Het formulier is het hoofdonderwerp van de pagina en stond kaal op de
   achtergrond terwijl de zijkolom wel een kaart kreeg. Nu even zwaar. */
.contact-card{padding:30px}
@media (max-width:640px){.contact-card{padding:22px}}

/* Onderwerpkeuze als chips. Native radio-inputs, geen JS: Richard ziet
   "Verzoekje via radio888.nl van Jan" in zijn inbox binnenkomen. */
.topic{border:0;margin:0;padding:0}
.topic legend{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:7px;padding:0}
.topic-row{display:flex;gap:8px;flex-wrap:wrap}
.topic label{position:relative;cursor:pointer}
.topic input{position:absolute;opacity:0;pointer-events:none}
.topic span{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-dim);
  font-size:.86rem;font-weight:700;transition:.18s}
.topic span:hover{border-color:var(--blue-500);color:#fff}
.topic input:checked+span{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.topic input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}

/* De afstemschaal: één gedeeld signatuur onder de kop van elke subpagina, zodat
   die niet als kale sjabloonpagina's lezen. De naald staat op de plek van 88.8
   maar draagt bewust GEEN frequentielabel: hij zendt alleen via internet uit en
   een frequentie noemen zou een claim zijn die niet klopt. */
.dial{position:relative;max-width:520px;height:44px;margin-top:22px;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 11px) 0 100%/100% 12px no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 55px) 0 100%/100% 22px no-repeat}
.dial b{position:absolute;bottom:26px;transform:translateX(-50%);
  font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.12em;
  color:var(--ink-faint);font-variant-numeric:tabular-nums}
.dial b:nth-of-type(1){left:6%}
.dial b:nth-of-type(2){left:23.6%}
.dial b:nth-of-type(3){left:41.2%}
.dial b:nth-of-type(4){left:58.8%}
.dial b:nth-of-type(5){left:76.4%}
.dial b:nth-of-type(6){left:94%}
.dial i{position:absolute;left:9.5%;bottom:0;width:2px;height:30px;background:var(--gold);
  box-shadow:0 0 10px rgba(255,193,7,.75)}

/* De draaiende plaat achter "Laatst gedraaid": precies wat die sectie meldt.
   De foto is bijgesneden zodat het merkje op het element eraf is; de URL komt
   via een variabele binnen zodat een vervanging niet weer een maand in de
   cache blijft hangen. */
.section--vinyl{position:relative;isolation:isolate;overflow:hidden}
.section--vinyl::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--band-vinyl) left center/cover no-repeat;
  filter:grayscale(.55) brightness(.55) contrast(1.05);
  opacity:.30;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

/* ---------- Vaste speler onderin ---------- */
.minibar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;transform:translateY(110%);transition:transform .28s ease;
  background:rgba(1,16,60,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.minibar.show{transform:none}
.minibar-in{display:flex;align-items:center;gap:16px;padding:11px 0 calc(11px + env(safe-area-inset-bottom))}
.minibar img{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:var(--navy-800)}
.minibar .mb-txt{min-width:0;flex:1}
.minibar b{display:block;color:#fff;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minibar span{display:block;color:var(--ink-dim);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-btn{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;border:1px solid var(--line);background:var(--blue-500);color:#fff;font-size:1.25rem}
.mb-btn:hover{background:var(--blue-400)}
.mb-vol{width:110px;accent-color:var(--blue-500)}
@media (max-width:700px){.mb-vol{display:none}}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px;border-top:1px solid var(--line-soft);background:rgba(1,5,18,.6);padding:36px 0 90px}
.footer-in{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.footer-in .r888-mark{opacity:.92}
.foot-txt{color:var(--ink-faint);font-size:.9rem}
.foot-txt b{display:block;color:var(--ink-dim);font-weight:600}
.foot-nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin-block:0;padding:0}
.foot-nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.foot-nav a:hover{color:#fff}
@media (max-width:700px){.foot-nav{margin-left:0;flex-basis:100%}}

/* Linkerkolom naast de programmatabel: twee kaarten onder elkaar in plaats van
   vier vakjes die de hero en het menu herhaalden. */
.stack{display:grid;gap:16px;align-content:start}

.icard--media{padding:0;overflow:hidden;text-align:left;align-items:stretch}
/* De foto is warm en paarsig van zichzelf en vecht zo met het marineblauw.
   Ontkleuren en er een marineblauw waas overheen legt hem in het palet, en
   houdt hem sfeer in plaats van blikvanger. */
.icard--media figure{position:relative;margin:0;line-height:0}
.icard--media figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,7,37,.30),rgba(1,7,37,.66));
}
/* Niet te ver ontkleuren: de gouden ring van de microfoon is toevallig precies
   zijn accentkleur. Op .72 was die weg en bleef er een vlek over. */
.icard--media img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;
  filter:grayscale(.45) brightness(.92) contrast(1.06)}
/* Op een telefoon is 16:7 nog maar een strookje van ~164px; iets hoger laat de
   foto weer iets zien. */
@media (max-width:640px){ .icard--media img{aspect-ratio:16/9} }
.icard--media .icard-body{padding:22px 24px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.icard--media h3{margin:0}
.icard--media p{margin:0;color:var(--ink-dim);font-size:.95rem}
.icard--media .btn{margin-top:14px;width:auto}

/* ---------- Luisteropties: TuneIn en de eigen speler ---------- */
.listen-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(1,16,60,.72);backdrop-filter:blur(4px);color:var(--ink-dim);
  font-size:.86rem;font-weight:700;transition:.18s}
.chip:hover{color:#fff;border-color:var(--blue-500);background:rgba(1,100,224,.2)}
.chip .r888-i{font-size:1.05rem;color:var(--blue-400)}
.chip:hover .r888-i{color:#fff}

/* De WhatsApp-knop naar de studio. Eén keer de eigen kleur van WhatsApp, hier
   direct genoteerd: het is een merkkleur van een ander en hoort niet als
   sitevariabele rond te zwerven. Het nummer staat voluit in de knop, zodat je
   het ook kunt overtypen op een toestel zonder WhatsApp. */
.chip--wa{border-color:rgba(37,211,102,.55);background:rgba(37,211,102,.14);color:#fff;
  font-variant-numeric:tabular-nums;align-items:center}
/* Op een smalle telefoon knijpt de flexrij deze knop en brak het nummer over
   twee regels. Het nummer blijft nu in één stuk en de woorden ervoor wijken.
   Bewust geen nowrap op de hele knop: dan steekt hij buiten beeld en snijdt de
   overflow-clip van de site het einde van het nummer af. */
.chip--wa .wa-num{white-space:nowrap}
/* Op een telefoon deelt hij de regel met de andere twee knoppen en houdt dan
   nog maar ruimte over voor twee of drie woorden per regel. Daar is hij een
   knop over de volle breedte: één regel tekst en een ruim raakvlak. */
@media (max-width:560px){
  .chip--wa{flex-basis:100%;justify-content:center;padding-block:12px}
}
.chip--wa .r888-i{color:#25D366;font-size:1.15rem}
.chip--wa:hover{border-color:#25D366;background:rgba(37,211,102,.28);color:#fff}
.chip--wa:hover .r888-i{color:#5ef095}

/* ---------- Programmakaarten op de homepage ---------- */
.poster-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:940px){.poster-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.poster-strip{grid-template-columns:1fr}}

/* Kleine posterduim in de programmaregel: breekt de muur van gelijke balken. */
.slot-thumb{width:54px;height:76px;flex:none;border-radius:8px;object-fit:cover;
  border:1px solid var(--line-soft);background:var(--navy-800)}
@media (max-width:640px){.slot-thumb{display:none}}

/* ---------- Verhaalpagina ---------- */
.story>p:first-of-type{font-size:1.14rem;color:#fff}

/* Zijn verhaal stond gezet als algemene voorwaarden: twaalf identieke alinea's
   in een zwevende kaart. Als open artikel op leesbreedte wordt het de meest
   persoonlijke pagina van de site. Alleen de typografie verandert; zijn tekst
   blijft woord voor woord staan.
   Let op de modifier: .story deelt de homepage-kaart, dus niets hier mag op
   .story zelf staan. */
.story--page{max-width:66ch;margin-inline:auto;padding:0;background:none;border:0;box-shadow:none}
.story--page p{line-height:1.7;margin-bottom:1.35em}
.story--page>p:first-of-type{font-size:1.32rem;line-height:1.55;color:#fff}

.story-hero{position:relative;margin:0 0 34px;line-height:0;border-radius:var(--radius);overflow:hidden}
.story-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,7,37,.30),rgba(1,7,37,.55))}
/* 16/5 snijdt hoogte weg; 22% houdt de gouden ring in beeld in plaats van de beugel. */
.story-hero img{width:100%;aspect-ratio:16/5;object-fit:cover;object-position:50% 22%;
  filter:grayscale(.45) brightness(.92) contrast(1.06)}

/* Zijn slotzin als afsluiting van de pagina, in zijn eigen woorden. */
.story-end{margin-top:44px;padding-top:30px;border-top:3px solid;
  border-image:linear-gradient(90deg,var(--gold),transparent) 1}
.story-end p{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.35;color:#fff}
.story h2{margin-top:1.5em}
.story h2:first-child{margin-top:0}
.pull{margin:30px 0;padding:6px 0 6px 22px;border-left:3px solid var(--gold);
  font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.35;color:#fff}

/* ---------- Nieuws ---------- */
/* Zelfde kaartrecept als de programmaposters, alleen liggend: de site heeft al
   een kaartentaal en een nieuwsbericht hoort daar gewoon in te passen. */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:940px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.news-grid{grid-template-columns:1fr}}

.news-card{display:flex;flex-direction:column;border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;background:var(--card);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.news-card:hover{transform:translateY(-4px);border-color:var(--blue-500);
  box-shadow:var(--surface-lift),0 16px 36px -16px rgba(1,100,224,.5)}
/* De hele kaart licht op zodra de titel de focus krijgt: de afbeelding is een
   tweede link naar hetzelfde bericht en staat daarom buiten de tabvolgorde. */
.news-card:focus-within{border-color:var(--blue-500)}

.news-media{display:block;position:relative;line-height:0;background:var(--navy-800)}
.news-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.news-card:hover .news-media img{transform:scale(1.03)}
.news-media::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(180deg,transparent,rgba(1,7,37,.7))}
/* Een kort berichtje zonder foto is de normale situatie, geen fout. Dit vlak
   hoort dus bij het ontwerp en niet als gat te lezen. */
.news-media-fallback{display:grid;place-items:center;aspect-ratio:16/9;
  background:
    radial-gradient(120% 140% at 22% 8%,rgba(1,100,224,.42),transparent 62%),
    radial-gradient(90% 120% at 88% 96%,rgba(255,193,7,.16),transparent 60%),
    var(--navy-850)}
.news-media-fallback .r888-i{font-size:2.6rem;color:var(--blue-400);opacity:.75}

.news-body{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:18px 20px 20px;flex:1}
.news-date{margin:0;font-size:var(--kicker-b);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-variant-numeric:tabular-nums}
.news-title{margin:0;font-size:1.18rem;line-height:1.25}
.news-title a{color:#fff}
.news-title a:hover{color:var(--blue-300)}
.news-excerpt{margin:0;color:var(--ink-dim);font-size:.95rem}
.news-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
  font-size:.84rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-400)}
.news-more .r888-i{transition:transform .18s}
.news-card:hover .news-more .r888-i{transform:translateX(4px)}

/* Nog geen bericht geschreven. Zonder dit staat de pagina helemaal leeg en
   lijkt hij stuk, terwijl er gewoon nog geen nieuws is. */
.news-empty{padding:44px 34px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:560px;margin-inline:auto}
.news-empty .r888-i{font-size:2.4rem;color:var(--blue-400);margin-bottom:6px}
.news-empty h2{margin:0;font-size:1.4rem}
.news-empty p{margin:0}
.news-empty .btn{margin-top:14px;width:auto}

/* Paginering, zodra er meer berichten zijn dan er op één pagina passen. */
.pagination{margin-top:34px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  color:var(--ink-dim);font-weight:700;font-variant-numeric:tabular-nums}
.pagination a.page-numbers:hover{color:#fff;border-color:var(--blue-500);background:rgba(1,100,224,.18)}
.pagination .page-numbers.current{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none}

/* Onder een bericht: terug naar het overzicht, en het bericht ervoor en erna. */
.post-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;
  max-width:66ch;margin:44px auto 0;padding-top:28px;border-top:1px solid var(--line-soft)}
.post-nav .btn{width:auto;flex:none}
.post-nav-link{display:flex;flex-direction:column;gap:2px;padding:10px 16px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--card);
  min-width:0;flex:1 1 220px}
.post-nav-link:hover{border-color:var(--blue-500);background:rgba(1,100,224,.14)}
.post-nav-link span{font-size:var(--kicker-b);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.post-nav-link b{color:#fff;font-weight:700;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.post-nav-link:hover b{color:#fff}

/* Op een bericht staat de datum onder de kop en niet in een kaart. */
.page-hero .news-date{margin-top:10px}

/* ---------- Footer ---------- */
.footer-in .brand img{width:56px;height:56px}

/* De skyline hoort onderaan het document, niet onderaan het scherm. Als vaste
   achtergrond stond hij achter alles wat toevallig onder in beeld was, en zag
   je zijn verlichte raampjes door de doorzichtige kaarten heen spikkelen. */
.skyline{display:block;height:clamp(90px,14vw,170px);margin-bottom:-1px;opacity:.55;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cg fill='%23010512'%3E%3Crect x='0' y='170' width='90' height='130'/%3E%3Crect x='96' y='120' width='64' height='180'/%3E%3Crect x='166' y='196' width='78' height='104'/%3E%3Crect x='250' y='96' width='54' height='204'/%3E%3Crect x='310' y='150' width='96' height='150'/%3E%3Crect x='412' y='60' width='44' height='240'/%3E%3Crect x='462' y='182' width='86' height='118'/%3E%3Crect x='554' y='128' width='70' height='172'/%3E%3Crect x='630' y='30' width='38' height='270'/%3E%3Crect x='674' y='160' width='92' height='140'/%3E%3Crect x='772' y='104' width='58' height='196'/%3E%3Crect x='836' y='188' width='104' height='112'/%3E%3Crect x='946' y='74' width='48' height='226'/%3E%3Crect x='1000' y='146' width='84' height='154'/%3E%3Crect x='1090' y='110' width='62' height='190'/%3E%3Crect x='1158' y='192' width='90' height='108'/%3E%3Crect x='1254' y='86' width='52' height='214'/%3E%3Crect x='1312' y='158' width='98' height='142'/%3E%3Crect x='1416' y='124' width='66' height='176'/%3E%3Crect x='1488' y='182' width='112' height='118'/%3E%3C/g%3E%3Cg fill='%23FFC107' opacity='.55'%3E%3Crect x='116' y='140' width='4' height='6'/%3E%3Crect x='132' y='158' width='4' height='6'/%3E%3Crect x='268' y='118' width='4' height='6'/%3E%3Crect x='282' y='146' width='4' height='6'/%3E%3Crect x='428' y='84' width='4' height='6'/%3E%3Crect x='428' y='120' width='4' height='6'/%3E%3Crect x='576' y='150' width='4' height='6'/%3E%3Crect x='644' y='58' width='4' height='6'/%3E%3Crect x='644' y='96' width='4' height='6'/%3E%3Crect x='792' y='128' width='4' height='6'/%3E%3Crect x='962' y='100' width='4' height='6'/%3E%3Crect x='962' y='136' width='4' height='6'/%3E%3Crect x='1108' y='134' width='4' height='6'/%3E%3Crect x='1270' y='110' width='4' height='6'/%3E%3Crect x='1270' y='148' width='4' height='6'/%3E%3Crect x='1436' y='148' width='4' height='6'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}