/* styles.css: every style of the page (index.html), loaded with the release (?v=SKY_V, written into index.html by
   stamp-site.js) so a browser caches it for a year and a new release is a new URL. Before 2026-10-04 this sat inline
   in index.html; it moved out when every address became its own prerendered page (prerender.js), so some 5,000 pages
   share one cached copy instead of carrying 66 KB each. */
/* Stage light & tour print. A compressed industrial grotesk (Big Shoulders) for every set word: the masthead, a venue,
   the labels, the buttons, lettered like a tour poster or a road case. Archivo for reading, Plex Mono for numbers.
   Big Shoulders' optical size axis keeps the small labels sturdy. */
:root {
  --paper-dim: #aeaaa3; --hair: color-mix(in srgb, var(--brass) 34%, transparent);
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* the old names, kept so any rule still written with them sets the new faces */
  --serif: var(--sans); --caps: var(--display);
  --panel-w: clamp(340px, 30vw, 372px); --ribbon-h: 96px; --foot-h: 18px; --gutter: 260px;
}
/* --ink, --ink-2, --paper, --brass, --accent, --accent-2 and --second are written onto <html> by
   Planisphere.applyTheme() (chart.js PALETTES), so the page and the canvas share one palette. --ink,
   --paper and --brass here are only the first paint, before the scripts run; the written values replace them */
:root { --ink: #0a090e; --paper: #f2f0ea; --brass: #b0a696; --accent: #ff9c2a; --panel: rgba(12, 10, 14, .84); }
html[data-band="dmb"] { --panel: rgba(12, 10, 14, .84); }
html[data-band="gd"]  { --panel: rgba(12, 7, 20, .84); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ink); color: var(--paper); font: 400 15.5px/1.5 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
/* the sheet and its pattern (patterns.js, painted once by app.js paintBackdrop): flat psychedelia round the dial, never
   per frame. A night dims it as a house dims for the band; the house lights come partway up between sets, and up
   again when the night is over. A year's long exposure lowers it a little. */
canvas#pattern { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transform-origin: 0 0; transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1); }
html[data-mode="show"] canvas#pattern { opacity: .4; }
html[data-mode="show"][data-house="up"] canvas#pattern { opacity: .78; transition-duration: .8s; }
html[data-mode="show"][data-night="done"] canvas#pattern { opacity: .7; transition-duration: 2.6s; }
html[data-mode="year"] canvas#pattern { opacity: .72; }
/* over the pattern, small type keeps a pool of the sheet's own dark under it (feathered, no colour, composited once),
   so a tally, a fact or a year's tick never sits on a bright band */
header::before, #plate::before, footer::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--ink); filter: blur(26px); }
header::before { inset: -14px -46px -12px -40px; opacity: .72; }
#plate::before { inset: -26px -44px -20px -40px; opacity: .8; }
footer::before { inset: -16px -22px -16px; opacity: .82; }
canvas#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 42% 45%, transparent 48%, rgba(0,0,0,.5) 100%); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* a 2px accent ring set off by a hairline of the sheet's own ink, so it reads over the lights and over accent fills alike */
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
#bars .yr:focus-visible { outline-offset: 1px; box-shadow: none; }
::selection { background: var(--accent); color: var(--ink); }
input { caret-color: var(--accent); }
a { color: inherit; text-decoration-color: var(--hair); text-underline-offset: 3px; }
a:hover { color: var(--paper); text-decoration-color: var(--accent); }
.kicker { font: 700 12.5px/1.3 var(--display); letter-spacing: .2em; color: var(--brass); margin: 0 0 8px; text-transform: uppercase; text-wrap: balance; }
.num { font: 300 11px var(--mono); color: var(--paper-dim); white-space: nowrap; letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* masthead */
header { position: fixed; z-index: 1; top: 24px; left: 30px; width: calc(var(--gutter) - 10px); max-width: 300px; pointer-events: none; }
header > * { opacity: 0; animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
header .wordmark { animation-delay: .1s; }
/* the site's wordmark (site.js), small, stencilled on like a road-case lid, its pilot lamp lit in the band's first gel;
   the band's name is the headline */
.wordmark { font: 800 14px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--paper); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
  width: fit-content; padding: 4px 0; text-decoration: none; pointer-events: auto; }
.wordmark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; transition: transform .2s; }
.wordmark:hover { color: var(--paper); }
.wordmark:hover::before { transform: scale(1.35); }
header h1 { animation-delay: .25s; }
header .tally { animation-delay: .4s; }
header .howto { animation-delay: .55s; pointer-events: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
h1 { font: 800 66px/.84 var(--display); margin: 0; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0,0,0,.7); white-space: nowrap; }
.tally span { white-space: nowrap; }
.tally { font: 400 11.5px/1.5 var(--mono); color: var(--paper-dim); margin: 16px 0 14px; letter-spacing: .04em; text-transform: uppercase; }
/* "how to read this sky": reopens the first-visit guide (tutorial.js); a round control like the play button */
.howto { display: inline-grid; place-items: center; vertical-align: middle; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 50%;
  font: 800 16px/1 var(--display); color: var(--paper-dim); }
.howto:hover { border-color: var(--accent); color: var(--accent); }

/* the legend and the night plate share the lower-left corner */
.corner { position: fixed; left: 30px; bottom: calc(var(--ribbon-h) + var(--foot-h) + 30px); width: calc(var(--gutter) - 10px); max-width: 290px; }
#legend .kicker { margin-bottom: 12px; }
#mag { list-style: none; margin: 0 0 18px; padding: 0; display: flex; align-items: flex-end; gap: 16px; }
#mag li { display: grid; justify-items: center; gap: 8px; }
#mag span { font: 400 11.5px var(--mono); color: var(--paper-dim); }
/* the key draws the lamps as the chart does: a hot disc, its bloom, and the brightest with its lens ring */
#mag i { display: block; border-radius: 50%; background: radial-gradient(circle, #fff 0 9%, var(--paper) 10% 17%, rgba(255, 214, 160, .32) 20%, rgba(255, 214, 160, .07) 38%, transparent 62%); }
#mag i.m0 { width: 30px; height: 30px; background: radial-gradient(circle, #fff 0 9%, var(--paper) 10% 17%, rgba(255, 214, 160, .32) 20%, rgba(255, 214, 160, .07) 34%, rgba(255, 214, 160, .45) 35% 37%, transparent 38%); }
#mag i.m1 { width: 22px; height: 22px; }
#mag i.m2 { width: 12px; height: 12px; background: radial-gradient(circle, var(--paper) 0 20%, rgba(255, 214, 160, .28) 26%, transparent 70%); }
#mag i.m3 { width: 6px; height: 6px; background: radial-gradient(circle, var(--paper) 0 26%, transparent 70%); }
.era { display: flex; align-items: center; gap: 8px; }
.era b { display: flex; gap: 5px; }
.era b i { width: 5px; height: 5px; border-radius: 50%; }

#plate { pointer-events: auto; }
#plate[hidden], #legend[hidden] { display: none; }
#plate .kicker { color: var(--brass); transition: color .4s; }
#plate[data-tone="accent"] .kicker { color: var(--accent); }
#plate[data-tone="second"] .kicker { color: var(--second); }
#plate[data-tone="accent2"] .kicker { color: var(--accent-2); }
#plate-title { font: 800 46px/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 12px; text-wrap: balance; animation: settle .7s cubic-bezier(.2, .7, .2, 1); text-shadow: 0 2px 30px rgba(0,0,0,.9); }
#plate-title.long { font-size: 38px; }
#plate[data-phase="song"] #plate-title { min-height: 1.8em; display: flex; align-items: flex-end; }
@keyframes settle { from { opacity: 0; filter: blur(3px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }
#plate-sub { margin: 0; color: var(--paper-dim); line-height: 1.5; }
/* a song's moment: its movement and place in the kicker, its name, and one true thing about it, held to two lines so
   the caption does not jump from song to song. A rarity's name takes its movement's gel and arrives with a flare. */
#plate .kicker .of { font: 400 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--paper-dim); margin-left: .9em; text-transform: none; }
#plate[data-phase="song"] .kicker, #plate[data-phase="break"] .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plate[data-phase="song"] #plate-sub, #plate[data-phase="break"] #plate-sub { min-height: 3em; text-wrap: pretty; }
#plate[data-phase="song"] #plate-title { animation-duration: .42s; }
#plate-sub b { color: var(--paper); font-weight: 500; }
#plate-sub svg.mark { width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; }
#plate[data-rare="1"] #plate-sub { color: var(--paper); }
#plate[data-rare="1"] #plate-title { animation: flare .95s cubic-bezier(.16, 1, .3, 1); }
#plate[data-rare="1"][data-tone="accent"] #plate-title, #plate[data-phase="break"][data-tone="accent"] #plate-title { color: var(--accent); }
#plate[data-rare="1"][data-tone="second"] #plate-title, #plate[data-phase="break"][data-tone="second"] #plate-title { color: var(--second); }
#plate[data-rare="1"][data-tone="accent2"] #plate-title, #plate[data-phase="break"][data-tone="accent2"] #plate-title { color: var(--accent-2); }
#plate[data-phase="break"] .kicker { color: var(--brass); }
@keyframes flare { from { opacity: 0; letter-spacing: .07em; filter: blur(5px); } 40% { opacity: 1; } to { opacity: 1; letter-spacing: -.005em; filter: none; } }
#plate-sub .num { font-size: 12px; color: var(--paper); }
/* a year's long exposure: "60 nights, 12 debuts", the debuts in the accent like their marks on the chart,
   and under it the night of the moment ticking past, always on one line */
#plate-title .new { color: var(--accent); }
#plate[data-phase="year"] .kicker, #plate[data-phase="year"] #plate-sub, #plate[data-phase="mine"] .kicker, #plate[data-phase="mine"] #plate-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plate[data-phase="year"] #plate-sub, #plate[data-phase="mine"] #plate-sub { font-size: 15px; }
#plate .when { font: 700 13.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-right: .2em; }

/* almanac panel */
/* the results list overlays the card in the panel's second row, so it can never run past the panel */
.sheet-handle { display: none; }
aside { position: fixed; top: 22px; right: 22px; bottom: calc(var(--ribbon-h) + var(--foot-h) + 22px); width: var(--panel-w); display: grid; grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair); }
/* Search first: the way in on every page. A field that reads as the page's main control (a full paper hairline, the
   label in near-full paper, a drawn glass), and on focus the whole field takes the accent at once: border, glass and a
   faint wash. In the panel it is the first row; on home it is the heart of the page. */
.search { display: contents; }
.field { grid-area: 1 / 1; position: relative; display: block; margin: 14px 14px 12px; }
.field input { display: block; width: 100%; height: 54px; margin: 0; padding: 0 10px 0 44px; border-radius: 0; -webkit-appearance: none; appearance: none;
  background: rgba(0, 0, 0, .38); border: 1px solid color-mix(in srgb, var(--paper) 52%, transparent); color: var(--paper); font: 500 16px var(--sans);
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
.field input::placeholder { color: color-mix(in srgb, var(--paper) 84%, transparent); opacity: 1; }
.field input:hover { border-color: var(--paper); }
.field input:focus, .field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 9%, rgba(0, 0, 0, .5)); }
.field input:focus::placeholder { color: var(--paper-dim); }
.field input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.4); cursor: pointer; }
.field input:placeholder-shown::-webkit-search-cancel-button { display: none; } /* empty: the label gets the whole width */
.glass { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--paper); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; transition: stroke .15s; }
.field:focus-within .glass { stroke: var(--accent); }
.results { grid-area: 2 / 1; align-self: start; position: relative; z-index: 5; margin: -12px 14px 0; padding: 6px 0; list-style: none; background: var(--ink); border: 1px solid var(--accent); border-top: 0; display: none; max-height: min(60vh, 100%); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.results.open { display: block; }
.results .hit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 16px; cursor: pointer; }
.results .hit em { display: block; font-size: 13px; font-style: normal; color: var(--paper-dim); }
.results .hit:hover, .results .hit[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* the band a result belongs to: its short name, set like the trail */
.results .tag { font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin-right: 8px; }
/* once the arrow keys have moved into the list, the active option takes the focus ring (the box keeps the real focus) */
.search:has(input[aria-activedescendant]) .hit[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.results small { font: 300 11px var(--mono); color: var(--paper-dim); white-space: nowrap; }
.results .none { padding: 8px 16px; color: var(--paper-dim); }
#card { grid-area: 2 / 1; overflow-y: auto; padding: 0 22px 24px; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
/* the trail: where you are and the way back out, pinned to the top of the card while it scrolls */
#card { --pt: 22px; --px: 22px; }
#card > :first-child:not(.trail) { margin-top: var(--pt); }
.trail { position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--px) * -1) 18px; padding: 10px var(--px);
  display: flex; align-items: center; gap: 12px; background: var(--ink); border-bottom: 1px solid var(--hair);
  font: 700 13px/1 var(--display); letter-spacing: .14em; color: var(--paper-dim); text-transform: uppercase; }
