:root {
  --night: #050811;
  --cream: #f2ead8;
  --gold: #d9b66f;
  --ink: #191714;

  /* Shared edge geometry so the floating controls stay in agreement. */
  --edge-x: clamp(1.25rem, 4vw, 4rem);
  --edge-y: clamp(1.25rem, 4vw, 3rem);
  --next-size: clamp(3.5rem, 6vw, 5rem);
  --slide-pad: clamp(1.5rem, 5vw, 5rem);

  --safe-t: 0px;
  --safe-r: 0px;
  --safe-b: 0px;
  --safe-l: 0px;

  /* Every stack names a Windows and an Android substitute before the generic,
     so the typography degrades deliberately rather than to a default sans. */
  --font-mono: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  --font-serif-display: Baskerville, "Baskerville Old Face", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-serif-body: Garamond, "EB Garamond", "Apple Garamond", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-script: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Bradley Hand", "Brush Script MT", "Lucida Handwriting", cursive;
  --font-geometric: Futura, "Futura PT", Avenir, "Avenir Next", "Century Gothic", "URW Gothic", "Trebuchet MS", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-final: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, "Times New Roman", serif;
}

@supports (padding: env(safe-area-inset-bottom)) {
  :root {
    --safe-t: env(safe-area-inset-top);
    --safe-r: env(safe-area-inset-right);
    --safe-b: env(safe-area-inset-bottom);
    --safe-l: env(safe-area-inset-left);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button {
  color: inherit;
  font: inherit;
}

.slideshow,
.slide {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.slide {
  z-index: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: var(--slide-pad);
  padding-top: calc(var(--slide-pad) + var(--safe-t));
  padding-right: calc(var(--slide-pad) + var(--safe-r));
  padding-bottom: calc(var(--slide-pad) + var(--safe-b));
  padding-left: calc(var(--slide-pad) + var(--safe-l));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.025);
  transition:
    opacity var(--slide-transition, 1.35s) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--slide-transition, 1.35s) cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility var(--slide-transition, 1.35s);
}

.slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.slide.is-leaving {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  transform: scale(0.985);
}

.next-slide {
  position: absolute;
  right: var(--edge-x);
  right: calc(var(--edge-x) + var(--safe-r));
  bottom: var(--edge-y);
  bottom: calc(var(--edge-y) + var(--safe-b));
  display: grid;
  width: var(--next-size);
  height: var(--next-size);
  place-items: center;
  border: 1px solid rgba(242, 234, 216, 0.52);
  border-radius: 50%;
  color: var(--cream);
  background: rgba(5, 8, 17, 0.22);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  -webkit-backdrop-filter: blur(0.45rem);
  backdrop-filter: blur(0.45rem);
}

.next-slide:hover,
.next-slide:focus-visible {
  color: #10131b;
  background: var(--cream);
  outline: none;
  transform: translateX(0.3rem);
}

.next-dark {
  border-color: rgba(25, 23, 20, 0.45);
  color: var(--ink);
  background: rgba(242, 234, 216, 0.45);
}

.next-dark:hover,
.next-dark:focus-visible {
  color: var(--cream);
  background: var(--ink);
}

.mute-button {
  position: fixed;
  z-index: 10;
  right: var(--edge-x);
  right: calc(var(--edge-x) + var(--safe-r));
  bottom: calc(var(--edge-y) + var(--next-size) + 0.8rem);
  bottom: calc(var(--edge-y) + var(--next-size) + 0.8rem + var(--safe-b));
  min-width: var(--next-size);
  min-height: 2rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(242, 234, 216, 0.4);
  color: rgba(242, 234, 216, 0.76);
  background: rgba(5, 8, 17, 0.42);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-backdrop-filter: blur(0.45rem);
  backdrop-filter: blur(0.45rem);
}

.mute-button:hover,
.mute-button:focus-visible,
.mute-button[aria-pressed="true"] {
  border-color: var(--gold);
  color: #11141a;
  background: var(--gold);
  outline: none;
}

body[data-current-slide="0"] .mute-button,
body[data-current-slide="5"] .mute-button {
  bottom: var(--edge-y);
  bottom: calc(var(--edge-y) + var(--safe-b));
}

/* Landing */

.slide-landing {
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(1, 4, 9, 0.18), rgba(1, 4, 9, 0.68)),
    url("assets/sound-is-story.webp") center / cover no-repeat;
  font-family: var(--font-mono);
}

