/* Compact section rhythm. Load after the existing visual styles.
   Keep type, source imagery, media ratios and interaction behaviour intact. */
html body.nocturne main > .section {
  padding-block: clamp(26px, 2.6vw, 36px);
}

html body.nocturne .hero .hero-inner {
  min-height: 0;
  padding-block: 32px 40px;
}

html body.nocturne :is(.section-head, .listening-intro) {
  gap: 18px;
  margin-bottom: 12px;
  min-height: 0;
  align-items: start;
}

html body.nocturne :is(.section-head, .listening-intro) > p,
html body.nocturne .process > div,
html body.nocturne .closing-inner > div {
  padding: 14px 16px;
}

html body.nocturne .music-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* Flatten the neutral wrapper so the three releases form one compact row,
   rather than leaving a large void below Ecstasy beside a two-card stack. */
html body.nocturne .music-stack {
  display: contents;
}

/* A short card should not inherit the neighbouring stack's full height. */
html body.nocturne :is(.music-primary, .music-mini) {
  min-height: 0;
  padding: 14px 16px;
  justify-content: flex-start;
  gap: 0;
}

html body.nocturne .music-primary h3 {
  font-size: clamp(1.65rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin-block: 10px 8px;
}

html body.nocturne .music-mini h3 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.25;
  margin-block: 10px 8px;
}

html body.nocturne :is(.music-primary, .music-mini) p {
  font-size: .9375rem;
  line-height: 1.65;
  margin-block: 0 10px;
}

html body.nocturne .more-listening {
  gap: 10px;
  margin-top: 16px;
}

html body.nocturne .more-listening > a {
  padding: 12px 14px;
}

html body.nocturne .more-listening .inline-media-hint {
  margin-top: 8px;
}

html body.nocturne .artist-player {
  padding: 20px;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

html body.nocturne .artist-player h3 {
  margin-block: 6px 10px;
}

html body.nocturne .cassette {
  margin-block: 12px;
}

html body.nocturne .player-playlist {
  gap: 8px;
}

html body.nocturne .player-playlist button {
  min-height: 56px;
  padding: 8px 12px;
}

html body.nocturne .curated-playlists {
  margin-top: 24px;
  padding-top: 18px;
}

html body.nocturne .playlist-collections {
  margin-top: 16px;
  gap: 10px;
}

html body.nocturne .playlist-collection {
  padding: 11px 13px;
  min-height: 56px;
}

html body.nocturne .more-playlists summary {
  padding-block: 14px;
  min-height: 44px;
}

html body.nocturne .process {
  margin-top: 24px;
  column-gap: clamp(18px, 3vw, 36px);
  row-gap: 18px;
}

html body.nocturne .process h3 {
  margin-block: 8px 12px;
}

html body.nocturne .process > div > p {
  margin-block: 0 12px;
}

html body.nocturne .practice-list {
  gap: 12px;
}

html body.nocturne .practice-row {
  padding: 14px 16px;
  gap: 14px;
  min-height: 0;
}

html body.nocturne .practice-row .role-note {
  margin-top: 10px;
  gap: 6px;
}

html body.nocturne .writer-copy h3 {
  margin-bottom: 10px;
}

html body.nocturne .story {
  column-gap: clamp(24px, 4vw, 52px);
  row-gap: 22px;
}

html body.nocturne .story-text {
  padding: 18px 20px;
  min-height: 0;
}

html body.nocturne .story-text .section-title {
  margin-bottom: 12px;
}

/* Avoid adding both a top and bottom paragraph gap. */
html body.nocturne .story-text p {
  margin-block: 0 12px;
}

html body.nocturne .story-text p + p {
  margin-top: 0;
}

html body.nocturne .legacy-grid {
  gap: 16px;
  align-items: start;
}

html body.nocturne .legacy-card {
  padding: 18px;
  min-height: 0;
}

html body.nocturne .legacy-card h3 {
  margin-block: 10px 10px;
}

html body.nocturne .legacy-card p {
  flex: none;
  margin-bottom: 12px;
}

html body.nocturne .follow-actions {
  gap: 8px;
  margin-block: 8px 14px;
}

html body.nocturne .follow-actions a {
  min-height: 44px;
}

html body.nocturne .social-links {
  gap: 14px;
}

html body.nocturne .social-links > a {
  padding: 14px 16px;
  min-height: 44px;
}

html body.nocturne .closing {
  min-height: 0;
  padding-block: 28px 24px;
}

html body.nocturne .closing-inner {
  gap: 18px;
}

html body.nocturne .closing-inner > div > p {
  margin-block: 0 12px;
}

html body.nocturne footer {
  padding-top: 22px;
}

html body.nocturne .footer-inner {
  padding-block: 18px;
  gap: 18px;
}

html body.nocturne .footer-tools {
  padding-block: 14px;
  gap: 14px;
}

html body.nocturne .footer-tools nav a,
html body.nocturne .text-link {
  min-height: 44px;
}

html body.nocturne footer .artist-social-nav {
  margin-block: 14px;
  gap: 8px;
}

html body.nocturne .context-links {
  padding-block: 8px 18px;
}

html body.nocturne .context-links div {
  gap: 6px 18px;
}

html body.nocturne .context-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Keep section typography in proportion to the small listening surfaces.
   Brand wordmarks, hero type and all supplied image ratios remain untouched. */
html body.nocturne .section-title {
  font-size: clamp(1.75rem, 2.7vw, 2.6rem);
  line-height: 1.2;
}

html body.nocturne .music-primary .track-subtitle {
  font-size: .66em;
  line-height: 1.35;
  margin-top: 3px;
}

html body.nocturne :is(.music-primary, .music-mini) .small {
  font-size: .6875rem;
  line-height: 1.6;
}

html body.nocturne :is(.music-primary, .music-mini) .text-link {
  font-size: .75rem;
  padding: 8px 12px;
  margin-top: 0;
  min-height: 44px;
}

html body.nocturne :is(.section-head, .listening-intro) > p,
html body.nocturne :is(.practice-row, .legacy-card, .process, .closing-inner) p {
  font-size: 1rem;
  line-height: 1.7;
}

html[lang=ja] body.nocturne :is(.section-head, .listening-intro) > p,
html[lang=ja] body.nocturne :is(.practice-row, .legacy-card, .process, .closing-inner) p {
  line-height: 1.8;
}

html body.nocturne :is(.practice-row, .legacy-card) h3 {
  font-size: clamp(1.35rem, 1.85vw, 1.65rem);
  line-height: 1.3;
}

html body.nocturne :is(.process, .artist-player, .curated-playlists) h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.25;
}

