/* Sound Lab — first interactive pair */

.sound-page {
  background:
    radial-gradient(circle at 85% 8%, rgba(122, 55, 42, .08), transparent 30%),
    var(--paper);
}

.sound-main {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.sound-hero {
  min-height: 58vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 5rem;
  align-items: end;
  padding: 7rem 0 5rem;
  border-bottom: 1px solid var(--line);
}

.sound-hero h1 {
  font-size: clamp(3.6rem, 7vw, 6.6rem);
}

.sound-hero-copy {
  padding-bottom: .7rem;
}

.sound-hero-copy p {
  max-width: 520px;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.22rem;
}

.headphones-note {
  display: inline-block;
  margin-top: 1rem;
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--muted);
}

.lab-experiment {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 3.2rem;
  padding: 7rem 0;
  border-bottom: 1px solid var(--line);
}

.lab-rail {
  position: sticky;
  top: 94px;
  align-self: start;
  display: grid;
  gap: .35rem;
  font-size: .62rem;
  letter-spacing: .11em;
  color: var(--muted);
}

.lab-number {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.08rem;
  color: var(--ink);
}

.lab-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 2.4rem;
}

.lab-heading h2 {
  margin: 0;
  max-width: 760px;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(2.35rem, 4.8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 500;
}

.lab-heading > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.lab-card {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.control-column,
.visual-column {
  background: rgba(255,255,255,.24);
  padding: 1.35rem;
}

.control-block {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(100,95,86,.2);
}

.control-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  font-size: .78rem;
  font-weight: 700;
}

.control-title output {
  color: var(--muted);
  font-weight: 400;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0 1.3rem;
}

.preset,
.primary-button,
.secondary-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.preset {
  padding: .45rem .65rem;
  font-size: .68rem;
}

.preset:hover,
.preset.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.harmonic-row {
  display: grid;
  grid-template-columns: 68px 1fr 48px;
  gap: .65rem;
  align-items: center;
  padding: .48rem 0;
  border-top: 1px solid rgba(100,95,86,.14);
}

.harmonic-row label,
.harmonic-row output {
  font-size: .7rem;
}

.harmonic-row output {
  text-align: right;
  color: var(--muted);
}

.transport {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
}

.primary-button,
.secondary-button {
  padding: .7rem 1rem;
  font-size: .76rem;
}

.primary-button {
  background: var(--dark);
  border-color: var(--dark);
  color: #f5f0e6;
}

.primary-button:hover {
  opacity: .82;
}

.secondary-button:hover {
  background: rgba(255,255,255,.5);
}

.visual-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  font-size: .64rem;
  letter-spacing: .11em;
  color: var(--muted);
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #20211f;
}

.micro-note {
  margin-bottom: 0;
  font-size: .72rem;
  color: var(--muted);
}

.lab-explain {
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lab-explain summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-size: .78rem;
  font-weight: 700;
}

.lab-explain summary::-webkit-details-marker {
  display: none;
}

.lab-explain summary::after {
  content: "+";
  font-weight: 400;
}

.lab-explain[open] summary::after {
  content: "−";
}

.lab-explain-body {
  max-width: 780px;
  padding: .25rem 0 1.3rem;
}

.lab-explain-body p {
  font-size: .92rem;
}

.sound-equation {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  background: var(--dark);
  color: #f3eee5;
  font-family: "Cambria Math", "Times New Roman", serif;
  font-size: 1.05rem;
  overflow-x: auto;
}

.missing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.missing-card {
  padding: 1rem;
  background: rgba(255,255,255,.25);
  border: 1px solid var(--line);
}

.case-label {
  display: block;
  margin-bottom: .75rem;
  font-size: .63rem;
  letter-spacing: .11em;
  color: var(--muted);
}

.missing-card button {
  margin-top: .9rem;
}

.missing-control-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0 2.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.missing-control-row label,
.missing-control-row output {
  font-size: .75rem;
}

.missing-control-row output {
  text-align: right;
  color: var(--muted);
}

.observation-box {
  display: grid;
  gap: .55rem;
  margin: 2rem 0;
  padding: 1.25rem 1.3rem;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.3);
}

