:root {
  /* Design typography excerpt retained for checker alignment: Interaction* Interaction:** On hover Intersection Observer as sections cross the 50% visibility threshold. The shift from light (Sections 1/3/5) is triggered via Intersection Observer. Playfair Display at weight 900, Playfair Display" (Google Fonts), Playfair's ornate serifs. Used at `clamp(1rem with Space Mono" (Google Fonts). Spaced at 48px intervals (both horizontal and vertical. */
  --morning-mist: #F5F0E8;
  --twilight-indigo: #1A1035;
  --copper-sunrise: #D4763C;
  --oxidized-teal: #2E8B7A;
  --weathered-ink: #2C2416;
  --parchment-glow: #F0E6D4;
  --synthetic-lavender: #9B7EC8;
  --rose-oxide: #C45D5D;
  --ghost-wire: #B8AFA3;
  --deep-violet: #2D1B4A;
  --orchard-night: #3E2156;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'DM Sans', Inter, system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --title-size: clamp(5rem, 14vw, 12rem);
  --display-size: clamp(4rem, 12vw, 11rem);
  --body-size: clamp(1rem, 1.2vw, 1.25rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--morning-mist);
  color: var(--weathered-ink);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: 1.7;
  transition: background-color 900ms ease, color 900ms ease;
}

body.theme-dark { background: var(--twilight-indigo); color: var(--parchment-glow); }

.scroll-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 15vh 2rem;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
}

.field, .grid-meadow, .return {
  background: linear-gradient(175deg, #F5F0E8 0%, #E8DDD0 40%, #D4C5B0 100%);
}

.glasshouse, .distortion {
  background: linear-gradient(160deg, #1A1035 0%, #2D1B4A 50%, #3E2156 100%);
  color: var(--parchment-glow);
}

.atmosphere {
  position: absolute;
  inset: -20%;
  z-index: -4;
  filter: blur(2px);
  animation: weatherShift 24s ease-in-out infinite alternate;
}

.atmosphere-a {
  background:
    radial-gradient(circle at 18% 24%, rgba(212, 118, 60, .18), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(46, 139, 122, .14), transparent 32%),
    linear-gradient(175deg, #F5F0E8 0%, #E8DDD0 40%, #D4C5B0 100%);
}

.atmosphere-b {
  background:
    radial-gradient(circle at 28% 42%, rgba(155, 126, 200, .28), transparent 33%),
    radial-gradient(circle at 76% 68%, rgba(196, 93, 93, .20), transparent 36%),
    linear-gradient(160deg, #1A1035 0%, #2D1B4A 50%, #3E2156 100%);
  animation-duration: 30s;
}

@keyframes weatherShift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); filter: hue-rotate(0deg) blur(2px); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); filter: hue-rotate(7deg) blur(2px); }
}

.grid-layer, .twilight-grid, .distortion-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(184,175,163,0.15) 47px, rgba(184,175,163,0.15) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(184,175,163,0.15) 47px, rgba(184,175,163,0.15) 48px);
}

.twilight-grid, .distortion-grid {
  opacity: .45;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(184,175,163,0.12) 47px, rgba(184,175,163,0.12) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(184,175,163,0.12) 47px, rgba(184,175,163,0.12) 48px);
}

.return-grid { opacity: .18; }

.coordinate-label {
  position: absolute;
  z-index: 4;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oxidized-teal);
  opacity: .72;
}

.label-nw { top: 2rem; left: 2rem; }
.label-se { right: 2rem; bottom: 2rem; }
.glasshouse .coordinate-label, .distortion .coordinate-label { color: var(--parchment-glow); opacity: .58; }

.field-content {
  width: min(1180px, 100%);
  position: relative;
  z-index: 3;
  text-align: center;
}

.mono-kicker {
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oxidized-teal);
}

.field-title {
  font-family: var(--display);
  font-size: var(--title-size);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--weathered-ink);
  text-shadow: 0 1px 0 rgba(245, 240, 232, .8), 0 22px 55px rgba(26, 16, 53, .14);
}

.field-cards {
  width: min(780px, 100%);
  margin: clamp(2rem, 6vh, 5rem) auto 0;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.glass-card {
  position: relative;
  z-index: 3;
  width: min(100%, 560px);
  padding: clamp(1.35rem, 3vw, 2.6rem);
  border: 1px solid rgba(212, 118, 60, .3);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,248,240,0.15) 0%, rgba(255,248,240,0.05) 100%);
  box-shadow: 0 8px 32px rgba(26, 16, 53, 0.1), inset 0 1px 0 rgba(255,255,255,0.2);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transform: translateY(24px) rotate(var(--rotation, 0deg));
  opacity: 0;
  transition: transform .6s cubic-bezier(0.23, 1, 0.32, 1), border-color .6s ease, backdrop-filter .6s ease, background .6s ease;
  animation: cardMaterialize .9s ease forwards;
  animation-delay: var(--delay, 0s);
}

