/* The Sneaker Soundtrack (/stories/sneaker-soundtrack). Loaded after story.css.
   Dark "listening room" bands (hero, player, finale) around light track sections.
   Player rules (YouTube RMF): one player, at least 200x200, nothing on top of it. */
.st { --room: #0e2627; --room2: #16383a; --on: #ffffff; --on2: #c3d0d0; --gold: #f4c430; }
.st h2 { font-family: var(--serif); font-weight: 500; }

/* ---------- hero ---------- */
.st-room { background: var(--room); color: var(--on); }
.st-hero { max-width: 1200px; margin: 0 auto; padding: 40px 24px 34px; }
.st-crumbs { font-size: 14px; color: var(--on2); margin-bottom: 18px; }
.st-crumbs a { color: var(--on2); text-decoration: none; }
.st-crumbs a:hover { color: var(--tiff); }
.st .st-kicker { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tiff); margin: 0; }
.st-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1; letter-spacing: -.025em;
  margin: .25em 0 .3em; color: var(--on); max-width: 14ch; }
.st-dek { font-size: 1.2rem; line-height: 1.55; color: var(--on2); max-width: 60ch; margin: 0 0 1.4rem; }
.st-startrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 1.2rem; }
.st-start { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--tiff); color: var(--tiff-ink); font-family: inherit; font-weight: 700; font-size: 1.08rem; line-height: 1.1; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(129,216,208,.5); transition: background .15s, transform .15s; }
.st-start:hover { background: #a5e6df; transform: translateY(-1px); }
.st-start:focus-visible, .st-play:focus-visible, .st-btn:focus-visible, .st-mstart:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.st-start svg { flex: 0 0 auto; }
.st-start-note { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--on2); max-width: 56ch; }
.st-byline { font-size: 14px; color: var(--on2); margin: 0 0 1.6rem; }
.st-byline a { color: var(--on); font-weight: 600; text-decoration: none; }

/* era timeline: the 12 songs on one line, 1986 -> 2025 */
.st-era { border-top: 1px solid #2c4c4d; padding-top: 14px; }
.st-era ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; position: relative; }
.st-era ol::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: #2c4c4d; }
.st-era a { display: block; text-decoration: none; padding: 0 6px 4px 0; min-height: 44px; color: var(--on2); }
.st-era .y { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--gold); line-height: 1.2; }
.st-era .y::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--tiff); margin: 4px 0 8px; position: relative; z-index: 1; }
.st-era .t { display: block; font-size: 13px; font-weight: 700; color: var(--on); line-height: 1.25; }
.st-era .a { display: block; font-size: 13px; line-height: 1.3; }
.st-era a:hover .t { color: var(--tiff); }

.st-lede { margin-top: 26px; }
.st-lede .lede-num .n.warm { color: #9a4423; }

/* ---------- main: tracks + player column ---------- */
.st-main { max-width: 1240px; margin: 0 auto; padding: 8px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
.st-tracks { position: relative; min-width: 0; }
.st-tracks::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.st-track { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 40px 0 34px; scroll-margin-top: calc(var(--hdr, 64px) + 12px); }
.st-node { position: relative; }
.st-node span { position: sticky; top: calc(var(--hdr, 64px) + 18px); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line); font-family: var(--serif); font-size: 15px; color: var(--ink2); }
.st-track.is-active .st-node span { border-color: var(--teal); color: var(--teal); }
.st-track.is-playing .st-node span { background: var(--tiff); border-color: var(--tiff); color: var(--tiff-ink); }
.st-tk { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.st-track h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.08; margin: .2em 0 .1em; color: var(--ink); letter-spacing: -.015em; }
.st-by { margin: 0 0 14px; font-size: 1.05rem; color: var(--ink2); }
.st-tbody > p { color: var(--ink2); line-height: 1.7; font-size: 1.04rem; margin: 0 0 .9rem; max-width: 64ch; }
.st-tbody > p strong { color: var(--ink); }
.st-playrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; }
.st-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--teal);
  background: #fff; color: var(--teal); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.st-play:hover { background: var(--wash); }
