:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #5b5b5f;
  --paper: #f7f5ef;
  --paper-2: #fff;
  --line: #d8d3c7;
  --accent: #c63f30;
  --accent-2: #1f6f68;
  --accent-3: #c9a227;
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0: clamp(1.12rem, 1rem + 0.6vw, 1.5rem);
  --step-1: clamp(1.35rem, 1.12rem + 1.1vw, 2rem);
  --step-2: clamp(2rem, 1.4rem + 3vw, 4rem);
  --step-3: clamp(3rem, 2rem + 6vw, 8rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 0.5rem;
  --measure: 72ch;
}

html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
}
a { color: var(--accent-2); text-underline-offset: 0.18em; }
img, video { max-width: 100%; height: auto; }
body > header,
main,
footer { padding-inline: var(--gutter); }
body > header { padding-block-start: var(--space-3); }

h1, h2, h3, p, ul, ol, figure { margin-block-start: 0; }
h1 {
  margin-block-end: var(--space-3);
  font-size: var(--step-3);
  line-height: 0.95;
  text-align: center;
}
h2 {
  margin-block-end: var(--space-2);
  font-size: var(--step-2);
  line-height: 1;
  text-align: center;
}
h3 {
  margin-block-end: var(--space-1);
  font-size: var(--step-1);
  line-height: 1.1;
  text-align: center;
}
p { text-align: justify; text-justify: inter-word; } /* hug both margins, not just the left */
p, ul, ol { margin-block-end: var(--space-2); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


.flow-section {
  padding-block: var(--space-4);
  border-block-end: thin solid var(--line);
  /* This page is ~32,000px tall — every resize event was forcing the browser to
     re-layout the ENTIRE document, not just what's on screen, which is the real
     cost behind multi-second resizes (confirmed: a single forced reflow already
     costs 10-40ms here, and a live drag fires dozens of resize events per second).
     content-visibility:auto skips layout/paint entirely for sections currently
     off-screen, so resize cost scales with what's actually visible, not the whole
     page. Unsupported browsers (older Safari) just ignore this — no fallback needed. */
  content-visibility: auto;
  /* per-section --flow-h hint (set inline in index.html, measured from actual
     rendered height) keeps the placeholder close to real size so scroll position
     and the scrollbar don't jump around before each section has been on-screen
     at least once; falls back to a rough average for any section without one. */
  contain-intrinsic-size: auto var(--flow-h, 1300px);
}
.lead {
  color: var(--muted);
  font-size: var(--step-1);
}
.eyebrow {
  margin-block-end: var(--space-1);
  color: var(--accent);
  font-size: calc(var(--step--1) * 2);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.grid {
  display: grid;
  gap: var(--space-2);
  align-items: start;
}
@media (min-width: 48rem) {
  .grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cell {
  min-width: 0;
  padding: var(--space-2);
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.52);
}
.cell.accent {
  background: #fff7e1;
  border-color: #d7b84d;
}
.cell > :last-child { margin-block-end: 0; }
figure { margin-block: var(--space-2); }
figure img {
  width: 100%;
  border: thin solid var(--line);
  border-radius: var(--radius);
}

.thought { cursor: help; text-decoration: underline dotted; }

#gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(247, 245, 239, 0.96);
}
#gate[hidden] { display: none; }
.gate__box {
  --gate-field: 18em;
  inline-size: fit-content;
  max-inline-size: min(100%, 46rem);
  padding: clamp(var(--space-2), 4vw, var(--space-4)) clamp(var(--space-2), 4vw, var(--space-3));
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  text-align: center;
}
.gate__box h2 {
  text-wrap: balance;
}
.gate__sub,
#gate-err { color: var(--muted); font-size: var(--step--1); }
#gate label { display: block; margin-block-start: var(--space-2); font-weight: 700; }
#gate-form {
  display: grid;
  gap: var(--space-1);
  justify-content: center;
}
#gate input,
#gate button,
.field input,
.field textarea,
.rr-webform input,
.rr-webform select,
.rr-webform textarea {
  inline-size: 100%;
  padding: 0.7em 0.85em;
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
#gate input {
  inline-size: min(100%, var(--gate-field));
  text-align: center;
}
#gate button,
.shop__add,
.rr-actions button,
.music-play {
  cursor: pointer;
  font-weight: 800;
}
@media (min-width: 42rem) {
  .gate__box h2 { white-space: nowrap; }
  #gate-form {
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: var(--space-2);
  }
  #gate label { margin-block-start: 0; }
  #gate button,
  #gate-err {
    grid-column: 1 / -1;
  }
}

.shop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}
.shop__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-1);
  flex: 1 1 24rem;
}
.shop__nav,
.shop__add,
.cart__rm {
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: transparent;
}
.product {
  display: grid;
  gap: var(--space-1);
}
.product__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: var(--space-1);
}
.product__name,
.product__price,
.product__note { margin: 0; }
.product__name { text-align: center; }
.product__note,
.field,
.cart,
.promo-msg { font-size: var(--step--1); }
.cart {
  flex: 1 1 18rem;
  padding: var(--space-2);
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: #fff7e1;
}
.cart ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.cart__row {
  display: flex;
  justify-content: space-between;
  padding-block-start: var(--space-1);
  border-block-start: thin solid rgba(0, 0, 0, 0.08);
}

