:root {
  /* Design typography trace: Interaction Philosophy:** IntersectionObserver` transforms — families that channel elegance 18th-century book design. combination Cormorant's dramatic high-contrast strokes large sizes Lora's warmer (18px (400 `color: suggest handwritten italic: "what eyes." transitioning (#d4760a cut particularly beautiful slightly calligraphic (Google */
  /* Philosophy Philosophy: Philosophy* Philosophy:* */
  --saffron: #d4760a;
  --rose: #c44b6c;
  --umber-night: #2a1a0e;
  --parchment: #f5e6c8;
  --sepia-ink: #3d2b1a;
  --cream-ember: #f5deb3;
  --copper: #e8a060;
  --blood-rose: #8b3a4a;
  --molten-peach: #e07040;
  --display: "Cormorant Garamond", serif;
  --body: "Lora", serif;
  --soft-shadow: 0 38px 110px rgba(42, 26, 14, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--umber-night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--sepia-ink);
  font-family: var(--body);
  background: var(--parchment);
  overflow-x: hidden;
}

.noise-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 12% 28%, rgba(245, 222, 179, 0.95) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 18%, rgba(61, 43, 26, 0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 72%, rgba(139, 58, 74, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 62%, rgba(232, 160, 96, 0.9) 0 1px, transparent 1.5px);
  background-size: 80px 80px;
  animation: grain-shift 0.48s steps(4, end) infinite;
}

.dream-scroll {
  position: relative;
  isolation: isolate;
}

.dream-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scale(var(--breath, 1));
  transform-origin: center;
}

.threshold {
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 222, 179, 0.26), transparent 32vw),
    radial-gradient(circle at 82% 88%, rgba(139, 58, 74, 0.32), transparent 34vw),
    linear-gradient(135deg, var(--saffron), var(--molten-peach) 46%, var(--rose));
}

.threshold-bleed,
.section-bleed {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.threshold-bleed {
  bottom: -18vh;
  height: 36vh;
  background: radial-gradient(ellipse at 40% 40%, rgba(245, 230, 200, 0.74), transparent 68%);
  filter: blur(14px);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(86vw, 1100px);
  transform: translateX(-8%);
}

.section-mark {
  margin: 0 0 1.3rem;
  color: rgba(61, 43, 26, 0.74);
  font-family: var(--display);
  font-size: 13px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  text-transform: lowercase;
}

.section-mark.light {
  color: rgba(245, 222, 179, 0.68);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0.3rem;
  color: var(--cream-ember);
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-shadow: 0 0 60px rgba(212, 118, 10, 0.3), 0 14px 70px rgba(42, 26, 14, 0.34);
}

.hero-subtitle {
  color: rgba(245, 230, 200, 0.92);
  font-family: var(--body);
  font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  font-style: italic;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.particle-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  border-radius: 999px;
  background: var(--particle-color);
  box-shadow: 0 0 calc(var(--size) * 2.5) var(--particle-color);
  opacity: var(--alpha);
  animation: particle-drift var(--duration) linear infinite, pulse var(--pulse) ease-in-out infinite;
  animation-delay: var(--delay), var(--delay);
}

.drift {
  min-height: 112vh;
  background:
    radial-gradient(circle at 4% 0%, rgba(212, 118, 10, 0.42), transparent 28vw),
    radial-gradient(circle at 88% 22%, rgba(196, 75, 108, 0.18), transparent 35vw),
    linear-gradient(172deg, var(--parchment) 0%, #f5deb3 52%, rgba(232, 160, 96, 0.64) 100%);
}

.section-bleed-top {
  top: -16vh;
  height: 34vh;
  background: radial-gradient(ellipse at 36% 35%, rgba(212, 118, 10, 0.42), transparent 70%);
  filter: blur(20px);
}

.drift-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: clamp(2rem, 6vw, 7rem);
  width: min(88vw, 1260px);
  align-items: center;
}

.media-collage {
  position: relative;
  min-height: min(66vh, 650px);
  filter: drop-shadow(0 34px 70px rgba(61, 43, 26, 0.2));
}

.shape,
.art-piece {
  position: absolute;
  display: block;
  transform-origin: center;
}

.shape-orb {
  width: 34vw;
  max-width: 440px;
  aspect-ratio: 1;
  left: 5%;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, var(--cream-ember), var(--copper) 44%, var(--rose));
  mix-blend-mode: multiply;
}

