), so an auto track sizes to THAT row's content and the
column would land at a different x on every row.
2. City stays its own column — it used to be a flex pair inside the
venue cell, which crammed the two together against a big empty
gap. Don't merge them back. */
grid-template-columns: 76px 210px 163px 1fr 109px 132px;
grid-template-areas: "date venue city notes time cta";
gap: 24px;
align-items: center;
padding: 22px 8px;
border-bottom: var(--border-w) solid var(--border);
transition: background 0.2s;
}
.show:not(.show--booking):hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* Every cell in a dated row centres its own content (owner's call 2026-08)
so the row reads as an even table rather than a left-ragged list.
Scoped off .show--booking, which is a left-aligned CTA block, not a
table row, and would look broken centred. */
.show:not(.show--booking) > * { text-align: center; }
/* Type scale for the four data fields, deliberately narrow: they were once
20/20/14/14px at four different weights, which read as four different
typefaces even though every one is DM Sans. One clear step for the venue
(the thing you scan for), one shared size for city and notes, and time a
step below.
venue 18/700 · city 16/500 · notes 16/500 italic · time 15/600
⚠️ Self-hosted DM Sans ships 300/400/600/700/800 and NO italic — there is
no 500 face and no italic face. Per CSS font matching, `font-weight: 500`
resolves DOWN to the 400 file (verified: 400 and 500 render at identical
widths), and `font-style: italic` is SYNTHESISED by the browser as a
mechanical slant rather than a drawn italic. The 500s are kept because
they state the intent and would start rendering for real the moment a
dm-sans-500 file is added to assets/fonts + an @font-face block up top;
same for a true italic. Don't "fix" the 500s to 400 — and don't assume
city and notes currently differ in weight, they don't.
Sizes live only here. Do NOT add font-size back to the per-element
.show-venue h3 / .show-city / .show-notes / .show-time rules below —
those come later in the file and would win on source order. */
.show-venue h3 { font-size: 18px; }
.show-city { font-size: 16px; }
.show-notes { font-size: 16px; }
.show-time { font-size: 15px; }
.show-date {
grid-area: date;
font-variant-numeric: tabular-nums;
}
.show-date .day {
font-size: 28px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
}
.show-date .mon {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px;
}
.show-venue { grid-area: venue; }
/* Size lives in the shared .show-venue h3/.show-city/.show-notes/.show-time
rule above — deliberately not repeated here, or it would win on source
order and re-break the matched sizing. */
.show-venue h3 {
font-weight: 700;
letter-spacing: -0.01em;
}
/* City is its own grid column, sized the same as the venue name (owner's
call 2026-08) rather than stacked under it as a small caption. Hierarchy
is carried by weight and color — venue bold ink, city medium muted — so
the two read as distinct even at matching size. It was briefly a flex
pair *inside* the venue cell with a "·" separator; that crammed the two
against each other while the rest of the row sat far right, so it's a
real column now and the separator is gone with it. */
.show-city {
grid-area: city;
font-weight: 500;
color: var(--muted);
}
/* Booking Inquiries row still uses a plain stacked subtitle under its
h3 (see .show--booking below) — unrelated to .show-city above. */
.show-venue p {
font-size: 13px;
color: var(--muted);
margin-top: 3px;
}
/* Optional per-show notes/description column (owner's call 2026-08) — left
empty for rows with nothing to say, which is a valid, blank grid cell,
not a layout break. */
.show-notes {
grid-area: notes;
font-weight: 500;
/* Italic is the field's real differentiator here — with no 500 face
shipped, the weight alone renders the same as city's. See the
type-scale block above. */
font-style: italic;
color: var(--muted);
line-height: 1.4;
/* Notes is the one track that fills its column (the text wraps to it),
so without this it would butt right up against the gap while every
other centred field keeps ~20px of margin — making the two gaps
either side of notes read tighter than the rest. */
padding-inline: 20px;
}
/* Emphasis markers from the sheet's Notes column (*bold* / _italic_ —
see emphasize() in tour.js). 700 because it's a real shipped DM Sans
face, so it reads as a genuine step up from the base — which is 500,
and 500 currently resolves to the 400 file (see the type-scale note
above). */
.show-notes strong { font-weight: 700; }
/* Notes are already italic, so an italic-within-italic would be invisible.
Flipping to upright is the standard typographic answer and makes the
emphasis actually read. */
.show-notes em { font-style: normal; }
.show-time {
grid-area: time;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.show-status {
grid-area: cta;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: 8px 12px;
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
white-space: nowrap;
}
/* Fixed pill width, centred in a slightly wider track: as a grid item the
pill would otherwise stretch edge to edge, leaving it no breathing room
while every other field has ~20px. Fixed (not shrink-to-fit) so the
"Tickets" and "Played" pills still share an edge across rows.
Scoped off .show--booking, whose Inquire button is a deliberately
larger filled CTA and must keep its own size. */
.show:not(.show--booking) .show-status {
width: 92px;
justify-self: center;
}
.show-status.open {
color: var(--accent-text);
border-color: var(--accent-text);
}
.show-status.open:hover {
background: var(--accent);
color: #ffffff;
}
/* Recent past shows (owner's call 2026-08: show a short "where we've been"
trail, not just upcoming dates) — the whole row recedes a step, and the
"Tickets" pill becomes a plain "Played" label: no border/hover, since a
button-shaped box implies an action, and there's no action left to take
on a show that already happened. */
.show--past { opacity: 0.6; }
.show-status--past {
border-color: transparent;
padding: 8px 0;
}
/* Booking Inquiries — a CTA block, not a dated show: no date/time columns,
softly tinted, with a filled button so it reads apart from the tour rows. */
.show--booking {
grid-template-columns: 1fr auto;
grid-template-areas: "venue cta";
background: color-mix(in srgb, var(--fg) 4%, transparent);
border-bottom: none;
border-radius: var(--radius);
margin-top: 20px;
padding: 22px 20px;
}
.show--booking .show-venue h3 { font-size: 17px; }
/* Filled, so it follows the same Kelly Blue action rule as .btn-primary.
(.show-status.open — the Tickets pill — is an outlined button and stays put.) */
.show-status--book {
color: #ffffff;
background: var(--accent);
border-color: var(--accent);
/* Larger than the base .show-status pill (owner's call 2026-08) — this is
the one filled action in the tour list, it should read as more important
than the outlined "Tickets" pills, not the same size. */
font-size: 13px;
padding: 14px 22px;
}
.show-status--book:hover {
background: color-mix(in srgb, var(--accent) 84%, #000000);
border-color: color-mix(in srgb, var(--accent) 84%, #000000);
}
.tour-note {
margin-top: 28px;
font-size: 14px;
color: var(--muted);
max-width: 56ch;
}
/* ——— Trust strip ——— */
/* ——— Collaborator ticker: an infinite marquee of the cast. Two identical
groups sit side by side; translateX(-50%) advances exactly one group for a
seamless loop, so BOTH groups must always list the same names. ——— */
.ticker-band {
background: var(--surface);
border-top: var(--border-w) solid var(--border);
border-bottom: var(--border-w) solid var(--border);
padding: 28px 0;
text-align: center;
overflow: hidden;
}
.ticker-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.ticker-mask {
max-width: 900px;
margin: 0 auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.ticker-track {
display: flex;
width: max-content;
font-size: clamp(13px, 1.4vw, 15px);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--accent-text);
white-space: nowrap;
animation: ticker-scroll 34s linear infinite;
}
.ticker-group {
display: flex;
gap: 44px;
padding-right: 44px;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
/* No marquee for reduced-motion visitors: show one static, wrapped list. */
.ticker-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; white-space: normal; }
.ticker-group { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: 12px 44px; }
.ticker-group[aria-hidden="true"] { display: none; }
}
.trust {
background: var(--surface);
color: var(--fg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 24px 0;
}
.trust-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
}
.trust-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.trust-names {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
font-size: clamp(13px, 1.4vw, 15px);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--accent-text);
}
.trust-names span {
position: relative;
}
.trust-names span:not(:last-child)::after {
content: "";
position: absolute;
right: -18px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
transform: translateY(-50%);
}
/* ——— Bio ——— */
.bio {
background: var(--surface);
color: var(--fg);
/* Shop and Bio are both white in the new section order — a hairline keeps
them from reading as one block, the site's sanctioned separator. */
border-top: 1px solid var(--border);
}
.bio .section-label { color: var(--muted); }
.bio .section-label::before { background: var(--accent); }
/* This headline is a full sentence, not a 2-word title, so the 14ch measure it
used to share with short titles stacked it into a tall ragged column against
two-thirds empty page. A ~28ch measure sets it in three balanced lines that
hold the width; `balance` evens the rag. Left-aligned on purpose — every
other section label, title and lead on the site is left-aligned, and
centering this one alone would break that spine. */
.bio .section-title {
max-width: 28ch;
text-wrap: balance;
}
.bio-grid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: clamp(32px, 6vw, 80px);
align-items: start;
margin-top: 40px;
}
.bio-photo-stack {
display: grid;
gap: 16px;
position: sticky;
top: 96px;
}
.bio-photo {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--surface);
border: var(--border-w) solid var(--border);
}
.bio-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bio-photo-secondary {
aspect-ratio: 16/10;
}
.bio-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.bio-stat {
padding: 16px;
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
background: var(--bg);
}
.bio-stat strong {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.bio-stat span {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
}
.bio-lead {
font-size: clamp(20px, 2.4vw, 26px) !important;
line-height: 1.45 !important;
color: var(--fg) !important;
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 28px !important;
}
.bio-text p {
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.75;
color: var(--muted);
margin-bottom: 18px;
}
.bio-text p strong { color: var(--fg); font-weight: 700; }
.bio-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
/* .bio-quote / .bio-quote p removed 2026-07-29 — dead CSS, referenced by no
markup. The real pull-quote on /bio/ is .pull-quote, which is a blockquote
rule (a vertical stroke beside a quotation), not a tinted card. */
/* ——— Merch ——— */
.merch { background: var(--surface); border-top: 1px solid var(--border); }
.merch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
/* A trailing row with fewer than 3 items sits in its own centered flex row
instead of inside the grid above, which would pack them flush-left and
leave an unbalanced empty gap on the right rather than even space on both
sides. Card width matches the grid's own column formula exactly (see the
matching breakpoints below), so cards here are pixel-identical in size to
the ones in the row above. */
.merch-grid-row2 {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.merch-grid-row2 .merch-card {
flex: 0 0 calc((100% - 40px) / 3);
}
.merch-card {
background: var(--bg);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.merch-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.merch-img {
position: relative;
aspect-ratio: 1;
background: var(--surface);
overflow: hidden;
}
.merch-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Merch-card disc reveal is handled by the enhancement layer
(assets/css/enhance.css + assets/js/enhance.js) using the real record/CD
images — the earlier generated-disc + cover-slide version was removed. */
.merch-body { padding: 20px; }
.merch-body h3 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.merch-body p {
font-size: 13px;
color: var(--muted);
margin-top: 6px;
}
.merch-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
padding-top: 16px;
border-top: var(--border-w) solid var(--border);
}
.merch-price {
font-weight: 700;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.merch-cta {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-text);
}
.merch-card:hover .merch-cta { color: var(--accent-text); }
/* ——— Press / proof ——— */
.press {
background: var(--bg);
border-top: var(--border-w) solid var(--border);
}
.press-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(32px, 5vw, 64px);
align-items: start;
margin-top: 40px;
}
.press-quote {
font-size: clamp(22px, 3vw, 32px);
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.025em;
max-width: 18ch;
}
.press-quote cite {
display: block;
margin-top: 20px;
font-size: 12px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.press-points {
display: grid;
gap: 0;
border-top: var(--border-w) solid var(--border);
}
.press-point {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 22px 0;
border-bottom: var(--border-w) solid var(--border);
}
.press-num {
font-size: 13px;
font-weight: 700;
color: var(--accent-text);
font-variant-numeric: tabular-nums;
padding-top: 2px;
}
.press-point h3 {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 6px;
}
.press-point p {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
max-width: 48ch;
}
/* ——— Contact / CTA ——— */
.cta-band {
background: var(--surface);
padding: clamp(80px, 12vw, 140px) 0;
}
.cta-card {
/* Deliberately dark on the light canvas: the closing "ink moment" that
bookends the dark hero and echoes the nav pill. Internals are authored
for dark, so this block must not follow the theme tokens. */
background: var(--ink);
color: #f5efe2;
border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
border-radius: var(--radius);
padding: clamp(48px, 7vw, 80px);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 48px;
align-items: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/* A decorative radial-gradient glow used to sit behind the logo column here
(right:-10%, top:-30%, width:50%, height:160%) — a leftover from before
the real Three.js particle mark existed. Its rectangular bounding box
didn't fully fade to transparent before hitting its own edges, so it read
as a visible container boundary behind the sphere rather than atmosphere.
Removed rather than resized: the site's Flat Rule already treats
decorative gradients as an anti-pattern everywhere else, and the mark
itself is the visual interest here — it doesn't need help. */
.cta-card .section-label { color: color-mix(in srgb, #ffffff 55%, transparent); }
.cta-card h2 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
max-width: 14ch;
position: relative;
z-index: 1;
}
.cta-card p {
margin-top: 16px;
color: color-mix(in srgb, #ffffff 70%, transparent);
max-width: 40ch;
position: relative;
z-index: 1;
}
.cta-form {
display: grid;
gap: 12px;
position: relative;
z-index: 1;
}
/* SK mark above the signup, centred over the form column so it reads as a
stamp closing the page out. enhance.js spins it into place on scroll. */
/* The wrap carries sizing + centring now that the logo has the halo/core sitting
behind it. .cta-form is a grid, so centring is justify-self — auto margins
resolve to 0 against the default stretch and would leave the mark flush left. */
.cta-logo-wrap {
position: relative;
display: grid;
place-items: center;
/* At least 2x the original mark size (owner's call 2026-07-29): 96/11vw/132 -> 200/22vw/264. */
width: clamp(200px, 22vw, 264px);
justify-self: center;
margin-bottom: 20px;
}
.cta-logo {
position: relative;
z-index: 2;
width: 100%;
height: auto;
display: block;
}
.cta-form label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in srgb, #ffffff 55%, transparent);
}
.cta-form input,
.cta-form textarea {
width: 100%;
min-height: 48px;
padding: 12px 16px;
border-radius: var(--radius);
border: var(--border-w) solid color-mix(in srgb, #ffffff 22%, transparent);
background: color-mix(in srgb, #ffffff 8%, transparent);
color: var(--bg);
font-family: inherit;
font-size: 15px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.cta-form input::placeholder,
.cta-form textarea::placeholder {
color: color-mix(in srgb, #ffffff 40%, transparent);
}
.cta-form input:focus,
.cta-form textarea:focus {
border-color: var(--bg);
background: color-mix(in srgb, #ffffff 12%, transparent);
}
.cta-form textarea { min-height: 96px; resize: vertical; }
.cta-form .btn-primary { width: 100%; margin-top: 4px; }
.cta-card .form-note {
font-size: 12px;
color: color-mix(in srgb, #ffffff 45%, transparent);
text-align: center;
/* Two classes here (not just `.form-note`) deliberately outweighs the
generic `.cta-card p { max-width: 40ch }` rule below in specificity —
a plain `.form-note` tied on specificity with `.cta-card p` and lost by
source order, which was capping this to ~240px and left-aligning it in
the grid column. text-align:center was only ever centering within that
narrow box, not under the full-width button above it. */
max-width: none;
}
.form-success {
display: none;
padding: 24px;
border: var(--border-w) solid color-mix(in srgb, #ffffff 22%, transparent);
border-radius: var(--radius);
text-align: center;
}
/* The right-hand column of the CTA card: SK mark on top, then either the form
or (after submit) the confirmation message. Grouping them means the mark
stays put through the swap and the column keeps its visual anchor, instead
of the message being left floating alone against the right edge. */
.cta-right {
display: grid;
align-content: start;
gap: 12px;
}
.form-success.is-shown { display: block; }
.form-success h3 { font-size: 20px; margin-bottom: 8px; }
/* max-width/margin-inline are the fix for a real bug, not decoration: .cta-card p
caps every paragraph in this card at 40ch with no auto margins, so the
confirmation text rendered as a ~290px block jammed against the left edge of a
~410px box. text-align:center then centred the lines INSIDE that block, which
looks centred line-by-line but is visibly off-centre as a whole. Equal
specificity (0-1-1) means this rule wins on source order — but only for the
properties it actually names, so max-width has to be restated here.
34ch keeps a readable measure rather than letting it run the full box. */
.form-success p {
color: color-mix(in srgb, #ffffff 70%, transparent);
font-size: 14px;
max-width: 34ch;
margin-inline: auto;
}
/* ——— Footer ——— */
.footer {
border-top: var(--border-w) solid var(--border);
padding: 48px 0 32px;
background: var(--bg);
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
padding-bottom: 40px;
border-bottom: var(--border-w) solid var(--border);
}
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p {
font-size: 14px;
color: var(--muted);
max-width: 28ch;
}
.footer-cols {
display: flex;
flex-wrap: wrap;
gap: 48px;
}
.footer-col h4 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 14px;
font-weight: 500;
padding: 6px 0;
color: var(--muted);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
padding-top: 24px;
font-size: 13px;
color: var(--muted);
}
.socials {
display: flex;
gap: 8px;
}
.socials a {
width: 40px;
height: 40px;
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
display: grid;
place-items: center;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.socials a:hover {
border-color: var(--fg);
background: var(--fg);
color: var(--bg);
}
.socials svg { width: 16px; height: 16px; }
/* ——— Player dock ——— */
.player {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(120%);
width: min(100% - 32px, 520px);
background: var(--fg);
color: var(--bg);
border-radius: var(--radius);
padding: 14px 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
box-shadow: var(--shadow);
z-index: 90;
transition: transform 0.45s var(--ease);
}
.player.is-open { transform: translateX(-50%) translateY(0); }
.player-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
color: var(--bg);
display: grid;
place-items: center;
}
.player-btn svg { width: 16px; height: 16px; margin-left: 1px; }
.player-info strong {
display: block;
font-size: 14px;
font-weight: 700;
}
.player-info span {
font-size: 12px;
color: color-mix(in srgb, #ffffff 55%, transparent);
}
.player-close {
width: 36px;
height: 36px;
border-radius: var(--radius);
color: color-mix(in srgb, #ffffff 70%, transparent);
font-size: 18px;
line-height: 1;
}
.player-close:hover { color: var(--bg); background: color-mix(in srgb, #ffffff 10%, transparent); }
.player-bar {
grid-column: 1 / -1;
height: 3px;
background: color-mix(in srgb, #ffffff 18%, transparent);
border-radius: 2px;
overflow: hidden;
}
.player-bar i {
display: block;
height: 100%;
width: 0%;
background: var(--accent);
animation: progress 28s linear infinite;
}
@keyframes progress {
from { width: 0%; }
to { width: 100%; }
}
/* ——— Responsive ——— */
/* Tour row, mid widths: notes is the only flexible track, so between the
mobile breakpoint and the 1200px container cap it absorbs every pixel
the fixed columns don't use — at ~1000px that left it around 120px and
the text shredded into a tall narrow stack. Everything else steps down
a little so notes keeps a workable measure. Must stay above the 960px
block below, which overrides these for the stacked phone layout. */
@media (max-width: 1200px) {
.show {
grid-template-columns: 67px 201px 155px 1fr 101px 124px;
gap: 18px;
}
.show-notes { padding-inline: 12px; }
}
@media (max-width: 960px) {
.album-grid,
.bio-grid,
.cta-card,
.press-grid,
.trust-row { grid-template-columns: 1fr; }
.bio-photo-stack { position: static; }
.gallery-grid {
grid-template-columns: 1fr 1fr;
}
.gallery-item:first-child {
grid-column: 1 / -1;
grid-row: auto;
min-height: 360px;
}
.merch-grid { grid-template-columns: 1fr 1fr; }
.merch-grid-row2 .merch-card { flex-basis: calc((100% - 20px) / 2); }
/* Phone: the desktop 6-column row can't hold its width, so the middle
fields stack vertically in one column beside the date, with the CTA
pinned right. Rows with no notes simply omit that band. */
.show {
grid-template-columns: 56px 1fr auto;
grid-template-areas: "date venue cta" "date city cta" "date time cta";
/* Tight row-gap: the desktop 24px is horizontal breathing room between
columns, but here the same value stacks vertically and blows the row
height out. */
gap: 4px 16px;
}
/* The desktop side padding exists to keep notes off its column edges;
in the single stacked column it just eats scarce width. */
.show-notes { padding-inline: 0; }
.show:has(.show-notes) {
grid-template-areas: "date venue cta" "date city cta" "date notes cta" "date time cta";
}
/* Same relative scale as desktop, one step down for the narrow column:
venue still leads, time still sits below notes. */
.show-venue h3 { font-size: 16px; }
.show-city { font-size: 15px; }
.show-notes { font-size: 15px; }
.show-time { font-size: 14px; }
.show--booking { grid-template-columns: 1fr auto; grid-template-areas: "venue cta"; }
.hero-scroll { display: none; }
}
/* Six nav links plus a CTA stop fitting well before 720px — the logo and the
button both start wrapping around 850px. Hand over to the mobile menu there. */
@media (max-width: 900px) {
.nav-links, .nav-cta { display: none; }
.menu-btn { display: flex; }
.mobile-panel { display: flex; }
}
@media (max-width: 720px) {
/* Portrait crop of the square source: favor the subject over the sign */
.hero-media img { object-position: 58% center; }
.hero-content { margin-left: 24px; margin-right: 24px; width: auto; }
.merch-grid { grid-template-columns: 1fr; }
.merch-grid-row2 { flex-direction: column; }
.merch-grid-row2 .merch-card { flex-basis: auto; }
.gallery-grid { grid-template-columns: 1fr; }
.track { grid-template-columns: 40px 1fr; }
.track-meta { display: none; }
.credit { grid-template-columns: 1fr; gap: 4px; }
.footer-cols { gap: 32px; width: 100%; }
.bio-stats { grid-template-columns: 1fr; }
}
/* ============================================================
SUBPAGE SUPPORT
Pages without a full-bleed dark hero (/bio/) need the nav to be
legible from the top, not only once scrolled.
============================================================ */
/* Page header for subpages — sits below the fixed nav */
.page-head {
padding: calc(var(--nav-h) + 72px) 0 0;
background: var(--bg);
}
/* Shares its column width with .bio-scene and .prose below (see those rules)
so the headline/lead, image, and body copy all line up on the same edges
instead of three independently-centered widths. */
.page-head .wrap {
max-width: 680px;
}
/* The section right after the page header (image + prose) had the generic
.section clamp(96px,13vw,150px) top padding on top of the page-head's own
clearance — nearly 150px of dead air before the image. Tightened here
instead of touching .section generally (used all over the site). */
.page-head + .section {
padding-top: 40px;
}
.page-head h1 {
/* The bio page's main title — moved to Strippy with the other main titles
2026-07-30 (matches .section-title's treatment: Strippy reads as a heavy
condensed caps face, so weight/leading/tracking/case all follow suit
rather than carrying over the Jost-tuned values). */
font-family: var(--font-title);
font-size: clamp(38px, 6vw, 64px);
font-weight: 400;
line-height: 0.96;
letter-spacing: 0.005em;
text-transform: uppercase;
margin: 12px 0 20px;
}
.page-head .page-lead {
font-size: clamp(17px, 2vw, 20px);
line-height: 1.65;
color: var(--muted);
max-width: 62ch;
}
.page-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 40px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.page-back:hover {
color: var(--accent-text);
gap: 12px;
}
/* Long-form prose column — centered on the page (margin: auto), not flush
left, since there's no second column left to balance it against the
wrap's full 1200px width; text itself stays left-aligned for readability,
only the block is centered. Shares its 680px width with .page-head .wrap
and .bio-scene above so the headline, image, and body copy all share the
same left/right edges (was 68ch — read narrower than the other two and
didn't line up). */
.prose {
max-width: 680px;
margin: 0 auto;
}
.prose p {
font-size: 17px;
line-height: 1.75;
color: var(--fg);
margin-bottom: 26px;
}
.prose p:last-child {
margin-bottom: 0;
}
/* Mid-page section breaks inside the bio prose ("The Name Drop..", "But
Seriously") reuse the site's normal .section-label eyebrow rather than
the full .page-head component — .page-head carries ~144px of top padding
meant for the very top of the page, which was stacking on top of the
generic .section padding and reading as a huge dead gap wherever it got
reused mid-page. The first label right after .bio-scene needs no extra
push (the image's own 48px bottom margin already does that job); only
later ones need a break from the paragraph above.
`.prose .section-label` restates size/color/margin-bottom because
`.prose p` (class+element, higher specificity than plain `.section-label`)
was winning and rendering these at 17px ink instead of 11px muted-gray —
same specificity trap as the .cta-card p / .form-note bug fixed earlier. */
.prose .section-label {
font-size: 11px;
color: var(--muted);
margin-bottom: 20px;
}
.prose .section-label:not(:first-child) {
margin-top: 22px;
}
.prose strong {
font-weight: 600;
}
/* The studio scene photo — full width, native aspect, no crop (see the HTML
comment: the image's own painted edge is part of its art direction, so
object-fit:cover would clip into it). Same 680px column as .page-head
.wrap and .prose (was 860px — wider than both, so its edges didn't line
up with the headline above or the body copy below). No radius, no
shadow — the Flat Rule, and the image already carries its own irregular
edge treatment. */
.bio-scene {
max-width: 680px;
margin: 0 auto 48px;
}
.bio-scene img {
width: 100%;
height: auto;
display: block;
}
.bio-page-grid {
display: block;
}
/* Keep the wordmark and CTA on one line at every width */
.logo, .nav-cta { white-space: nowrap; }
/* ============================================================
SOCIAL ROW
Named links rather than bare icons — an icon alone makes people
guess, and these carry different handles per platform anyway.
============================================================ */
.social-row {
margin-top: clamp(40px, 6vw, 64px);
}
.social-row-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}
.social-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.social-link {
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
padding: 0 20px;
background: var(--bg);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.social-link:hover {
border-color: var(--fg);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.social-link svg {
width: 22px;
height: 22px;
flex: none;
fill: currentColor;
}
.social-link-text {
display: grid;
gap: 1px;
min-width: 0;
}
.social-link-text strong {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.social-link-text span {
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 900px) {
.social-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.social-links { grid-template-columns: 1fr; }
}
/* ============================================================
LIVE VIDEO BAND
Full-bleed muted loop above the tour list (Revivalists pattern).
The video is decoration: it autoplays only while on screen, never
plays audio, and reduced-motion visitors get the poster frame.
============================================================ */
.live-band {
position: relative;
min-height: 72vh;
display: grid;
align-items: end;
overflow: hidden;
background: #101010; /* literal: sits behind video, must stay dark in any theme */
color: #ffffff;
isolation: isolate;
}
.live-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Crop anchored high rather than centred: the band's heads sit in the upper
half of frame, so a centred crop trims them. 30% keeps the top of the
picture and sacrifices floor/monitors instead, which carry nothing. */
object-position: 50% 30%;
z-index: 0;
}
.live-scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top,
color-mix(in srgb, #000000 78%, transparent) 0%,
color-mix(in srgb, #000000 30%, transparent) 40%,
color-mix(in srgb, #000000 12%, transparent) 100%);
}
.live-content {
position: relative;
z-index: 2;
padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.live-content .section-label {
color: color-mix(in srgb, #ffffff 65%, transparent);
}
.live-content .section-title {
color: #ffffff;
}
.live-content .section-lead {
color: color-mix(in srgb, #ffffff 78%, transparent);
}
/* The tour list follows directly — pull it tight against the band
so the two read as one zone. */
.live-band + .tour {
padding-top: clamp(40px, 6vw, 64px);
}
/* Narrow screens: a 72vh band on a phone is taller than it is wide, so a 16:9
clip under object-fit:cover loses ~64% of its width to side-cropping. Tying
the height to the viewport width instead fixes the band at 1:0.64 (≈1.56:1),
which keeps ~88% of the frame's width visible at every width below 900px and
never crops vertically at all. Padding tightens to match the shorter band;
min-height (not height) means the band still grows if the copy needs it. */
@media (max-width: 900px) {
.live-band { min-height: 64vw; }
.live-content {
padding: clamp(32px, 6vw, 56px) 0 clamp(28px, 5vw, 48px);
}
}
/* ============================================================
IN-PAGE PLAYER + VISUALIZER STAGE
The track row expands (grid-rows accordion) into a dark stage
where the spectrum terrain renders. Row layout gains a fourth
area: the stage spans the full row width.
============================================================ */
.track {
grid-template-columns: 48px 1fr auto;
grid-template-areas: "play info meta" "stage stage stage";
cursor: default;
}
.track-play { grid-area: play; }
.track-info { grid-area: info; }
.track-meta { grid-area: meta; }
.track-meta a {
font-size: 13px;
font-weight: 600;
color: var(--muted);
transition: color 0.2s var(--ease);
}
.track-meta a:hover { color: var(--accent-text); }
button.track-play {
width: 48px;
height: 48px;
border-radius: 50%;
border: var(--border-w) solid var(--border);
display: grid;
place-items: center;
background: var(--surface);
color: var(--fg);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
button.track-play:hover { border-color: var(--fg); }
button.track-play svg { width: 18px; height: 18px; }
.track-play .ic-pause { display: none; }
.track.is-playing .track-play .ic-play { display: none; }
.track.is-playing .track-play .ic-pause { display: block; }
.track.is-playing button.track-play {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
}
/* Accordion: rows animate 0fr -> 1fr; inner wrapper clips */
.track-stage {
grid-area: stage;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.55s var(--ease);
}
.track.is-open .track-stage { grid-template-rows: 1fr; }
.track-stage-inner {
overflow: hidden;
min-height: 0;
}
.track.is-open .track-stage-inner {
margin: 6px 0 2px;
}
/* The visualizer floats on the page itself — no box, no dark stage.
The canvas is created by player.js, attached to the active row, and
bleeds upward so the ink dances above the list. pointer-events: none
keeps every link and button under it clickable. */
.track { position: relative; }
.track-viz {
position: absolute;
left: 22%;
top: -400px;
/* Explicit width/height, not left+right insets: canvas is a REPLACED
element, so opposing insets don't size it — it would fall back to its
buffer attribute, and the render loop's buffer-follows-layout resize
then feeds back and doubles forever. Explicit CSS dimensions break
that loop. */
width: 80%;
height: calc(100% + 408px);
z-index: 4;
pointer-events: none;
}
@media (max-width: 720px) {
.track-viz { left: 0; width: 100%; top: -280px; height: calc(100% + 288px); }
}
.track-transport {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 2px 4px;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--muted);
}
.seek {
flex: 1;
appearance: none;
-webkit-appearance: none;
height: 3px;
border-radius: 2px;
background: var(--border);
cursor: pointer;
}
.seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
border: none;
}
.seek::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
border: none;
}