@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

html { scroll-behavior: smooth; }
body { min-height: 100%; }
main { display: block; }
/* Preserve responsive aspect ratios when HTML width/height attributes reserve layout space. */
img { height: auto; }

.static-mobile-nav {
  display: none;
  border-top: 1px solid rgba(255,255,255,.14);
  background: #0a2736;
  padding: 8px clamp(20px,5vw,56px) 20px;
}
.static-mobile-nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.static-mobile-nav a:last-child { border-bottom: 0; }

.static-view[hidden] { display: none !important; }
.static-tab[aria-selected="true"] {
  background: #1a1714 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -14px rgba(26,23,20,.7) !important;
}
.static-tab[aria-selected="false"] {
  background: transparent !important;
  color: #5f574e !important;
  box-shadow: none !important;
}

.static-label-contrast { color: #70520d !important; }
.static-secondary-contrast { color: #655c52 !important; }

/*
 * The source markup carries its palette inline. These exact-value selectors
 * strengthen only the small teal, green, gold and secondary labels that fell
 * below WCAG AA in the mobile Lighthouse audits, without changing the visual
 * hierarchy of body copy or artwork.
 */
[style*="color: rgb(176, 125, 30)"] { color: #70520d !important; }
[style*="color: rgb(138, 129, 117)"] { color: #655c52 !important; }
[style*="color: rgb(44, 156, 143)"] { color: #0f6f67 !important; }
[style*="color: rgb(31, 157, 114)"] { color: #137454 !important; }

[data-track-card][hidden] { display: none !important; }
.static-filter[aria-pressed="true"] {
  background: #0c3f43 !important;
  border-color: #0c3f43 !important;
  color: #fff !important;
}
.static-filter[aria-pressed="false"] {
  background: #fff !important;
  color: #1a1714 !important;
}

/* Retain the catalog's mood color language while a filter is inactive. */
.static-filter[data-mood-filter="focus"][aria-pressed="false"] {
  background: rgba(62, 109, 176, 0.07) !important;
  border-color: rgba(62, 109, 176, 0.3) !important;
  color: #3e6db0 !important;
}
.static-filter[data-mood-filter="move"][aria-pressed="false"] {
  background: rgba(196, 98, 45, 0.07) !important;
  border-color: rgba(196, 98, 45, 0.3) !important;
  color: #c4622d !important;
}
.static-filter[data-mood-filter="unwind"][aria-pressed="false"] {
  background: rgba(44, 156, 143, 0.07) !important;
  border-color: rgba(44, 156, 143, 0.3) !important;
  color: #2c9c8f !important;
}

/* Keep carousel dots visually delicate while giving every dot a 30px target. */
[data-carousel-index] {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  background: transparent !important;
}
[data-carousel-index]::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #cfc6b5;
  transition: width .3s ease, background .3s ease;
}
[data-carousel-index][aria-current="true"]::before {
  width: 24px;
  background: #1a1714;
}

.home-listen-panel {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}
.home-listen-platforms { flex-wrap: nowrap !important; }

.longing-story-card {
  scroll-snap-align: start;
  flex: 0 0 min(88vw, 1040px);
  min-height: clamp(470px, 56vw, 600px);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(5, 35, 45, 0.7) 0 36px 90px -66px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  display: flex;
  align-items: center;
}
.longing-story-card:nth-child(odd) { justify-content: flex-start; }
.longing-story-card:nth-child(even) { justify-content: flex-end; }
.longing-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 20, 32, 0.3) 0%, rgba(7, 20, 32, 0.12) 55%, rgba(7, 20, 32, 0.04) 100%);
}
.longing-story-card:nth-child(even)::after {
  background: linear-gradient(270deg, rgba(7, 20, 32, 0.3) 0%, rgba(7, 20, 32, 0.12) 55%, rgba(7, 20, 32, 0.04) 100%);
}
.longing-story-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.longing-story-copy {
  position: relative;
  z-index: 2;
  width: min(640px, calc(100% - 48px));
  margin: clamp(24px, 4vw, 56px);
  background: rgba(7, 20, 32, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 48px);
  backdrop-filter: blur(14px);
  box-shadow: rgba(0, 0, 0, 0.55) 0 30px 78px -52px;
}

.static-status {
  margin-top: 10px;
  min-height: 1.4em;
  color: #0e6f65;
  font-size: 13px;
  font-weight: 700;
}

*:focus-visible {
  outline: 3px solid #f0c957 !important;
  outline-offset: 3px !important;
}

@media (max-width: 820px) {
  header.static-menu-open .static-mobile-nav { display: block; }
  .home-listen-platforms { flex-wrap: wrap !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}