/* ==========================================================================
   sections — hero → about → room → signatures → work → contact → footer
   ========================================================================== */

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  gap: clamp(1rem, 2.6vh, 1.9rem);
  padding: calc(var(--gut) * 2 + 3rem) var(--gut) clamp(1.4rem, 4vh, 2.6rem);
}

.hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; }

.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: -0.028em;
}

.hero__em { color: var(--signal); font-style: italic; }

.hero .scope { height: clamp(84px, 12vh, 132px); }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: clamp(0.6rem, 1.8vh, 1.1rem);
  border-top: 1px solid var(--line);
}

.hero__sub { max-width: 46ch; color: var(--cream-2); }

/* The one big call to action on the page, and the only place a first-time
   reader is asked to consent to sound. */
/* `isolation: isolate` is load-bearing, not decoration. The fill below uses
   z-index -1; without a stacking context of its own the button lets that
   -1 escape and paint behind the page, so on hover the fill vanishes and the
   label — which has just turned dark for contrast against it — goes
   dark-on-dark and the button reads as empty. */
.cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.85em 1.5em 0.85em 1.2em;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color 0.35s var(--release);
}

/* The fill sweeps from the left on hover. Scaled, not sized. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--attack);
}

.cta:hover { color: var(--pitch); }
.cta:hover::before { transform: scaleX(1); }

.cta__ring {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.cta.is-live .cta__ring { animation: blip 1.1s var(--release) infinite; }

@keyframes blip {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.55); opacity: 0.55; }
}

.hero__cue { display: flex; align-items: center; gap: 0.8em; }

.hero__cue-rule {
  position: relative;
  display: block;
  width: clamp(40px, 8vw, 90px);
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}

.hero__cue-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform-origin: left;
  animation: sweep 2.8s var(--release) infinite;
}

@keyframes sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ── about ─────────────────────────────────────────────────────────────── */

.about { padding: var(--sec) var(--gut); display: grid; gap: clamp(2.5rem, 7vh, 5rem); }

.about__body {
  max-width: 26ch;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.03;
  letter-spacing: -0.025em;
}

.about__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns: 1fr;
  max-width: 1100px;
}

@media (min-width: 760px) { .about__grid { grid-template-columns: repeat(3, 1fr); } }

.about__grid p { color: var(--cream-2); max-width: 36ch; }

.about__h {
  margin-bottom: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--signal);
  color: var(--signal);
}

/* ── the room ──────────────────────────────────────────────────────────── */

/* minmax(0, 1fr), not 1fr. A grid item's default min-width is `auto`, which
   means min-CONTENT — so the sequencer panel, whose min-content width is the
   16 steps plus their labels, forces the whole column wider than the
   viewport and drags the body copy off the side of the screen with it. This
   single track definition is the difference between a page that fits on a
   phone and one that does not. */
.room {
  position: relative;
  padding: var(--sec) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vh, 3rem);
}

.room__head { display: grid; gap: clamp(0.9rem, 2.4vh, 1.6rem); max-width: 62ch; }

.room__h {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
}

.room__lead { max-width: 54ch; color: var(--cream-2); font-size: var(--t-lead); line-height: 1.38; }

.room__panel {
  display: grid;
  min-width: 0;
  gap: clamp(1rem, 2.6vh, 1.7rem);
  padding: clamp(0.9rem, 2.4vw, 1.8rem);
  background: var(--pitch-2);
  border: 1px solid var(--line);
}

/* ── transport ─────────────────────────────────────────────────────────── */

.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.6rem);
  padding-bottom: clamp(0.7rem, 1.8vh, 1.1rem);
  border-bottom: 1px solid var(--line);
}

.tbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1em;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
  transition: color 0.35s var(--release), border-color 0.35s var(--release),
              background-color 0.35s var(--release);
}

.tbtn:hover { color: var(--cream); border-color: var(--cream-3); }

.tbtn--play { color: var(--signal); border-color: var(--signal); }
.tbtn--play:hover { background: var(--signal); color: var(--pitch); }
.tbtn--play[aria-pressed="true"] { background: var(--signal); color: var(--pitch); }

/* A triangle that becomes two bars. Both states are drawn with borders on
   one element, so the swap costs nothing. */
