:root {
  color-scheme: light;
  --paper: #d8d3c8;
  --paper-light: #eeeae0;
  --paper-shadow: #aaa69e;
  --ink: #292b29;
  --charcoal: #555850;
  --wood: #716654;
  --fog: #c5c7c3;
  --moss: #65745a;
  --river: #789cad;
  --rust: #9a5d48;
  --mustard: #b18d47;
  --morning-blue: #78aeca;
  --morning: 0;
  --fog-level: 1;
  --pointer-x: 0;
  --pointer-y: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  overflow-x: clip;
  background: #b8b7b1;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid #315f78;
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .8rem;
  left: .8rem;
  padding: .6rem .9rem;
  color: var(--paper-light);
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: none; }

.atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 68% 12%, rgba(255,255,255,.64), transparent 35%),
    linear-gradient(180deg, #aaaeb0 0%, #c5c5bd 38%, #d5e1e3 72%, #eef0e7 100%);
  opacity: calc(.3 + var(--morning) * .7);
  transition: opacity 700ms ease;
}

.paper-grain {
  position: absolute;
  inset: -40%;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(7deg, transparent 0 5px, rgba(61,56,45,.08) 6px, transparent 7px),
    repeating-linear-gradient(97deg, transparent 0 12px, rgba(255,255,255,.22) 13px, transparent 14px),
    radial-gradient(ellipse at 24% 34%, rgba(92,75,54,.12), transparent 18%);
  transform: rotate(.35deg);
}

.fog {
  position: absolute;
  inset: -18%;
  opacity: calc(var(--fog-level) * .72);
  filter: blur(18px);
  transition: opacity 900ms ease;
}

.fog-far {
  background:
    radial-gradient(ellipse at 22% 30%, rgba(231,230,221,.82), transparent 42%),
    radial-gradient(ellipse at 74% 64%, rgba(198,200,198,.75), transparent 46%);
  transform: translate3d(calc(var(--pointer-x) * -4px), calc(var(--pointer-y) * -3px), 0);
}

.fog-near {
  inset: -28%;
  opacity: calc(var(--fog-level) * .36);
  background:
    radial-gradient(ellipse at 38% 58%, rgba(238,236,226,.86), transparent 38%),
    radial-gradient(ellipse at 87% 28%, rgba(181,188,190,.62), transparent 42%);
  transform: translate3d(calc(var(--pointer-x) * 7px), calc(var(--pointer-y) * 4px), 0);
}

.scroll-thread {
  position: fixed;
  z-index: 20;
  top: 0;
  right: clamp(.7rem, 2vw, 1.5rem);
  width: 1px;
  height: 100vh;
  background: rgba(52,56,53,.12);
}

.scroll-thread span {
  display: block;
  width: 1px;
  height: calc(var(--page-progress, 0) * 100%);
  background: linear-gradient(var(--charcoal), var(--river), var(--mustard));
}

main, .poem-installation { position: relative; z-index: 1; }

.movement {
  position: relative;
  min-height: 175svh;
  isolation: isolate;
  --progress: 0;
  --active: 0;
}

.sculpture-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
}

.sculpture-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--charcoal);
  opacity: calc(.45 + var(--active) * .45);
  transform-origin: 50% 50%;
  transform:
    translate3d(
      calc(var(--parallax-x, 0px) + var(--pointer-x) * var(--pointer-weight, 0px)),
      calc(var(--parallax-y, 0px) + var(--pointer-y) * var(--pointer-weight, 0px)),
      0
    )
    rotate(var(--rotation, 0deg))
    scale(var(--scale, 1));
  transition: opacity 800ms ease;
  will-change: transform;
}

.movement::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .78;
}

.movement-control::before {
  background: linear-gradient(180deg, rgba(111,112,111,.68), rgba(188,184,173,.5), transparent);
}

.movement-question::before {
  background: linear-gradient(180deg, transparent, rgba(178,180,177,.56) 28%, rgba(204,201,192,.46), transparent);
}

.movement-body::before {
  background:
    linear-gradient(100deg, rgba(190,190,185,.6), transparent 42%),
    linear-gradient(180deg, transparent, rgba(172,176,176,.55), transparent);
}

.movement-release::before {
  background: linear-gradient(180deg, transparent, rgba(215,215,207,.62) 35%, rgba(218,226,224,.5), transparent);
}

.movement-morning::before {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255,250,224,.56), transparent 30%),
    linear-gradient(180deg, rgba(211,223,224,.25), rgba(233,235,224,.78) 62%, rgba(217,220,197,.74));
}

