/* =================================================================
   Isthmus Sound Collective — shared stylesheet.

   Light, neutral, instrument-catalogue. The ground is a warm grey
   rather than white so the page reads as a printed spec sheet, not a
   blank canvas. Colour comes from the product shots and the record
   sleeves; the page itself is near-monochrome with one sage accent
   taken from the plugin.

   Committed single theme, painted explicitly so it holds on any host.
   ================================================================= */

:root {
  --ground:    #eeeeeb;   /* warm light grey, the page */
  --panel:     #ffffff;   /* a raised surface on it */
  --sunken:    #e4e4e0;   /* inset wells */
  --ink:       #191917;
  --muted:     #6b6b64;
  --faint:     #9b9b93;
  --rule:      #d5d5cf;
  --rule-firm: #b9b9b1;

  --accent:    #4f7a2e;   /* sage, darkened to stay legible on light */
  --fill:      #7fa35a;   /* the plugin's own sage, for blocks and chips */

  --display:   'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pixel:     'Silkscreen', ui-monospace, 'SF Mono', Menlo, monospace;

  --col:       min(100% - 2.5rem, 72rem);
  --read:      36rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- shared roles ------------------------------------------------ */

.wrap { width: var(--col); margin-inline: auto; }

.label {
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.label.quiet { color: var(--faint); }

p { margin: 0; max-width: var(--read); }
p + p { margin-top: 0.85rem; }

a { color: inherit; text-decoration-color: var(--rule-firm); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.025em; }

h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.9vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

h2 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 2rem);
  line-height: 1.14;
  max-width: 22ch;
}

.lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height: 1.5;
  max-width: 32rem;
}

.dim { color: var(--muted); }

/* --- site chrome -------------------------------------------------- */

.nav { border-bottom: 1px solid var(--rule-firm); background: var(--ground); }
.nav .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
}
.nav a { text-decoration: none; }
.nav .home { color: var(--ink); letter-spacing: 0.18em; }
.nav ul { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.nav ul a { color: var(--muted); transition: color 130ms ease; }
.nav ul a:hover { color: var(--ink); }
.nav ul a[aria-current="page"] { color: var(--accent); }

/* --- sections ----------------------------------------------------- */

.hero {
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}

/* Product masthead: the headline and the instrument side by side, so the
   first screen carries both. Stacks below 62rem, text first. */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}
.masthead .hero { padding-block: 0; }
/* Sized below the base h1 because it shares its row with the plugin
   shot, but the old 3.9rem ceiling left the homepage headline visibly
   smaller than "About" and "Contact". 4.6rem closes most of that gap and
   still leaves ~100px of slack in the hero column at 1440 and up. */
.masthead h1 { font-size: clamp(2.25rem, 1.5rem + 3.1vw, 4.6rem); max-width: 13ch; }
.masthead .plate { padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); }

@media (max-width: 62rem) {
  .masthead { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .masthead .plate { max-width: 30rem; }
}

.band {
  /* Capped tighter than it was. At 1920 the old 4vw term put 112px of air
     above and below every band, so 224px separated each section from the
     next and the page read as mostly empty. */
  padding-block: clamp(2.5rem, 1.9rem + 2.2vw, 4rem);
  border-top: 1px solid var(--rule-firm);
  display: grid;
  /* The rail carries an 11px pixel label and a short headline; 18rem of it
     was mostly air, and the same 11rem is set on .prose section so both kinds
     of block share one left edge down the page. The column gap has to match
     there too, or the second edge drifts. */
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(1.75rem, 1rem + 3vw, 3.25rem);
  align-items: start;
}
.band > .band-head { grid-column: 1; }
.band > :not(.band-head) { grid-column: 2; }

.band-head { display: flex; flex-direction: column; gap: 0.8rem; }
.band-head h2 { max-width: 16ch; }

.band.full { grid-template-columns: minmax(0, 1fr); }
.band.full > .band-head,
.band.full > :not(.band-head) { grid-column: 1; }

@media (max-width: 60rem) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .band > .band-head,
  .band > :not(.band-head) { grid-column: 1; }
}

/* --- list rows ----------------------------------------------------- */

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

