:root {
  --ink: #111111;
  /* deep warm umber / antique dark ink */
  --ink-2: #222222;
  /* panel dark */
  --ink-3: #333333;
  /* raised accent */
  --dusk: rgba(var(--dusk-rgb), .35);
  --dusk-soft: rgba(var(--dusk-rgb), .18);
  --gold: #111111;
  /* rich burnished woodcut gold/ochre */
  --gold-bright: #333333;
  /* highlighted gold */
  --ember: #444444;
  /* terracotta/warm rust accent */
  --sage: #666666;
  /* antique olive/sepia */
  --parch: #111111;
  /* primary text color on light parchment */
  --parch-dim: rgba(17, 17, 17, .7);
  --parch-faint: rgba(17, 17, 17, .45);
  --topbar-h: 60px;

  /* ---- Theme tokens. Defaults = plain black & white (every non-album page). An album's `theme` in album.json
     overrides these through <style id="album-theme"> (see album_theme_css()). ---- */
  --gold-rgb: 17, 17, 17;
  --accent-rgb: 17, 17, 17;
  --accent-bright-rgb: 60, 60, 60;
  --accent-light-rgb: 170, 170, 170;
  --ember-rgb: 68, 68, 68;
  --dusk-rgb: 128, 128, 128;
  --wash-1-rgb: 255, 255, 255;
  --wash-2-rgb: 255, 255, 255;
  --btn-1: #444444; --btn-2: #222222; --btn-3: #000000;
  --btn-h1: #666666; --btn-h2: #333333; --btn-h3: #111111;
  --rail-1: #F2F2F2; --rail-2: #BBBBBB; --rail-4: #222222;
  --glow-core: #FFFFFF; --glow-halo: #DDDDDD;
  --paper: #FFFFFF; --paper-1: #FFFFFF; --paper-2: #FFFFFF;
  --bar-bottom: #eeeeee;
  --glow-a: 0;
}

* {
  box-sizing: border-box
}

[x-cloak] {
  display: none !important
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--parch);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(130% 90% at 50% -10%, rgba(var(--wash-1-rgb), .28), transparent 70%),
    radial-gradient(100% 70% at 85% 105%, rgba(var(--accent-rgb), var(--glow-a)), transparent 60%),
    radial-gradient(80% 60% at 10% 90%, rgba(var(--wash-2-rgb), .16), transparent 55%),
    linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 100%);
  background-attachment: fixed;
}

::selection {
  background: rgba(var(--accent-bright-rgb), .25);
  color: #1A130A
}

/* ---------- type roles ---------- */
.display,
.display-text {
  font-family: "Cinzel", serif;
  letter-spacing: .06em
}

.util {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em
}

.prose-body {
  font-size: 1.09rem;
  line-height: 1.72;
  color: #352719
}

.prose-body p {
  margin: 0 0 1.05em
}

.prose-body p:last-child {
  margin-bottom: 0
}

.prose-body em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500
}

.prose-body p.aside {
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
  font-size: 1rem;
  color: var(--parch-faint);
  background: rgba(var(--accent-rgb), .04);
  padding-top: .3rem;
  padding-bottom: .3rem
}

/* section label used across panels */
.panel-label {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .66rem;
  font-weight: 600;
  color: var(--sage);
  display: flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap
}

.panel-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dusk);
  order: 1
}

.panel-label .trail {
  order: 2
}

/* ---------- shell ---------- */
.shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0
}

/* ---------- topbar ---------- */
.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--dusk);
  /* white at the top fading to a very light tint: #eee on plain pages, the album's pale colour on albums */
  background: linear-gradient(180deg, #fff, var(--bar-bottom));
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 8px rgba(120, 90, 40, .05)
}

.brand {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: .94rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap
}

.brand span {
  color: var(--ink)
}

/* subtitle under the wordmark (top bar only; the footer / docs wordmarks stay plain inline text) */
.topbar .brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15
}