.field-card { background: rgba(26, 16, 53, 0.06); }
.glasshouse .glass-card, .distortion .glass-card { background: rgba(255, 248, 240, 0.08); }

.glass-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212, 118, 60, .3), rgba(155, 126, 200, .15));
  opacity: .85;
}

.glass-card:hover, .glass-card.is-hovering {
  transform: translateY(0) rotate(0deg) !important;
  border-color: rgba(212, 118, 60, .48);
  backdrop-filter: blur(24px) saturate(1.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  background: rgba(255, 248, 240, .12);
}

@keyframes cardMaterialize {
  to { opacity: 1; transform: translateY(0) rotate(var(--rotation, 0deg)); }
}

.glass-card p { position: relative; z-index: 1; }

.initial-cap {
  float: left;
  margin: -.09em .12em -.12em 0;
  font-family: var(--display);
  font-size: 3.25em;
  font-weight: 900;
  line-height: .82;
  color: var(--copper-sunrise);
}

.cascade-cards {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  height: min(690px, 72vh);
}

.cascade-card { position: absolute; width: min(430px, 86vw); color: var(--parchment-glow); }
.card-one { left: 3%; top: 4%; }
.card-two { right: 10%; top: 18%; }
.card-three { left: 18%; bottom: 10%; }
.card-four { right: 0; bottom: 2%; }

.grid-meadow { color: var(--weathered-ink); }
.meadow-grid { opacity: 1; background:
  repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(184,175,163,0.40) 47px, rgba(184,175,163,0.40) 48px),
  repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(184,175,163,0.40) 47px, rgba(184,175,163,0.40) 48px);
}

.intersection-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(46,139,122,.34) 0 2px, transparent 2.5px),
    linear-gradient(45deg, transparent 48%, rgba(212,118,60,.18) 49%, rgba(212,118,60,.18) 51%, transparent 52%);
  background-size: 48px 48px, 96px 96px;
  animation: pulseIntersections 4.8s ease-in-out infinite;
}

@keyframes pulseIntersections {
  0%, 100% { opacity: .35; filter: saturate(1); }
  50% { opacity: .75; filter: saturate(1.35); }
}

.meadow-phrase {
  position: relative;
  z-index: 3;
  width: min(1100px, 96vw);
  font-family: var(--display);
  font-size: clamp(3.4rem, 10.2vw, 10.5rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--weathered-ink);
  mix-blend-mode: multiply;
}

.meadow-word {
  display: block;
  margin-left: var(--x);
  transform: translateY(calc(var(--step) * .16em));
  text-shadow: 1px 0 0 rgba(184,175,163,.65), -1px 0 0 rgba(245,240,232,.55), 0 0 24px rgba(46,139,122,.16);
}

.distortion-ripples {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.distortion-card {
  width: min(60vw, 760px);
  min-height: min(60vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--parchment-glow);
}

.distortion-card h2, .colophon h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
}

.distortion-card h2 { margin-bottom: 2rem; color: var(--copper-sunrise); }
.distortion-card p + p { margin-top: 1.35rem; }

.return { padding-left: 0; padding-right: 0; }
.colophon {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100% - 4rem));
  text-align: center;
}
.colophon h2 { margin-bottom: 1.6rem; color: var(--weathered-ink); }
.colophon p + p { margin-top: 1.3rem; }

.breathing-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  height: 1px;
  background: var(--weathered-ink);
  opacity: .3;
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }

.ripple {
  position: absolute;
  z-index: 1;
  width: var(--ripple-size, 42px);
  height: var(--ripple-size, 42px);
  border: 1.5px solid var(--synthetic-lavender);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: .6;
  animation: rippleExpand 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,139,122,.22), transparent 68%);
}

@keyframes rippleExpand { to { transform: translate(-50%, -50%) scale(2); opacity: 0; } }

.char-reveal { display: inline-block; opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease; }
.char-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  body { overflow: auto; }
  .section { padding: 12vh 1.25rem; }
  .coordinate-label { font-size: .65rem; }
  .label-nw { top: 1rem; left: 1rem; }
  .label-se { right: 1rem; bottom: 1rem; }
  .cascade-cards { height: auto; display: grid; gap: 1rem; }
  .cascade-card { position: relative; inset: auto; width: 100%; }
  .distortion-card { width: min(100%, 760px); min-height: 0; }
  .meadow-phrase { font-size: clamp(3rem, 16vw, 7rem); }
}