/* ==========================================================================
   DONT BE FAMOUS RECORDS
   15 colors, 35 years.

   The whole site runs on the five album colors below. To add a record,
   add one --album block here and one <a class="chip"> on index.html.
   Nothing else needs to change.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- the colors ------------------------------------------------------ */
  --polyester:  #FFE1F2;
  --skintight:  #0D4ACC;
  --filamingo:  #02903E;
  --abbot:      #FE9900;
  --costello:   #8F3399;

  /* A second tone for each record, same hue, different light, picked by eye.
     Mixing toward black or white instead keeps the saturated ones but turns
     Polyester's pink grey. The coats on the phone rack use them for cuffs and
     curls (site.js), and --polyester-fur also draws POLYESTER's paragraph
     bar, where its own pink would disappear. */
  --polyester-fur: #F2A8CB;
  --skintight-fur: #6E95EC;
  --filamingo-fur: #4FBE7B;
  --abbot-fur:     #FFC163;
  --costello-fur:  #C282CA;

  /* --- ground ---------------------------------------------------------- */
  --paper:      #FBFAF5;   /* warm off-white, sampled from the logo card */
  --ink:        #12110F;
  --muted:      #78736A;
  --rule:       #E3DFD4;
  --blank:      #ECE8DC;

  /* --- type ------------------------------------------------------------ */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mono:  0.6875rem;
  --fs-small: 0.9375rem;
  --fs-body:  1.125rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* soft corners: covers get the rounder one, photos the smaller */
  --soft-cover: 16px;
  --soft-photo: 12px;
  --measure: 62ch;

  /* set per-section by the flood; everything inherits from it */
  --fg: var(--ink);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto matters as much as max-width. Images carry width/height
   attributes to reserve their space, and without this a constrained width
   leaves the attribute height standing and stretches the picture. */
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; max-width: var(--measure); }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible {
  outline: 2.5px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ==========================================================================
   Shared type
   ========================================================================== */

.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.86;
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.75rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.5;
}

.shell {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.narrow { max-width: 46rem; }

/* ==========================================================================
   Site nav
   ========================================================================== */

.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  color: var(--fg);
  transition: color 0.55s ease;
}

.nav a { text-decoration: none; }

