/* Page 01, The Window: what only this page has. The kit's kit.css carries the rest. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* chapter words and their line hold at the top of the screen, over calm paint, while the camera travels */
.tf-opener { padding: 0 0 22svh; }
.word-hold { --tf-hold-top: 8svh; margin-top: 12svh; }
.word-hold .tf-block { margin-top: 3.5svh; }
.word-hold .tf-lead { max-width: 13.5em; }
.line-hold { --tf-hold-top: 15svh; margin-top: 30svh; }
/* a line that waits until it is over the calm upper part of its painting, then comes in quickly */
[data-tf-cue].late { opacity: clamp(0, calc((var(--tf-p, 1) - 0.5) * 7), 1); }
[data-tf-cue].word-hold.late { opacity: clamp(0, calc((var(--tf-p, 1) - 0.42) * 9), 1); }   /* ink titles wait for their pale sky */

/* the vault: the claim on the first screen, then the word and its three senses */
.vault-opener { min-height: 252svh; padding: 0 0 22svh; }
.claim { position: absolute; left: 9.5vw; top: max(62svh, calc(27svh + 318px)); z-index: 1; }   /* always clear of the title card */
.claim .tf-lead { max-width: 12.4em; }
html:not(.tf-ready) .claim { opacity: 0; }
html.tf-ready .claim { opacity: 1; transition: opacity 1.8s linear 2.4s; }
.entry-hold { --tf-hold-top: 19svh; margin-top: 100svh; color: var(--tf-light); }
.entry-hold .tf-scrim { inset: -22% -16% -24% -22%; }
.entry-hold { opacity: calc(1 - var(--tf-r, 0)); }             /* the word leaves as the next room forms */
.two-line { white-space: normal; font-size: clamp(3.6rem, 10.6vw, 12.6rem); line-height: 0.88; }   /* a three-word title on two lines */

.summit-opener { min-height: 168svh; }
.peak-opener { min-height: 150svh; }
.dome-opener { min-height: 96svh; padding: 0; }

/* I The First Mountain, on paper: one question, set as large as the paper allows */
.paper-first { min-height: 122svh; padding: 0; display: grid; align-items: center; }
.poster { margin: 0; max-width: 5.7em; font: 400 clamp(3.8rem, 11.6vw, 13.6rem)/0.88 var(--tf-serif); letter-spacing: -0.048em; }

/* II The Next Mountain, on paper: the problems, one to a line */
.paper-next { padding: 20svh 0 24svh; }
.problems { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
.problems li {
  font: 400 clamp(2.8rem, 8vw, 9.4rem)/0.92 var(--tf-serif); letter-spacing: -0.045em; padding: 0.06em 0 0.1em;
  border-top: 1px solid rgba(23, 19, 14, 0.2);
}
.problems li:nth-child(even) { padding-left: calc((100% + var(--tf-gap)) / 12 * 3); }
.problems li:nth-child(6) { padding-left: 0; }
.problems li.others { padding-left: calc((100% + var(--tf-gap)) / 12 * 6); color: var(--tf-chalk); font-style: italic; }
.problems li:last-child { border-bottom: 1px solid rgba(23, 19, 14, 0.2); }
.list-close { grid-column: 1 / span 11; margin-top: 13svh; font-size: clamp(3rem, 7vw, 7.8rem); }

/* III Legacy: after the second line there are no words. The window grows until its light is the page. */
.legacy-opener { min-height: 262svh; padding-bottom: 0; }
.legacy-opener .tf-lead { max-width: 10em; }
.legacy-hold { opacity: calc(1 - var(--tf-r, 0)); }            /* the words leave before the light comes */

/* the close */
.end { position: relative; min-height: 100svh; padding: 10svh 0 6svh; display: grid; align-items: center; color: var(--tf-ink); }
html[data-tf-mode="css"] .end, html:not(.tf-on) .end { background: var(--tf-paper); }
/* the close stands where the light settles: it overlaps the end of the last painting and appears as the flood
   becomes paper, so no empty screen lies between the peak and the questions */
#questions { margin-top: -60svh; }
#questions .tf-grid { opacity: clamp(0, calc((var(--flood, 1) - 0.74) * 4.2), 1); }
.ask { grid-column: span 6; padding-right: 8%; }
.ask-q { margin: 18px 0 0; font: 400 clamp(3rem, 6.5vw, 7.2rem)/0.94 var(--tf-serif); letter-spacing: -0.038em; text-wrap: balance; }
.signoff { grid-column: 1 / -1; margin-top: 14svh; display: flex; align-items: center; gap: 16px; }
.signoff .tf-mark { width: 58px; height: 58px; }
.signoff .tf-wordmark { font-size: 30px; }

@media (prefers-reduced-motion: reduce) {
  html.tf-ready .claim { transition: none; }
}

@media (max-width: 760px) {
  .claim { left: 18px; right: 18px; top: 64svh; }
  .entry-hold { margin-top: 100svh; --tf-hold-top: 8svh; }
  .entry-hold .tf-scrim { inset: -12% -30% -16% -30%; background: radial-gradient(closest-side, rgba(8, 6, 4, 0.78), rgba(8, 6, 4, 0.5) 62%, rgba(8, 6, 4, 0)); }
  .word-hold { --tf-hold-top: 9svh; }
  .list-close, .ask { grid-column: 1 / -1; }
  .problems li.others { padding-left: 0; }
  .two-line { font-size: clamp(3.2rem, 17vw, 5.4rem); }
  .poster { font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .problems li:nth-child(even) { padding-left: 0; }
  .ask { padding-right: 0; }
  .ask-investors { margin-top: 8svh; }
  .signoff { margin-top: 10svh; }
  .signoff .tf-mark { width: 42px; height: 42px; }
  .signoff .tf-wordmark { font-size: 22px; }
  .end { padding: 14svh 0 8svh; }
  .ask-q { font-size: clamp(2.5rem, 11vw, 3.4rem); }
}