.topbar .brand .brand-sub span {
  color: inherit
}

/* letters spread edge to edge so the subtitle is exactly as wide as SONGS4CHRIST */
.topbar .brand .brand-sub {
  display: flex;
  justify-content: space-between;
  margin-top: .28rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--parch-faint)
}

.brand-short {
  display: none
}

.brand-full {
  display: inline
}

.navlink {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .75rem;
  font-weight: 500;
  color: var(--parch-dim);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .45rem .1rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .16s ease
}

.navlink:hover,
.navlink[aria-expanded=true] {
  color: var(--gold)
}

.navlink:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

.caret {
  transition: transform .18s ease
}

.navlink[aria-expanded=true] .caret {
  transform: rotate(180deg)
}

.submenu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 260px;
  padding: .4rem;
  background: var(--paper-1);
  border: 1px solid var(--dusk);
  border-radius: 4px;
  box-shadow: 0 20px 45px -15px rgba(80, 55, 20, .22), 0 2px 6px rgba(80, 55, 20, .06);
  z-index: 50
}

.submenu a,
.submenu button.item,
.submenu span.dead {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 3px
}

.submenu button.item {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer
}

.submenu button.item[x-show] {
  display: flex
}

.submenu a:hover,
.submenu button.item:hover {
  background: rgba(var(--accent-rgb), .12)
}

.submenu span.dead {
  color: var(--parch-faint);
  cursor: default
}

.submenu .mono {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: "Cinzel", serif;
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), .35);
  background: rgba(var(--accent-rgb), .08)
}

.submenu img {
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: cover;
  border-radius: 2px
}

/* ---------- stage ---------- */
.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1.8fr) minmax(380px, 33.333%);
  grid-template-areas: "sleeve gate ctx"
}

.sleeve {
  grid-area: sleeve
}

.gatefold {
  grid-area: gate
}

.context {
  grid-area: ctx
}

.sleeve {
  border-right: 1px solid var(--dusk);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 252, 246, .5)
}

.gatefold {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, .8)
}

.context {
  border-left: 1px solid var(--dusk);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 252, 246, .5)
}

/* ---------- scrollers ---------- */
.scroller {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%)
}

.scroller::-webkit-scrollbar {
  width: 7px
}

.scroller::-webkit-scrollbar-thumb {
  background: rgba(var(--dusk-rgb), .45);
  border-radius: 8px
}

.scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--dusk-rgb), .75)
}

.scroller::-webkit-scrollbar-track {
  background: transparent
}

.scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--dusk-rgb), .45) transparent
}

.ctx-half {
  flex: 1 1 50%;
  height: 50%;
  min-height: 0;
  display: flex;
  flex-direction: column
}

/* ---------- cover ---------- */
.cover-wrap {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 14px 34px -10px rgba(90, 65, 25, .22), 0 0 0 1px rgba(var(--dusk-rgb), .35)
}

.cover-wrap img {
  display: block;
  width: 100%;
  height: auto
}

.cover-glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: radial-gradient(circle at 50% 46%, rgba(var(--accent-bright-rgb), .35), transparent 58%);
  mix-blend-mode: multiply
}

.cover-wrap.playing .cover-glow {
  opacity: 1;
  animation: breathe 7s ease-in-out infinite
}

@keyframes breathe {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: .85
  }
}

/* ---------- tracklist ---------- */
.track {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .8rem;
  padding: .75rem .95rem .75rem .7rem;
  border-left: 3px solid transparent;
  background: transparent;
  border-top: 1px solid var(--dusk-soft);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease
}

.track:first-child {
  border-top: none
}

.track:hover {
  background: rgba(var(--accent-rgb), .08)
}

.track:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px
}

.track .numeral {
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--parch-faint);
  padding-top: .28rem;
  transition: color .18s ease
}