.nav-home {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-dots { display: flex; gap: 2.5px; }
.nav-dots i { width: 8px; height: 8px; display: block; }

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* sits on the right of the stage, so it takes the right-hand ink */
.nav-links { color: var(--fg-alt, var(--fg)); }

.nav-links a { text-decoration: none; opacity: 0.72; transition: opacity 0.2s; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"] { text-decoration: underline; }

/* ==========================================================================
   The stage — logo, grid, and the ink flood
   ========================================================================== */

.stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* --fg is the ink for the left of the stage, --fg-alt for the right.
     They only differ for a record whose flood splits into two colors. */
  --fg: var(--ink);
  --fg-alt: var(--fg);
}

/* the flood itself: one circle, scaled from the hovered chip */
.flood {
  position: absolute;
  z-index: 0;
  width: 220vmax;
  height: 220vmax;
  border-radius: 50%;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.9s cubic-bezier(0.22, 0.74, 0.16, 1),
    background-color 0.45s ease;
  will-change: transform;
  pointer-events: none;
}
.stage.is-flooded .flood { transform: translate(-50%, -50%) scale(1); }

/* Abbot & Costello is one square holding two colors. The circle floods orange,
   then this covers the right half in purple — half the screen each. */
.flood-split {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.stage.is-split .flood-split {
  opacity: 1;
  transition: opacity 0.5s ease 0.28s;
}

/* Split ink, for the nav links and the footer lines under the grid. Each link carries its own gradient,
   clipped to its letters and breaking where the seam crosses it — dark over
   the left color, light over the right. site.js works out --seam per link.
   Names and headings don't do this: they stay one solid color. */
.is-split .ink {
  background: linear-gradient(90deg, var(--ink-l) var(--seam, 50%), var(--ink-r) var(--seam, 50%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stage-inner {
  position: relative;
  isolation: isolate;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2rem, 6vw, 4rem);
  color: var(--fg);
  transition: color 0.55s ease;
}

.stage-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.stage-head .wordmark {
  font-size: clamp(2.3rem, 7.6vw, 6rem);
}

.slogan {
  /* the paragraph measure would wrap it; it's one line wherever it fits */
  max-width: none;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Words that depend on the screen: "Tap" on a phone, "Click" with a mouse. */
.on-phone { display: none; }
@media (max-width: 40rem) {
  .on-phone { display: inline; }
  .on-wide { display: none; }
}

/* Hover gives a mouse its own invitation; a touch screen gets none, so
   phones are told the squares do something. */
.tap-hint {
  display: none;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
@media (hover: none) {
  .tap-hint { display: block; }
}
/* "color", one letter per record, in the order of the squares. POLYESTER's
   pink takes its deeper tone, as it does wherever it sits on the paper. */
.color-word span:nth-child(1) { color: var(--polyester-fur); }
.color-word span:nth-child(2) { color: var(--skintight); }
.color-word span:nth-child(3) { color: var(--filamingo); }
.color-word span:nth-child(4) { color: var(--abbot); }
.color-word span:nth-child(5) { color: var(--costello); }

/* --- the grid -------------------------------------------------------- */

/* The logo is a wordmark over one row of swatches. So is the homepage —
   fifteen squares in a line, the first five inked, ten still to come. */
.grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: clamp(3px, 0.55vw, 9px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid li { display: contents; }

.chip {
  position: relative;
  aspect-ratio: 1;
  display: block;
  text-decoration: none;
  color: var(--fg);
  background: var(--sw, transparent);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease;
}

.chip-blank {
  border: 1.5px solid currentColor;
  opacity: 0.22;
}
/* the empty squares are buttons now (tap one to hear that color first) */
button.chip-blank {
  width: 100%;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
button.chip-blank:hover { opacity: 0.45; }
/* the square you tapped stays lit while you type */
.chip-blank.is-picked { opacity: 0.8; }

/* Polyester's artwork is almost white — without this it dissolves into the
   paper. A hairline keeps every square legible whatever the cover looks like. */
.chip:not(.chip-blank) {
  box-shadow: inset 0 0 0 1px rgba(18, 17, 15, 0.12);
}

.chip-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* a scrim in the chip's own color, so the label stays readable on any artwork */
.chip::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 1;
  background: linear-gradient(to top, var(--sw), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.chip:hover::before,
.chip:focus-visible::before { opacity: 1; }

/* Squares this small can't hold a caption — the name appears in the
   readout line below the grid instead. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip:hover .chip-cover { transform: scale(1.08); }

/* the square dissolves into its own flood, so a ring keeps it findable */
.chip:hover,
.chip:focus-visible {
  transform: translateY(-9px) scale(1.14);
  box-shadow: inset 0 0 0 1px rgba(18, 17, 15, 0.12), 0 0 0 2px currentColor;
  z-index: 3;
}

/* dim everything that isn't the hovered record */
.grid.has-hover .chip:not(:hover) { opacity: 0.38; }

/* the unreleased record breathes until it's out */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.chip.is-upcoming::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2.5px solid var(--paper);
  animation: breathe 2.8s ease-in-out infinite;
  pointer-events: none;
}
.grid.has-hover .chip.is-upcoming::after { animation: none; opacity: 0; }

/* --- cover preview ---------------------------------------------------
   The squares are too small to read artwork, and the right half of the
   hero is empty. Hovering a record puts its sleeve there, full size. */

/* shares a row with the wordmark so it can never collide with the grid */
.stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}
.stage-top .stage-head { flex: 1 1 auto; min-width: 0; }

.preview {
  flex: 0 0 auto;
  width: min(30vw, 20rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(14px) scale(0.97);
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.preview.is-on {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.preview-frame {
  aspect-ratio: 1;
  border-radius: var(--soft-cover);
  background: var(--pv, var(--ghost));
  overflow: hidden;
  box-shadow:
    0 34px 60px -24px rgba(18, 17, 15, 0.55),
    inset 0 0 0 1px rgba(18, 17, 15, 0.12);
}
.preview-frame img { width: 100%; height: 100%; object-fit: cover; }

/* the record's name, set like the wordmark it stands in for */
.preview figcaption {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--cap, 1.6rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-alt, var(--fg));
  /* empty until a record is picked — hold the line so the grid doesn't jump */
  min-height: 1em;
}

/* A phone has no empty half to put the sleeve in, so it takes the wordmark's
   place instead: tap a colour and the wordmark hands over to that record's
   artwork. The box is sized for the sleeve even at rest, so the swap never
   shifts the squares out from under your thumb. */
@media (max-width: 64rem) {
  .stage-top {
    /* The sleeve, and the room it needs including its caption. Width wins on
       a tall phone, so the artwork runs the full width less the margin; the
       height cap takes over on a short one, keeping the hero to one screen. */
    --sleeve: min(calc(100vw - 2 * var(--gutter)), 38vh);
    --cap: 1.6rem;
    display: grid;
    /* 1fr, or the space-between inherited from the flex rule above leaves the
       single auto column sized to its contents and the sleeve sits off-centre */
    grid-template-columns: 1fr;
    align-items: center;
    min-height: calc(var(--sleeve) + 0.7rem + var(--cap));
  }
  .stage-top > * { grid-area: 1 / 1; }

  .stage-head { transition: opacity 0.3s ease; }
  .stage.is-flooded .stage-head { opacity: 0; }

  .preview {
    width: 100%;
    gap: 0.7rem;
    transform: scale(0.96);
  }
  .preview.is-on { transform: scale(1); pointer-events: auto; }

  .preview-frame {
    width: var(--sleeve);
    margin-inline: auto;
  }
  .preview figcaption { text-align: center; }
  .stage.is-split .preview figcaption { color: var(--fg); }
}

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

.stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.stage-foot strong { font-weight: 500; }
.stage-foot-main { display: flex; flex-direction: column; gap: 0.35rem; }
.stage-foot-alt { color: var(--fg-alt, var(--fg)); }

/* swaps between the countdown and whichever record you're hovering */
.readout {
  display: block;
  min-height: 1.2em;
  transition: opacity 0.2s ease;
}
.readout.is-swapping { opacity: 0; }

@media (max-width: 64rem) {
  .grid { grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
  .stage { min-height: auto; }
}

@media (max-width: 40rem) {
  /* stack the bar rather than let "Mix with me" wrap onto three lines */
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-block: 1.25rem;
  }
  .nav-home { white-space: nowrap; }

  /* the slogan won't fit on one line here: the name gets its own, no stray dot */
  .slogan-sep { display: none; }
  .slogan-name { display: block; margin-bottom: 0.45em; }

  /* Lift the hero a little: less room under the menu, and a slightly smaller
     space kept for the cover that appears on a tap, which pulls the squares up. */
  .stage-inner { padding-top: 0.75rem; }
  .stage-top { --sleeve: min(calc(100vw - 2 * var(--gutter)), 31vh); }

  .nav-links { justify-content: space-between; gap: 0.75rem; }
  .nav-links a { white-space: nowrap; }

  .stage-foot { flex-direction: column; gap: 0.5rem; }
}

/* --- the rack (phones) ------------------------------------------------- */

/* On a phone the records hang as fluffy coats on a rail instead of sitting in
   squares; the empty hangers are the colors still to come. site.js draws the
   coats and adds .has-rack to the stage, so without it the squares stay. */
.rack { display: none; }

@media (max-width: 40rem) {
  .stage.has-rack .grid,
  .stage.has-rack .preview { display: none; }
  /* nothing takes the wordmark's place on a tap any more */
  .stage.has-rack .stage-top { min-height: 0; }

  .stage.has-rack .rack {
    display: block;
    position: relative;
    /* the rail runs edge to edge, past the page margins */
    margin-inline: calc(-1 * var(--gutter));
  }
}

.rack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 6px;
  border-radius: 3px;
  background: var(--fg);
}

.rack-rail {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* snap to the page margin, not the screen edge */
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 8px;
  scrollbar-width: none;
}
.rack-rail::-webkit-scrollbar { display: none; }

/* the coats hang packed together, each overlapping the one before */
.rack-item {
  position: relative;
  flex: 0 0 104px;
  margin-right: -30px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.rack-item:last-child { margin-right: 0; }

.rack-item svg {
  display: block;
  width: 104px;
  height: auto;
  overflow: visible;
  transform-origin: 50% 6%;
  animation: rack-sway 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s);
}
.rack-item:not(.is-empty) svg { filter: drop-shadow(-6px 0 8px rgba(0, 0, 0, 0.18)); }

/* tapped: it comes off the rail as its color fills the screen */
.rack-item.is-lifted svg {
  animation: none;
  transform: translateY(-26px);
  transition: transform 0.25s ease;
}

@keyframes rack-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.rack-item:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.rack-tag {
  display: block;
  width: 74px;
  margin: 0.4rem 0 0 15px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.56rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rack-item.is-empty .rack-tag { color: var(--muted); }
.rack-item.is-picked .rack-tag { color: var(--fg); }

.coat-hanger {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.coat-curls,
.coat-seam { fill: none; stroke-linecap: round; }
.coat-ghost {
  fill: none;
  stroke: #BDB6A6;
  stroke-width: 1.3;
  stroke-dasharray: 3 3;
}
.rack-item.is-picked .coat-ghost { stroke: var(--fg); }

.rack-hint {
  margin: 0.3rem 0 0;
  padding-inline: var(--gutter);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the color that fills the screen on the way to the album page */
.rack-wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--wipe);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
.rack-wipe.is-split { background: linear-gradient(90deg, var(--abbot) 50%, var(--costello) 50%); }
.rack-wipe.is-on { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }

/* ==========================================================================
   Album pages
   ========================================================================== */

.album {
  --fg: var(--on);
  background: var(--sw);
  color: var(--on);
  position: relative;
}

.album-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 6rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .album-inner { grid-template-columns: 1.05fr 1fr; }
}

.album-meta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.album-title { font-size: clamp(2.6rem, 8vw, 5.5rem); }

.album-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}
.album-facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.album-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* one track for someone new, tucked under the Listen button */
.start-with {
  margin-top: -0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}

/* --- the sleeve ------------------------------------------------------ */

.sleeve-stage {
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 42vw, 30rem);
}

/* Square, lifted off the color band. The hairline matters for Polyester —
   its artwork is nearly white and would otherwise bleed into a pale ground. */
.sleeve {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  outline: 1px solid rgba(18, 17, 15, 0.14);
  outline-offset: -1px;
  border-radius: var(--soft-cover);
}

/* --- listen button --------------------------------------------------- */

.listen {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--on);
  color: var(--sw);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}
.listen:hover { transform: translateY(-2px); opacity: 0.88; }
.listen svg { width: 15px; height: 15px; flex: none; }

/* ABBOT & COSTELLO's button carries both of its colors: the label on the
   orange, the arrow on a purple end. The change of color falls between them,
   so no letter ever sits across it. */
.listen-duo {
  --cap: 3.75rem;
  background: linear-gradient(90deg, var(--abbot) calc(100% - var(--cap)), var(--costello) 0);
  color: #12110F;
  padding-right: 0;
  gap: 1.25rem;
}
.listen-duo svg {
  box-sizing: border-box;
  width: var(--cap);
  padding-inline: calc((var(--cap) - 15px) / 2);
  color: #FFFFFF;
}

.listen-ghost {
  background: transparent;
  color: var(--fg);
  border: 2px solid currentColor;
}

/* ==========================================================================
   Content sections
   ========================================================================== */

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: 0; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-head .mono { color: var(--muted); }

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: var(--measure);
}

.prose p { font-size: var(--fs-body); }

/* A bar in the record's color down the left of a whole passage: an album's
   story, the homepage premise, the mix pitch. */
.prose.has-bar {
  border-left: 5px solid var(--accent, var(--ink));
  padding-left: 1.1rem;
}
.prose.has-bar p { line-height: 1.55; }
/* POLYESTER's own pink all but vanishes on the paper, so its bar takes the
   deeper tone of the same pink. */
.prose.has-bar.is-pale { border-left-color: var(--polyester-fur); }
/* The label as a whole, not one record: all five, in order, like the
   swatches under the logo. */
.prose.has-bar.is-all {
  border-image: linear-gradient(
    var(--polyester-fur) 0 20%, var(--skintight) 20% 40%, var(--filamingo) 40% 60%,
    var(--abbot) 60% 80%, var(--costello) 80% 100%) 1;
}

/* The same five colors as an underline beneath a few words (the Process
   intro). Drawn as a background so the bands stay crisp; clone repeats them
   under each line if the words wrap on a phone. Bold is Newsreader 700,
   which only process.html loads; add it to a page's font link to use this
   elsewhere. */
.swatch-line {
  font-weight: 700;
  background: linear-gradient(90deg,
    var(--polyester-fur) 0 20%, var(--skintight) 20% 40%, var(--filamingo) 40% 60%,
    var(--abbot) 60% 80%, var(--costello) 80% 100%) no-repeat left bottom / 100% 3px;
  padding-bottom: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.pull {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 22ch;
  border-left: 5px solid var(--accent, var(--ink));
  padding-left: 1.1rem;
  margin: 0;
}

/* --- process strip --------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.card-frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--soft-photo);
  background: var(--blank);
  overflow: hidden;
  position: relative;
}
.card-frame img { width: 100%; height: 100%; object-fit: cover; }

.card-frame::after {
  content: attr(data-empty);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.card-frame:has(img, svg)::after { content: none; }
.card-frame svg { display: block; width: 100%; height: 100%; }

.card p { font-size: var(--fs-small); color: var(--muted); }

/* --- how a record happens (process) ---------------------------------- */
/* One picture stays pinned while the four stages scroll past, and changes
   with each: the fan opens, three hundred demos fade to twelve, the faders
   settle, the jacket comes last. Sentences ink in as they're reached.
   site.js adds .is-live (and .is-reading, unless motion is turned down);
   without it this is the fan beside four plain paragraphs. */

.build { display: grid; grid-template-columns: 1fr; }

.build-art {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 28vh;
  margin-inline: calc(-1 * var(--gutter));
  padding: 10px var(--gutter) 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.build-box {
  container-type: size;
  position: relative;
  height: 100%;
  border-radius: var(--soft-photo);
  overflow: hidden;
  background: var(--blank);
}
.build-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.build-panel.is-on { opacity: 1; }
.build-panel svg { display: block; width: 100%; height: 100%; }
.build-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 1 · the fan opens */
.build .chip {
  transform-box: view-box;
  transform-origin: 172px 532px;
  transform: rotate(var(--a));
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.build.is-live .build-panel:not(.is-on) .chip,
.build.is-shut .chip { transform: rotate(0deg); transition-delay: 0s; }
.build .chip:nth-of-type(2) { transition-delay: 0.08s; }
.build .chip:nth-of-type(3) { transition-delay: 0.16s; }
.build .chip:nth-of-type(4) { transition-delay: 0.24s; }
.build .chip:nth-of-type(5) { transition-delay: 0.32s; }

/* 2 · three hundred demos, twelve kept */
.build-demos {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 3px;
  width: min(86%, 30rem, 125cqh);   /* short enough to clear the label on a phone */
}
.build-demos i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.8;
  transition: opacity 0.9s, background-color 0.6s, transform 0.6s;
}
.is-on .build-demos i { opacity: 0.08; transition-delay: var(--d); }
.is-on .build-demos i.is-kept { opacity: 1; background: var(--k); transform: scale(1.35); transition-delay: 3.3s; }
.build-count {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font: 500 var(--fs-mono) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 3 · the faders settle */
.build-faders { display: flex; gap: clamp(14px, 5vw, 30px); height: 70%; }
.build-faders span { position: relative; width: 6px; border-radius: 3px; background: #CFC9BC; }
.build-faders b {
  position: absolute;
  left: 50%;
  top: var(--from);
  width: 30px;
  height: 14px;
  margin: -7px 0 0 -15px;
  border-radius: 3px;
  background: var(--ink);
  transition: top 1.4s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.is-on .build-faders b { top: var(--to); }

/* 4 · the jacket, last */
.build.is-live .build-panel img { clip-path: circle(0% at 50% 100%); transition: clip-path 1.1s cubic-bezier(0.6, 0, 0.2, 1); }
.build.is-live .build-panel.is-on img { clip-path: circle(150% at 50% 100%); }

.build-steps { padding-top: 2rem; }
.build-step { min-height: 55vh; padding-bottom: 3rem; }
.build-step:last-child { min-height: 0; }
.build-step .mono { color: var(--muted); }
.build-step h3 { margin: 0.3rem 0 0.6rem; }
.build-step p:last-child { font-size: var(--fs-body); line-height: 1.55; }

/* after the jacket: the call to book, with the five colors under the link */
.next-step { margin-top: clamp(2rem, 5vw, 3rem); max-width: 28rem; }
.next-step p { font-size: var(--fs-body); line-height: 1.55; margin-bottom: 0.9rem; }
.next-step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5rem 0 0.45rem;
  font: 500 var(--fs-mono) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(90deg,
    var(--polyester-fur) 0 20%, var(--skintight) 20% 40%, var(--filamingo) 40% 60%,
    var(--abbot) 60% 80%, var(--costello) 80% 100%) no-repeat left bottom / 100% 2px;
  transition: background-size 0.2s;
}
.next-step-link:hover, .next-step-link:focus-visible { background-size: 100% 3px; }
.next-step-link svg { width: 11px; height: 11px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.next-step-link:hover svg { transform: translateX(3px); }

/* the reading along */
.build.is-reading .build-step span { color: #C9C3B6; transition: color 0.5s ease; }
.build.is-reading .build-step span.is-read { color: var(--ink); }

@media (min-width: 56rem) {
  .build { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
  .build-art { top: 2rem; height: min(calc(100vh - 4rem), 34rem); margin: 0; padding: 0; border: 0; }
  .build-steps { padding-top: 0; }
  .build-step { min-height: 75vh; }
  .build-step:last-child { min-height: 22rem; }
}

/* --- records index --------------------------------------------------- */

.records { display: flex; flex-direction: column; }

.record-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-inline 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.record-row:last-child { border-bottom: 1px solid var(--rule); }
.record-row:hover { padding-inline: 0.85rem; background: var(--sw); color: var(--on); }
.record-row:hover .record-year { opacity: 1; }

.record-key {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--sw);
  flex: none;
}
.record-key.is-split { background: linear-gradient(135deg, var(--sw) 50%, var(--sw2) 50%); }

.record-name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
}

.record-year {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Booking
   ========================================================================== */

.book-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .book-grid {
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas: "intro cal" "prices cal";
    grid-template-rows: auto 1fr;
  }
  .book-intro  { grid-area: intro; }
  .book-cal    { grid-area: cal; }
  .book-prices { grid-area: prices; }
}

.book-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--soft-photo);
  background: var(--blank);
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

.tiers { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tier {
  background: var(--paper);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* The price stays on one line. If it can't fit beside the name on a narrow
   phone, it drops below the name whole rather than splitting "60 min". */
.tier-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.tier-price {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tier-price b { font-weight: 500; color: var(--ink); }
.tier-price s { text-decoration-thickness: 1.5px; }
/* the footnote mark sits up off the price; line-height 0 keeps the row from growing */
.tier-price sup { font-size: 0.7em; line-height: 0; margin-left: 0.1em; }
.tier p { font-size: var(--fs-small); color: var(--muted); }

/* the Cal.com embed. It sizes itself, so this just reserves the room */
.booker {
  display: block;
  width: 100%;
  min-height: 40rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.booker-alt,
.tiers-note {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.booker-alt a { color: inherit; }

.signature {
  width: clamp(7rem, 16vw, 10rem);
  margin-top: 1.5rem;
  opacity: 0.9;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

/* holds its width even before logo.png is added, so the swatch bar survives */
.foot-mark {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 16rem;
  min-width: min(100%, 14rem);
  max-width: 22rem;
}
.foot-logo { width: clamp(9rem, 24vw, 13rem); }

.foot-swatches { display: flex; gap: 4px; width: 100%; }
.foot-swatches i { flex: 1 1 0; min-width: 0; height: 22px; display: block; }

/* who's behind it, for people and for search: small print under the swatches */
.foot-about {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
}

.foot-links {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.foot-col { display: flex; flex-direction: column; gap: 0.6rem; }
.foot-col span { color: var(--muted); }
.foot-col a { text-decoration: none; opacity: 0.8; }
.foot-col a:hover { opacity: 1; text-decoration: underline; }

.colophon {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2.5rem;
  max-width: none;
}

/* ==========================================================================
   Email sign-ups
   ========================================================================== */

/* One quiet line with the five colors drawn under it (they draw themselves
   once, as it scrolls into view). Tap it and it opens into an email field
   below, the line staying on as its label. site.js builds the inside. */
.signup {
  --line: linear-gradient(90deg,
    var(--polyester-fur) 0 20%, var(--skintight) 20% 40%, var(--filamingo) 40% 60%,
    var(--abbot) 60% 80%, var(--costello) 80% 100%);
  display: grid;
  grid-template-rows: auto 0fr;
  width: min(100%, 25rem);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.signup[hidden] { display: none; }
.signup.is-open { grid-template-rows: auto 1fr; }

.signup-open {
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5rem 0 0.45rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.signup-open::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, height 0.2s;
}
.signup.is-seen .signup-open::after { transform: scaleX(1); }
.signup-open:hover::after,
.signup-open:focus-visible::after { height: 3px; }
.signup-open svg { flex: none; width: 11px; height: 11px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.signup-open:hover svg { transform: translateX(3px); }

/* open: the line hands its colors down to the field and becomes its label */
.signup.is-open .signup-open { cursor: default; opacity: 0.65; }
.signup.is-open .signup-open::after { transform: scaleX(0); transition-delay: 0s; }
.signup.is-open .signup-open svg { transform: rotate(90deg); }

.signup-body { min-height: 0; overflow: hidden; }
.signup-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease 0.1s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
}
.signup.is-open .signup-field { opacity: 1; transform: none; }
.signup-field::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--line);
}
.signup input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;              /* 16px or larger, or an iPhone zooms in on tap */
  letter-spacing: 0.02em;
  text-transform: none;
  outline: none;
}
.signup input::placeholder { color: inherit; opacity: 0.45; }
.signup-send {
  flex: none;
  padding: 0.6rem 0 0.5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.signup-send:hover { text-decoration: underline; text-underline-offset: 4px; }
.signup-msg { min-height: 0; margin-top: 0.5rem; opacity: 0.75; text-transform: none; letter-spacing: 0.04em; }
.signup-msg:empty { display: none; }

/* sending: the five colors run along under the email */
@keyframes signup-run { to { background-position: 150px 0; } }
.signup.is-sending .signup-field::after {
  background-size: 150px 100%;
  animation: signup-run 0.7s linear infinite;
}
.signup.is-sending .signup-send { opacity: 0.4; }

/* a mistyped email gets a small no, not a red box */
@keyframes signup-no {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.signup.is-error .signup-field { animation: signup-no 0.35s ease; }

/* done: the logo's five squares ink in, one after another */
.signup.is-done .signup-open { cursor: default; opacity: 1; }
.signup.is-done .signup-open::after,
.signup.is-done .signup-open svg { display: none; }
.signup-dots { display: inline-flex; gap: 2.5px; margin-right: 0.7em; vertical-align: 0.05em; }
.signup-dots i {
  width: 7px;
  height: 7px;
  transform: scale(0);
  animation: signup-ink 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}
.signup-dots i:nth-child(2) { animation-delay: 0.08s; }
.signup-dots i:nth-child(3) { animation-delay: 0.16s; }
.signup-dots i:nth-child(4) { animation-delay: 0.24s; }
.signup-dots i:nth-child(5) { animation-delay: 0.32s; }
@keyframes signup-ink { to { transform: scale(1); } }

/* inside the Listen menu, under the three services */
.listen-menu-foot { padding: 0.35rem 1.25rem 0.9rem; border-top: 1px solid var(--rule); }
.listen-menu.is-sheet .listen-menu-foot { padding-inline: var(--gutter); padding-bottom: 1.2rem; }

/* ==========================================================================
   Listen menu
   ========================================================================== */

/* Listen opens this in place of sending people to another page: the three
   services, each straight to the app. site.js builds it and sets it beside
   the link on a wide screen; a phone gets it as a sheet from the bottom. */
.listen-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  width: 21rem;
  max-width: calc(100vw - 2rem);
  max-height: none;
  overflow: visible;
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 34px 60px -24px rgba(18, 17, 15, 0.45),
    0 0 0 1px rgba(18, 17, 15, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.listen-menu.is-above { transform: translateY(6px); }
.listen-menu.is-in { opacity: 1; transform: none; }
.listen-menu::backdrop { background: transparent; }

.listen-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1rem;
}
.listen-menu-eyebrow { color: var(--muted); }
.listen-menu-title {
  margin-top: 0.45rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.listen-menu-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.5rem -0.6rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s;
}
.listen-menu-close:hover { opacity: 1; }
.listen-menu-close svg { width: 14px; height: 14px; }

/* the record's own color, or all five for the artist. The hairline is for
   POLYESTER again: pale pink on the paper would disappear without it. */
.listen-menu-bar { height: 6px; box-shadow: inset 0 0 0 1px rgba(18, 17, 15, 0.1); }

.listen-menu-list { list-style: none; margin: 0; padding: 0; }
.listen-menu-list li + li { border-top: 1px solid var(--rule); }

/* A row floods with the service's color, the way a square floods the
   homepage. The little square is that color at rest. */
.listen-menu-list a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.listen-menu-list i {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--brand);
  transition: background-color 0.2s ease;
}
/* one line each, even with "Artist page" beside it on a 320px phone */
.listen-menu-list span { flex: 1; white-space: nowrap; }
.listen-menu-list small {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--muted);
}
.listen-menu-list svg { flex: none; width: 13px; height: 13px; opacity: 0.5; }

.listen-menu-list a:hover,
.listen-menu-list a:focus-visible { background: var(--brand); }
.listen-menu-list a:hover i,
.listen-menu-list a:focus-visible i { background: currentColor; }
.listen-menu-list a:hover small,
.listen-menu-list a:focus-visible small { color: inherit; }
.listen-menu-list a:hover svg,
.listen-menu-list a:focus-visible svg { opacity: 1; }
.listen-menu-list a:focus-visible { outline-offset: -4px; }

/* a phone: up from the bottom, in reach of a thumb */
.listen-menu.is-sheet {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  opacity: 1;
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.listen-menu.is-sheet.is-in { transform: none; }
.listen-menu.is-sheet::backdrop {
  background: rgba(18, 17, 15, 0);
  transition: background-color 0.3s ease;
}
.listen-menu.is-sheet.is-in::backdrop { background: rgba(18, 17, 15, 0.4); }
.listen-menu.is-sheet .listen-menu-inner { padding-bottom: env(safe-area-inset-bottom); }
.listen-menu.is-sheet .listen-menu-head { padding: 1.4rem var(--gutter) 1.1rem; }
.listen-menu.is-sheet .listen-menu-list a { min-height: 3.9rem; padding-inline: var(--gutter); }

html.is-listening { overflow: hidden; }

/* the link that opened it stays lit while it's open */
.nav-links a[aria-expanded="true"],
.foot-col a[aria-expanded="true"] { opacity: 1; }

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .flood { display: none; }
}