:root {
  --linen: #f6f2ee;
  --ink: #3d3346;
  --hairline: #d4c5d9;
  --orchid: #b8a6be;
  --rose: #e8c4c4;
  --periwinkle: #c4c8e8;
  --sage: #c8d4c4;
  --marigold: #e8d4a8;
  --plum: #6b5a72;
  --grid-alpha: .30;
}

* { box-sizing: border-box; }

html { background: var(--linen); color: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Anybody", "Inter", sans-serif;
  font-variation-settings: "wdth" 90;
  background:
    repeating-linear-gradient(90deg,
      rgba(184, 166, 190, var(--grid-alpha)) 0,
      rgba(184, 166, 190, var(--grid-alpha)) .5px,
      transparent .5px,
      transparent calc(100vw / 12));
  transition: --grid-alpha 700ms ease;
  overflow-x: hidden;
}

body.grid-right, body.grid-left, body.grid-empty { --grid-alpha: .60; }
body.grid-center { --grid-alpha: 1; }
body.grid-soft { --grid-alpha: .30; }
body.grid-dissolve { --grid-alpha: .45; }

.mark {
  position: fixed;
  top: clamp(1.2rem, 2vw, 2rem);
  left: clamp(1.2rem, 2vw, 2rem);
  z-index: 20;
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--marigold);
  text-transform: uppercase;
}

main { position: relative; }

.panel {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: clamp(2rem, 5vw, 4rem);
}

.opening { place-items: center; text-align: center; }
.opening-core { grid-column: 1 / -1; }

h1, h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 72, "WONK" 1;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
}

h1 {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 200;
}

h2 { font-size: clamp(2.8rem, 7vw, 6rem); }

p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: .01em;
}

.opening p {
  margin: 1.6rem auto 0;
  max-width: 42rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(61, 51, 70, .6);
  animation: delayedNote 1000ms ease 2300ms both;
}

.thought { position: relative; z-index: 3; align-self: center; }
.proposition-left .thought { grid-column: 2 / 7; }
.proposition-right .thought { grid-column: 8 / 12; }

.thought p:not(.kicker), .resolution-text p:not(.kicker) { max-width: 34rem; }

.kicker {
  margin: 0 0 1.2rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orchid);
}

.watermark {
  position: absolute;
  z-index: 1;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20vw;
  font-weight: 200;
  line-height: 1;
  color: rgba(232, 196, 196, .15);
  pointer-events: none;
}

.proposition-left .watermark { left: 11vw; top: 21vh; }
.proposition-right .watermark { right: 10vw; top: 18vh; color: rgba(196, 200, 232, .18); }

.gap, .ending { height: 40vh; position: relative; }
.ending { height: 50vh; }

.collision {
  min-height: 150vh;
  color: var(--plum);
  align-items: center;
}

.collision::before {
  content: "";
  position: absolute;
  left: calc(50% - 8.333vw);
  width: 16.666vw;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(184, 166, 190, .18), transparent);
}

.collision-glyphs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -4vw;
  z-index: 1;
  pointer-events: none;
}

.collision-glyphs span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20vw;
  font-weight: 200;
  color: rgba(232, 196, 196, .18);
}

.collision-glyphs span + span { color: rgba(196, 200, 232, .18); margin-left: -6vw; }
.left-voice { grid-column: 2 / 6; font-variation-settings: "wdth" 75; color: color-mix(in srgb, var(--rose) 42%, var(--ink)); }
.right-voice { grid-column: 8 / 12; font-variation-settings: "wdth" 110; color: color-mix(in srgb, var(--periwinkle) 42%, var(--ink)); }

.question { min-height: 100vh; align-items: center; }
.question-block { grid-column: 4 / 10; text-align: center; }

.resolution { min-height: 150vh; align-items: center; }
.resolution-text { grid-column: 5 / 10; color: var(--orchid); }
.resolution-text h2 { color: color-mix(in srgb, var(--orchid) 72%, var(--ink)); }

.spear-line {
  position: absolute;
  z-index: 4;
  height: 1px;
  background: var(--plum);
  transform-origin: center;
  opacity: .8;
}
.line-a { width: 28vw; left: 8vw; bottom: 21vh; transform: rotate(2deg); }
.line-b { width: 30vw; right: 7vw; top: 26vh; transform: rotate(-3deg); }
.line-c { width: 78vw; left: 11vw; top: 38%; transform: rotate(2deg); }
.line-d { width: 72vw; left: 14vw; top: 50%; transform: rotate(3.5deg); }
.line-e { width: 82vw; left: 9vw; top: 62%; transform: rotate(-1.5deg); }

.reveal {
  opacity: .3;
  filter: blur(8px);
  transform: translateY(1rem);
  transition: opacity 800ms ease-out, filter 800ms ease-out, transform 800ms ease-out, color 1200ms ease;
  will-change: filter, opacity;
}

.reveal.in-view { opacity: 1; filter: blur(0); transform: translateY(0); }
.intro-reveal { animation: openingFocus 1200ms ease 1500ms both; }
.dissolve-text.fading { filter: blur(4px); color: var(--orchid); opacity: .55; }

.flare {
  position: fixed;
  z-index: 10;
  width: 1px;
  height: 1px;
  left: 50vw;
  top: 50vh;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(ellipse, rgba(232, 212, 168, .20) 0%, rgba(232, 212, 168, .08) 36%, transparent 70%);
}

.flare.bloom { animation: flareBloom 5s ease-out both; }
.flare.rose { background: radial-gradient(ellipse, rgba(232, 212, 168, .22) 0%, rgba(232, 196, 196, .16) 38%, transparent 70%); }
.flare.sage { background: radial-gradient(ellipse, rgba(200, 212, 196, .08) 0%, rgba(200, 212, 196, .05) 42%, transparent 74%); }

@keyframes openingFocus {
  from { opacity: .3; filter: blur(12px); transform: translateY(.8rem); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes delayedNote { from { opacity: 0; } to { opacity: 1; } }

@keyframes flareBloom {
  0% { opacity: 0; width: 0; height: 0; transform: translate(-50%, -50%) scale(.1); }
  12% { opacity: 1; }
  62% { opacity: .72; width: 50vw; height: 42vw; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; width: 58vw; height: 50vw; transform: translate(-50%, -50%) scale(1.08); }
}

@media (max-width: 760px) {
  .panel { grid-template-columns: repeat(6, 1fr); }
  .proposition-left .thought, .proposition-right .thought, .left-voice, .right-voice, .question-block, .resolution-text { grid-column: 1 / -1; }
  .collision { gap: 18vh; align-content: center; }
  .watermark { font-size: 34vw; }
  .spear-line { width: 86vw; left: 7vw; }
}