.tbtn__glyph {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  transition: border-width 0.3s var(--attack);
}

.tbtn--play[aria-pressed="true"] .tbtn__glyph {
  border-width: 5px 3px;
  border-color: transparent currentColor;
}

.tempo { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 220px; min-width: 180px; }
.tempo__k { flex: 0 0 auto; }
.tempo__v { flex: 0 0 auto; color: var(--cream); min-width: 8ch; text-align: right; }

.tempo input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 22px;
  background: transparent;
  cursor: ew-resize;
}

.tempo input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
.tempo input[type="range"]::-moz-range-track { height: 1px; background: var(--line-2); }

.tempo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--signal);
  transition: transform 0.3s var(--attack);
}

.tempo input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--signal);
  transition: transform 0.3s var(--attack);
}

.tempo input[type="range"]:hover::-webkit-slider-thumb,
.tempo input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.3); }
.tempo input[type="range"]:hover::-moz-range-thumb,
.tempo input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.3); }

/* ── the meter ─────────────────────────────────────────────────────────────
   The only place --peak is allowed to appear, and it appears by threshold
   rather than by choice. Green is signal; amber means you are near the top.
   ------------------------------------------------------------------------ */

.meter { display: flex; align-items: center; gap: 0.6rem; flex: 0 1 160px; }

.meter__track {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  background: var(--pitch-3);
  overflow: hidden;
}

.meter__track b {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
}

.meter.is-peak .meter__track b { background: var(--peak); }

.room .scope { height: clamp(66px, 9vh, 104px); border-color: transparent; background: var(--pitch-3); }

/* ── the grid ──────────────────────────────────────────────────────────── */

/* Below about 720px the sixteen steps cannot all be a tappable size and fit,
   so the grid scrolls sideways rather than shrinking them to 20px specks.
   The voice labels stay put via `position: sticky`, so you always know which
   row you are editing. */
.grid {
  display: grid;
  gap: clamp(0.3rem, 0.8vh, 0.55rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.grid__row {
  display: grid;
  grid-template-columns: minmax(46px, 5.5rem) 1fr;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1rem);
  min-width: 0;
}

.grid__label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--pitch-2);
  padding-right: 0.35rem;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-3);
  text-align: left;
  transition: color 0.35s var(--release);
}

.grid__label:hover { color: var(--signal); }

/* minmax(30px, 1fr): steps share the width when there is room and stop
   shrinking at a size a thumb can still hit, at which point the grid above
   scrolls instead. */
.grid__steps {
  display: grid;
  grid-template-columns: repeat(16, minmax(30px, 1fr));
  gap: clamp(0.2rem, 0.55vw, 0.4rem);
}

/* Square by default, but capped: at 16 across a wide screen an uncapped
   square step is 85px tall, which pushes three of the five voices below the
   fold and makes a sequencer look like a chessboard. */
.cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 18px;
  max-height: clamp(26px, 3.2vw, 46px);
  background: var(--pitch-3);
  border: 1px solid transparent;
  transition: background-color 0.22s var(--release), border-color 0.22s var(--release),
              transform 0.22s var(--attack);
}

/* Every fourth cell is a downbeat, marked so the bar is readable at a glance
   without a row of numbers above it. */
.cell[data-beat="1"] { background: var(--pitch-3); border-color: var(--line); }

.cell:hover { border-color: var(--cream-3); }
.cell[aria-pressed="true"] { background: var(--signal); }
.cell[aria-pressed="true"]:hover { background: var(--signal); border-color: var(--cream); }

/* The playhead. A class rather than an inline style, so lighting a step is
   one class toggle and not sixteen style writes per frame. */
.cell.is-now { transform: scale(1.18); }
.cell.is-now:not([aria-pressed="true"]) { background: var(--pitch-3); border-color: var(--signal-2); }
.cell[aria-pressed="true"].is-now { box-shadow: 0 0 0 2px var(--signal-3); }

/* Only shown where the grid actually scrolls. A scrollable region with no
   affordance reads as a grid that simply stops at step 8. */
.grid__hint { display: none; color: var(--cream-4); }
@media (max-width: 720px) { .grid__hint { display: block; } }

/* ── presets ───────────────────────────────────────────────────────────── */

