/* ==========================================================================
   portal.fo masthead — implementation of the "Navigatión" design
   (Claude Design project "Portal Play redesign rebuild", Navigatión.dc.html)

   Token names are carried over from the design system's portal.css verbatim,
   per the handoff rule "the token names in portal.css should survive". They
   are scoped to .pf-nav rather than :root so that the 3000-line legacy
   stylesheet is left untouched.

   Everything in the prototype was inline; it lives in real classes here.
   ========================================================================== */

.pf-nav,
.pf-strips {
  --bg:        #ffffff;
  --surface:   #f4f5f7;
  --surface-2: #eceef1;
  --line:      #e3e6ea;
  --line-2:    #d4d8de;

  --fg:   #15181c;
  --fg-2: #4a5159;
  --fg-3: #7c848d;

  --nav-bg: #ffffff;

  /* Design-system ink: the Play button and the "on air" radio pill.
     Deliberately a flat value, not --fg: it stays dark in dark mode too. */
  --ink: #15181c;
  --live: #e0322e;
  --live-on-ink: #ff6b56;

  /* Weather readings. The live site's own values, kept verbatim: these two
     are read as a scale by people who check the strip every morning, so they
     are data, not decoration, and they survive the design's quieter palette. */
  --temp-warm: #ff0000;
  --temp-cold: #0064b4;
  --precip:    #0064b4;

  --pf-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Ready for the design's `dark` prop. The live site has no dark mode yet, so
   nothing sets this class; the tokens are here so that turning it on is a
   one-line change rather than a re-theme. */
.pf-nav.is-dark,
.pf-strips.is-dark {
  --bg:        #181c22;
  --surface:   #20252d;
  --surface-2: #2a303a;
  --line:      #333a44;
  --line-2:    #3f4753;

  --fg:   #f3f5f8;
  --fg-2: #b8c1cc;
  --fg-3: #8a95a1;

  --nav-bg: rgba(24, 28, 34, 1);

  /* Lifted off the pure hues, which do not carry on a dark ground. */
  --temp-warm: #ff5a52;
  --temp-cold: #4aa8ec;
  --precip:    #4aa8ec;
}

.pf-nav.is-dark  .logo-light,
.pf-strips.is-dark .logo-light { display: none; }
.pf-nav:not(.is-dark) .logo-dark,
.pf-strips:not(.is-dark) .logo-dark { display: none; }

.pf-nav,
.pf-nav *,
.pf-nav *::before,
.pf-nav *::after,
.pf-strips,
.pf-strips *,
.pf-strips *::before,
.pf-strips *::after { box-sizing: border-box; }

.pf-nav,
.pf-strips {
  font-family: var(--pf-sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

.pf-nav a,
.pf-strips a { color: inherit; text-decoration: none; }
.pf-nav button { font-family: inherit; }

/* Icons ------------------------------------------------------------------- */
.pf-ico {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  flex: 0 0 auto;
}
/* The design draws the quiet, secondary glyphs at weight 300. */
.pf-ico--thin { font-variation-settings: 'wght' 300; }

/* Animations -------------------------------------------------------------- */
@keyframes pf-eq    { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes pf-pulse { 0%, 100% { opacity: 1; }            50% { opacity: .3; } }
@keyframes pf-drop  { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pf-up    { from { opacity: 0; transform: translateY(10px); } }

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

/* Equaliser --------------------------------------------------------------- */
.pf-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  color: var(--live-on-ink);
}
.pf-eq span {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  animation: pf-eq .9s ease-in-out infinite;
}
.pf-eq--sm      { height: 13px; }
.pf-eq--sm span { height: 13px; }
.pf-eq--lg      { height: 15px; }
.pf-eq--lg span { height: 15px; }
.pf-eq span:nth-child(1) { animation-delay: 0s; }
.pf-eq span:nth-child(2) { animation-delay: .18s; }
.pf-eq span:nth-child(3) { animation-delay: .36s; }
.pf-eq span:nth-child(4) { animation-delay: .54s; }

.pf-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--live);
  flex: 0 0 auto;
  animation: pf-pulse 1.6s infinite;
}
.pf-live-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ==========================================================================
   Masthead shell
   ========================================================================== */
.pf-header {
  position: relative;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

/* ---- Desktop row -------------------------------------------------------- */
.pf-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 70px;
  padding: 0 20px;
  margin: 0 auto;
}

.pf-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.pf-brand img { display: block; height: 36px; width: auto; }

/* Section links. The bar under each one is identity, not an active state —
   every link carries its own colour, straight off the live masthead. */
.pf-sections {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: 8px;
  align-self: stretch;
}
/* All sections or none: JS adds this when the row cannot hold every label. */
.pf-sections.is-collapsed { visibility: hidden; }

.pf-nav .pf-section {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  height: 70px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fg);
  transition: color .15s;
}
.pf-section__bar {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pf-section-c, transparent);
}

