/* Brian Vogan and his Good Buddies. Colors, textures and illustrations come from the
   2010-2018 site (images in /img/live/). Mobile first; wider layouts at 760px and 1000px.
   DESIGN.md describes the system: one content card, one quote card, one spacing scale. */

:root {
  --yellow: #f1d418;
  --ink: #003e4d;
  --ink-soft: #33616c;
  --red: #ed3022;        /* buttons and marks (with the red texture) */
  --red-text: #b3201a;   /* red type on yellow: titles, current nav item */
  --green: #86c747;
  --orange: #f99a21;
  --teal: #2eb8a3;
  --teal-dark: #0b5e55;  /* headings */
  --sky: #6bc1da;
  --cloud: #ffffff;
  --card: rgba(255, 255, 255, 0.9);
  --shadow: 0 2px 0 rgba(112, 99, 12, 0.35), 0 6px 18px rgba(112, 99, 12, 0.18);
  --cover-shadow: 1px 2px 3px rgba(80, 70, 8, 0.55), 4px 10px 18px rgba(80, 70, 8, 0.28);
  --radius: 14px;        /* every card: content cards, quote cards, video frames, the nav */
  --radius-sm: 8px;      /* buttons, tags */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;            /* above every section heading */
  --display: "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --body: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --gutter: 16px;
  --ease: cubic-bezier(0.3, 1.4, 0.5, 1);
}

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

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

/* The live site layers its sky gradient over the yellow paper tile. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    url(/img/live/background-header-gradient.png) repeat-x left top / 10px 318px,
    var(--yellow) url(/img/live/background-tile.jpg) repeat left top;
  color: var(--ink);
  font: 16px/1.6 var(--body);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
/* site.js hides the box set blocks at the close date; a block's own display: grid/flex mustn't undo it. */
[hidden] { display: none !important; }

