/* =====================================================================
   BJORK.LIVE — base styles
   Uploads to: bjorklive/assets/css/
   Depends on tokens.css, which must load first.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Hold the footer against the bottom of the window on short pages.
     Measured before this existed: the footer ended 180px above the
     bottom of the viewport on /shows, and that bare background read as
     footer padding when it was nothing of the sort. The footer was
     always thin; the page simply stopped early. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--paper-bright); }

/* Visible focus, always — a keyboard user must never lose their place. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =====================================================================
   THE WORDMARK — test-card bars through a scanline mask
   Uploads with site.css to bjorklive/assets/css/

   The artwork is dark-ink-on-light, so it cannot be recoloured as an
   image. Instead assets/img/logo-mask.png carries the letterforms in its
   ALPHA channel (built by scripts/make-logo-mask.py), and the colour
   comes from a gradient painted behind it. Antialiasing on every ragged
   scanline edge survives, because partial alpha stays partial.

   Colours are EBU 75% colour bars — the actual broadcast standard, in
   the standard descending-luminance order. The 100% bars are eye-watering
   on a near-black ground; 75% is what a test card genuinely looked like
   coming off air, which is the point.
   ===================================================================== */

.logo {
  /* Seven bars, hard stops. The span is 20%-70% of the image height, not
     0-100%, and that is the whole trick: 96% of the ink in this mark sits
     between 22% and 69% of its height (measured, not guessed — see
     scripts/preview-logo.py). Spread the bars over the full box and white
     lands on nothing but ascender tips while blue catches only the tail of
     the j, so four of the seven colours never appear. Fitted to the ink,
     the full test-card sequence reads. */
  background: linear-gradient(
    to bottom,
    #C0C0C0 0       27.143%,  /* white   — ascenders */
    #C0C000 27.143% 34.286%,  /* yellow  */
    #00C0C0 34.286% 41.429%,  /* cyan    */
    #00C000 41.429% 48.571%,  /* green   */
    #C000C0 48.571% 55.714%,  /* magenta */
    #C00000 55.714% 62.857%,  /* red     */
    #0000C0 62.857% 100%      /* blue    — baseline and descenders */
  );

  -webkit-mask-image: url("/assets/img/logo-mask.png");
          mask-image: url("/assets/img/logo-mask.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  /* The artwork is 643 x 226. */
  width: min(100%, 34rem);
  aspect-ratio: 643 / 226;
  display: block;
  margin-inline: auto;
}

/* One colour, for the favicon, print, or anywhere the bars would be
   noise rather than signal. */
.logo--mono { background: var(--paper); }

.wordmark-holder {
  margin: 0 0 var(--gap-l);
  display: block;
}

.logo--header {
  /* A FIXED width, not min(100%, …). In the header this sits inside an
     inline anchor whose own width is content-based, so a percentage
     resolves against something that is itself waiting on this element —
     circular, and it collapses to 0. The link was present and clickable
     all along, occupying no space at all. */
  width: 11rem;
  margin-inline: 0;
}

/* Older engines without mask support would show a bare gradient block,
   which is worse than no logo at all. Hide it and let the text show. */
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .logo { display: none; }
  .logo-fallback { display: block !important; }
}

.logo-fallback { display: none; }

/* Screen readers get the name, not a decorative div. */
.logo-name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* =====================================================================
   PUBLIC PAGES
   ===================================================================== */

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ink);
  padding: 0.6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- bar ------------------------------------------------------------ */

.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-l); flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.site-bar__logo { display: block; }
.site-bar__nav { display: flex; gap: var(--gap-m); }
.site-bar__nav a {
  color: var(--muted); text-decoration: none;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-bar__nav a:hover { color: var(--paper); }
.site-bar__nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.site-main {
  max-width: 62rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);

  /* Takes whatever slack is left rather than claiming an arbitrary
     half-viewport. width:100% because a flex item in a column does not
     stretch to the container's width by default the way a block does. */
  flex: 1 0 auto;
  width: 100%;
}

.sep { margin: 0 0.5em; opacity: 0.45; }

/* ---- hero ----------------------------------------------------------- */

