/* The front door. One page that shows Punctum by its own parts: the map's
   cards and wires, its squared paper, its needle, the second voice's double
   rule and the report's memo. Everything drawn is fictional.

   House rules hold here too: square corners, 1px rules, no shadows, no
   gradients; coral marks against, the needle's against side and the point
   at the end. Motion is the house system (tokens in punctum.css): things
   arrive with --enter, nothing animates but transform and opacity. */

.front { --measure: min(100% - 2 * var(--gutter), 1320px); --head: 53px; }
/* The hero stands on the map's own surface, ruled as squared paper, and the
   canvas above it draws the map (front.js). Both lie under everything else
   and never take a click. */
.front { position: relative; isolation: isolate; }
.front-paper, .front-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; pointer-events: none; }
.front-paper { z-index: -2; background: var(--map); border-bottom: 1px solid var(--rule); }
.front-paper::before, .front-paper::after { content: ""; position: absolute; inset: 0; }
.front-paper::before {
  background: var(--grid);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .5H24M.5 0V24' stroke='black'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat;
}
.front-paper::after {
  background: var(--grid-major);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='black'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
}
.front-canvas { z-index: -1; display: block; }
.front > section { width: var(--measure); margin-inline: auto; }

.front-index { color: var(--accent); }
.front-line { display: inline-block; }
.front-meta, .front-section-kicker, .front-caption {
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* The squared paper the map is drawn on, as in map.css: a hairline every
   24px, a firmer one every 120px, masked in the theme's own colour. */
.front-surface, .step-art { position: relative; isolation: isolate; background: var(--map); border: 1px solid var(--rule); overflow: hidden; }
:is(.front-surface, .step-art)::before, :is(.front-surface, .step-art)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.front-surface::before, .step-art::before {
  background: var(--grid);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .5H24M.5 0V24' stroke='black'/%3E%3C/svg%3E") -1px -1px / 24px 24px repeat;
}
.front-surface::after, .step-art::after {
  background: var(--grid-major);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='black'/%3E%3C/svg%3E") -1px -1px / 120px 120px repeat;
}
.front-caption { display: flex; gap: 14px; margin-top: 10px; }
.front-caption span:first-child { flex: none; color: var(--text); }

/* The hero: the words on the left; on the right the map, where the second
   voice thinks along. ------------------------------------------------------ */
.front-hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--head)); }
.front-meta { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 13px; border-bottom: 1px solid var(--rule); }
.front-hero-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(32px, 5vw, 96px);
}
.front-copy { display: flex; flex-direction: column; justify-content: center; max-width: 600px; padding: clamp(36px, 6vh, 72px) 0 clamp(48px, 8vh, 96px); }
.front-title {
  margin-left: -.06em;
  font-size: clamp(54px, 7.4vw, 116px);
  line-height: .94;
  letter-spacing: -.055em;
}
.front-title em { font-style: normal; color: var(--mark); }
.front-lede { margin-top: clamp(20px, 3vh, 32px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.front-map { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(560px, 74vh, 780px); margin: 0; padding: 22px 0 16px; }
.front-map-head { display: grid; justify-items: center; gap: 8px; }
.front-map-state { min-height: 1.6em; font: 400 10.5px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--pencil); text-align: center; }
.front-map-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border: 1px solid currentColor; vertical-align: 0; }
.front-map .front-caption { align-self: flex-end; margin: 0; padding: 4px 0 4px 10px; background: var(--map); }

/* The one field: field and button as one instrument. */
.front-form { margin-top: 36px; max-width: 540px; }
.front-field { display: flex; margin-top: 8px; border: 1px solid var(--rule-strong); background: var(--field); }
.front-field input { flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; border: 0; background: transparent; font-size: 17px; }
.front-field input::placeholder { color: var(--text-2); opacity: .8; }
.front-field input:focus-visible, .front-field button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.front-field input:focus { outline: 3px solid var(--focus); outline-offset: -3px; }
/* The family's button: the words to the left, a coral arrow to the right. */
.front-field .primary { justify-content: space-between; gap: 36px; min-height: 56px; margin: -1px -1px -1px 0; padding: 0 16px 0 20px; font-size: 15px; }
.front-arrow { display: inline-block; color: var(--mark); font-size: 19px; font-weight: 400; line-height: 1; transition: transform var(--instant) var(--enter); }
.front-field .primary:hover .front-arrow, .front-field .primary:focus-visible .front-arrow { transform: translateX(4px); }
.front-note { margin-top: 12px; max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.front-note a { color: inherit; text-underline-offset: 3px; }
.front-note a:hover { color: var(--text); }
/* Signing in with an account elsewhere (D35): the providers as one ruled
   row in the field's own frame, then the link by e-mail for everyone else. */
.provider-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 8px; border: 1px solid var(--rule-strong); background: var(--field); }
.provider { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 0 18px; border: 0; border-left: 1px solid var(--rule); background: transparent; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--instant) var(--enter); }
.provider:first-child { border-left: 0; }
.provider:hover { background: var(--hover); }
.provider:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.provider:active { transform: translateY(1px); }
.provider-logo { display: block; flex: none; width: 18px; height: 18px; }
.provider-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The field no person fills: off the page, out of reach of keys and readers. */
.front-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.front-dev { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; max-width: 540px; margin-top: 28px; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 15px; }
.front-dev a { color: var(--text); }