a { color: var(--ink); text-underline-offset: 2px; }
a:hover { color: var(--red-text); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, .section-title, .page-title { font-family: var(--display); line-height: 1.15; }
cite { font-style: italic; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: #fff; padding: var(--s1) var(--s2); border-radius: var(--radius-sm);
}
.skip:focus { left: 8px; }

/* 800px of content keeps clear of the side decorations, whose inner edges sit 416px from center. */
.wrap { width: 100%; max-width: 832px; margin: 0 auto; padding: 0 var(--gutter); }
main.wrap { flex: 1; position: relative; z-index: 1; padding-bottom: var(--s3); }

.nowrap { white-space: nowrap; } /* a hyphenated word kept whole */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small, .note { font-size: 14px; color: var(--ink-soft); }

/* Placeholder tags: loud on purpose, so nothing ships by accident. */
mark.tbd {
  display: inline;
  background: #fff;
  color: #b00020;
  border: 1px dashed #b00020;
  border-radius: 4px;
  padding: 0 4px;
  font: 600 max(13px, 0.72em)/1.4 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0;
  text-shadow: none;
  vertical-align: middle;
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------- decorations
   decorations-24.png is the live site's 1300px layer of birds, clouds and the umbrella,
   pinned to the top of the page, centered. It only fits beside the content on wide screens. */

.decor { display: none; }

@media (min-width: 900px) {
  .decor {
    display: block;
    position: absolute;
    top: 80px; /* keeps its right-hand bird below the My Way Home cover */
    left: 0;
    right: 0;
    height: 773px;
    background: url(/img/live/decorations-24.png) no-repeat center top;
    pointer-events: none;
  }
}

/* A sparser second set further down long pages, in the gutters beside the 800px column.
   Absolute, not fixed: they scroll with the page like the top set. */
.decor-low { display: none; }
@media (min-width: 1024px) {
  main.wrap { position: relative; }
  .decor-low { display: block; position: absolute; inset: 0; pointer-events: none; }
  .decor-low span { position: absolute; background: no-repeat center / contain; }
  .d-bird-a { width: 70px; height: 56px; left: calc(100% + 34px - var(--gutter)); top: 46%; background-image: url(/img/live/decor-bird-a.png); }
  .d-bird-b { width: 52px; height: 38px; right: calc(100% + 40px - var(--gutter)); top: 78%; background-image: url(/img/live/decor-bird-b.png); }
  .d-cloud-a, .d-cloud-b { display: none; }
}
@media (min-width: 1240px) {
  .d-cloud-a { display: block; width: 140px; height: 74px; right: calc(100% + 30px - var(--gutter)); top: 60%; background-image: url(/img/live/decor-cloud-a.png); }
  .d-cloud-b { display: block; width: 138px; height: 70px; left: calc(100% + 26px - var(--gutter)); bottom: 40px; background-image: url(/img/live/decor-cloud-b.png); }
}

/* ---------------------------------------------------------------- header
   The stage reproduces the live header: the 967x295 rainbow centered on the page,
   the logo at the left of the 840px column and the nav at its right. Everything inside
   is placed in rainbow-image units (--u), so the composition scales as one piece.
   --sw is the stage width; --shift nudges the visible window on phones. */

.site-header {
  --sw: 116.5vw;
  --shift: 2.2vw;
  --u: calc(var(--sw) / 967); /* one rainbow unit */
  position: relative;
  overflow-x: clip; /* the rainbow runs wider than the screen; the open menu can hang below */
  z-index: 2;
}

.stage {
  position: relative;
  left: calc(50% - var(--sw) / 2 + var(--shift));
  width: var(--sw);
  height: calc(var(--u) * 295);
  background: url(/img/live/header-rainbow-24.png) no-repeat left top / 100% auto;
}

.logo {
  position: absolute;
  left: calc(var(--sw) * 65.5 / 967);
  top: 0;
  width: calc(var(--sw) * 348 / 967);
}
.logo img { display: block; width: 100%; height: auto; }

/* Brian's heading line. Phones: below the rainbow. 760px up: under the logo. */
.tagline {
  width: calc(100% - 2 * var(--gutter));
  max-width: 600px;
  margin: 2px auto var(--s1);
  font: 500 17px/1.4 var(--display);
  color: var(--teal-dark);
  text-align: center;
  text-wrap: balance;
}

/* All eight covers, oldest first, tipped like a tossed pile. Covers share one height and take
   their width from their own ratio (the img width/height attributes), so the wider sleeves get
   wider tiles and nothing is cropped. Phones: three centered above five, the five filling the
   width between the gutters (each cover is about 1.03 times as wide as it is tall; 5.4 leaves room
   for the tilt), all shrinking with the screen. 760px up: three under the nav and five centered
   below them, on the live site's cloud; the bottom row runs a little past its edges. */
.strip {
  --gap: 8px;
  --tile-h: calc((100vw - 2 * var(--gutter) - 4 * var(--gap)) / 5.4);
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  /* Up over the big cloud: the top row starts 14px under the Menu button (8px + 44px), or tucks at
     most 14px under the logo (164 units tall) where the logo is bigger; from the stage's height
     (295 units), less this padding's 12px. */
  margin: calc(max(8px + 44px + 14px, var(--u) * 164 - 14px) - 12px - var(--u) * 295) 0 var(--s1);
  padding: 12px var(--gutter) 14px;
}
.strip-row { display: flex; align-items: center; justify-content: center; gap: var(--gap); }
.strip-sub { display: contents; }
.strip-item {
  position: relative;
  flex: none;
  display: block;
  border-radius: 2px;
  rotate: var(--tilt, 0deg);
  transition: transform 0.25s var(--ease);
}
.strip-cover {
  display: block;
  width: auto;
  height: var(--tile-h);
  object-fit: contain;
}
.strip-cover.cd { --dl: max(2px, var(--tile-h) * 0.028); box-shadow: 2px 4px 5px rgba(0, 62, 77, 0.3); }
.strip-item:hover, .strip-item:focus-visible { z-index: 2; transform: rotate(var(--turn, 0deg)) scale(1.15); }
.strip-item:focus-visible { outline: 3px solid var(--red-text); outline-offset: 2px; }

.nav {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2px;
  max-width: 560px;
  margin: 0 auto;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(0, 62, 77, 0.12);
}
.site-header > .nav { flex-wrap: wrap; width: calc(100% - 2 * var(--gutter)); margin-top: -4px; margin-bottom: var(--s2); }
.nav a {
  flex: 1 1 auto;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  font: 600 clamp(14px, 4vw, 17px)/1.2 var(--display);
  color: #3d4a4d;
  text-align: center;
  text-decoration: none;
}
.nav a:hover { color: var(--red-text); }
.nav a[aria-current="page"] { color: var(--red-text); background: rgba(255, 255, 255, 0.85); }
/* Store is the main action: a red button in the nav and, on phones, beside Menu. */
.nav a.nav-store, .store-quick {
  background: var(--red) url(/img/live/news-red.jpg) center / cover;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.nav a.nav-store:hover, .store-quick:hover { color: #fff; filter: brightness(1.06); }
.nav a.nav-store[aria-current="page"], .store-quick[aria-current="page"] { color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red-text); }

/* Phones: Menu and Store sit in the header's top row, beside the logo. The menu opens a panel
   under them (site.js). Without JS the button never shows and the nav stays open in a row. */
.menu-btn, .store-quick { display: none; }
@media (max-width: 759px) {
  .js .menu-btn, .js .store-quick {
    position: absolute;
    z-index: 4;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 62, 77, 0.16);
    font: 600 16px/1 var(--display);
    text-decoration: none;
    cursor: pointer;
  }
  .js .menu-btn { background: rgba(255, 255, 255, 0.88); color: #3d4a4d; }
  .js .store-quick { right: var(--gutter); }
  .js .menu-btn { right: calc(var(--gutter) + 80px); }
  .menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .menu-btn[aria-expanded="true"] { color: var(--red-text); background: #fff; }
  .site-header > .nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-block: 0; }
  .js .site-header > .nav { display: none; }
  .js .site-header > .nav.open {
    position: absolute;
    z-index: 5;
    top: 60px;
    right: var(--gutter);
    display: flex;
    flex-direction: column;
    width: min(240px, 100% - 2 * var(--gutter));
    margin: 0;
    padding: 6px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 62, 77, 0.24);
    animation: drop 0.16s ease-out;
  }
  .js .nav.open a { justify-content: flex-start; padding: 0 14px; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

@media (min-width: 480px) {
  .nav a { padding: 8px 6px; }
}

@media (min-width: 760px) {
  /* 940 of the 967 units show at 760px, so the cover row can run past the nav's right end. */
  .site-header { --sw: calc(100vw * 967 / 940); --shift: 0px; --x0: calc(50% - var(--sw) / 2); }
  /* Nav sits at the top right of the stage, as on the live site (534px wide at x=374). */
  .site-header > .nav {
    position: absolute;
    top: 0;
    left: calc(50% - var(--sw) / 2 + var(--sw) * 380 / 967);
    width: calc(var(--sw) * 522 / 967);
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  /* Six items in the live site's 522-unit nav: one line from 760px up. */
  .nav a { padding: 8px 3px; font-size: clamp(14px, 1.95vw, 19px); white-space: nowrap; }

  /* Three covers under the nav and five beneath them, both centered on the nav (x=641);
     the tagline under the logo. Placed in rainbow units from the stage's left edge (--x0). */
  .stage { height: calc(var(--u) * 295); }
  .tagline {
    position: absolute;
    left: calc(var(--x0) + var(--u) * 34);  /* may hang past the content's left edge */
    top: calc(var(--u) * 168);
    width: calc(var(--u) * 326);            /* the lines run long, up to the covers */
    max-width: none;
    margin: 0;
    font-size: calc(var(--u) * 19);
    text-align: left;
    text-wrap: pretty;
    rotate: -3deg;                          /* a little life: tipped like the covers */
  }
  .strip { --tile-h: calc(var(--u) * 94); --gap: calc(var(--u) * 10); position: static; display: block; margin: 0; padding: 0; overflow: visible; }
  .strip-row, .strip-sub { display: flex; align-items: center; justify-content: center; gap: var(--gap); }
  .strip-row { position: absolute; z-index: 1; left: calc(var(--x0) + var(--u) * 641); translate: -50% 0; }
  .r1 { top: calc(var(--u) * 60); }
  .r2 { top: calc(var(--u) * 164); }
}

@media (min-width: 1000px) {
  .site-header { --sw: 967px; }
}

/* Lyrics page: the logo and the nav (on phones, Menu and Store) stay put while the rainbow, the
   tagline and the covers scroll away under them. Same coordinates as above, now from the viewport.
   Once the page moves, site.js sets .scrolled: the nav turns nearly solid and the logo and nav get
   a shadow. The sky band stays at the top behind them, and the lyrics and the footer slide under
   the nav over it, fading out as they reach the nav's bottom edge. Anchored albums and songs stop below the logo (--logo-h: its height at each width). */
.page-albums { --logo-h: calc(116.5vw * 164 / 967); }
.page-albums .logo {
  position: fixed;
  z-index: 3;
  left: calc(50% - var(--sw) / 2 + var(--shift) + var(--sw) * 65.5 / 967);
  transition: filter 0.2s ease;
}
.page-albums .site-header > .nav { z-index: 4; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.page-albums.scrolled .logo { filter: drop-shadow(0 4px 8px rgba(0, 62, 77, 0.2)); }
.page-albums.scrolled .nav { background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 14px rgba(0, 62, 77, 0.22); }
/* The sky band: the page's own background, sky over the yellow paper (kept in step with the page's by
   --sy), pinned at the top behind the logo and nav and fading in once the page moves (--sky-in). Solid
   at the top, clear at its foot. It is the body's, at z 1: under the header (z 2), which scrolls off it,
   and under the lyrics and footer (z 1, later in the page), which fade into it. */
.page-albums::before {
  content: "";
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--logo-h) + 90px);
  background:
    url(/img/live/background-header-gradient.png) repeat-x left top / 10px 100%,
    var(--yellow) url(/img/live/background-tile.jpg) repeat left calc(var(--sy, 0) * -1px);
  -webkit-mask-image: linear-gradient(#000 calc(var(--logo-h) * 0.45), transparent);
  mask-image: linear-gradient(#000 calc(var(--logo-h) * 0.45), transparent);
  opacity: var(--sky-in, 0);
  pointer-events: none;
}
.page-albums .site-footer { z-index: 1; }
.page-albums main, .page-albums .site-footer, .page-albums .tagline, .page-albums .strip-item {
  /* --fade: how far the nav's bottom edge sits below this element's top (site.js). Clear above it,
     solid 40px below, so what slides up fades out just as it reaches the nav. */
  -webkit-mask-image: linear-gradient(transparent var(--fade), #000 calc(var(--fade) + 40px));
  mask-image: linear-gradient(transparent var(--fade), #000 calc(var(--fade) + 40px));
}
.page-albums .lyrics-wall, .page-albums .lyric { scroll-margin-top: calc(var(--logo-h) + 48px); }
/* An album stops with its cover and title just under the logo: past the chalk line above it
   (10px, then 24px, then the grid gap), which belongs to the album's own box. */
.page-albums .album { scroll-margin-top: calc(var(--logo-h) + 12px); }
.page-albums .album + .album { scroll-margin-top: calc(var(--logo-h) + 12px - 10px - 2 * var(--s3)); }
@media (max-width: 759px) {
  .js .page-albums .menu-btn, .js .page-albums .store-quick, .js .page-albums .site-header > .nav.open { position: fixed; }
  .page-albums.scrolled .menu-btn { background: rgba(255, 255, 255, 0.97); }
}
@media (min-width: 760px) {
  .page-albums { --logo-h: calc(100vw * 164 / 940); }
  .page-albums .site-header > .nav { position: fixed; }
}
@media (min-width: 1000px) {
  .page-albums { --logo-h: 164px; }
}

/* ---------------------------------------------------------------- shared blocks */

/* The one plain content card: no tilt, no colored borders. */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s3);
}

.section { margin: var(--s5) 0 0; }
/* The chalk line from the live site's titles, between a page's sections: Home's, the Store's main
   ones, Shows' and Videos', and between albums on Lyrics. */
.rsec + .rsec::before, .album + .album::before,
.page-store .gives-back::before, .page-store .for-stores::before,
.page-shows main > .section::before, .page-videos .more-videos::before {
  content: "";
  display: block;
  height: 10px;
  margin-bottom: var(--s5);
  background: url(/img/live/header-line.png) repeat-x left center / auto 10px;
}

/* Section headings: teal, no squiggle. The wavy line divides sections (above). */
.section-title {
  margin: 0 0 var(--s2);
  font-size: 26px;
  font-weight: 600;
  color: var(--teal-dark);
}
.card-title { margin: 0 0 var(--s2); font-size: 24px; font-weight: 600; color: var(--teal-dark); }

.page-title {
  margin: var(--s2) 0 var(--s3);
  padding-bottom: 14px;
  font-size: 40px;
  font-weight: 700;
  color: var(--red-text);
  background: url(/img/live/header-line.png) repeat-x left bottom / auto 10px;
}

.more-link { margin: var(--s3) 0 0; font: 600 16px var(--display); }

.btn {
  display: inline-block;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 700 18px/1.2 var(--display);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(112, 99, 12, 0.55);
  transition: transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-red {
  background: var(--red) url(/img/live/news-red.jpg) center / cover;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.btn-red:hover { color: #fff; filter: brightness(1.06); }
.btn-big { font-size: 22px; padding: 14px 28px; }
.btn-small { font-size: 16px; padding: 8px 16px; }
/* Disabled: the red button's shape, muted. */
.btn.btn-off, .btn.btn-off:hover {
  background: #f0c2bd;
  color: #6b231d;
  text-shadow: none;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.btn-off:active { transform: none; }

/* Every cover is a CD seen from a little to the left and barely above: a sliver of its left
   spine (--dl, the real spine art squeezed in) and its top edge (--dt) show, lit by the same
   top-left light that drops the shadows down and to the right. They're drawn in the img's own
   padding, so they tilt, spin and scale with the cover, and the art itself is never
   distorted. Covers that scale with the page size the sliver in cqw of their container. */
.cd {
  --dl: 2px;
  --dt: 1px;
  padding: var(--dt) 0 0 var(--dl);
  background:
    linear-gradient(var(--edge), var(--edge)) 0 0 / 100% var(--dt) no-repeat,
    var(--spine-img) 0 0 / var(--dl) 100% no-repeat,
    var(--spine-grad) 0 0 / var(--dl) 100% no-repeat;
}

.cover-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  width: 100%;
  padding: var(--s1);
  border: 2px dashed var(--ink-soft);
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.cover-ph-title { font: 600 15px/1.15 var(--display); }

/* The site's one quote component: a white card tipped a little, the excerpt in Jost with red
   curly marks, the source under it. Tilts cycle down a page (build.py TILTS). */
.quote-card {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  rotate: var(--tilt, 0deg);
}
.quote-card blockquote { margin: 0; }
.quote-card p { margin: 0 0 6px; font: 600 16px/1.35 var(--display); color: var(--ink); }
.quote-card p::before { content: "\201C"; color: var(--red); }
.quote-card p::after { content: "\201D"; color: var(--red); }
.quote-card p.own-marks::before, .quote-card p.own-marks::after { content: none; }
.quote-card figcaption { font: 13px/1.45 var(--body); color: var(--ink-soft); }
.quote-card figcaption a { color: var(--ink-soft); }
.quote-grid, .quote-stack { display: grid; gap: var(--s3); align-items: start; }
.quote-stack { gap: var(--s2); align-content: start; }
.quote-stack .more-link { margin: 0; }

/* Lists of linked items: only the title is the link. */
.plain-list { list-style: none; margin: 0; padding: var(--s2) var(--s3); }
.plain-list li { padding: var(--s1) 0; border-bottom: 1px dotted rgba(0, 62, 77, 0.25); }
.plain-list li:last-child { border-bottom: 0; }
.links { font-size: 14px; }

/* The mailing list: one button and one line (Square). */
.signup { display: grid; gap: var(--s1); justify-items: start; }
.signup > p { margin: 0; }
.signup-note { font-size: 14px; color: var(--ink-soft); }
.signup-card { max-width: 560px; width: 100%; margin: 0 auto; }
/* The signup form (posts to Kit, data/signup.json). */
.signup-form { display: grid; gap: 4px; width: 100%; justify-self: stretch; }
.signup-form > p { margin: 0; }
.signup-title { font: 700 21px/1.2 var(--display); color: var(--teal-dark); }
.signup-sub { margin-bottom: var(--s1) !important; font-size: 15px; }
.signup-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
.signup-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 14px;
  border: 2px solid rgba(0, 62, 77, 0.25);
  border-radius: var(--radius-sm);
  background: #fff;
  font: 16px/1.3 var(--body); /* 16px: no zoom on iPhone */
  color: var(--ink);
}
.signup-input::placeholder { color: var(--ink-soft); opacity: 1; }
.signup-input:focus { border-color: var(--teal-dark); outline: 2px solid var(--teal-dark); outline-offset: 1px; }
.signup-status { font-size: 15px; font-weight: 700; color: var(--teal-dark); }
.signup-status:empty { display: none; }
.signup-status.is-error { color: var(--red-text); }
.signup-form.is-done .signup-row { display: none; }
.signup:has(.is-done) .signup-note { display: none; }
.signup-form button[disabled] { opacity: 0.7; cursor: wait; }

/* The box set line above the footer, and the short repeat near the bottom of Home. */
.boxset-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s1) var(--s2);
  margin: var(--s5) 0 0;
  font: 600 16px/1.4 var(--display);
  text-align: center;
}
.boxset-line p { margin: 0; }

.price { font: 700 40px/1 var(--display); color: var(--ink); }
.ship { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- home */

.bio-quote { font: 600 19px/1.4 var(--display); }

/* Clips: the play icon swapped for pause while playing. */
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: block; }

/* ---------------------------------------------------------------- shows, contact */

.shows { position: relative; display: grid; gap: var(--s2); }
.shows::after {
  content: "";
  position: absolute;
  top: -26px;
  right: -8px;
  width: 110px;
  height: 66px;
  background: url(/img/live/shows-cloud.png) no-repeat center / contain;
  pointer-events: none;
}
.no-shows { margin: 0; padding-right: 80px; font: 600 18px/1.4 var(--display); }
.show-list { list-style: none; margin: 0; padding: 0; }
.show-list li { display: grid; gap: 6px; margin-bottom: var(--s2); }
.show-date {
  justify-self: start;
  padding: 4px 12px;
  background: var(--teal) url(/img/live/show-date.jpg) center / cover;
  color: #fff;
  text-shadow: 0 -1px 1px #0f3e37;
  font: 600 15px/1.4 var(--display);
}
.show-venue strong, .show-venue em { display: block; }
.contact-card p:last-child { margin-bottom: 0; }

.contact-card { max-width: 680px; }
.contact-card a { overflow-wrap: anywhere; }
.contact-card p:last-child { text-align: right; } /* Email Christy */
.facebook { margin: var(--s3) 0 0; }

/* ---------------------------------------------------------------- lyrics page: every album */

.album { display: grid; gap: var(--s3); scroll-margin-top: 12px; }
.album + .album { margin-top: var(--s5); }
.album + .album::before { margin-bottom: var(--s3); } /* plus the grid gap */
.album-top { display: grid; gap: var(--s3); }
.album-title { margin: 0; font-size: 36px; font-weight: 700; color: var(--red-text); }
.info-title { margin: var(--s2) 0 var(--s1); font-size: 19px; font-weight: 600; color: var(--teal-dark); }
.album-title { margin-bottom: var(--s2); }
.album-year { font: 400 14px var(--body); color: var(--teal-dark); white-space: nowrap; }
/* Phones: art, then title and year, then the quotes, then credits. From 760px the art and its
   quotes make the left column and the credits get the whole right one. */
.album-art, .album-info { display: contents; }
.album-hero { order: 0; }
.album-head { order: 1; }
.album-quotes { order: 2; display: grid; gap: var(--s2); padding: 0 6px; }
.credits { order: 3; }
/* Home's quote card, scaled down to sit under the art. */
.quote-card-small { padding: 10px 12px; }
.quote-card-small p { font-size: 15px; line-height: 1.32; }
.quote-card-small figcaption { font-size: 12.5px; }

/* Cover with the disc peeking out to the right. The cover takes 78% of the box,
   the disc (86% of the cover, the size of a CD next to its sleeve) sits behind it. */
.album-hero {
  position: relative;
  width: 100%;
  max-width: var(--cover-max);
  margin: 10px auto 22px; /* room for the buttons hanging off its corner */
}
.album-hero.has-disc { max-width: calc(var(--cover-max) * 1.28); }
.album-hero { container-type: inline-size; }
.album-hero .cd { --dl: 2.8cqw; --dt: max(1px, 1cqw); }
.album-hero.has-disc .cd { --dl: calc(2.8cqw * 0.781); --dt: max(1px, 0.781cqw); }
.album-hero .cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  box-shadow: var(--cover-shadow);
  transform: rotate(-1.2deg);
}
.album-hero.has-disc .cover { width: 78.1%; }
.album-hero .disc {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 32%;
  width: 67.2%;
  height: auto;
  margin-top: -33.6%; /* half the disc's height; margins are a share of the hero's width */
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.3));
  rotate: -20deg;
  transition: rotate 0.6s var(--ease), translate 0.6s var(--ease);
}
.cover-wrap { position: relative; z-index: 1; display: block; width: 100%; }
.cover-wrap.is-playable { cursor: pointer; }
/* Play the album's clips, and See in Store, hanging off the cover's bottom-right corner, tilted
   with it: red play, white store, the reverse of the site's usual buttons so they stand out on the
   art. The play button needs site.js, so it only shows with JS. */
.album-tools {
  position: absolute;
  z-index: 2;
  right: -14px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 8px;
  rotate: -1.2deg;
}
.album-hero.has-disc .album-tools { right: calc(21.9% - 14px); }
.album-play {
  display: none;
  place-items: center;
  width: clamp(60px, 18cqw, 80px);
  height: clamp(60px, 18cqw, 80px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red) url(/img/live/news-red.jpg) center / cover;
  box-shadow: 0 3px 8px rgba(0, 62, 77, 0.35);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.js .album-play { display: grid; }
.album-play svg { width: 46%; height: 46%; fill: #fff; }
.album-play .i-pause { display: none; }
.album-play.is-playing .i-play { display: none; }
.album-play.is-playing .i-pause { display: block; }
.album-play:hover, .album-play.is-playing { background: #fff; }
.album-play:hover svg, .album-play.is-playing svg { fill: var(--red); }
.album-play:hover { transform: scale(1.06); }
.album-store { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 16px; background: #fff; color: var(--red-text); box-shadow: 0 2px 6px rgba(0, 62, 77, 0.3); }
.album-store:hover { color: #fff; background: var(--red) url(/img/live/news-red.jpg) center / cover; }
.album-hero.has-disc .cover-wrap { width: 78.1%; }
.album-hero.has-disc .cover-wrap .cover { width: 100%; }
/* Hovered, the disc rolls a good way out of its sleeve, well short of halfway, under the credits beside it. */
.album-hero:hover .disc { translate: 11% 0; rotate: 26deg; }
.album-info { position: relative; z-index: 1; }


/* A song's clip button: small and red with a white play icon, like the album's; white, with a red
   pause, while it plays. */
.track-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.track-play svg { width: 16px; height: 16px; fill: #fff; }
.track-play .i-pause { display: none; }
.track-play.is-playing .i-pause { display: block; }
.track-play:hover, .track-play.is-playing { background: #fff; }
.track-play:hover svg, .track-play.is-playing svg { fill: var(--red); }
.track-play:hover { transform: scale(1.1); }
.track-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.credits { font-size: 13px; line-height: 1.45; }
.credits > p { margin: 0 0 var(--s1); }
.credit-list { margin: 0 0 var(--s1); padding: 0; list-style: none; }
.credit-list li { margin-bottom: 2px; }
.credit-list .who { font-weight: 700; }
.credit-list .who::after { content: ":"; }
.credit-notes p { margin: 0 0 4px; }

/* Every song open, two columns on wide screens; a song never splits across columns. */
.lyrics-wall { scroll-margin-top: 12px; }
.lyric-cols { padding: var(--s3) var(--s3) var(--s1); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.lyric { break-inside: avoid; margin: 0 0 var(--s3); scroll-margin-top: 12px; }
.lyric-head { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s1); }
.lyric h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 21px; color: var(--teal-dark); }
/* The track number: small and in the play button's red, left of the title, so it never reads as
   part of it. Screen readers hear "Track 1" in full. */
.track-no {
  flex: none;
  font: 600 15px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--red);
}
.lyric .writer { margin: -4px 0 var(--s1); font-size: 13px; color: var(--ink-soft); }  /* the credits' size */
.lyric p { margin: 0 0 12px; line-height: 1.55; }
.cue { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.lyric:target h3 { color: var(--red-text); }

/* ---------------------------------------------------------------- videos: one player, the rest below */

/* The player breaks out of the text column: the window's width less the gutters, up to 1280px. */
.feature {
  --feature-w: min(1280px, 100vw - 2 * var(--gutter));
  width: var(--feature-w);
  margin-left: calc(50% - var(--feature-w) / 2);
  scroll-margin-top: 12px;
}
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: 12px; scroll-margin-top: 12px; }
.video-title { margin: 0; font-size: 22px; color: var(--teal-dark); }
.video-album { margin: 2px 0 0; font: 600 16px var(--display); }
.video-credit, .video-note { margin: 6px 0 0; font: 14px/1.5 var(--body); color: var(--ink-soft); }

.more-videos { margin-top: var(--s5); }
.video-picks { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.video-pick { display: block; text-decoration: none; }
.pick-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow);
}
.pick-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.pick-title { display: block; margin-top: var(--s1); font: 600 19px/1.25 var(--display); color: var(--teal-dark); }
.video-pick:hover .pick-title { color: var(--red-text); }
.video-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--red) url(/img/live/news-red.jpg) center / cover;
  box-shadow: 0 3px 0 rgba(112, 40, 20, 0.45);
  transition: transform 0.2s var(--ease);
}
.video-icon svg { width: 30px; height: 30px; fill: #fff; }
.video-pick:hover .video-icon, .video-pick:focus-visible .video-icon { transform: scale(1.08); }

/* ---------------------------------------------------------------- about */

.rsec { margin: var(--s5) 0 0; scroll-margin-top: 12px; }
.vh + .rsec { margin-top: 0; }
.radio span { color: var(--ink-soft); font-size: 14px; }
.radio .spins { display: block; margin-top: 2px; color: var(--ink); }
/* About: "You might have seen the Good Buddies at": event over place, nothing else. */
.seen { display: grid; margin: 0; padding: var(--s1) var(--s3); list-style: none; }
.seen li { display: grid; gap: 2px; align-content: start; padding: 12px 0; border-top: 1px solid rgba(0, 62, 77, 0.14); }
.seen li:first-child { border-top: 0; }
.seen-event { font: 600 17px/1.25 var(--display); color: var(--teal-dark); }
.seen-where { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }

/* About: Brian's story beside the reviews no other page quotes. */
.story-cols { display: grid; gap: var(--s3); }
.story-text { align-self: start; } /* ends where its words end, for site.js to measure */
.story-text p { margin: 0 0 var(--s2); line-height: 1.65; }
.story-open { font: 500 19px/1.5 var(--display); }
.story-text p:last-child { margin-bottom: 0; }
.about-reviews { gap: var(--s2); align-content: start; }
.about-reviews .list-title { margin: 0; }
/* The reviews that would run past the story's end (site.js, from 760px), in balanced columns under it. */
.reviews-more { margin-top: var(--s4); columns: 2; column-gap: var(--s4); }
.reviews-more .quote-card { break-inside: avoid; margin-bottom: var(--s3); }
.two-lists { display: grid; gap: var(--s3); align-items: start; }
.list-title { margin: 0 0 var(--s1); font-size: 19px; color: var(--teal-dark); }
.giving-card > p { margin: 0 0 var(--s2); line-height: 1.6; }
.giving-card > p:last-child { margin-bottom: 0; }
.giving-card .plain-list { padding: 0; }

/* ---------------------------------------------------------------- store */

/* The box set, no box around it: the crate render (transparent) and its pitch. Phones stack them
   under the header. From 760px the section takes the header stage's width and units (--sw, --u,
   the same as .site-header) and moves up into it: the crate just under the logo, the pitch on the
   cloud just under the nav. Type there scales in stage units, with floors. */
.boxset { display: grid; gap: var(--s2); margin: 0; scroll-margin-top: 12px; }
.boxset-photo { display: block; width: 100%; height: auto; }
.boxset-pitch { text-align: center; }
.boxset-title { margin: 0 0 var(--s1); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--red-text); text-wrap: balance; }
.boxset-line-sub { margin: 6px 0 var(--s1); font: 500 18px/1.35 var(--display); color: var(--teal-dark); } /* breaks after "pre-order:" (build.py) */
.boxset-line-sub a { color: inherit; font-weight: 700; }
.boxset-note { margin: -4px 0 var(--s1); font: italic 400 15px/1.35 var(--display); color: var(--teal-dark); }
.boxset-line-sub a:hover { color: var(--red-text); }
.boxset-sub { margin: 0; font-size: 17px; line-height: 1.45; text-wrap: balance; }
.boxset-sub + .boxset-sub { margin-top: var(--s1); }
/* Under the crate and its title: what a digidisc is, and the button with its close line. */
.boxset-buy { display: grid; gap: var(--s2); align-items: center; }
.boxset-title .title-line { display: block; } /* the headline breaks after its comma */
.boxset-story { text-align: center; }

/* The Store's pre-order card (build.py store_gate). Its front is the button and the close line on the
   yellow; the button turns it over, like a disc in the hand, to a white card with the digidisc line
   and the real checkout button. Without JS both sides show, stacked. */
.gate-face {
  display: grid;
  gap: var(--s1);
  justify-items: center;
  padding: var(--s2);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.gate-face + .gate-face { margin-top: var(--s2); }
.gate-front { padding-top: 0; background: none; box-shadow: none; } /* the button on the yellow; the card is its back */
.gate-face .ship { margin: 0; font-size: 14px; color: var(--ink); }
.gate-kicker { margin: 0; font: 700 14px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-text); }
.gate-text { margin: 0; font-size: 15px; line-height: 1.5; }
.gate-forever { margin: 0; font: 600 16px/1.4 var(--display); color: var(--teal-dark); text-wrap: balance; }
.gate-go { margin: 4px 0 0; }
.gate-return { padding: 2px 6px; border: 0; background: none; font: 500 14px var(--display); color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
html:not(.js) .gate-front .btn, html:not(.js) .gate-return { display: none; }
/* The card is as tall as the side showing: the other lies over it, out of the flow. */
.js .gate { position: relative; perspective: 1400px; }
.js .gate-face { margin: 0; align-content: start; backface-visibility: hidden; transition: transform 0.7s var(--ease); }
.js .gate-back { position: absolute; inset: 0 0 auto; transform: rotateY(180deg); }
.js .gate.is-open .gate-front { position: absolute; inset: 0 0 auto; transform: rotateY(-180deg); }
.js .gate.is-open .gate-back { position: relative; transform: rotateY(0deg); }

/* The educator's discount: a clipped coupon under the card. */
.edu {
  margin: var(--s2) 0 0;
  padding: 10px 14px;
  border: 2px dashed var(--teal-dark);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  rotate: -1deg;
  font: 500 15px/1.4 var(--display);
  color: var(--teal-dark);
  text-align: center;
}
.edu-title { display: block; font-weight: 700; color: var(--red-text); }
.buy-row { margin: 0 0 var(--s1); }
.page-store .btn-big { text-wrap: balance; } /* the long label left "soon" alone on a third line at 360-375px */
.boxset .ship { text-wrap: balance; color: var(--ink); } /* on the yellow paper on phones; ink-soft falls under 4.5:1 there */
.closed-msg { margin: 0 0 var(--s1); font: 600 18px/1.4 var(--display); }
/* Phones: the usual header, then Brian's letter in its card and the box set. */
.page-store .letter { margin-top: var(--s2); }
.page-store .boxset { margin-top: var(--s4); }
@media (min-width: 760px) {
  .page-store { --sw: calc(100vw * 967 / 940); --u: calc(var(--sw) / 967); }
  /* The letter's heading, big, in the header's cloud: a box in header units (from the stage's left
     edge) centered on the cloud below the nav. The letter runs the page's width under it. */
  /* The heading sits in front of the cloud and the letter's card tucks behind its foot, so the
     cloud rests on the card: main makes no layer of its own, the heading goes over the header
     (z 2) and the card under it. */
  .page-store main.wrap { z-index: auto; }
  /* The big cloud without its blue brush stroke (tools/make_store_cloud.py): the stroke goes behind
     the heading instead. Header units are the stage's (0 at its left and top edges). */
  /* That art also lifts the cloud 40 units over the rainbow, so the Store's header is 40 shorter. */
  .page-store .stage { height: calc(var(--u) * 255); background-image: url(/img/header-rainbow-store.png); }
  .page-store .letter { margin-top: 0; }
  /* Two lines centered on the cloud (its center is at 646, 120), a touch high, the stroke behind them. */
  .page-store .letter .section-title {
    position: relative;
    z-index: 3;
    width: calc(var(--u) * 450);
    margin: calc(var(--u) * (74 - 255)) 0 0 calc(50% - var(--sw) / 2 + var(--u) * (646 - 225));
    font-size: calc(var(--u) * 44);
    line-height: 1.05;
    text-align: center;
  }
  .page-store .letter-line { display: block; }
  .page-store .letter .section-title { font-style: italic; } /* the letter itself is upright */
  .page-store .letter .section-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 2) calc(var(--u) * 10);
    background: url(/img/store-smudge.png) no-repeat center / 100% 100%;
  }
  /* The letter starts in the open space under the logo (at 162) and wraps around the cloud: a float
     shaped like the cloud's left edge and foot (14 units clear of it), from x 380 to the lines' end,
     ending just below the foot (at 232). Its opening mark hangs past the content's left
     edge. It rides over the header (z 3). Its lines end early, at stage x 700, leaving the right for
     the signature, which sits on the yellow under the cloud's right lobe. */
  .page-store .letter-card { margin: calc(var(--u) * (162 - 166)) 0 var(--s4); }
  /* Below 1000px the content edge is too near the window's, so the mark sits in a 44px margin. */
  .page-store .letter-card blockquote { --pad: 44px; z-index: 3; padding: 0 calc(50% + var(--sw) / 2 - var(--u) * 700) 0 var(--pad); }
  .page-store .letter-card p:first-child::before { left: -4px; top: -10px; }
  .page-store .letter-card blockquote::before {
    content: "";
    float: right;
    width: calc(var(--u) * (700 - 380)); /* from stage x 380 to the lines' end */
    height: calc(var(--u) * 78);
    shape-outside: polygon(
      calc(var(--u) * 3) 0, calc(var(--u) * 15) calc(var(--u) * 20),
      calc(var(--u) * 52) calc(var(--u) * 40), calc(var(--u) * 143) calc(var(--u) * 60),
      calc(var(--u) * 250) calc(var(--u) * 74), 100% calc(var(--u) * 78), 100% 0);
  }
  .page-store .letter-card .signoff {
    z-index: 4;
    top: calc(var(--u) * (242 - 162)); /* on the yellow, just under the cloud's foot (232) */
    left: calc(50% - var(--sw) / 2 + var(--u) * 694); /* 704 from 1000px; here the stage is the window's width */
    right: auto;
    bottom: auto;
    width: calc(var(--u) * 172); /* past the content's right edge, so not capped to the room left there */
  }
  .page-store .signature { width: 100%; max-width: none; }
  .page-store .boxset { margin-top: 0; }
  /* The crate across the full width (the rainbow's, on the Store), its title set in the open space to the right of the crate;
     then the subline, then the digidisc note on the left and the button with its close line on the right. */
  .boxset { position: relative; gap: var(--s3) var(--s4); }
  /* The render as wide as the header's rainbow (--sw), centered on the page, past the content's edges. */
  .page-store .boxset-art { width: min(var(--sw), 100vw); margin-left: calc(50% - min(var(--sw), 100vw) / 2); }
  .boxset-pitch { text-align: left; }
  /* Wide: from right of the crate (52% across the render, with the banana at its left) to the content's right edge (the render
     may pass it; the words don't), leaving room for a banana by the crate. */
  .boxset-head {
    --rw: min(var(--sw), 100vw);
    position: absolute;
    top: 2%;
    left: calc((100% - var(--rw)) / 2 + var(--rw) * 0.52);
    right: 0;
  }
  .boxset-title { margin: 0; font-size: calc(var(--u) * 38); text-wrap: balance; }
  .boxset-line-sub { font-size: calc(var(--u) * 20); }
  .boxset-note { font-size: calc(var(--u) * 16); }
  /* The story on the left, the pre-order card beside it, level with its top. */
  .boxset-buy { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
  .boxset-story { text-align: left; }
}
@media (min-width: 1000px) {
  .page-store { --sw: 967px; }
  .page-store .letter-card blockquote { --pad: 0px; }
  .page-store .letter-card p:first-child::before { left: -52px; } /* hangs past the content's left edge */
  .page-store .letter-card .signoff { left: calc(50% - var(--sw) / 2 + var(--u) * 704); width: calc(var(--u) * 190); }
}

/* Store products, from data/products.json: the plain content card, shown once there are two. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.product-card { display: grid; gap: var(--s1); align-content: start; }
.product-img { display: block; width: 100%; height: auto; }
.product-name { margin: var(--s1) 0 0; font-size: 21px; font-weight: 700; color: var(--red-text); }
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { text-decoration: underline; }
.product-card p { margin: 0; }

/* Brian's letter: the heart of the page, so the most readable type on it. No card: the words sit on
   the yellow, a big red opening mark hanging at their corner and his signature (tools/make_signature.py,
   cut out of its paper) hanging off the bottom right. */
.letter-card { position: relative; margin: 0 0 104px; }
.letter-card blockquote {
  position: relative;
  margin: 0;
  padding: 0 34px; /* a margin each side for the big marks */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.letter-card p { margin: 0 0 var(--s1); text-wrap: pretty; } /* no one-word last lines */
.letter-card p:last-child { margin: 0; }
.letter-card p:first-child::before {
  content: "\201C";
  position: absolute;
  left: 2px;
  top: -6px;
  font: 700 64px/1 var(--display);
  color: var(--red);
}
/* The closing mark matches the opening one and hangs off the last word, so it changes no line. */
.letter-card .last-word { position: relative; }
.letter-card .last-word::after {
  content: "\201D";
  position: absolute;
  left: calc(100% + 2px);
  top: -8px;
  font: 700 64px/1 var(--display);
  color: var(--red);
  pointer-events: none;
}
.letter-card .signoff { position: absolute; right: 12px; bottom: -120px; rotate: -5deg; }
.signature { display: block; width: 180px; height: auto; }
@media (min-width: 760px) {
  .letter-card blockquote { padding: 0 44px 0 56px; }
  .letter-card p:first-child::before { left: 4px; top: -10px; font-size: 80px; }
  .letter-card .last-word::after { top: -12px; font-size: 80px; }
}

.gives-back .card { margin: 0; }
.for-stores { scroll-margin-top: 12px; }
.for-stores > p { margin: 0 0 var(--s2); }

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

.site-footer { position: relative; margin-top: var(--s5); }
.signup-wrap { position: relative; z-index: 1; }

.footer-band {
  height: 170px;
  margin-top: -8px;
  background: url(/img/live/footer-band-24.png) no-repeat center bottom;
  background-size: auto 170px;
}
.footer-meta {
  padding: 4px var(--gutter) var(--s4);
  background: var(--cloud);
  text-align: center;
  font-size: 14px;
}
.footer-meta p { margin: 6px 0; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: var(--s1); font: 600 16px var(--display); }
.foot-nav a { text-decoration: none; }

/* ---------------------------------------------------------------- tablet */

@media (min-width: 760px) {
  .lyric-cols { columns: 2; column-gap: 40px; padding: var(--s3) var(--s4) var(--s1); }

  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
  .story-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s4); }
  .two-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .album-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; column-gap: var(--s4); }
  .album-art, .album-info { display: grid; gap: var(--s3); align-content: start; }
  .album-quotes { padding: 0 var(--s2); }
  .credits .info-title { margin-top: 0; }
  .album-hero { margin: 0 0 22px; }


  .video-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .seen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .seen li:nth-child(2) { border-top: 0; }

  .footer-band { height: 220px; background-size: auto 220px; }
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 1000px) {
  .footer-band { height: 274px; background-size: 1250px 274px; }
}

/* ---------------------------------------------------------------- motion */

@media (max-width: 759px) {
  /* Keep the peeking disc inside the hero so the Lyrics page doesn't scroll sideways. */
  .album-hero { overflow-x: clip; }
  .album-hero:not(.has-disc) .album-tools { right: 0; } /* a cover without a disc runs to the gutter */
  .album-hero:hover .disc { translate: none; }
}

/* Quote cards keep their tilt here: it isn't motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .strip-item:hover, .strip-item:focus-visible { transform: none; }
  .strip-item:hover { outline: 3px solid var(--red-text); outline-offset: 2px; }
  .album-hero:hover .disc { translate: none; rotate: -20deg; }
}