/* Measured on the live page: 116px sat above the logo, of which 64px was
   .site-main's padding and 51.6px was the hero's own — two paddings doing
   one job. The hero adds only a little of its own now. Below the count,
   the same stacking put 121px before the cards. */
.hero {
  text-align: center;
  padding: clamp(0.25rem, 1.5vh, 1rem) 0 clamp(0.75rem, 2.5vh, 1.5rem);
}
.hero__mark { margin: 0 0 var(--gap-m); }
.hero__line { color: var(--paper); max-width: 44ch; margin: 0 auto var(--gap-m); text-wrap: balance; }
.hero__count { font-size: var(--step-0); }
.hero__count a { color: var(--accent); }
.hero__meta {
  color: var(--muted); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---- page heads ----------------------------------------------------- */

.page-head { margin-bottom: var(--gap-l); }
.page-head h1, .prose h1, .show h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-2); letter-spacing: -0.025em;
  margin: 0 0 var(--gap-s); text-wrap: balance;
}
.lede { color: var(--muted); max-width: 60ch; margin: 0; }
.empty { color: var(--muted); }
.result-count { color: var(--muted); font-size: var(--step--1); margin-top: var(--gap-l); }

/* ---- year strip ----------------------------------------------------- */

.yearstrip {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin: var(--gap-l) 0 var(--gap-m);
  padding-bottom: var(--gap-m); border-bottom: 1px solid var(--rule);
}
.yearstrip a {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); text-decoration: none;
  padding: 0.25rem 0.5rem; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); display: inline-flex; gap: 0.4rem; align-items: baseline;
}
.yearstrip a:hover { color: var(--paper); border-color: var(--paper); }
.yearstrip a.on { color: var(--accent); border-color: var(--accent); }
.yearstrip__n { font-size: 0.62rem; opacity: 0.6; }

/* ---- chips ---------------------------------------------------------- */

.chipbar { display: flex; flex-direction: column; gap: var(--gap-s); margin-bottom: var(--gap-l); }
.chipbar__group { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.chipbar__label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-right: 0.3rem; min-width: 4rem;
}
.chipf {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: 0.22rem 0.55rem; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); color: var(--muted); text-decoration: none;
}
.chipf:hover { color: var(--paper); border-color: var(--paper); }
.chipf.active { border-color: var(--accent); color: var(--accent); }

/* ---- gigography rows ------------------------------------------------ */

.gig { list-style: none; margin: 0; padding: 0; }
.gig-row { border-bottom: 1px solid var(--rule); }

.gig-row__link {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto auto;
  gap: var(--gap-m); align-items: baseline;
  padding: 0.85rem 0.4rem;
  text-decoration: none; color: inherit;
}
.gig-row__link:hover { background: var(--surface); color: inherit; }
.gig-row__link:hover .gig-row__venue { color: var(--accent); }

.gig-row__date {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gig-row__where { min-width: 0; }
.gig-row__venue { display: block; color: var(--paper); }
.gig-row__city  { display: block; color: var(--muted); font-size: var(--step--1); }
.gig-row__meta  { display: flex; gap: var(--gap-s); color: var(--muted); font-size: var(--step--1); }
.gig-row__has   { display: flex; gap: 0.3rem; }

.tick {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  padding: 0.12rem 0.35rem; border-radius: var(--radius);
  border: 1px solid var(--rule); color: var(--rule-strong);
}
.tick.on { border-color: var(--accent); color: var(--accent); }

/* ---- one show ------------------------------------------------------- */

.show__head { margin-bottom: var(--gap-l); }
.show__eyebrow {
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--gap-s);
}
.show__eyebrow a { color: var(--muted); }
.show__eyebrow a:hover { color: var(--accent); }
.show__sub { color: var(--muted); margin: 0; }
.show__event { color: var(--paper); margin: var(--gap-s) 0 0; }
.show__notes {
  border-left: 2px solid var(--surface-deep);
  padding-left: var(--gap-m); margin-bottom: var(--gap-l); color: var(--muted);
}

.show__setlist h2 {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-m);
}