.track .t-title {
  font-size: 1.2rem;
  line-height: 1.24;
  color: var(--ink);
  font-weight: 500
}

.track .t-ref {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .68rem;
  color: var(--parch-faint);
  margin-top: .2rem
}

.track.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .14), transparent 85%);
  border-left-color: var(--gold)
}

.track.active .numeral {
  color: var(--gold);
  font-weight: 700
}

.track.active .t-title {
  color: #1A1208;
  font-weight: 600
}

.track.active .t-ref {
  color: var(--gold)
}

.bars {
  display: inline-flex;
  gap: 2px;
  align-items: flex-end;
  height: 11px;
  margin-left: .4rem
}

.bars i {
  width: 2px;
  background: var(--gold);
  display: block;
  animation: eq .9s ease-in-out infinite
}

.bars i:nth-child(1) {
  height: 5px;
  animation-delay: -.2s
}

.bars i:nth-child(2) {
  height: 11px;
  animation-delay: -.55s
}

.bars i:nth-child(3) {
  height: 7px;
  animation-delay: -.35s
}

@keyframes eq {

  0%,
  100% {
    transform: scaleY(.35)
  }

  50% {
    transform: scaleY(1)
  }
}

/* ---------- tabs ---------- */
.tab {
  position: relative;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  font-weight: 500;
  padding: .5rem .35rem;
  color: var(--parch-faint);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s ease
}

.tab:hover {
  color: var(--parch-dim)
}

.tab.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 14px 16px -9px rgba(var(--gold-rgb), .35);
}

.tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

/* ---------- lyrics ---------- */
.lyric-line {
  font-size: 1.22rem;
  line-height: 1.64;
  color: #2C2014;
  margin: 0
}

.lyric-gap {
  height: 1.05rem
}

.lyric-mark {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--sage);
  margin: 1.5rem 0 .5rem;
  display: block
}

/* ---------- scripture ---------- */
.verse {
  position: relative;
  padding-left: 2.15rem;
  margin: 0 0 .85rem;
  font-size: 1.14rem;
  line-height: 1.72;
  color: #352719
}

.vnum {
  position: absolute;
  left: 0;
  top: .33rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold)
}

.verse:last-child {
  margin-bottom: 0
}

.attrib {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .62rem;
  line-height: 1.7;
  color: var(--parch-faint)
}

/* ---------- transport ---------- */
.transport-off {
  display: none !important
}

.transport {
  flex: none;
  padding: .9rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--dusk);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  box-shadow: 0 -2px 12px rgba(120, 90, 40, .06)
}

/* the dawn line — signature element */
.rail {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none
}

.rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: rgba(var(--dusk-rgb), .24);
  border-radius: 3px
}

.rail-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rail-1) 0%, var(--rail-2) 25%, var(--gold-bright) 60%, var(--rail-4) 100%);
  box-shadow: 0 0 10px rgba(var(--accent-bright-rgb), .4)
}

.playhead {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22), 0 0 12px rgba(var(--gold-rgb), .45);
  transition: width .18s ease, height .18s ease
}

.rail:hover .playhead,
.rail:focus-visible .playhead {
  width: 14px;
  height: 14px
}

.rail:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px
}

@keyframes playhead-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22), 0 0 10px rgba(var(--accent-light-rgb), .6), 0 0 18px rgba(var(--ember-rgb), .35);
    background: var(--gold);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(var(--accent-light-rgb), .35), 0 0 16px rgba(var(--accent-light-rgb), .9), 0 0 28px rgba(var(--ember-rgb), .6);
    background: var(--gold-bright);
  }
}

@keyframes playhead-halo {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.9;
  }
}

.playhead.is-playing {
  animation: playhead-pulse 2s infinite ease-in-out;
}

.playhead.is-playing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-light-rgb), 0.45) 0%, rgba(var(--ember-rgb), 0.18) 50%, rgba(var(--ember-rgb), 0) 75%);
  animation: playhead-halo 2s infinite ease-in-out;
  pointer-events: none;
}

