:root {
  --linen: #f4ece1;
  --mahogany: #2c1e14;
  --espresso: #3b2f2b;
  --parchment: #e8dcc8;
  --gold: #b8944f;
  --copper: #c47a4a;
  --rose: #a86464;
  --sepia: #4a3c32;
  --display: "Poiret One", cursive;
  --accent-font: "Cormorant Garamond", serif;
  --body-font: "Libre Baskerville", serif;
}

/* Design parser anchors: Inter-Panel Transitions:** Transitions* IntersectionObserver` horizontal (threshold: */

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  color: var(--espresso);
  font-family: var(--body-font);
  background: var(--linen);
  overscroll-behavior-x: contain;
}

body::before,
.panel::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='.55' fill='%233b2f2b' fill-opacity='.22'/%3E%3C/svg%3E");
  opacity: .12;
  z-index: 9;
  mix-blend-mode: multiply;
}

.score-viewport {
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.score-viewport::-webkit-scrollbar { display: none; }
.score-viewport { scrollbar-width: none; }

.score-rail { display: flex; flex-direction: row; width: fit-content; height: 100vh; }

.panel {
  --bg: #f4ece1;
  --bg2: #e8dcc8;
  --text: #3b2f2b;
  --accent: #b8944f;
  --line: #b8944f;
  position: relative;
  min-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
}

.panel-dark {
  --bg: #2c1e14;
  --bg2: #4a3c32;
  --text: #e8dcc8;
  --accent: #b8944f;
  --line: #c47a4a;
}

.panel-dark::after { opacity: .22; mix-blend-mode: screen; filter: invert(1); }

.panel-inner {
  position: relative;
  z-index: 2;
  width: min(76vw, 1120px);
  min-height: 52vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.focus-target {
  transform: scale(.85);
  filter: blur(2px);
  opacity: .3;
  transition: transform 600ms cubic-bezier(.16, 1, .3, 1), filter 600ms cubic-bezier(.16, 1, .3, 1), opacity 600ms cubic-bezier(.16, 1, .3, 1);
}

.panel.is-visible .focus-target { transform: scale(1); filter: blur(0); opacity: 1; }

.kicker {
  margin: 0 0 1.2rem;
  color: var(--copper);
  font-family: var(--accent-font);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(3.6rem, 9vw, 9.5rem);
  line-height: .82;
  text-shadow: 0 12px 34px rgba(74, 60, 50, .22);
}

h1 span { display: block; }

h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; max-width: 11ch; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--copper); }

p {
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  line-height: 1.75;
  max-width: 38ch;
}

.subtitle, .pullquote {
  font-family: var(--accent-font);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-style: italic;
  letter-spacing: .03em;
  color: var(--rose);
  max-width: 48ch;
}

.panel-dark .subtitle,
.panel-dark .pullquote { color: var(--parchment); }

.sunburst {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--gold);
  opacity: .25;
  z-index: 1;
}

.sunburst.small { width: min(40vw, 480px); opacity: .18; }
.sunburst svg, .feature-icon svg, .mini-icon svg { width: 100%; height: 100%; }

.feature-icon {
  width: clamp(9rem, 20vw, 18rem);
  aspect-ratio: 1;
  margin: 0;
  color: var(--accent);
}

.feature-icon svg, .mini-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split-stage {
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 7vw, 7rem);
  text-align: left;
  place-items: center;
}

.split-stage.reverse { grid-template-columns: 1fr .9fr; }
.split-stage.reverse .feature-icon { order: 2; }
.copy-block { display: grid; justify-items: start; }

.center-card {
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(184, 148, 79, .48);
  box-shadow: inset 0 0 0 8px rgba(184, 148, 79, .08), 0 28px 60px rgba(44, 30, 20, .14);
}

.triptych {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-content: center;
}

.triptych article {
  min-height: 22rem;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 2rem 1.3rem;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  background: rgba(232, 220, 200, .28);
}

.mini-icon { width: 5rem; height: 5rem; margin: 0 0 1.3rem; color: var(--gold); }
.triptych p { max-width: 19ch; margin-bottom: 0; }

.manuscript { align-content: center; justify-items: center; }
.manuscript h2 { max-width: 14ch; }

.measure {
  position: relative;
  width: min(58vw, 690px);
  height: 86px;
  margin-top: 2rem;
}

.measure span {
  display: block;
  height: 1px;
  margin: 11px 0;
  background: var(--gold);
}

.measure b {
  position: absolute;
  top: 28px;
  width: 18px;
  height: 14px;
  border: 2px solid var(--copper);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.measure b:nth-of-type(1) { left: 18%; }
.measure b:nth-of-type(2) { left: 48%; top: 17px; }
.measure b:nth-of-type(3) { left: 75%; top: 40px; }

.barline {
  position: absolute;
  left: 0;
  top: 8vh;
  bottom: 12vh;
  width: 20px;
  z-index: 4;
  color: var(--line);
  opacity: .8;
}

.barline::before, .barline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: currentColor;
}