.setlist-view { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.setlist-view__item {
  display: grid; grid-template-columns: 2.5rem 1fr auto auto;
  gap: var(--gap-s); align-items: baseline;
  padding: 0.45rem 0; border-bottom: 1px solid var(--rule);
}
.setlist-view__n {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); font-variant-numeric: tabular-nums; text-align: right;
}
.setlist-view__title { color: var(--paper); }
.setlist-view__note  { color: var(--muted); font-size: var(--step--1); font-style: italic; }
.setlist-view__segue { color: var(--accent); }
.setlist-view__item.is-segue { border-bottom-color: transparent; }
.setlist-view__count { color: var(--muted); font-size: var(--step--1); margin-top: var(--gap-m); }

.show__nav {
  display: flex; justify-content: space-between; gap: var(--gap-m);
  margin-top: var(--gap-xl); padding-top: var(--gap-m);
  border-top: 1px solid var(--rule);
}
.show__nav a { text-decoration: none; display: block; max-width: 18rem; }
.show__nav-next { text-align: right; }
.show__nav-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.show__nav-name { display: block; color: var(--accent); }
.show__nav-date { display: block; color: var(--muted); font-size: var(--step--1); }

/* ---- prose ---------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-1);
  margin: var(--gap-xl) 0 var(--gap-s);
}
.prose p, .prose li { color: var(--paper); }
.prose .lede { color: var(--muted); font-size: var(--step-0); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35rem; }

/* ---- footer --------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: var(--gap-l);
  /* Measured on the live site: 85px of footer around 36px of text. The
     notice needs a clear separation from the content, which the rule
     above already provides — the rest was padding doing nothing. */
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  flex: 0 0 auto;
}

/* Same max-width and side padding as .site-main, so the notice starts and
   ends on the same vertical lines as the content above it rather than
   floating in its own column. */
.site-foot__inner { max-width: 62rem; margin: 0 auto; }

/* Full width of that column and no narrower measure of its own. At
   0.72rem the line is long for reading prose, which is the point: this is
   a notice to be found when looked for, not a paragraph to be read
   through. The page width is the cap — it never runs past the content. */
.disclaimer {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.disclaimer strong { color: var(--paper); font-weight: 500; }

@media (max-width: 44rem) {
  .gig-row__link { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .gig-row__date { grid-column: 1 / -1; }
  .gig-row__meta { grid-column: 1; }
}

/* ---- contact address ------------------------------------------------
   A block rather than a clause inside a paragraph. Someone arriving to
   ask for something taken down should find the address without reading
   anything first. */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--gap-m);
  border-left: 2px solid var(--accent);
  padding: var(--gap-s) var(--gap-m);
  margin: var(--gap-m) 0;
  background: var(--surface);
}

.contact__label {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__address {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--accent);
  word-break: break-all;
}

/* =====================================================================
   VIDEO
   ===================================================================== */

.vidgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--gap-m);
}
.vidgrid--tight { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.vidcard a {
  display: flex; flex-direction: column; gap: 0.6rem;
  text-decoration: none; color: inherit;
}

.vidcard__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface); border-radius: var(--radius);
}
/* YouTube's hqdefault is 4:3 with black bars top and bottom. Scaling it
   to 133% and centring crops those away, so the grid is not a row of
   letterboxed thumbnails. */
.vidcard__thumb img {
  width: 100%; height: 133%;
  object-fit: cover; object-position: center;
  display: block; margin-top: -16.5%;
}
.vidcard__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.6rem; color: var(--paper);
  text-shadow: 0 1px 6px #000a;
  opacity: 0.8; transition: opacity 0.15s, color 0.15s;
}
.vidcard a:hover .vidcard__play { opacity: 1; color: var(--accent); }
.vidcard a:hover .vidcard__title { color: var(--accent); }