/* Floating Glowing Particles Container */
.playhead-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}

.p-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-core) 20%, var(--gold-bright) 65%, rgba(var(--ember-rgb), 0) 100%);
  box-shadow: 0 0 6px var(--glow-halo), 0 0 12px var(--gold-bright);
  opacity: 0;
  pointer-events: none;
}

@keyframes float-p1 {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }

  25% {
    opacity: 0.95;
  }

  65% {
    opacity: 0.8;
  }

  100% {
    transform: translate(calc(-50% - 9px), -26px) scale(1.1);
    opacity: 0;
  }
}

@keyframes float-p2 {
  0% {
    transform: translate(-50%, 0) scale(0.4);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.75;
  }

  100% {
    transform: translate(calc(-50% + 11px), -32px) scale(1.2);
    opacity: 0;
  }
}

@keyframes float-p3 {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  65% {
    opacity: 0.65;
  }

  100% {
    transform: translate(calc(-50% - 4px), -20px) scale(0.9);
    opacity: 0;
  }
}

@keyframes float-p4 {
  0% {
    transform: translate(-50%, 0) scale(0.3);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  75% {
    opacity: 0.8;
  }

  100% {
    transform: translate(calc(-50% + 7px), -36px) scale(1.3);
    opacity: 0;
  }
}

@keyframes float-p5 {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }

  25% {
    opacity: 0.85;
  }

  60% {
    opacity: 0.5;
  }

  100% {
    transform: translate(calc(-50% - 12px), -24px) scale(0.8);
    opacity: 0;
  }
}

@keyframes float-p6 {
  0% {
    transform: translate(-50%, 0) scale(0.4);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0.6;
  }

  100% {
    transform: translate(calc(-50% + 3px), -29px) scale(1);
    opacity: 0;
  }
}

.is-playing .p-particle.p1 {
  width: 4px;
  height: 4px;
  animation: float-p1 2.2s infinite ease-out;
  animation-delay: 0s;
}

.is-playing .p-particle.p2 {
  width: 5px;
  height: 5px;
  animation: float-p2 2.6s infinite ease-out;
  animation-delay: 0.45s;
}

.is-playing .p-particle.p3 {
  width: 3px;
  height: 3px;
  animation: float-p3 1.9s infinite ease-out;
  animation-delay: 0.9s;
}

.is-playing .p-particle.p4 {
  width: 4.5px;
  height: 4.5px;
  animation: float-p4 2.8s infinite ease-out;
  animation-delay: 1.35s;
}

.is-playing .p-particle.p5 {
  width: 3.5px;
  height: 3.5px;
  animation: float-p5 2.1s infinite ease-out;
  animation-delay: 1.8s;
}

.is-playing .p-particle.p6 {
  width: 4px;
  height: 4px;
  animation: float-p6 2.4s infinite ease-out;
  animation-delay: 0.2s;
}

@keyframes gold-btn-glow {

  0%,
  100% {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 0 10px rgba(var(--accent-bright-rgb), 0.5), 0 3px 10px rgba(135, 87, 14, 0.3);
  }

  50% {
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 22px rgba(var(--accent-light-rgb), 0.9), 0 5px 16px rgba(135, 87, 14, 0.45);
  }
}

.btn-gold,
button.btn-gold,
a.btn-gold {
  background: linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 45%, var(--btn-3) 100%);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(135, 87, 14, 0.22);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-gold:hover,
button.btn-gold:hover,
a.btn-gold:hover {
  background: linear-gradient(135deg, var(--btn-h1) 0%, var(--btn-h2) 45%, var(--btn-h3) 100%);
  animation: gold-btn-glow 1.8s infinite ease-in-out;
  transform: translateY(-1px);
}

.btn-gold:active,
button.btn-gold:active,
a.btn-gold:active {
  transform: scale(0.95) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  animation: none;
}