.trail ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.trail li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.trail li + li::before { content: "/"; color: var(--brass); font: 300 13px/1 var(--mono); letter-spacing: 0; }
.trail li:last-child { overflow: hidden; }
.trail li { flex: 0 0 auto; } .trail li:last-child { overflow: visible; } .trail li.title { flex: 0 1 auto; overflow: hidden; } /* the band name gives way first, then a long song title; the year and date stay whole */
.trail li:first-child { min-width: 0; flex: 0 100 auto; overflow: hidden; }
.trail li:first-child button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trail .short, .trail.tight .full { display: none; }
.trail.tight .short { display: inline; }
.trail button { text-transform: uppercase; letter-spacing: inherit; color: var(--paper); padding: 6px 0; text-decoration: underline 1px var(--hair); text-underline-offset: 4px; }
.trail button:hover { color: var(--accent); text-decoration-color: var(--accent); }
.trail [aria-current] { color: var(--accent); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.trail .up { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; display: grid; place-items: center;
  font: 500 15px/1 var(--sans); letter-spacing: 0; text-decoration: none; color: var(--paper); }
.trail .up:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }
@media (pointer: coarse) { .trail .up { width: 40px; height: 40px; } .trail button:not(.up) { padding: 12px 0; } }
#card h2 { font: 800 40px/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 12px; text-wrap: balance; }
#card h3 { font: 700 13px/1 var(--display); letter-spacing: .2em; color: var(--brass); margin: 30px 0 10px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; }
#card h3::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
#card p { margin: 0 0 10px; color: var(--paper-dim); text-wrap: pretty; }
#card p b, #card li b { color: var(--paper); font-weight: 500; }
#card p i { font-style: normal; color: var(--paper); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 14px; }
.stats dt { font: 700 11.5px/1.2 var(--display); letter-spacing: .14em; color: var(--paper-dim); text-transform: uppercase; }
.stats dd { margin: 4px 0 0; font: 400 19px/1 var(--mono); color: var(--paper); }
.rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
.rows li { border-bottom: 1px solid color-mix(in srgb, var(--brass) 16%, transparent); transition: opacity .5s; }
.rows button { display: flex; width: 100%; gap: 10px; align-items: baseline; text-align: left; padding: 7px 0; }
.rows button:hover .name { color: var(--accent); }
.rows .name { flex: 1; min-width: 0; }
.rows .sub { display: block; font-size: 13px; color: var(--paper-dim); }
.rows .then { font: 400 11px var(--mono); color: var(--brass); padding: 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.rows.numbered li[data-k] { counter-increment: row; }
.rows.numbered button::before { content: counter(row, decimal-leading-zero); font: 300 11px var(--mono); color: var(--paper-dim); width: 18px; flex: none; }
.rows li.movement { font: 700 12.5px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); padding: 18px 0 8px; border-bottom: 1px solid var(--hair); }
.rows li.movement:first-child { padding-top: 4px; }
.rows li.movement[data-tone="second"] { color: var(--second); }
.rows li.movement[data-tone="accent2"] { color: var(--accent-2); }
.rows li.unlit { opacity: .38; }
.rows li.now .name { color: var(--accent); }
.rows li.now button::before { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.actions button, a.listen { font: 700 14px/1 var(--display); letter-spacing: .12em; padding: 10px 13px; border: 1px solid var(--hair); color: var(--paper); text-transform: uppercase; text-decoration: none; }
.actions button.primary { border-color: var(--accent); color: var(--accent); }
.actions button:active, a.listen:active, #play:active { transform: translateY(1px); }
.actions button:hover, .actions button.primary:hover, a.listen:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* waiting on the plate: still focusable, visibly not ready */
.actions button[aria-disabled="true"], .actions button[aria-disabled="true"]:hover { background: none; border-color: var(--hair); color: var(--paper-dim); cursor: progress; transform: none; }
.actions.travel { margin-top: 22px; }
/* a night's rarities: a run-in line under the venue, a note under each rare song, and the chart's mark drawn small
   beside them (the same rings and ticks, chart.js drawRarities), so the setlist is the key to the marks */
#card p.rare, #card p.story { margin: 2px 0 14px; line-height: 1.45; }
#card p.story b { font-weight: 500; color: var(--paper); }
.rare .run, .story .run { display: block; margin-bottom: 4px; }
.rare .run, .story .run { font: 700 12.5px/1 var(--display); letter-spacing: .18em; color: var(--brass); text-transform: uppercase; margin-right: .4em; white-space: nowrap; }
svg.mark { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; fill: none; stroke: var(--paper); stroke-width: 1; overflow: visible; }
.rows .sub.note { color: var(--paper-dim); }
/* a song's marks, on its own line after the name: a glyph per kind (debut, liberation or bust-out with the shows since,
   last time played) and a guest's name, dim; the key under the setlist names only the kinds this night has */
.rows .marks { flex: 0 1 auto; min-width: 0; max-width: 60%; display: inline-flex; gap: 9px; align-items: baseline; justify-content: flex-end; white-space: nowrap; overflow: hidden; }
.m { font-style: normal; font-size: 13px; line-height: 1; color: var(--accent); flex: none; }
.m.bust { color: var(--accent-2, var(--accent)); }
.m.last { color: var(--brass); }
.m.guest { color: var(--paper); display: inline-flex; align-items: baseline; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.m small { font: 400 10.5px var(--mono); color: var(--paper-dim); margin-left: 3px; }
.m.guest span { font: 400 12.5px var(--sans); color: var(--paper-dim); margin-left: 4px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.marks-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: 12px; color: var(--paper-dim); }
.marks-key .m { margin-right: 5px; }
.rows .sub.note svg.mark { width: 14px; height: 14px; vertical-align: -2px; opacity: .9; }
.listen-slot:empty { display: none; }
.listen-slot { margin: 14px 0 0; }
/* the night's one action, pinned to the foot of the panel column while the setlist scrolls under it */
/* in the DOM it follows the night's name, so the keyboard reaches it at once; flex order sets it at the foot */
#card.has-cta { display: flex; flex-direction: column; padding-bottom: 0; scroll-padding: 60px 0 96px; }
#card.has-cta > * { flex: none; }
#card.has-cta > :not(.trail):not(.night-head):not(.cta) { order: 1; }
#card.has-cta > :first-child:not(.trail) { margin-top: var(--pt); }
.cta { order: 2; position: sticky; bottom: 0; z-index: 2; margin: auto calc(var(--px) * -1) 0; padding: 12px var(--px) 14px; background: var(--ink); border-top: 1px solid var(--hair); }
.night-body { padding-bottom: 18px; }
.cta button { display: block; width: 100%; padding: 15px 16px; font: 800 17px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); border: 1px solid var(--accent); color: var(--ink); }
.cta button:hover { background: var(--paper); border-color: var(--paper); }
.cta button:active { transform: translateY(1px); }
.cta button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
#card p.firstlast { line-height: 1.55; margin: 6px 0 16px; }
.stats.one { grid-template-columns: 1fr; }
@media (max-width: 860px) { .cta { padding: 8px var(--px) 10px; } .cta button { padding: 12px 14px; font-size: 15px; } }
/* listening: the link in the actions' style, what it holds beside it */
.listen-row { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
a.listen { flex: none; }
#card .listen-row p { margin: 0; font-size: 14px; line-height: 1.4; }
/* my nights. "I was there": a dial with a pilot lamp at its heart, between two hairlines under the venue; pressed,
   the lamp comes on in the first set's gel and a ring widens once, as an arriving song's does. A small lit lamp
   marks a night of yours wherever it is listed */
.was { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.was-mark { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 3px 2px; font: 700 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.was-mark:hover, .was-mark[aria-pressed="true"] { color: var(--accent); }
.was-mark:active .seal { transform: scale(.94); }
.seal { width: 28px; height: 28px; flex: none; overflow: visible; fill: none; stroke-width: 1; transition: transform .15s; }
.seal .ring { stroke: var(--brass); transition: stroke .3s; }
.seal .dial { stroke: var(--brass); stroke-width: 1.6; stroke-dasharray: .5 1.75; opacity: .55; }
.seal .tick { stroke: var(--brass); stroke-width: 1.4; }
.seal .star { stroke: var(--paper-dim); fill: rgba(0, 0, 0, 0); transition: fill .35s, stroke .35s; }
.seal .burst { stroke: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.was-mark:hover .seal .star { stroke: var(--accent); }
.was-mark[aria-pressed="true"] .seal .ring, .was-mark[aria-pressed="true"] .seal .tick { stroke: var(--accent); }
.was-mark[aria-pressed="true"] .seal .star { fill: var(--accent); stroke: var(--accent); }
.was-mark.lit .seal .burst { animation: burst 1.1s cubic-bezier(.16, .8, .3, 1); }
@keyframes burst { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
#card .was p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; }
#card .was p b { font: 400 13px var(--mono); }
button.inline { color: var(--paper); text-decoration: underline 1px var(--hair); text-underline-offset: 3px; }
button.inline:hover { color: var(--accent); text-decoration-color: var(--accent); }
svg.ministar { width: 11px; height: 11px; fill: var(--accent); vertical-align: -1px; margin-right: 6px; flex: none; overflow: visible; }
svg.ministar .o { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .7; }
.trail .trail-mine { flex: none; margin-left: auto; display: inline-flex; align-items: center; padding: 6px 0 6px 8px; font: 400 12px/1 var(--mono); letter-spacing: 0;
  text-transform: none; text-decoration: none; color: var(--paper); }
.trail .trail-mine svg.ministar { width: 12px; height: 12px; margin-right: 5px; }
.trail .trail-mine:hover { color: var(--accent); }
#card p.hint { font-size: 14px; line-height: 1.45; }
#card p.hint.warn { color: var(--paper); }
#card h3 + p.hint { margin-top: -2px; }
#card p.notice { margin: 4px 0 6px; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--paper); }
.rows li.mine-row { display: flex; align-items: center; }
.rows li.mine-row > button:first-child { flex: 1; min-width: 0; }
.rows .drop { flex: none; width: 30px; height: 30px; margin-left: 8px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--paper-dim); }
.rows .drop svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 1.3; fill: none; }
.rows .drop:hover { color: var(--accent); border-color: var(--hair); }
.rows li.dropped { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; font-size: 14px; color: var(--paper-dim); }
.rows button.inline { display: inline; width: auto; padding: 0; }
.stats.mine { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); }
.stats.mine dd { white-space: nowrap; }
.rows .num svg.ministar, .results small svg.ministar { width: 10px; height: 10px; }
#card .linkfield { width: 100%; margin: 4px 0 8px; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--paper); font: 400 12px var(--mono); padding: 8px 0; }
.spark { display: block; width: 100%; height: 54px; margin-top: 4px; }
.spark rect { fill: var(--accent); opacity: .85; }
.spark-ax { display: flex; justify-content: space-between; font: 300 11px var(--mono); color: var(--paper-dim); }
#card p.spark-note { margin: 8px 0 0; font-size: 14px; }
#card p.credit { margin: 30px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.5; }
/* the site footer: the tiniest line at the bottom edge, under the year ribbon and clear of the panel's pinned action;
   it stays out of the way of everything and is still a link and a button (the hit areas grow on touch) */
#sitefoot { position: fixed; z-index: 2; right: 22px; bottom: max(3px, calc(env(safe-area-inset-bottom) - 10px)); margin: 0; font: 400 11px/14px var(--sans); letter-spacing: .02em;
  color: var(--paper-dim); text-shadow: 0 1px 6px var(--ink), 0 0 2px var(--ink); white-space: nowrap; }
#sitefoot a, #sitefoot button.inline, .home-foot button.inline { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: underline 1px var(--hair); text-underline-offset: 3px; }
#sitefoot a:hover, #sitefoot button.inline:hover, .home-foot button.inline:hover { color: var(--paper); text-decoration-color: var(--paper); }
#sitefoot button.inline, .home-foot button.inline { background: none; border: 0; padding: 0; cursor: pointer; }
html[data-mode="home"] #sitefoot { display: none; }

/* the cookie line (analytics.js): one line under the panel, never over it; while it asks, the panel's foot moves up */
#consent { position: fixed; z-index: 3; right: 22px; bottom: calc(var(--ribbon-h) + var(--foot-h) + 22px); width: var(--panel-w); padding: 8px 14px;
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair);
  font: 400 13px/1.4 var(--sans); color: var(--paper-dim); }
