/* Issue 2 · sound. Cartoon cover, play links, waves, samples, harmonic bars, spectrograms. */

.page--burst {
  background:
    repeating-conic-gradient(from 0deg at 72% 50%, #F6C65B 0deg 7.5deg, transparent 7.5deg 15deg),
    var(--mustard);
}
.hero__art--wide { width: min(100%, 620px); }
.art--cartoon { filter: drop-shadow(var(--shadow)); }
.art--oguz { max-width: 360px; margin: 0 auto; }

.player { display: flex; align-items: center; gap: 0.7em; margin-top: 0.6em; max-width: 22rem; }
.player audio { width: 100%; }
.player__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--tomato);
  color: var(--paper);
  font: 800 1rem/1 var(--font-display);
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.player__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ink); }
.player__btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.player__btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* play triangle, pause bars while playing */
.player__icon { width: 0; height: 0; border-style: solid; border-width: 0.45em 0 0.45em 0.75em; border-color: transparent transparent transparent currentColor; }
.is-playing .player__btn { background: var(--teal); }
.is-playing .player__icon { width: 0.7em; height: 0.9em; border: 0; border-left: 0.22em solid currentColor; border-right: 0.22em solid currentColor; }
.player__track {
  position: relative;
  flex: 1;
  min-width: 4rem;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
}
.player__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--mustard); }
figure .player { margin: 0.9em auto 0; }
.harm .player { flex-direction: column; gap: 0.4em; margin-top: 0.5em; }
.harm .player__btn { font-size: 0.85rem; padding: 0.45em 0.8em; }
.harm .player__track { width: 100%; flex: none; height: 10px; }

/* page 2 */
.art--waves { max-width: 520px; margin: 0 auto; }
.wave { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wave--bass { stroke: var(--plum); }
.wave--guitar { stroke: var(--tomato); }
.art--waves .label { font: 800 15px var(--font-display); fill: var(--ink); }
.art--waves .label--small { font-size: 12px; }
.span { fill: none; stroke: var(--ink); stroke-width: 2; }

/* page 3 */
.art--samples { max-width: 520px; margin: 0 auto; }

/* page 4 */
.harms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 24px); max-width: 560px; margin: 0 auto; }
.harm { text-align: center; }
.harm__bars { width: 100%; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); }
.bar { fill: var(--tomato); }
.harm:nth-child(2) .bar { fill: var(--teal); }
.harm:nth-child(3) .bar { fill: var(--plum); }
.harm__base { stroke: var(--ink); stroke-width: 2; }
.harm__name { font: 800 1.1rem/1 var(--font-display); margin: 0.6em 0 0; }
.harm .play { font-size: 0.85rem; padding: 0.45em 0.8em; }

/* pages 5–6 */
.spectro { position: relative; border: 4px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 7px 0 rgba(30, 34, 64, 0.35); }
.spectro img { display: block; width: 100%; height: auto; }
.spectro__x, .spectro__y, .spectro__tag {
  position: absolute;
  font: 800 0.85rem/1 var(--font-display);
  color: var(--paper);
  background: rgba(30, 34, 64, 0.8);
  padding: 0.35em 0.6em;
  border-radius: 6px;
}
.spectro__x { right: 8px; bottom: 8px; }
.spectro__y { left: 8px; top: 8px; }
.spectro__tag--hum { left: 8px; bottom: 8px; background: var(--tomato); }
.spectro__tag--song { right: 30%; top: 22%; background: var(--mustard); color: var(--ink); }

/* page 7 */
.art--mixer { max-width: 600px; margin: 0 auto; }

/* page 8 */
.tools { display: grid; gap: 18px; max-width: 520px; margin: 0 auto; }
.tool { display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: 20px; }
.tool__name { font: 800 1.3rem/1.2 var(--font-display); margin: 0; }

/* page 9 */
.art--light { max-width: 640px; margin: 0 auto; }

/* page 10 */
.art--oguz-wide { max-width: 420px; margin: 0 auto; }
.bubble--s10 { position: absolute; top: 2%; left: 4%; transform: rotate(-4deg); }

/* page 11 */
.art--subtitle { max-width: 280px; margin-top: 1.2em; }
.limits--three .limit:nth-child(3) { grid-column: 1 / -1; }

/* page 12 */
.try { font: 700 1.15rem/1.4 var(--font-display); margin: 0.6em 0 0; }
.qmark {
  position: absolute;
  top: -4%;
  right: 4%;
  z-index: 1;
  font: 900 clamp(5rem, 12vw, 10rem)/1 var(--font-display);
  color: var(--tomato);
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.35));
  transform: rotate(12deg);
}

@media (max-width: 820px) {
  .hero__art--wide { width: 100%; justify-self: center; }
  .harms { gap: 8px; }
  .harm__name { font-size: 0.95rem; }
  .spectro__x, .spectro__y, .spectro__tag { font-size: 0.7rem; }
  .tools { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tool { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .tool__name { font-size: 0.8rem; }
  .limits--three .limit:nth-child(3) { grid-column: auto; }
  .art--subtitle { display: none; }
  .bubble--s10 { font-size: 0.85rem; }
  .qmark { font-size: 4.5rem; }
}

#s12 .question { font-size: clamp(1.7rem, 3vw, 2.6rem); }