.vidcard__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vidcard__kind {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.vidcard__title { color: var(--paper); line-height: 1.35; }
.vidcard__meta { color: var(--muted); font-size: var(--step--1); }

.chipf__n { opacity: 0.55; font-size: 0.62rem; }

/* ---- the player ----------------------------------------------------- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap-l);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.videopage__head { margin-bottom: var(--gap-m); }
.videopage__desc { color: var(--paper); max-width: var(--measure); }
.videopage__out { font-size: var(--step--1); margin-top: var(--gap-m); }

.videopage__show, .show__videos { margin-top: var(--gap-xl); }
.videopage__show h2, .show__videos h2 {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-s);
}
.videopage__showlink {
  display: block; text-decoration: none;
  border-left: 2px solid var(--surface-deep);
  padding: var(--gap-s) var(--gap-m);
}
.videopage__showlink:hover { border-left-color: var(--accent); }
.videopage__showname { display: block; color: var(--accent); }
.videopage__showmeta { display: block; color: var(--muted); font-size: var(--step--1); }

/* =====================================================================
   AUDIO
   ===================================================================== */

.player {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--gap-m);
  margin-bottom: var(--gap-m);
  position: sticky; top: 0; z-index: 5;
}
.player__now { display: flex; gap: var(--gap-s); align-items: baseline; margin-bottom: 0.5rem; }
.player__label {
  font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.player__title { color: var(--paper); }
.player audio { width: 100%; height: 2.4rem; }

.tracklist { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.tracklist__item {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  gap: var(--gap-s); align-items: baseline;
  padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.tracklist__item:hover { background: var(--surface); }
.tracklist__item:hover .tracklist__title { color: var(--accent); }
.tracklist__item.is-playing .tracklist__title { color: var(--accent); }
.tracklist__item.is-playing .tracklist__n::after { content: '▶'; margin-left: .3rem; color: var(--accent); }
.tracklist__item.is-missing { cursor: default; opacity: .5; }
.tracklist__item.is-error .tracklist__title { color: var(--accent-quiet); }
.tracklist__n {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); text-align: right; font-variant-numeric: tabular-nums;
}
.tracklist__title { color: var(--paper); }
.tracklist__dur {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.rec__lineage { margin-top: var(--gap-xl); }
.rec__lineage h2, .show__recs h2 {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-s);
}
.rec__lineage .mono { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.rec__taper { color: var(--muted); font-size: var(--step--1); }

.show__recs { margin-top: var(--gap-xl); }
.reclist { list-style: none; margin: 0; padding: 0; }
.reclist__item {
  display: flex; align-items: center; gap: var(--gap-s);
  border-bottom: 1px solid var(--rule); padding: 0.6rem 0;
}
.reclist__item a { text-decoration: none; flex: 1; min-width: 0; }
.reclist__title { display: block; color: var(--accent); }
.reclist__meta { display: block; color: var(--muted); font-size: var(--step--1); }

.grade {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.66rem; letter-spacing: .04em;
  padding: .1rem .35rem; border-radius: var(--radius);
  background: var(--accent); color: var(--ink);
}

/* =====================================================================
   TOUR DATES
   ===================================================================== */

.dates { list-style: none; margin: 0; padding: 0; }

.date {
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1fr) auto;
  gap: var(--gap-m);
  align-items: center;
  padding: var(--gap-m) 0;
  border-bottom: 1px solid var(--rule);
}

.date__when {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.4rem 0.2rem; line-height: 1.1;
}
.date__day { font-size: var(--step-1); color: var(--paper); font-variant-numeric: tabular-nums; }
.date__mon { font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.date__yr  { font-size: 0.62rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.date__what { display: flex; flex-direction: column; min-width: 0; }
.date__venue { color: var(--paper); }
.date__where { color: var(--muted); font-size: var(--step--1); }
.date__note  { color: var(--muted); font-size: var(--step--1); font-style: italic; }
.date__onsale {
  color: var(--accent); font-size: var(--step--1);
  font-family: var(--font-mono); margin-top: 0.2rem;
}

.date__do { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.date__status {
  font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.date__ics { font-size: 0.66rem; color: var(--muted); }
.date__ics:hover { color: var(--accent); }

.date--cancelled .date__venue { text-decoration: line-through; color: var(--muted); }
.date--soldout .date__status { color: var(--accent-quiet); }

.dates-past { margin-top: var(--gap-xl); }
.dates-past h2 {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-s);
}

.nextdate { margin-top: var(--gap-xl); }
.nextdate__row {
  display: flex; align-items: center; gap: var(--gap-m); flex-wrap: wrap;
  border-left: 2px solid var(--accent);
  padding: var(--gap-s) var(--gap-m); background: var(--surface);
}
.nextdate__when {
  font-family: var(--font-mono); color: var(--accent); white-space: nowrap;
}
.nextdate__where { color: var(--muted); flex: 1; min-width: 0; }
.nextdate__where strong { color: var(--paper); font-weight: 500; }

@media (max-width: 40rem) {
  .date { grid-template-columns: 3.6rem 1fr; }
  .date__do { grid-column: 2; align-items: flex-start; }
}

/* =====================================================================
   NEWS
   ===================================================================== */

.newslist { list-style: none; margin: 0; padding: 0; }
.newslist__item { border-bottom: 1px solid var(--rule); }
.newslist__item a { display: block; padding: var(--gap-m) 0.4rem; text-decoration: none; }
.newslist__item a:hover { background: var(--surface); }
.newslist__item a:hover .newslist__title { color: var(--accent); }
.newslist__date {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted);
}
.newslist__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-1);
  color: var(--paper); margin: 0.2rem 0 0.3rem; letter-spacing: -0.01em;
}
.newslist__excerpt { color: var(--muted); margin: 0; max-width: var(--measure); }

.article { max-width: var(--measure); }
.article__head { margin-bottom: var(--gap-l); }
.article__date { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.article__body { margin-top: var(--gap-m); }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article__body blockquote {
  border-left: 2px solid var(--accent); margin: var(--gap-m) 0;
  padding-left: var(--gap-m); color: var(--muted);
}
.article__body pre {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--gap-s);
  overflow-x: auto; font-size: var(--step--1);
}
.article__body iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }
.article__tags {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin-top: var(--gap-xl); padding-top: var(--gap-m);
  border-top: 1px solid var(--rule);
}

/* =====================================================================
   HOME — the card grid
   Every card renders whether or not it holds anything. An empty one says
   what will appear there, so the shape of the site is legible while it
   is still being filled.
   ===================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-m);
  min-height: 11rem;
}

/* One card carries the accent, and it is the one with a deadline on it. */
.card--accent { border-left: 2px solid var(--accent); }

.card__h {
  font-size: 0.66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
  margin: 0 0 var(--gap-s);
}

.card__lead {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4rem;
  color: var(--paper); text-wrap: balance;
}
.card__lead a { color: var(--paper); text-decoration: none; }
.card__lead a:hover { color: var(--accent); }

.card__body { color: var(--muted); font-size: var(--step--1); margin: 0; line-height: 1.5; }
.card__body a { color: var(--paper); text-decoration: none; }
.card__body a:hover { color: var(--accent); }

.card__empty {
  color: var(--rule-strong); font-size: var(--step--1); line-height: 1.5;
  margin: 0; flex: 1;
}

.card__more {
  margin: auto 0 0; padding-top: var(--gap-s);
  font-size: var(--step--1); color: var(--muted);
}
.card__more a { color: var(--accent); }

/* rows inside a card */
.cardrow {
  display: block; text-decoration: none;
  padding: 0.4rem 0; border-bottom: 1px solid var(--rule);
}
.cardrow:last-of-type { border-bottom: 0; }
.cardrow__date {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.cardrow__name { display: block; color: var(--paper); font-size: var(--step--1); }
.cardrow:hover .cardrow__name { color: var(--accent); }
.cardrow__where { display: block; color: var(--muted); font-size: 0.68rem; }

/* video card */
.card__thumb {
  position: relative; display: block; margin-bottom: var(--gap-s);
  aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius);
  background: var(--ink);
}
.card__thumb img {
  width: 100%; height: 133%; object-fit: cover; margin-top: -16.5%; display: block;
}
.card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.4rem; color: var(--paper); text-shadow: 0 1px 6px #000a; opacity: .8;
}
.card__thumb:hover .card__play { opacity: 1; color: var(--accent); }

