/* You're going to be a cyborg. — quiet single-column typesetting.
   The essay text is the page, with two consequences as a single
   ink block and one stark white page. Opens on forest, closes on ink. */

.essay-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding: var(--space-6) clamp(var(--space-6), 5vw, var(--space-9));
}

/* Both signature slots sit on dark surfaces (forest hero, ink
   close), so the mark takes cream; shared.css's forest hover
   would vanish here — lighten to gold instead. */
.essay-nav .wordmark,
.essay-footer .wordmark {
  color: var(--text-on-dark);
}

.wordmark:hover,
.wordmark:focus-visible {
  color: var(--gold);
}

/* ---- Opening — the essay opens loud, then settles onto cream. ---- */

.opening {
  display: grid;
  place-items: center;
  min-height: min(88svh, 900px);
  margin-bottom: clamp(var(--space-9), 14svh, var(--space-11));
  padding: var(--space-10) var(--space-5);
  background: var(--green-forest);
}

.opening .lead {
  max-width: 24ch;
  margin: 0;
  color: var(--text-on-dark);
  font: 700 clamp(2.2rem, 1.3rem + 4vw, 5rem)/1.1 var(--font-serif);
  text-align: center;
}

.opening .lead em {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}

.prose {
  max-width: 70ch;
  margin-inline: auto;
  padding-inline: var(--space-5);
  color: var(--text-on-cream);
  font: 450 clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem)/1.55 var(--font-serif);
}

.prose p {
  margin: 0 0 var(--space-6);
}

/* The hand-drawn rule on the notebook page between the "lucrative"
   line and "I don't write this essay". */
.hand-rule {
  width: min(120px, 30%);
  margin: var(--space-8) auto;
  border: 0;
  border-top: 2px solid var(--accent-primary);
}

/* Ghost numerals — the "2 consequences" as cheeky chapter marks. */
.spread-num {
  position: absolute;
  z-index: 3;
  top: -0.08em;
  right: 0.02em;
  color: var(--cream);
  font: 700 clamp(9rem, 22vw, 22rem)/0.8 var(--font-serif);
  opacity: 0.16;
  pointer-events: none;
}

.spread-num-light {
  z-index: 7;
  right: auto;
  bottom: -0.06em;
  left: 0.02em;
  color: var(--cream);
  opacity: 0.16;
  top: auto;
}

/* ---- Consequence 1 — one ink block, the sentence held close. ---- */

.consequence-one {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(64svh, 640px);
  margin-top: var(--space-10);
  padding: var(--space-10) var(--space-5);
  background: var(--ink);
  overflow: hidden;
}

.consequence-line {
  max-width: 26ch;
  margin: 0;
  color: var(--text-on-dark);
  font: 600 clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem)/1.2 var(--font-serif);
  text-align: center;
}

/* ---- Consequence 2 — a branded-color counterpart to the ink block. ---- */

.cutout {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(64svh, 640px);
  margin: 0 0 var(--space-10);
  padding: var(--space-9) clamp(var(--space-5), 8vw, var(--space-10));
  background: var(--accent-primary);
  overflow: hidden;
}

.cutout-line {
  position: relative;
  z-index: 2;
  max-width: 26ch;
  margin: 0;
  color: var(--text-on-dark);
  font: 600 clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem)/1.2 var(--font-serif);
  text-align: center;
}

/* ---- Build…… (IMG_1291) — the verb centered, the list drifting
   around it like marginalia. ---- */

.build {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 1100px;
  min-height: clamp(460px, 64svh, 620px);
  margin: clamp(7rem, 9vw, 9rem) auto;
  padding: var(--space-8) var(--space-6);
}

.build-word {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text-on-cream);
  font: 700 clamp(2.8rem, 1.8rem + 4vw, 5.5rem)/1 var(--font-serif);
}

.build-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--accent-primary-deep);
  font: italic 600 clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem)/1.2 var(--font-serif);
}

.build-list li {
  position: absolute;
  white-space: nowrap;
}