#consent[hidden] { display: none; }
#consent p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 13px; }
#consent p > span:first-child { margin-right: 2px; }
#consent button, #consent a { font: 700 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); padding: 5px 0;
  text-decoration: underline 1px var(--hair); text-underline-offset: 4px; }
#consent a { color: var(--paper-dim); }
#consent button:hover, #consent a:hover, #consent button[aria-pressed="true"] { color: var(--accent); text-decoration-color: var(--accent); }
#consent [aria-hidden] { display: none; } /* the dots between the choices; spacing does their work, so a wrap never strands one */
html[data-consent="ask"] aside { bottom: calc(var(--ribbon-h) + var(--foot-h) + 30px + var(--consent-h, 40px)); }

/* the first-visit guide (tutorial.js): a small panel like the almanac's; the sky shows through the backdrop */
dialog#guide { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--hair);
  background: var(--ink); color: var(--paper); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
dialog#guide::backdrop { background: rgba(0, 0, 0, .5); }
.dlg-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; font: 300 22px/1 var(--sans); color: var(--paper); z-index: 2;
  background: var(--ink); border: 1px solid var(--hair); border-radius: 50%; }
.dlg-close:hover { color: var(--accent); border-color: var(--accent); }
.guide-art { display: block; width: 100%; height: auto; aspect-ratio: 280 / 160; background: rgba(0, 0, 0, .35); border-bottom: 1px solid var(--hair); color: rgb(255, 222, 176); }
.guide-art .g-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.guide-art .g-pt { fill: var(--paper); }
.guide-art .g-halo { fill: url(#g-bloom); }
.guide-art .g-acc.g-pt { fill: var(--accent); }
.guide-art .g-acc.g-halo { fill: url(#g-bloom-acc); }
.guide-art .g-stop-acc { stop-color: var(--accent); }
.guide-art .g-lbl { font: 400 11px var(--mono); fill: var(--paper-dim); }
.guide-art .g-cap { font: 700 10.5px var(--display); letter-spacing: .2em; text-transform: uppercase; fill: var(--brass); }
.guide-art .g-acc-line { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* the one moment: the path or the night's line draws itself, then its arrowhead lands */
.guide-art.on .g-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-draw 1.5s cubic-bezier(.22, .8, .2, 1) .12s forwards; }
.guide-art.on .g-head { opacity: 0; animation: g-land .3s ease-out 1.4s forwards; }
@keyframes g-draw { to { stroke-dashoffset: 0; } }
@keyframes g-land { to { opacity: 1; } }
.guide-body { padding: 22px 26px 4px; }
#guide-title { font: 800 34px/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 10px; text-wrap: balance; }
#guide-text { margin: 0; min-height: 3.2em; color: var(--paper-dim); text-wrap: balance; }
.guide-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 26px 22px; }
.guide-foot .actions { margin: 0 0 0 auto; }
.guide-foot .dots { display: flex; gap: 7px; align-items: center; }
.guide-foot .dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--brass); }
#guide[data-step="1"] .dots i:nth-child(1), #guide[data-step="2"] .dots i:nth-child(2), #guide[data-step="3"] .dots i:nth-child(3) { background: var(--accent); border-color: var(--accent); }

/* year ribbon */
footer { position: fixed; left: 22px; right: 22px; bottom: calc(16px + var(--foot-h)); height: var(--ribbon-h); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; }
.dial { display: flex; align-items: flex-end; gap: 14px; padding-bottom: 4px; }
#play { width: 44px; height: 44px; border: 1px solid var(--brass); border-radius: 50%; display: grid; place-items: center; color: var(--paper); flex: none; }
#play::before { content: ""; width: 11px; height: 13px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#play.playing::before { width: 10px; height: 12px; margin: 0; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
#play:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
#play.replay::before { width: 17px; height: 17px; margin: 0; clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.3 8.7A5.3 5.3 0 1 1 11.2 4'/%3E%3Cpath d='M11.9 1.1v3.3H8.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.3 8.7A5.3 5.3 0 1 1 11.2 4'/%3E%3Cpath d='M11.9 1.1v3.3H8.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
#play.off { display: none; }
#year { font: 800 54px/.8 var(--display); min-width: 3.4ch; white-space: nowrap; letter-spacing: -.005em; }
#year small { display: block; font: 700 12px/1 var(--display); letter-spacing: .24em; color: var(--brass); margin-bottom: 9px; text-transform: uppercase; }
#allyears { font: 700 12px var(--display); letter-spacing: .18em; color: var(--paper-dim); border-bottom: 1px dotted var(--paper-dim); margin-bottom: 6px; text-transform: uppercase; white-space: nowrap; }
/* hidden, it still holds its width, so choosing a year never shifts the bars under a finger mid-tap */
#allyears:hover { color: var(--paper); border-bottom-color: var(--accent); }
#allyears[hidden] { display: block; visibility: hidden; height: 0; margin: 0; border: 0; overflow: hidden; }
/* a night's own ribbon (app.js buildNightline), in the years' place: the year's nights as a row of points with this one
   lit, then a tick per song, grouped by set (a fader each, like the years), lit in its movement's gel as it lands; the
   song of the moment full height, a rarity full height with a ring over it */
footer[data-night] #bars, footer[data-night] #allyears { display: none; }
#nightline { grid-column: 2; display: grid; grid-template-rows: 9px auto; row-gap: 9px; min-width: 0; margin-bottom: 0; }
#nightline[hidden] { display: none; }
.nl-year { display: flex; align-items: center; justify-content: space-between; height: 9px; cursor: pointer; }
.nl-year i { flex: 0 1 3px; height: 3px; border-radius: 50%; background: var(--paper-dim); opacity: .42; }
.nl-year i.on { flex: none; width: 7px; height: 7px; background: var(--accent); opacity: 1; }
.nl-year:hover i:not(.on) { opacity: .75; }
.nl-songs { display: flex; gap: 18px; min-width: 0; }
.nl-set { flex: 1 1 0; min-width: 56px; display: grid; } /* an encore of one song still has room for its name */
.nl-set[data-tone="accent"] { --tone: var(--accent); }
.nl-set[data-tone="second"] { --tone: var(--second); }
.nl-set[data-tone="accent2"] { --tone: var(--accent-2); }
.nl-ticks { display: flex; align-items: flex-end; gap: 2px; height: 50px; border-bottom: 1px solid var(--hair); }
.nl-tick { flex: 1; min-width: 0; height: 100%; position: relative; }
.nl-tick::before { content: ""; position: absolute; bottom: 0; left: 50%; width: min(40%, 8px); transform: translateX(-50%); height: 40%; background: var(--paper-dim); opacity: .32;
  transition: height .45s cubic-bezier(.16, 1, .3, 1), opacity .45s, background-color .45s, width .2s; }
.nl-tick.rare::before { height: 78%; }
.nl-tick.rare::after { content: ""; position: absolute; top: -1px; left: 50%; width: 6px; height: 6px; transform: translate(-50%, -100%); border: 1px solid var(--paper); border-radius: 50%; opacity: .7; }
.nl-tick.lit::before { background: var(--tone); opacity: .8; height: 56%; }
.nl-tick.lit.rare::before { height: 78%; }
.nl-tick.now::before { background: var(--tone); opacity: 1; height: 100%; width: min(72%, 12px); }
.nl-tick:hover::before { opacity: 1; }
.nl-tick:focus-visible { outline-offset: 1px; box-shadow: none; }
.nl-label { padding-top: 7px; font: 700 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
footer[data-night] #year { text-transform: uppercase; }
footer[data-night] #year small { color: var(--paper-dim); }
#bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; border-bottom: 1px solid var(--hair); touch-action: none; cursor: ew-resize; position: relative; margin-bottom: 18px; }
/* each year is a fader, its height the number of nights */
#bars::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -16px; } /* a grab area above the strokes and over the ticks */
#bars .yr { flex: 1; min-width: 0; height: 100%; position: relative; }
#bars .yr::before { content: ""; position: absolute; bottom: 0; left: 50%; width: min(38%, 9px); transform: translateX(-50%); height: calc(5% + var(--h) * 95%);
  background: var(--paper-dim); opacity: .42; transition: opacity .6s, background-color .6s, height .55s cubic-bezier(.2, .7, .2, 1); }
#bars .yr:hover::before { opacity: .85; }
#bars .yr.on::before { background: var(--accent); opacity: 1; width: min(60%, 12px); transition-duration: .15s, .15s, .55s; }
/* in your sky, the years you were there */
#bars .yr.mine::before { background: var(--accent); opacity: .9; }
/* while a year is being exposed, its stroke fills with light night by night (app.js sets --p) */
#bars .yr.on.building::before { background: linear-gradient(to top, var(--accent) calc(var(--p, 0) * 100%), color-mix(in srgb, var(--paper-dim) 50%, transparent) 0); }
#bars.intro .yr:not(.lit)::before { height: 0; opacity: 0; }
#bars.intro .yr.lit:not(.on)::before { background: var(--paper); opacity: .6; }
#bars .yr[data-tick]::after { content: attr(data-tick); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font: 300 11px var(--mono); color: var(--paper-dim); }

/* Home (/): one promise and the way in. The hero says what this is; the bands are big cards, each a live dial of its
   own sky (app.js paintPlanet) with its name, its nights and a clear "Find your night"; then how it works beside two real
   prints, and the bands on their way. The swirl (.home-layer, app.js paintHome) stays behind it all, dimmed, a dark
   sun kept round the headline. The page scrolls when it must (a phone); on a desktop the bands sit above the fold. */
#home { display: none; }
html[data-mode="home"] #home { display: block; position: fixed; inset: 0; overflow: hidden auto; overscroll-behavior: contain; }
html[data-mode="home"] main, html[data-mode="home"] aside, html[data-mode="home"] footer,
html[data-mode="home"] header > :not(.wordmark) { display: none; }
html[data-mode="home"] header { z-index: 4; }
html[data-mode="home"] header::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: -1; pointer-events: none; background: linear-gradient(var(--ink) 35%, transparent); }
.home-layer { position: fixed; inset: 0; pointer-events: none; }
.home-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; }
.home-scroll { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3.6vh, 40px);
  min-height: 100%; padding: clamp(64px, 8.5vh, 96px) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.home-hero { text-align: center; max-width: 720px; }