.poem-panel {
  position: relative;
  z-index: 8;
  width: min(43rem, calc(100% - clamp(3rem, 12vw, 12rem)));
  margin: -61svh auto 72svh clamp(1.5rem, 11vw, 10rem);
  padding: clamp(1.35rem, 3vw, 2.4rem) clamp(1.3rem, 3.5vw, 2.8rem);
  color: var(--ink);
  background:
    linear-gradient(112deg, rgba(247,243,232,.93), rgba(230,227,217,.81) 72%, rgba(233,231,220,.54)),
    repeating-linear-gradient(8deg, transparent 0 8px, rgba(73,65,51,.07) 9px, transparent 10px);
  border: 1px solid rgba(66,65,58,.18);
  clip-path: polygon(.7% 2%, 29% .2%, 68% 1.2%, 99.4% 0, 100% 97.6%, 74% 99.5%, 37% 98.6%, 0 100%);
  box-shadow: 0 18px 55px rgba(55,53,46,.13);
  font-size: clamp(1.05rem, 2.25vw, 1.58rem);
  line-height: 1.78;
  letter-spacing: .012em;
  text-shadow: 0 1px rgba(255,255,255,.38);
}

.poem-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background: repeating-linear-gradient(96deg, transparent 0 15px, rgba(81,67,47,.09) 16px, transparent 17px);
}

.poem-lines { display: block; }
.poem-line { display: block; }

.movement-question .poem-panel,
.movement-release .poem-panel {
  margin-right: clamp(1.5rem, 10vw, 9rem);
  margin-left: auto;
}

.line-hopeless {
  width: max-content;
  margin-top: 1.15rem;
  font-size: .74em;
  letter-spacing: .055em;
}

.movement-body .poem-panel {
  max-width: 39rem;
  background:
    linear-gradient(118deg, rgba(239,238,230,.9), rgba(210,214,213,.74)),
    repeating-linear-gradient(96deg, transparent 0 12px, rgba(76,72,62,.08) 13px, transparent 14px);
}

.movement-release { min-height: 205svh; }

.movement-release .poem-panel {
  border-color: rgba(84,106,107,.19);
  background: linear-gradient(110deg, rgba(247,245,235,.94), rgba(225,232,229,.72));
}

.clarity-phrase {
  color: #243c43;
  text-shadow: 0 0 22px rgba(129,171,184,.2);
}