.shape-paper {
  width: 42%;
  height: 44%;
  left: 38%;
  top: 24%;
  border-radius: 42px 14px 60px 22px;
  background: linear-gradient(145deg, var(--parchment), var(--molten-peach));
  clip-path: polygon(5% 9%, 94% 0%, 83% 93%, 18% 100%, 0% 48%);
  mix-blend-mode: screen;
  transform: rotate(5deg);
}

.shape-window {
  width: 30%;
  height: 52%;
  left: 24%;
  top: 4%;
  border: 2px solid rgba(139, 58, 74, 0.48);
  border-radius: 50% 50% 10px 10px;
  transform: rotate(-7deg);
}

.shape-ribbon {
  width: 58%;
  height: 17%;
  left: 18%;
  bottom: 18%;
  border-radius: 999px 24px 999px 36px;
  background: linear-gradient(90deg, rgba(212, 118, 10, 0.92), rgba(196, 75, 108, 0.76));
  mix-blend-mode: multiply;
  transform: rotate(-4deg);
}

.shape-moon {
  width: 18%;
  aspect-ratio: 1;
  right: 10%;
  top: 5%;
  border-radius: 50%;
  background: var(--cream-ember);
  box-shadow: -18px 8px 0 rgba(139, 58, 74, 0.54);
  opacity: 0.8;
}

.shape-thread {
  width: 1px;
  height: 72%;
  left: 55%;
  top: 2%;
  background: linear-gradient(var(--blood-rose), transparent);
  transform: rotate(8deg);
  opacity: 0.58;
}

.dream-text {
  padding: clamp(1rem, 3vw, 2rem) 0;
  color: var(--sepia-ink);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.dream-text p:not(.section-mark) {
  margin-bottom: 1.6rem;
}

.submersion {
  background:
    radial-gradient(circle at 74% 28%, rgba(139, 58, 74, 0.34), transparent 34vw),
    radial-gradient(circle at 18% 80%, rgba(212, 118, 10, 0.18), transparent 30vw),
    var(--umber-night);
}

.submersion-copy {
  position: relative;
  z-index: 5;
  width: min(80vw, 1180px);
}

.submersion h2 {
  margin: 0;
  color: var(--parchment);
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-shadow: 0 0 84px rgba(232, 160, 96, 0.2);
}

.dark-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dark-orbit-one {
  width: 42vw;
  aspect-ratio: 1;
  left: -10vw;
  top: 8vh;
  border: 1px solid rgba(245, 222, 179, 0.12);
}

.dark-orbit-two {
  width: 28vw;
  aspect-ratio: 1;
  right: 8vw;
  bottom: 12vh;
  background: radial-gradient(circle, rgba(196, 75, 108, 0.16), transparent 65%);
  border: 1px solid rgba(212, 118, 10, 0.18);
}

.gallery {
  position: relative;
  padding: 12vh 0 18vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(196, 75, 108, 0.2), transparent 34vw),
    radial-gradient(circle at 90% 50%, rgba(212, 118, 10, 0.18), transparent 38vw),
    linear-gradient(180deg, var(--umber-night) 0%, var(--blood-rose) 18%, var(--parchment) 54%, #f5deb3 100%);
  overflow: hidden;
}

.gallery-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  margin-bottom: 12vh;
  transform: scale(var(--breath, 1));
  transform-origin: center;
}

.gallery-panel:last-child {
  margin-bottom: 0;
}

.gallery-art {
  position: relative;
  width: min(74vw, 760px);
  height: min(64vh, 620px);
  filter: drop-shadow(var(--soft-shadow));
}

.caption {
  width: min(68vw, 760px);
  color: var(--sepia-ink);
  font-family: var(--body);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: center;
}

.gallery-panel-one .caption {
  color: var(--cream-ember);
}

.a1 { width: 48%; height: 62%; left: 16%; top: 12%; border-radius: 48% 52% 18% 28%; background: var(--copper); transform: rotate(4deg); mix-blend-mode: screen; }
.a2 { width: 34%; height: 46%; left: 45%; top: 26%; border-radius: 24px 90px 18px 68px; background: var(--rose); transform: rotate(-6deg); mix-blend-mode: multiply; }
.a3 { width: 26%; aspect-ratio: 1; left: 32%; top: 2%; border-radius: 50%; background: var(--cream-ember); opacity: 0.78; }
.a4 { width: 64%; height: 16%; left: 13%; bottom: 12%; border-radius: 999px; background: linear-gradient(90deg, var(--saffron), var(--molten-peach)); transform: rotate(3deg); }
.a5 { width: 24%; height: 72%; left: 58%; top: 10%; border: 1px solid rgba(245, 230, 200, 0.5); border-radius: 50% 50% 12px 12px; transform: rotate(7deg); }

