/* Song page — LIFTED from design/prototypes/song-page.html by scripts/lift-song-page.mjs.
Classes carry an sp- prefix so they sit beside the site's own CSS; sc-chip and the
footer classes are deliberately NOT prefixed because those are the site's own.
Never hand-edit and never re-author from a description: change the prototype, re-lift. */
@keyframes dye-drift {from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes athens-crawl {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (min-width:761px) {
}
:root { --sl-bg:#0b0b0c; --sl-ink:#f2f2f0; --sl-muted:rgba(242,242,240,.64); --sl-faint:rgba(242,242,240,.4);
--sl-line:rgba(255,255,255,.08); --sl-line-strong:rgba(255,255,255,.16); --sl-line-faint:rgba(255,255,255,.05);
--sl-glass:linear-gradient(180deg,rgba(28,28,31,.55),rgba(18,18,21,.42));
--sl-glass-shadow:0 18px 40px -20px rgba(0,0,0,.6);
--sl-r:20px; --sl-r-md:12px; --sl-r-sm:6px; --sl-r-pill:999px;
--sl-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
--sl-body:"Geist",system-ui,sans-serif;
--sl-mono:"Geist Mono",ui-monospace,monospace;
--song-a:#b98c50; --song-b:#8fbfd9;
--tie:linear-gradient(90deg,#d4514f,#e0574f 24%,#60a5d2 58%,#c9a35f 88%);
--ink:#f2f2f0; --line:rgba(255,255,255,.08); --muted:rgba(242,242,240,.64); }
* { margin:0;padding:0;box-sizing:border-box }
html { scroll-behavior:smooth }
body { overflow-x:hidden;background:var(--sl-bg);color:var(--sl-ink);font-family:var(--sl-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased }
body.stagelight a { color:inherit;text-decoration:none }
body.stagelight img { max-width:100%;display:block }
body.stagelight button { font:inherit;color:inherit;background:none;border:0;cursor:pointer }
/* THE 820px CAGE. stagelight.css caps every song page at
body.stagelight .song-main { width: min(820px, calc(100% - 48px)) } — correct for
the reading-width prose page the other 697 songs render, wrong for this one, which
is full-bleed. Measured at a 1440 viewport it left main at 820px and this rail at
772px, so the whole page below the hero ran at half the width of its own hero.
The handoff named this exact rule and said find it rather than layer another rule
on top of it; this releases it for the lifted page only, by a modifier the other
songs never carry, in a stylesheet only this page loads. */
body.stagelight .song-main.song-main-full { width:100%; max-width:none; margin-top:0 }
/* THE BLACK BAR OVER THE HERO. The site renders an .archive-title header carrying
a breadcrumb ABOVE the page body — right for a prose page, and on this one it put
94px of empty black between the nav and a full-bleed hero meant to start under it
(the prototype has none). Gone, and nothing replaces it in flow: the page uses the
home page's section trail (.home-nav) instead, which is position:fixed, reserves
no space, and stays hidden until you are past the hero. */
body.stagelight .sp-rail { width:min(1240px,calc(100% - 48px));margin:0 auto }
body.stagelight section { margin:84px 0 }
/* Alex's round-5 two-line lead: a white statement over a muted continuation.
The site's .sw-lead has no two-line form, so this is the one part of it that
is genuinely new rather than a re-declaration. */
/* EACH HALF BALANCES ITS OWN WRAP. On a phone a long lead broke wherever it ran
out of room — one word alone on the second line, or a name split across it.
text-wrap:balance evens the lines instead (Alex, 2026-08-05: "anytime we have
a headline on two lines make sure there isn't a random line break on mobile"). */
body.stagelight .sw-lead b,body.stagelight .sw-lead i { display:block;font-style:normal;text-wrap:balance }
/* ── ONE CONTINUOUS LINE PER LINE ────────────────────────────────────────────
Alex, 2026-08-06: "make sure that there are no visible breaks on the board. It
should all be one continuous line on each of those headlines."
Each line carries its own character count as --sp-fit and sizes itself from
the rail it has to live in. The rail is the viewport less its gutters — 64px
above 600px, 32px below — and a few extra pixels come off each so a desktop
scrollbar (which 100vw counts and the layout does not) cannot turn a headline
that just fits into one that just overflows.
0.55 is the display face's widest measured advance per character with
headroom; the number is derived and defended in build.mjs beside leadLine().
min() caps it at the design size so a short headline never grows; max() floors
it at 12px so it never becomes unreadable — and the build marks any line that
cannot hold ONE line at that floor with .sp-fit-wrap, which lets it wrap at a
word instead. Wrapping is the fallback; it is not the behaviour.
max-width HAS TO GO. .sw-lead is capped at 30ch (38ch on this page) and a
nowrap line simply overflows a box that narrow — on a phone that is sideways
scroll, which is the one layout fault with no taste in it. The fit maths bounds
the width instead, which is the same job done by the thing that knows the
length. */
body.stagelight .sp-lead-fit { max-width:none }
body.stagelight .sp-lead-fit .sp-fit {
display:block; white-space:nowrap; text-wrap:nowrap;
font-size:max(12px,min(27px,calc((100vw - 72px) / (var(--sp-fit,20) * 0.55))));
}
/* A LINE THAT WRAPS DOES NOT ALSO SHRINK. Shrinking exists to buy a single line;
once the build has decided this one cannot have one, taking it to the 12px
floor as well would be paying the price without getting the thing it buys. It
goes back to the headline's own size and wraps at a word, exactly as it did
before any of this — the fallback is "unchanged", not "unchanged and tiny". */
body.stagelight .sp-lead-fit .sp-fit.sp-fit-wrap { white-space:normal;text-wrap:pretty;font-size:inherit }
@media (max-width:600px) {
body.stagelight .sp-lead-fit .sp-fit {
font-size:max(12px,min(27px,calc((100vw - 44px) / (var(--sp-fit,20) * 0.55))));
}
}
body.stagelight .sc-chip { display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:var(--sl-r-pill);font-size:13.5px;font-weight:560;white-space:nowrap;transition:transform .18s ease,background .18s ease }
body.stagelight .sc-chip-primary { background:var(--sl-ink);color:#111;box-shadow:0 8px 24px -8px rgba(242,242,240,.35),inset 0 1px 0 rgba(255,255,255,.9);border:0 }
body.stagelight .sc-chip-primary:hover { transform:translateY(-1px);background:#fff }
body.stagelight .sc-chip-glass { background:rgba(255,255,255,.055);border:1px solid var(--sl-line-strong);color:var(--sl-ink) }
body.stagelight .sc-chip-glass:hover { transform:translateY(-1px);background:rgba(255,255,255,.09) }
/* Full-bleed: the hero breaks out of archive-main the same way .home-hero and
.athens-strip already do. */
body.stagelight .sp-hero { position:relative;overflow:hidden;border-bottom:1px solid var(--sl-line);width:100vw;margin-left:calc(50% - 50vw) }
body.stagelight .sp-hero-ambient { position:absolute;inset:-40px;background-image:var(--cover-url);background-size:cover;background-position:center;filter:blur(90px) saturate(1.05);opacity:.3;transform:scale(1.15) }
body.stagelight .sp-hero-tint { position:absolute;inset:0;background:
radial-gradient(900px 480px at 18% 0%, color-mix(in srgb,var(--song-a) 24%,transparent), transparent 70%),
radial-gradient(700px 420px at 88% 18%, color-mix(in srgb,var(--song-b) 13%,transparent), transparent 70%),
linear-gradient(180deg, rgba(11,11,12,.25), rgba(11,11,12,.86) 78%, var(--sl-bg)) }
body.stagelight .sp-hero-in { position:relative;width:min(1240px,calc(100% - 48px));margin:0 auto;padding:60px 0 44px;display:grid;grid-template-columns:264px minmax(0,1fr);gap:44px;align-items:end }
body.stagelight .sp-cover { border-radius:var(--sl-r-md);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px var(--sl-line-strong);aspect-ratio:1 }
body.stagelight .sp-cover img { width:100%;height:100%;object-fit:cover }
body.stagelight h1.sp-title { font:700 clamp(44px,7vw,88px)/1.02 var(--sl-display);letter-spacing:-.025em;margin:0 0 6px;padding-bottom:.04em;width:fit-content;background:linear-gradient(97deg,#d97a72 0,#8fb9dd .38em,#c9a35f .78em,var(--sl-ink) 1.35em);-webkit-background-clip:text;background-clip:text;color:transparent }
body.stagelight .sp-meta { color:var(--sl-muted);font-size:15px }
body.stagelight .sp-meta b { color:var(--sl-ink);font-weight:600 }
/* THE STAT STRIP IS ONE HORIZONTAL BAR, five cells divided by hairlines — the
design on Alex's desk (~/Desktop/song-page.html, 09:48 on 08-01), which is the
copy he reviews from. The repo prototype was edited at 14:15 the same day into
four stacked cards and lost the longest-gap cell; that stack is what made the
hero tall and half-empty. Matching his. */
body.stagelight .sp-stat-strip { display:flex;margin:24px 0 26px;border:1px solid var(--sl-line);border-radius:var(--sl-r-md);background:rgba(255,255,255,.02);overflow:hidden }
body.stagelight .sp-stat { flex:1;padding:15px 20px;border-left:1px solid var(--sl-line-faint) }
body.stagelight .sp-stat:first-child { border-left:0 }
body.stagelight .sp-stat .sp-n { font:600 23px/1.1 var(--sl-display);letter-spacing:-.01em }
body.stagelight .sp-rar { display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sl-ink);margin-right:9px;vertical-align:.08em }
body.stagelight .sp-stat .sp-l { font:500 11px/1.4 var(--sl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sl-faint);margin-top:4px }
body.stagelight .sp-actions { display:flex;gap:12px;align-items:center;flex-wrap:wrap }
body.stagelight .sp-lifeline { margin:56px 0 0 }
body.stagelight .sp-ribbon-views { display:flex;gap:8px;margin-bottom:10px }
body.stagelight .sp-rv { border:1px solid var(--sl-line-strong);border-radius:var(--sl-r-pill);padding:7px 14px;font:560 12px/1 var(--sl-body);color:var(--sl-muted);background:transparent }
body.stagelight .sp-rv.sp-on { background:var(--sl-ink);border-color:var(--sl-ink);color:#111 }
body.stagelight .sp-rv:not(.sp-on):hover { color:var(--sl-ink);border-color:rgba(255,255,255,.3) }
/* The year digits sat 4px off the bottom of their canvas with the next block hard against them. */
body.stagelight .sp-ar-ribbon { position:relative;width:100%;margin-bottom:16px }
body.stagelight .sp-ar-ribbon canvas { width:100%;display:block }
body.stagelight .sp-ar-ribbon-tip { position:absolute;top:0;left:0;transform:translate(-50%,-4px);background:rgba(16,16,18,.92);border:1px solid var(--sl-line-strong);border-radius:8px;padding:7px 11px;font:500 12px/1.5 var(--sl-mono);pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;z-index:3 }
body.stagelight .sp-ar-ribbon-tip b { font-weight:600 }
body.stagelight .sp-ar-ribbon-tip .sp-era-line { color:var(--sl-faint) }
body.stagelight .sp-smart-card { border:1px solid var(--sl-line);border-radius:var(--sl-r-md);padding:0;background:linear-gradient(180deg,rgba(24,24,28,.4),rgba(16,16,20,.3));display:flex;flex-direction:column;align-items:stretch;overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s;text-align:left }
body.stagelight .sp-smart-card:hover { border-color:var(--sl-line-strong);transform:translateY(-2px) }
body.stagelight .sp-smart-card .sp-txt { min-width:0 }
body.stagelight .sp-smart-card .sp-k { font:600 11px/1.3 var(--sl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sl-faint) }
body.stagelight .sp-smart-card .sp-v { font:600 15px/1.3 var(--sl-body);margin-top:3px;color:var(--sl-ink) }
body.stagelight .sp-smart-card .sp-w { color:var(--sl-muted);font-size:12.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
body.stagelight .sp-mini-play { width:34px;height:34px;border-radius:50%;border:1px solid var(--sl-line-strong);display:grid;place-items:center;flex:none;color:var(--sl-ink) }
body.stagelight .sp-smart-card:hover .sp-mini-play { background:var(--sl-ink);color:#111;border-color:var(--sl-ink) }
/* THE GHOST LAYERS OVERHANG ON PURPOSE AND MUST BE CLIPPED SIDEWAYS. The scrawl
is rotated and scaled past its box, and the hero ambient is inset:-40px with
scale(1.15) — on a 375px phone those boxes measure 394px and 465px, which put
4px of sideways scroll on every page that has them. Latent until 2026-08-06:
only one page carried a scrawl, and the phone-scroll gate sampled pages that
didn't; 159 lyric pages surfaced it at once. overflow-x:clip (never hidden —
hidden makes a scroll container and forces overflow-y to auto) cuts only the
horizontal overhang; card hover lift and shadows travel vertically, untouched. */
body.stagelight .sp-bento-region { position:relative;padding:26px 0 8px;overflow-x:clip }
body.stagelight .sp-hero { overflow-x:clip }
/* THE GHOST LYRIC FIELD behind the three bento cards.
It rendered as two opaque white walls of handwriting stacked on each other. Two
reasons, both omissions in the lift: this block never carried a COLOUR, so the
text inherited --sl-ink at full strength where the prototype sets
rgba(242,242,240,.075); and .sp-scrawl-clear — which initSongScrawl creates in the
DOM — had no rule anywhere in this stylesheet, so the second copy laid itself out
in normal flow, at full opacity, over the first.
The two layers are the point (Alex, commit 7af08c2: "blurred to clear"): a blurred
field behind, a sharp copy masked in at the bottom so the words resolve as they
fall. Both are ghosts, and neither is ever read. */
body.stagelight .sp-scrawl,
body.stagelight .sp-scrawl-clear {
position:absolute; inset:-40px 0 -20px; z-index:0;
pointer-events:none; user-select:none; overflow:hidden;
font-family:"PanicHand",cursive; text-transform:uppercase; letter-spacing:.03em;
color:rgba(242,242,240,.055);
transform:rotate(-1.4deg) scale(1.04); transform-origin:50% 50%;
}
body.stagelight .sp-scrawl { filter:blur(2.5px); }
/* The sharp copy fades in over the bottom third — the same field, coming into focus. */
body.stagelight .sp-scrawl-clear {
-webkit-mask-image:linear-gradient(180deg,transparent 55%,#000 100%);
mask-image:linear-gradient(180deg,transparent 55%,#000 100%);
}
body.stagelight .sp-scrawl .sp-row,
body.stagelight .sp-scrawl-clear .sp-row { display:block; font-size:26px; line-height:1.12; }
/* COUNT-DRIVEN. Fixed at repeat(3,1fr), a song with one card sat in a
three-column grid with two holes — and most of the catalog has one card, not
three. The build sets --sp-bento to however many it actually emitted. */
body.stagelight .sp-bento-grid { position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--sp-bento,3),minmax(0,1fr));gap:16px }
/* ── ONE HEIGHT, WHATEVER THE COUNT ──────────────────────────────────────────
Alex, 2026-08-07: "should probably expand the height of the cards and width
so they all look the same whether 2 up or three right? maybe same height but
different width."
THE WIDTH WAS ALREADY RIGHT — MEASURED. repeat(var(--sp-bento),1fr) over the
region's own width means the row has always filled the rail: three cards come
out 448 apiece at a 1440 viewport, two come out 680, one comes out 1376. What
was wrong was the HEIGHT, and badly. Sampled across the catalogue at 1440, a
three-card row ran 237-427px while a two-card row ran 120-298 and a one-card
row ran 111-183. The reason is the same thing that makes the widths differ:
a lyric line inside a 448px card wraps and inside a 680px one does not, so
the fewer the cards, the shorter the band. A 144px strip under a 362px page
is what "the rail looks short" was.
460 IS NOT A ROUND NUMBER, ON PURPOSE. It is what Space Wrangler — the page
this row is reviewed on — already measures, so the three-card case Alex has
signed off does not move by a pixel; every shorter case rises to meet it.
RE-DERIVED AT 460 ON 2026-08-07, by measuring all 698 song pages at 1440 with
the floor removed — not by scaling the old figures. The numbers that used to
sit here (87 of 90, 435, 173) were the 362-era counts from the four-line
cards and were wrong in both directions once Lyrics and Origin went to six
lines:
3-card 83 pages — 80 land exactly on 460, 3 grow past it, tallest 557
2-card 424 pages — all land on 460, tallest natural height 395
1-card 168 pages — all land on 460, tallest natural height 144
Lyrics is the driver, which is why the wider layouts never reach the floor on
their own: the same six source lines that wrap to 460 inside a 448px three-up
card fit in far less inside a 680px or 1376px one. Chords measures 144 and
Origin 292.
THE THREE THAT DON'T STILL GROW, AND THEY ARE NOT THE OLD THREE.
bowlegged-woman (524), one-arm-steve (557) and rock (492) carry lyrics that
wrap far enough to need the extra room. you-got-yours used to be on this list
and no longer is. This is a floor and not a fixed height because the
alternative is cropping somebody's words, and the lyric block is deliberately
built so that nothing here ever crops.
ONLY WHERE THERE IS A ROW TO EVEN OUT. Below 901px the grid is already one
column (see the max-width:900px block), so "two up or three" does not exist
down there and the stacked floor below is the one that applies. */
body.stagelight .sp-bento-region .sp-bento-card { min-height:330px }
@media (min-width:901px) {
/* 460 because that is what six lines measures in the narrowest (3-up) card —
the floor follows the content, so every row agrees whatever it holds. */
body.stagelight .sp-bento-region .sp-bento-card { min-height:460px }
}
/* A chords card with no chart of its own: the card is a link with a face on it,
not a lesson, so it carries no diagrams and says so by being quieter. */
body.stagelight .sp-bento-card.sp-bc-ghost .sp-bc-name { opacity:.92 }
body.stagelight .sp-bento-card { display:flex;flex-direction:column;align-items:stretch;position:relative;text-align:left;padding:26px;color:var(--sl-ink);background:linear-gradient(180deg,rgba(24,24,28,.4),rgba(16,16,20,.3));-webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);border:1px solid var(--sl-line);border-radius:var(--sl-r);box-shadow:var(--sl-glass-shadow);transition:transform .18s ease,border-color .18s ease }
body.stagelight .sp-bento-card:hover { transform:translateY(-2px);border-color:var(--sl-line-strong) }
body.stagelight .sp-bc-open { position:absolute;top:20px;right:20px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sl-line-strong);border-radius:10px;color:var(--sl-muted);transition:border-color .2s,color .2s,background .2s }
body.stagelight .sp-bento-card:hover .sp-bc-open { border-color:var(--sl-ink);color:var(--sl-ink);background:rgba(255,255,255,.06) }
body.stagelight .sp-bc-name { display:block;font-family:var(--sl-display);font-weight:640;font-size:21px;letter-spacing:-.005em }
body.stagelight .sp-bc-fact { display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-family:var(--sl-mono);font-size:12px;color:var(--sl-faint);margin-top:auto;padding-top:14px;border-top:1px solid var(--sl-line-faint) }
/* ── SIX LINES: FOUR IN INK, TWO WALKING AWAY ────────────────────────────────
Alex, 2026-08-06: "The bottom of the lyrics shouldn't clip it should just fade
out ... two show up at the top and two at the bottom." It was four lines then;
he asked for six on the 7th (see the origin block below, which moved with it).
The two that walk away are still two — lines 5 and 6, addressed by :nth-child.
THE FADE IS PER LINE, AND THAT IS THE WHOLE FIX. It used to be one gradient
over the last text node of a block built with , so the only thing CSS
could address was the block — and the block's own bottom edge is where the
slicing happened. Each line is its own box now: line 3 drops to the muted ink,
line 4 runs a gradient from a third-strength muted to fully transparent inside
its own box, and there is padding under it so no descender ever meets an edge.
NOTHING HERE CROPS. No overflow, no max-height, no mask on the container — a
line disappears because it stops being painted, not because something cuts it.
The 130% stop is deliberate: the gradient reaches transparent BELOW the text
box, so the last line is still faintly legible rather than half-gone, which is
what "fade out" means and what "clip" did not. */
/* ── ONE GHOST, READ BY BOTH CARDS ───────────────────────────────────────────
Alex, 2026-08-07: "Why is the ghosted text so far down on the song origin part
and different color and font size vs. the one on the lyrics? Should look
similar."
He was right about two of the three, and the third is worth saying plainly
because it is the reason the other two went unnoticed. MEASURED on
/song/space-wrangler/ at 1440 before this change: the type was already
identical — 18.5px on 32.375px of leading, Bricolage 400, both cards. What
differed was WHERE the block sat (80px down the lyric card, 178px down the
origin one, because the origin was pushed to the foot with margin-top:auto)
and WHAT COLOUR it was (the lyric card opens at full ink and only ghosts its
last two lines; the origin card was one gradient that started already muted
and began fading 40% in, which is halfway through line two). Lighter type,
further down, fading sooner — that reads as smaller even when it is not.
THE FIX IS THAT THERE IS NOW ONE SET OF NUMBERS AND BOTH CARDS READ IT.
Two passes authored these separately and they drifted; a shared token cannot
drift. The lyric card addresses its lines with :nth-child because it always
has exactly as many as the build emits — six since 2026-08-07. The origin card
is one text block, so it reproduces the same steps with a gradient whose stops
are in ABSOLUTE LINE HEIGHTS rather than percentages — 4 lines of ink, 1
muted, then the fade — which means a quote of any length gets the same
treatment its lines would get in the lyric card, and a two-line quote is
simply two lines of ink rather than a block with a fade squeezed into it. */
body.stagelight {
--sp-ghost-size:18.5px;
--sp-ghost-lead:1.75;
--sp-ghost-line:calc(var(--sp-ghost-size) * var(--sp-ghost-lead));
--sp-ghost-tail:color-mix(in srgb,var(--sl-muted) 55%,transparent);
}
body.stagelight .sp-lyric-lines { margin:20px 0 22px;padding-bottom:6px;font-family:var(--sl-display);font-size:var(--sp-ghost-size);line-height:var(--sp-ghost-lead);font-weight:400;color:var(--sl-ink) }
body.stagelight .sp-lyric-lines .sp-ly { display:block }
body.stagelight .sp-lyric-lines .sp-ly:nth-child(5) { color:var(--sl-muted) }
body.stagelight .sp-lyric-lines .sp-ly:nth-child(6) {
background:linear-gradient(180deg,var(--sp-ghost-tail) 0%,transparent 130%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
body.stagelight .sp-chord-stage { margin:22px 0 24px;display:flex;flex-direction:column;gap:16px }
body.stagelight .sp-chord-loop { display:flex;align-items:center;gap:10px;flex-wrap:wrap }
body.stagelight .sp-chord-pill { position:relative;font:600 15px/1 var(--sl-mono);padding:11px 16px;border-radius:10px;border:1px solid var(--sl-line-strong);background:rgba(0,0,0,.32) }
body.stagelight .sp-chord-pill.sp-hot { border-color:rgba(242,242,240,.4);box-shadow:0 0 0 1px rgba(242,242,240,.08),0 6px 18px -8px rgba(242,242,240,.25) }
body.stagelight .sp-chord-x { font:500 12px/1 var(--sl-mono);color:var(--sl-faint) }
body.stagelight .sp-chord-lbl { font:500 10px/1 var(--sl-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sl-faint);min-width:52px }
body.stagelight .sp-frets { display:flex;gap:12px;margin-top:2px;flex-wrap:wrap }
body.stagelight .sp-fret { display:flex;flex-direction:column;align-items:center;gap:6px }
body.stagelight .sp-fret svg { display:block }
body.stagelight .sp-fret em { font:500 11px/1 var(--sl-mono);font-style:normal;color:var(--sl-muted) }
/* ── THE NECK ────────────────────────────────────────────────────────────────
Six strings drawn in the same hand as the hub's arrows: currentColor ink over
a wider translucent pressure stroke, round caps, fill:none, and
vector-effect:non-scaling-stroke so the weight is a property of the pen and
not of the box. Authored at 70x78 and never scaled — the same rule that stops
the PanicHand arrows from growing three different nibs.
THE VIBRATION IS A HAIRLINE, ON PURPOSE. Each string leans a fraction of a
pixel and back, staggered off --sp-str so the six do not move as one plank.
A guitar string at rest that you can SEE moving is a cartoon; the point is
that the card is not quite still. The dots arrive after the strings have
settled, scaling up from nothing.
NO LETTER ANYWHERE. There is deliberately no label rule for this drawing —
see the note in build.mjs. We hold no chord data, so nothing here is allowed
to name a chord. */
/* ── IT FILLS THE CARD, AND IT IS BEHIND THE CARD ────────────────────────────
Alex, 2026-08-06: "Make the chords graphic full width and a big ghosted turn
it to the right it should fill the container area and be ghosted toward the
bottom just to imply it is back there."
Four things, in his order. FULL WIDTH: the layer is inset past the card's own
padding on both sides so the strings run the whole face. BIG: no width or
height on the