/* figures card */
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-s); flex: 1; }
.figures__n {
  display: block; font-size: var(--step-1); font-weight: 300;
  color: var(--paper-bright); font-variant-numeric: tabular-nums; line-height: 1;
}
.figures__l {
  display: block; font-size: 0.62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* =====================================================================
   PAGINATION
   ===================================================================== */

.pager {
  display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
  margin-top: var(--gap-m);
}
.pager__n, .pager__step {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: 0.3rem 0.6rem; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); color: var(--muted); text-decoration: none;
}
.pager__n:hover, .pager__step:hover { color: var(--paper); border-color: var(--paper); }
.pager__n.is-here { color: var(--accent); border-color: var(--accent); }
.pager__step.is-off { opacity: 0.35; }
.pager__gap { color: var(--rule-strong); padding: 0 0.2rem; }

/* =====================================================================
   SONGS
   ===================================================================== */

.songbar {
  display: flex; gap: var(--gap-s); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--gap-l);
}
.songbar input {
  flex: 1 1 14rem; padding: 0.55rem 0.7rem; font: inherit;
  background: var(--surface); color: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.songbar button {
  font: inherit; font-weight: 500; padding: 0.55rem 1rem;
  background: var(--accent); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer;
}
.songbar__sort { display: flex; gap: 0.3rem; margin-left: auto; }

.songlist { list-style: none; margin: 0; padding: 0; }
.songrow { border-bottom: 1px solid var(--rule); }
.songrow__link {
  display: grid; grid-template-columns: minmax(0,1fr) 8rem 3.5rem 5rem;
  gap: var(--gap-s); align-items: center;
  padding: 0.55rem 0.4rem; text-decoration: none; color: inherit;
}
.songrow__link:hover { background: var(--surface); }
.songrow__link:hover .songrow__title { color: var(--accent); }
.songrow__title { color: var(--paper); min-width: 0; }
.songrow__album { color: var(--muted); font-size: var(--step--1); margin-left: 0.4rem; }
.songrow__bar { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.songrow__bar span { display: block; height: 100%; background: var(--accent); opacity: .8; }
.songrow__n {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--paper);
  text-align: right; font-variant-numeric: tabular-nums;
}
.songrow__years {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}

.songstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: var(--gap-m);
}
.songstat { background: var(--ink); padding: var(--gap-s) var(--gap-m); }
.songstat__n {
  display: block; font-size: var(--step-2); font-weight: 300; line-height: 1;
  color: var(--paper-bright); font-variant-numeric: tabular-nums;
}
.songstat__l {
  display: block; font-size: 0.62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 0.2rem;
}
.songpage__lede { color: var(--muted); max-width: var(--measure); }
.songpage__lede a { color: var(--paper); }
.songpage__tours, .songpage__plays, .songpage__videos { margin-top: var(--gap-xl); }
.songpage__tours h2, .songpage__plays h2, .songpage__videos h2, .results__h {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-s);
}
.songplay__note { color: var(--muted); font-size: var(--step--1); font-style: italic; }