.video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.video-frame--portrait {
  aspect-ratio: 9 / 16;
}
.video-surround {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  grid-auto-flow: dense;
  margin: 14px 0;
}
.video-surround .video-frame {
  /* Square .artist-tile + grid-auto-rows:auto already produces correct, even
     row gaps by itself — that only broke for the 2 rows this spans, because
     height:100% against an auto-sized row is indeterminate. Giving it its OWN
     aspect-ratio (4 columns wide : 2 square-tile-rows tall = 2/1) makes it size
     itself the same definite way the tiles do, instead of depending on rows
     that depend on it — no row-height override needed anywhere else. */
  grid-column: 2 / 6;
  grid-row: 2 / 4;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-width: none;
  margin: 0;
  overflow: hidden;
}
.video-surround video.video-frame {
  object-fit: cover;
  object-position: center;
}
.video-surround .artist-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  border: 1px dashed #bdb6a6;
  border-radius: 6px;
  background: #f5f0e6;
  text-align: center;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  container-type: inline-size;
}
.video-surround .artist-tile span { color: var(--muted); font-size: 11px; font-weight: 400; }
.video-surround .artist-tile.album-hidden { display: none !important; }
.video-surround .artist-tile .artist-name,
.video-surround .artist-tile .album-name,
.video-surround .artist-tile .album-year,
.video-surround .artist-tile .cover-label,
.video-surround .artist-tile .album-emoji {
  display: none;
}
.video-surround .artist-tile .artist-emoji {
  display: inline-block;
  font-size: calc(100cqw / var(--cover-emoji-per-row, 6));
  line-height: 1;
  padding-bottom: 0;
}
.video-surround .artist-tile .artist-emoji span { font-size: inherit; }
.video-surround .artist-tile.has-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.25);
  justify-content: flex-end;
  padding: 0;
  cursor: help;
}

.carousel { margin-block: var(--space-2) var(--space-4); }
.carousel .swiffy-slider { --swiffy-slider-nav-light: var(--ink); }
.carousel .slider-nav {
  /* Top corner, not vertical-center: text cards vary wildly in height (one
     slide is a one-liner, another a multi-paragraph essay) and swiffy-slider
     lays every slide out in one shared row sized to the TALLEST of them, so
     centering on that shared height put the arrow nowhere near short cards'
     actual content. */
  top: 0;
  bottom: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0;
  background: transparent;
  filter: none;
  transform: none;
}
.carousel .slider-nav.slider-nav-next {
  right: 0;
  left: auto;
}
.carousel .slider-nav::before {
  display: none;
}
.carousel .slider-nav::after {
  /* Tweak carousel arrow glyphs here: change content and font-size. */
  content: "<";
  width: auto;
  height: auto;
  background: transparent;
  color: #000;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 4.25rem;
  font-weight: 900;
  line-height: 1;
  filter: none;
  text-shadow:
    0 0 0.08em #fff,
    0 0 0.14em #fff,
    0 0 0.22em rgba(255, 255, 255, 0.9);
  transform: none;
  -webkit-mask: none;
  mask: none;
  -webkit-text-stroke: 0.08em #fff;
  paint-order: stroke fill;
}
.carousel .slider-nav.slider-nav-next::after {
  content: ">";
  transform: none;
}
.carousel-card {
  margin: 0;
  padding: var(--space-2);
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.carousel-card--image {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.carousel-card--image a {
  display: block;
}
.carousel-card--image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.carousel-card__caption {
  /* Same readable-over-photo technique as the <> nav arrows, colors inverted:
     white fill, black outline/shadow, so it reads over any image underneath. */
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  color: #fff;
  font-weight: 800;
  text-align: center;
  text-shadow:
    0 0 0.08em #000,
    0 0 0.14em #000,
    0 0 0.22em rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0.03em #000;
  paint-order: stroke fill;
  pointer-events: none;
}
.music-tile {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.music-tile.is-selected { box-shadow: inset 0 0 0 0.2rem rgba(201, 162, 39, 0.38); }
.music-cover {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}
.music-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.music-tile__emoji {
  position: absolute;
  inset-inline-end: var(--space-1);
  inset-block-end: var(--space-1);
  padding: 0.1em 0.35em;
  border-radius: 999em;
  background: rgba(247, 245, 239, 0.92);
  font-size: var(--step-1);
}
.music-meta {
  display: grid;
  gap: 0.15em;
  padding: var(--space-1);
  color: var(--ink);
  line-height: 1.2;
}
.music-meta span { color: var(--muted); font-size: var(--step--1); }
.music-controls {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-1);
}
.music-play {
  padding: 0.55em 0.85em;
  border: thin solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.music-play[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.rr-webform,
.rr-group,
.rr-field,
.rr-actions {
  display: grid;
  gap: var(--space-1);
}
.rr-webform { gap: var(--space-2); }
.rr-group {
  border: thin solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2);
}
.rr-radio { display: block; }
.rr-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.ew {
  --ew-shadow-x: 0.12rem;
  --ew-shadow-y: 0.18rem;
  --ew-shadow-blur: 0.025rem;
  --ew-shadow-opacity: 0.11;
  position: relative;
  display: inline-block;
  transform-origin: center 90%;
}
/* will-change toggled by wiggle.js (body.wd-active, stripped during body.wd-resizing) —
   keeping it static here promotes every emoji to its own GPU layer permanently,
   which is exactly the fixed cost that made full-page resize slow. */
body.wd-active:not(.wd-resizing) .ew {
  will-change: transform, filter;
}
.ew-sh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  transform: translate(var(--ew-shadow-x), var(--ew-shadow-y));
  filter: brightness(0) blur(var(--ew-shadow-blur));
  opacity: var(--ew-shadow-opacity);
}
body.lights-off { background: #c1bfba; }
body.lights-off .ew-sh { display: none; }
body.debug-shadows.lights-off .ew-sh { display: block; }