.barline::before { left: 6px; width: 1px; }
.barline::after { left: 12px; width: 2px; }
.barline-thick::after, .barline-end::after { width: 6px; }
.barline-repeat { border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.barline-repeat::after { box-shadow: 0 22vh 0 -1px currentColor, 0 24vh 0 -1px currentColor; }
.barline-diamond::after { width: 1px; }
.barline-diamond { background: linear-gradient(45deg, transparent 48%, currentColor 49% 51%, transparent 52%); }

.float {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: var(--gold);
  opacity: .5;
  animation: drift-gentle 11s ease-in-out infinite;
  will-change: transform;
}

.note { font-family: var(--accent-font); font-size: clamp(2.2rem, 6vw, 5.6rem); }
.note-one { left: 11vw; top: 17vh; animation-duration: 8s; }
.note-two { right: 14vw; top: 24vh; animation-duration: 13s; }
.note-three { right: 19vw; bottom: 19vh; animation-duration: 11s; }
.note-four { left: 15vw; bottom: 20vh; animation-duration: 13s; }
.note-five { right: 8vw; top: 16vh; animation-duration: 8s; }
.note-six { left: 18vw; top: 14vh; animation-duration: 11s; }
.note-seven { right: 15vw; bottom: 24vh; animation-duration: 13s; }
.n-dark { right: 16vw; bottom: 18vh; color: var(--parchment); }
.n-dark-two { left: 12vw; top: 22vh; color: var(--gold); }

.rosette, .ripple, .fan { width: 5rem; height: 5rem; }
.rosette { border: 1px solid currentColor; transform: rotate(45deg); }
.rosette::before, .rosette::after { content: ""; position: absolute; inset: 18%; border: 1px solid currentColor; border-radius: 50%; }
.rosette::after { inset: 36%; background: currentColor; }
.ripple { border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 18px rgba(184,148,79,.22), 0 0 0 36px rgba(184,148,79,.12); }
.fan { border-radius: 100% 0 0 0; border-top: 2px solid currentColor; border-left: 2px solid currentColor; background: repeating-radial-gradient(circle at 0 0, transparent 0 13px, rgba(184,148,79,.28) 14px 15px); }
.r-one { left: 12vw; top: 16vh; animation-duration: 13s; }
.r-two { left: 7vw; bottom: 17vh; animation-duration: 11s; }
.r-three { right: 12vw; top: 18vh; animation-duration: 8s; }
.r-four { left: 20vw; bottom: 15vh; animation-duration: 11s; }
.rp-one { right: 12vw; top: 14vh; animation-duration: 8s; }
.rp-two { right: 10vw; bottom: 17vh; animation-duration: 11s; }
.rp-three { left: 15vw; bottom: 16vh; animation-duration: 13s; }
.rp-four { right: 11vw; bottom: 19vh; animation-duration: 8s; }
.fan-one { right: 15vw; top: 17vh; animation-duration: 8s; }
.fan-two { right: 17vw; top: 20vh; animation-duration: 11s; }
.fan-three { left: 10vw; top: 17vh; animation-duration: 13s; }

.scroll-cue {
  position: absolute;
  right: 3vw;
  top: 50%;
  width: 86px;
  height: 1px;
  background: var(--gold);
  z-index: 5;
}

.scroll-cue span {
  position: absolute;
  right: 0;
  top: -5px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
  animation: arrow-pulse 1.8s ease-in-out infinite;
}

.staff-progress {
  position: fixed;
  left: 10vw;
  right: 10vw;
  bottom: 2.4vh;
  height: 90px;
  z-index: 20;
  pointer-events: none;
}

.staff-progress svg { width: 100%; height: 100%; overflow: visible; }
.staff-lines line { stroke: var(--gold); stroke-width: 1.5; opacity: .75; }
.clef { font-family: var(--accent-font); font-size: 68px; fill: var(--rose); }
.marker circle { fill: var(--linen); stroke: var(--gold); stroke-width: 3; transition: fill 260ms ease, stroke 260ms ease, transform 260ms ease; transform-origin: center; }
.marker.is-active circle { fill: var(--copper); stroke: var(--copper); transform: scale(1.25); }
.marker stem { stroke: var(--gold); stroke-width: 2; transition: stroke 260ms ease; }
.marker.is-active stem { stroke: var(--copper); }

@keyframes drift-gentle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(12px, -8px) rotate(3deg); }
  50% { transform: translate(-6px, -14px) rotate(-2deg); }
  75% { transform: translate(8px, 4px) rotate(1deg); }
}

@keyframes arrow-pulse {
  0%, 100% { opacity: .35; transform: translateX(0) rotate(45deg); }
  50% { opacity: 1; transform: translateX(12px) rotate(45deg); }
}

@media (max-width: 820px) {
  .panel-inner { width: 88vw; padding: 2rem; }
  .split-stage, .split-stage.reverse, .triptych { grid-template-columns: 1fr; gap: 1.4rem; }
  .split-stage.reverse .feature-icon { order: 0; }
  .copy-block { justify-items: center; text-align: center; }
  .triptych article { min-height: auto; padding: 1rem; }
  .feature-icon { width: 8rem; }
  .staff-progress { left: 4vw; right: 4vw; }
}