/* ───────────────────────── Sound Garden ─────────────────────────
   One page, one colour bed per section. Each bed sets its own tokens:
   --bg, --fg, --soft (secondary text tinted from the bed), --accent,
   --trail (walking path), --btn-ink (text on cream buttons).          */

:root {
  --ink: #13261d;
  --cream: #fff4dc;
  --euc: #1f5a43;
  --euc-deep: #174536;
  --waratah: #c8233a;
  --wattle: #f4b41a;
  --jacaranda: #6f58a8;
  --daisy: #f7c3cf;
  --pool: #136ba6;
  --pool-deep: #0b4673;

  --display: "Shantell Sans", "Comic Neue", ui-rounded, "Segoe Print", sans-serif;
  --text: "Andika", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 36rem;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light dark;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--wattle) var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--text);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--wattle); color: var(--ink); }

h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0; text-wrap: balance; }
h2 {
  font-size: clamp(2.5rem, 5.5vw + .5rem, 4.5rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  font-variation-settings: "BNCE" 45, "INFM" 55;
}
h3 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem); font-weight: 700; font-variation-settings: "BNCE" 30, "INFM" 40; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent, var(--wattle)); outline-offset: 4px; border-radius: 10px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--cream); color: var(--ink); padding: .6rem 1rem; border-radius: 999px;
  font-family: var(--display); font-weight: 700; text-decoration: none;
  transition: top .2s var(--out);
}
.skip:focus { top: 1rem; }

/* ───────── beds ───────── */
.bed {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(5rem, 11vw, 9rem);
  padding-inline: var(--gutter);
}
/* cut-paper scalloped top edge: each bed tucks over the one above */
.bed + .bed::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--scallop-h, 22px) * -1 + 1px);
  height: var(--scallop-h, 22px);
  background: var(--bg);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 calc(var(--scallop-w, 34px) / 2 - .5px), transparent calc(var(--scallop-w, 34px) / 2)) 0 0 / var(--scallop-w, 34px) var(--scallop-h, 22px) repeat-x;
          mask: radial-gradient(circle at 50% 100%, #000 calc(var(--scallop-w, 34px) / 2 - .5px), transparent calc(var(--scallop-w, 34px) / 2)) 0 0 / var(--scallop-w, 34px) var(--scallop-h, 22px) repeat-x;
  pointer-events: none;
  z-index: 2;
}
.bed__inner { position: relative; z-index: 1; width: min(100%, 72rem); margin-inline: auto; }

.bed p:not([class]) , .hero__intro { max-width: var(--measure); }
.bed p:not([class]) + p:not([class]) { margin-top: 1em; }

.ipa {
  font-family: var(--text);
  font-size: clamp(1.0625rem, .5vw + .95rem, 1.3rem);
  color: var(--soft);
  letter-spacing: .02em;
  margin: .5rem 0 1.4rem;
}