.release-phrase { color: #654b3d; }

.movement-morning { min-height: 335svh; }

.poem-morning {
  margin-top: -60svh;
  margin-bottom: 100svh;
  margin-left: clamp(1.5rem, 14vw, 13rem);
  background: linear-gradient(108deg, rgba(248,246,235,.88), rgba(232,240,237,.58));
}

.line-morning { max-width: 29ch; }

.line-song {
  width: max-content;
  margin-top: 105svh;
  font-size: clamp(1.22em, 3vw, 1.65em);
  letter-spacing: .045em;
}

.poem-ending {
  position: relative;
  z-index: 5;
  min-height: 140svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(3.5rem, 12vh, 8rem);
  padding: 20vh 2rem 30vh;
  background: linear-gradient(180deg, rgba(236,238,227,.72), rgba(224,229,216,.96));
  text-align: center;
}

.attribution {
  margin: 0;
  color: var(--charcoal);
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  letter-spacing: .16em;
}

.attribution cite { font-style: normal; }

.return-link {
  padding: .65rem .25rem;
  border-bottom: 1px solid rgba(41,43,41,.42);
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: .12em;
  transition: color 300ms ease, border-color 300ms ease;
}

.return-link:hover { color: var(--ink); border-color: currentColor; }

/* Each SVG is one useful sculptural plane; color is limited and purposeful. */
.layer-control-frame {
  color: var(--wood);
  --rotation: var(--scroll-rotation, -4deg);
  --pointer-weight: -2px;
}

.layer-garden-river { color: var(--river); --pointer-weight: 2px; }
.layer-caught-fragments { color: var(--moss); --pointer-weight: 5px; }

.layer-opposed { color: #656963; --rotation: var(--scroll-rotation, 2deg); }
.layer-wheel {
  color: var(--wood);
  --rotation: var(--scroll-rotation, -12deg);
  --scale: .96;
  --pointer-weight: 2px;
}
.layer-birds, .layer-morning-birds { color: #343a38; --pointer-weight: 5px; }

.layer-joints { color: #64665f; --rotation: var(--scroll-rotation, -1deg); }
.layer-house { color: var(--wood); --pointer-weight: 2px; }
.layer-vellum { color: #aab6b8; opacity: .48; --pointer-weight: 5px; }

.layer-release-frame {
  color: #6c6c63;
  --rotation: var(--scroll-rotation, -3deg);
  opacity: var(--scroll-opacity, .82);
}
.layer-open-path { color: var(--river); --pointer-weight: 2px; }
.layer-free-fragments { color: var(--rust); --pointer-weight: 6px; }

.layer-field { color: var(--moss); opacity: .68; }
.layer-morning-frame { color: #454b48; --rotation: var(--scroll-rotation, -1deg); }
.layer-blue-cloth { color: var(--morning-blue); opacity: .62; --pointer-weight: 4px; }
.layer-morning-birds { opacity: .78; }

.sculpture-layer use {
  transform-box: fill-box;
  transform-origin: center;
}

.movement-control.is-active .layer-control-frame use {
  animation: attempt-level 5.4s ease-in-out infinite;
}

.movement-question.is-active .layer-opposed use {
  animation: counterbalance 6.8s ease-in-out infinite;
}

.movement-question.is-active .layer-birds use,
.movement-morning.is-active .layer-morning-birds use {
  animation: bird-crossing 10s ease-in-out infinite;
}

.movement-body.is-active .layer-house use {
  animation: house-sway 7.5s ease-in-out infinite;
}

.movement-release.is-active .layer-open-path use {
  animation: path-open 7s ease-in-out infinite;
}

.movement-morning.is-active .layer-blue-cloth use {
  animation: cloth-breathe 8s ease-in-out infinite;
}

@keyframes attempt-level {
  0%, 100% { transform: rotate(-1.3deg) translateY(0); }
  48% { transform: rotate(.1deg) translateY(-3px); }
  62% { transform: rotate(-.45deg) translateY(-1px); }
}

@keyframes counterbalance {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.15deg); }
}

@keyframes bird-crossing {
  0% { transform: translate(-22px, 8px); opacity: .2; }
  35%, 68% { opacity: .9; }
  100% { transform: translate(34px, -15px); opacity: .28; }
}

@keyframes house-sway {
  0%, 100% { transform: rotate(-.7deg) translateY(0); }
  50% { transform: rotate(.65deg) translateY(3px); }
}

@keyframes path-open {
  0%, 100% { transform: scaleX(.985); }
  50% { transform: scaleX(1.015); }
}

@keyframes cloth-breathe {
  0%, 100% { transform: skewX(-1deg) scaleX(.985); }
  45% { transform: skewX(1.7deg) scaleX(1.02); }
}

@media (max-width: 720px) {
  .scroll-thread { right: .55rem; }

  .movement { min-height: 155svh; }
  .movement-release { min-height: 185svh; }
  .movement-morning { min-height: 305svh; }

  .sculpture-layer {
    --scale: .88;
    opacity: calc(.32 + var(--active) * .34);
  }

  .poem-panel,
  .movement-question .poem-panel,
  .movement-release .poem-panel,
  .poem-morning {
    width: calc(100% - 2.35rem);
    margin-top: -58svh;
    margin-right: auto;
    margin-bottom: 66svh;
    margin-left: auto;
    padding: 1.3rem 1.15rem 1.45rem;
    font-size: clamp(.98rem, 4.45vw, 1.22rem);
    line-height: 1.68;
  }

  .poem-morning { margin-bottom: 88svh; }
  .line-song { margin-top: 88svh; }
  .layer-vellum { opacity: .3; }
}

@media (max-width: 430px) {
  .movement { min-height: 145svh; }
  .movement-release { min-height: 170svh; }
  .movement-morning { min-height: 285svh; }

  .sculpture-stage { height: 92svh; }
  .layer-caught-fragments, .layer-vellum { display: none; }
  .layer-control-frame, .layer-joints { --scale: .76; }

  .poem-panel,
  .movement-question .poem-panel,
  .movement-release .poem-panel,
  .poem-morning {
    width: calc(100% - 1.8rem);
    margin-top: -54svh;
    margin-bottom: 60svh;
    clip-path: polygon(.8% 1%, 99.4% 0, 100% 98%, 62% 99.5%, 0 98.7%);
  }

  .poem-morning { margin-bottom: 80svh; }
  .line-song { margin-top: 78svh; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .movement { min-height: 190svh; }
  .movement-morning { min-height: 350svh; }
  .poem-panel { font-size: .96rem; line-height: 1.55; }
  .layer-caught-fragments, .layer-vellum { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }

  :root { --pointer-x: 0 !important; --pointer-y: 0 !important; }
  .fog { filter: none; opacity: .2; }
  .paper-grain { opacity: .1; }

  .movement,
  .movement-release,
  .movement-morning {
    min-height: auto;
  }

  .sculpture-stage {
    position: relative;
    height: min(72svh, 46rem);
  }

  .sculpture-layer {
    opacity: .58;
    transform: none !important;
    will-change: auto;
  }

  .poem-panel,
  .movement-question .poem-panel,
  .movement-release .poem-panel,
  .poem-morning {
    margin: -23svh auto 34svh;
  }

  .line-song { margin-top: 52svh; }
  .poem-ending { min-height: 110svh; }
}

@media print {
  .atmosphere, .sculpture-stage, .skip-link { display: none; }
  .movement, .movement-release, .movement-morning { min-height: auto; }
  .poem-panel { margin: 2rem auto; box-shadow: none; }
  .line-song { margin-top: 2rem; }
  .poem-ending { min-height: auto; padding: 3rem; }
}

::selection { color: var(--paper-light); background: #526c72; }