.pf-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pf-btn-round .pf-ico,
.pf-radio__btn .pf-radio__off,
.pf-btn-play .pf-ico { font-size: 20px; }

/* Round 36px controls ----------------------------------------------------- */
.pf-nav .pf-btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s;
}
.pf-btn-round:hover { background: var(--surface); }

/* The Nr.fo mark is navy and would vanish on a dark ground, so its plate
   stays white in both themes. */
.pf-btn-nr { background: #ffffff; }
.pf-btn-nr:hover { background: #f4f5f7; }
.pf-btn-nr img { display: block; width: 20px; height: 14px; object-fit: contain; }

/* Play — a dark pill, because it is a departure: it takes you to Portal Play */
.pf-nav .pf-btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 15px 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pf-btn-play:hover { background: #23282e; }

/* Radio — the button becomes the player once a station is on air */
.pf-radio { position: relative; flex: 0 0 auto; }
.pf-radio__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 11px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s;
}
.pf-radio__btn:hover { background: var(--surface); }
.pf-radio.is-on .pf-radio__btn {
  border: 0;
  background: var(--ink);
  color: #fff;
}
.pf-radio.is-on .pf-radio__btn:hover { background: #23282e; }
.pf-radio__chev {
  font-size: 18px;
  color: var(--fg-3);
  transition: transform .16s ease;
}
.pf-radio.is-on .pf-radio__chev { color: rgba(255, 255, 255, .6); }
.pf-radio.is-open .pf-radio__chev { transform: rotate(180deg); }

/* Only one of these two shows at a time */
.pf-radio .pf-eq,
.pf-radio.is-on .pf-radio__off { display: none; }
.pf-radio.is-on .pf-eq { display: inline-flex; }

/* Narrow desktop (< 1140px): the two labelled pills shed their labels so the
   section row keeps its space. A playing station keeps its name. */
@media (max-width: 1139px) {
  .pf-nav .pf-btn-play {
    width: 36px;
    padding: 0;
    gap: 0;
  }
  .pf-btn-play .pf-btn__label { display: none; }
  .pf-radio:not(.is-on) .pf-radio__btn { padding: 0 6px 0 9px; }
  .pf-radio:not(.is-on) .pf-radio__label { display: none; }
}

/* ---- Radio dropdown ----------------------------------------------------- */
.pf-radio__panel {
  position: absolute;
  right: 0;
  top: 44px;
  width: 320px;
  z-index: 30;
  padding: 12px 10px 10px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg);
  animation: pf-drop .16s cubic-bezier(.2, .7, .2, 1);
}
.pf-radio__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 10px;
}
.pf-radio__panel-head .pf-live-label { flex: 1; }

/* Station rows — shared by the dropdown and the mobile drawer */
.pf-station {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  margin-bottom: 2px;
}
.pf-station:hover { background: var(--surface); }
.pf-station.is-on {
  background: rgba(224, 50, 46, .08);
  background: color-mix(in oklch, var(--live) 8%, transparent);
}
/* A white plate sized to the wordmark, so navy marks survive dark mode */
.pf-station__plate {
  flex: 0 0 auto;
  width: 54px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: #ffffff;
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
}
.pf-station__body { flex: 1; min-width: 0; }
.pf-station__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-station__ctl {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--surface);
  color: var(--fg-2);
}
.pf-station.is-on .pf-station__ctl { background: var(--live); color: #fff; }
.pf-station .pf-station__ctl--stop,
.pf-station.is-on .pf-station__ctl--play { display: none; }
.pf-station.is-on .pf-station__ctl--stop { display: inline-flex; }

/* ==========================================================================
   Services bar (row 2 of the masthead)
   ========================================================================== */
.pf-svcbar {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0 auto;
  padding: 7px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.pf-nav .pf-svc-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  transition: background .15s, color .15s;
}
.pf-nav .pf-svc-quick:hover { background: var(--surface); color: var(--fg); }
.pf-svc-quick .pf-ico { font-size: 18px; color: var(--fg-3); }
.pf-svc-quick img {
  display: block;
  width: 18px;
  height: 13px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* JS hides the ones that do not fit before the tail */
.pf-svc-quick.is-hidden { display: none; }

.pf-svcbar__rule {
  width: 1px;
  height: 18px;
  background: var(--line-2);
  flex: 0 0 auto;
  margin: 0 6px;
}
.pf-svcbar__rule.is-hidden { display: none; }
.pf-svcbar__spacer { flex: 1; min-width: 8px; }

.pf-svc-all { position: relative; display: inline-flex; flex: 0 0 auto; }
.pf-svc-all__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.pf-svc-all__btn:hover { background: var(--surface); }
.pf-svc-all.is-open .pf-svc-all__btn { background: var(--surface-2); }
.pf-svc-all__btn .pf-ico { font-size: 18px; color: var(--fg-3); }
.pf-svc-all__chev {
  font-size: 17px;
  color: var(--fg-3);
  transition: transform .16s ease;
}
.pf-svc-all.is-open .pf-svc-all__chev { transform: rotate(180deg); }

/* Anchored to the button and opening leftward: the button sits at the right
   end of the bar, so right-aligning keeps a 620px panel on screen. */
.pf-svc-all__panel {
  position: absolute;
  right: 0;
  left: auto;
  top: 100%;
  width: 620px;
  max-width: calc(100vw - 40px);
  z-index: 40;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg);
  animation: pf-drop .16s cubic-bezier(.2, .7, .2, 1);
}
.pf-svc-all__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pf-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 10px;
}
.pf-svc-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.pf-svc-tile:hover { background: var(--surface); }
.pf-svc-tile .pf-ico { font-size: 21px; color: var(--fg-3); }
.pf-svc-tile img { display: block; width: 21px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.pf-svc-tile__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-svc-tile__chev { font-size: 18px; color: var(--line-2); }

.pf-nav .pf-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pf-nav .pf-contact-link:hover { background: var(--surface); }

/* ==========================================================================
   Mobile masthead
   ========================================================================== */
.pf-row--mobile { display: none; }

.pf-burger {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.pf-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform .18s ease, opacity .18s ease;
}
.pf-nav.is-drawer-open .pf-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pf-nav.is-drawer-open .pf-burger span:nth-child(2) { opacity: 0; }
.pf-nav.is-drawer-open .pf-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Utility strips under the mobile masthead
   ========================================================================== */
.pf-strips {
  display: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.pf-strips .pf-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 45px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: inherit;
}

/* Inner text row.

   The values are set at three different sizes (label 14.5, time 12, the rest
   13), and centring boxes of different heights does NOT put their baselines on
   one line — the half-leading scales with font-size, so the label sat ~1.5px
   below the numbers. Only `align-items: baseline` makes text read level.

   But baseline alignment on the outer row would drag the icons and the count
   pill out of true, so the text gets its own baseline context here and the
   outer row goes on centring that block, the leading glyph and the chevron.
   Two layers, and no tuned magic offset. */
.pf-strip__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
/* A badge wants to be centred on the text block, not sat on its baseline. */
.pf-strip__row .pf-strip__count { align-self: center; }
.pf-strips .pf-strip:last-child { border-bottom-color: transparent; }
.pf-strip .pf-ico { font-size: 20px; color: var(--fg-3); }
.pf-strip__label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg);
  flex: 0 0 auto;
}
.pf-strip__time {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.pf-strip__val {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.pf-strip__val .pf-ico {
  font-size: 13px;
  line-height: 1;
}
.pf-strip__val.is-warm { color: var(--temp-warm); }
.pf-strip__val.is-cold { color: var(--temp-cold); }
.pf-strip__precip { color: var(--precip); }

.pf-strip__sym {
  align-self: center;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-right: -4px; /* pulls the icon onto its reading, against the 10px row gap */
}
.pf-strip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.pf-strip__spacer { flex: 1; }
.pf-strip__chev { font-size: 18px; color: var(--line-2); }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.pf-drawer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;
  z-index: 8;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding: 16px 14px 90px;
  animation: pf-drop .18s cubic-bezier(.2, .7, .2, 1);
}
.pf-drawer::-webkit-scrollbar { display: none; }
.pf-nav.is-drawer-open .pf-drawer { display: block; }

.pf-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  cursor: text;
}
.pf-search .pf-ico { font-size: 20px; color: var(--fg-3); }
.pf-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--fg);
  padding: 0;
}
.pf-search button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--fg-3);
}