.btn-outline-gold,
button.btn-outline-gold,
a.btn-outline-gold {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 241, 228, 0.88) 100%);
  color: var(--gold) !important;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(135, 87, 14, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-outline-gold:hover,
button.btn-outline-gold:hover,
a.btn-outline-gold:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(245, 235, 218, 0.95) 100%);
  border-color: var(--gold-lit);
  color: var(--ink) !important;
  box-shadow: 0 0 14px rgba(var(--accent-bright-rgb), 0.4), 0 2px 6px rgba(135, 87, 14, 0.15);
  transform: translateY(-1px);
}

.btn-outline-gold:active,
button.btn-outline-gold:active,
a.btn-outline-gold:active {
  transform: scale(0.95) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.ctl {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--parch-dim);
  cursor: pointer;
  transition: all .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.ctl:hover {
  color: var(--ink);
  background: rgba(var(--accent-rgb), .14);
  box-shadow: 0 0 10px rgba(var(--accent-bright-rgb), .35);
  transform: translateY(-1px)
}

.ctl:active {
  transform: scale(0.95) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2) !important
}

.ctl:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px
}

.ctl-main {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 45%, var(--btn-3) 100%);
  color: #FCF8F2;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 18px rgba(var(--gold-rgb), .4);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.ctl-main:hover {
  background: linear-gradient(135deg, var(--btn-h1) 0%, var(--btn-h2) 45%, var(--btn-h3) 100%);
  color: #FFF;
  animation: gold-btn-glow 1.8s infinite ease-in-out;
  transform: translateY(-1px)
}

.ctl-main:active {
  transform: scale(0.95) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  animation: none
}

.ctl-sub {
  width: 31px;
  height: 31px;
  opacity: 0.65;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--parch-dim);
  cursor: pointer;
  transition: all .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.ctl-sub:hover {
  opacity: 1;
  color: var(--ink);
  background: rgba(var(--accent-rgb), .14);
  box-shadow: 0 0 8px rgba(var(--accent-bright-rgb), .3);
  transform: translateY(-1px)
}

.ctl-sub.is-active {
  opacity: 1;
  color: var(--gold);
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 0 12px rgba(var(--accent-bright-rgb), .45), inset 0 1px 2px rgba(255, 255, 255, 0.4)
}

.ctl-sub:active {
  transform: scale(0.92) !important
}

/* ---------- ambient gold cursor follower glow ---------- */
#s4c-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  margin-top: -170px;
  margin-left: -170px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(var(--accent-light-rgb), 0.14) 0%, rgba(var(--accent-bright-rgb), 0.05) 45%, rgba(var(--accent-bright-rgb), 0) 80%);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 16px;
  cursor: pointer
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(var(--dusk-rgb), .3);
  border-radius: 2px
}

input[type=range]::-moz-range-track {
  height: 2px;
  background: rgba(var(--dusk-rgb), .3);
  border-radius: 2px
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: -4px;
  box-shadow: 0 1px 4px rgba(80, 55, 20, .2)
}

input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 4px rgba(80, 55, 20, .2)
}

input[type=range]:hover::-webkit-slider-thumb {
  background: var(--gold-bright);
  transform: scale(1.15)
}

input[type=range]:hover::-moz-range-thumb {
  background: var(--gold-bright);
  transform: scale(1.15)
}

.hairline {
  border-color: var(--dusk)
}

a.link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), .35)
}

a.link:hover {
  border-bottom-color: var(--gold);
  color: var(--gold-bright)
}

/* ---------- responsive ---------- */
@media (max-width:1200px) {
  .stage {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: "sleeve gate" "sleeve ctx"
  }

  .context {
    border-left: none;
    border-top: 1px solid var(--dusk);
    max-height: 40vh
  }
}