/* The needle over the map: the same instrument as the map's masthead. */
.front-needle { --w: 168px; margin: 0; }

/* Sections below the fold. ------------------------------------------------- */
.front-section { padding: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--rule); }
.front-section-title, .front-end-title { margin-top: 18px; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.front-section-lede { margin-top: 22px; max-width: 32em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* How it goes: four columns, each a drawing and three lines. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule-strong); }
.step { padding: 28px clamp(16px, 1.8vw, 28px) 4px; border-left: 1px solid var(--rule); }
.step:first-child { padding-left: 0; border-left: 0; }
.step:last-child { padding-right: 0; }
.step-art { display: grid; place-items: center; height: 168px; padding: 16px; }
.step-number { margin-top: 22px; font: 400 11px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.step-title { margin-top: 6px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.step-text { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }

/* 01: a thesis on its heavy rule. */
.art-thesis-claim { width: min(100%, 230px); padding-bottom: 10px; border-bottom: 2px solid var(--text); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
/* 02: three points under it, each on its side. */
.art-points { align-content: center; justify-items: center; gap: 0; }
.art-stem { position: relative; width: 150px; height: 16px; border-top: 2px solid var(--text); }
.art-stem::after { content: ""; position: absolute; left: 50%; top: 0; height: 14px; border-left: 1px solid var(--wire); }
.art-row { position: relative; display: flex; gap: 10px; padding-top: 14px; }
.art-row::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; border-top: 1px solid var(--wire); }
.art-card { position: relative; box-sizing: border-box; min-width: 64px; padding: 6px 6px 8px; border: 1px solid var(--rule-strong); background: var(--page); }
.art-card .stance { display: block; font-size: 9.5px; }
.art-card i { display: block; height: 5px; margin-top: 8px; background: var(--band); }
.art-row .art-card::before { content: ""; position: absolute; left: 50%; top: -15px; height: 14px; border-left: 1px solid var(--wire); }
.art-card.is-for { border-top: 2px solid var(--text); }
.art-card.is-against { border-top: 2px solid var(--mark); }
.art-row .is-for::before, .art-row .is-against::before { top: -16px; }
/* 03: a point, and the second voice answering under it. */
.art-voice { align-content: center; gap: 0; }
.art-voice .art-card { width: 128px; }
/* A stance word longer than the card (Spanish "En contra") widens it. */
.art-card .stance { white-space: nowrap; }
.art-wire { width: 1px; height: 18px; background: var(--wire); }
.art-card.is-voice { border: 3px double var(--pencil); overflow: hidden; }
.art-card.is-voice .stance { color: var(--pencil); }
.art-card.is-voice::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 2px; background: var(--pencil); opacity: 0; }
/* 04: a memo. */
.art-sheet { display: grid; gap: 7px; width: 150px; padding: 12px 14px 16px; border: 1px solid var(--rule); background: var(--page); }
.art-sheet-kicker { font: 400 9px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.art-sheet i { display: block; height: 5px; background: var(--band); }
.art-sheet .art-sheet-title { height: 9px; margin: 2px 0 6px; background: color-mix(in srgb, var(--text) 22%, var(--page)); }
.art-sheet .art-short { width: 55%; }

/* Text set in a figure and a demonstration beside it. */
.front-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 7vw, 120px); }
.front-split.is-flipped { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.front-demo { margin: 0; }
.front-facts { margin-top: 32px; max-width: 30em; border-top: 1px solid var(--rule-strong); }
.front-facts div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.front-facts dt { font: 400 11px/1.9 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.front-facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* Fig. 2: asked about one point, the second voice reads the path above it
   and answers three ways, in its own hand; one answer is kept. */
.demo-surface { display: grid; justify-items: center; align-content: start; min-height: clamp(420px, 34vw, 500px); padding: clamp(32px, 4vw, 52px) clamp(12px, 2vw, 24px) 36px; }
.demo-thesis { max-width: 24em; padding-bottom: 8px; border-bottom: 2px solid var(--text); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.demo-wire { position: relative; width: 1px; height: 22px; background: var(--wire); }
.demo-wire-top::after { content: ""; position: absolute; left: -.5px; top: 0; width: 2px; height: 100%; background: var(--pencil); transform: scaleY(0); transform-origin: top; }
.demo-card { position: relative; width: min(100%, 340px); padding: 10px 14px 14px; border: 1px solid var(--rule-strong); background: var(--page); }
.demo-card.is-for { border-top: 2px solid var(--text); }
.demo-card::after { content: ""; position: absolute; left: 0; top: -1px; width: 40%; height: 2px; background: var(--pencil); opacity: 0; pointer-events: none; }
.demo-claim { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.demo-answers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding-top: 20px; }
.demo-answers::before { content: ""; position: absolute; top: 0; left: calc((100% - 24px) / 6); right: calc((100% - 24px) / 6); border-top: 1px solid var(--pencil); }
.demo-answers .demo-card { width: auto; }
.demo-answers .demo-card::before { content: ""; position: absolute; left: 50%; top: -23px; height: 20px; border-left: 1px solid var(--pencil); }
.demo-card.is-voice { padding: 8px 12px 12px; border: 3px double var(--pencil); }
.demo-card.is-voice .demo-claim { min-height: 3.9em; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--pencil); }
.demo-who { margin-top: 16px; }
@media (max-width: 600px) {
  .demo-surface { justify-items: stretch; }
  .demo-thesis { text-align: left; }
  .demo-wire { justify-self: start; margin-left: 14px; }
  .demo-card { width: auto; }
  .demo-answers { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 28px; }
  .demo-answers::before { top: 0; bottom: 30px; left: 14px; right: auto; border-top: 0; border-left: 1px solid var(--pencil); }
  .demo-answers .demo-card::before { left: -15px; top: 28px; width: 14px; height: 0; border-left: 0; border-top: 1px solid var(--pencil); }
  .demo-card.is-voice .demo-claim { min-height: 0; }
}
/* Kept: the answer turns to ink, the others go, the run retracts. */
.front-demo.is-kept .demo-card[data-keep] { padding: 10px 14px 14px; border: 1px solid var(--rule-strong); }
.front-demo.is-kept .demo-card[data-keep] .demo-claim { color: var(--text); }
.front-demo.is-kept .demo-answers .demo-card:not([data-keep]) { opacity: 0; transform: translateY(-8px); transition: opacity var(--quick) var(--exit), transform var(--quick) var(--exit); }
.front-demo.is-kept .demo-answers::before { transform: scaleX(0); transition: transform var(--quick) var(--exit) var(--quick); }
.front-demo.is-kept .voice-state { animation: page-in var(--settle) var(--enter) var(--quick) backwards; }
@media (max-width: 600px) { .front-demo.is-kept .demo-answers::before { transform: scaleY(0); transform-origin: top; } }

/* Fig. 3: a report, on the page colour, lifted off the paper by its rule. */
.memo-surface { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px); }
.front-memo { width: min(100%, 540px); padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--rule-strong); background: var(--page); }
.front-memo-thesis { margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-strong); font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.front-memo .front-needle { --w: 120px; margin: 16px 0 0; justify-content: flex-start; }
.front-memo-section { margin-top: 18px; }
.front-memo-title { font: 400 10.5px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.front-memo li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; }
.front-memo li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 1px; background: var(--text); }
.front-memo .ref { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 3px; border: 1px solid var(--rule); font: 400 10px/16px var(--mono); text-align: center; color: var(--text-2); }

