/* ==========================================================================
   Discover (/discover/) and Nearby (/nearby/)
   Prefixes: .dx-* Discover, .nx-* Nearby. Builds on tokens.css + base.css.
   ========================================================================== */

/* Any grid/flex ancestor of a scrolling shelf must be allowed to shrink. */
.dx, .dx-rows, .dx-row, .dx-row > .container, .nx, .nx-results { min-width: 0; }

/* ---------- Hero: the featured Original as a title card ---------- */
.dx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);            /* let the glass nav sit over the fog */
  padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-7);
  background: var(--bg-deep);
  color: #eee9dc;
}
.dx-hero__media { position: absolute; inset: 0; z-index: -2; }
.dx-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.dx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 31, 24, 0.2) 0%, rgba(12, 31, 24, 0) 30%, rgba(17, 40, 31, 0.6) 72%, var(--bg) 100%);
}
.dx-hero__inner { display: grid; gap: var(--space-6); align-items: end; }
.dx-hero__cover {
  width: min(62%, 15rem);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(238, 233, 220, 0.08);
}
.dx-hero__cover .cover__title { font-size: clamp(1.4rem, 11cqi, 3.4rem); }
.dx-hero__text { display: grid; gap: var(--space-4); justify-items: start; min-width: 0; }
.dx-hero__text .eyebrow { color: rgba(238, 233, 220, 0.78); }
.dx-hero__title { max-width: 14ch; font-size: clamp(3rem, 1.2rem + 7.2vw, 6.5rem); }
.dx-hero__logline { color: rgba(238, 233, 220, 0.84); max-width: 34rem; }
.dx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }

/* Play: the one light on. Disc + label, one link. */
.dx-hero__play { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; border-radius: var(--radius-pill); }
.dx-hero__play .btn--play { width: 4rem; height: 4rem; pointer-events: none; }
.dx-hero__play:hover .btn--play { --btn-bg: var(--accent-hover); box-shadow: var(--accent-glow); }
.dx-hero__play:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.dx-hero__play-label { display: grid; font: 650 var(--fs-xl)/1.1 var(--font-ui); }
.dx-hero__play-meta { font-size: var(--fs-sm); font-weight: 500; color: rgba(238, 233, 220, 0.72); }

@media (min-width: 56rem) {
  .dx-hero { padding-block: calc(var(--nav-h) + var(--space-7)) var(--space-7); min-height: min(76vh, 44rem); display: grid; align-items: end; }
  .dx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: var(--space-8); }
  .dx-hero__cover { grid-column: 2; grid-row: 1; width: 100%; }
  .dx-hero__text { grid-column: 1; grid-row: 1; padding-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .dx-hero__cover { animation: dx-develop var(--dur-4) var(--ease-tape) both; }
}
@keyframes dx-develop { from { opacity: 0; transform: translateY(10px) scale(0.985); filter: brightness(0.4); } }

/* ---------- Filters ---------- */
.dx-filters { padding-top: var(--space-5); }
.dx-filters .chip { min-height: var(--control-h); padding-inline: 1.1rem; font-size: var(--fs-md); }

/* ---------- Rows ---------- */
.dx-rows { padding-block: var(--space-5) var(--space-6); }
.dx-row { padding-block: var(--space-5); }
.dx-row__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); min-width: 0; }
.dx-row__head > :first-child { min-width: 0; }
.dx-row__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.dx-row__nav { display: none; gap: var(--space-2); }
@media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
  .dx-row__nav:not([hidden]) { display: flex; }
}
.dx-row__nav .btn[disabled] { opacity: 0.3; }
.dx-row__count { margin-bottom: 0.3em; }

.dx-shelf { list-style: none; margin-block: 0; }
.dx-shelf > li { min-width: 0; }
/* The shelf scrolls inside itself; the page never scrolls sideways. */
/* ul[role=list] in base.css zeroes padding (0,1,1); restore the shelf's gutter. */
ul.dx-shelf.shelf, ul.nx-stories.shelf { padding: 0 var(--gutter) var(--space-3); }