html body.nocturne .artist-player .on-air {
  margin-block: 0 8px;
}

html body.nocturne :is(.story-text, .writer-copy) p {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

html body.nocturne .more-listening .listening-title {
  font-size: .9375rem;
}

html body.nocturne .more-listening > a > span:not(.listening-title) {
  font-size: .8125rem;
  line-height: 1.55;
}

html body.nocturne .social-links > a {
  font-size: 1.25rem;
}

@media (min-width: 1000px) {
  html body.nocturne .more-listening {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 651px) and (max-width: 850px) {
  html body.nocturne .music-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body.nocturne .music-primary {
    grid-column: 1 / -1;
  }
}

@media (min-width: 851px) {
  html body.nocturne .practice-row:not(.practice-writer) {
    grid-template-columns: 42px minmax(0, .8fr) minmax(0, 1.7fr);
  }
}

@media (max-width: 850px) {
  html body.nocturne .artist-player {
    gap: 20px;
    padding: 18px;
  }
}

@media (max-width: 760px) {
  html body.nocturne .hero .hero-inner {
    padding-block: 24px 28px;
  }

  html body.nocturne .hero .hero-copy > .hero-actions {
    margin-block: 14px 18px;
  }
}

@media (max-width: 650px) {
  html body.nocturne .music-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html body.nocturne .music-primary h3 {
    font-size: 1.75rem;
  }

  html body.nocturne main > .section {
    padding-block: 24px;
  }

  html body.nocturne :is(.section-head, .listening-intro) {
    gap: 14px;
    margin-bottom: 16px;
  }

  html body.nocturne :is(.section-head, .listening-intro) > p,
  html body.nocturne .process > div,
  html body.nocturne .closing-inner > div {
    padding: 14px;
  }

  html body.nocturne :is(.music-primary, .music-mini, .story-text, .legacy-card) {
    padding: 16px;
  }

  html body.nocturne .practice-row,
  html body.nocturne .artist-player {
    padding: 16px;
    gap: 12px;
  }

  html body.nocturne .practice-writer {
    gap: 12px;
  }

  html body.nocturne .curated-playlists {
    margin-top: 20px;
    padding-top: 16px;
  }

  html body.nocturne .playlist-collections {
    gap: 8px;
    margin-top: 14px;
  }

  html body.nocturne .playlist-collection {
    padding: 12px;
  }

  html body.nocturne .process {
    margin-top: 24px;
    gap: 18px;
  }

  html body.nocturne .social-links > a {
    padding: 14px 16px;
  }

  html body.nocturne .closing {
    padding-block: 24px;
  }

  html body.nocturne .closing-inner {
    gap: 16px;
  }

  html body.nocturne .footer-inner {
    padding-block: 18px;
    gap: 14px;
  }
}

/* Portable player proportions: retain native playback and source attribution. */
html body.nocturne .artist-player {
  width: 100%;
  max-width: 1080px;
  padding: 16px 18px;
  gap: 18px;
}

html body.nocturne .artist-player h3 {
  font-size: 1.625rem;
  line-height: 1.2;
  margin-block: 4px 8px;
}

html body.nocturne .artist-player .player-main > .eyebrow {
  margin-block: 0;
  line-height: 1.4;
}

html body.nocturne .artist-player .on-air {
  margin-block: 0 6px;
}

html body.nocturne .artist-player .player-intro {
  font-size: .875rem;
  line-height: 1.6;
  margin-block: 0;
}

html body.nocturne .artist-player .cassette {
  max-width: 360px;
  margin-block: 10px 12px;
  padding: 9px 12px 8px;
  border-radius: 9px;
}

html body.nocturne .artist-player .cassette-label {
  padding-bottom: 6px;
}

html body.nocturne .artist-player .cassette-window {
  margin: 8px 4px 2px;
  padding: 5px 14px;
}

html body.nocturne .artist-player .tape-reel {
  width: 34px;
  height: 34px;
  border-width: 6px;
}

html body.nocturne .artist-player .tape-reel::after {
  inset: 6px;
}

html body.nocturne .artist-player .tape-bridge {
  height: 13px;
}

html body.nocturne .artist-player .cassette-foot {
  padding-top: 6px;
}

html body.nocturne .artist-player .player-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
}

html body.nocturne .artist-player .player-current {
  margin: 0;
  min-width: 0;
  font-size: .8125rem;
  line-height: 1.45;
}

html body.nocturne .artist-player .player-time {
  flex: none;
}

html body.nocturne .artist-player .player-controls {
  margin-top: 10px;
}

html body.nocturne .artist-player .player-status {
  margin-block: 8px;
  line-height: 1.5;
}

html body.nocturne .artist-player .player-playlist {
  gap: 6px;
}

html body.nocturne .artist-player .player-playlist button {
  min-height: 54px;
  padding: 6px 10px;
  gap: 9px;
}

html body.nocturne .artist-player .player-playlist strong {
  font-size: .9375rem;
  line-height: 1.3;
}

html body.nocturne .artist-player .player-playlist small {
  font-size: .75rem;
  line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 650px) {
  html body.nocturne .artist-player {
    padding: 14px;
    gap: 16px;
  }

  html body.nocturne .artist-player h3 {
    font-size: 1.5rem;
  }

  html body.nocturne .artist-player .cassette {
    padding-inline: 10px;
  }

  html body.nocturne .artist-player .cassette-label,
  html body.nocturne .artist-player .cassette-foot {
    gap: 8px;
    letter-spacing: .06em;
  }
}

/* Keep the story portrait and decorative seal at an editorial scale. */
html body.nocturne .story-portrait{max-width:360px;margin-inline:auto}
html body.nocturne .story-portrait figcaption{margin-top:14px;font-size:1.05rem}
html body.nocturne .story-text .geometry{width:66px;height:66px;margin:12px 0 0;transform:scale(.6);transform-origin:top left}
@media(min-width:851px){html body.nocturne .shell.story{max-width:1080px;column-gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

html body.nocturne footer .artist-credit{margin:0;padding:12px 0 24px;border-top:1px solid #302833;color:var(--bone-dim);font:400 .75rem/1.7 var(--body);letter-spacing:.01em}
html body.nocturne footer .artist-credit span{display:inline-block}
@media(forced-colors:active){html body.nocturne footer .artist-credit{color:CanvasText;border-color:CanvasText}}

html body.nocturne .curated-section{padding-top:0}html body.nocturne .curated-section .curated-playlists{margin-top:0}

/* Use the window width for panels; keep individual media and reading sizes quiet. */
html body.nocturne .shell{width:calc(100% - clamp(28px,4vw,80px));max-width:none}
html body.nocturne .artist-player,html body.nocturne .channel-room{width:100%;max-width:none}
@media(min-width:851px){html body.nocturne .shell.story{max-width:none;grid-template-columns:minmax(220px,360px) minmax(0,1fr)}html body.nocturne .story-text p{max-width:70ch}}
@media(min-width:651px){.channel-room--dj .shelf-card{flex:1 0 260px}}
/* The overscan supports slow drift without revealing an empty image edge. */
html body.nocturne .site-backdrop{position:fixed;inset:0;width:100%;height:100%;max-width:none}
html body.nocturne .site-backdrop .background-photo{width:100%;height:100%;max-width:none;object-fit:cover}

.hero-depth{position:relative;z-index:2;will-change:transform}@media(prefers-reduced-motion:reduce){.hero-depth{will-change:auto;transform:none!important}}

/* A complete track library remains compact and keyboard-scrollable. */
html body.nocturne .player-playlist{max-height:400px;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#8e719c #110d17;padding-right:6px}
@media(max-width:650px){html body.nocturne .player-playlist{max-height:300px}}