/* Space Wrangler relationship preview — deliberately scoped to one page only.
   No cards, bento, or shared song-page selector changes live here. */
/* THE LIGHT LIVES ON THE PAGE, NOT IN A BOX (Alex, 2026-08-06). overflow:hidden
   was here to stop the full-bleed 100vw row from growing a horizontal scrollbar,
   and it was also clipping the glow dead flat at the section's top and bottom
   edges — which is what made this read as "a section with a background" instead
   of light falling across the page.
   overflow-x:clip with overflow-y:visible keeps the horizontal job and drops the
   vertical clip. It has to be `clip`, not `hidden`: hidden on one axis forces the
   other to compute to auto, which would have brought the scrollbar straight back
   and scrolled the glow independently. */
/* THE PULL-UP WAS EATING THE BUTTON ABOVE IT. Alex, 2026-08-06: "The Explore All
   button is not working."

   It was not the button. margin-top:-84px lifts this section over the bottom of
   the one before it, and because the section is positioned and comes later in
   the document, its own box — transparent, empty, invisible — sat on top of the
   last 84px of the ledger and swallowed every click in that band. The Explore
   All control lives exactly there. Nothing looked wrong, because nothing WAS
   wrong to look at: a transparent box has no appearance and perfect hit-testing.

   Verified by hit-testing the button's centre on a built page: it returned
   SECTION.sws-preview, not the button.

   The section is a backdrop, so it stops taking pointer events at all and hands
   them back to its own content. That fixes the whole dead band rather than
   lifting one button out of it — the next control anybody puts near the foot of
   the ledger would have hit the same wall. */
body.stagelight .sws-preview {
  isolation:isolate; position:relative; pointer-events:none;
  overflow-x:clip; overflow-y:visible;
  width:100vw; margin:-84px calc(50% - 50vw) 0; padding:116px 0 96px;
  background:transparent;
  color:var(--sl-ink); scroll-margin-top:88px;
}
/* …and everything in it that a reader can actually use takes them back. */
body.stagelight .sws-preview-head,
body.stagelight .sws-preview-composition { pointer-events:auto; }
body.stagelight .sws-preview::after {
  content:none;
}
/* THE ORB IS THIS SONG'S COLOUR, AND IT HAS NO EDGES.

   COLOUR. Three of the four gradients were a fixed orange, blue and purple —
   the same three on all 698 pages, which is a decoration, not a property of the
   song. They now read --bt-chroma-a and --bt-chroma-b, the two hues the hero's
   own artwork publishes. That sampler already exists and already runs on this
   page (HERO_TINT_FN in build.mjs, fired on the [data-hero-tint] sleeve): it
   averages the art on an 8x8 canvas for --hero-glow, then buckets the same 64
   pixels by hue and keeps the two most-populated wedges that sit at least a
   third of the wheel apart. Reusing it is the whole point — a second sampler
   would eventually disagree with the first about what colour a record is.

   The old hardcoded values are kept as the var() fallbacks, so nothing changes
   for a page whose art is monochrome, cross-origin-tainted or missing: the
   sampler publishes nothing in those cases and the defaults stand, which is
   exactly the behaviour Alex asked for.

   EDGES. inset was 0 0 18% inside an overflow:hidden parent, so the glow
   stopped at the section boundary with a straight line across the page. It now
   overhangs top and bottom, and the mask fades at BOTH ends instead of only the
   bottom. Nothing about it announces where the section starts. */