.bed--garden { --bg: var(--euc);      --fg: var(--cream); --soft: #cfe5c4; --accent: var(--wattle); --trail: var(--wattle); --btn-ink: var(--euc); }
.bed--walk   { --bg: var(--euc-deep); --fg: var(--cream); --soft: #c3dcba; --accent: var(--wattle); --trail: var(--wattle); --btn-ink: var(--euc-deep); --scallop-w: 30px; --scallop-h: 18px; }
.bed--beat   { --bg: var(--waratah);  --fg: var(--cream); --soft: #ffd9d3; --accent: var(--cream);  --trail: var(--cream);  --btn-ink: #9e1428; --scallop-w: 44px; --scallop-h: 24px; }
.bed--band   { --bg: var(--wattle);   --fg: var(--ink);   --soft: #4d3a07; --accent: var(--ink);    --trail: var(--ink);    --btn-ink: var(--ink); --scallop-w: 26px; --scallop-h: 16px; }
.bed--poem   { --bg: var(--jacaranda);--fg: var(--cream); --soft: #e6ddff; --accent: var(--wattle); --trail: var(--cream);  --btn-ink: #4a3685; --scallop-w: 38px; --scallop-h: 22px; }
.bed--table  { --bg: var(--daisy);    --fg: #3a1020;      --soft: #6b2639; --accent: #3a1020;       --trail: #9b2f4c;       --btn-ink: #3a1020; --scallop-w: 30px; --scallop-h: 20px; }
.bed--pool   { --bg: var(--pool);     --fg: var(--cream); --soft: #d3ecff; --accent: var(--wattle); --trail: var(--cream);  --btn-ink: var(--pool); --scallop-w: 48px; --scallop-h: 20px; }

/* ───────── walking trail ───────── */
.trail {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
  clip-path: inset(0 0 calc(100% - var(--reveal, 100%)) 0);
}
.trail path {
  fill: none; stroke: var(--trail); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: .5 17; vector-effect: non-scaling-stroke; opacity: .7;
}

/* ───────── sound toggle ───────── */
.sound-toggle {
  position: fixed; z-index: 40;
  top: max(.875rem, env(safe-area-inset-top)); right: max(.875rem, env(safe-area-inset-right));
  display: none; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem .5rem .8rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cream); color: var(--ink);
  font-family: var(--display); font-weight: 650; font-size: .95rem;
  box-shadow: 0 6px 16px -6px rgb(10 25 18 / .45);
  transition: transform .25s var(--spring), background-color .2s;
}
.js .sound-toggle { display: inline-flex; }
.sound-toggle:hover { transform: translateY(-2px); }
.sound-toggle:focus-visible { outline-color: var(--wattle); outline-offset: 3px; border-radius: 999px; box-shadow: 0 0 0 3px var(--ink); }
.sound-toggle__icon { width: 22px; height: 22px; }
.sound-toggle__icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle__icon .spk { fill: currentColor; }
.sound-toggle .mute { display: none; }
.sound-toggle[aria-pressed="false"] .wave { display: none; }
.sound-toggle[aria-pressed="false"] .mute { display: inline; }
.sound-toggle[aria-pressed="false"] { background: #e6dccb; }

/* ───────── hero / garden ───────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: 0;
  overflow: clip;
}
.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; line-height: 44px;
  font-variation-settings: "BNCE" 20, "INFM" 30;
}
.brand span { color: var(--wattle); }

.hero__grid {
  flex: 1;
  width: min(100%, 72rem); margin-inline: auto;
  display: grid; align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 23rem);
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 4vh, 3rem);
}
.hero h1 {
  font-size: clamp(4rem, 11.5vw, 8.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: .9;
  font-variation-settings: "BNCE" 60, "INFM" 70;
}
.syllables { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.syllables span { display: inline-block; transition: transform .45s var(--spring); }
.syllables b { color: var(--wattle); font-weight: 800; margin-inline: .04em; }
.hero.is-singing .syllables span { animation: hop .6s var(--spring) both; }
.hero.is-singing .syllables span:nth-of-type(2) { animation-delay: .08s; }
.hero.is-singing .syllables span:nth-of-type(3) { animation-delay: .16s; }
@keyframes hop { 40% { transform: translateY(-.12em) rotate(-2deg); } }

.hero .ipa { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem); margin: .9rem 0 1.25rem; }
.hero__intro { font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem); max-width: 31rem; color: var(--fg); }

/* the articulation flashcard */
.soundcard {
  --card-c: var(--wattle);
  position: relative;
  background: var(--cream); color: var(--ink);
  border-radius: 22px;
  padding: 2.25rem 1.75rem 1.6rem;
  rotate: 2.5deg;
  box-shadow: 0 22px 40px -18px rgb(5 20 14 / .6), 0 2px 0 rgb(0 0 0 / .08);
  min-height: 15.5rem;
  transition: rotate .5s var(--spring);
}
.soundcard::after { /* coloured corner tab, set by the last flower */
  content: ""; position: absolute; top: 0; right: 0; width: 4.25rem; height: 4.25rem;
  background: var(--card-c);
  border-radius: 0 22px 0 100%;
  transition: background-color .4s var(--out);
}
.soundcard__hole { position: absolute; top: 1rem; left: 1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--euc); box-shadow: inset 0 2px 2px rgb(0 0 0 / .35); }
.soundcard__sym {
  font-family: var(--text); font-weight: 700;
  font-size: clamp(3.25rem, 5vw, 4.75rem); line-height: 1;
  letter-spacing: .02em; color: var(--ink);
}
.soundcard__word { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.15; margin-top: .6rem; font-variation-settings: "BNCE" 40, "INFM" 50; }
.soundcard__cue { color: #3e4f45; margin-top: .45rem; font-size: 1rem; line-height: 1.5; }
.soundcard.is-new { animation: flip .55s var(--spring); }
@keyframes flip { 0% { transform: rotateX(70deg) scale(.96); } 100% { transform: none; } }

/* flowerbed */
.flowerbed {
  --bed-h: clamp(170px, 38vh, 360px);
  list-style: none; margin: 0 auto; padding: 0;
  width: min(100%, 64rem);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(.25rem, 1.5vw, 1.5rem);
}
.plot { flex: 1 1 0; display: flex; justify-content: center; min-width: 0; }
.flower {
  position: relative; display: block;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 40px 40px 0 0;
  -webkit-tap-highlight-color: transparent;
}
.flower svg {
  display: block;
  height: calc(var(--h) * var(--bed-h)); width: auto; max-width: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: sway 7s ease-in-out infinite; animation-delay: var(--delay);
}
@keyframes sway { 50% { transform: rotate(1.6deg); } 0%, 100% { transform: rotate(-1.6deg); } }
.flower .stem { fill: none; stroke: #9cc57c; stroke-width: 5; stroke-linecap: round; }
.flower .stem--fine { stroke-width: 2.5; }
.flower .leaf { fill: #8fbd6c; }
.flower .leaf--thin { fill: #a9cf86; }
.flower .leaf--blade { fill: #6fa55a; }
.flower .head {
  transform-box: fill-box; transform-origin: 50% 70%;
  scale: 1.32;
  transition: transform .35s var(--spring), filter .4s;
}
.flower:hover .head { transform: scale(1.07) rotate(-3deg); }
.flower:focus-visible { outline-offset: 2px; outline-color: var(--wattle); }
.flower.is-blooming .head { animation: bloom .75s var(--spring); filter: url(#paper) drop-shadow(0 0 14px var(--bloom)); }
@keyframes bloom {
  0% { transform: scale(.72) rotate(8deg); }
  55% { transform: scale(1.22) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
.flower__tag { /* a little plant marker stuck in the soil */
  position: absolute; left: 50%; bottom: 30px; translate: 6px 0;
  font-family: var(--text); font-weight: 700; font-size: clamp(.8rem, 1.2vw, .95rem); line-height: 1;
  background: var(--cream); color: var(--ink);
  padding: .35em .5em .4em; border-radius: 6px;
  rotate: 6deg; pointer-events: none;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / .35);
}
.flower__tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 14px; margin-left: -1.5px; background: #c9a36a; border-radius: 0 0 2px 2px; }

.fireflies { display: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* cut paper: every drawn shape gets slightly hand-cut edges and sits on a soft shadow */
/* only large filled shapes are 'cut'; hairlines (strings, bow, bristle tips, mouth interior) stay crisp */
.flower .head, .flower .leaf, .soundcard__mark,
.violin__body > :is(path, rect):not([fill="none"]):not([fill="#f2d7a6"]),
.guitar svg > :is(path, rect, circle):not([fill="none"]),
.mouth__shape > :first-child { filter: url(#paper); }
.flower svg { will-change: transform; }
.soundcard__mark { display: inline-block; width: .62em; height: .62em; vertical-align: -.02em; margin-inline: .08em; }

/* ───────── walk ───────── */
.walk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.signpost { margin: 0; position: relative; justify-self: center; max-width: 24rem; padding-bottom: 5.5rem; }
.signpost__post { position: absolute; left: 50%; bottom: 0; width: 40px; height: 100%; translate: -50% 0; z-index: -1; }
.signpost__post rect { fill: #6b4320; }
.signpost blockquote {
  margin: 0; background: #8a5a2b; color: #fff7e6;
  padding: 1.25rem 1.4rem; border-radius: 14px; rotate: -2deg;
  box-shadow: 0 14px 24px -14px rgb(0 0 0 / .6), inset 0 -4px 0 rgb(0 0 0 / .12);
  font-size: 1rem; line-height: 1.55;
}
.signpost__head { font-family: var(--display); font-weight: 750; font-size: 1.3rem; margin-bottom: .25rem; font-variation-settings: "BNCE" 40, "INFM" 60; }
.signpost blockquote::before, .signpost blockquote::after { content: ""; position: absolute; top: .7rem; width: .5rem; height: .5rem; border-radius: 50%; background: #5a3818; }
.signpost blockquote::before { left: .75rem; }
.signpost blockquote::after { right: .75rem; }

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 52px; padding: .7rem 1.5rem .7rem 1.15rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cream); color: var(--btn-ink);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  font-variation-settings: "BNCE" 30, "INFM" 40;
  box-shadow: 0 10px 18px -10px rgb(0 0 0 / .5);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 14px 22px -10px rgb(0 0 0 / .5); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 22px; height: 22px; fill: currentColor; }
.btn .i-stop { display: none; }
.btn[aria-pressed="true"] .i-play { display: none; }
.btn[aria-pressed="true"] .i-stop { display: inline; }
.btn { display: none; }
.js .btn { display: inline-flex; }

/* ───────── links + quotes ───────── */
.bed a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--accent); transition: text-decoration-color .2s, color .2s; }
.bed a:hover { text-decoration-color: currentColor; }
.verse figcaption a { color: var(--fg); }
.quote {
  margin: 2rem 0 0; padding: 1.1rem 1.4rem 1.2rem; width: fit-content; max-width: 22rem;
  background: rgb(255 244 220 / .12); border-radius: 1.4rem 1.4rem 1.4rem .3rem; rotate: -1.5deg;
}
.quote p { font-family: var(--display); font-weight: 650; font-size: clamp(1.2rem, .6vw + 1rem, 1.45rem); line-height: 1.3; font-variation-settings: "BNCE" 40, "INFM" 70; }
.quote footer { margin-top: .6rem; font-size: .95rem; color: var(--soft); }

/* ───────── upbeat: clap the syllables ───────── */
.beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.clap { display: grid; justify-items: start; gap: 1.25rem; }
.clap__word {
  display: flex; flex-wrap: nowrap; gap: .4rem;
  font-family: var(--display); font-weight: 750;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1;
  font-variation-settings: "BNCE" 50, "INFM" 60;
  min-height: 1.4em;
}
.clap__word span {
  display: inline-block; padding: .14em .32em .2em;
  border: 3px solid rgb(255 244 220 / .55); border-radius: .5em;
  transition: background-color .12s, color .12s, transform .25s var(--spring), border-color .12s;
}
.clap__word span.is-on { background: var(--cream); color: var(--waratah); border-color: var(--cream); transform: translateY(-.1em) rotate(-3deg) scale(1.08); }
.clap__beats { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.clap__beats li { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--cream); transition: background-color .1s, transform .2s var(--spring); }
.clap__beats li.is-on { background: var(--cream); transform: scale(1.35); }
.clap__count { color: var(--soft); font-size: 1rem; }

/* ───────── band ───────── */
.band { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.band__text { max-width: 40rem; }
.instrument__label { font-size: .98rem; color: var(--soft); margin-top: .9rem; max-width: 30rem; }

.piano { width: min(100%, 46rem); }
.piano__keys {
  position: relative; display: flex; height: clamp(140px, 22vw, 200px);
  padding: 12px 12px 14px; border-radius: 18px;
  background: var(--ink);
  box-shadow: 0 18px 30px -18px rgb(40 25 0 / .7);
}
.key { cursor: pointer; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
.key--white {
  flex: 1; margin: 0 2px; border-radius: 0 0 10px 10px;
  background: var(--cream); color: #66553a;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .6rem;
  font-family: var(--text); font-weight: 700; font-size: .85rem;
  box-shadow: inset 0 -6px 0 #e3d4b4;
  transition: box-shadow .08s, background-color .08s, translate .08s;
}
.key--black {
  position: absolute; z-index: 1; top: 12px;
  left: calc(12px + (100% - 24px) / 8 * var(--x) - (100% - 24px) / 8 * .3);
  width: calc((100% - 24px) / 8 * .6); height: 58%;
  border-radius: 0 0 7px 7px;
  background: #2c3a33; box-shadow: inset 0 -5px 0 #0c1612;
  transition: box-shadow .08s, background-color .08s;
}
.key--white.is-down, .key--white:active { background: #ffe7a6; box-shadow: inset 0 -2px 0 #e3c574; translate: 0 2px; }
.key--black.is-down, .key--black:active { background: var(--waratah); box-shadow: inset 0 -2px 0 #6d0e1c; }
.key:focus-visible { outline-color: var(--waratah); outline-offset: -4px; }

.violin, .guitar { align-self: start; }
.strings {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.instrument { display: flex; flex-direction: column; align-items: flex-start; }
.instrument__play {
  background: none; border: 0; padding: .5rem; margin: -.5rem; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border-radius: 24px;
}
.instrument__play svg { display: block; height: clamp(220px, 28vw, 340px); width: auto; overflow: visible; transition: transform .35s var(--spring); }
.instrument__play:hover svg { transform: rotate(-3deg) translateY(-4px); }
.violin__body { transform-box: view-box; transform-origin: 40% 50%; }
.violin__bow { transform-box: view-box; }
.violin.is-bowing .violin__bow { animation: bow 1.1s ease-in-out infinite alternate; }
.violin.is-bowing svg { transform: rotate(-4deg); }
@keyframes bow { from { transform: translate(-26px, 6px); } to { transform: translate(26px, -6px); } }
.guitar.is-strumming .guitar__strings path { animation: twang .07s linear 10 alternate; }
.guitar.is-strumming .guitar__strings path:nth-child(2n) { animation-delay: .02s; }
@keyframes twang { to { transform: translateX(1.2px); } }

.voice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
.mouth { width: clamp(140px, 15vw, 200px); height: auto; grid-row: span 1; overflow: visible; }
.mouth__shape { opacity: 0; transform: scale(.8); transform-box: fill-box; transform-origin: center; transition: opacity .18s, transform .35s var(--spring); }
.mouth[data-mouth="rest"] .mouth--rest,
.mouth[data-mouth="a"] .mouth--a,
.mouth[data-mouth="i"] .mouth--i,
.mouth[data-mouth="u"] .mouth--u { opacity: 1; transform: none; }
.vowels { display: flex; flex-direction: column; gap: .6rem; }
.vowel {
  display: flex; align-items: baseline; gap: .7rem; text-align: left;
  min-height: 48px; padding: .55rem 1rem; cursor: pointer;
  border: 2.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: .98rem; transition: background-color .15s, color .15s, transform .3s var(--spring);
}
.vowel b { font-family: var(--text); font-size: 1.25rem; min-width: 2.6em; }
.vowel:hover { background: rgb(19 38 29 / .08); transform: translateX(3px); }
.vowel.is-on { background: var(--ink); color: var(--wattle); }
.voice__note { grid-column: 1 / -1; max-width: 34rem; }

/* ───────── poem ───────── */
.poem { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.poem__text .btn { margin-top: 1.75rem; }
.verse { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, .8vw + .85rem, 1.4rem); font-weight: 450; font-variation-settings: "BNCE" 25, "INFM" 80; }
.verse__stanza + .verse__stanza { margin-top: 1.6rem; }
.bed .verse p { line-height: 2.35; max-width: none; padding-left: 1.4em; text-indent: -1.4em; }
.verse .w { white-space: nowrap; }
.verse :is(.s, .u, .w) { text-indent: 0; }
.verse :is(.s, .u) { position: relative; display: inline-block; transition: color .1s, transform .2s var(--spring); }
.verse .s { font-weight: 720; }
.verse :is(.s, .u)::before { /* scansion marks: a cup for unstressed, a tick for stressed */
  content: ""; position: absolute; left: 50%; top: -.42em; translate: -50% 0;
  opacity: .7; transition: opacity .1s, background-color .1s, border-color .1s;
}
.verse .u::before { width: .5em; height: .26em; border: 2px solid var(--cream); border-top: 0; border-radius: 0 0 1em 1em; }
.verse .s::before { width: 3px; height: .5em; top: -.6em; background: var(--cream); border-radius: 2px; rotate: 22deg; }
.verse .is-on { color: var(--wattle); transform: translateY(-.08em); }
.verse .is-on::before { opacity: 1; border-color: var(--wattle); }
.verse .s.is-on::before { background: var(--wattle); }
.verse figcaption { margin-top: 1.75rem; font-family: var(--text); font-size: .95rem; color: var(--soft); max-width: 30rem; }

/* ───────── table: food + people ───────── */
.table {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "text text" "menu chat";
}
.table__text { grid-area: text; }
.menu { grid-area: menu; }
.chat { grid-area: chat; }
.menu__hint { color: var(--soft); font-size: 1rem; margin: .4rem 0 1.25rem; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li + li { border-top: 2px dashed rgb(58 16 32 / .25); }
.menu__list button {
  width: 100%; display: flex; align-items: baseline; gap: .75rem;
  min-height: 52px; padding: .7rem .25rem; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--fg);
  transition: transform .3s var(--spring);
}
.menu__list button:hover { transform: translateX(4px); }
.menu__item { font-family: var(--display); font-weight: 650; font-size: 1.2rem; flex: 1; font-variation-settings: "BNCE" 20, "INFM" 40; }
.menu__m { font-family: var(--display); font-weight: 750; color: #b8264a; letter-spacing: -.02em; font-size: 1.15rem; white-space: nowrap; }
.menu__m i { font-style: normal; transition: color .1s; }
.menu__m i.is-on { color: var(--waratah); text-shadow: 0 0 0 currentColor; display: inline-block; transform: translateY(-2px) scale(1.2); }

.chat { position: relative; display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; }
.bubble {
  position: relative; width: fit-content; max-width: 19rem;
  padding: .8rem 1.25rem .9rem; border-radius: 1.6rem;
  font-family: var(--display); font-weight: 650; font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); line-height: 1.25;
  font-variation-settings: "BNCE" 35, "INFM" 60;
  box-shadow: 0 10px 18px -12px rgb(58 16 32 / .55);
}
.bubble::after { content: ""; position: absolute; bottom: -8px; width: 22px; height: 18px; background: inherit; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.bubble--a { background: var(--cream); color: var(--ink); rotate: -3deg; }
.bubble--a::after { left: 22px; }
.bubble--b { background: var(--waratah); color: var(--cream); align-self: flex-end; rotate: 2deg; margin-top: -.2rem; }
.bubble--b::after { right: 24px; transform: scaleX(-1); }
.bubble--c { background: var(--jacaranda); color: var(--cream); margin-left: 12%; rotate: -1.5deg; }
.bubble--c::after { left: 30px; }
.bubble--d { background: var(--euc); color: var(--cream); align-self: flex-end; margin-right: 8%; rotate: 3deg; }
.bubble--d::after { right: 30px; transform: scaleX(-1); }
.js .chat:not(.is-heard) .bubble { opacity: 0; transform: translateY(14px) scale(.9); }
.chat .bubble { transition: opacity .4s var(--out), transform .55s var(--spring); }
.chat.is-heard .bubble:nth-child(2) { transition-delay: .55s; }
.chat.is-heard .bubble:nth-child(3) { transition-delay: 1.1s; }
.chat.is-heard .bubble:nth-child(4) { transition-delay: 1.65s; }

/* ───────── pool ───────── */
.bed--pool {
  background: linear-gradient(180deg, var(--pool) 0%, var(--pool) 45%, var(--pool-deep) 100%);
  padding-bottom: 0;
  overflow: clip;
}
.lane-rope {
  position: absolute; left: 0; right: 0; top: clamp(2rem, 4vw, 3rem); height: 14px; z-index: 0;
  background: radial-gradient(circle at 50% 50%, #fff4dc 5px, transparent 5.5px) 0 0 / 28px 14px repeat-x,
              radial-gradient(circle at 50% 50%, var(--waratah) 5px, transparent 5.5px) 14px 0 / 28px 14px repeat-x;
  opacity: .9;
}
.pool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.pool__said {
  margin-top: 2rem; font-family: var(--display); font-weight: 750; color: var(--cream);
  font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1; min-height: 1.1em;
  font-variation-settings: "BNCE" 70, "INFM" 70;
}
.pool__said.is-new { animation: splash .5s var(--spring); }
@keyframes splash { 0% { transform: scale(.6) translateY(10px); opacity: .2; } }
.bubbles { position: relative; min-height: 22rem; }
.pop {
  --size: calc(64px * var(--s));
  position: absolute; left: var(--x); bottom: -1rem;
  width: var(--size); height: var(--size); padding: 0; cursor: pointer;
  border-radius: 50%; border: 2.5px solid rgb(255 244 220 / .85);
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .85) 0 8%, transparent 9%), radial-gradient(circle at 50% 50%, rgb(211 236 255 / .06) 55%, rgb(211 236 255 / .3) 100%);
  animation: rise var(--t) linear infinite; animation-delay: var(--d);
  -webkit-tap-highlight-color: transparent;
}
.pop:hover, .pop:focus-visible { animation-play-state: paused; border-color: var(--wattle); }
.pop:focus-visible { border-radius: 50%; }
.pop { transition: scale .22s var(--out), filter .22s; }
.pop.is-popped { scale: 1.6; filter: opacity(0); pointer-events: none; }
.pop-burst {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 3px solid var(--cream); pointer-events: none;
  animation: burst .45s var(--out) forwards;
}
@keyframes burst { from { transform: scale(1); opacity: 1; } to { transform: scale(9); opacity: 0; border-width: 1px; } }
/* rise distance follows the container height (translate % would refer to the bubble itself) */
.bubbles .pop { --rise: 22rem; }
@keyframes rise {
  0% { translate: 0 0; opacity: 0; }
  8% { opacity: 1; }
  25% { translate: 14px calc(var(--rise) * -.25); }
  50% { translate: -10px calc(var(--rise) * -.5); }
  75% { translate: 12px calc(var(--rise) * -.75); }
  92% { opacity: 1; }
  100% { translate: 0 calc(var(--rise) * -1); opacity: 0; }
}

.floor {
  position: relative; z-index: 1;
  margin: clamp(1.5rem, 3vw, 2.5rem) calc(var(--gutter) * -1) 0;
  padding: 3.5rem var(--gutter) max(3rem, env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .09) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .09) 0 2px, transparent 2px 46px),
    #0d4d7c;
  text-align: center;
}
.floor__thanks { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem); font-variation-settings: "BNCE" 40, "INFM" 60; position: relative; }
.floor__mark { margin-top: .6rem; font-family: var(--display); font-weight: 700; color: #d3ecff; position: relative; }
.floor__mark span { color: var(--wattle); }

/* ───────── responsive ───────── */
@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .soundcard { max-width: 24rem; rotate: 1.5deg; min-height: 0; }
  .walk, .beat, .poem, .pool { grid-template-columns: 1fr; }
  .table { grid-template-columns: 1fr; grid-template-areas: "text" "menu" "chat"; }
  .strings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice { grid-column: 1 / -1; }
  .signpost { justify-self: start; }
  .pool { min-height: 0; }
  .bubbles { min-height: 22rem; }
  .bubbles .pop { --rise: 22rem; }
  /* the trail keeps to the right-hand gutter so it never runs through text */
  .trail { left: auto; right: 3px; width: calc(var(--gutter) - 6px); }
  .trail path { stroke-width: 5; stroke-dasharray: .5 13; }
}
@media (max-width: 34rem) {
  .sound-toggle { position: absolute; padding: .5rem; width: 44px; justify-content: center; }
  .sound-toggle [data-sound-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flowerbed { --bed-h: clamp(120px, 24vh, 190px); gap: 0; }
  .flower__tag { bottom: 26px; translate: 2px 0; }
  .soundcard { padding: 1.9rem 1.3rem 1.3rem; }
  .soundcard::after { width: 3.25rem; height: 3.25rem; }
  .soundcard__word { font-size: 1.35rem; }
  .hero__grid { padding-block: 1rem 1.5rem; gap: 1.25rem; }
  .voice { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: .75rem; row-gap: 1rem; }
  .mouth { width: 100%; }
  .vowel { flex-wrap: wrap; column-gap: .5rem; padding: .5rem .85rem; font-size: .9rem; }
  .verse { font-size: 1.05rem; }
  .piano__keys { padding: 8px 8px 10px; }
  .key--black { top: 8px; left: calc(8px + (100% - 16px) / 8 * var(--x) - (100% - 16px) / 8 * .3); width: calc((100% - 16px) / 8 * .6); }
  .key--white { margin: 0 1px; font-size: .75rem; }
  .menu__list button { flex-wrap: wrap; row-gap: 0; }
}

/* ───────── dusk (dark mode) ───────── */
@media (prefers-color-scheme: dark) {
  .bed--garden { --bg: #0d241c; --soft: #b5d0ad; }
  .bed--walk   { --bg: #0f2e24; --soft: #b0cca8; }
  .bed--beat   { --bg: #6e1424; --soft: #ffc9c2; --btn-ink: #6e1424; }
  .bed--band   { --bg: #8a5e0b; --fg: #fff1cf; --soft: #fde9bb; --accent: var(--wattle); --trail: var(--wattle); --btn-ink: #6e4a06; }
  .bed--poem   { --bg: #2c2152; --soft: #d9cdfa; --btn-ink: #2c2152; }
  .bed--table  { --bg: #4a1a2b; --fg: #ffe4ec; --soft: #f3bccb; --accent: var(--daisy); --trail: var(--daisy); --btn-ink: #4a1a2b; }
  .bed--pool   { --pool: #0a3556; --pool-deep: #051b30; --btn-ink: #0a3556; }

  .soundcard { background: #f6ead0; }
  .soundcard__hole { background: #0d241c; }
  .flower .stem { stroke: #6f9a5a; }
  .flower .leaf { fill: #5f8c4c; }
  .flower .leaf--thin { fill: #719c5c; }
  .flower .leaf--blade { fill: #4f7d42; }

  .bed--band .vowel { border-color: #fde9bb; color: #fff1cf; }
  .bed--band .vowel:hover { background: rgb(255 241 207 / .1); }
  .bed--band .vowel.is-on { background: var(--wattle); color: #2a1d02; border-color: var(--wattle); }
  .bed--band .piano__keys { background: #2a1c03; }
  .bed--band .key:focus-visible { outline-color: var(--wattle); }

  .menu__list li + li { border-top-color: rgb(255 228 236 / .25); }
  .menu__m { color: #ff9fb8; }
  .menu__m i.is-on { color: var(--wattle); }
  .clap__word span.is-on { color: #6e1424; }
  .floor { background-color: #06243f; }

  .fireflies { display: block; position: absolute; inset: 0; pointer-events: none; }
  .fireflies i {
    position: absolute; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle, #fff3a8 0 12%, rgb(255 230 120 / .4) 24%, transparent 65%);
    animation: glow 4s ease-in-out infinite, drift 14s ease-in-out infinite alternate;
  }
  .fireflies i:nth-child(1) { left: 8%;  top: 30%; animation-delay: -1s, -3s; }
  .fireflies i:nth-child(2) { left: 22%; top: 62%; animation-delay: -2.5s, -8s; }
  .fireflies i:nth-child(3) { left: 41%; top: 18%; animation-delay: -.5s, -1s; }
  .fireflies i:nth-child(4) { left: 57%; top: 70%; animation-delay: -3.2s, -5s; }
  .fireflies i:nth-child(5) { left: 66%; top: 12%; animation-delay: -1.8s, -11s; }
  .fireflies i:nth-child(6) { left: 79%; top: 48%; animation-delay: -.2s, -6s; }
  .fireflies i:nth-child(7) { left: 90%; top: 26%; animation-delay: -2.2s, -2s; }
  .fireflies i:nth-child(8) { left: 33%; top: 80%; animation-delay: -3.6s, -9s; }
}
@keyframes glow { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes drift { to { transform: translate(40px, -30px); } }

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .flower svg { animation: none; }
  .fireflies i { animation: none; opacity: .7; }
  .trail { clip-path: none; }
  .js .chat:not(.is-heard) .bubble { opacity: 1; transform: none; }
  .pop { animation: none; bottom: auto; top: var(--y-still, 40%); }
  .pop:nth-child(1) { --y-still: 62%; } .pop:nth-child(2) { --y-still: 22%; } .pop:nth-child(3) { --y-still: 48%; }
  .pop:nth-child(4) { --y-still: 12%; } .pop:nth-child(5) { --y-still: 70%; } .pop:nth-child(6) { --y-still: 34%; }
}