.st-play[aria-pressed="true"] { background: var(--teal); color: #fff; }
.st-play .ic-pause, .st-play[aria-pressed="true"] .ic-play { display: none; }
.st-play[aria-pressed="true"] .ic-pause { display: inline; }
.st-play.is-blocked { background: var(--gold); border-color: var(--gold); color: #1c2426; }
.st-ext { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.st-err { background: #fff4e5; border-left: 3px solid #b4532a; padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 15px !important; }
.st-quote { margin: 0 0 1rem; padding: 4px 0 4px 18px; border-left: 3px solid var(--tiff); }
.st-quote p { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.3; color: var(--ink); }
.st-quote cite { display: block; font-style: normal; font-size: 14px; color: var(--ink3); margin-top: 4px; }
.st-caveat { background: var(--wash); border-left: 3px solid var(--teal); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 15px !important; }

/* shoe card */
.st-shoe { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; margin: 1.2rem 0 .8rem; background: #fff; }
.st-shoe-pic { margin: 0; text-align: center; }
.st-shoe-pic img { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.st-shoe-pic figcaption { font-size: 13px; color: var(--ink3); margin-top: 2px; }
.st-brandpic { display: flex; align-items: center; justify-content: center; aspect-ratio: 7 / 5; border-radius: 10px; background: var(--room); }
.st-brandpic span { font-family: var(--serif); font-size: 2rem; line-height: 1.05; color: var(--tiff); text-align: center; }
.st-shoe-k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.st-shoe-n { margin: 2px 0 10px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--ink); }
.st-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 10px; }
.st-nums .n { display: block; font-family: var(--serif); font-size: 1.65rem; line-height: 1.05; color: var(--teal); }
.st-nums .n.dn { color: #9a4423; }
.st-nums .l { display: block; font-size: 13px; line-height: 1.35; color: var(--ink2); margin-top: 2px; }
.st-none { font-family: var(--serif); font-size: 1.5rem; color: #9a4423; margin: 0 0 6px; }
.st-fine { font-size: 14px; line-height: 1.55; color: var(--ink3); margin: 8px 0 0; }
.st-fine a { font-weight: 600; }
.st-spark { margin: 4px 0 0; }
.st-spark svg { display: block; width: 100%; max-width: 260px; height: auto; }
.st-sp-t { font-size: 13px; fill: #5f6b71; font-family: inherit; }
.st-spark figcaption { font-size: 13px; color: var(--ink3); }
.st-src { margin: 8px 0 0; }
.st-src summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--teal); }
.st-src ul { margin: 0 0 8px; padding-left: 18px; }
.st-src li { font-size: 14px; line-height: 1.4; margin: 0; color: var(--ink2); }
.st-src li a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- player column / dock ---------- */
.st-side { position: sticky; top: calc(var(--hdr, 64px) + 16px); align-self: start; z-index: 5; }
.st-dock { background: var(--room); color: var(--on); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - var(--hdr, 64px) - 32px); max-height: calc(100svh - var(--hdr, 64px) - 32px); }
.st-dock-k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tiff); margin: 0; }
.st-pre { padding: 8px 6px 4px; }
.st-pre-t { margin: 6px 0 12px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--on); }
.st-start-side { width: 100%; justify-content: center; }
.st-pwrap { width: 356px; height: 200px; background: #000; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.st-pwrap iframe, .st-pwrap > div { width: 100%; height: 100%; display: block; border: 0; }
.st-info { min-width: 0; }
.st-now { margin: 8px 0 6px; }
.st-now-t { display: block; font-family: var(--serif); font-size: 1.1rem; line-height: 1.25; color: var(--on); }
.st-msg { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--gold); }
.st-msg a { color: var(--tiff); }
.st-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-btn { min-height: 44px; min-width: 64px; padding: 8px 14px; border-radius: 10px; border: 1px solid #3b6264; background: var(--room2); color: var(--on);
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.st-btn:hover { border-color: var(--tiff); }
.st-btn[aria-pressed="true"] { background: var(--tiff); color: var(--tiff-ink); border-color: var(--tiff); }
.st-tap { background: var(--gold); color: #1c2426; border-color: var(--gold); }
.st-follow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--on2); cursor: pointer; }
.st-follow input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--tiff); }
.st-follow .sm { display: none; }
.st-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; border-top: 1px solid #2c4c4d; }
.st-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 44px; padding: 4px 6px;
  text-decoration: none; color: var(--on2); border-radius: 8px; }
.st-list a:hover { background: var(--room2); }
.st-list .n { grid-row: 1 / 3; font-family: var(--serif); color: var(--gold); text-align: right; }
.st-list .t { font-size: 14px; font-weight: 700; color: var(--on); line-height: 1.2; }
.st-list .a { font-size: 13px; line-height: 1.2; }
.st-list a.is-active { background: var(--room2); }
.st-list a.is-active .t { color: var(--tiff); }
.st-mstart { display: none; }

