/* ===========================================================================
   WHIN Radio — AirSite template stylesheet
   Every colour below is sampled off the station billboard artwork.
   Day and night are driven ONLY by :root[data-theme]; there is deliberately no
   prefers-color-scheme rule anywhere in this file.
   =========================================================================== */

@font-face{
  font-family:"Fredoka";
  src:url("fonts/fredoka-latin.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- brand constants, read off the billboard ---- */
:root{
  --yellow:#FFEC18;      /* WHIN letter fill           */
  --gold:#F5C310;        /* bar rim and speed lines    */
  --red:#F3101C;         /* letter outline             */
  --red-deep:#CC0001;    /* tagline script, 1948 stamp */
  --navy:#052452;        /* frequency bar              */
  --blue:#0453CC;        /* Tookie body                */
  --orange:#F89E0A;      /* Tookie beak                */
  --shell:1200px;
  --bar:80px;
  --head:84px;
}

:root[data-theme="day"]{
  --page:#FFFFFF;
  --panel:#F1F5FC;
  --card:#FFFFFF;
  --ink:#0D1526;
  --muted:#44506B;
  --line:#D2DAEC;
  --onpanel:#0D1526;
  --link:#0A3FB0;
}

:root[data-theme="night"]{
  --page:#061024;
  --panel:#0B1C3F;
  --card:#0F2250;
  --ink:#EDF2FB;
  --muted:#B4C1DB;
  --line:#1E3568;
  --onpanel:#EDF2FB;
  --link:#8FB4FF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar);overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:"Fredoka",Helvetica,Arial,sans-serif;font-weight:700;line-height:1.1;margin:0 0 .5em}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:14px 20px;z-index:400;border-radius:0 0 10px 0}
.skip:focus{left:0;top:0}

/* ===================================================== header */
.site-head{position:sticky;top:0;z-index:120;background:var(--navy);border-bottom:4px solid var(--gold)}
/* The menu has eleven top-level items. Capped at the 1200px content width they
   wrapped onto three rows, so the header runs the full window and the menu gets
   a line of its own under the logo. */
.site-head > .wrap{max-width:none;padding:0 22px}
body:has(.as-closedbar) .site-head{top:2.1rem}
.head-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;min-height:72px}
.head-mark{flex:0 0 auto;display:flex;align-items:center;min-height:70px;text-decoration:none}
.head-mark img{height:48px;width:auto;display:block}
.onair-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:var(--red-deep);
  color:#fff;font-family:"Fredoka",sans-serif;font-weight:700;font-size:16px;letter-spacing:.05em;
  padding:11px 20px;border-radius:999px;min-height:44px;text-decoration:none}
.onair-pill .blip{width:10px;height:10px;border-radius:50%;background:#fff;animation:blip 1.6s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.menu-toggle{display:none;margin-left:auto;font:inherit;font-weight:700;font-size:17px;
  background:var(--yellow);color:var(--navy);border:0;border-radius:10px;
  padding:11px 20px;min-height:44px;min-width:44px;cursor:pointer}

/* ===================================================== navigation */
/* the menu sits on its own row, centred across the header rather than hard
   against the left edge with the middle left empty */
.site-nav{flex:1 0 100%;display:flex;justify-content:center;padding-bottom:6px}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav .as-menu-1{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.site-nav .as-menu-1 > li{position:relative}
.site-nav a{display:flex;align-items:center;min-height:44px;color:#fff;font-size:17px;font-weight:600;
  text-decoration:none;padding:9px 13px;border-radius:9px;white-space:nowrap}
/* a long menu needs a little less room per item before it is forced to wrap */
@media (max-width:1520px){ .site-nav a{font-size:16px;padding:9px 10px} }
.site-nav a:hover,.site-nav a:focus-visible{background:rgba(255,255,255,.17)}
.site-nav .is-current > a,.site-nav .is-open > a{background:var(--yellow);color:var(--navy)}
/* The dropdown used to sit 4px below its menu item and switch on display, so
   two things made it awkward: moving the pointer down crossed a dead gap and
   the menu shut, and it closed the instant the pointer left, so travelling
   diagonally towards a submenu item passed over the neighbouring heading and
   killed it. It now touches its item, and it lingers for a quarter second
   after the pointer leaves, which is what makes diagonal movement work. */
.site-nav .as-menu-2{position:absolute;top:100%;left:0;z-index:130;
  visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-5px);
  transition:opacity .1s ease-out, transform .1s ease-out, visibility 0s linear .26s;
  min-width:250px;max-width:min(92vw,520px);max-height:min(70vh,620px);overflow-y:auto;
  background:#0A3570;border:3px solid var(--gold);border-radius:14px;padding:8px;
  box-shadow:0 16px 34px rgba(0,0,0,.45)}
.site-nav .as-menu-3,.site-nav .as-menu-4{position:static;display:block;border:0;box-shadow:none;
  padding:0 0 0 14px;max-height:none;overflow:visible;background:transparent}
.site-nav li:hover > .as-menu-2,.site-nav li:focus-within > .as-menu-2{
  visibility:visible;opacity:1;pointer-events:auto;transform:none;
  transition-delay:0s}   /* opens straight away, no wait */

/* a wider hit area under each heading so the pointer never crosses dead space
   on its way down to the panel */
.site-nav .has-children{position:relative}
.site-nav .has-children > a::before{content:"";position:absolute;left:0;right:-12px;
  top:100%;height:14px}
.site-nav .as-menu-2 a{white-space:normal}
.site-nav .has-children > a::after{content:"\25BE";margin-left:8px;font-size:13px;opacity:.85}
.site-nav .as-menu-2 .has-children > a::after{content:""}

/* ===================================================== hero */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;isolation:isolate;
  padding:56px 0 54px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(ellipse 85% 75% at 50% 34%,#0B3C8C 0%,#06265C 48%,var(--navy) 100%),var(--navy)}
.hero::before{content:"";position:absolute;inset:-50% -15%;z-index:-3;
  background:repeating-conic-gradient(from 0deg at 50% 42%,rgba(255,255,255,.06) 0deg 11deg,transparent 11deg 26deg);
  filter:blur(2px);
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 40%,transparent 0%,transparent 36%,#000 74%,transparent 97%);
          mask-image:radial-gradient(ellipse 60% 56% at 50% 40%,transparent 0%,transparent 36%,#000 74%,transparent 97%);
  animation:spin 150s linear infinite}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 48% 46% at 50% 36%,rgba(245,195,16,.16),transparent 70%),
             radial-gradient(ellipse 120% 90% at 50% 42%,transparent 44%,rgba(2,10,30,.6) 100%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- the billboard, stacked from layers that share one canvas ---- */
/* The sign face is dark, not white: a bright white slab this size is painful
   against the navy. The artwork reads as lit tubing instead. Plain gold border,
   no chasing bulbs. */
.billboard{position:relative;width:min(1060px,92vw);margin:0 auto;
  background:
    radial-gradient(ellipse 78% 72% at 50% 38%, #15224E 0%, #0A1431 62%, #060D23 100%);
  border:7px solid #091230;
  border-radius:26px;
  padding:clamp(18px,2.8vw,36px) clamp(20px,3.2vw,42px);
  box-shadow:
    0 0 0 4px var(--gold),
    0 0 0 9px #071027,
    inset 0 0 70px rgba(0,0,0,.55),
    0 26px 44px rgba(0,0,0,.6);
  animation:signin .3s ease-out both}

.bb-layer{position:absolute;inset:0;width:100%;height:auto}
/* the base layer stays in flow so it sets the stack height */
.bb-base{position:relative}

/* Power-on: a short stutter and it is lit. No long build. */
.bb-stack{position:relative;
  filter:none;
  animation:neonon .5s steps(1,end) .22s backwards}
@keyframes neonon{
  0%  {filter:brightness(.34) saturate(.42)}
  18% {filter:brightness(1.14) saturate(1.05)}
  32% {filter:brightness(.36) saturate(.45)}
  46% {filter:brightness(1.1) saturate(1)}
  58% {filter:brightness(.42) saturate(.55)}
  /* settled: no filter at all, so the artwork stays as sharp as it ships */
  100%{filter:none}
}

/* Tookie stays put on the sign and just flaps now and then */
.bb-tookie{transform-origin:85% 46%;cursor:pointer;
  animation:tookieflap 6s ease-in-out 1.1s infinite}
@keyframes tookieflap{
  0%,84%,100%{transform:none}
  87%{transform:scaleY(.93) translateY(-2px)}
  90%{transform:scaleY(1.045) translateY(1px)}
  93%{transform:scaleY(.955) translateY(-1px)}
  96%{transform:scaleY(1.015)}
}

/* ---- Tookie's hotspot, and what he does when you bother him ----
   Hover him and he bristles, then gives you a slow irritated wink. Nothing
   here is clickable: the sign is not reset by poking the bird. */
.tookie-hit{position:absolute;left:69.6%;right:0;top:8%;height:55%;z-index:7;cursor:default}

/* tucked behind the body at rest, so you only see it when it moves */
/* His own wing, cut from the artwork rather than drawn on top. The shoulder is
   at 1292,170 in the layer's 1600x535 space; at rest the piece sits back
   exactly where it came from, so the sign is the original image. */
.tookie-wing{pointer-events:none;transform-origin:80.75% 31.78%}

/* the eyelid fills the eye white; the red socket ring stays visible around it */
.tookie-lid{position:absolute;left:78.22%;width:2.12%;top:16.54%;height:6.36%;
  z-index:8;background:#025ADC;border-radius:50%;transform:scaleY(0);transform-origin:50% 0%}
.tookie-lash{position:absolute;left:78.30%;width:1.96%;top:19.40%;height:1.6%;
  z-index:9;border-top:3px solid #08113D;border-radius:50% 50% 0 0;opacity:0}

/* the body holds still while you are on him - only the wing moves */
.tookie-hover .bb-tookie{animation:none}
.tookie-hover .tookie-wing{animation:tookiewingflap .82s ease-in-out 1}
.tookie-hover .tookie-lid{animation:tookiewink 1.1s ease-in-out .85s 1}
.tookie-hover .tookie-lash{animation:tookielash 1.1s ease-in-out .85s 1}

/* three beats of his own wing, then it settles back onto his body */
@keyframes tookiewingflap{
  0%  {transform:rotate(0deg)}
  16% {transform:rotate(-42deg)}
  33% {transform:rotate(0deg)}
  50% {transform:rotate(-42deg)}
  66% {transform:rotate(0deg)}
  83% {transform:rotate(-42deg)}
  100%{transform:rotate(0deg)}
}
/* invisible while folded against the body, up as soon as the stroke starts */
@keyframes tookiewink{
  0%,12%  {transform:scaleY(0)}
  26%,46% {transform:scaleY(1)}
  60%,100%{transform:scaleY(0)}
}
@keyframes tookielash{
  0%,20%  {opacity:0}
  28%,45% {opacity:1}
  56%,100%{opacity:0}
}

/* ---- the tuning dial, laid over the printed frequency bar ----
   Box measured off the artwork: the pill runs 12.38–87.38% across and
   46.92–75.51% down. The dial is inset 6px inside that so the printed gold
   rim still shows around it. */
.dial{
  position:absolute;
  left:12.75%; right:13.00%; top:48.04%; bottom:25.61%;
  z-index:5;opacity:0;perspective:900px;
}
.dial.on{opacity:1}
.dial.off{opacity:0;transition:opacity .2s linear .2s}

.dial-card{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .44s cubic-bezier(.45,.02,.2,1)}
.dial-card.flip1{transform:rotateX(180deg)}
.dial-card.flip2{transform:rotateX(360deg)}

.dial-face{position:absolute;inset:0;border-radius:999px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:linear-gradient(180deg,#0B3B79 0%,#052452 46%,#02163A 100%);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.55), inset 0 -3px 8px rgba(255,255,255,.07)}
.dial-fm{transform:rotateX(180deg)}
/* backface-visibility alone let the AM badge bleed through the turn, so the
   face is retired outright once the plate is past edge-on */
.dial-face.spent{opacity:0;visibility:hidden}

/* band badge at the left end */
.dial-band{position:absolute;left:2.2%;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:"Archivo",sans-serif;font-weight:800;color:var(--gold);
  font-size:calc(min(1060px,92vw) * .022);letter-spacing:.06em;z-index:3;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* the printed scale: long ticks carry a number, short ticks sit between */
.dial-scale{position:absolute;left:15%;right:3.5%;top:0;bottom:0}
/* ticks are centred on their frequency, same as the needle and the label.
   Without this they sit half their own width to the right and the needle
   never lands exactly on the mark. */
.dial-tick{position:absolute;bottom:8%;width:2px;background:rgba(245,195,16,.5);height:22%;
  transform:translateX(-50%)}
.dial-tick.major{height:38%;width:2.5px;background:rgba(245,195,16,.9)}
/* the station's own frequency, called out on the scale */
.dial-tick.home{height:48%;width:3px;background:var(--yellow);
  box-shadow:0 0 7px rgba(255,236,24,.9)}
.dial-lab.home{color:var(--yellow);
  text-shadow:0 0 8px rgba(255,236,24,.6),0 1px 2px rgba(0,0,0,.8)}
.dial-lab{position:absolute;top:4%;transform:translateX(-50%);
  font-family:"Archivo",sans-serif;font-weight:700;color:rgba(255,255,255,.82);
  font-size:calc(min(1060px,92vw) * .0145);white-space:nowrap}

/* the needle, and the lit readout that rides with it */
.dial-needle{position:absolute;top:40%;bottom:4%;width:3px;transform:translateX(-50%);z-index:4;
  background:linear-gradient(180deg,#FF5A3C,var(--red));border-radius:2px;
  box-shadow:0 0 8px rgba(243,16,28,.95),0 0 20px rgba(243,16,28,.5)}
/* the tip is the pointer: it sits just under the label, not across it */
.dial-needle::after{content:"";position:absolute;left:50%;top:-6px;width:0;height:0;
  transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:8px solid #FF3A28;filter:drop-shadow(0 0 6px rgba(255,58,40,.95))}
/* The badge carries the band only. The frequency is printed on the scale at
   the point the needle lands, which is where a dial reads it from. */

@media (max-width:700px){
  /* the generic scale numbers go, but WHIN's own frequency stays - it is the
     one label on the dial that matters */
  .dial-lab:not(.home){display:none}
  .dial-scale{left:19%}
}

/* the script stays plain red, no tube glow */
.bb-tagline{filter:none}
/* nothing on the settled sign carries a filter: the artwork renders as supplied */

@keyframes signin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}





/* Tookie faces left, so he flies in from the right and settles onto the N */
@keyframes bbrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.billboard.replay,.bb-stack.replay,.bb-layer.replay{animation:none}

.hero .tag{font-family:"Fredoka",sans-serif;font-weight:600;font-size:clamp(17px,2.1vw,21px);
  color:var(--yellow);margin:26px 0 0;animation:bbrise .6s ease-out .9s both}

/* ---- player ---- */
.player{animation:bbrise .7s ease-out 1.0s both;margin:34px auto 0;max-width:780px;
  background:rgba(255,255,255,.09);border:3px solid rgba(245,195,16,.5);border-radius:24px;
  padding:22px;display:grid;grid-template-columns:auto auto 1fr;gap:22px;align-items:center;text-align:left}
.cover{width:112px;height:112px;border-radius:16px;overflow:hidden;flex:0 0 auto;background:#0A3570;
  border:3px solid rgba(245,195,16,.45)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover img.logo{object-fit:contain;background:#fff;padding:7px}
.bigplay{position:relative;width:104px;height:104px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  background:var(--yellow);border:4px solid var(--navy);box-shadow:0 6px 0 var(--navy);
  display:grid;place-items:center;transition:transform .12s,box-shadow .12s}
.bigplay:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--navy)}
.bigplay svg{width:42px;height:42px;fill:var(--navy);margin-left:5px}
.bigplay.playing svg{margin-left:0}
.bigplay::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--yellow);opacity:0}
.bigplay.playing::after{animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.np{min-width:0}
.np .lbl{font-size:15px;font-weight:800;letter-spacing:.12em;color:var(--yellow);
  display:flex;align-items:center;gap:8px;margin-bottom:5px}
.np .lbl i{width:9px;height:9px;border-radius:50%;background:var(--red);font-style:normal}
.np .track{font-family:"Fredoka",sans-serif;font-weight:600;font-size:clamp(20px,2.5vw,26px);
  line-height:1.2;color:#fff;overflow-wrap:anywhere}
.np .artist{font-size:16px;color:rgba(255,255,255,.86);margin-top:3px}
.np .meta{font-size:15px;color:rgba(255,255,255,.74);margin-top:8px}
.spec{display:none;align-items:flex-end;gap:3px;height:34px;margin-top:12px}
.spec.live{display:flex}
.spec b{flex:1;min-width:2px;background:linear-gradient(180deg,var(--yellow),var(--red));
  border-radius:2px 2px 0 0;height:3px;transition:height .07s linear}

/* ===================================================== weather in the header
   Fed from the National Weather Service, the same source as the Sumner County
   weather page. Icons are drawn here so nothing is loaded from elsewhere.

   One line: the sky, the temperature, and where it is. The condition wording
   and the day's high and low used to sit here too, three stacked lines that
   sprawled across the header for information nobody needs at a glance. They
   are on the weather page, which the alert links to. Words are set in Archivo
   like the menu and the body; only the figure itself is Fredoka, which is for
   headings and big display figures. */
.head-wx{display:none;margin-left:auto;align-items:center;gap:9px;
  color:#fff;line-height:1.2;white-space:nowrap}
.head-wx .i{width:30px;height:30px;flex:0 0 auto;background:var(--yellow);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.head-wx .t{font-family:"Fredoka",sans-serif;font-weight:700;font-size:27px;
  line-height:1;color:var(--yellow)}
.head-wx .p{font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:600;
  font-size:15px;color:#fff}
@media (min-width:1200px){
  /* clear of the player card, which floats over the right of this row */
  .head-wx{display:flex;margin-right:min(392px,34vw)}
}
.head-wx[hidden]{display:none}

/* an active Sumner County alert, which opens the weather page */
.wxalert{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:0 14px;border-radius:999px;background:var(--red);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 0 0 0 rgba(243,16,28,.65);animation:blip 1.7s infinite}
.wxalert::before{content:"";width:16px;height:16px;background:#fff;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 5.6 7.1 12.2H4.9zM11 10h2v5h-2zm0 6.5h2V19h-2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm0 5.6 7.1 12.2H4.9zM11 10h2v5h-2zm0 6.5h2V19h-2z'/%3E%3C/svg%3E")}
.wxalert:hover,.wxalert:focus-visible{background:var(--red-deep);color:#fff}
.wxalert[hidden]{display:none}

/* the sky, drawn rather than fetched */
.head-wx .i[data-i="clear"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-13.5a1 1 0 0 1 1 1V6a1 1 0 0 1-2 0V4.5a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1V21a1 1 0 0 1-2 0v-1.5a1 1 0 0 1 1-1zM3.5 12a1 1 0 0 1 1-1H6a1 1 0 0 1 0 2H4.5a1 1 0 0 1-1-1zm15 0a1 1 0 0 1 1-1H21a1 1 0 0 1 0 2h-1.5a1 1 0 0 1-1-1zM5.6 5.6a1 1 0 0 1 1.4 0l1 1a1 1 0 0 1-1.4 1.4l-1-1a1 1 0 0 1 0-1.4zm10.4 10.4a1 1 0 0 1 1.4 0l1 1a1 1 0 0 1-1.4 1.4l-1-1a1 1 0 0 1 0-1.4zM18.4 5.6a1 1 0 0 1 0 1.4l-1 1A1 1 0 0 1 16 6.6l1-1a1 1 0 0 1 1.4 0zM8 16a1 1 0 0 1 0 1.4l-1 1a1 1 0 0 1-1.4-1.4l1-1a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-13.5a1 1 0 0 1 1 1V6a1 1 0 0 1-2 0V4.5a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1V21a1 1 0 0 1-2 0v-1.5a1 1 0 0 1 1-1zM3.5 12a1 1 0 0 1 1-1H6a1 1 0 0 1 0 2H4.5a1 1 0 0 1-1-1zm15 0a1 1 0 0 1 1-1H21a1 1 0 0 1 0 2h-1.5a1 1 0 0 1-1-1zM5.6 5.6a1 1 0 0 1 1.4 0l1 1a1 1 0 0 1-1.4 1.4l-1-1a1 1 0 0 1 0-1.4zm10.4 10.4a1 1 0 0 1 1.4 0l1 1a1 1 0 0 1-1.4 1.4l-1-1a1 1 0 0 1 0-1.4zM18.4 5.6a1 1 0 0 1 0 1.4l-1 1A1 1 0 0 1 16 6.6l1-1a1 1 0 0 1 1.4 0zM8 16a1 1 0 0 1 0 1.4l-1 1a1 1 0 0 1-1.4-1.4l1-1a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="part"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5a1 1 0 0 1 1 1V6a1 1 0 0 1-2 0v-.5a1 1 0 0 1 1-1zm-4.6 2a1 1 0 0 1 1.4 0l.5.5A1 1 0 1 1 4.9 8.4l-.5-.5a1 1 0 0 1 0-1.4zM14 10.5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2zm-.9-4.1a1 1 0 0 1 0-1.4l.5-.5a1 1 0 0 1 1.4 1.4l-.5.5a1 1 0 0 1-1.4 0zM9 13a3.5 3.5 0 1 1 2.6-5.8A5 5 0 0 0 7.2 13zm8.5-1a4.5 4.5 0 0 1 .3 9H7.5a4 4 0 0 1-.3-8 4.7 4.7 0 0 1 4.6-3.5A4.7 4.7 0 0 1 16.2 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5a1 1 0 0 1 1 1V6a1 1 0 0 1-2 0v-.5a1 1 0 0 1 1-1zm-4.6 2a1 1 0 0 1 1.4 0l.5.5A1 1 0 1 1 4.9 8.4l-.5-.5a1 1 0 0 1 0-1.4zM14 10.5a1 1 0 0 1-1-1 1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2zm-.9-4.1a1 1 0 0 1 0-1.4l.5-.5a1 1 0 0 1 1.4 1.4l-.5.5a1 1 0 0 1-1.4 0zM9 13a3.5 3.5 0 1 1 2.6-5.8A5 5 0 0 0 7.2 13zm8.5-1a4.5 4.5 0 0 1 .3 9H7.5a4 4 0 0 1-.3-8 4.7 4.7 0 0 1 4.6-3.5A4.7 4.7 0 0 1 16.2 12z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="cloud"],.head-wx .i[data-i="fog"],.head-wx .i[data-i="wind"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 19h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 19h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="rain"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM8 17l-1.2 3.4a1 1 0 0 0 1.9.6L9.9 17.6A1 1 0 0 0 8 17zm4.5 0-1.2 3.4a1 1 0 0 0 1.9.6l1.2-3.4a1 1 0 0 0-1.9-.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM8 17l-1.2 3.4a1 1 0 0 0 1.9.6L9.9 17.6A1 1 0 0 0 8 17zm4.5 0-1.2 3.4a1 1 0 0 0 1.9.6l1.2-3.4a1 1 0 0 0-1.9-.6z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="snow"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM8 17.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zm4.6 0a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM8 17.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4zm4.6 0a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="storm"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM12.4 16l-3.6 4.6h2.3l-.8 3 4-5h-2.3l1.2-2.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 15h-11a4.5 4.5 0 0 1-.4-9 5.7 5.7 0 0 1 11 .6 4.2 4.2 0 0 1 .4 8.4zM12.4 16l-3.6 4.6h2.3l-.8 3 4-5h-2.3l1.2-2.6z'/%3E%3C/svg%3E")}

/* after dark the sky icon is a moon */
.head-wx .i[data-i="moon"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 14.3A8.6 8.6 0 0 1 9.7 3.3a8.8 8.8 0 1 0 11 11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 14.3A8.6 8.6 0 0 1 9.7 3.3a8.8 8.8 0 1 0 11 11z'/%3E%3C/svg%3E")}
.head-wx .i[data-i="moonpart"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 10.4A6.2 6.2 0 0 1 7 2.6a6.3 6.3 0 0 0 1.2 12.1 4.8 4.8 0 0 1 3.4-3.9 6.2 6.2 0 0 0 3.2-.4zM17.5 21h-10a4 4 0 0 1-.3-8 4.7 4.7 0 0 1 9.1.6 3.8 3.8 0 0 1 1.2 7.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 10.4A6.2 6.2 0 0 1 7 2.6a6.3 6.3 0 0 0 1.2 12.1 4.8 4.8 0 0 1 3.4-3.9 6.2 6.2 0 0 0 3.2-.4zM17.5 21h-10a4 4 0 0 1-.3-8 4.7 4.7 0 0 1 9.1.6 3.8 3.8 0 0 1 1.2 7.4z'/%3E%3C/svg%3E")}

/* ===================================================== interior banner */
.pagehead{position:relative;overflow:hidden;color:#fff;padding:30px 0 28px;isolation:isolate;
  border-bottom:4px solid var(--gold);
  background:radial-gradient(ellipse 90% 120% at 50% 20%,#0B3C8C 0%,#06265C 55%,var(--navy) 100%),var(--navy)}
.pagehead::before{content:"";position:absolute;inset:-50% -15%;z-index:-3;
  background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,255,255,.055) 0deg 11deg,transparent 11deg 26deg);
  filter:blur(2px);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 25%,transparent 0%,transparent 30%,#000 75%,transparent 98%);
          mask-image:radial-gradient(ellipse 70% 90% at 50% 25%,transparent 0%,transparent 30%,#000 75%,transparent 98%);
  animation:spin 150s linear infinite}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 120% 100% at 50% 30%,transparent 40%,rgba(2,10,30,.55) 100%)}
.pagehead h1{font-size:clamp(32px,5vw,56px);letter-spacing:-.02em;margin:0}
.pagehead .lede{margin:12px 0 0;max-width:72ch;color:rgba(255,255,255,.9);font-size:18px}
.pagehead .crumb{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--gold);margin-bottom:6px}
.pagehead .crumb a{color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;margin-block:-11px;padding-right:4px}
.pagehead .crumb a:hover{text-decoration:underline}

/* ===================================================== content blocks */
.as-section{padding:0;margin:0 0 34px}
.as-section:last-child{margin-bottom:0}
main.wrap{padding-top:56px;padding-bottom:64px}
.as-section h2{font-size:clamp(26px,3.6vw,40px)}
.as-section h3{font-size:clamp(21px,2.4vw,27px)}
.as-section p{margin:0 0 1em}
.as-section ul,.as-section ol{margin:0 0 1em;padding-left:24px}
.as-section li{margin:.4em 0}
.as-section img{border-radius:14px}
.as-section table{width:100%;border-collapse:collapse}
.as-section th,.as-section td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.as-section th{background:var(--panel)}
.as-section blockquote{margin:0 0 1em;padding:16px 22px;border-left:5px solid var(--gold);
  background:var(--panel);border-radius:0 12px 12px 0}
.as-section hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ===========================================================================
   Content components. Section authors use these instead of inventing inline
   styles — they already satisfy the tap-target, contrast and day/night rules.
   =========================================================================== */
.whin-kicker{display:inline-block;background:var(--red-deep);color:#fff;font-weight:800;font-size:15px;
  letter-spacing:.1em;padding:7px 16px;border-radius:999px;margin-bottom:14px}
/* Buttons set their words in Archivo, the face the menu, the footer links and
   the body copy all use. They were in Fredoka, the headline face, which made
   every button read as a different site from the menu above it. Fredoka is
   for headings and big display figures only. The raised edge and the press
   are kept: that is what tells a reader the thing can be pushed. */
.whin-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  min-width:44px;padding:12px 28px;font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:700;
  font-size:17px;line-height:1.2;letter-spacing:.01em;text-align:center;
  text-decoration:none;background:var(--yellow);color:var(--navy);border:3px solid var(--navy);
  border-radius:999px;box-shadow:0 5px 0 var(--navy);transition:transform .12s,box-shadow .12s;cursor:pointer}
.whin-btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--navy);text-decoration:none}
.whin-btn.red{background:var(--red-deep);color:#fff}
.whin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin:0 0 28px}
.whin-card{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:24px;
  display:flex;flex-direction:column}
.whin-card h3{margin-top:0}
.whin-card p{color:var(--muted)}
.whin-card.center{text-align:center}
/* A logo or badge at the head of a card. Every one sits in the same box and is
   scaled to fit it, so a row of cards lines up whatever shape each logo is. */
.whin-card img.whin-logo{display:block;width:100%;height:170px;object-fit:contain;
  margin:0 auto;border-radius:0}
/* A row of buttons. Inside a card it drops to the foot of the card and the
   buttons stack full width, so they line up across the row however much text
   each card holds above them. Anywhere else it is a wrapping row. */
.whin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 1em}
.whin-card .whin-actions{margin:auto 0 0;padding-top:8px;flex-direction:column;align-items:stretch}
.whin-card .whin-actions .whin-btn{width:100%}
.center > .whin-actions,.whin-actions.center{justify-content:center}
.whin-slab{background:var(--yellow);border:4px solid var(--navy);border-radius:18px;padding:20px 26px;
  margin:0 0 28px;color:var(--navy)}
.whin-slab b{display:block;font-weight:800;font-size:15px;letter-spacing:.1em}
.whin-slab a{display:inline-flex;align-items:center;min-height:44px;font-family:"Fredoka",sans-serif;
  font-weight:700;font-size:clamp(26px,4vw,38px);color:var(--navy);text-decoration:none;line-height:1.1}
.whin-band{background:var(--panel);color:var(--onpanel);border-radius:20px;padding:34px 36px;margin:0 0 28px}
.whin-band.navy{background:var(--navy);color:#fff}
.whin-band.navy a:not(.whin-btn){color:var(--yellow)}
.as-section > p > a:only-child{display:inline-flex;align-items:center;min-height:44px}

/* ===================================================== footer */
.site-foot{background:var(--navy);color:#fff;padding:54px 0 32px;font-size:16px;
  border-top:4px solid var(--gold)}
.site-foot a{color:#fff}
.site-foot .as-section{margin-bottom:26px}
.foot-mark{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.foot-mark img{height:62px;width:auto}
.foot-legal{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.84);font-size:15px}

/* ===================================================== sticky dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--navy);color:#fff;
  border-top:4px solid var(--gold);transform:translateY(115%);transition:transform .28s ease}
.dock.up{transform:translateY(0)}
.dock .wrap{display:flex;align-items:center;gap:16px;height:var(--bar)}
.dockplay{width:48px;height:48px;border-radius:50%;flex:0 0 auto;cursor:pointer;background:var(--yellow);
  border:3px solid var(--navy);display:grid;place-items:center}
.dockplay svg{width:20px;height:20px;fill:var(--navy);margin-left:3px}
.dockplay.playing svg{margin-left:0}
.dockcover{width:48px;height:48px;border-radius:9px;overflow:hidden;flex:0 0 auto;background:#fff}
.dockcover img{width:100%;height:100%;object-fit:contain}
.docknp{flex:1;min-width:0}
.docknp .l{font-size:15px;font-weight:800;letter-spacing:.12em;color:var(--gold)}
.docknp .t{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dockspec{display:none;align-items:flex-end;gap:2px;height:26px;width:60px;flex:0 0 auto}
.dockspec.live{display:flex}
.dockspec b{flex:1;background:var(--yellow);border-radius:2px 2px 0 0;height:3px;transition:height .07s linear}
.vol{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-height:44px}
.vol svg{width:22px;height:22px;fill:rgba(255,255,255,.85)}
.vol input{width:110px;height:44px;accent-color:var(--yellow);background:transparent;border:0;padding:0}

/* ===================================================== responsive */
@media (max-width:1040px){
  .wx{grid-column:1/-1;border-left:0;border-top:2px solid rgba(255,255,255,.25);padding:16px 0 0}
}
/* Eleven items need a lot of room. Below this the menu would wrap onto two or
   three rows, so it becomes the Menu button instead. */
@media (max-width:1199px){
  .menu-toggle{display:block}
  .site-nav{display:none;order:5;width:100%;justify-content:flex-start;
    max-height:min(70vh,620px);overflow-y:auto;padding-bottom:16px}
  .site-nav.is-open{display:block}
  .head-row{flex-wrap:wrap;padding-top:10px}
  .onair-pill{order:4}
  .site-nav .as-menu-1{display:block}
  .site-nav .as-menu-2{position:static;max-width:none;max-height:none;overflow:visible;
    visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:none;
    border:0;box-shadow:none;background:transparent;padding:0 0 0 16px}
  .site-nav .has-children > a::before{content:none}
  .site-nav a{white-space:normal}
  .site-nav .has-children > a::after{content:""}
  .vol{display:none}
}
@media (max-width:760px){
  .player{grid-template-columns:auto 1fr;gap:18px}
  .player .cover{grid-row:span 2}
}
@media (max-width:560px){
  .hero{padding:30px 0 44px}
  .player{grid-template-columns:1fr;justify-items:center;text-align:center}
  .player .cover{grid-row:auto}
  .np .lbl{justify-content:center}
  .dockspec,.dockcover{display:none}
  main.wrap{padding-top:40px;padding-bottom:48px}
  .head-mark img{height:42px}
}
@media (prefers-reduced-motion:reduce){
  .dial{display:none}
  .bb-stack{filter:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


/* ===================================================== the player shell
   The top-level document holds only the frame and the dock player. The frame
   fills the window above the dock, so the page looks exactly as it did while
   the player sits in a document that never navigates. */
html.shelled, html.shelled body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--navy)}
html.shelled body{display:flex;flex-direction:column;position:relative}
#siteview{flex:1 1 auto;width:100%;border:0;display:block;min-height:0}

/* ---- the ON AIR card, sitting in the header ----
   The card floats over the top right of the page, which is where the header's
   own ON AIR pill used to be. It lives in the shell document, not in the page,
   so it never reloads however you move around the site. The header reserves the
   space so the menu can never run underneath it. */
html.shelled #whin-player{position:absolute;top:6px;right:20px;z-index:40;
  width:min(366px,32vw)}
html.shelled .dock{position:static;transform:none;opacity:1;visibility:visible;
  background:linear-gradient(170deg,#0B3B79 0%,#052452 58%,#02163A 100%);
  border:2px solid var(--gold);border-radius:15px;
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}
html.shelled .dock .wrap{width:auto;max-width:none;height:auto;padding:6px 10px;gap:9px;align-items:center}

html.shelled .dockcover{width:44px;height:44px;flex:0 0 auto;border-radius:9px;overflow:hidden;
  border:2px solid rgba(245,195,16,.6);background:#02163A}
html.shelled .dockcover img{width:100%;height:100%;object-fit:cover;display:block}

html.shelled .docknp{min-width:0;flex:1 1 auto}
html.shelled .docknp .l{display:flex;align-items:center;gap:7px;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;
  color:var(--red);text-transform:uppercase;margin-bottom:1px}
html.shelled .docknp .l::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 0 rgba(243,16,28,.7);animation:blip 1.6s infinite}
html.shelled .docknp .t{font-size:14px;font-weight:700;color:#fff;line-height:1.3;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html.shelled .dockplay{width:44px;height:44px;flex:0 0 auto}
html.shelled .dockspec{display:none}
html.shelled .vol{display:none}

/* Below 1200 the menu collapses to the Menu button, which sits at the right of
   the logo row — exactly where the card is. The card covered it and the menu
   could not be opened at all. So the card becomes a strip above the page at the
   same breakpoint the menu collapses, not 300px later. */
@media (max-width:1199px){
  html.shelled body{display:flex;flex-direction:column}
  html.shelled #whin-player{position:static;width:100%;order:-1;flex:0 0 auto}
  html.shelled .dock{border-radius:0;border-width:0 0 3px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
  html.shelled .dock .wrap{padding:8px 14px}
  html.shelled .dockcover{display:block;width:46px;height:46px}
  html.shelled .docknp .t{-webkit-line-clamp:1}
}

/* the card carries the on-air indicator now, and the header keeps its corner
   clear for it */
html.in-frame .onair-pill{display:none}
html.in-frame #whin-player{display:none}
/* the header is sticky, so an anchor link has to stop short of it or the
   heading it points at ends up hidden behind the bar */
html.in-frame{scroll-padding-top:140px}
/* the card sits over the logo row only, which is empty on the right, so the
   menu row underneath needs nothing reserved for it */
html.in-frame body{padding-bottom:0}


/* ===================================================== the footer block
   Whatever you put in the site-wide Footer content area lands here as plain
   HTML. These rules make a simple Text block look right without you needing
   any markup of your own: links get a real tap target, text stays large and
   high-contrast for older listeners, and the app badges size themselves. */
.foot-blocks{margin-top:4px}
.foot-blocks p{margin:0 0 14px;font-size:17px;line-height:1.7;color:#fff}
.foot-blocks p:last-child{margin-bottom:0}
.foot-blocks a{color:var(--yellow);text-decoration:none;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.foot-blocks a:hover,.foot-blocks a:focus-visible{text-decoration:underline}
.foot-blocks img{height:52px;width:auto;max-width:100%;display:inline-block;vertical-align:middle}
.foot-blocks a:has(img){min-height:0;padding:0}
.foot-blocks ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 22px}


/* ===================================================== footer: apps + social
   Icons are drawn here in the template, so the footer block stays plain HTML
   with no inline styles and nothing loaded from another domain. */
.whin-apps{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px}
.whin-apps a{display:inline-flex;align-items:center;min-height:44px;padding:0}
/* Both badges ship with the template, unmodified as each company requires.
   Apple's artwork fills its canvas; Google's carries 33% built-in clear space,
   so at the same CSS height Google's would look a third smaller. Each gets the
   height that makes the two VISIBLE badges match. */
.whin-apps img{height:48px;width:auto;display:block}
.whin-apps img.gplay{height:71px}

.whin-social{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px;padding:0;list-style:none}
.whin-social a{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;min-height:48px;border-radius:50%;
  background:rgba(255,255,255,.10);border:2px solid var(--gold);
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
  transition:background .15s ease, transform .15s ease}
.whin-social a:hover,.whin-social a:focus-visible{background:var(--yellow);transform:translateY(-2px)}
.whin-social a::before{content:"";width:24px;height:24px;flex:0 0 auto;text-indent:0;
  background:var(--yellow);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.whin-social a:hover::before,.whin-social a:focus-visible::before{background:var(--navy)}

.whin-social a.fb::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-7h2.4l.4-2.9h-2.8V9.3c0-.8.2-1.4 1.4-1.4h1.5V5.3c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.1H8v2.9h2.5V21z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-7h2.4l.4-2.9h-2.8V9.3c0-.8.2-1.4 1.4-1.4h1.5V5.3c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.1H8v2.9h2.5V21z'/%3E%3C/svg%3E")}

.whin-social a.ig::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3zm4 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm4.6-2.9a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3zm4 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm4.6-2.9a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E")}

.whin-social a.x::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 3h3.3l-7.2 8.2L22 21h-6.5l-5.1-6.3L4.6 21H1.3l7.7-8.8L1 3h6.7l4.6 5.8zm-1.2 16h1.8L7.7 4.9H5.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 3h3.3l-7.2 8.2L22 21h-6.5l-5.1-6.3L4.6 21H1.3l7.7-8.8L1 3h6.7l4.6 5.8zm-1.2 16h1.8L7.7 4.9H5.8z'/%3E%3C/svg%3E")}