.observation-box span {
  font-size: .63rem;
  letter-spacing: .12em;
  color: var(--muted);
}

.observation-box strong {
  max-width: 760px;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.3;
}

.lab-next {
  padding: 6rem 0;
}

.lab-next-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.lab-next-grid article {
  min-height: 240px;
  padding: 1.1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lab-next-grid article > span {
  font-size: .65rem;
  color: var(--muted);
}

.lab-next-grid h3 {
  margin: 2rem 0 .8rem;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

.lab-next-grid p {
  font-size: .84rem;
}

.lab-next-grid small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .sound-hero,
  .lab-heading,
  .lab-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .lab-next-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .sound-main {
    width: min(100% - 28px, var(--max));
  }

  .lab-experiment {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 5rem 0;
  }

  .lab-rail {
    position: static;
    display: flex;
    gap: .65rem;
    align-items: baseline;
  }

  .missing-grid {
    grid-template-columns: 1fr;
  }

  .missing-control-row {
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .missing-control-row output {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .lab-next-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------- V4: compact intro, smaller headings, experiment 03 ---------- */

.sound-intro {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 3rem 5rem;
  align-items: end;
  padding: 4.25rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
}

.sound-intro h1 {
  margin: 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 500;
}

.sound-intro-copy p {
  margin: 0 0 .55rem;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.05rem;
}

.sound-intro-copy span {
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

.lab-jump {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: .2rem;
  background: var(--line);
  border: 1px solid var(--line);
}

.lab-jump a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .85rem;
  background: var(--paper);
  text-decoration: none;
  font-size: .72rem;
}

.lab-jump a:hover {
  background: rgba(140,60,44,.08);
}

.lab-jump b {
  color: var(--accent);
  font-weight: 700;
}

.lab-heading h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.95rem) !important;
  line-height: 1.04 !important;
}

.lab-experiment {
  padding-top: 5.75rem;
  padding-bottom: 5.75rem;
}

.beat-card {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.beat-controls,
.beat-visuals {
  padding: 1.25rem;
  background: rgba(255,255,255,.24);
}

.beat-controls .control-block + .control-block {
  margin-top: 1rem;
}

.beat-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.beat-readout > div {
  padding: .75rem;
  background: var(--paper);
}

.beat-readout span,
.beat-readout strong {
  display: block;
}

.beat-readout span {
  margin-bottom: .28rem;
  font-size: .58rem;
  letter-spacing: .11em;
  color: var(--muted);
}

.beat-readout strong {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
}

.beat-spectrum-head {
  margin-top: 1rem;
}

.listening-connection {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.3rem;
  margin: 2rem 0 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.listening-connection > span {
  font-size: .61rem;
  letter-spacing: .11em;
  color: var(--accent);
}

.listening-connection strong {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
}

.listening-connection p {
  max-width: 650px;
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .83rem;
}

@media (max-width: 980px) {
  .sound-intro,
  .beat-card {
    grid-template-columns: 1fr;
  }

  .lab-jump {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .listening-connection {
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .beat-readout {
    grid-template-columns: 1fr;
  }
}


/* V6 — explicit Modern Music integration */
.modern-music-lens {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.3rem;
  margin: 1.7rem 0 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.modern-music-lens > span {
  color: #6d62a8;
  font-size: .61rem;
  letter-spacing: .11em;
}

.modern-music-lens strong {
  display: block;
  margin-bottom: .3rem;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
}

.modern-music-lens p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.modern-music-lens a {
  display: inline-block;
  margin-top: .55rem;
  color: #6d62a8;
  font-size: .69rem;
  text-decoration: none;
}

@media (max-width: 700px) {
  .modern-music-lens {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}


/* ============================================================
   V7 — Sound Lab 04–05
   ============================================================ */

.lab-jump {
  grid-template-columns: repeat(5, 1fr);
}

.timescale-card,
.spectrum-stretch-card {
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.timescale-controls,
.timescale-visuals,
.spectrum-stretch-controls,
.spectrum-stretch-visuals {
  padding: 1.25rem;
  background: rgba(255,255,255,.24);
}

.timescale-controls .control-block + .control-block,
.spectrum-stretch-controls .control-block + .control-block {
  margin-top: 1rem;
}

.timescale-status,
.stretch-state {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
  margin-top: .65rem;
}

.timescale-status span:first-child,
.stretch-state span {
  padding: .27rem .45rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.26);
  color: var(--ink);
  font-size: .62rem;
  letter-spacing: .04em;
}

.timescale-status span:last-child,
.stretch-state code {
  color: var(--muted);
  font-size: .64rem;
}

.rate-presets,
.stretch-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin: 1.15rem 0 0;
}

.rate-preset,
.stretch-preset {
  cursor: pointer;
  padding: .48rem .55rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: .64rem;
  text-align: left;
}

.rate-preset:hover,
.stretch-preset:hover,
.stretch-preset.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.timescale-spectrum-head {
  margin-top: 1rem;
}

.source-trace {
  margin-top: .55rem !important;
  font-size: .68rem !important;
}

.source-trace a {
  color: #6d62a8;
}

.partial-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.partial-cell {
  padding: .62rem .7rem;
  background: var(--paper);
}

.partial-cell span,
.partial-cell strong,
.partial-cell em {
  display: block;
}

.partial-cell span {
  color: var(--muted);
  font-size: .56rem;
  letter-spacing: .08em;
}

.partial-cell strong {
  margin-top: .12rem;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .92rem;
  font-weight: 500;
}

.partial-cell em {
  margin-top: .08rem;
  color: var(--muted);
  font-size: .56rem;
  font-style: normal;
}

@media (max-width: 1080px) {
  .lab-jump {
    grid-template-columns: 1fr 1fr;
  }

  .timescale-card,
  .spectrum-stretch-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .lab-jump,
  .rate-presets,
  .stretch-presets,
  .partial-table {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V8 — Lab 06: Distort a Sine
   ============================================================ */

.lab-jump {
  grid-template-columns: repeat(6, 1fr);
}

.distortion-card {
  display: grid;
  grid-template-columns: minmax(320px, .68fr) minmax(0, 1.32fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.distortion-controls,
.distortion-visuals {
  padding: 1.25rem;
  background: rgba(255,255,255,.24);
}

.drive-scale {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .55rem;
  letter-spacing: .05em;
}

.distortion-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin: 1rem 0;
}

.distort-mode {
  cursor: pointer;
  padding: .5rem .58rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: .63rem;
  text-align: left;
}

.distort-mode:hover,
.distort-mode.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.distortion-readout {
  display: grid;
  gap: 1px;
  margin: 1rem 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.distortion-readout > div {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: .7rem;
  align-items: center;
  padding: .55rem .62rem;
  background: var(--paper);
}

.distortion-readout span {
  color: var(--muted);
  font-size: .53rem;
  letter-spacing: .1em;
}

.distortion-readout strong {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .78rem;
  font-weight: 500;
  text-align: right;
}

.distortion-transport {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.distortion-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.distortion-visuals canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #20211f;
}

.distortion-spectrum-head {
  margin-top: 1rem;
}

.nonlinear-principle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.nonlinear-principle article {
  padding: 1rem;
  background: rgba(255,255,255,.22);
}

.nonlinear-principle article > span {
  color: var(--muted);
  font-size: .55rem;
  letter-spacing: .1em;
}

.nonlinear-principle .sound-equation {
  margin: .75rem 0;
  padding: .7rem;
  font-size: .78rem;
}

.nonlinear-principle p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}

.romitelli-lens blockquote {
  margin: .75rem 0 .25rem;
  padding: .65rem 0 .65rem .85rem;
  border-left: 2px solid #8e5b4d;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .92rem;
  line-height: 1.45;
}

.romitelli-lens blockquote cite {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .58rem;
  font-style: normal;
}

@media (max-width: 1080px) {
  .lab-jump {
    grid-template-columns: repeat(3, 1fr);
  }

  .distortion-card,
  .distortion-visual-grid,
  .nonlinear-principle {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .lab-jump,
  .distortion-mode,
  .distortion-transport {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V9 — Lab 07: Many Lines → One Cloud
   ============================================================ */

.lab-jump {
  grid-template-columns: repeat(7, 1fr);
}

.cloud-principle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.cloud-principle article {
  padding: 1rem;
  background: rgba(255,255,255,.22);
}

.cloud-principle span,
.cloud-engine-head .section-kicker,
.cloud-caption-grid span,
.cloud-comparison > div:first-child > span,
.cloud-comparison-grid span {
  color: var(--muted);
  font-size: .55rem;
  letter-spacing: .1em;
}

.cloud-principle h3,
.cloud-engine-head h3,
.cloud-comparison h3 {
  margin: .55rem 0 .45rem;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-weight: 500;
}

.cloud-principle h3 {
  font-size: 1.15rem;
}

.cloud-principle p {
  margin: 0 0 .75rem;
  color: var(--muted);
  font-size: .72rem;
}

.cloud-principle code {
  color: var(--ink);
  font-family: "Cambria Math", "Times New Roman", serif;
  font-size: .78rem;
}

.cloud-engine {
  margin-top: 2.8rem;
}

.cloud-engine-head {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: .9rem;
}

.cloud-engine-head h3 {
  margin: .25rem 0 0;
  font-size: 1.7rem;
}

.cloud-engine-head > p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}

.cloud-card {
  display: grid;
  grid-template-columns: minmax(320px,.68fr) minmax(0,1.32fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.cloud-controls,
.cloud-visuals {
  padding: 1.25rem;
  background: rgba(255,255,255,.24);
}

.cloud-controls .control-block + .control-block {
  margin-top: .92rem;
}

.cloud-readout {
  display: grid;
  gap: 1px;
  margin: 1rem 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.cloud-readout > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  align-items: center;
  padding: .54rem .62rem;
  background: var(--paper);
}

.cloud-readout span {
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .09em;
}

.cloud-readout strong {
  text-align: right;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .75rem;
  font-weight: 500;
}

.cloud-visuals canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #20211f;
}

.cloud-caption-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: .7rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.cloud-caption-grid > div {
  padding: .65rem .72rem;
  background: var(--paper);
}

.cloud-caption-grid p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .64rem;
}

.cloud-lens {
  margin-top: 1px;
}

.cloud-lens blockquote {
  margin: .75rem 0 .35rem;
  padding: .65rem 0 .65rem .85rem;
  border-left: 2px solid #6d62a8;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .91rem;
  line-height: 1.45;
}

.cloud-lens blockquote cite {
  display: block;
  margin-top: .36rem;
  color: var(--muted);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .57rem;
  font-style: normal;
}

.cloud-comparison {
  display: grid;
  grid-template-columns: .46fr 1.54fr;
  gap: 1px;
  margin-top: 2.8rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.cloud-comparison > div {
  padding: 1rem;
  background: rgba(255,255,255,.22);
}

.cloud-comparison h3 {
  margin: .6rem 0 0;
  font-size: 1.42rem;
}

.cloud-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  padding: 0 !important;
  background: var(--line) !important;
}

.cloud-comparison-grid article {
  padding: 1rem;
  background: var(--paper);
}

.cloud-comparison-grid strong {
  display: block;
  margin: .38rem 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .95rem;
  font-weight: 500;
}

.cloud-comparison-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
}

@media (max-width: 1080px) {
  .lab-jump {
    grid-template-columns: repeat(4,1fr);
  }

  .cloud-principle,
  .cloud-card,
  .cloud-engine-head,
  .cloud-comparison,
  .cloud-comparison-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .lab-jump,
  .cloud-caption-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V10 — Lab 08: Sound as Space
   ============================================================ */

.lab-jump {
  grid-template-columns: repeat(8, 1fr);
}

.space-equation-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: 2.8rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.space-equation-strip article {
  padding: .95rem;
  background: rgba(255,255,255,.23);
}

.space-equation-strip span,
.spatial-module-head > span,
.space-boundary > div:first-child > span,
.space-boundary-grid span {
  color: var(--muted);
  font-size: .54rem;
  letter-spacing: .1em;
}

.space-equation-strip code {
  display: block;
  margin: .58rem 0 .42rem;
  color: var(--ink);
  font-family: "Cambria Math", "Times New Roman", serif;
  font-size: .92rem;
}

.space-equation-strip p {
  margin: 0;
  color: var(--muted);
  font-size: .66rem;
}

.space-engine + .space-engine {
  margin-top: 3.2rem;
}

.space-engine-head {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: .9rem;
}

.space-engine-head h3 {
  margin: .25rem 0 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
}

.space-engine-head > p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}

.space-room-card,
.virtual-room-card {
  display: grid;
  grid-template-columns: minmax(0, 1.27fr) minmax(320px, .73fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.space-room-visual,
.space-room-controls,
.virtual-room-controls,
.virtual-room-visuals {
  padding: 1.2rem;
  background: rgba(255,255,255,.23);
}

.space-room-visual canvas,
.spatial-module canvas,
.virtual-room-visuals canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #20211f;
}

.space-room-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .55rem;
  color: var(--muted);
  font-size: .59rem;
}

.space-room-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .3rem;
  border-radius: 50%;
  vertical-align: middle;
}

.source-dot { background: #8e9b68; }
.seat-dot { background: #d6c5a1; }
.selected-dot { background: #b86c58; }

.seat-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3rem;
  margin-bottom: 1rem;
}

.seat-select {
  cursor: pointer;
  padding: .52rem .45rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: .64rem;
}

.seat-select:hover,
.seat-select.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.space-readout,
.virtual-room-readout {
  display: grid;
  gap: 1px;
  margin: 1rem 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.space-readout > div,
.virtual-room-readout > div {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: .65rem;
  align-items: center;
  padding: .55rem .62rem;
  background: var(--paper);
}

.space-readout span,
.virtual-room-readout span {
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .09em;
}

.space-readout strong,
.virtual-room-readout strong {
  text-align: right;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .74rem;
  font-weight: 500;
}

.research-bridge-link {
  display: inline-block;
  margin-top: .6rem;
  color: #6d62a8;
  font-size: .68rem;
  text-decoration: none;
}

.spatial-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.spatial-module {
  padding: 1.2rem;
  background: rgba(255,255,255,.23);
}

.spatial-module-head h4 {
  margin: .45rem 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.32rem;
  font-weight: 500;
}

.spatial-module-head p {
  min-height: 4.1em;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .72rem;
}

.spatial-module .control-block + .control-block {
  margin-top: .8rem;
}

.space-boundary {
  display: grid;
  grid-template-columns: .46fr 1.54fr;
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.space-boundary > div {
  padding: 1rem;
  background: rgba(255,255,255,.22);
}

.space-boundary h3 {
  margin: .55rem 0 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.42rem;
  font-weight: 500;
}

.space-boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 0 !important;
  background: var(--line) !important;
}

.space-boundary-grid article {
  padding: 1rem;
  background: var(--paper);
}

.space-boundary-grid strong {
  display: block;
  margin: .38rem 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: .95rem;
  font-weight: 500;
}

.space-boundary-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
}

.virtual-room-card {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
}

.virtual-room-controls .control-block + .control-block {
  margin-top: .9rem;
}

.virtual-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: .35rem;
  align-items: center;
  margin-top: .9rem;
}

.virtual-chain span {
  padding: .5rem .55rem;
  border: 1px solid var(--line);
  text-align: center;
  font-size: .62rem;
}

.virtual-chain b {
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 1180px) {
  .lab-jump {
    grid-template-columns: repeat(4,1fr);
  }

  .space-equation-strip {
    grid-template-columns: 1fr 1fr;
  }

  .space-engine-head,
  .space-room-card,
  .spatial-pair,
  .virtual-room-card,
  .space-boundary,
  .space-boundary-grid {
    grid-template-columns: 1fr;
  }

  .spatial-module-head p {
    min-height: auto;
  }
}

@media (max-width: 650px) {
  .lab-jump,
  .space-equation-strip,
  .seat-buttons,
  .virtual-chain {
    grid-template-columns: 1fr;
  }

  .virtual-chain b {
    transform: rotate(90deg);
    text-align: center;
  }
}

/* V12 — historical case bridge */
.historical-case-banner{display:grid;grid-template-columns:auto auto 1fr auto;gap:1rem;align-items:center;margin:3rem 0 1px;padding:1rem 1.1rem;background:#201f1c;color:#f4efe7;text-decoration:none}.historical-case-banner span{font-size:.54rem;letter-spacing:.11em;color:#bcaea1}.historical-case-banner strong{font:500 1.25rem "Iowan Old Style",Baskerville,Georgia,serif}.historical-case-banner p{margin:0;color:#c9c1b8;font-size:.67rem}.historical-case-banner b{white-space:nowrap;font-size:.68rem}.historical-case-banner:hover b{transform:translateX(3px)}
@media(max-width:760px){.historical-case-banner{grid-template-columns:1fr}.historical-case-banner p{max-width:620px}}


/* ============================================================
   V19 — reader-first Sound Lab
   ============================================================ */
.sound-intro {
  padding-bottom: 2.2rem;
}
.sound-intro h1 {
  max-width: 900px;
  font-size: clamp(2.55rem, 5vw, 4.8rem);
  line-height: 1.02;
}
.sound-primer {
  padding: 4.2rem 0 5.3rem;
  border-bottom: 1px solid var(--line);
}
.primer-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: end;
}
.primer-head h2 {
  max-width: 760px;
  margin: 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.55rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 500;
}
.primer-head > p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: .95rem;
}
.plain-vocab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.plain-vocab article {
  padding: 1rem 1.05rem;
  background: rgba(255,255,255,.24);
}
.plain-vocab article > span,
.history-steps article > span,
.explorer-salute > span {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .1em;
}
.plain-vocab strong {
  display: block;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.04rem;
  font-weight: 500;
}
.plain-vocab p {
  margin: .38rem 0 0;
  color: var(--muted);
  font-size: .72rem;
}
.history-route {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.history-route-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  column-gap: 3rem;
  align-items: end;
}
.history-route-head .eyebrow { grid-column: 1 / -1; }
.history-route-head h3 {
  margin: 0;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.04;
}
.history-route-head > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}
.history-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.history-steps article {
  position: relative;
  padding: 1rem;
  background: var(--paper);
}
.history-steps article > b {
  position: absolute;
  top: .85rem;
  right: .9rem;
  color: rgba(110,88,75,.28);
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.45rem;
}
.history-steps strong {
  display: block;
  max-width: 280px;
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
}
.history-steps p {
  margin: .45rem 0 0;
  color: var(--muted);
  font-size: .69rem;
}
.history-route-footer {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: 1.2rem;
  margin-top: 1px;
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(142,94,73,.045);
  font-size: .78rem;
}
.history-route-footer span { color: var(--muted); }
.history-note {
  margin-top: .8rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.history-note summary {
  cursor: pointer;
  padding: .8rem 0;
  font-size: .72rem;
  font-weight: 700;
}
.history-note p {
  max-width: 850px;
  color: var(--muted);
  font-size: .72rem;
}
.compact-sources a { font-size: .66rem; }
.explorer-salute {
  display: grid;
  grid-template-columns: 145px .8fr 1.2fr;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.explorer-salute p,
.explorer-salute div {
  margin: 0;
  font-size: .72rem;
}
.explorer-salute div { color: #6d62a8; }

.lab-heading {
  margin-bottom: 1.5rem;
}
.lab-heading h2 {
  font-size: clamp(2.15rem, 4.2vw, 3.9rem);
}
.lab-heading > p {
  font-size: .88rem;
  line-height: 1.55;
}
.lab-explain-body {
  max-width: 850px;
}
.lab-explain-body p {
  font-size: .9rem;
  line-height: 1.58;
}
.plain-rule {
  margin: 1rem 0;
  padding: .8rem .95rem;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.28);
  font-size: .82rem;
}
.nested-tech {
  margin: .8rem 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.nested-tech summary {
  cursor: pointer;
  padding: .65rem 0;
  font-size: .72rem;
  font-weight: 700;
}
.nested-tech .sound-equation { margin-top: .2rem; }

/* Fix the old grid-placement bug: lenses that are direct children of a lab
   must occupy the main content column, not the 125px rail. */
.lab-experiment > .modern-music-lens {
  grid-column: 2 / -1;
}
.modern-music-lens {
  grid-template-columns: 120px minmax(0,1fr) minmax(220px,.55fr);
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 0;
  padding: .85rem 0;
}
.modern-music-lens > span {
  padding-top: .15rem;
  white-space: nowrap;
}
.modern-lens-main strong {
  margin: 0 0 .18rem;
  font-size: .98rem;
}
.modern-lens-main p {
  max-width: none;
  font-size: .72rem;
  line-height: 1.45;
}
.modern-lens-links {
  display: grid;
  justify-items: end;
  gap: .35rem;
  text-align: right;
}
.modern-lens-links span {
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.4;
}
.modern-lens-links a {
  margin: 0;
  font-size: .66rem;
}
.revision-note {
  color: var(--muted);
  font-size: .62rem;
}

@media (max-width: 900px) {
  .primer-head,
  .history-route-head { grid-template-columns: 1fr; gap: .8rem; }
  .plain-vocab,
  .history-steps { grid-template-columns: 1fr 1fr; }
  .explorer-salute { grid-template-columns: 1fr; }
  .modern-music-lens {
    grid-template-columns: 105px 1fr;
  }
  .modern-lens-links {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}
@media (max-width: 700px) {
  .plain-vocab,
  .history-steps,
  .history-route-footer { grid-template-columns: 1fr; }
  .lab-experiment > .modern-music-lens { grid-column: 1 / -1; }
  .modern-music-lens { grid-template-columns: 1fr; }
  .modern-lens-links { grid-column: 1; }
}

/* Final compact primer: vocabulary and history now form one short bridge. */
.sound-primer {
  padding: 3.4rem 0 4.2rem;
}
.sound-primer .primer-head {
  grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
  gap: 2.5rem;
}
.sound-primer .primer-head h2 {
  max-width: 820px;
  font-size: clamp(2.15rem,3.5vw,3.25rem);
}
.sound-primer .primer-head > p {
  max-width: 500px;
  font-size: .86rem;
  line-height: 1.55;
}
.primer-bridge {
  display: grid;
  grid-template-columns: minmax(360px,.82fr) minmax(0,1.18fr);
  gap: 1px;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.primer-bridge .plain-vocab {
  grid-template-columns: 1fr 1fr;
  align-content: stretch;
  gap: 1px;
  margin: 0;
  border: 0;
}
.primer-bridge .plain-vocab article {
  min-height: 0;
  padding: .95rem 1rem;
  background: var(--paper);
}
.primer-bridge .plain-vocab strong {
  font-size: .96rem;
  line-height: 1.25;
}
.primer-bridge .plain-vocab p {
  font-size: .67rem;
  line-height: 1.45;
}
.primer-bridge .history-route {
  margin: 0;
  padding: 1rem;
  border: 0;
  background: rgba(142,94,73,.045);
}
.primer-bridge .history-route-head {
  display: block;
}
.primer-bridge .history-route-head .eyebrow {
  margin-bottom: .35rem;
}
.primer-bridge .history-route-head h3 {
  max-width: 620px;
  font-size: clamp(1.35rem,2.2vw,1.9rem);
  line-height: 1.08;
}
.primer-bridge .history-steps {
  grid-template-columns: 1fr 1fr;
  margin-top: .85rem;
  border: 0;
}
.primer-bridge .history-steps article {
  min-height: 0;
  padding: .78rem .85rem;
}
.primer-bridge .history-steps article > b {
  top: .65rem;
  right: .75rem;
  font-size: 1.15rem;
}
.primer-bridge .history-steps strong {
  max-width: 255px;
  font-size: .91rem;
  line-height: 1.25;
}
.primer-bridge .history-steps p {
  margin-top: .32rem;
  font-size: .63rem;
  line-height: 1.45;
}
.primer-bridge .history-route-footer {
  grid-template-columns: .85fr 1.15fr;
  gap: .8rem;
  padding: .72rem .8rem;
  font-size: .68rem;
}
.primer-bridge .history-note {
  margin-top: .55rem;
}
.primer-bridge .history-note summary {
  padding: .58rem 0;
  font-size: .66rem;
}
.primer-bridge .history-note p {
  margin: .5rem 0;
  font-size: .66rem;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .sound-primer .primer-head,
  .primer-bridge {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .primer-bridge .plain-vocab,
  .primer-bridge .history-steps,
  .primer-bridge .history-route-footer {
    grid-template-columns: 1fr;
  }
}