/* The mission page's blocks, shared by the five mission proposals: the
   deck's first three slides (the date in 2032, the two doors, the four
   lines), the answer, the letter, what we really measure, and the
   tightrope. Each proposal arranges and dresses them its own way. */

/* ── 1 · the date in 2032, the question under it ─────────────────────── */
.op { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--beat) var(--gutter); }
.op-block { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.date { margin: 0; display: flex; align-items: baseline; font-size: clamp(34px, 6.25vw, 90px); line-height: 0.933; letter-spacing: -0.02em; white-space: nowrap; }
.date .year { font-variant-numeric: tabular-nums; }
.op-q { margin: 0.95em 0 0; max-width: 21em; font-size: clamp(20px, 2.95vw, 42px); line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
.op .cue { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); translate: -50% 0; margin: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.op .cue::after { content: ''; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: currentColor; animation: cue 2.2s var(--ease) infinite; transform-origin: 50% 0; }
@keyframes cue { 0% { scale: 1 0; } 40% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

/* ── 3 · the four lines, each sentence its own line, the pen under the last ── */
.fut { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--beat) var(--gutter); }
.fut-lines { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font-size: clamp(22px, 2.6vw, 38px); }
.fut-l { margin: 0; line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
.fut-l + .fut-l, .fut-we { margin-top: 0.42em; }
.fut-dim { color: rgb(23 23 23 / 0.45); }
.fut-we .pen { width: 100%; margin-top: 0.12em; }
@media (min-width: 900px) { .fut-l { white-space: nowrap; } }

/* ── the answer ────────────────────────────────────────────────────────── */
.ans { position: relative; min-height: 100svh; display: grid; place-items: center; align-content: center; padding: var(--beat) var(--gutter); text-align: center; overflow: clip; }
.ans .answer { position: relative; z-index: 2; }
.ans .seal { position: relative; z-index: 2; }
/* a few pieces of the mood board round the answer, as on the landing */
.ans-board { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ans-board .snap { position: absolute; left: var(--x); top: var(--y); width: var(--w); animation: drift var(--dt, 9s) ease-in-out infinite; animation-delay: var(--dd, 0s); opacity: 0; transition: opacity 900ms var(--ease) var(--d, 0ms); }
.in .ans-board .snap, .ans-board.in .snap { opacity: 1; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 640px) { .ans-board .snap { width: calc(var(--w) * 1.6); } .ans-board .snap.wide-only { display: none; } }
@media (prefers-reduced-motion: reduce) { .ans-board .snap { animation: none; } }

/* ── the letter ────────────────────────────────────────────────────────── */
.letter { position: relative; padding: var(--beat) var(--gutter); }
.letter-col { position: relative; width: min(100%, 33em); margin: 0 auto; font-size: clamp(17px, 1.32vw, 19.5px); line-height: 1.56; letter-spacing: -0.003em; text-align: left; }
.letter-col p { margin: 0 0 1.1em; text-wrap: pretty; }
.letter-col .hello { margin-bottom: 0.8em; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.letter-col .signoff { margin-top: 1.6em; }

/* ── what we really measure ────────────────────────────────────────────── */
.measure { position: relative; padding: var(--beat) var(--gutter); }
.measure-head { text-align: center; }
.measure-head .lede { margin: 0.9em auto 0; text-align: center; }
/* the five readings, a film over each (the deck's evx 4) */
.evg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: clamp(14px, 2.4vw, 40px); width: min(100%, 1180px); margin: clamp(40px, 6vw, 80px) auto 0; padding: 0; list-style: none; }
.evg-i { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; text-align: center; }
.evg-top { align-self: end; justify-self: stretch; display: flex; flex-direction: column; align-items: center; }
.evg-film { width: 46%; margin: 0 0 clamp(14px, 1.6vw, 22px); background: #e9e7e2; rotate: var(--rot, 0deg); box-shadow: 0 5px 12px rgb(23 21 15 / 0.14), 0 18px 40px rgb(23 21 15 / 0.18); }
.evg-film video, .evg-film img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.evg-film--cut { background: none; box-shadow: none; }
.evg-film--cut video { object-fit: contain; }
.evg-t { font-size: clamp(17px, 1.55vw, 23px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.evg-n { margin-top: 0.3em; font-size: clamp(30px, 3.3vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.evg-eg { margin-top: 0.55em; max-width: 12em; font-size: clamp(13px, 1vw, 15px); line-height: 1.35; color: var(--muted); text-wrap: balance; }
@media (max-width: 760px) {
  .evg { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 30px; }
  .evg-i { grid-row: auto; grid-template-rows: auto auto 1fr; grid-template-columns: 30% 1fr; column-gap: 18px; justify-items: start; text-align: left; align-items: start; }
  .evg-top { display: contents; }
  .evg-film { grid-column: 1; grid-row: 1 / span 3; width: 100%; margin: 0; }
  .evg-t { grid-column: 2; grid-row: 1; align-self: end; }
  .evg-n { grid-column: 2; grid-row: 2; margin-top: 0.15em; }
  .evg-eg { grid-column: 2; grid-row: 3; max-width: none; margin-top: 0.4em; }
}
/* the Humanity Eval, the one number, and how it was counted */
.eval { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; width: min(100%, 1100px); margin: 0 auto; text-align: left; }
.eval-n { margin: 0; font-size: clamp(96px, 15vw, 230px); line-height: 0.82; letter-spacing: -0.055em; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eval-n small { font-size: 0.42em; letter-spacing: -0.03em; }
.eval-name { margin: 0.4em 0 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; color: var(--blue); }
.eval-how { display: grid; gap: 1.1em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--quiet); }
.eval-how p { margin: 0; text-wrap: pretty; }
.eval-how b { color: var(--ink); }
.eval-less { display: flex; align-items: baseline; gap: 0.5em; margin-top: 0.4em; padding-top: 1em; border-top: 1px solid var(--hair); font-size: clamp(20px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.eval-less .minus { color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) { .eval { grid-template-columns: minmax(0, 1fr); } }
/* two prompts: every assistant's, every Fig's */
.prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); width: min(100%, 1100px); margin: 0 auto; text-align: left; }
.prompt-cap { margin: 0 0 0.9em; font-size: 15px; line-height: 1.3; color: var(--muted); }
.prompt-mp { margin: 0; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; }
.prompt--them .prompt-mp { color: rgb(23 23 23 / 0.42); }
.prompt--them .prompt-mp s { text-decoration-color: var(--red); text-decoration-thickness: 0.07em; }
@media (max-width: 760px) { .prompts { grid-template-columns: minmax(0, 1fr); } }

/* ── the tightrope, and our promise ────────────────────────────────────── */
.rope-stage { position: relative; overflow-x: clip; padding: var(--beat) var(--gutter); text-align: center; }
.rope-fig { position: relative; width: min(25vw, 46svh, 330px); margin: 0 auto; }
.rope-fig .walker { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* she is black ink with transparency (kit.js K.ropeFigure), nothing
   blended: the photograph's white used to be multiplied into the paper,
   and wherever that blend had a layer of its own (the front page's fade
   in, an iPhone) it blended against nothing and the white showed as a
   box round her (John, 17 and 18 Oct) */
.rope-fig .rope-line { position: absolute; z-index: 0; left: -312.5%; top: 0; width: 725%; height: 100%; overflow: visible; pointer-events: none; }
.rope-fig .rope-line path { fill: none; stroke: #262626; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .rope-fig { width: min(62vw, 260px); } }
.trust-h { margin: clamp(10px, 2vh, 24px) auto 0; max-width: 14em; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(18px, 3vw, 48px); width: min(100%, 1120px); margin: clamp(40px, 6vw, 72px) auto 0; padding: 0; list-style: none; }
.promise { display: grid; justify-items: center; align-content: start; gap: 0.35em; text-align: center; }
.promise .promise-mark { margin-bottom: 0.4em; }
.promise-s { margin: 0; font-size: clamp(19px, 1.65vw, 24px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.promise .pen { width: 88%; max-width: 15em; }
.promise-c { margin: 0; font-family: 'Nanum Pen Script', 'Bradley Hand', cursive; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.05; color: rgb(23 23 23 / 0.62); text-wrap: balance; }
@media (max-width: 860px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .promises { grid-template-columns: 1fr; } }

/* ── the last word ─────────────────────────────────────────────────────── */
.closer { min-height: 80svh; display: grid; place-items: center; align-content: center; padding: var(--beat) var(--gutter); text-align: center; }
.closer .display { max-width: 10.5em; }
.closer .figs { width: clamp(84px, 9vw, 130px); height: auto; margin: clamp(22px, 3vw, 40px) auto 0; }