/* ==========================================================================
   Invention House
   invention-house.css · a black page; the manifesto is written onto it word by word,
   always at the reader's eyeline.
   ========================================================================== */

:root {
  --black: #000000;
  --text: rgba(255, 255, 255, .84);

  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--black);
  overflow-x: hidden;
}

/* The column, set like a page of a book: left-ragged, measured, roomy. */
.manifesto {
  max-width: 33em;
  margin: 0 auto;
  padding-top: clamp(3rem, 10vh, 6rem);
  padding-left: clamp(1.75rem, 8vw, 4rem);
  padding-right: clamp(1.75rem, 8vw, 4rem);
  padding-bottom: clamp(3rem, 10vh, 6rem);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  text-rendering: optimizeLegibility;
}

.manifesto p {
  margin: 0 0 1.6em;
}

/* ==========================================================================
   THE CURTAIN — the page opens as unbroken black. The class is set by an
   inline script in the head, so the black is there from the first paint and
   the manifesto is never seen whole; manifesto.js adds .lifted once the
   opening sentence sits at its mark, and the black thins away to reveal it.
   ========================================================================== */

html.curtain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--black);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1) .25s;
}

html.curtain.lifted::before {
  opacity: 0;
}

/* ==========================================================================
   THE TELEPROMPTER — manifesto.js pins the column and glides it so the
   line being written sits at the center of the viewport; scrolling writes
   the words. Without JS (or with reduced motion) none of this applies and
   the text above simply reads as a page.
   ========================================================================== */

.reveal .runway {
  width: 1px;
}

.reveal .stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Hidden until the lines are measured and placed; the curtain, not this,
   is what the reader sees fade. */
.reveal .manifesto {
  padding-top: 0;
  padding-bottom: 0;
  will-change: transform;
  opacity: 0;
}

/* Lines, as the browser wrapped them (built by manifesto.js). */
.reveal .manifesto .line {
  display: block;
}

/* Line opacity is scroll-driven, set inline by manifesto.js each frame. */
.reveal .manifesto .u {
  opacity: 0;
}