/* ---- sound ---- */
/* re:sound's page: the pads (a card each, its key on a silver cap, one lit
   yellow the way the board lights a pad that is playing), the numbered steps,
   the two screens framed as plates, and the questions. Settings first; the
   widths only change settings. */
.snd-pads, .snd-steps, .snd-shots, .snd-faq {
  --snd-top: var(--sp-8);
  --snd-gap: var(--sp-4);
  --snd-pad-fill: var(--card-fill);
  --snd-pad-lit: var(--yellow);
  --snd-pad-in: var(--sp-4) var(--sp-4) var(--sp-5);
  --snd-cap-h: 28px;
  --snd-measure: 40ch;
  --snd-no-size: 44px;
  --snd-track: .02em;
  --snd-h-track: -.01em;
  --snd-faq-measure: 60ch;
  --snd-link-off: 3px;
  margin-top: var(--snd-top); display: grid; gap: var(--snd-gap); padding: 0; list-style: none;
}

/* the offer, in a section of its own under the demo */
.snd-buy { --snd-buy-top: var(--sp-10); margin-top: var(--snd-buy-top); }
@media (min-width: 768px) { .snd-buy { --snd-buy-top: var(--sp-16); } }

/* the pads */
.snd-pad {
  display: grid; align-content: start; gap: var(--sp-2); min-width: 0; padding: var(--snd-pad-in);
  background: var(--snd-pad-fill); border: var(--card-line); box-shadow: var(--card-drop);
}
.snd-pad[data-state="lit"] { background: var(--snd-pad-lit); box-shadow: var(--drop-2), var(--bevel-yellow); }
.snd-cap {
  justify-self: start; display: inline-flex; align-items: center; min-height: var(--snd-cap-h);
  padding: 0 var(--sp-2); font: var(--t-label); text-transform: uppercase; letter-spacing: var(--snd-track);
  background: var(--silver); border: var(--line); box-shadow: var(--bevel-silver);
}
.snd-pad-h { font: var(--t-h4); letter-spacing: var(--snd-h-track); text-wrap: balance; }
.snd-pad-t { font: var(--t-body); max-width: var(--snd-measure); }

/* the steps: a big pixel number, then the words, in the order they are done */
.snd-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; align-content: start; min-width: 0; }
.snd-no {
  display: grid; place-items: center; width: var(--snd-no-size); height: var(--snd-no-size);
  font: var(--t-display); background: var(--ink); color: var(--cream); box-shadow: var(--drop-1);
}
.snd-step-b { display: grid; gap: var(--sp-2); justify-items: start; min-width: 0; }
.snd-step-h { font: var(--t-h4); }
.snd-step-t { font: var(--t-body); max-width: var(--snd-measure); }
.snd-step-a { margin-top: var(--sp-1); }

/* the screens */
.snd-shot { margin: 0; min-width: 0; }

/* the questions */
.snd-faq { --snd-gap: var(--sp-6); }
.snd-qa { display: grid; gap: var(--sp-1); min-width: 0; padding-top: var(--sp-4); border-top: var(--line); }
.snd-q { font: var(--t-h5); }
.snd-a { margin: 0; font: var(--t-body); max-width: var(--snd-faq-measure); }
.snd-a a { color: inherit; text-decoration: underline; text-underline-offset: var(--snd-link-off); }
.snd-credit { --snd-credit-track: .02em; --snd-credit-off: 3px; margin-top: var(--sp-10); font: var(--t-label); text-transform: uppercase; letter-spacing: var(--snd-credit-track); }
.snd-credit a { color: inherit; text-decoration: underline; text-underline-offset: var(--snd-credit-off); }

@media (min-width: 768px) {
  .snd-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); --snd-gap: var(--sp-8); }
  .snd-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); --snd-gap: var(--sp-8); }
  .snd-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); --snd-gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .snd-pads { grid-template-columns: repeat(3, minmax(0, 1fr)); --snd-gap: var(--sp-6); }
  .snd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .snd-step { grid-template-columns: minmax(0, 1fr); }
}


/* ---- pilot ---- */
/* A founding pilot's badge: a patch on the page, tilted the way one is pinned, its wings in the house's yellow with
   their face between them, a ribbon, and the credit. It straightens and lifts under the pointer. Settings first. */
.fp-badge {
  --fp-w: 300px;
  --fp-pad: var(--sp-4) var(--sp-5) var(--sp-5);
  --fp-tilt: -2.5deg;
  --fp-wing-h: 42px;
  --fp-face: 64px;
  --fp-rib-pad: var(--sp-1) var(--sp-3);
  --fp-track: .04em;
  --fp-lift: var(--drop-3);
  --fp-move: transform .12s steps(3), box-shadow .12s steps(3);
  display: grid; justify-items: center; gap: var(--sp-2); width: var(--fp-w); max-width: 100%; padding: var(--fp-pad);
  background: var(--paper); color: var(--ink); text-decoration: none; text-align: center;
  border: var(--line); box-shadow: var(--drop-2); transform: rotate(var(--fp-tilt)); transition: var(--fp-move);
}
@media (hover: hover) { .fp-badge:hover { transform: rotate(0deg) translateY(var(--lift)); box-shadow: var(--fp-lift); } }
.fp-top { position: relative; display: grid; place-items: center; width: 100%; height: var(--fp-face); }
.fp-wings { position: absolute; left: 0; top: 50%; width: 100%; height: var(--fp-wing-h); transform: translateY(-50%); }
.fp-o { fill: var(--ink); }
.fp-h { fill: var(--yellow-hi); }
.fp-y { fill: var(--yellow); }
.fp-s { fill: var(--yellow-lo); }
.fp-face { position: relative; width: var(--fp-face); height: var(--fp-face); border: var(--line); background: var(--robot-bg); image-rendering: pixelated; box-shadow: var(--drop-1); }
.fp-rib {
  margin-top: var(--sp-1); padding: var(--fp-rib-pad); font: var(--t-display); text-transform: uppercase; letter-spacing: var(--fp-track);
  background: var(--yellow); border: var(--line); box-shadow: var(--bevel-yellow);
}
.fp-by { font: var(--t-ui-small); color: var(--muted); }
.fp-who { font: var(--t-h5); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .fp-badge { transform: none; } }


