/* =====================================================================
   AARON & DREW · 2026 HOLIDAY MESSAGE
   Main visual styles.

   The easiest global design tweaks are in :root immediately below.
   ===================================================================== */

:root {
  --night-0: #040b15;
  --night-1: #071629;
  --night-2: #0d2943;
  --ink: #f6f2e9;
  --muted: #c9d5df;
  --frost: rgba(238, 247, 255, .82);
  --gold: #e8c98e;
  --gold-soft: #f5e2ba;
  --ice: #b9e0f3;
  --berry: #b9475b;
  --purple: #8f78c8;
  --teal: #66c9c2;
  --paper: #f6f1e7;
  --paper-ink: #12243a;
  --shadow: 0 28px 70px rgba(0, 0, 0, .28);
  --radius: 28px;
  --max-width: 1220px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(97, 155, 195, .26), transparent 34rem),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 42%, #06101d 100%);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.44) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.6px);
  background-position: 0 0, 27px 31px;
  background-size: 58px 58px, 79px 79px;
  opacity: .2;
}

::selection { background: rgba(232, 201, 142, .28); color: white; }
a { color: inherit; }

#snow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: .74;
}

.aurora {
  position: fixed;
  width: 54vw;
  height: 54vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.aurora-a { left: -22vw; top: 20vh; background: #7dd8c9; }
.aurora-b { right: -20vw; top: 48vh; background: #a88dde; }

.sound-toggle {
  position: fixed;
  z-index: 30;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .82rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(5, 15, 28, .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 600 .71rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.sound-toggle:hover { border-color: rgba(255,255,255,.3); color: white; }
.sound-toggle[aria-pressed="true"] .sound-icon { opacity: .35; text-decoration: line-through; }
.sound-icon { font-size: 1rem; }

.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 7rem 1.5rem 6rem;
  background:
    linear-gradient(180deg, rgba(4,10,19,.12), rgba(4,11,20,.42) 62%, var(--night-1) 100%),
    radial-gradient(circle at 50% 24%, rgba(199,228,244,.16), transparent 27rem),
    linear-gradient(145deg, #102e4b 0%, #0b2037 36%, #071526 66%, #091121 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -14vh;
  height: 41vh;
  z-index: -1;
  background:
    linear-gradient(158deg, transparent 0 48%, rgba(222,236,244,.10) 48.3% 51%, transparent 51.3%) 0 40%/22% 70% repeat-x,
    linear-gradient(202deg, transparent 0 48%, rgba(237,246,250,.08) 48.3% 51%, transparent 51.3%) 12% 60%/29% 85% repeat-x,
    linear-gradient(180deg, transparent, rgba(236,245,251,.10));
  opacity: .8;
}
.hero::after {
  content: "";
  position: absolute;
  width: min(33vw, 420px);
  aspect-ratio: 1;
  right: -7vw;
  top: 5vh;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 31%, #ffffff 0 4%, #e8f2ff 5% 22%, #c9d9ef 31%, #8da8c9 58%, rgba(157,185,217,.12) 68%, transparent 70%);
  box-shadow: 0 0 90px rgba(214,234,255,.2);
  opacity: .76;
  z-index: -2;
}

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 12% 20%, white 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 62% 12%, white 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 34%, #d9f4ff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 25% 69%, white 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 75%, white 0 1.4px, transparent 2px);
  background-size: 230px 230px, 190px 190px, 270px 270px, 310px 310px, 370px 370px;
  opacity: .44;
}

.hero-inner {
  width: min(900px, 92vw);
  text-align: center;
  animation: hero-enter 1.2s cubic-bezier(.2,.65,.2,1) both;
}
.hero-kicker {
  margin: 0 0 1rem;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: clamp(.72rem, 1.6vw, .92rem);
  font-weight: 700;
}
.hero h1 {
  margin: 0;
  font: 400 clamp(4.8rem, 13vw, 10rem)/.8 var(--serif);
  letter-spacing: -.055em;
  text-shadow: 0 6px 40px rgba(0,0,0,.25);
}
.hero h1 span {
  font-size: .52em;
  color: var(--gold);
  font-style: italic;
  letter-spacing: -.02em;
  vertical-align: .18em;
}
.hero-year {
  margin: 1.05rem 0 0;
  font: 700 clamp(1.15rem, 3vw, 1.55rem)/1 var(--sans);
  letter-spacing: .7em;
  text-indent: .7em;
  color: rgba(255,255,255,.72);
}
.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: min(360px, 70vw);
  margin: 2rem auto 1.7rem;
  color: var(--gold);
}
.hero-rule::before,
.hero-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(232,201,142,.65));
}
.hero-rule::after { transform: scaleX(-1); }
.hero-greeting {
  margin: 0 0 .65rem;
  font: italic 600 clamp(1.55rem, 4vw, 2.4rem)/1.1 var(--serif);
  color: var(--gold-soft);
}
.hero-intro {
  margin: 0 auto;
  max-width: 680px;
  color: rgba(244,248,252,.86);
  font: 400 clamp(1.05rem, 2.1vw, 1.28rem)/1.75 var(--serif);
}
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .72rem;
  margin-top: 3.4rem;
  text-decoration: none;
  color: rgba(255,255,255,.54);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  font-weight: 700;
}
.scroll-cue i {
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: cue-pulse 2.2s ease-in-out infinite;
}