.b1 { width: 58%; height: 22%; left: 20%; top: 18%; border-radius: 24px; background: var(--parchment); transform: rotate(-5deg); mix-blend-mode: screen; }
.b2 { width: 36%; height: 64%; left: 35%; top: 11%; clip-path: polygon(18% 0%, 96% 11%, 72% 100%, 0% 82%); background: linear-gradient(180deg, var(--saffron), var(--rose)); mix-blend-mode: multiply; }
.b3 { width: 44%; height: 18%; left: 26%; top: 44%; border-radius: 999px 14px 999px 14px; background: var(--copper); transform: rotate(6deg); }
.b4 { width: 20%; aspect-ratio: 1; left: 62%; top: 8%; border-radius: 50%; background: var(--blood-rose); mix-blend-mode: screen; }
.b5 { width: 2px; height: 82%; left: 50%; top: 4%; background: rgba(61, 43, 26, 0.36); transform: rotate(-6deg); }
.b6 { width: 26%; height: 22%; left: 18%; bottom: 14%; border-radius: 8px 60px 16px 40px; background: var(--molten-peach); transform: rotate(-3deg); }

.c1 { width: 56%; height: 30%; left: 20%; bottom: 16%; border-radius: 12% 12% 50% 50%; background: linear-gradient(90deg, var(--blood-rose), var(--rose)); mix-blend-mode: multiply; }
.c2 { width: 42%; aspect-ratio: 1; left: 29%; top: 14%; border-radius: 50%; background: radial-gradient(circle at 48% 20%, var(--cream-ember), var(--saffron) 36%, var(--molten-peach) 72%); transform: rotate(5deg); }
.c3 { width: 76%; height: 10%; left: 9%; bottom: 12%; border-radius: 999px; background: rgba(61, 43, 26, 0.24); }
.c4 { width: 21%; height: 58%; left: 18%; top: 20%; border: 1px solid rgba(139, 58, 74, 0.46); border-radius: 50%; transform: rotate(-7deg); }
.c5 { width: 25%; height: 40%; right: 15%; top: 28%; clip-path: polygon(0 12%, 82% 0, 100% 84%, 24% 100%); background: var(--copper); mix-blend-mode: screen; }

.return {
  min-height: 82vh;
  background:
    radial-gradient(circle at 28% 24%, rgba(245, 222, 179, 0.34), transparent 30vw),
    radial-gradient(circle at 80% 78%, rgba(139, 58, 74, 0.28), transparent 34vw),
    linear-gradient(135deg, var(--saffron), var(--molten-peach) 48%, var(--rose));
}

.return-inner {
  position: relative;
  z-index: 4;
  width: min(72vw, 720px);
  text-align: center;
}

.footer-domain,
.footer-year {
  margin: 0;
  color: rgba(245, 230, 200, 0.86);
  font-family: var(--display);
  font-size: 14px;
  font-variant: small-caps;
  letter-spacing: 0.2em;
}

.footer-line {
  width: 100%;
  height: 1px;
  margin: 2rem 0;
  background: rgba(196, 75, 108, 0.4);
}

.fade-dream {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.fade-dream.is-visible {
  opacity: 1;
}

.tremor-active {
  animation: shake 0.4s ease-in-out;
}

.tremor-loop {
  animation: shake 0.4s ease-in-out 10s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: calc(var(--alpha) * 0.72); }
  50% { opacity: var(--alpha); }
}

@keyframes particle-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx), var(--dy), 0); }
}

@keyframes grain-shift {
  0% { background-position: 0 0; }
  25% { background-position: 1px 0; }
  50% { background-position: 1px 1px; }
  75% { background-position: 0 1px; }
  100% { background-position: 0 0; }
}

@media (max-width: 820px) {
  .hero-copy {
    transform: translateX(-3%);
  }

  .drift-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 10vh 0;
  }

  .media-collage {
    min-height: 46vh;
  }

  .dream-text {
    max-width: 92%;
  }

  .gallery-art {
    width: 86vw;
    height: 52vh;
  }

  .caption {
    width: 82vw;
  }
}