body.stagelight .sws-preview-fallback {
  position:absolute; inset:-16% 0 -13%; z-index:-2; pointer-events:none; opacity:.5;
  background:
    radial-gradient(30% 52% at 14% 24%,color-mix(in srgb,var(--bt-chroma-a,rgb(190,104,39)) 17%,transparent),transparent 78%),
    radial-gradient(32% 54% at 86% 28%,color-mix(in srgb,var(--bt-chroma-b,rgb(40,108,176)) 16%,transparent),transparent 80%),
    radial-gradient(26% 46% at 52% 18%,color-mix(in srgb,var(--bt-chroma-a,rgb(111,52,157)) 11%,transparent),transparent 78%),
    radial-gradient(58% 68% at 50% 26%,var(--hero-glow,rgba(86,113,151,.14)),transparent 76%);
  -webkit-mask-image:linear-gradient(transparent 0,#000 17%,#000 63%,transparent 100%);
          mask-image:linear-gradient(transparent 0,#000 17%,#000 63%,transparent 100%);
}
/* The shader overhangs with the fallback it sits on top of, and fades at both
   ends for the same reason. Its height is tied to its inset so the canvas is not
   stretched — a WebGL surface scaled against its drawing buffer bands. */
body.stagelight .sws-preview-shader {
  position:absolute; inset:-16% 0 -13%; z-index:-2; width:100%; height:auto; opacity:.28;
  mix-blend-mode:screen; pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 0,#000 17%,#000 63%,transparent 100%);
          mask-image:linear-gradient(transparent 0,#000 17%,#000 63%,transparent 100%);
}
body.stagelight .sws-preview-head,
body.stagelight .sws-preview-composition { width:min(100% - 64px,var(--sp-rail,1440px)); margin-left:auto; margin-right:auto; }
body.stagelight .sws-preview-head { margin-top:0; margin-bottom:0; font:560 27px/1.18 var(--sl-display); letter-spacing:-.02em; }
body.stagelight .sws-preview-head b, body.stagelight .sws-preview-head span { display:block; font-weight:inherit; }
body.stagelight .sws-preview-head span { margin-top:4px; color:var(--sl-muted); font-size:inherit; font-weight:440; }
/* The DOM is now trio-then-groups so a phone cannot read it as a chain; desktop
   puts the groups back on row two, under the side they belong to.

   FIVE LANES, ONE GRID. Until now the composition was three columns and each
   side built its OWN two-track grid inside its column — so the left arrow track
   and the left support-arrow track were two different, independently-sized
   things that only happened to look aligned, and stopped looking aligned the
   moment a title changed length. There is now exactly one set of tracks for the
   whole field: titles / arrow / the song this page is about / arrow / titles.
   Row one is the trio, row two is the two support groups, and the groups take
   their columns FROM this grid via subgrid rather than declaring their own. An
   arrow cannot drift out of its lane because there is only one lane to be in.

   display:contents dissolves the two side columns and their main-rows so the
   primaries and their arrows become direct children of this grid and can be
   placed in lanes 1/2 and 4/5. It is undone below 900px, where the field is a
   stack and the columns have to be boxes again.

   THREE ROWS, AND THE SUPPORTS MOVED TO THE CORNERS (2026-08-06). The five lanes
   and the main line inside them are untouched — that spine is the thing this
   section was rebuilt around and it still owns row 2. What changed is where the
   four supporting songs live. They used to sit in two blocks stranded on row 2
   BELOW their side, which left a large dead field under the centre song and put
   them further from it than the primaries were. Alex: "Keep the four secondary
   songs closer to Fishwater. Reduce the large empty gap below Fishwater. Keep
   the whole composition compact and balanced."
   So they are now four corners around the hub — rows 1 and 3, hugging the centre
   column — and each bends an arc toward it. The row gaps are modest and the dead
   field is gone.

   THESE ARE RESERVED CELLS AND THAT IS THE WHOLE POINT. A corner is a grid cell
   in a row the centre song does not occupy and a column span that stops at the
   centre column's edge. A long title wraps INSIDE its cell; it cannot reach the
   centre, because there is no geometry by which it could. This section was cured
   of overlap disease by reserved lanes and the hub keeps that discipline — no
   absolute positioning, no negative margins, no transforms on the arcs. */
body.stagelight .sws-preview-composition {
  display:grid;
  grid-template-columns:
    minmax(0,1fr)          /* 1 — songs played into this one, right-aligned */
    var(--sws-arrow-w)     /* 2 — the left arrow lane */
    fit-content(30%)       /* 3 — this page's song, content-sized and capped */
    var(--sws-arrow-w)     /* 4 — the right arrow lane */
    minmax(0,1fr);         /* 5 — songs played out of it, left-aligned */
  grid-template-rows:auto minmax(92px,auto) auto;   /* corner / the main line / corner */
  column-gap:clamp(16px,2vw,28px); row-gap:clamp(8px,1vw,16px);
  align-items:center; margin:32px auto 0;
}
body.stagelight .sws-preview-column.is-in,
body.stagelight .sws-preview-column.is-out,
body.stagelight .sws-preview-column.is-in .sws-preview-main-row,
body.stagelight .sws-preview-column.is-out .sws-preview-main-row { display:contents; }
body.stagelight .sws-preview-group-label { display:none; }
body.stagelight .sws-preview-column { min-width:0; }
body.stagelight .sws-preview-column.is-center { grid-column:3; grid-row:2; display:flex; justify-content:center; min-width:0; padding-top:0; }
body.stagelight .sws-preview-primary { width:max-content; min-width:0; text-align:center; color:inherit; text-decoration:none; }
body.stagelight .sws-preview-primary.is-in { grid-column:1; grid-row:2; justify-self:end; text-align:right; max-width:100%; }
body.stagelight .sws-preview-column.is-in .sws-preview-desktop-arrow { grid-column:2; grid-row:2; }
body.stagelight .sws-preview-primary.is-center { justify-self:center; max-width:100%; }
body.stagelight .sws-preview-column.is-out .sws-preview-desktop-arrow { grid-column:4; grid-row:2; }
body.stagelight .sws-preview-primary.is-out { grid-column:5; grid-row:2; justify-self:start; text-align:left; max-width:100%; }
body.stagelight .sws-preview-song { display:block; font:400 clamp(24px,2.1vw,34px)/1.02 "PanicHand",cursive; text-wrap:balance; }
body.stagelight .sws-preview-primary.is-center .sws-preview-song { font-size:clamp(32px,3.2vw,52px); line-height:.88; }
body.stagelight .sws-preview-primary.is-center .sws-preview-song > span { display:block; }
/* THE COUNTS ARE IN GARRIE'S HAND TOO (2026-08-06). Alex: the whole section
   should read hand-done. The digits already exist — build-hand-font.py draws
   every one of them — so a count in the site mono was the only typed thing left
   in a field of handwriting, and it read as a caption bolted onto a drawing.
   Same ink as the titles at lower pressure: PanicHand, ~60% of the title beside
   it, and .65 opacity against the arrows' .74. The hub's own count runs a size
   larger than the corners' so the hierarchy still reads at a glance.
   13px is an absolute floor. Hand faces lose their digits before a mono does and
   these are the numbers the section exists to state.

   SCOPED TO .sws-preview ON PURPOSE. The stats rail, the ledger and every other
   number on a song page stay in the site mono — this is one section's voice, not
   a site-wide type change, and the extra class in the selector is what stops a
   later edit here leaking out of it. */
body.stagelight .sws-preview .sws-preview-count {
  display:block; margin-top:8px;
  color:var(--sl-ink); opacity:.65;
  font:400 clamp(15px,1.3vw,20px)/1 "PanicHand",cursive;
  font-variant-numeric:normal;
  /* No tracking tricks here. "860" once fell apart into "8 60" — the air was in
     the FONT (unfitted digit advances, bearings up to 328 units against a
     letter's ~60), and it is fixed there: build-hand-font.py now fits every
     digit to letter-like bearings. A letter-spacing patch tried first pulled
     the words apart before it closed the digits. */
}
body.stagelight .sws-preview .sws-preview-primary.is-center .sws-preview-count { margin-top:10px; font-size:clamp(18px,1.7vw,26px); }
body.stagelight .sws-preview .sws-preview-row .sws-preview-count { margin-top:3px; font-size:clamp(13px,1.05vw,16px); text-align:inherit; }
/* The row-one arrows fill their lane, so their anchoring is decided by the lane
   itself. The lift is optical, not structural: align-items:center centres the
   arrow on the title-AND-count block, and the arrow belongs on the title line. */
body.stagelight .sws-preview-arrow { width:100%; min-width:0; position:relative; top:var(--sws-arrow-lift,-11px); transform:rotate(var(--sws-tilt)); transform-origin:center; color:rgba(255,255,255,.76); }
body.stagelight .sws-preview-mobile-arrow { display:none; }
/* THE ARROW IS DRAWN AT ONE SIZE AND MASKED, NEVER SCALED. Alex, 2026-08-06:
   "we need to create new arrows right? shorter, longer, to fill the space
   dynamically. either that OR mask them. that's the easy fix." He was right, and
   the measurements said which half to take: scaling to fit was giving three
   different arrowHEADS in one column — 10.6×13.5px on the Drums row against
   6.3×9.7px on Hatfield's, 41% smaller. One pen cannot have three nibs.
   Length is a property of the drawing, not of its scale. So the SVG is pinned to
   a FIXED width — head, stroke weight and squiggle amplitude identical on every
   row forever — the wrapper clips it, and the tail dissolves into a soft mask
   where it runs out. A narrower lane simply shows less tail.
   This beats authoring several arrow lengths: it is continuous at any width, so
   there is nothing to pick, nothing to author, and no snapping between sizes when
   the viewport lands between two of them. */
body.stagelight .sws-preview-arrow, body.stagelight .sws-preview-support-arrow {
  display:flex; justify-content:flex-end; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px);
          mask-image:linear-gradient(to right,transparent 0,#000 22px);
}
body.stagelight .sws-preview-arrow svg, body.stagelight .sws-preview-support-arrow svg {
  flex:0 0 var(--sws-arrow-draw,96px); width:var(--sws-arrow-draw,96px);
}
body.stagelight .sws-preview-arrow svg, body.stagelight .sws-preview-mobile-arrow svg, body.stagelight .sws-preview-support-arrow svg { display:block; height:auto; overflow:visible; }
body.stagelight .sws-preview-mobile-arrow svg { width:100%; }
body.stagelight .sws-preview-arrow .line, body.stagelight .sws-preview-mobile-arrow .line, body.stagelight .sws-preview-support-arrow .line { stroke:currentColor; stroke-width:2.1; stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke; }
body.stagelight .sws-preview-arrow .pressure, body.stagelight .sws-preview-mobile-arrow .pressure, body.stagelight .sws-preview-support-arrow .pressure { stroke:rgba(255,255,255,.50); stroke-width:3.4; stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke; }
body.stagelight .sws-preview-arrow svg, body.stagelight .sws-preview-support-arrow svg { animation:sws-arrow-settle 1.8s ease-in-out both; }
@keyframes sws-arrow-settle { 0% { opacity:.35; transform:translateX(-5px); } 55%,100% { opacity:1; transform:translateX(0); } }
/* FOUR CORNERS ROUND A HUB. Replaces the shared support-arrow lane (2026-08-06).
   The lane was the right answer to the previous layout's question — two stacked
   support rows under each side, whose arrows drifted to a different x on every
   row until one grid track forced them into line. That question is gone: there
   are no stacked support rows any more. Each support song has its own reserved
   corner cell and its own arc, so there is nothing left to align to anything.
   The straight arrows in row 2 keep their lane; that spine did not move.

   THE GROUPS DISSOLVE. They stay in the markup because a phone needs them —
   stacked, position cannot say which side a song belongs to, so the labels come
   back and the two blocks are real. On desktop display:contents lets each row
   take its own corner directly, which is what makes the corners grid cells
   rather than boxes floated near the middle.

   THE ARCS ARE ANCHORED TO THE CELL, NEVER TO A COORDINATE. An arc is the last
   flex item on the left and the first on the right, in a row justified toward
   the hub — so it always touches its cell's hub-facing edge whatever the title
   beside it does. A title that wraps to two lines pushes nothing: it grows into
   its own cell and the arc stays where the cell ends. */
body.stagelight .sws-preview-composition { --sws-arrow-w:clamp(56px,6vw,96px); --sws-arc-w:clamp(58px,5.4vw,86px); }
body.stagelight .sws-preview-group,
body.stagelight .sws-preview-group.is-in-group,
body.stagelight .sws-preview-group.is-out-group { display:contents; }
body.stagelight .sws-preview-row {
  display:flex; align-items:center; gap:clamp(6px,.8vw,14px);
  min-width:0; max-width:100%; min-height:0;
  color:inherit; text-decoration:none;
}
/* The span stops at the centre column: 1–2 on the left, 4–5 on the right. The
   centre song's column 3 is never inside a corner's span, at any title length. */
body.stagelight .sws-preview-row.is-in { grid-column:1 / 3; justify-content:flex-end; text-align:right; }
body.stagelight .sws-preview-row.is-out { grid-column:4 / 6; justify-content:flex-start; text-align:left; }
/* Upper corners sit low in their row and lower corners sit high, so all four
   lean toward the hub and the composition closes up rather than spreading. */
body.stagelight .sws-preview-row.is-corner-upper { grid-row:1; align-self:end; }
body.stagelight .sws-preview-row.is-corner-lower { grid-row:3; align-self:start; }
body.stagelight .sws-preview-support-label { display:block; min-width:0; flex:0 1 auto; }
body.stagelight .sws-preview-support-title { display:block; font:400 clamp(19px,1.7vw,27px)/1.05 "PanicHand",cursive; text-wrap:balance; }
/* THE TRAVELLING NOTE. One quiet centred line at the foot of the hub, in
   Garrie's hand because Alex asked for it in Garrie's hand — the same ink as
   the counts beside every name above it, at the counts' weight rather than the
   titles', so it reads as a note somebody added and not as another heading.
   It only ever appears on pages where the trend is real, so it needs no empty
   state and no reserved space. */
body.stagelight .sws-travels {
  width:min(100% - 64px,var(--sp-rail,1440px)); margin:44px auto 0;
  font:400 clamp(17px,1.5vw,23px)/1.34 "PanicHand",cursive;
  text-align:center; text-wrap:balance; color:var(--sl-muted);
}
@media (max-width:900px) {
  body.stagelight .sws-travels { width:calc(100% - 32px); margin-top:30px; font-size:16px; }
}
/* Desktop draws the arc; the straight wavy mark is the phone's. Both ship in the
   markup because they are different drawings, not one drawing resized. */
body.stagelight .sws-preview-support-arrow { display:none; }
body.stagelight .sws-preview-arc { display:block; flex:0 0 var(--sws-arc-w); width:var(--sws-arc-w); opacity:.6; color:#fff; }
body.stagelight .sws-preview-arc svg { display:block; width:100%; height:auto; overflow:visible; }
/* Smaller, thinner, quieter than the main arrows (2.1 / 3.4 / .76) — Alex's
   words, and the numbers that carry them out. */
body.stagelight .sws-preview-arc .line { stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; vector-effect:non-scaling-stroke; }
body.stagelight .sws-preview-arc .pressure { stroke:rgba(255,255,255,.5); stroke-width:2.6; stroke-linecap:round; fill:none; vector-effect:non-scaling-stroke; }
body.stagelight .sws-preview-arc svg { animation:sws-arrow-settle 1.8s ease-in-out both; }
body.stagelight .sws-preview-primary:hover .sws-preview-song,
body.stagelight .sws-preview-row:hover .sws-preview-support-title { color:#fff; }

/* Space Wrangler's next two sections reuse the song-page media language while
   staying isolated from every other song page. */
body.stagelight .sws-era-section { margin-top:72px; }
body.stagelight .sws-era-section .sp-era-head { align-items:center; }
body.stagelight .sws-era-title { max-width:none; white-space:nowrap; }
body.stagelight .sws-era-title b, body.stagelight .sws-era-title i { display:inline; }
/* The metadata line moved to song-page.css — it is every song's hero now. */
body.stagelight .song-crumbs { background:linear-gradient(rgba(11,11,12,.84) 68%,rgba(11,11,12,0)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
body.stagelight .song-main-full > .song-back { box-sizing:border-box; width:100vw; margin:0 calc(50% - 50vw); padding:28px max(32px,calc((100vw - var(--sp-rail,1440px))/2)) 48px; border-top:0; background:#0b0b0c; }
body.stagelight .sws-era-feature {
  position:relative; min-height:clamp(360px,48vw,600px); overflow:hidden;
  border:1px solid var(--sl-line); border-radius:var(--sl-r); background:var(--sl-glass);
}
body.stagelight .sws-era-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.stagelight .sws-era-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.12) 20%,rgba(8,8,10,.88) 100%); }
body.stagelight .sws-era-copy { position:absolute; left:32px; right:110px; bottom:64px; z-index:1; }
body.stagelight .sws-era-copy h3 { font:500 13px/1.25 var(--sl-body); letter-spacing:0; color:var(--sl-muted); }
body.stagelight .sws-era-copy p { margin:5px 0 4px; color:var(--sl-ink); font:650 clamp(27px,3vw,42px)/1.04 var(--sl-display); letter-spacing:-.025em; }
body.stagelight .sws-era-play { position:absolute; top:20px; right:20px; z-index:2; width:52px; height:52px; }
body.stagelight .sws-era-pager { position:absolute; right:82px; top:26px; bottom:auto; z-index:2; display:flex; align-items:center; gap:10px; }
body.stagelight .sws-era-pager button { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--sl-line-strong); border-radius:50%; background:rgba(10,10,12,.58); backdrop-filter:blur(8px); }
body.stagelight .sws-era-pager button:hover { background:var(--sl-ink); color:#111; }
body.stagelight .sws-era-pager span { min-width:42px; text-align:center; color:var(--sl-muted); font-size:12px; font-variant-numeric:tabular-nums; }
body.stagelight .sws-era-transport { position:absolute; z-index:2; left:32px; right:32px; bottom:24px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; color:var(--sl-ink); font-size:12px; font-variant-numeric:tabular-nums; }
body.stagelight .sws-era-transport input { width:100%; accent-color:var(--sl-ink); background:linear-gradient(90deg,var(--sl-ink) var(--progress,0%),rgba(255,255,255,.28) var(--progress,0%)); }
body.stagelight .sws-era-support { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }
body.stagelight .sws-era-support .sp-smart-card { position:relative; min-height:210px; justify-content:flex-end; }
body.stagelight .sws-era-support .sp-card-face { position:absolute; inset:0; aspect-ratio:auto; }
body.stagelight .sws-era-support .sp-card-face::after { background:linear-gradient(180deg,rgba(9,9,11,.18),rgba(9,9,11,.9)); }
body.stagelight .sws-era-support .sp-txt { position:relative; z-index:1; padding:18px 20px 20px; }
body.stagelight .sws-era-support .sp-k { font:600 15px/1.25 var(--sl-display); letter-spacing:-.01em; text-transform:none; color:var(--sl-ink); }
body.stagelight .sws-era-support .sp-v { font-size:13px; }
body.stagelight .sws-era-support .sp-w { font-size:12px; }
body.stagelight .sp-jam-strip { margin-right:calc(50% - 50vw); padding-right:24px; }
/* THE HEIGHT IS NOT THIS FILE'S TO SET ANY MORE. min-height:250px was written
   when the scroll strip existed on Space Wrangler alone; the strip is now what
   any song with more than four jams gets, so this quietly held those cards at
   250px while the 2026-08-06 taller-cards pass took .sp-jam-card to 360 — and
   the pass looked applied because the two-up grid obeyed it. Alex asked for the
   jam cards to keep today's heights; that means one owner for the height, and it
   is song-page.css. Only the strip's own flex sizing stays here. */
body.stagelight .sp-jam-strip .sp-jam-card { flex-basis:min(560px,44vw); }
body.stagelight .sp-jam-sub { font:500 13px/1.45 var(--sl-body); letter-spacing:0; text-transform:none; }
/* ── THE FIELD BELOW 900px: ONE BREAKPOINT, NOT TWO ──────────────────────────
   There used to be two. A 900px block restacked the grid into one column, and a
   SEPARATE 860px block built the actual phone design — flex, reordered, mobile
   arrows, phone type sizes. Below 861px both applied and it looked right; above
   it, only the first did, so 861–899px got a single column still wearing desktop
   type, desktop arrow tracks and a centre column that was still a flex box while
   its siblings were blocks. That band is why "mobile" kept coming back broken:
   nobody was looking at it, and every fix to one block missed the other.
   Both are now this one block, at 900px, and it also undoes the desktop grid —
   display:contents and subgrid are desktop-only and have to be put back. */
@media (max-width:900px) {
  body.stagelight .sws-preview { width:100vw; margin:-84px calc(50% - 50vw) 0; padding:108px 0 64px; }
  body.stagelight .sws-preview-head,
  body.stagelight .sws-preview-composition { width:calc(100% - 32px); }
  body.stagelight .sws-preview-head { font-size:18px; }
  body.stagelight .sws-preview-composition {
    display:flex; flex-direction:column; align-items:flex-start; gap:11px; margin-top:24px;
    /* Narrow the shared track, not one arrow — primary and support shrink
       together so the column stays aligned at every width. */
    --sws-arrow-w:50px;
  }
  body.stagelight .sws-preview-column { width:100%; }
  body.stagelight .sws-preview-column.is-in,
  body.stagelight .sws-preview-column.is-out { display:block; }
  body.stagelight .sws-preview-column.is-center { display:block; order:2; padding:0; }
  body.stagelight .sws-preview-column.is-in { order:1; }
  body.stagelight .sws-preview-column.is-out { order:3; }
  body.stagelight .sws-preview-main-row, body.stagelight .sws-preview-column.is-in .sws-preview-main-row, body.stagelight .sws-preview-column.is-out .sws-preview-main-row { display:block; min-height:0; }
  body.stagelight .sws-preview-primary { text-align:left; }
  body.stagelight .sws-preview-primary.is-in, body.stagelight .sws-preview-primary.is-center, body.stagelight .sws-preview-primary.is-out { justify-self:auto; text-align:left; }
  body.stagelight .sws-preview-title-line { display:inline-flex; align-items:center; gap:10px; }
  body.stagelight .sws-preview-song, body.stagelight .sws-preview-primary.is-center .sws-preview-song { font-size:18px; line-height:1; }
  body.stagelight .sws-preview-primary.is-center .sws-preview-song > span { display:inline; }
  body.stagelight .sws-preview-primary.is-center .sws-preview-song > span + span::before { content:" "; }
  /* 13px is the floor everywhere, phone included — below it Garrie's digits stop
     being digits, and these are the numbers the section exists to state. */
  body.stagelight .sws-preview .sws-preview-count { margin-top:5px; font-size:13px; }
  body.stagelight .sws-preview .sws-preview-primary.is-center .sws-preview-count { margin-top:5px; font-size:15px; }
  body.stagelight .sws-preview-arrow { width:58px; margin:0; position:static; top:auto; }
  body.stagelight .sws-preview-desktop-arrow { display:none; }
  /* NO ARCS ON A PHONE. Alex, 2026-08-06: "The arches will become cramped and
     graph-like on a narrow screen." A hub needs width to be a hub; stacked, it is
     a diagram of itself. The corners become two plain labelled groups instead. */
  body.stagelight .sws-preview-arc { display:none; }
  body.stagelight .sws-preview-support-arrow { display:flex; }
  /* THE TRIO'S ARROW POINTS DOWN, because the phone reads top to bottom:
     DRUMS / 46 times / down / FISHWATER / 860 plays / down / DRUMS / 42 times.
     It is the same hand-drawn mark as everywhere else, turned a quarter turn —
     not a new arrow and not a text glyph. The wrapper is a square grid so the
     rotation happens about a centre that is actually in the middle of the box;
     rotating it in normal flow threw the drawing out of the top of its own line. */
  body.stagelight .sws-preview-mobile-arrow {
    display:grid; place-items:center; width:40px; height:40px; margin:12px 0 2px;
    color:rgba(255,255,255,.74); transform:none;
  }
  body.stagelight .sws-preview-mobile-arrow svg { width:40px; transform:rotate(90deg); transform-origin:center; }
  /* On desktop the position says which direction a group belongs to; stacked, it
     cannot, so the labels come back. */
  body.stagelight .sws-preview-group-label {
    display:block; margin:0 0 14px; text-align:center;
    font:600 11px/1 var(--sl-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sl-faint);
  }
  /* display:block undoes the desktop display:contents — stacked, a group is a
     real box again, because it has a label to carry and an order to take. */
  body.stagelight .sws-preview-group,
  body.stagelight .sws-preview-group.is-in-group,
  body.stagelight .sws-preview-group.is-out-group {
    display:block; grid-column:auto; grid-row:auto; grid-template-columns:minmax(0,1fr); width:100%; justify-items:stretch;
  }
  /* THE TRIO READS FIRST ON A PHONE. The DOM is already trio-then-groups for
     exactly this reason, but the trio columns carried order:1/2/3 while the
     groups carried none — and an unset order is 0, which sorted all four
     supporting songs ABOVE the main relationship. A phone opened on Fishwater
     led with Stop-Go. The groups take the orders that follow the trio. */
  body.stagelight .sws-preview-group.is-in-group { order:4; margin-top:46px; }
  body.stagelight .sws-preview-group.is-out-group { order:5; margin-top:38px; }
  /* A SUPPORT ROW IS A SONG WITH AN ARROW BESIDE IT, NOT A SPAN OF THE SCREEN.
     Keeping the desktop two-track grid here stretched each row to the full width
     and pinned its arrow to the far edge — Stop-Go's arrow ended up at the right
     margin with a phone's width of empty space between them, which reads as an
     arrow belonging to nothing. Stacked, the row is just the pair, tight and
     left-aligned, which is how the trio beneath it already reads. */
  body.stagelight .sws-preview-group { justify-items:start; }
  /* grid-row and align-self go back to auto with grid-column: a corner cell is a
     desktop idea, and leaving row 1 / row 3 on these while the parent is a flex
     column pinned the two groups' rows on top of each other. */
  body.stagelight .sws-preview-row,
  body.stagelight .sws-preview-row.is-in,
  body.stagelight .sws-preview-row.is-out,
  body.stagelight .sws-preview-row.is-corner-upper,
  body.stagelight .sws-preview-row.is-corner-lower {
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    grid-column:auto; grid-row:auto; align-self:auto; grid-template-columns:none;
    width:max-content; max-width:100%;
    min-height:47px; text-align:left;
  }
  body.stagelight .sws-preview-row.is-in .sws-preview-support-label,
  body.stagelight .sws-preview-row.is-out .sws-preview-support-label { justify-self:auto; text-align:left; }
  body.stagelight .sws-preview-support-arrow,
  body.stagelight .sws-preview-row.is-in .sws-preview-support-arrow,
  body.stagelight .sws-preview-row.is-out .sws-preview-support-arrow {
    justify-self:auto; position:static; top:auto; flex:0 0 auto; width:46px;
  }
  body.stagelight .sws-preview-row:nth-of-type(2) .sws-preview-support-arrow { width:40px; }
  /* Smaller pen on a phone, still ONE pen — the drawing shrinks once here, and
     the lane keeps masking rather than scaling, so the heads stay identical. */
  body.stagelight .sws-preview-composition { --sws-arrow-draw:62px; }
  body.stagelight .sws-preview-arrow, body.stagelight .sws-preview-support-arrow {
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px);
            mask-image:linear-gradient(to right,transparent 0,#000 14px);
  }
  body.stagelight .sws-preview-link { gap:8px; }
  body.stagelight .sws-preview-support-title { font-size:16px; }
  body.stagelight .sws-preview .sws-preview-row .sws-preview-count { margin-top:2px; margin-left:0; font-size:13px; text-align:left; }
}
@media (max-width:860px) {
  body.stagelight .sws-era-section { margin-top:48px; }
  body.stagelight .sws-era-title { white-space:normal; }
  body.stagelight .sws-era-feature { min-height:430px; border-radius:var(--sl-r-md); }
  body.stagelight .sws-era-copy { left:20px; right:20px; bottom:70px; }
  body.stagelight .sws-era-copy p { font-size:27px; }
  body.stagelight .sws-era-play { top:16px; right:16px; width:48px; height:48px; }
  body.stagelight .sws-era-pager { left:16px; right:72px; top:16px; bottom:auto; justify-content:flex-end; }
  body.stagelight .sws-era-transport { left:20px; right:20px; bottom:22px; gap:10px; }
  body.stagelight .sws-era-support { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-right:calc(50% - 50vw); padding-right:16px; }
  body.stagelight .sws-era-support::-webkit-scrollbar { display:none; }
  body.stagelight .sws-era-support .sp-smart-card { flex:0 0 82%; min-height:190px; scroll-snap-align:start; }
  body.stagelight .sp-jam-strip .sp-jam-card { flex-basis:86%; }
}
@media (prefers-reduced-motion:reduce) { body.stagelight .sws-preview-shader { display:none; } body.stagelight .sws-preview-arrow svg, body.stagelight .sws-preview-support-arrow svg, body.stagelight .sws-preview-arc svg { animation:none; } }

/* THE SEGUE LINE. The arrows above say "before and after", which is what
   adjacency measures. This says JOINED, which only setlist.fm's own segue marks
   can support — and it appears on the handful of songs where the marks are
   frequent enough to be a habit rather than an accident. */
body.stagelight .sws-preview-truth {
  width: min(100% - 64px, var(--sp-rail, 1440px)); margin: 18px auto 0;
  text-align: center; color: var(--sl-muted);
  font: 500 14.5px/1.5 var(--sl-body, inherit);
}
body.stagelight .sws-preview-truth b { color: var(--sl-ink); font-weight: 620; }
body.stagelight .sws-preview-truth-sep { margin: 0 12px; color: var(--sl-faint); }
@media (max-width: 900px) {
  body.stagelight .sws-preview-truth { width: min(100% - 40px, var(--sp-rail, 1440px)); font-size: 13.5px; }
  body.stagelight .sws-preview-truth-sep { display: block; height: 0; overflow: hidden; margin: 6px 0; }
}

/* When only the segue line is earned, the section is just the line — no
   composition, no arrows, and much less air. Dark Bar is the case: 63 of its 64
   nights are inside Goodpeople, but its out-side never reaches the adjacency
   floor, so the field it used to hang from never rendered. */
body.stagelight .sws-preview.is-truth-only { padding: 72px 0 64px; margin-top: -40px; }
body.stagelight .sws-preview.is-truth-only .sws-preview-truth { margin-top: 20px; font-size: 16px; }