.build-list li:nth-child(1) { top: 12%; left: 9%; opacity: 0.6; }
.build-list li:nth-child(2) { top: 7%; right: 21%; opacity: 0.38; font-size: 0.9em; }
.build-list li:nth-child(3) { top: 42%; left: 3%; opacity: 0.46; }
.build-list li:nth-child(4) { bottom: 16%; right: 9%; opacity: 0.78; font-size: 1.15em; color: var(--lavender-deep); }
.build-list li:nth-child(5) { bottom: 8%; left: 22%; opacity: 0.4; font-size: 0.9em; }
.build-list li:nth-child(6) { top: 31%; right: 5%; opacity: 0.53; }
.build-list li:nth-child(7) { bottom: 33%; left: 14%; opacity: 0.66; }
.build-list li:nth-child(8) { top: 23%; left: 31%; opacity: 0.35; font-size: 0.86em; }
.build-list li:nth-child(9) { top: 16%; right: 6%; opacity: 0.7; }
.build-list li:nth-child(10) { bottom: 9%; right: 28%; opacity: 0.48; font-size: 0.9em; }
.build-list li:nth-child(11) { top: 58%; left: 29%; opacity: 0.62; color: var(--lavender-deep); }
.build-list li:nth-child(12) { top: 52%; right: 24%; opacity: 0.36; font-size: 0.88em; }
.build-list li:nth-child(13) { bottom: 27%; left: 5%; opacity: 0.5; }
.build-list li:nth-child(14) { top: 36%; left: 22%; opacity: 0.4; font-size: 0.9em; }
.build-list li:nth-child(15) { bottom: 25%; right: 4%; opacity: 0.63; }
.build-list li:nth-child(16) { bottom: 4%; left: 48%; opacity: 0.43; font-size: 0.86em; }
.build-list li:nth-child(17) { top: 66%; right: 33%; opacity: 0.55; }
.build-list li:nth-child(18) { top: 70%; left: 15%; opacity: 0.34; font-size: 0.88em; }
.build-list li:nth-child(19) { top: 5%; left: 38%; opacity: 0.52; font-size: 0.82em; }
.build-list li:nth-child(20) { top: 25%; right: 29%; opacity: 0.42; }
.build-list li:nth-child(21) { bottom: 18%; left: 30%; opacity: 0.58; font-size: 0.9em; color: var(--lavender-deep); }
.build-list li:nth-child(22) { top: 47%; right: 7%; opacity: 0.48; }
.build-list li:nth-child(23) { top: 17%; left: 48%; opacity: 0.37; font-size: 0.83em; }
.build-list li:nth-child(24) { bottom: 7%; right: 7%; opacity: 0.64; }
.build-list li:nth-child(25) { top: 58%; left: 7%; opacity: 0.4; font-size: 0.9em; }
.build-list li:nth-child(26) { top: 75%; right: 25%; opacity: 0.5; }
.build-list li:nth-child(27) { top: 34%; left: 42%; opacity: 0.34; font-size: 0.82em; }
.build-list li:nth-child(28) { bottom: 37%; right: 18%; opacity: 0.6; color: var(--lavender-deep); }
.build-list li:nth-child(29) { bottom: 18%; left: 4%; opacity: 0.46; }
.build-list li:nth-child(30) { top: 9%; left: 67%; opacity: 0.43; font-size: 0.88em; }
.build-list li:nth-child(31) { bottom: 31%; left: 38%; opacity: 0.54; }
.build-list li:nth-child(32) { top: 63%; right: 8%; opacity: 0.38; font-size: 0.84em; }
.build-list li:nth-child(33) { bottom: 3%; left: 8%; opacity: 0.62; }
.build-list li:nth-child(34) { top: 45%; left: 10%; opacity: 0.4; }
.build-list li:nth-child(35) { bottom: 13%; right: 42%; opacity: 0.49; }

/* ---- Close — the refrain and footer on ink, answering the
   opening's forest. Footer margins match the top nav so the
   signature sits exactly under the wordmark. ---- */

.close {
  margin-top: var(--space-10);
  padding: var(--space-11) 0 var(--space-7);
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.refrain {
  max-width: 22ch;
  margin: 0 auto;
  padding-inline: var(--space-5);
  font: 700 clamp(2.2rem, 1.4rem + 3.4vw, 4.8rem)/1.08 var(--font-serif);
  text-align: center;
}

.refrain-q {
  display: block;
  margin-top: var(--space-5);
  color: var(--gold);
  font: italic 600 0.62em/1.15 var(--font-serif);
}

.essay-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-11);
  padding-inline: clamp(var(--space-6), 5vw, var(--space-9));
}

.share {
  text-align: right;
}

.share p {
  margin: 0;
}

.share-label {
  margin-bottom: var(--space-3);
  color: var(--text-on-dark-soft);
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.share-links {
  color: var(--text-on-dark-soft);
  font: var(--text-nav);
  letter-spacing: var(--tracking-nav);
}

.share a {
  margin-left: var(--space-4);
  color: var(--green-sage);
}

.share a:hover,
.share a:focus-visible {
  color: var(--cream);
}

@media (max-width: 719px) {
  .essay-nav {
    padding: var(--space-5);
  }

  .build {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-height: 0;
    margin-block: var(--space-9);
    padding: var(--space-8) var(--space-5);
  }

  .build-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    width: 100%;
  }

  .build-list li {
    position: relative;
    inset: auto;
    white-space: normal;
  }

  .build-list li:nth-child(n) {
    position: relative;
    inset: auto;
    color: var(--accent-primary-deep);
    font-size: 0.95em;
  }

  .essay-footer {
    flex-direction: column;
    align-items: center;
  }

  .share,
  .share-label {
    text-align: center;
  }

  .share a:first-child {
    margin-left: 0;
  }
}

/* ---- Reveals — added by essay.js only when motion is welcome;
   without JS (or with reduced motion) everything is simply visible. */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-brand),
    transform var(--duration-slow) var(--ease-brand);
}

.reveal.in {
  opacity: 1;
  transform: none;
}