/* Personal rows: set apart by a felt band and a two-part, spoken heading. */
.dx-row--personal {
  background: radial-gradient(48rem 16rem at 0% 0%, rgba(242, 163, 58, 0.075), transparent 70%), var(--bg-deep);
  border-block: 1px solid var(--line);
}
.dx-row--personal + .dx-row--personal { border-top: 0; }
.dx-row--personal { padding-block: var(--space-6); }
.dx-row__title--personal { display: grid; gap: var(--space-1); font-weight: inherit; }
.dx-row__title--personal .eyebrow { font-size: var(--fs-lg); }
.dx-row__title--personal .h2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Continue listening: wide resume cards with progress. */
ul.dx-shelf--continue {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 24rem);
  gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; contain: inline-size;
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.dx-shelf--continue::-webkit-scrollbar { display: none; }
.dx-shelf--continue > li { scroll-snap-align: start; }
@media (min-width: 48rem) { ul.dx-shelf--continue { grid-auto-columns: 24rem; gap: var(--space-5); } }
.dx-resume {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3); padding-right: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: inherit; text-decoration: none; box-shadow: var(--inner-light);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.dx-resume:hover { background: var(--surface-2); border-color: var(--line-strong); }
.dx-resume__body { display: grid; gap: var(--space-2); min-width: 0; }
.dx-resume__title { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-resume__play { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); }
.dx-resume__play svg { width: 0.95rem; height: 0.95rem; margin-left: 2px; }
.dx-resume:hover .dx-resume__play { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Category grid */
.dx-filtered { padding-bottom: var(--space-7); }

/* ---------- Logged out: what personalisation looks like ---------- */
.dx-learn { padding-block: var(--space-5); }
.dx-learn__inner {
  display: grid; gap: var(--space-6); align-items: center;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 100% 0%, rgba(242, 163, 58, 0.07), transparent 55%), var(--surface);
}
.dx-learn__copy { display: grid; gap: var(--space-4); justify-items: start; }
.dx-learn__text { font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-text); color: var(--ink-muted); max-width: 34rem; }
.dx-learn__specimen { display: grid; gap: var(--space-3); min-width: 0; }
.dx-learn__line { display: grid; gap: var(--space-1); }
.dx-learn__seed { font: 700 var(--fs-2xl)/1.05 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-learn__ghosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.dx-learn__ghosts span {
  aspect-ratio: 1; border-radius: var(--radius-cover);
  background: radial-gradient(120% 90% at 20% 0%, #2a4d41 0%, #173229 55%, #0f241c 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dx-learn__ghosts span:nth-child(n+3) { opacity: 0.55; }
.dx-learn__ghosts span:nth-child(4) { opacity: 0.25; }
@media (min-width: 56rem) {
  .dx-learn__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: var(--space-7); gap: var(--space-8); }
}

/* ---------- Empty: Originals in production ---------- */
.dx-empty {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding-block: calc(var(--nav-h) + var(--space-8)) var(--space-8);
  text-align: center; color: #eee9dc; background: var(--bg-deep);
}
.dx-empty__media { position: absolute; inset: 0; z-index: -2; }
.dx-empty__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.dx-empty::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 31, 24, 0.3), rgba(17, 40, 31, 0.75) 70%, var(--bg)); }
.dx-empty__inner { display: grid; justify-items: center; gap: var(--space-5); }
.dx-empty__inner .lead { color: rgba(238, 233, 220, 0.84); margin-inline: auto; }
.dx-empty .display { max-width: 16ch; }
.dx-producing { list-style: none; padding: 0; width: 100%; max-width: 36rem; display: grid; gap: var(--space-2); text-align: left; margin-top: var(--space-3); }
.dx-producing__item {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: rgba(12, 31, 24, 0.6); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dx-producing__item .btn { grid-column: 2; justify-self: start; }
.dx-producing__body { display: grid; gap: var(--space-1); min-width: 0; }
.dx-producing__title { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-producing__body .progress { margin-top: var(--space-1); }
@media (min-width: 40rem) {
  .dx-producing__item { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .dx-producing__item .btn { grid-column: auto; }
}

/* ---------- Ask anything ---------- */
.dx-ask { padding-block: var(--space-7); }
.dx-ask__form {
  display: grid; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); background: var(--surface);
}
.dx-ask__title { font-weight: 700; }
.dx-ask__title label { cursor: text; }
.dx-ask__field { display: grid; gap: var(--space-3); }
.dx-ask__input {
  min-height: var(--control-h-lg);
  font-family: var(--font-text); font-size: var(--fs-xl);
  background: var(--bg);
}
.dx-ask__submit { min-height: var(--control-h-lg); padding-inline: 1.75em; font-size: var(--fs-lg); }
@media (min-width: 48rem) {
  .dx-ask__form { grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 2fr); align-items: center; column-gap: var(--space-7); padding: var(--space-6) var(--space-7); }
  .dx-ask__title { grid-row: 1 / span 2; }
  .dx-ask__field { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Go beyond the headline ---------- */
.dx-news__list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .dx-news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.dx-news__item {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); height: 100%;
  padding: var(--space-5); border-top: 2px solid var(--line-strong);
  color: inherit; text-decoration: none;
  background: linear-gradient(180deg, var(--surface), transparent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.dx-news__when { font-family: var(--font-text); font-style: italic; color: var(--ink-muted); font-size: var(--fs-md); }
.dx-news__q { font: 450 var(--fs-2xl)/1.2 var(--font-text); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; text-wrap: balance; }
.dx-news__go { font-weight: 650; color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.dx-news__item:hover { border-top-color: var(--ink); background-color: var(--surface); }
.dx-news__item:hover .dx-news__go { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- Nearby teaser ---------- */
.dx-nearby {
  display: grid; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--bg-deep); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.dx-nearby__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.dx-nearby__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform var(--dur-4) var(--ease-out); }
.dx-nearby:hover .dx-nearby__media img { transform: scale(1.02); }
.dx-nearby__copy { display: grid; gap: var(--space-4); justify-items: start; align-content: center; padding: var(--space-6) var(--space-5); }
.dx-nearby__title { display: block; }
.dx-nearby__text { font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-text); color: var(--ink-muted); max-width: 30rem; }
.dx-nearby:hover .dx-nearby__btn { --btn-bg: var(--surface-3); }
@media (min-width: 48rem) {
  .dx-nearby { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .dx-nearby__media { aspect-ratio: auto; min-height: 22rem; }
  .dx-nearby__copy { padding: var(--space-7); }
}

/* ==========================================================================
   Nearby
   ========================================================================== */
.nx-intro { padding-block: var(--space-6) var(--space-7); }
.nx-intro__grid { display: grid; gap: var(--space-6); align-items: center; }
.nx-intro__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 2 / 1; background: var(--bg-deep); }
.nx-intro__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nx-intro__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; }
.nx-intro__copy { display: grid; gap: var(--space-5); justify-items: start; min-width: 0; }
.nx-intro__copy .lead { max-width: 32rem; }
.nx-how { list-style: none; padding: 0; display: grid; gap: var(--space-2); color: var(--ink-muted); }
.nx-how li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--space-2); align-items: baseline; }
.nx-how li span:first-child { font: 700 var(--fs-lg)/1 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nx-locate { display: grid; gap: var(--space-4); width: 100%; }
.nx-locate__primary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nx-locate__primary .btn svg { width: 1.2em; height: 1.2em; }
.nx-cities { display: grid; gap: var(--space-2); min-width: 0; }
.nx-cities__label { font-size: var(--fs-sm); color: var(--ink-muted); }
.nx-note { font-size: var(--fs-sm); color: var(--ink-faint); max-width: 34rem; }
.nx-geo-msg { font-size: var(--fs-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); max-width: 34rem; }
.nx-geo-msg::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.6em; vertical-align: 0.1em; }
@media (min-width: 56rem) {
  .nx-intro { padding-block: var(--space-7) var(--space-8); }
  .nx-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .nx-intro__media { aspect-ratio: 4 / 4.2; order: 2; }
}

/* Results */
.nx-results { padding-bottom: var(--section-y); scroll-margin-top: var(--nav-h); }
.nx-results__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-6) var(--space-5); border-top: 1px solid var(--line); }
.nx-results__head .eyebrow { display: flex; }
.nx-map {
  height: 18rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-deep); margin-bottom: var(--space-6); z-index: 0; position: relative;
}
@media (min-width: 48rem) { .nx-map { height: 24rem; } }
.nx-map .leaflet-tile-pane { filter: invert(1) hue-rotate(170deg) saturate(0.35) brightness(0.82) contrast(0.95); }
.nx-map .leaflet-container, .nx-map.leaflet-container { background: var(--bg-deep); font-family: var(--font-ui); }
.nx-map .leaflet-control-attribution { background: rgba(12, 31, 24, 0.82); color: var(--ink-muted); font-size: 11px; }
.nx-map .leaflet-control-attribution a { color: var(--ink); }
.nx-map .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }
.nx-map .leaflet-bar a:hover { background: var(--surface-2); }
.nx-map .leaflet-popup-content-wrapper, .nx-map .leaflet-popup-tip { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.nx-map .leaflet-popup-content { margin: 10px 14px; font: 600 var(--fs-sm)/1.3 var(--font-ui); }
.nx-map .leaflet-popup-content a { color: var(--accent-text); }
.nx-map .leaflet-container a.leaflet-popup-close-button { color: var(--ink-muted); }

.nx-block { margin-bottom: var(--space-7); min-width: 0; }
.nx-block__head { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.nx-block__head p { color: var(--ink-muted); }

.nx-stories { list-style: none; margin-block: 0; }

.nx-places { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.nx-place {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3) var(--space-4);
  padding-block: var(--space-5); border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) { .nx-place.is-flash { animation: nx-flash 1.4s var(--ease-out); } }
@keyframes nx-flash { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }
.nx-place__thumb { width: 4.5rem; aspect-ratio: 1; border-radius: var(--radius-cover); overflow: hidden; background: var(--surface-2); position: relative; }
.nx-place__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-place__thumb--plain { background: radial-gradient(120% 90% at 20% 0%, #2a4d41 0%, #173229 55%, #0f241c 100%); display: grid; place-items: center; }
.nx-place__thumb--plain::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); opacity: 0.85; }
.nx-place__body { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
.nx-place__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.nx-place__title { font: 650 var(--fs-lg)/1.25 var(--font-ui); }
.nx-place__dist { font-size: var(--fs-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-place__desc { font-family: var(--font-text); font-style: italic; color: var(--ink-muted); }
.nx-place__extract { font-family: var(--font-text); font-size: var(--fs-md); line-height: 1.55; color: var(--ink); max-width: 40rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--space-1); }
.nx-place__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.nx-place__actions .link { font-size: var(--fs-sm); }
.nx-place__told { font-size: var(--fs-sm); color: var(--success); }
@media (min-width: 48rem) {
  .nx-place { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-5); }
  .nx-place__thumb { width: 7rem; }
  .nx-place__actions { grid-column: auto; flex-direction: column; align-items: end; padding-top: var(--space-1); }
}

.nx-skel { display: grid; gap: var(--space-5); }
.nx-skel__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); }
.nx-empty-results { text-align: left; justify-items: start; padding: var(--space-6) var(--space-5); }
.nx-error { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); border-radius: var(--radius-md); }
.nx-premium-list { margin-top: var(--space-4); }

.dx-nearby-wrap { padding-top: var(--space-7); }
ul.dx-shelf--continue:has(> li:only-child) { grid-auto-columns: min(100%, 26rem); }
@media (max-width: 30rem) { .dx-resume { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-3); } }
#nx-results-title:focus { outline: none; }   /* focus target for screen readers after results load, not an interactive control */