.unit {
  display: grid;
  /* The trailing 1fr is an empty spacer track. Giving the description column
     the 1fr instead pushed the action to the far right of the row, which at
     full width left about 750px of nothing between "E minor - 130" and PLAY.
     A fixed description column keeps every PLAY on the same vertical line;
     letting it size to its content would move the action per row. */
  grid-template-columns: auto minmax(0, 12rem) minmax(0, 11rem) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 130ms ease, padding-inline 130ms ease;
}
.rack .unit:last-child { border-bottom: 1px solid var(--rule); }
a.unit:hover { background: var(--panel); padding-inline: 0.9rem; }

.rack.wide .unit { grid-template-columns: auto minmax(0, 20rem) minmax(0, 14rem) auto minmax(0, 1fr); }

.dot { width: 9px; height: 9px; align-self: center; background: var(--fill); }

.unit .name { font-family: var(--pixel); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--ink); }
.unit .what { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.unit .status {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 44rem) {
  .unit, .rack.wide .unit { grid-template-columns: auto minmax(0, 1fr); }
  .unit .what, .unit .status { grid-column: 2; }
}

/* --- audio rows ----------------------------------------------------
   A .unit that is also a button, so every declaration the global
   button rule sets has to be undone here.
   ------------------------------------------------------------------ */
button.unit {
  width: 100%;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: normal; text-transform: none;
  color: inherit; background: transparent;
  border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  padding-block: 1.35rem; padding-inline: 0;
  text-align: left; cursor: pointer;
}
button.unit:hover { background: var(--panel); padding-inline: 0.9rem; }
button.unit[aria-pressed="true"] { background: var(--panel); }
button.unit[aria-pressed="true"] .name { color: var(--accent); }
button.unit .status { color: var(--accent); }

/* --- product shots -------------------------------------------------- */

.plate {
  margin: 0;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.plate img { display: block; width: min(100%, 33rem); height: auto; image-rendering: pixelated; }
.plate video { display: block; width: 100%; height: auto; background: #000; }
.plate figcaption { text-align: center; letter-spacing: 0.14em; }

/* Cropped regions of the real interface, shown beside what they do. */
.shot {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--rule);
  background: var(--panel);
  margin-top: 0.5rem;
}

/* --- spec strip ---------------------------------------------------- */

.spec {
  border-block: 1px solid var(--rule-firm);
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
}
.spec div { display: flex; flex-direction: column; gap: 0.35rem; }
.spec .v { font-size: 1rem; font-weight: 500; }

/* --- styles: every STYLE option, at a glance -------------------------
   The plugin's own selector cycles one at a time, and the Listen rack
   below buries the full set inside thirteen demo rows. This is the
   reference: every name the STYLE knob can land on, in one scan. */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.6rem;
}
.style-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.85rem 0.5rem;
  text-align: center;
}

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

.prose { display: flex; flex-direction: column; gap: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.prose section {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 0.8rem clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.prose section > .label { grid-column: 1; grid-row: 1; padding-top: 0.4rem; }

/* Long-form paragraphs stop at a comfortable measure. Without this the
   About page ran a single sentence the full width of the content column. */
.prose section > p { max-width: var(--read); }
.prose section > :not(.label) { grid-column: 2; }

@media (max-width: 60rem) {
  .prose section { grid-template-columns: minmax(0, 1fr); }
  .prose section > .label { grid-column: 1; padding-top: 0; }
  .prose section > :not(.label) { grid-column: 1; }
}

/* --- record sleeves -------------------------------------------------- */

/* Four across, so eight sleeves make two full rows rather than a row of
   five and a ragged three. The art is square at source (600x600) and stays
   square here; the grid was what was uneven, not the covers. */
.covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

@media (min-width: 46rem) {
  .covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sleeve { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; }
.sleeve img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The markup carries height="600" for layout
     stability, and that attribute becomes a presentational height:600px that
     outranks aspect-ratio, so the sleeves drew 264x600 instead of square. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--sunken);
  border: 1px solid var(--rule);
  transition: opacity 140ms ease;
}
.sleeve:hover img { opacity: 0.86; }
.sleeve .t { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.sleeve .m { display: flex; gap: 0.5rem; }

/* --- signup ---------------------------------------------------------- */

.signup {
  border: 1px solid var(--rule-firm);
  background: var(--panel);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  align-items: flex-start;
}
.signup-head { display: flex; flex-direction: column; gap: 0.7rem; }

form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; width: min(100%, 28rem); }

input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule-firm);
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  transition: border-color 140ms ease;
}
input[type="email"]::placeholder { color: var(--faint); }
input[type="email"]:focus { outline: none; border-bottom-color: var(--accent); }