.slide-landing::before {
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(242, 234, 216, 0.2);
  box-shadow: inset 0 0 7rem rgba(1, 3, 8, 0.85);
  pointer-events: none;
  content: "";
}

.landing-content {
  position: relative;
  display: grid;
  place-items: center;
}

.intro-button {
  min-width: min(21rem, 76vw);
  padding: 1.25rem 2rem;
  border: 1px solid var(--gold);
  color: var(--cream);
  background: rgba(4, 8, 15, 0.72);
  box-shadow: 0.5rem 0.5rem 0 rgba(88, 124, 126, 0.34);
  cursor: pointer;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.intro-button:hover,
.intro-button:focus-visible {
  color: #10131a;
  background: var(--gold);
  outline: none;
  transform: translate(-0.15rem, -0.15rem);
  box-shadow: 0.7rem 0.7rem 0 rgba(88, 124, 126, 0.48);
}

.landing-content p {
  margin: 1.6rem 0 1.7rem;
  color: rgba(242, 234, 216, 0.58);
  font-family: var(--font-serif-body);
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
}

.contact-link {
  padding: 0.7rem 1.2rem;
  border: 0;
  color: rgba(242, 234, 216, 0.72);
  background: none;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-transform: uppercase;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--gold);
  outline: none;
}

/* Definitions */

.slide-definitions {
  color: var(--ink);
  background:
    radial-gradient(circle at 17% 20%, rgba(103, 74, 37, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 67%, rgba(103, 74, 37, 0.08) 0 1px, transparent 2px),
    linear-gradient(103deg, #e1d3b7, #f4ecd9 47%, #d6c29e);
  background-size: 2.2rem 2.2rem, 3.1rem 3.1rem, 100% 100%;
  font-family: var(--font-serif-display);
}

.slide-definitions::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(53, 35, 16, 0.18), transparent 14%, transparent 86%, rgba(53, 35, 16, 0.18));
  mix-blend-mode: multiply;
  pointer-events: none;
  content: "";
}