/* ---------- finale ---------- */
.st-finale { background: var(--room); color: var(--on); margin-top: 10px; }
.st-finale-in { max-width: 920px; margin: 0 auto; padding: 48px 24px 40px; }
.st-finale h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; margin: .3em 0 .3em; color: var(--on); }
.st-finale h2 + .st-fdek { margin-top: 0; }
.st-fdek { color: var(--on2); line-height: 1.6; max-width: 66ch; }
.st-finale a { color: var(--tiff); }
.st-rank { list-style: none; margin: 14px 0 34px; padding: 0; }
.st-rank li { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 76px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #23403f; min-height: 44px; }
.st-rl { font-size: 15px; font-weight: 700; color: var(--on); line-height: 1.25; }
.st-rl a { color: var(--on); text-decoration: none; }
.st-rl a:hover { color: var(--tiff); }
.st-rn { display: inline-block; width: 1.6em; font-family: var(--serif); color: var(--gold); font-weight: 500; }
.st-rs { display: block; font-size: 13px; font-weight: 400; color: var(--on2); padding-left: 1.6em; }
.st-rb { position: relative; height: 18px; }
.st-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.st-bar.p { background: var(--tiff); }
.st-bar.n { background: var(--gold); }
.st-rt { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: #fff; border-radius: 2px; }
.st-rv { font-family: var(--serif); font-size: 1.1rem; text-align: right; color: var(--on); }
.st-fnote { font-size: 14px; color: var(--on2); line-height: 1.55; }

/* song-effect chart */
.st-effect-wrap { margin-top: 1.5rem; }
.st-chart { margin: 1rem 0; }
.st-effect { display: block; width: 100%; height: auto; }
.st-effect .g { stroke: #dfe7e7; }
.st-effect text { font-family: inherit; font-size: 10px; }
.st-effect .t { fill: #5f6b71; }
.st-effect .v { stroke: #9a4423; stroke-width: 1.5; stroke-dasharray: 4 3; }
.st-effect .vt { fill: #9a4423; font-weight: 700; }
.st-effect .la { fill: none; stroke: #077a76; stroke-width: 3; stroke-linejoin: round; }
.st-effect .lb { fill: none; stroke: #5f6b71; stroke-width: 2.5; stroke-linejoin: round; }
.st-effect .lab { font-weight: 700; }
.st-effect .la-t { fill: #077a76; }
.st-effect .lb-t { fill: #4a565b; }
.st-chart figcaption { font-size: 13px; color: var(--ink3); line-height: 1.45; }

/* ---------- phones and tablets: the player docks at the bottom ---------- */
@media (max-width: 999px) {
  .st-main { grid-template-columns: minmax(0, 1fr); padding: 0 16px 24px; gap: 0; }
  .st-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; display: none; }
  body.st-on .st-side { display: block; transition: transform .25s ease; }
  body.st-on.st-away .st-side { transform: translateY(110%); }   /* paused after leaving the songs: slide away (the iframe stays loaded) */
  body.st-on.st-away { padding-bottom: 0; }
  body.st-on { padding-bottom: 224px; }
  .st-dock { border-radius: 14px 14px 0 0; padding: 8px; max-height: none; box-shadow: 0 -8px 26px rgba(14,38,39,.3);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .st-pre, .st-list { display: none; }
  .st-live:not([hidden]) { display: flex; gap: 10px; align-items: stretch; }
  .st-pwrap { width: 200px; height: 200px; }
  .st-info { flex: 1 1 auto; display: flex; flex-direction: column; }
  /* the info column must fit beside the 200 px player: title, a 2-line message, two rows of controls */
  .st-now { margin: 0 0 2px; }
  .st-now .st-dock-k { position: absolute; left: -9999px; }
  .st-now-t { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .st-msg { font-size: 13px; line-height: 1.3; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .st-msg[hidden] { display: none; }
  .st-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
  .st-btn { min-width: 0; padding: 6px 4px; font-size: 14px; }
  .st-follow { font-size: 13px; line-height: 1.15; gap: 5px; min-height: 44px; }
  .st-follow .lg { display: none; }
  .st-follow .sm { display: inline; }
  .st-mstart:not([hidden]) { display: inline-flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 55;
    align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 0; background: var(--room); color: var(--on);
    font-family: inherit; font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(14,38,39,.35); cursor: pointer; white-space: nowrap; }
  .st-mstart svg { color: var(--tiff); }
}
@media (max-width: 999px) and (min-width: 600px) {
  /* tablets: a little more room for the controls */
  .st-ctrls { grid-template-columns: repeat(3, 1fr); }
  .st-follow { grid-column: 1 / 3; }
  .st-follow .lg { display: inline; }
  .st-follow .sm { display: none; }
}
@media (max-width: 899px) {
  .st-hero { padding: 22px 16px 26px; }
  .st-dek { font-size: 1.05rem; }
  .st-era ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .st-era .a { display: none; }
  .st-era ol::before { display: none; }
  .st-era .y::after { display: none; }
  .st-era .y { font-size: 1rem; }
  .st-lede { margin-top: 10px; }
  .st-tracks::before { left: 19px; }
  .st-track { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 30px 0 24px; }
  .st-node span { width: 40px; height: 40px; font-size: 13px; }
  .st-shoe { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .st-shoe-pic img { max-width: 240px; }
  .st-brandpic { max-width: 240px; margin: 0 auto; width: 100%; }
  .st-quote p { font-size: 1.25rem; }
  .st-finale-in { padding: 36px 16px 30px; }
  .st-rank li { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 4px; }
  .st-rl { grid-column: 1 / -1; }
  .st-rv { font-size: 1rem; }
  .st-effect text { font-size: 19px; }
}
@media (max-width: 340px) {
  .st-era ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .st-start, .st-play, .st-btn, body.st-on .st-side { transition: none; }
  .st-start:hover { transform: none; }
}