main { position: relative; z-index: 2; }
.story-section,
.interlude,
.finale {
  position: relative;
  padding: clamp(5.5rem, 10vw, 9rem) 1.4rem;
}
.story-section::before {
  content: attr(data-year);
  position: absolute;
  top: 1.5rem;
  left: max(1.4rem, calc((100vw - var(--max-width)) / 2));
  font: 700 .66rem/1 var(--sans);
  letter-spacing: .28em;
  color: rgba(255,255,255,.24);
}
.section-shell {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.8rem, 7vw, 7rem);
  align-items: center;
}
.layout-right .section-shell { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.stacked-shell { grid-template-columns: 1fr; gap: 3.4rem; }
.centered-shell { display: block; text-align: center; }

.story-copy { max-width: 650px; }
.layout-right .story-copy { justify-self: end; }
.wide-copy { max-width: 900px; margin-inline: auto; }
.centered-copy { text-align: center; margin-inline: auto; }
.date-line {
  margin: 0 0 1.1rem;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-copy h2,
.big-milestone {
  margin: 0 0 1.45rem;
  font: 500 clamp(2.45rem, 5.5vw, 4.8rem)/.98 var(--serif);
  letter-spacing: -.038em;
  text-wrap: balance;
}
.story-copy p {
  margin: 0;
  color: rgba(239,246,250,.82);
  font: 400 clamp(1rem, 1.35vw, 1.12rem)/1.9 var(--serif);
}
.story-copy p + p { margin-top: 1.55rem; }

.soft-band {
  background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-block: 1px solid rgba(255,255,255,.045);
}

.photo-collage {
  min-width: 0;
  display: grid;
  gap: 1.15rem;
  align-items: center;
  justify-items: stretch;
}
.collage-1 { grid-template-columns: minmax(0, 1fr); }
.collage-2 { grid-template-columns: .82fr 1.18fr; }
.collage-3 { grid-template-columns: 1fr 1fr; }
.collage-3 > :first-child { grid-row: span 2; }
.collage-4 { grid-template-columns: repeat(4, 1fr); }
.collage-pets { grid-template-columns: 1fr 1fr; position: relative; }
.collage-marriage { margin-top: 2.6rem; grid-template-columns: 1fr 1fr; }
.collage-wedding { grid-template-columns: 1.08fr .92fr .84fr; grid-template-rows: auto auto; }
.collage-wedding > :first-child { grid-row: span 2; }
.collage-wedding > :last-child { grid-column: 2 / span 2; }
.collage-honeymoon { max-width: 1050px; width: 100%; margin: 0 auto; }

.photo-slot {
  position: relative;
  display: block;
  margin: 0;
  min-height: 260px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(145deg, rgba(193,220,236,.13), rgba(255,255,255,.035)),
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.14), transparent 22%),
    #0b2137;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.photo-slot::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: rgba(240,247,251,.52);
  font: 700 .72rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  background:
    linear-gradient(155deg, transparent 0 45%, rgba(255,255,255,.06) 45.4% 46%, transparent 46.4%),
    linear-gradient(25deg, transparent 0 44%, rgba(255,255,255,.045) 44.4% 45%, transparent 45.4%);
}
.photo-slot::after {
  content: "photo";
  position: absolute;
  z-index: 2;
  right: 13px;
  bottom: 11px;
  font: 800 .56rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.photo-slot.has-image::before,
.photo-slot.has-image::after { display: none; }
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.photo-slot.portrait { min-height: 430px; }
.photo-slot.landscape { min-height: 245px; }
.photo-slot.square { aspect-ratio: 1; min-height: 0; }
.photo-slot.panoramic { aspect-ratio: 16 / 7; min-height: 360px; }
.photo-slot.tall { min-height: 520px; }
.photo-slot.wide-photo { min-height: 370px; }
.tilt-left { transform: rotate(-2.2deg); }
.tilt-right { transform: rotate(2deg); }
.staggered > :nth-child(2) { transform: translateY(-1.2rem) rotate(1.5deg); }
.staggered > :nth-child(3) { transform: translateY(1rem) rotate(-1deg); }
.paw-print {
  position: absolute;
  right: 46%;
  bottom: -2rem;
  transform: rotate(-28deg);
  font-size: 2rem;
  letter-spacing: -.3em;
  color: rgba(255,255,255,.2);
}

.voyage-section { padding-bottom: 10rem; }
.voyage-section .wide-copy { text-align: center; }
.voyage-section .photo-collage { max-width: 1030px; margin-inline: auto; }
.wave-line {
  position: absolute;
  inset: auto 0 0;
  height: 95px;
  opacity: .23;
  background:
    radial-gradient(55px 27px at 55px 0, transparent 48%, rgba(177,217,237,.65) 50% 53%, transparent 55%) 0 34px / 110px 55px repeat-x,
    radial-gradient(75px 34px at 75px 0, transparent 48%, rgba(177,217,237,.35) 50% 53%, transparent 55%) 36px 58px / 150px 68px repeat-x;
}

.milestone-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(181,128,200,.17), transparent 31rem),
    linear-gradient(180deg, rgba(133,72,115,.08), rgba(30,72,81,.09));
  border-block: 1px solid rgba(232,201,142,.08);
}
.milestone-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(232,201,142,.17);
  box-shadow: 0 0 130px rgba(232,201,142,.07), inset 0 0 90px rgba(232,201,142,.04);
  pointer-events: none;
}
.big-milestone { font-size: clamp(3.6rem, 9vw, 7.8rem); margin-bottom: 2rem; }