.meterline {
  display: grid; grid-template-columns: minmax(0,14rem) 1fr 3rem;
  gap: var(--gap-s); align-items: center; padding: 0.25rem 0;
  font-size: var(--step--1);
}
.meterline__l { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meterline__bar { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.meterline__bar span { display: block; height: 100%; background: var(--accent); }
.meterline__v {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--paper);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* =====================================================================
   SEARCH
   ===================================================================== */

.searchbig { display: flex; gap: var(--gap-s); margin-top: var(--gap-m); max-width: 40rem; }
.searchbig input {
  flex: 1; padding: 0.7rem 0.9rem; font: inherit; font-size: var(--step-0);
  background: var(--surface); color: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.searchbig input:focus { border-color: var(--accent); }
.searchbig button {
  font: inherit; font-weight: 500; padding: 0.7rem 1.2rem;
  background: var(--accent); color: var(--ink);
  border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer;
}
.results { margin-top: var(--gap-xl); }
.site-bar__search { color: var(--accent) !important; }

@media (max-width: 44rem) {
  .songrow__link { grid-template-columns: 1fr 3rem; }
  .songrow__bar { display: none; }
  .songrow__years { grid-column: 2; }
}

/* =====================================================================
   OFFICIAL RELEASES
   The one place money is mentioned. Quiet by design: an archive that
   shouts about buying things stops reading as an archive.
   ===================================================================== */

.official {
  border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--accent-quiet);
  border-radius: var(--radius);
  padding: var(--gap-m);
  margin-top: var(--gap-xl);
  background: var(--surface);
}
.official__eyebrow {
  font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.3rem;
}
.official__title {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
  color: var(--paper); margin: 0 0 0.3rem;
}
.official__title .muted { font-size: var(--step--1); margin-left: 0.4rem; }
.official__note { color: var(--muted); font-size: var(--step--1); margin: 0 0 var(--gap-s); }

.official__buy { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: var(--gap-s) 0 0; }
.buy {
  font-size: var(--step--1); padding: 0.4rem 0.8rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  color: var(--paper); text-decoration: none;
}
.buy:hover { border-color: var(--accent); color: var(--accent); }

/* The disclosure is required, so it is legible rather than buried —
   0.66rem, not 0.5rem in the same colour as the background. */
.official__disclosure {
  color: var(--muted); font-size: 0.68rem; line-height: 1.5;
  margin: var(--gap-s) 0 0; max-width: 60ch;
}

/* Marks a Recently-added row that is not a concert. */
.cardrow__kind {
  font-size: 0.58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-left: 0.4rem;
}

/* =====================================================================
   PRESS
   Every entry leaves the site, so the publication is set as prominently
   as the headline — the credit is the reason this is here.
   ===================================================================== */

.presslist { list-style: none; margin: 0; padding: 0; }
.presscut { padding: var(--gap-m) 0; border-bottom: 1px solid var(--rule); }
.presscut:last-child { border-bottom: 0; }
.presscut__link { display: block; text-decoration: none; }
.presscut__title {
  display: block; color: var(--paper); font-size: var(--step-0); line-height: 1.35;
}
.presscut__link:hover .presscut__title { color: var(--accent); }
.presscut__by {
  display: block; color: var(--muted); font-size: var(--step--1); margin-top: 0.2rem;
}
.presscut__by strong { color: var(--accent-quiet); font-weight: 500; }
.presscut__note {
  color: var(--muted); font-size: var(--step--1); margin: 0.4rem 0 0; max-width: 62ch;
}
.presscut__about { margin: 0.3rem 0 0; font-size: var(--step--1); }

.show__press { margin-top: var(--gap-xl); }
.show__press h2 {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin: 0 0 var(--gap-s);
}

.songpage__notes {
  border-left: 2px solid var(--surface-deep);
  padding-left: var(--gap-m); margin: var(--gap-m) 0;
  color: var(--paper); max-width: var(--measure);
}
.songpage__lyrics { font-size: var(--step--1); margin: var(--gap-s) 0 var(--gap-m); }

/* The donation link sits in the footer sentence rather than as a button.
   An archive that asks on every page reads as a fundraiser; one that
   asks nowhere may as well not have a link. */
.site-foot__donate { color: var(--accent-quiet); }
.site-foot__donate:hover { color: var(--accent); }

/* The Support card is not archive content, and should not read as though
   it is. No accent border — that belongs to Next date, the only card
   with a deadline — and no button. A quieter surface and muted body
   text mark it as an aside on a page whose job is to send people
   inwards, not to ask them for money. */
.card--support {
  background: transparent;
  border-style: dashed;
}
.card--support .card__body { color: var(--muted); }

/* The newest article's opening lines, so the News card is not a single
   headline floating in an otherwise empty box. */
.cardrow__blurb {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.cardrow--lead { padding-bottom: 0.6rem; }

/* A safety net, not the fix. Pasted text can arrive joined by
   non-breaking spaces, which makes a whole paragraph one unbreakable
   word; a long URL does the same thing honestly. The sanitiser removes
   the first case on save, but nothing should be able to push a page
   sideways, so anything that cannot wrap is broken rather than allowed
   to overflow. */
.article__body,
.article__body p,
.prose p,
.prose li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Wide things get their own scroller rather than moving the page. */
.article__body pre,
.article__body table {
  overflow-x: auto;
  max-width: 100%;
}


/* iOS zooms in on any input below 16px and does not zoom back out. */
@media (pointer: coarse) {
  .songbar input, .searchbig input, .filters input, .filters select {
    font-size: 16px;
    min-height: 2.75rem;
  }
  .pager__n, .pager__step { min-width: 2.5rem; min-height: 2.5rem;
                            display: inline-flex; align-items: center; justify-content: center; }
  .chipf { padding: 0.45rem 0.7rem; }
}