button {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
button:hover { background: var(--accent); border-color: var(--accent); }

.fineprint { font-size: 0.875rem; color: var(--muted); }

/* --- claims ----------------------------------------------------------- */

.claims ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: var(--read);
}
.claims li { font-size: 0.9375rem; color: var(--muted); padding-left: 1.4rem; position: relative; }
.claims li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1.5px; background: var(--fill);
}

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

footer { border-top: 1px solid var(--rule-firm); margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
footer .wrap {
  padding-block: 2rem 3.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
}
footer .label { color: var(--faint); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer nav a { text-decoration: none; }

/* --- load-in ------------------------------------------------------------ */

.rise { animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.rise:nth-child(2) { animation-delay: 70ms; }
.rise:nth-child(3) { animation-delay: 140ms; }
.rise:nth-child(4) { animation-delay: 210ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

/* --- buy ------------------------------------------------------------- */

.buy {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--panel);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 1.05rem 2rem;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.buy:hover { background: var(--accent); border-color: var(--accent); }

/* ===========================================================================
   Wide screens.
   
   Everything above is written mobile-first and stacks in one column. On a
   desktop that left three large empty rectangles down the page: a 384px video
   floating in an 1152px white plate, prose sections using 736px of 1152, and a
   full-width buy box with its text capped at the reading measure. The page was
   not badly spaced, it was simply not using the width it had taken.
   =========================================================================== */
@media (min-width: 62rem) {

  /* One rail down the whole page. Every band puts its label and heading in a
     column of exactly this width, so headings line up with each other whether
     they come from a .band-head or from a feature section, and the eye gets a
     single left edge to follow instead of one per block. The gap has to match
     .band's for the second edge to line up too. */
  .prose section {
    grid-template-columns: minmax(0, 11rem)
                           minmax(0, 1fr)
                           minmax(0, clamp(14rem, 22vw, 21rem));
    column-gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
    align-items: start;
    /* Rows ran 100px to 192px depending on how tall that row.s crop
       happened to be, which is what made the run of them look uneven.
       A floor set to the shot cap gives every row the same rhythm. */
    min-height: 11rem;
  }
  .prose section > .label { grid-column: 1; grid-row: 1; }
  .prose section > h2,
  .prose section > p     { grid-column: 2; }

  /* Capped in both directions, so a near-square crop cannot tower over a
     10:1 one. el_locks is 350x320 and the rest run from 5:1 to 10:1; sized on
     width alone the locks row came out 395px tall against 44px for the header,
     which was most of the empty space on the page. A shared right edge does
     the rest of the aligning. */
  .prose section > .shot {
    grid-column: 3;
    grid-row: 1 / span 6;
    align-self: center;
    justify-self: end;
    width: auto;
    max-width: 100%;
    max-height: 11rem;
    margin-top: 0;
  }

  /* Sections with no label of their own - the About page - would otherwise
     keep an empty rail and an empty image column and squeeze the sentence
     into what was left, which set the text nearly vertical. */
  .prose section:not(:has(> .label)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .prose section:not(:has(> .label)) > * { grid-column: 1; }

  /* The buy box carries one short paragraph and a button, so full width left
     half of it empty. Copy on the left, the action on the right. */
  .signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
  }
  .signup .signup-head { grid-column: 1; grid-row: 1; }

  /* :not(.fineprint) matters. The fine print is a <p> too, so a bare `> p`
     put both paragraphs in row 2 and printed them on top of each other. */
  .signup > p:not(.fineprint) { grid-column: 1; grid-row: 2; margin-top: 0.6rem; }
  .signup .buy       { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .signup .fineprint { grid-column: 1 / -1; grid-row: 3; margin-top: 0.4rem; }
}

/* --- about hero: a photo mounted in the product-shot frame, with the
   collective's mark stamped on its corner like a sticker on a flight
   case. clip-path crops a hair inside the image's own inscribed circle,
   so the crop can never bite into the lettering. ---------------------- */

.plate.stamped { position: relative; }
.plate.stamped img:not(.stamp) { image-rendering: auto; }

.plate .stamp {
  position: absolute;
  bottom: clamp(-1.75rem, -1.35rem - 1.2vw, -1.1rem);
  right: clamp(-1.75rem, -1.35rem - 1.2vw, -1.1rem);
  width: clamp(4.25rem, 3.25rem + 4vw, 6.5rem);
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 50%;
  clip-path: circle(47% at 50% 50%);
  box-shadow: 0 8px 20px rgba(25, 25, 23, 0.32);
  transform: rotate(-9deg);
}

@media (max-width: 26rem) {
  .plate .stamp { right: -0.85rem; bottom: -0.85rem; width: 3.75rem; }
}

/* --- about: a compact cover strip ------------------------------------
   A smaller .covers, for pointing at the music from a page that is not
   the releases page. Stays 4-up at every width; the art reads small.
   ------------------------------------------------------------------ */

.covers.mini {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.7rem;
}

/* --- the room: a three-up of 4:5 photos ------------------------------
   Wide, then medium, then close. All three cropped to the same ratio so
   the row reads as one set and not as three snapshots that happened to
   land together. Sources live in Marketing/photos-src, outside site/.
   ------------------------------------------------------------------ */

figure.room { margin: 0; margin-top: 1.7rem; display: flex; flex-direction: column; gap: 0.8rem; }

.room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.25rem + 0.5vw, 0.65rem);
}
.room-grid img {
  display: block;
  width: 100%;
  /* Same trap as .sleeve img: the height attribute becomes a
     presentational height that would outrank aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--sunken);
  border: 1px solid var(--rule);
}
/* Three across is a row of stamps on a phone. One at a time reads the
   same wide-then-close sequence, just vertically. */
@media (max-width: 46rem) {
  .room-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

figure.room figcaption { font-size: 0.875rem; color: var(--muted); }

/* --- contact: one prominent address, then grouped cards --------------
   Replaces a flat .rack, where three consecutive rows all read
   INSTAGRAM and the handle was the only thing telling them apart.
   Grouping by project makes the handle the payload, not the platform.
   ------------------------------------------------------------------ */

.mailto {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--rule-firm);
  background: var(--panel);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  text-decoration: none;
  transition: border-color 130ms ease;
}
.mailto:hover { border-color: var(--accent); }
.mailto .addr {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.9rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* The address is one long unbroken token on a narrow phone. */
  overflow-wrap: anywhere;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  margin-top: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
}
.card h2 { font-size: 1.0625rem; line-height: 1.25; }

.card .links { display: flex; flex-direction: column; margin-top: 0.4rem; }
.card .links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 130ms ease;
}
.card .links a:hover { color: var(--accent); }
.card .links a .go {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
  flex: none;
  transition: color 130ms ease;
}
.card .links a:hover .go { color: var(--accent); }


/* --- the sword ------------------------------------------------------
   The blade off the plugin's SLASH button, cut out of assets/ui/el_sword.png.
   Hotspot sits on the tip. Interactive elements keep their own cursors on
   purpose: the sword is a joke, and losing the text caret in a field or the
   pointer on a link is not worth it. Coarse pointers never see any of it.
   ------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  body { cursor: url('assets/sword.png') 4 3, auto; }

  a, button, summary, label,
  [role="button"], [tabindex]:not([tabindex="-1"]) { cursor: pointer; }

  input, textarea, select { cursor: auto; }
  input[type="email"], input[type="text"], textarea { cursor: text; }
}


/* --- hero call to action ---------------------------------------------
   The full buy box sits seventh of nine blocks, which is right for anyone
   who needs convincing and wrong for anyone already sold. This is the same
   button, above the fold, with the platform line that would otherwise only
   turn up in the spec strip.
   ------------------------------------------------------------------ */

.hero-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 0.6rem;
}


/* -----------------------------------------------------------------
   Install guide.

   The only page that gives step-by-step instructions, so the numbered
   steps and the path chips are defined here rather than up in the
   shared layout. Paths are set in the pixel face because a mistyped
   folder is the single most common reason a plugin never appears, and
   the monospace makes a wrong character visible.
   ----------------------------------------------------------------- */

code {
  font-family: var(--pixel);
  font-size: 0.8125em;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

/* One heading per DAW in the install guide. These were 11px eyebrows, the
   same size as a caption, so they read as labels on the paragraph below
   rather than as the start of a block. Bigger, with a rule above, so the
   reader can find their own DAW while scrolling. */
.daw {
  font-family: var(--pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.steps {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: 1rem;
}
.steps > li { padding-left: 0.25rem; }
.steps > li::marker {
  font-family: var(--pixel);
  font-size: 0.75rem;
  color: var(--accent);
}
.steps p { margin: 0.45rem 0 0; }

.where {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.where > div {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.8rem 0.9rem;
}
.where dt {
  font-family: var(--pixel);
  font-size: 0.8125rem;
  color: var(--ink);
}
.where dd {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.where dd.who { margin-top: 0.3rem; font-size: 0.875rem; color: var(--faint); }

/* The two platform headings on the install page. A reader arrives looking for
   their own operating system and nothing else, so these are the one label on
   the site that has to be findable at a glance rather than read. Scoped to
   .platform so the eyebrow labels everywhere else keep their quiet size. */
.label.platform {
  font-size: 22px;
  letter-spacing: 0.08em;
}


/* --- BASS ------------------------------------------------------------
   The companion instrument's page and the tease for it on the STAB page.
   BASS is rendered at 928 px and shown smaller than that in the masthead,
   so the pixel-perfect rule that suits the STAB crops would leave it with
   uneven pixels. Smooth scaling for the full-editor shot only; the crops
   below it keep the crisp rendering. ---------------------------------- */

.plate img.smooth { image-rendering: auto; }

/* The tease band on the STAB page: copy on the left, the fish on the right,
   in the same rail as every other band. */
.tease {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.tease .shot { margin-top: 0; max-width: 8.5rem; }
.tease p { margin-bottom: 1rem; }
@media (max-width: 44rem) {
  .tease { grid-template-columns: minmax(0, 1fr); }
  .tease .shot { max-width: 6.5rem; }
}

/* --- eyebrow labels, readable ------------------------------------------
   The 11px pixel label is right for a caption under a figure and wrong for
   the word that names a section: at 11px WITH STAB and LOW END read as
   noise next to a 32px headline, and Diego found them hidden. Section
   names go to 14px, the spec strip and figcaptions to 12px, and the nav
   keeps its size so the chrome stays quiet. -------------------------- */

.band-head > .label,
.prose section > .label,
.signup-head > .label,
.hero > .label { font-size: 14px; letter-spacing: 0.14em; }

.spec .label,
.plate figcaption,
.hero-buy .label { font-size: 12px; }

/* --- the link figure ------------------------------------------------
   STAB and BASS side by side at the same scale (704 and 928 px wide at
   1x, so the columns are in that ratio), joined by a connector that
   carries what travels: key, scale, roots. Stacks on a phone with the
   connector turned to point down. -------------------------------------- */

.linkfig {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 704fr) auto minmax(0, 928fr);
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding: clamp(1.25rem, 0.9rem + 2vw, 2.75rem);
  background: var(--panel);
  border: 1px solid var(--rule);
}
.linkfig img { display: block; width: 100%; height: auto; image-rendering: auto; }
.linkfig .connector { width: clamp(5.5rem, 4rem + 6vw, 10rem); height: auto; display: block; }
.linkfig figcaption { grid-column: 1 / -1; text-align: center; margin-top: 0.4rem; }
.linkfig .who { display: block; margin-top: 0.6rem; text-align: center; }

@media (max-width: 44rem) {
  .linkfig { grid-template-columns: minmax(0, 1fr); }
  .linkfig .connector { width: 5rem; margin: 0 auto; transform: rotate(90deg); }
}

/* Three steps in a row, numbered in the pixel face. */
.steps3 {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
}
.steps3 li {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.steps3 .n { font-family: var(--pixel); font-size: 14px; letter-spacing: 0.14em; color: var(--accent); }
.steps3 h3 { font-size: 1.25rem; line-height: 1.2; }
.steps3 p { font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 44rem) { .steps3 { grid-template-columns: minmax(0, 1fr); } }

/* What travels over the link: three chips on a rail. */
.travels { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.travels .style-chip { padding: 0.7rem 1.1rem; font-size: 13px; }
.travels .arrow { font-family: var(--pixel); font-size: 13px; color: var(--faint); letter-spacing: 0.1em; }

/* The low-end diagram is inline SVG so it scales with the column and uses
   the page's own type. Colours are the two instruments' own. */
.lowend { display: block; width: 100%; height: auto; max-width: 52rem; }
.lowend .stab { fill: var(--fill); }
.lowend .bass { fill: #163143; }
.lowend .axis { stroke: var(--rule-firm); stroke-width: 1.5; }
.lowend .tick { stroke: var(--rule-firm); stroke-width: 1.5; }
.lowend text { font-family: var(--display); font-size: 15px; fill: var(--ink); }
.lowend text.on { fill: #ffffff; font-weight: 600; }
.lowend text.small { font-family: var(--pixel); font-size: 11px; letter-spacing: 0.12em; fill: var(--muted); }

/* A short lead line under a band headline, wider than the reading measure
   because it is one sentence, not a paragraph. */
.band-head .lede { max-width: 40rem; }

/* A figure that is just one image and a caption, sitting in the rail. */
.sign { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.sign img { width: 7rem; height: auto; image-rendering: pixelated; border: 1px solid var(--rule); background: var(--panel); }
.sign figcaption { max-width: var(--read); }

/* --- feature cards ----------------------------------------------------
   Four things BASS does, two by two. The prose rail put each feature in
   three loose columns with the image floating at the far right and every
   row a different height, which read as unfinished. Here each card holds
   its own text and image, and the wells share one height so the grid sits
   square whatever the crop's shape. ------------------------------------ */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}
.feature {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.feature .label { font-size: 14px; letter-spacing: 0.14em; margin-bottom: 0.3rem; }
.feature h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 18ch; }
.feature p { font-size: 0.9375rem; color: var(--muted); max-width: 30rem; }
.feature .well {
  margin-top: auto;
  padding-top: 1.5rem;
  min-height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.feature .well img {
  display: block;
  max-width: 100%;
  max-height: 11rem;
  width: auto;
  height: auto;
  image-rendering: auto;
  border: 1px solid var(--rule);
}
@media (max-width: 44rem) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature .well { min-height: 0; }
}

/* Each window in the link figure carries its own name and price, so the
   figure itself says these are two products. */
.linkfig .plug { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-width: 0; }
.linkfig .plug .label { text-align: center; }

/* --- home: the two instruments ----------------------------------------
   The root used to be the STAB page with BASS teased under its spec strip,
   which read as a STAB page with a stray fish. The root is now the
   collective's front door: one card per instrument, same size, same
   shape, each linking to its own page. ------------------------------- */

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}
.product {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  text-decoration: none;
  color: inherit;
  transition: border-color 130ms ease;
}
.product:hover { border-color: var(--accent); }
.product .well {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  margin-bottom: 0.9rem;
}
.product .well img { display: block; max-width: 100%; max-height: 15rem; width: auto; height: auto; image-rendering: auto; }
.product .label { font-size: 14px; letter-spacing: 0.14em; }
.product h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05; max-width: none; }
.product p { color: var(--muted); max-width: 30rem; }
.product .go {
  margin-top: 0.9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
}
.product .go .buy { pointer-events: none; }
@media (max-width: 44rem) {
  .products { grid-template-columns: minmax(0, 1fr); }
  .product .well { min-height: 0; }
}

/* On the home page the masthead has no plate, so the hero can run wider. */
.masthead.solo { grid-template-columns: minmax(0, 1fr); }
.masthead.solo h1 { max-width: 16ch; }

/* A fifth feature that runs the full width, text beside its image, so an
   odd count does not leave a hole in the grid. */
.feature.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
.feature.wide > div:first-child { display: flex; flex-direction: column; gap: 0.55rem; }
.feature.wide .well { margin-top: 0; padding-top: 0; min-height: 0; flex: none; }
@media (max-width: 44rem) { .feature.wide { flex-direction: column; align-items: flex-start; } }

/* --- audio tiles ------------------------------------------------------
   Fourteen demo rows made the STAB page a long scroll of thin lines. The
   same buttons, laid out as tiles three across, so every style is on one
   screen and the section is one fifth of the height. The player script is
   unchanged: it only cares about [data-audio]. ------------------------- */

.rack.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.rack.tiles .unit,
.rack.tiles button.unit {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  transition: border-color 130ms ease, background-color 130ms ease;
}
.rack.tiles .unit:last-child { border-bottom: 1px solid var(--rule); }
.rack.tiles .unit:hover, .rack.tiles button.unit:hover { padding-inline: 1rem; border-color: var(--accent); background: var(--panel); }
.rack.tiles .unit .dot { grid-row: 1 / span 2; }
.rack.tiles .unit .name { grid-column: 2; grid-row: 1; font-size: 0.95rem; }
.rack.tiles .unit .what { grid-column: 2; grid-row: 2; font-size: 0.8125rem; line-height: 1.3; }
.rack.tiles .unit .status { grid-column: 3; grid-row: 1 / span 2; }
.rack.tiles button.unit[aria-pressed="true"] { border-color: var(--accent); }
@media (max-width: 60rem) { .rack.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .rack.tiles { grid-template-columns: minmax(0, 1fr); } }