.celebration-section {
  background:
    linear-gradient(118deg, rgba(114,78,156,.10), transparent 35%, rgba(47,140,138,.09)),
    transparent;
}
.celebration-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: linear-gradient(90deg, #8a61a8, #cf7ca5, #d9bb70, #77c6b4, #547eb3, #8a61a8);
  mask: linear-gradient(transparent, black 46%, black 54%, transparent);
  -webkit-mask: linear-gradient(transparent, black 46%, black 54%, transparent);
}

.interlude { padding-block: 3.4rem; }
.interlude-inner {
  width: min(950px, 100%);
  margin-inline: auto;
  padding: 1.8rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.6rem;
  align-items: center;
  text-align: center;
  border-block: 1px solid rgba(232,201,142,.2);
}
.interlude p {
  margin: 0;
  font: italic 500 clamp(1.45rem, 3vw, 2.25rem)/1.45 var(--serif);
  color: var(--gold-soft);
}
.disco-orb { color: var(--teal); text-shadow: 0 0 18px rgba(101,202,194,.55); }

.weird-section {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(39,16,60,.18), rgba(9,25,41,.05)),
    radial-gradient(circle at 20% 45%, rgba(114,65,155,.12), transparent 28rem),
    radial-gradient(circle at 80% 50%, rgba(74,151,132,.10), transparent 27rem);
}
.weird-pixels::before,
.weird-pixels::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 7vw;
  top: 24%;
  background: rgba(187,230,179,.42);
  box-shadow: 14px 0 rgba(187,230,179,.21), 28px 14px rgba(187,230,179,.33), 0 28px rgba(177,144,215,.27), 28px 42px rgba(177,144,215,.16);
}
.weird-pixels::after { left: auto; right: 9vw; top: auto; bottom: 18%; transform: rotate(90deg); }

.home-section {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.018), transparent);
}

.honeymoon-section {
  overflow: hidden;
  background:
    linear-gradient(180deg, #071524 0%, #0b2634 50%, #092938 100%);
}
.honeymoon-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(ellipse at 50% 110%, #58b8bc 0 20%, transparent 21%),
    linear-gradient(175deg, transparent 0 40%, rgba(94,187,187,.38) 41% 49%, rgba(11,52,69,.0) 50%);
}
.tropical-haze {
  position: absolute;
  width: 80vw;
  height: 60vw;
  left: 10vw;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,170,168,.15), transparent 62%);
  filter: blur(30px);
}
.editor-note {
  color: rgba(240,246,248,.45);
  font-style: italic;
  font-size: .94em;
}