.presets { display: grid; gap: 0.7rem; }
.presets__k { color: var(--cream-3); }
.presets__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  padding: 0.45em 0.95em;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-3);
  transition: color 0.35s var(--release), border-color 0.35s var(--release),
              background-color 0.35s var(--release);
}

.chip:hover { color: var(--cream); border-color: var(--cream-3); }
.chip.is-on { background: var(--signal); border-color: var(--signal); color: var(--pitch); }

.presets__note { color: var(--cream-3); font-size: 0.95rem; max-width: 60ch; }

.room__nosound {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--peak);
  color: var(--cream-2);
  max-width: 60ch;
}

/* ── signatures ────────────────────────────────────────────────────────── */

.sig { padding: var(--sec) var(--gut); display: grid; gap: clamp(2rem, 5vh, 3.5rem); }
.sig__head { display: grid; gap: clamp(0.9rem, 2.4vh, 1.6rem); max-width: 62ch; }

.sig__h {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
}

.sig__lead { max-width: 52ch; color: var(--cream-2); font-size: var(--t-lead); line-height: 1.38; }

.sig__list {
  display: grid;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .sig__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sig__list { grid-template-columns: repeat(4, 1fr); } }

.sigcard {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  width: 100%;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--pitch-2);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color 0.4s var(--release), background-color 0.4s var(--release);
}

.sigcard:hover { border-color: var(--signal); background: var(--pitch-3); }
.sigcard.is-playing { border-color: var(--signal); }

.sigcard__wave { width: 100%; height: 54px; }
.sigcard__n { color: var(--cream-4); }

.sigcard__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.sigcard__use { color: var(--signal); }

.sigcard__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--cream-3);
  transition: color 0.35s var(--release);
}

.sigcard:hover .sigcard__cue { color: var(--signal); }

/* ── work ──────────────────────────────────────────────────────────────── */

.work { padding: var(--sec) var(--gut); display: grid; gap: clamp(2rem, 5vh, 3.5rem); }
.work__head { display: grid; gap: clamp(0.9rem, 2.4vh, 1.6rem); max-width: 62ch; }

.work__h {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.025em;
}

.band { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; }

@media (min-width: 640px) { .band { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .band { grid-template-columns: repeat(4, 1fr); } }

.band__item { display: grid; gap: 0.5rem; align-content: start; }

.band__item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pitch-2);
  filter: grayscale(1) contrast(1.1) brightness(0.85);
  transition: filter 0.6s var(--release);
}

.band__item:hover video { filter: grayscale(0.35) contrast(1.05) brightness(1); }

.band__t {
  margin-top: 0.3rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.15;
}

.band__item p { color: var(--cream-2); font-size: 0.95rem; line-height: 1.5; max-width: 34ch; }

/* ── contact ───────────────────────────────────────────────────────────── */

.contact { padding: var(--sec) var(--gut); display: grid; gap: clamp(1.6rem, 4.5vh, 3rem); }

.contact__h {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: -0.028em;
}

.contact__em { color: var(--signal); font-style: italic; }

.rows { display: grid; max-width: 900px; }
.rows li { border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.85rem, 2.4vh, 1.35rem) 0;
  transition: color 0.4s var(--release);
}

@media (max-width: 620px) { .row { grid-template-columns: 5.5rem 1fr auto; } }

.row__v { font-size: clamp(1.05rem, 2.2vw, 1.65rem); letter-spacing: -0.015em; }

/* Label and value translate; the arrow holds. Shifting the whole row would
   carry the arrow past the section edge, and animating padding would lay the
   row out on every frame. */
.row__k, .row__v { transition: transform 0.5s var(--attack); }
a.row:hover { color: var(--signal); }
a.row:hover .row__k, a.row:hover .row__v { transform: translateX(0.7rem); }

.row__a { color: var(--cream-4); transition: color 0.4s var(--release), transform 0.5s var(--attack); }
a.row:hover .row__a { color: var(--signal); transform: translate(0.2rem, -0.2rem); }

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  padding: clamp(2rem, 6vh, 4rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.2rem;
}

.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; }
.foot__note { max-width: 70ch; color: var(--cream-4); letter-spacing: 0.08em; }

[data-rise] { will-change: transform, opacity; }