.pf-nav .pf-card-play {
  display: block;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.pf-card-play .pf-ico { font-size: 24px; }
.pf-card-play__title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pf-card-play__sub { margin-top: 2px; font-size: 11.5px; opacity: .62; }

/* In the drawer, Radio expands in place rather than sending you elsewhere */
.pf-card-radio {
  padding: 12px 10px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--surface);
  animation: pf-up .18s cubic-bezier(.2, .7, .2, 1);
}
.pf-card-radio__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.pf-card-radio__head .pf-ico { font-size: 24px; color: var(--fg-2); }
.pf-nav.is-playing .pf-card-radio__head .pf-ico { color: var(--live); }
.pf-card-radio__title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg);
}

.pf-seclist { display: flex; flex-direction: column; margin-bottom: 20px; }
.pf-seclist__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.pf-seclist__dot {
  flex: 0 0 auto;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--pf-section-c, var(--line-2));
}
.pf-seclist__label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--fg);
}
.pf-seclist__row .pf-ico { font-size: 19px; color: var(--fg-3); }

.pf-drawer__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.pf-svc-mgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.pf-svc-mtile {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  height: 48px;
  padding: 0 10px 0 12px;
  border-radius: 10px;
  cursor: pointer;
}
.pf-svc-mtile:hover { background: var(--surface); }
.pf-svc-mtile .pf-ico { font-size: 21px; color: var(--fg-3); }
.pf-svc-mtile img { display: block; width: 21px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.pf-svc-mtile__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-contact-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  margin-bottom: 20px;
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.pf-contact-row .pf-ico { font-size: 19px; color: var(--fg-3); }
.pf-contact-row__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.pf-contact-row__chev { font-size: 18px; color: var(--fg-3); }

.pf-contacts { padding-top: 16px; border-top: 1px solid var(--line); }
.pf-contacts__block { margin-bottom: 14px; }
.pf-contacts__block:first-child { margin-top: -2px; }
.pf-contacts__block:last-of-type { margin-bottom: 0; }
.pf-contacts__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pf-contacts__lines {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}
.pf-nav .pf-contacts__tel {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.pf-nav .pf-contacts__mail {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.pf-contacts__note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-3);
}
.pf-contacts__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pf-contacts__foot img { display: block; height: 13px; width: auto; }

/* ==========================================================================
   Now-playing dock — follows you wherever you go
   ========================================================================== */
.pf-dock {
  display: none;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 12;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--ink);
  animation: pf-up .2s cubic-bezier(.2, .7, .2, 1);
}
.pf-nav.is-playing .pf-dock { display: flex; }
.pf-dock__plate {
  flex: 0 0 auto;
  width: 46px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: #ffffff;
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
}
.pf-dock__body { flex: 1; min-width: 0; }
.pf-dock__live { display: flex; align-items: center; gap: 6px; }
.pf-dock__live-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--live-on-ink);
  flex: 0 0 auto;
  animation: pf-pulse 1.6s infinite;
}
.pf-dock__live-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.pf-dock__now {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-dock__stop {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ==========================================================================
   Desktop <-> mobile switch. The design's own breakpoint is 1000px.
   ========================================================================== */
@media (max-width: 999px) {
  .pf-strips { display: block; }

  .pf-row,
  .pf-svcbar { display: none; }

  .pf-row--mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 12px;
  }
  .pf-row--mobile .pf-brand { flex: 1; min-width: 0; }
  .pf-row--mobile .pf-brand img { height: 33px; }
  .pf-btn-nr img { width: 19px; height: 13px; }

  .pf-row--mobile .pf-radio__btn {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .pf-row--mobile .pf-radio__label,
  .pf-row--mobile .pf-radio__chev { display: none; }
  .pf-row--mobile .pf-radio.is-on .pf-radio__btn { color: var(--live-on-ink); }

  .pf-nav .pf-btn-play {
    height: 34px;
    width: auto;
    padding: 0 13px 0 9px;
    gap: 5px;
    font-size: 13px;
  }
  .pf-btn-play .pf-btn__label { display: inline; }
  .pf-btn-play .pf-ico { font-size: 19px; }
}

@media (min-width: 1000px) {
  .pf-strips,
  .pf-drawer,
  .pf-dock { display: none !important; }
}

/* ==========================================================================
   Bridges to the legacy stylesheet (public/css/style.css)
   This file is loaded after it, so equal-specificity rules here win.
   ========================================================================== */

/* Scroll lock while the drawer is up. Own class on purpose: the legacy
   `mobile-open` body class drives the mobile ad takeover, not the menu. */
html.pf-lock,
html.pf-lock body { overflow: hidden; }

/* The drawer is fixed, so the masthead has to be pinned above it or it would
   scroll away and leave the drawer floating. */
.pf-nav.is-drawer-open .pf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* style.css clears the fixed #main_header with offsets tuned to the old
   masthead, which its own comments document as 103px on desktop (58px nav +
   45px sub-nav) and 58px on mobile. The new masthead is 116px / 57px, so each
   of these rules is re-pointed at the height new-header-1.0.0.js measures and
   publishes as --pf-header-h.

   Every rule below preserves production's *delta* from the header height
   rather than flattening them all to one number: the takeover sat 20px
   clear, .center 24px, the ≥1150 table rule 1px. Fallbacks are the design's
   own heights, for the no-JS case.

   Structure is mirrored from style.css deliberately, including the `~`
   combinators — a `+`-only override would miss #mainContentHolder entirely
   on the pages where the strips or the takeover div sit in between. */
#main_header.top ~ #mainContentHolder,
#main_header.top + div {
  margin-top: var(--pf-header-h, 116px);
}

/* An empty .vev-takeover div is always in the DOM on the list pages, and it is
   what actually clears the header there; content below it then gets zero. */
#main_header.top ~ div.vev-takeover {
  margin-top: calc(var(--pf-header-h, 116px) + 20px);
}
#main_header.top ~ div.vev-takeover ~ #mainContentHolder {
  margin-top: 0;
}

/* .center is a direct sibling only on the search page. */
#main_header.top + .center {
  margin-top: calc(var(--pf-header-h, 116px) + 24px);
}

@media screen and (min-width: 1150px) {
  #main_header.top + table + #mainContentHolder,
  #main_header.top + table + script + #mainContentHolder {
    margin-top: calc(var(--pf-header-h, 116px) + 1px);
  }
}

/* Mirrors style.css's ≤1150px block, but at the design's own 1000px
   breakpoint. Between 1000px and 1150px the legacy sheet thinks it is on
   mobile while this masthead is still in its desktop layout; the desktop
   rules above are outside any media query and come later in the cascade, so
   they correctly win in that band. */
@media screen and (max-width: 999px) {
  #main_header.top + a > table,
  #main_header.top + div {
    margin-top: var(--pf-header-h, 57px);
  }
  #main_header.top ~ div.vev-takeover,
  #main_header.top ~ #mainContentHolder {
    margin-top: 0;
  }
}