/* ---- rsdemo ---- */
/* re:sound's live demo: a panel holding a screen (the frame, the real dock in it), two rows of switches over it
   (silver keys, the one chosen lit yellow, as the board lights a pad), and the things to try under it, each lit once
   done. On a phone the panel runs to the screen's edges so the dock has its width. Settings first; the widths only
   change settings. */
.rsd {
  --rsd-pad: var(--sp-3);
  --rsd-gap: var(--sp-4);
  --rsd-bleed: calc(-1 * var(--gut));
  --rsd-side: 0px;
  --rsd-drop: none;
  --rsd-h-font: var(--t-h2);
  --rsd-frame-h: 1160px;
  --rsd-screen-pad: var(--sp-1);
  --rsd-cols: 2;
  --rsd-cap-h: 24px;
  --rsd-rec: 8px;
  --rsd-tag-pad: var(--sp-1) var(--sp-2);
  --rsd-track: .04em;
  --rsd-measure: 60ch;
  --rsd-blink: rsd-blink 1.6s steps(2, jump-none) infinite;
  --rsd-stamp: rsd-stamp .24s steps(3);
  display: grid; gap: var(--rsd-gap); margin-inline: var(--rsd-bleed); padding: var(--rsd-pad);
  background: var(--panel-fill); border: var(--panel-line); border-inline-width: var(--rsd-side); box-shadow: var(--rsd-drop);
}
.rsd-head { display: grid; gap: var(--sp-2); justify-items: start; }
.rsd-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--rsd-tag-pad);
  font: var(--t-label); text-transform: uppercase; letter-spacing: var(--rsd-track); background: var(--ink); color: var(--cream);
}
.rsd-rec { width: var(--rsd-rec); height: var(--rsd-rec); border-radius: 50%; background: var(--rec); animation: var(--rsd-blink); }
.rsd-h { font: var(--rsd-h-font); letter-spacing: var(--track-display); text-wrap: balance; }
.rsd-lead { font: var(--t-read); max-width: var(--rsd-measure); }

/* the switches */
.rsd-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-6); }
.rsd-seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.rsd-leg { padding: 0; margin-bottom: var(--sp-1); font: var(--t-label); text-transform: uppercase; letter-spacing: var(--rsd-track); }
.rsd-opts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rsd-opt { position: relative; display: block; }
.rsd-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rsd-opt span {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--sp-3);
  font: var(--t-ui); background: var(--silver); border: var(--line); box-shadow: var(--bevel-silver);
}
.rsd-opt input:checked + span { background: var(--yellow); box-shadow: var(--bevel-yellow); }
.rsd-opt input:focus-visible + span { outline: var(--line-w-thick) solid var(--ink); outline-offset: var(--sp-1); }
.rsd-again {
  margin-left: auto; min-height: var(--target); padding: 0 var(--sp-4);
  font: var(--t-ui); color: var(--ink); background: var(--cream); border: var(--line); box-shadow: var(--drop-1); cursor: pointer;
}
.rsd-again:active { box-shadow: var(--drop-none); transform: translate(var(--sp-px), var(--sp-px)); }

/* the screen */
.rsd-screen { padding: var(--rsd-screen-pad); background: var(--glass); border: var(--line); box-shadow: var(--bevel-gun); }
.rsd-frame { display: block; width: 100%; height: var(--rsd-frame-h); border: 0; background: var(--glass); }

/* the things to try */
.rsd-foot { display: grid; gap: var(--sp-2); }
.rsd-count { font: var(--t-label); text-transform: uppercase; letter-spacing: var(--rsd-track); }
.rsd-tries { display: grid; grid-template-columns: repeat(var(--rsd-cols), minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.rsd-try { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-2); font: var(--t-ui-small); background: var(--card-fill); border: var(--line); }
.rsd-try[data-state~="lit"] { background: var(--yellow); box-shadow: var(--bevel-yellow); }
.rsd-try[data-state~="stamped"] { animation: var(--rsd-stamp); }
.rsd-cap {
  flex: none; display: inline-flex; align-items: center; min-height: var(--rsd-cap-h); padding: 0 var(--sp-2);
  font: var(--t-label); text-transform: uppercase; white-space: nowrap; background: var(--silver); border: var(--line); box-shadow: var(--bevel-silver);
}
.rsd-what { min-width: 0; }
.rsd-fine { font: var(--t-ui-medium); color: var(--muted); max-width: var(--rsd-measure); }
@keyframes rsd-blink { 50% { opacity: .2; } }
@keyframes rsd-stamp { 0% { transform: translateY(-2px); } 100% { transform: none; } }

@media (min-width: 768px) {
  .rsd { --rsd-pad: var(--sp-6); --rsd-gap: var(--sp-5); --rsd-bleed: 0px; --rsd-side: var(--line-w-thick); --rsd-drop: var(--panel-drop);
    --rsd-h-font: var(--t-h1-panel); --rsd-screen-pad: var(--sp-2); --rsd-cols: 4; }
}
/* From 900px the frame is wide enough for the dock to stand beside the Space window (below, it stands above it,
   and the frame stays tall). */
@media (min-width: 900px) { .rsd { --rsd-frame-h: 940px; } }