/* Northern Dial shared site shell */
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none !important;
}

.nd-site-header {
  background: #fff !important;
  border-bottom: 3px solid #CC3333 !important;
  padding: 24px 24px 20px !important;
  text-align: center !important;
}
.nd-site-logo {
  display: inline-block !important;
  line-height: 0 !important;
}
.nd-site-logo img {
  display: block !important;
  height: auto !important;
  margin: 0 auto !important;
  max-width: 240px !important;
  width: min(65vw, 240px) !important;
}
.nd-site-nav {
  background: #1a1a1a !important;
  border-bottom: 2px solid #CC3333 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
}
.nd-nav-inner {
  align-items: stretch !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  min-height: 54px !important;
}
.nd-nav-link,
.nd-more-button {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 54px !important;
  padding: 14px 25px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.nd-nav-link:hover,
.nd-nav-link:focus,
.nd-more-button:hover,
.nd-more-button:focus,
.nd-nav-link.active {
  background: #262626 !important;
  color: #CC3333 !important;
}
.nd-nav-link.active {
  box-shadow: inset 0 -3px 0 #CC3333 !important;
}
.nd-more {
  display: flex !important;
  position: relative !important;
}
.nd-more-button::after {
  content: '▾';
  font-family: Arial, sans-serif !important;
  font-size: .72em !important;
  margin-left: 8px !important;
}
.nd-more-menu {
  background: #1a1a1a !important;
  border: 1px solid #343434 !important;
  border-top: 2px solid #CC3333 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  display: none !important;
  min-width: 190px !important;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  z-index: 10001 !important;
}
.nd-more.open .nd-more-menu,
.nd-more:focus-within .nd-more-menu {
  display: block !important;
}
.nd-more-menu .nd-nav-link {
  justify-content: flex-start !important;
  min-height: 46px !important;
  padding: 13px 18px !important;
  width: 100% !important;
}
.nd-more-menu .nd-submit-link {
  background: #CC3333 !important;
  color: #fff !important;
}
.nd-more-menu .nd-submit-link:hover,
.nd-more-menu .nd-submit-link:focus {
  background: #8B2323 !important;
  color: #fff !important;
}
.nd-mobile-toggle {
  display: none !important;
}

@media (max-width: 980px) {
  .nd-nav-link,
  .nd-more-button {
    font-size: .88rem !important;
    letter-spacing: .09em !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 768px) {
  .nd-site-header {
    padding: 18px 18px 16px !important;
  }
  .nd-site-logo img {
    max-width: 190px !important;
    width: min(58vw, 190px) !important;
  }
  .nd-nav-inner {
    display: block !important;
    min-height: 48px !important;
  }
  .nd-mobile-toggle {
    align-items: center !important;
    background: #1a1a1a !important;
    border: 0 !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    justify-content: space-between !important;
    letter-spacing: .14em !important;
    min-height: 48px !important;
    padding: 13px 18px !important;
    text-transform: uppercase !important;
    width: 100% !important;
  }
  .nd-mobile-toggle .nd-menu-icon {
    color: #CC3333 !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.35rem !important;
  }
  .nd-primary-links {
    background: #1a1a1a !important;
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .nd-site-nav.open .nd-primary-links {
    display: flex !important;
  }
  .nd-primary-links > .nd-nav-link,
  .nd-more,
  .nd-more-button {
    width: 100% !important;
  }
  .nd-primary-links > .nd-nav-link,
  .nd-more-button {
    border-bottom: 1px solid #343434 !important;
    justify-content: flex-start !important;
    min-height: 46px !important;
    padding: 14px 18px !important;
  }
  .nd-nav-link.active {
    box-shadow: inset 4px 0 0 #CC3333 !important;
  }
  .nd-more {
    display: block !important;
  }
  .nd-more-button {
    display: none !important;
  }
  .nd-more-menu {
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
    min-width: 0 !important;
    position: static !important;
    width: 100% !important;
  }
  .nd-more-menu .nd-nav-link {
    border-bottom: 1px solid #343434 !important;
    min-height: 46px !important;
    padding: 14px 18px !important;
  }
}

/* Normalize the M Is for Montreal homepage story card with the rest of the grid. */
a[href="/blog/m-is-for-montreal-part-1.html"] > img {
  aspect-ratio: auto !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}
a[href="/blog/m-is-for-montreal-part-1.html"] .card-title,
a[href="/blog/m-is-for-montreal-part-1.html"]:visited .card-title {
  color: #1a1a1a !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
}

/* Keep every standard blog archive card image the same size. */
.card-grid > article.card:not(.nd-featured-story) > a:first-child img {
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
}

/* Northern Dial homepage visual refresh */
body#top:has(.nd-home-hero-logo) {
  min-height: 100vh !important;
  background: linear-gradient(to bottom, #f3eee3 0%, #f3eee3 8%, #eccfc8 28%, #df978b 58%, #cc3333 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
body#top:has(.nd-home-hero-logo) .container {
  max-width: 1200px !important;
  background: transparent !important;
}
body#top:has(.nd-home-hero-logo) .nd-home-hero-logo {
  background-image: url('/assets/northern-dial-home-hero.jpg?v=20260914c') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: clamp(280px, 36vw, 455px) !important;
  margin: -40px calc(50% - 50vw) 28px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}
body#top:has(.nd-home-hero-logo) .nd-home-hero-logo::after {
  content: none !important;
  display: none !important;
}
body#top:has(.nd-home-hero-logo) .nd-home-hero-logo .logo-image {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep the player shadow below the card so it does not bleed into the hero. */
body#top:has(.nd-home-hero-logo) .custom-player {
  box-shadow: 0 18px 28px -18px rgba(195, 51, 51, .42) !important;
  position: relative !important;
}