@media (max-width:960px) {

  html,
  body {
    height: auto
  }

  .shell {
    min-height: 100%
  }

  .stage {
    display: block
  }

  .ctx-half {
    flex: none;
    height: auto
  }

  .sleeve,
  .context {
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--dusk);
    max-height: none
  }

  .context {
    border-top: none
  }

  .scroller {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    flex: none
  }

  .transport {
    position: sticky;
    bottom: 0;
    z-index: 30
  }

  .submenu {
    right: auto;
    left: 0
  }
}

@media (max-width:640px) {
  /* the subtitle overhangs the gap instead of widening the logo (keeps the nav on one line at 375px) */
  .topbar .brand {
    font-size: 1.3rem;
    letter-spacing: .3em
  }

  .topbar .brand .brand-sub {
    display: block;
    width: 0;
    overflow: visible;
    white-space: nowrap;
    font-size: calc(.52rem - 2px);
    letter-spacing: .2em
  }

  .transport {
    padding-inline: 1rem
  }

  .brand-full {
    display: none
  }

  .brand-short {
    display: inline
  }
}

/* Reduce Motion (iOS: Settings > Accessibility > Motion) stops decorative animation, but the small
   "now playing" indicators (equalizer bars, playhead pulse and particles) are state feedback and stay on. */
@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important
  }

  .bars i {
    animation: eq .9s ease-in-out infinite !important
  }

  .bars i:nth-child(1) { animation-delay: -.2s !important }
  .bars i:nth-child(2) { animation-delay: -.55s !important }
  .bars i:nth-child(3) { animation-delay: -.35s !important }

  .playhead.is-playing { animation: playhead-pulse 2s infinite ease-in-out !important }
  .playhead.is-playing::before { animation: playhead-halo 2s infinite ease-in-out !important }
  .is-playing .p-particle.p1 { animation: float-p1 2.2s infinite ease-out !important }
  .is-playing .p-particle.p2 { animation: float-p2 2.6s infinite ease-out !important }
  .is-playing .p-particle.p3 { animation: float-p3 1.9s infinite ease-out !important }
  .is-playing .p-particle.p4 { animation: float-p4 2.8s infinite ease-out !important }
  .is-playing .p-particle.p5 { animation: float-p5 2.1s infinite ease-out !important }
  .is-playing .p-particle.p6 { animation: float-p6 2.4s infinite ease-out !important }
}
/* ---------- header "more" icon + add-app / bookmark help ---------- */
.navicon {
  padding: .45rem .3rem
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(44, 32, 20, .5);
  backdrop-filter: blur(3px)
}

.help-panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--paper-1);
  border: 1px solid var(--dusk);
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(44, 32, 20, .5)
}

.help-x {
  position: absolute;
  top: .1rem;
  right: .1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  color: var(--parch-dim);
  background: none;
  border: none;
  cursor: pointer
}

.help-x:hover {
  color: var(--gold)
}

.help-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--dusk);
  margin-bottom: .9rem
}

.help-tabs button {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 600;
  padding: .55rem .8rem;
  color: var(--parch-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer
}

.help-tabs button.on {
  color: var(--gold);
  border-bottom-color: var(--gold)
}

.help-steps {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 1.3rem;
  list-style: decimal
}

ul.help-steps {
  list-style: none;
  padding-left: 0
}

.help-steps li {
  margin: .55rem 0;
  padding-left: .2rem
}

.help-steps li.help-tip {
  list-style: none;
  margin-left: -1.3rem;
  padding: .6rem .8rem;
  font-size: .98rem;
  color: var(--parch-dim);
  background: rgba(var(--accent-rgb), .08);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0
}

.help-steps li.help-on {
  padding: .5rem .8rem;
  background: rgba(var(--accent-rgb), .1);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0
}

.help-steps .inline-svg {
  display: inline;
  vertical-align: -2px
}

.help-steps a,
.help-link {
  color: var(--gold);
  text-decoration: underline;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer
}

.help-go {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 600;
  padding: .45rem 1rem;
  color: #FCF8F2;
  background: var(--gold);
  border: none;
  border-radius: 3px;
  cursor: pointer
}

.help-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dusk);
  font-family: "Barlow Condensed", sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parch-faint)
}