#home-title { font: 800 clamp(44px, 6vw, 84px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 18px; text-wrap: balance; white-space: normal; text-shadow: none; }
.home-lede { margin: 0 auto; max-width: 56ch; color: var(--paper); font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.5; text-wrap: pretty; }
.home-note { margin: 14px 0 0; color: var(--accent); font-size: 14px; }
.home-note[hidden] { display: none; }
/* the bands: a card each, side by side on a desktop, a row each (dial left) on a phone */
.bands { width: min(1040px, 100%); }
.planets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.planet { --d: 280px; display: flex; flex-direction: column; align-items: center; gap: 20px; height: 100%; padding: 28px 24px 26px; color: var(--paper); text-decoration: none;
  background: color-mix(in srgb, var(--ink) 84%, transparent); border: 1px solid var(--hair); transition: border-color .2s, transform .2s, background-color .2s; }
.planet .disc { display: block; width: var(--d); height: var(--d); border-radius: 50%; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--band) 0%, transparent); transition: box-shadow .25s; }
.planet .disc img, .planet canvas { display: block; width: 100%; height: 100%; border-radius: 50%; animation: turn 360s linear infinite; }
.planet .pl-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.planet .pl-name { font: 800 clamp(24px, 2.2vw, 32px)/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) { .planet .pl-name { white-space: normal; } }
.planet .pl-meta { font: 400 12.5px/1.3 var(--mono); color: var(--paper-dim); letter-spacing: .02em; margin-bottom: 10px; }
.planet .pl-meta:empty::before { content: "\00a0"; }
.planet .pl-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; font: 700 15.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--band); transition: background-color .2s, color .2s; }
.planet .pl-cta::after { content: "→"; font-family: var(--sans); letter-spacing: 0; transition: transform .2s; }
.planet:hover { border-color: var(--band); background: color-mix(in srgb, var(--ink) 92%, transparent); }
.planet:hover .disc, .planet:focus-visible .disc { box-shadow: 0 0 0 2px var(--band), 0 0 48px color-mix(in srgb, var(--band) 35%, transparent); }
.planet:hover .pl-cta, .planet:focus-visible .pl-cta { background: var(--paper); }
.planet:hover .pl-cta::after { transform: translateX(3px); }
.planet:focus-visible { outline: 2px solid var(--band); outline-offset: 4px; }
.planet[aria-busy="true"] { cursor: progress; }
.planet[aria-busy="true"] .pl-cta::before { content: "Opening"; }
.planet[aria-busy="true"] .pl-cta > span { display: none; }
/* how it works, beside two real prints (each a link to its night) */
.how { width: min(1040px, 100%); display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px 40px; align-items: center; padding: 30px 32px;
  background: color-mix(in srgb, var(--ink) 84%, transparent); border: 1px solid var(--hair); }