/* Alexa availability lives with the player as a listening option, not a separate promo card. */
body#top:has(.nd-home-hero-logo) .custom-player::after {
  content: 'NOW ON ALEXA  •  “Alexa, play Northern Dial.”';
  display: block !important;
  margin-top: 22px !important;
  padding-top: 17px !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  color: #f3eee3 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  line-height: 1.45 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

@media (max-width: 768px) {
  body#top:has(.nd-home-hero-logo) .container {
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body#top:has(.nd-home-hero-logo) .nd-home-hero-logo {
    background-position: 72% center !important;
    background-size: cover !important;
    height: 250px !important;
    margin: 0 calc(50% - 50vw) 18px !important;
    max-width: 100vw !important;
  }
  body#top:has(.nd-home-hero-logo) .custom-player {
    box-shadow: 0 16px 22px -16px rgba(195, 51, 51, .34) !important;
  }
  body#top:has(.nd-home-hero-logo) .custom-player::after {
    content: 'NOW ON ALEXA\A“Alexa, play Northern Dial.”';
    white-space: pre-line !important;
    font-size: .82rem !important;
  }
}


/* ND_PERSISTENT_PLAYER_CSS_START */
:root {
  --nd-player-height: 76px;
}

.nd-persistent-audio {
  display: none !important;
}

.nd-mini-player {
  align-items: center !important;
  background: #111214 !important;
  border-top: 3px solid #CC3333 !important;
  bottom: 0 !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.24) !important;
  color: #fff !important;
  display: flex !important;
  left: 0 !important;
  min-height: 76px !important;
  opacity: 0 !important;
  padding: 9px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  pointer-events: none !important;
  position: fixed !important;
  right: 0 !important;
  transform: translateY(110%) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  z-index: 2147483000 !important;
}