.help-links a {
  color: var(--gold);
  text-decoration: none
}

kbd {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .85rem;
  padding: .05rem .45rem;
  border: 1px solid var(--dusk);
  border-radius: 3px;
  background: #fff
}

.submenu.submenu-r {
  right: 0;
  left: auto
}

.help-panel:focus {
  outline: none
}

.help-stack {
  display: grid
}

.help-pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.help-pane.off {
  visibility: hidden;
  pointer-events: none
}

/* now-playing line in the footer player: links back to the album while you are on another page */
.np-row {
  position: relative;
  display: flex;
  justify-content: center
}

.np-link {
  display: block;
  max-width: 100%;
  text-decoration: none
}

.np-link:not([href]) {
  pointer-events: none;
  cursor: default
}

.np-link[href]:hover {
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .5);
  text-underline-offset: 3px
}

.np-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap
}

.np-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px
}

@media (max-width:640px) {
  .np-row {
    flex-direction: column;
    align-items: stretch
  }

  .np-back {
    position: static;
    transform: none;
    margin-bottom: .3rem
  }
}


/* ---------- work-in-progress badge + notice ---------- */
.wip-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: .25rem;
  background: #FCEFCB;
  color: #7a4e00;
  border: 1px solid rgba(180, 120, 20, .6);
  white-space: nowrap
}

.wip-note {
  padding: .6rem .8rem;
  border-left: 3px solid rgba(180, 120, 20, .6);
  color: var(--parch-dim)
}

.wip-note strong,
.wip-bar-text a,
.wip-note a {
  color: #8a5a00
}

.wip-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  border-bottom: 1px solid rgba(180, 120, 20, .3);
  font-size: .9rem;
  line-height: 1.35;
  color: var(--parch-dim)
}

.wip-bar-text a {
  white-space: nowrap;
  text-decoration: underline
}

@media (max-width:640px) {
  .wip-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
    padding: .55rem 1rem
  }
}

/* ---------- share row (footer player) ---------- */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 .6rem
}

.share-pill {
  padding: .4rem .95rem;
  border: 1px solid var(--dusk);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer
}

.share-pill:active {
  background: rgba(var(--accent-rgb), .14)
}

@media (hover: hover) {
  .share-pill:hover {
    border-color: var(--gold);
    background: rgba(var(--accent-rgb), .1)
  }
}

.share-t {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap
}

.share-x {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--parch-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer
}

/* Narrow screens: top-bar dropdowns (Listen, Read, ⋮) become a panel as wide as the screen, so they can never run off the right edge.
   The wrappers stop being the positioning parent, so the sticky .topbar is. !important beats the inline right/left/min-width on the menus. */
@media (max-width:560px) {
  .topbar .relative {
    position: static
  }

  .topbar .submenu,
  .topbar .submenu.submenu-r {
    left: .6rem !important;
    right: .6rem !important;
    width: auto;
    min-width: 0 !important;
    max-width: none;
    top: calc(100% + 6px)
  }
}

/* Very narrow screens (≤360px): tighter footer controls so the time, the transport and the share button fit on one row */
@media (max-width:360px) {
  .transport {
    padding-left: .8rem;
    padding-right: .8rem
  }

  .transport .ctl {
    width: 28px;
    height: 28px
  }

  .transport .ctl-main {
    width: 40px;
    height: 40px
  }

  .transport .gap-1\.5 {
    gap: 2px
  }

  .transport .tabular-nums {
    font-size: .64rem
  }
}

/* No double-tap-to-zoom on controls: quick repeat taps (skip, share, menus) shouldn't zoom the page on iOS */
button,
a,
[role="button"] {
  touch-action: manipulation
}