.definition-page {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(68rem, 90vw);
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.definition {
  border-top: 1px solid rgba(25, 23, 20, 0.55);
  padding-top: 1.25rem;
}

.definition h1 {
  margin: 0 0 1.6rem;
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.definition h1 span {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.18em;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.definition p {
  margin: 0.6rem 0;
  padding-left: 2rem;
  font-size: clamp(1rem, 1.65vw, 1.3rem);
  line-height: 1.45;
  text-indent: -2rem;
}

.definition:last-child p:last-child {
  font-style: italic;
}

.definition b {
  font-family: var(--font-mono);
  font-size: 0.68em;
  font-weight: 700;
}

.definition-source {
  position: absolute;
  bottom: var(--edge-y);
  bottom: calc(var(--edge-y) + var(--safe-b));
  left: var(--edge-x);
  left: calc(var(--edge-x) + var(--safe-l));
  z-index: 1;
  padding: 0.6rem 0.2rem;
  color: rgba(25, 23, 20, 0.68);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-underline-offset: 0.35em;
  text-transform: uppercase;
}

.definition-source:hover,
.definition-source:focus-visible {
  color: var(--ink);
}

/* Story */

.slide-story {
  color: #f3ecd9;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8%, rgba(225, 190, 113, 0.08) 8.2% 8.5%, transparent 8.7% 16%, rgba(225, 190, 113, 0.06) 16.2% 16.5%, transparent 16.7%),
    radial-gradient(ellipse at 20% 30%, #36475e 0, transparent 36%),
    radial-gradient(ellipse at 82% 72%, #502f57 0, transparent 40%),
    linear-gradient(135deg, #080b16, #111a29 55%, #090812);
  font-family: var(--font-serif-body);
}

.slide-story::before,
.slide-story::after {
  position: absolute;
  width: 45vw;
  height: 45vw;
  border: 1px solid rgba(242, 234, 216, 0.1);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.slide-story::before {
  top: -23vw;
  right: -13vw;
  box-shadow: 0 0 0 4vw rgba(242, 234, 216, 0.025), 0 0 0 10vw rgba(242, 234, 216, 0.018);
}

.slide-story::after {
  bottom: -30vw;
  left: -8vw;
  box-shadow: 0 0 0 6vw rgba(217, 182, 111, 0.028), 0 0 0 13vw rgba(217, 182, 111, 0.018);
}

.story-statement {
  position: relative;
  z-index: 1;
  text-align: center;
}

.story-statement p {
  margin: 0;
  font-size: clamp(2.8rem, 7.5vw, 7.8rem);
  letter-spacing: -0.018em;
  line-height: 0.9;
}

.story-statement p:last-child {
  margin-top: 0.4em;
  color: var(--gold);
  font-size: clamp(1.7rem, 4.4vw, 4.5rem);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* Heart */

.slide-heart {
  color: #fff1dc;
  background:
    radial-gradient(circle at 50% 56%, rgba(246, 179, 124, 0.27), transparent 4%),
    repeating-radial-gradient(ellipse at 50% 56%, transparent 0 8%, rgba(255, 220, 185, 0.055) 8.3% 8.6%, transparent 8.9% 15%),
    radial-gradient(ellipse at 22% 30%, #552a45, transparent 48%),
    radial-gradient(ellipse at 78% 70%, #253f4d, transparent 48%),
    linear-gradient(145deg, #130d19, #251525 52%, #0b1720);
  font-family: var(--font-script);
}

.slide-heart::before {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 40deg at 50% 55%, transparent, rgba(255, 226, 190, 0.07), transparent 21%, rgba(133, 189, 189, 0.07), transparent 48%);
  pointer-events: none;
  content: "";
  animation: breathe 8s ease-in-out infinite alternate;
}

.slide-heart p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 7.2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0.25rem 2rem rgba(0, 0, 0, 0.35);
}

.slide-heart em {
  color: #f0b778;
  font-size: 1.12em;
}

/* Find */

.slide-find {
  align-items: end;
  justify-items: start;
  color: #f1e8d6;
  background:
    radial-gradient(circle at 74% 36%, #ecd9a2 0 0.55%, rgba(236, 217, 162, 0.28) 0.7% 2%, transparent 8%),
    linear-gradient(177deg, transparent 0 62%, rgba(92, 111, 112, 0.35) 62.2%, rgba(8, 14, 18, 0.95) 63%),
    radial-gradient(ellipse at 50% 64%, #344d55 0, #172a35 30%, #080d15 68%);
  font-family: var(--font-geometric);
}

.slide-find::before {
  position: absolute;
  right: 0;
  bottom: 36%;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 211, 146, 0.56), transparent);
  box-shadow: 0 0 2rem rgba(240, 211, 146, 0.3);
  pointer-events: none;
  content: "";
}

.slide-find p {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 0 clamp(4rem, 10vh, 8rem) clamp(0rem, 4vw, 4rem);
  font-size: clamp(2.5rem, 7.6vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.slide-find p span {
  color: var(--gold);
  font-family: var(--font-serif-display);
  font-style: italic;
}

/* Final */

.slide-final {
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(1, 4, 9, 0.3), rgba(1, 4, 9, 0.65)),
    url("assets/sound-is-story.webp") center / cover no-repeat;
  font-family: var(--font-final);
}

.slide-final::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, rgba(2, 5, 9, 0.7));
  pointer-events: none;
  content: "";
}

/* The frame sizes off whichever axis is tighter, so a short or wide window
   never pushes the contact links or Start Over below the fold. */
.final-frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(74rem, 100%);
  padding: clamp(1.5rem, min(5vw, 6vh), 4.5rem);
  border: 1px solid rgba(242, 234, 216, 0.25);
  background: rgba(4, 8, 14, 0.79);
  box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(0.4rem);
  backdrop-filter: blur(0.4rem);
}

.final-frame h1 {
  margin: 0;
  font-size: clamp(2.6rem, min(11vw, 15vh), 10rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.78;
  text-transform: uppercase;
}

.final-frame h1 span {
  display: block;
}

.final-frame p {
  margin: clamp(1.2rem, 3.5vh, 4rem) 0;
  color: var(--gold);
  font-size: clamp(1.1rem, min(3vw, 4.5vh), 2.6rem);
  font-style: italic;
}

.final-frame nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(242, 234, 216, 0.24);
  border-bottom: 1px solid rgba(242, 234, 216, 0.24);
}

.final-frame nav a {
  display: grid;
  min-height: clamp(3rem, 7vh, 4.5rem);
  place-items: center;
  padding: 1rem;
  border-right: 1px solid rgba(242, 234, 216, 0.24);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 1.2vw, 0.82rem);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}

.final-frame nav a:last-child {
  border-right: 0;
}

.final-frame nav a:hover,
.final-frame nav a:focus-visible {
  color: #11141a;
  background: var(--gold);
  outline: none;
}

.restart-button {
  justify-self: center;
  margin-top: clamp(1.2rem, 3vh, 2.8rem);
  min-height: 3rem;
  padding: 0.9rem 2.4rem;
  border: 1px solid rgba(217, 182, 111, 0.5);
  color: var(--cream);
  background: rgba(4, 8, 15, 0.55);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.2vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.restart-button:hover,
.restart-button:focus-visible {
  border-color: var(--gold);
  color: #10131a;
  background: var(--gold);
  outline: none;
  transform: translateY(-0.12rem);
}

@keyframes breathe {
  from { opacity: 0.6; transform: scale(0.96) rotate(-2deg); }
  to { opacity: 1; transform: scale(1.04) rotate(2deg); }
}

/* Touch hardware gets larger hit areas than the desktop chrome needs. */
@media (pointer: coarse) {
  .mute-button {
    min-height: 2.75rem;
  }
}

@media (max-width: 760px) {
  .definition-page {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .definition h1 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .definition p {
    margin: 0.3rem 0;
    font-size: clamp(0.92rem, 3.9vw, 1.15rem);
  }

  .slide-heart p br {
    display: none;
  }

  .slide-find {
    align-items: center;
  }

  .slide-find p {
    margin: 0 0 6rem;
  }

  .final-frame h1 {
    font-size: clamp(3rem, 15vw, 5.8rem);
    line-height: 0.82;
  }

  .final-frame nav {
    grid-template-columns: 1fr;
  }

  .final-frame nav a {
    min-height: 3.5rem;
    border-right: 0;
    border-bottom: 1px solid rgba(242, 234, 216, 0.24);
  }

  .final-frame nav a:last-child {
    border-bottom: 0;
  }

  .restart-button {
    justify-self: stretch;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .definition-page {
    grid-template-columns: repeat(2, 1fr);
  }

  .definition h1 {
    font-size: 2.6rem;
  }

  .definition p {
    font-size: 0.85rem;
  }

  .final-frame {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 3rem;
    align-items: end;
  }

  .final-frame h1 {
    grid-row: span 3;
    font-size: 4.2rem;
  }

  .final-frame p {
    margin: 0;
  }

  .final-frame nav {
    grid-template-columns: 1fr;
  }

  .final-frame nav a {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border-right: 0;
    border-bottom: 1px solid rgba(242, 234, 216, 0.24);
  }

  .final-frame nav a:last-child {
    border-bottom: 0;
  }

  .restart-button {
    justify-self: stretch;
    margin-top: 0.25rem;
    min-height: 2.5rem;
    padding: 0.6rem 1.5rem;
  }
}

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