.nd-mini-player.nd-mini-visible,
body.nd-persistent-browsing .nd-mini-player {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.nd-mini-player-inner {
  align-items: center !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 60px minmax(0, 1fr) auto !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  width: 100% !important;
}

.nd-mini-play {
  align-items: center !important;
  appearance: none !important;
  background: linear-gradient(135deg, #CC3333, #8B2323) !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  height: 58px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  width: 58px !important;
}

.nd-mini-play:active {
  transform: scale(.95) !important;
}

.nd-mini-play-glyph {
  border-bottom: 9px solid transparent !important;
  border-left: 14px solid #fff !important;
  border-top: 9px solid transparent !important;
  display: block !important;
  height: 0 !important;
  margin-left: 4px !important;
  width: 0 !important;
}

.nd-mini-pause-glyph {
  align-items: center !important;
  display: none !important;
  gap: 5px !important;
  justify-content: center !important;
}

.nd-mini-pause-glyph i {
  background: #fff !important;
  border-radius: 1px !important;
  display: block !important;
  height: 20px !important;
  width: 5px !important;
}

.nd-mini-play.playing .nd-mini-play-glyph {
  display: none !important;
}

.nd-mini-play.playing .nd-mini-pause-glyph {
  display: inline-flex !important;
}

.nd-mini-play:hover,
.nd-mini-play:focus {
  background: linear-gradient(135deg, #CC3333, #8B2323) !important;
  box-shadow: 0 0 20px rgba(195, 51, 51, .55) !important;
}

.nd-mini-play:focus-visible,
.nd-mini-profile:focus-visible {
  outline: 3px solid #F6F1E7 !important;
  outline-offset: 3px !important;
}

.nd-mini-copy {
  min-width: 0 !important;
}

.nd-mini-status {
  align-items: center !important;
  color: #b9b9b9 !important;
  display: flex !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  gap: 6px !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}

.nd-mini-live-dot {
  background: #66635F !important;
  border-radius: 50% !important;
  display: inline-block !important;
  height: 7px !important;
  width: 7px !important;
}

.nd-mini-player.is-playing .nd-mini-live-dot {
  background: #CC3333 !important;
  box-shadow: 0 0 0 4px rgba(204,51,51,.16) !important;
}

.nd-mini-track,
.nd-mini-artist {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nd-mini-track {
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.nd-mini-artist {
  color: #cfcfcf !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: .82rem !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.nd-mini-profile {
  align-items: center !important;
  background: transparent !important;
  border: 2px solid #CC3333 !important;
  border-radius: 5px !important;
  color: #fff !important;
  display: inline-flex !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
  letter-spacing: .08em !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.nd-mini-profile[hidden] {
  display: none !important;
}

.nd-mini-profile:hover,
.nd-mini-profile:focus {
  background: #CC3333 !important;
  color: #fff !important;
}

body.nd-has-mini-player:not(.nd-persistent-browsing) {
  padding-bottom: var(--nd-player-height) !important;
}

.nd-persistent-frame {
  background: #fff !important;
  border: 0 !important;
  bottom: auto !important;
  height: calc(100vh - var(--nd-player-height)) !important;
  height: calc(100dvh - var(--nd-player-height)) !important;
  left: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 2147482000 !important;
}

.nd-persistent-frame-loading {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.nd-persistent-frame[hidden] {
  display: none !important;
}

body.nd-persistent-browsing {
  height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.nd-persistent-browsing #nd-initial-document {
  display: none !important;
}

@media (max-width: 620px) {
  .nd-mini-player {
    min-height: 72px !important;
    padding-top: 8px !important;
  }

  .nd-mini-player-inner {
    gap: 9px !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
  }

  .nd-mini-play {
    height: 56px !important;
    width: 56px !important;
  }

  .nd-mini-track {
    font-size: .9rem !important;
  }

  .nd-mini-artist {
    font-size: .76rem !important;
  }

  .nd-mini-status {
    font-size: .62rem !important;
  }

  .nd-mini-profile {
    font-size: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    width: 38px !important;
  }

  .nd-mini-profile::after {
    content: '→' !important;
    font-family: Arial, sans-serif !important;
    font-size: 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-mini-player {
    transition: none !important;
  }
}
/* ND_PERSISTENT_PLAYER_CSS_END */


/* ND_RENDER_DEFER_START
   Let modern browsers skip layout/paint work for long below-the-fold catalogues.
   Unsupported browsers simply ignore these rules. */
@supports (content-visibility: auto) {
  details[data-search],
  .card-grid > article.card,
  .release-card,
  .artist-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 220px;
  }
}
/* ND_RENDER_DEFER_END */

/* Keep flexible cards and history controls within the viewport. */
.content-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.content-columns > .column { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.nd-mini-actions { display:flex; align-items:center; gap:8px; }
.nd-mini-add,.nd-mini-discover { flex:0 0 36px; width:36px; height:36px; min-height:36px; padding:0; border:1px solid #fff8; border-radius:50%; background:transparent; color:white; font:700 22px Arial; cursor:pointer; }
.nd-mini-discover { font-size:18px; }
.nd-mini-actions button:disabled { opacity:.5; cursor:default; }
@media(max-width:768px) {
  .content-columns { grid-template-columns:minmax(0,1fr); }
  .content-columns > .column { padding:22px 18px; }
  #recentlyPlayed > div { display:grid!important; grid-template-columns:40px minmax(0,1fr) 36px 36px; grid-template-areas:"art info add discover" "art time add discover"; gap:4px 8px!important; padding:12px 0!important; }
  #recentlyPlayed > div > :first-child { grid-area:art; width:40px!important; height:40px!important; }
  #recentlyPlayed > div > :nth-child(2) { grid-area:info; overflow-wrap:anywhere; }
  #recentlyPlayed > div > :nth-child(3) { grid-area:time; font-size:.65rem!important; }
  #recentlyPlayed .nd-mix-add { grid-area:add; }
  #recentlyPlayed .nd-discover-add { grid-area:discover; }
}
@media(max-width:620px) {
  .nd-mini-player-inner { grid-template-columns:56px minmax(0,1fr) auto!important; gap:8px!important; }
  .nd-mini-actions { gap:5px; }
  .nd-mini-actions .nd-mini-profile { width:30px!important; height:34px!important; min-height:34px!important; padding:0!important; }
  .nd-mini-actions button { width:32px!important; height:34px!important; min-height:34px!important; flex-basis:32px; }
}