/* The end: the claim again, in a word for the reader. */
.front-end { padding: clamp(80px, 11vw, 160px) 0 clamp(64px, 8vw, 112px); border-top: 1px solid var(--rule-strong); }
.front-end-title { font-size: clamp(46px, 8vw, 128px); line-height: .96; letter-spacing: -.055em; }
.front-point { color: var(--mark); }
.front-end .front-form { margin-top: clamp(32px, 4vw, 48px); }

/* Why Punctum: the family's idea, and the same two voices in each project. */
.front-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head head" "body voices"; column-gap: clamp(40px, 7vw, 120px); row-gap: clamp(32px, 4vw, 56px); align-items: start; }
.front-why-head { grid-area: head; }
.front-why-body { grid-area: body; }
.front-why .front-section-lede { margin-top: 0; }
.front-why em { font-style: normal; }
.front-why .front-section-title .front-line { color: var(--text-2); }
.front-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 20px; border-bottom: 1px solid var(--text); font-weight: 600; text-decoration: none; }
.front-link span { color: var(--mark); transition: transform var(--instant) var(--enter); }
.front-link:hover span { transform: translate(2px, -2px); }
.front-voices { grid-area: voices; margin: 0; }
.front-voices ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.front-voices li { padding: 16px clamp(12px, 1.4vw, 20px) 20px; border-left: 1px solid var(--rule); }
.front-voices li:first-child { padding-left: 0; border-left: 0; }
.front-voices li.is-here { margin-top: -2px; border-top: 2px solid var(--mark); }
.front-voices-project { font: 400 11px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.front-voices li.is-here .front-voices-project { color: var(--accent); }
.front-voices dl { margin: 14px 0 0; }
.front-voices dl div + div { margin-top: 12px; }
.front-voices dt { font: 400 10px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.front-voices dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.front-voices dd.second { font-weight: 400; color: var(--pencil); }
.front-voices .front-caption { margin-top: 14px; }

/* The foot every C-Point Labs page shares, on graphite in both themes. */
.family-foot { --f-text: #f4f2ed; --f-muted: #a4a7a4; --f-rule: #444748; background: #111314; color: var(--f-text); }
.family-foot-inner { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; padding: clamp(64px, 7vw, 112px) 0 24px; }
.family-foot-top { display: flex; justify-content: space-between; align-items: end; gap: 48px; padding-bottom: clamp(56px, 7vw, 112px); }
.family-statement { max-width: 10em; font-size: clamp(42px, 5.8vw, 96px); font-weight: 600; line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.family-statement em { font-style: normal; color: var(--coral); }
.family-foot nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 28px; max-width: 560px; }
.family-foot nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-underline-offset: 5px; transition: color var(--instant); }
.family-foot nav a:hover { color: var(--coral); }
.family-foot :focus-visible { outline-color: var(--coral); }
.family-foot ::selection { background: var(--f-text); color: #111314; }
.family-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 18px; border-top: 1px solid var(--f-rule); font: 400 10.5px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--f-muted); }

/* Narrower screens. -------------------------------------------------------- */
@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .step:nth-child(even) { padding-right: 0; }
  .step:nth-child(n + 3) { margin-top: 28px; border-top: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .front-hero { min-height: 0; }
  .front-hero-body { grid-template-columns: minmax(0, 1fr); }
  .front-copy { padding-bottom: 24px; }
  .front-map { min-height: 620px; }
  .front-split, .front-split.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .front-split.is-flipped .front-demo { order: 2; }
  .front-why { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "voices"; }
  .family-foot-top { flex-direction: column; align-items: flex-start; }
  .family-foot nav { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .front-meta > span:last-child { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step:nth-child(n) { padding: 24px 0 8px; border-left: 0; margin-top: 0; }
  .step + .step { border-top: 1px solid var(--rule); }
  .front-field { flex-direction: column; background: none; border: 0; gap: 8px; }
  .front-field input { border: 1px solid var(--rule-strong); background: var(--field); }
  .front-field .primary { margin: 0; justify-content: space-between; }
  .provider { flex-direction: column; justify-content: center; gap: 7px; min-height: 68px; padding: 10px 4px; font-size: 14px; text-align: center; }
  .front-voices ol { grid-template-columns: minmax(0, 1fr); }
  .front-voices li, .front-voices li:first-child { padding: 14px 0 16px; border-left: 0; }
  .front-voices li + li { border-top: 1px solid var(--rule); }
  .front-voices li.is-here { border-top: 2px solid var(--mark); }
}

/* Motion. The hero arrives in reading order while the drawing builds the way
   the map does: the thesis, its stem, the run, then each card from the
   middle outward; once all have landed the needle swings to its reading.
   Below, each section rises into place once as it comes into view (the
   script marks the page `reveals` and each part `is-in`). */
@media (prefers-reduced-motion: no-preference) {
  .front-meta, .front-copy > :not(.front-title) { animation: rise var(--slow) var(--enter) backwards; }
  .from-for, .from-against { display: inline-block; animation: from-for var(--slow) var(--enter) 60ms backwards; }
  .from-against { animation-name: from-against; animation-delay: 190ms; }
  .from-for.is-late { animation-delay: 120ms; }
  .front-copy > :nth-child(2) { animation-delay: 240ms; }
  .front-copy > :nth-child(3) { animation-delay: 320ms; }
  .front-copy > :nth-child(4) { animation-delay: 400ms; }
  .front-map-head, .front-map .front-caption { animation: page-in var(--slow) var(--enter) 200ms backwards; }


  .reveals [data-reveal] { transition: opacity var(--slow) var(--enter), transform var(--slow) var(--enter); transition-delay: calc(var(--n, 0) * 90ms); }
  .reveals [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }

  .is-in .art-card { animation: sketch-land var(--settle) var(--enter) backwards; animation-delay: calc(var(--n, 0) * 90ms + 420ms + var(--i, 0) * 80ms); }
  .is-in .art-stem::after { transform-origin: top; animation: sketch-down var(--quick) var(--enter) backwards; animation-delay: calc(var(--n, 0) * 90ms + 240ms); }
  .is-in .art-row::before { animation: sketch-across var(--settle) var(--enter) backwards; animation-delay: calc(var(--n, 0) * 90ms + 340ms); }
  .is-in .art-voice .art-card.is-voice { animation-delay: calc(var(--n, 0) * 90ms + 560ms); }
  .is-in .art-voice .art-wire { transform-origin: top; animation: sketch-down var(--quick) var(--enter) backwards; animation-delay: calc(var(--n, 0) * 90ms + 420ms); }
  .is-in .art-card.is-voice::after { animation: read 1.4s var(--move) calc(var(--n, 0) * 90ms + 900ms) 3; }
  .is-in .art-sheet > * { animation: rise var(--settle) var(--enter) backwards; animation-delay: calc(var(--n, 0) * 90ms + 360ms + var(--k, 0) * 70ms); }
  .art-sheet > :nth-child(2) { --k: 1; }
  .art-sheet > :nth-child(3) { --k: 2; }
  .art-sheet > :nth-child(4) { --k: 3; }
  .art-sheet > :nth-child(5) { --k: 4; }

  /* Fig. 2, in order: the path is read, then the point, then the answers
     land and write themselves, then one is kept (frame.js sets each state). */
  .reveals [data-voice-demo]:not(.is-answering) .demo-answers, .reveals [data-voice-demo]:not(.is-weighing) .demo-who { opacity: 0; }
  .demo-answers, .demo-who { transition: opacity var(--quick) var(--enter); }
  .is-reading .demo-wire-top::after { transform: none; transition: transform 600ms var(--move); }
  .is-reading:not(.is-answering) .demo-asked::after { animation: read 1.4s var(--move) 600ms infinite; }
  .is-kept .demo-wire-top::after { opacity: 0; transition: opacity var(--slow) var(--move); }
  .is-answering .demo-answers::before { animation: sketch-across var(--settle) var(--enter) backwards; }
  .is-answering .demo-answers .demo-card { animation: sketch-land var(--settle) var(--enter) backwards; animation-delay: calc(160ms + var(--i, 0) * 80ms); }

  .is-in .front-memo > * { animation: rise var(--settle) var(--enter) backwards; animation-delay: calc(240ms + var(--k, 0) * 90ms); }
  .front-memo > :nth-child(2) { --k: 1; }
  .front-memo > :nth-child(3) { --k: 2; }
  .front-memo > :nth-child(4) { --k: 3; }
  .front-memo > :nth-child(5) { --k: 4; }
  .front-memo > :nth-child(6) { --k: 5; }
  .is-in .front-memo .balance-needle { animation: needle-swing 900ms var(--move) 900ms backwards; }
}
/* Words being written: the text holds its place, the live copy runs over it. */
.stream { position: relative; display: block; }
.stream.is-armed .stream-text { visibility: hidden; }
.stream-live { position: absolute; inset: 0; }
.stream-live::after { content: ""; display: inline-block; width: .45em; height: .95em; margin-left: 2px; vertical-align: -.1em; background: currentColor; opacity: .55; animation: caret 1s steps(2) infinite; }
.stream.is-written .stream-live::after { display: none; }

@keyframes from-for { from { opacity: 0; transform: translateX(-24px); } }
@keyframes from-against { from { opacity: 0; transform: translateX(24px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sketch-land { from { opacity: 0; transform: translateY(-8px); } }
@keyframes sketch-down { from { transform: scaleY(0); } }
@keyframes sketch-across { from { transform: scaleX(0); } }
@keyframes needle-swing { from { transform: translateX(calc(.5 * (var(--w) - 3px))); } }
@keyframes read { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(250%); } }
@keyframes caret { 50% { opacity: 0; } }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}