.finale {
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 8rem 10rem;
  background:
    linear-gradient(180deg, rgba(7,20,36,.0), rgba(7,20,36,.5)),
    radial-gradient(ellipse at 50% 95%, rgba(210,229,239,.12), transparent 42rem);
}
.finale-inner { width: min(900px, 100%); }
.finale p {
  margin: 0;
  color: rgba(239,246,250,.78);
  font: 400 clamp(1.1rem, 2vw, 1.35rem)/1.85 var(--serif);
}
.finale-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(420px, 78vw);
  margin: 2.5rem auto;
  color: var(--gold);
}
.finale-rule::before,
.finale-rule::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(232,201,142,.55)); }
.finale-rule::after { transform: scaleX(-1); }
.finale-signoff strong {
  display: inline-block;
  margin-top: .55rem;
  color: white;
  font: 500 clamp(2.4rem, 6vw, 5.3rem)/1.02 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.tiny-signoff { margin-top: 2rem !important; color: var(--gold-soft) !important; font-style: italic !important; }
.back-to-top {
  display: inline-block;
  margin-top: 2rem;
  color: rgba(255,255,255,.48);
  text-decoration: none;
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.back-to-top:hover { color: white; }

/* Reveal-on-scroll. Content remains visible when JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   FLYING HEXIE SLEIGH EASTER EGG
   --------------------------------------------------------------------- */
.sleigh-flyer {
  --y0: 24vh;
  --y1: -1vh;
  --y2: 9vh;
  --y3: -4vh;
  --y4: 6vh;
  --r0: -6deg;
  --r1: 8deg;
  --r2: -3deg;
  --r3: 11deg;
  --r4: 3deg;
  --bob: 8px;
  --wiggle: 4deg;
  position: fixed;
  z-index: 50;
  top: 0;
  left: -300px;
  width: clamp(165px, 18vw, 255px);
  aspect-ratio: 397 / 397;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, var(--y0), 0) rotate(var(--r0));
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.40));
  will-change: transform, opacity;
}
.sleigh-flyer img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: 52% 56%;
}
.sleigh-flyer.flying {
  opacity: 1;
  animation: sleigh-flight 7s linear both;
}
.sleigh-flyer.flying img {
  animation:
    sleigh-bob .68s ease-in-out infinite alternate,
    sleigh-tilt 1.1s ease-in-out infinite alternate;
}

@keyframes sleigh-bob {
  from { transform: translateY(calc(var(--bob) * -0.5)); }
  to { transform: translateY(var(--bob)); }
}
@keyframes sleigh-tilt {
  from { rotate: calc(var(--wiggle) * -1); }
  to { rotate: var(--wiggle); }
}
@keyframes sleigh-flight {
  0%   { transform: translate3d(0, var(--y0), 0) rotate(var(--r0)); }
  16%  { transform: translate3d(18vw, var(--y1), 0) rotate(var(--r1)); }
  36%  { transform: translate3d(44vw, var(--y2), 0) rotate(var(--r2)); }
  58%  { transform: translate3d(74vw, var(--y3), 0) rotate(var(--r3)); }
  82%  { transform: translate3d(108vw, calc(var(--y4) + 2vh), 0) rotate(calc(var(--r4) + 3deg)); }
  100% { transform: translate3d(142vw, var(--y4), 0) rotate(var(--r4)); }
}
@keyframes hero-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform:none; } }
@keyframes cue-pulse { 0%,100% { transform: scaleY(.55); opacity:.35; } 50% { transform: scaleY(1); opacity:1; } }

@media (max-width: 900px) {
  .hero::after { width: 55vw; right: -20vw; top: 7vh; opacity: .5; }
  .section-shell,
  .layout-right .section-shell { grid-template-columns: 1fr; gap: 2.7rem; }
  .layout-right .photo-collage { order: 2; }
  .layout-right .story-copy { order: 1; justify-self: start; }
  .story-copy { max-width: 760px; }
  .story-copy p { line-height: 1.78; }
  .collage-4 { grid-template-columns: 1fr 1fr; }
  .collage-wedding { grid-template-columns: 1fr 1fr; }
  .collage-wedding > :first-child { grid-row: span 2; }
  .collage-wedding > :last-child { grid-column: auto; }
  .photo-slot.portrait, .photo-slot.tall { min-height: 380px; }
  .photo-slot.panoramic { min-height: 280px; }
  .sound-label { display: none; }
}

@media (max-width: 620px) {
  .sound-toggle { top: 12px; right: 12px; padding: .62rem .68rem; }
  .hero { padding-inline: 1.1rem; }
  .hero h1 { font-size: clamp(4rem, 22vw, 6.2rem); }
  .hero-intro br,
  .story-copy br,
  .finale p br { display: none; }
  .story-section, .interlude, .finale { padding-inline: 1rem; }
  .story-section { padding-block: 5.2rem; }
  .story-copy h2 { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .big-milestone { font-size: clamp(3.2rem, 18vw, 5.5rem); }
  .collage-2, .collage-3, .collage-4, .collage-pets, .collage-marriage, .collage-wedding { grid-template-columns: 1fr 1fr; }
  .collage-3 > :first-child { grid-row: auto; }
  .photo-slot, .photo-slot.landscape, .photo-slot.portrait, .photo-slot.tall, .photo-slot.wide-photo { min-height: 220px; }
  .photo-slot.panoramic { aspect-ratio: 4 / 3; min-height: 0; }
  .interlude-inner { grid-template-columns: 1fr; gap: .8rem; }
  .disco-orb:last-child { display: none; }
  .finale-signoff strong { font-size: clamp(2.35rem, 11vw, 4rem); }
  .sleigh-flyer { left: -190px; width: min(165px, 42vw); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #snow-canvas, .sleigh-flyer { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}