.how h2 { font: 700 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 18px; }
.how ol { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
.how li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; color: var(--paper-dim); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.how li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); border-radius: 50%; font: 400 14px/1 var(--mono); color: var(--accent); }
.how li b { color: var(--paper); font-weight: 600; }
.how-prints { position: relative; height: clamp(260px, 30vw, 340px); }
.how-print { position: absolute; top: 50%; width: clamp(170px, 19vw, 228px); aspect-ratio: 4 / 5; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.how-print img { display: block; width: 100%; height: 100%; }
.how-print.back { left: 8%; transform: translateY(-50%) rotate(-6deg); }
.how-print.front { right: 8%; transform: translateY(-46%) rotate(4deg); }
.how-print:hover, .how-print:focus-visible { z-index: 2; transform: translateY(-52%) rotate(0deg) scale(1.04); }
.how-print:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-soon { margin: -8px 0 0; text-align: center; font: 700 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.home-soon span { color: var(--accent); margin-right: 8px; }
.home-foot { margin: auto 0 0; padding: 6px 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--paper); background: color-mix(in srgb, var(--ink) 88%, transparent); } /* a tab of the sheet, so it reads over the brightest bands of the swirl */
html[data-mode="home"][data-consent="ask"] .home-scroll { padding-bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--consent-h, 36px) + 12px); }
@media (max-width: 700px) {
  .planets { grid-template-columns: 1fr; gap: 12px; }
  .planet { --d: 112px; flex-direction: row; align-items: center; gap: 18px; padding: 16px; }
  .planet .pl-body { align-items: flex-start; text-align: left; gap: 6px; }
  .planet .pl-name { font-size: 24px; }
  .planet .pl-songs { display: none; }
  .planet .pl-cta { min-height: 40px; padding: 0 14px; font-size: 13.5px; margin-top: 4px; }
  .how { grid-template-columns: 1fr; padding: 22px 18px; }
  .how-prints { height: 250px; }
  .how-print { width: 160px; }
  .how li { font-size: 15px; }
}

/* the Setprint dialog (poster.js): the plate on the left, one action on the right (an email and GET MY SETPRINT).
   Big Shoulders for what is set (the title, the label, the button), Archivo for what is read. The faces are the
   page's; poster.js also fetches them itself on first open (the plate needs them). */
dialog#keep { --k-display: var(--display, "Big Shoulders", "Arial Narrow", sans-serif); --k-sans: var(--sans, "Archivo", "Helvetica Neue", Arial, sans-serif);
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--hair); outline: 1px solid var(--hair); outline-offset: 4px;
  background: var(--ink); color: var(--paper); overflow: hidden; font: 400 15.5px/1.5 var(--k-sans); font-variant-numeric: tabular-nums; }
dialog#keep::backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: blur(3px); }
dialog#keep ::selection { background: var(--accent); color: var(--ink); }
dialog#keep input { caret-color: var(--accent); }
.keep { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr); max-height: calc(100dvh - 34px); }
.keep figure { margin: 0; padding: 28px; display: grid; place-items: center; background: rgba(0,0,0,.38); min-height: 0; position: relative; }
.keep figure img { display: block; max-width: 100%; max-height: calc(100dvh - 92px); width: auto; height: auto; box-shadow: 0 18px 60px rgba(0,0,0,.6); transition: opacity .3s; }
.keep figure.busy img { opacity: .35; }
.keep figure p { position: absolute; margin: 0; font: 700 13px/1 var(--k-display); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); display: none; }
.keep figure.busy p { display: block; }
.keep-side { min-height: 0; padding: 32px 28px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--hair); }
.keep-side h2 { font: 800 42px/.92 var(--k-display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 12px; text-wrap: balance; }
.keep-side p { margin: 0; color: var(--paper-dim); }
#keep-what { max-width: 30ch; }
.keep-gate { margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.keep-ask[hidden] { display: none; }
.keep-ask label { display: block; font: 700 12.5px/1 var(--k-display); letter-spacing: .2em; color: var(--brass); text-transform: uppercase; }
.keep-ask input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--paper-dim); color: var(--paper); font: 400 17px var(--k-sans); padding: 10px 0 9px; border-radius: 0; transition: border-color .15s; }
.keep-ask input::placeholder { color: var(--paper-dim); opacity: .7; }
.keep-ask input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.keep-ask input[aria-invalid="true"] { border-bottom-color: var(--accent); }
.keep-side .keep-gate-err { margin: 8px 0 0; font-size: 14px; color: var(--paper); }
.keep-gate-err:empty { display: none; }
/* the one action: set as the night card's sticky button (index.html .cta), solid in the band's first gel */
.keep-go { position: relative; display: block; width: 100%; padding: 16px; font: 800 18px/1 var(--k-display); letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); border: 1px solid var(--accent); color: var(--ink); transition: background-color .15s, border-color .15s, color .15s; }
.keep-go:hover { background: var(--paper); border-color: var(--paper); }
.keep-go:active { transform: translateY(1px); }
.keep-go:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.keep-go[aria-disabled="true"], .keep-go[aria-disabled="true"]:hover { background: none; border-color: var(--accent); color: var(--accent); cursor: progress; transform: none; }
.keep-side .keep-gate-promise { font-size: 13px; line-height: 1.45; }
.keep-side .keep-gate-dev { font: 400 11px var(--mono); color: var(--accent); }
.keep-side .keep-state { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--paper); }
.keep-state:empty { display: none; }
.keep-state a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.keep-state a:hover { color: var(--paper); }
.keep-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; font: 300 22px/1 var(--k-sans); color: var(--paper); z-index: 2; background: var(--ink); border: 1px solid var(--hair); border-radius: 50%; }
.keep-close:hover { color: var(--accent); border-color: var(--accent); }
/* ordering (switched off in poster.js; its panel is the template below the dialog) */
.keep-side fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.keep-side legend { font: 700 12.5px/1 var(--k-display); letter-spacing: .2em; color: var(--brass); text-transform: uppercase; padding: 0; margin-bottom: 9px; display: block; }
.seg { display: flex; }
.seg label { flex: 1; min-width: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; position: relative; height: 100%; text-align: center; padding: 10px 6px; border: 1px solid var(--hair); margin-left: -1px; font: 700 15px/1.1 var(--k-display); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.seg label:first-child span { margin-left: 0; }
.seg input:not(:checked) + span:hover { color: var(--paper); border-color: var(--brass); z-index: 1; }
.seg input:checked + span { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.seg input:focus-visible + span { z-index: 1; outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.keep-order { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.keep-side h3 { font: 700 12.5px/1 var(--k-display); letter-spacing: .2em; color: var(--brass); text-transform: uppercase; margin: 0 0 10px; }
.keep-side .keep-print-state { margin: 6px 0 0; font-size: 14px; color: var(--paper); }
.keep-print-state:empty { display: none; }
.keep-price { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px !important; }
.keep-price span { color: var(--paper); font-family: var(--mono); font-size: 13px; }
.keep-side .keep-order-what { font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
.keep-price { color: var(--paper-dim); font-size: 14px; margin-bottom: 12px !important; }
.keep-buy { width: 100%; min-height: 48px; padding: 14px 16px; font: 700 17px/1 var(--k-display); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: none; border: 1px solid var(--accent); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.keep-buy:hover { color: var(--ink); background: var(--accent); }
.keep-buy:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.keep-buy[aria-disabled="true"], .keep-buy[aria-disabled="true"]:hover { color: var(--accent); background: none; cursor: progress; }

/* a desktop too narrow for the column to tuck into the chart's corners (resize() in app.js sets data-fit):
   the masthead compacts, the caption keeps to a fixed two-line box at the foot, and the chart gives way */
html[data-fit="tight"] h1 { font-size: 44px; }
html[data-fit="tight"] .tally { display: none; }

html[data-fit="tight"] #plate { height: 5.9em; display: flex; flex-direction: column; justify-content: flex-end; }
html[data-fit="tight"] #plate-title, html[data-fit="tight"] #plate-title.long { font-size: 32px; line-height: .92; margin: 0; min-height: 0 !important; overflow: hidden;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
html[data-fit="tight"] #plate-sub, html[data-fit="tight"] #plate-actions { display: none; }

@media (max-width: 860px) and (min-height: 501px), (max-width: 860px) and (orientation: portrait) {
  :root { --ribbon-h: 70px; }
  header { top: 10px; left: 16px; right: 16px; width: auto; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  header .wordmark { grid-column: 1; grid-row: 1; margin: 0 0 4px; font-size: 11.5px; letter-spacing: .3em; gap: 8px; padding: 6px 0; }
  .wordmark::before { width: 7px; height: 7px; }
  h1 { grid-column: 1 / -1; grid-row: 2; font-size: 34px; line-height: .9; min-width: 0; white-space: nowrap; }
  header .howto { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; width: 30px; height: 30px; font-size: 15px; }
  /* the cookie line, compact: one line on a phone */
  #consent { left: 10px; right: 10px; width: auto; bottom: calc(var(--ribbon-h) + var(--foot-h) + 18px); padding: 5px 12px; font-size: 13px; }
  #consent p { gap: 0 12px; }
  #consent button, #consent a { font-size: 12.5px; padding: 4px 0; }
  html[data-consent="ask"] aside { bottom: calc(var(--ribbon-h) + var(--foot-h) + 24px + var(--consent-h, 34px)); }
  #guide-title { font-size: 30px; }
  .guide-body { padding: 16px 20px 2px; }
  .guide-foot { padding: 12px 20px 18px; }
  .tally { display: none; }
  .corner { left: 16px; right: 16px; width: auto; max-width: none; }
  #legend { display: none; }
  /* a night or a year: its caption takes the band name's place under the wordmark, which stays, the way home */
  /* the caption takes the masthead here: the band name keeps its space and stays the page heading for a screen reader
     (transparent, not visibility: hidden, which would drop the only h1 from the accessibility tree) */
  html[data-mode="show"] header h1, html[data-mode="year"] header h1, html[data-mode="mine"] header h1 { color: transparent; text-shadow: none; pointer-events: none; user-select: none; }
  #plate { top: 36px; bottom: auto; right: 16px; height: 3.4em; display: flex; flex-direction: column; justify-content: flex-end; }
  #plate .kicker { font-size: 11.5px; margin-bottom: 6px; }
  #plate-title, #plate-title.long { font-size: 27px; line-height: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; display: block !important; }
  #plate-sub, #plate-actions { display: none; }
  aside { top: min(calc(100vw + 60px), 60dvh); left: 10px; right: 10px; width: auto; bottom: calc(var(--ribbon-h) + var(--foot-h) + 18px); }
  /* a night: the setlist and its one action need the room more than the years do, so the ribbon steps aside (the trail
     has the year) and the chart gives a little; the panel runs to the foot */
  html[data-mode="show"] footer { top: calc(min(calc(100vw - 50px), 42dvh) - 6px); bottom: auto; height: 30px; gap: 10px; align-items: center; }
  html[data-mode="show"] footer::before { inset: -8px -12px; }
  html[data-mode="show"] .dial { padding: 0; }
  html[data-mode="show"] #play { width: 30px; height: 30px; }
  html[data-mode="show"] #play::before { transform: scale(.85); }
  html[data-mode="show"] #year { display: none; }
  html[data-mode="show"] #nightline { grid-template-rows: 4px auto; row-gap: 5px; }
  html[data-mode="show"] .nl-year i { height: 2px; }
  html[data-mode="show"] .nl-year i.on { width: 5px; height: 5px; }
  html[data-mode="show"] .nl-songs { gap: 7px; }
  html[data-mode="show"] .nl-ticks { height: 22px; gap: 1px; }
  html[data-mode="show"] .nl-label { display: none; }
  html[data-mode="show"] .nl-set { min-width: 0; }
  html[data-mode="show"] .nl-tick.rare::after { width: 4px; height: 4px; }
  html[data-mode="show"] aside { top: calc(min(calc(100vw - 50px), 42dvh) + 32px); bottom: max(10px, env(safe-area-inset-bottom)); transition: top .38s cubic-bezier(.2, .7, .2, 1); }
  /* a night on a phone: no search (the band and year pages keep it; the trail goes back to them), and the panel is a
     sheet: scroll the setlist, or press the handle, and it slides up over the dial to show the whole set; scroll back to
     its top, or press again, and the dial returns. The dial is sized by the ribbon, not the sheet, so it never jumps. */
  html[data-mode="show"] aside .field, html[data-mode="show"] aside .results { display: none; }
  html[data-mode="show"][data-sheet="up"] aside { top: max(58px, calc(env(safe-area-inset-top) + 50px)); z-index: 6; background: var(--ink); }
  html[data-mode="show"] #plate { transition: opacity .25s; }
  html[data-mode="show"][data-sheet="up"] #plate { opacity: 0; pointer-events: none; }
  html[data-mode="show"] .sheet-handle { display: block; position: absolute; z-index: 3; top: -15px; left: 50%; width: 72px; height: 30px; transform: translateX(-50%); margin: 0; padding: 0;
    background: none; border: 0; cursor: pointer; }
  html[data-mode="show"] .sheet-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 5px; transform: translate(-50%, -50%); border-radius: 3px; background: var(--paper-dim); transition: background-color .2s; }
  html[data-mode="show"] .sheet-handle:hover::before, html[data-mode="show"] .sheet-handle:focus-visible::before { background: var(--accent); }
  html[data-mode="show"] .sheet-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  html[data-mode="show"] .trail { padding-top: 14px; padding-bottom: 6px; margin-bottom: 10px; }
  html[data-mode="show"] .cta { padding-top: 8px; padding-bottom: 10px; }
  html[data-mode="show"] .cta button { padding-top: 13px; padding-bottom: 13px; }
  /* and the night's head is set tighter, the listening link after the setlist, so the first songs show above the action */
  html[data-mode="show"] #card h2 { font-size: 28px; margin-bottom: 8px; }
  html[data-mode="show"] .night-head p { margin-bottom: 6px; }
  html[data-mode="show"] .night-body { display: flex; flex-direction: column; }
  html[data-mode="show"] .night-body > * { flex: none; }
  html[data-mode="show"] .night-body .listen-slot { order: 1; margin-top: 18px; }
  html[data-mode="show"] .night-body > .credit { order: 2; }
  html[data-mode="show"] #card p.rare { margin-bottom: 4px; }
  html[data-mode="show"] #consent { bottom: max(8px, env(safe-area-inset-bottom)); }
  html[data-mode="show"][data-consent="ask"] aside { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px + var(--consent-h, 34px)); }
  .field { margin: 10px 10px 8px; }
  .field input { height: 48px; font-size: 16px; padding-left: 42px; }
  .glass { left: 13px; width: 18px; height: 18px; }
  .results { margin: -8px 10px 0; }
  #card { padding: 0 16px 20px; --pt: 16px; --px: 16px; }
  #card h2 { font-size: 32px; }
  footer { left: 12px; right: 12px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--foot-h)); gap: 12px; }
  #play { width: 38px; height: 38px; }
  #year { font-size: 36px; }
  #year small { margin-bottom: 7px; }
  #bars { height: 44px; margin-bottom: 17px; }
  #bars .yr[data-tick]:not([data-decade])::after { content: none; }
  .keep { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; }
  .keep figure { padding: 56px 16px 16px; }
  .keep-side { border-left: 0; border-top: 1px solid var(--hair); padding: 20px 18px; }
  .keep figure img { max-height: 50dvh; }
  .keep-side { justify-content: flex-start; }
  .keep-side h2 { font-size: 30px; margin-bottom: 6px; }
  .keep-gate { margin-top: 18px; gap: 12px; }
}
/* a phone on its side: the chart on the left at full height, the almanac on the right, a slim ribbon under the chart */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --ribbon-h: 58px; --panel-w: clamp(250px, 38vw, 340px); --side: max(14px, env(safe-area-inset-left)); }
  header { top: 10px; left: var(--side); }
  header .wordmark { font-size: 11px; margin-bottom: 4px; gap: 8px; }
  .wordmark::before { width: 7px; height: 7px; }
  h1 { font-size: 30px; line-height: .9; white-space: nowrap; }
  .tally, #legend { display: none; }
  .howto { width: 30px; height: 30px; margin: 8px 0 0; font-size: 15px; }
  #consent { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); padding: 5px 12px; }
  #consent p { gap: 0 12px; }
  #consent button, #consent a { padding: 4px 0; }
  html[data-consent="ask"] aside { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px + var(--consent-h, 40px)); }
  dialog#guide { width: min(620px, calc(100vw - 32px)); }
  dialog#guide[open] { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-content: start; }
  .guide-art { grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--hair); }
  #guide-title { font-size: 28px; }
  #guide-text { min-height: 0; font-size: 15px; }
  .guide-body { padding: 18px 22px 0; }
  .guide-foot { padding: 10px 22px 16px; }
  .corner { left: var(--side); bottom: calc(var(--ribbon-h) + var(--foot-h) + max(6px, env(safe-area-inset-bottom)) + 10px); }
  #plate { height: 3.4em; display: flex; flex-direction: column; justify-content: flex-end; }
  #plate .kicker { font-size: 11.5px; margin-bottom: 5px; }
  #plate-title, #plate-title.long { font-size: 23px; line-height: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; display: block !important; }
  #plate-sub, #plate-actions { display: none; }
  aside { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  .field { margin: 8px 8px 6px; }
  .field input { height: 44px; font-size: 16px; padding-left: 42px; }
  .glass { left: 13px; width: 18px; height: 18px; }
  .results { margin: -6px 8px 0; }
  #card { padding: 0 16px 18px; --pt: 14px; --px: 16px; }
  #card h2 { font-size: 30px; }
  footer { left: var(--side); right: calc(var(--panel-w) + max(8px, env(safe-area-inset-right)) + 14px); bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--foot-h)); gap: 12px; }
  .dial { gap: 10px; padding-bottom: 2px; }
  #play { width: 40px; height: 40px; }
  #year { font-size: 32px; }
  #year small { margin-bottom: 6px; }
  #allyears { margin-bottom: 2px; }
  #bars { height: 34px; margin-bottom: 15px; }
  #nightline { grid-template-rows: 5px auto; row-gap: 6px; }
  .nl-ticks { height: 26px; }
  .nl-songs { gap: 10px; }
  .nl-label { padding-top: 5px; font-size: 11px; }
  footer[data-night] #year { font-size: 26px; }
  footer[data-night] #year small { font-size: 11px; letter-spacing: .16em; margin-bottom: 5px; }
  #bars .yr[data-tick]:not([data-decade])::after { content: none; }
  .keep { grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); }
  .keep figure { padding: 14px; }
  .keep figure img { max-height: calc(100dvh - 64px); }
  .keep-side { padding: 18px 18px 16px; }
  .keep-side h2 { font-size: 28px; margin-bottom: 6px; padding-right: 44px; }
  .keep-gate { margin-top: 14px; gap: 10px; }
  .keep-go { padding: 13px; font-size: 16px; }
}
/* a fingertip gets at least 44 x 44; the drawn controls keep their size, the hit areas grow around them */
@media (pointer: coarse) {
  #allyears, #play, .actions button, a.listen, .was-mark, .rows .drop, .trail .trail-mine, button.inline, #sitefoot a, .howto, #consent button, #consent a { position: relative; }
  #allyears::after, .actions button::after, a.listen::after, .was-mark::after, .rows .drop::after, .trail .trail-mine::after, button.inline::after, #sitefoot a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  #sitefoot a::after, #sitefoot button.inline::after { height: 30px; } /* a small footer must not cover the ribbon above it */
  #consent button::after, #consent a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  #play::after, .keep-close::after, .dlg-close::after, .howto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
  .rows button { padding: 10px 0; }
  /* the rest of the small controls a thumb needs (audit 2026-10-04): the wordmark, the trail steps, the guide button
     and the home footer links all reach 44 px of hit area without changing how they look */
  .wordmark, .trail button:not(.up), .home-foot a { position: relative; }
  .wordmark::after, .trail button:not(.up)::after, .home-foot a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  .howto::after { inset: -7px; }
  .wordmark, .trail button { position: relative; }
  .wordmark::after, .trail button:not(.up)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  .trail .up::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
  .howto::after { inset: -7px; }
  .cta button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  header > * { animation: none; opacity: 1; }
  .planet canvas, .planet .disc img { animation: none !important; }
  .how-print { transition: none; }
  #plate-title { animation: none; }
  #bars .yr::before { transition: none; }
  .was-mark.lit .seal .burst { animation: none; }
  .seal, .seal .star, .seal .ring { transition: none; }
  .guide-art .g-draw, .guide-art .g-head { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}

/* The prerendered page (prerender.js): each address's own facts, setlist and links as plain HTML, for search engines
   and anyone without scripts; the same facts the almanac shows, nothing more. The head's loader marks <html class="js">
   before the first paint, so with scripts it never shows (and app.js removes it, leaving the page's own one h1);
   without them it is the whole page, a plain readable sheet, since nothing of the sky can draw. */
.seo { display: none; }
html:not(.js), html:not(.js) body { height: auto; overflow: auto; }
html:not(.js) body > :not(.seo) { display: none !important; }
html:not(.js) .seo { display: block; max-width: 42rem; margin: 0 auto; padding: 40px 16px 64px; }
.seo h1 { font: 800 clamp(34px, 7vw, 56px)/.92 var(--display); white-space: normal; text-wrap: balance; margin: 14px 0 16px; }
.seo h2 { font: 700 15px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 28px 0 8px; }
.seo ol, .seo ul { padding-left: 1.6em; margin: 0; }
.seo li { margin: 2px 0; }
.seo .seo-trail, .seo .seo-note { font-size: 13px; color: var(--paper-dim); }
.seo .seo-trail a:first-child { font: 800 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--paper); }
.seo .seo-mark { color: var(--paper-dim); }
.seo .seo-story b, .seo .seo-mark b { color: var(--accent); font-weight: 600; }