/* CloudNhyne Consulting. Written phone first; wider screens add to it.
   Without JavaScript this is a plain, complete page: the question, the three
   answers as links, the three chapters, and the footer. The .js class turns
   it into the stage: a pinned question, a brain the scroll steers, and the
   brain folding back into the logo at the end. If the stage cannot run, the
   page drops the .js class and is the plain page again, with a still of the brain. */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--base-black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keyboard focus never lands under the fixed bar. */
  scroll-padding-top: calc(var(--bar-h) + var(--s-4));
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--base-black);
  color: var(--soft-grey);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
p, h1, h2, h3, h4, ol, ul, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--sphere-gold); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  z-index: 60;
  left: var(--gutter);
  top: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--sphere-gold);
  color: var(--base-black);
  font-weight: var(--bold);
  max-width: calc(100vw - 2 * var(--gutter));
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- the brand's voice, as classes ---------- */
.eyebrow {
  color: var(--ember-red);
  font-size: var(--t-small);
  font-weight: var(--bold);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  /* At very large text a long word ("Hippocampus.") is wider than a phone. */
  overflow-wrap: anywhere;
}
/* The red rule under every eyebrow. */
.eyebrow::after {
  content: "";
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  margin-top: var(--s-3);
  background: var(--ember-red);
}
.line { color: var(--sphere-gold); font-size: var(--t-line); line-height: 1.3; text-wrap: balance; }
.signoff { color: var(--ember-red); font-weight: var(--bold); }
.counter { color: var(--sphere-gold); font-size: var(--t-small); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
/* The email address breaks after its @ (a <wbr> in the markup); anywhere is only the last resort. */
.text-link { color: var(--sphere-gold); font-weight: var(--bold); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
/* A link inside a sentence that still gets a whole fingertip: the 988 line, the email address. */
.tap { display: inline-block; min-width: var(--tap); min-height: var(--tap); line-height: var(--tap); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: var(--bold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
}
.btn:active { transform: scale(0.98); }
.btn--gold { background: var(--sphere-gold); color: var(--base-black); }
.btn--gold:hover { background: var(--highlight-gold); }
.btn--line { border-color: var(--ui-line); background: transparent; color: var(--wordmark-white); }
.btn--line:hover { border-color: var(--soft-grey); }

/* ---------- the stage, only when scripts run ---------- */
.stage, .leaders, .markers, .slot-cover, .slot-side, .press, .loader, .enter, .hint, .readout, .loader-wordmark { display: none; }
.js .brain-still { display: none; }
.js .stage {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.js .leaders {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.leaders path { stroke: var(--ui-line); stroke-width: 1; opacity: 0; transition: opacity var(--d-slow) var(--ease-out), stroke var(--d-mid); }
.leaders path.is-active { stroke: var(--sphere-gold); }
[data-state="choose"] .leaders path { opacity: 1; }

.js .markers { display: block; position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.markers span {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 1px solid var(--soft-grey);
  border-radius: 50%;
  background: var(--veil);
  color: var(--wordmark-white);
  font-size: var(--t-small);
  font-weight: var(--bold);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out), background-color var(--d-mid), color var(--d-mid), border-color var(--d-mid);
}
[data-state="choose"] .markers span { opacity: 1; }
.markers span.is-active { border-color: var(--sphere-gold); background: var(--sphere-gold); color: var(--base-black); }

/* Where the brain sits while a chapter plays: fixed boxes the engine fits itself to. */
.js .slot-cover, .js .slot-side { display: block; position: fixed; pointer-events: none; }
.slot-cover { left: 0; top: 7svh; width: 100vw; height: 56svh; }
.slot-side { left: 0; top: 7svh; width: 100vw; height: 56svh; }

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--base-black);
}
/* Solid behind the whole logo and its clear space, then a short fade below. */
.bar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: var(--s-5);
  background: linear-gradient(to bottom, var(--base-black), transparent);
  pointer-events: none;
}
html:not(.js) .bar { position: static; }
html:not(.js) .bar::after { display: none; }
.mark { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.mark picture { display: contents; }
.mark img { width: auto; height: var(--logo-h); }
/* The mark alone, where the full lockup would be too small to read. */
@media (max-width: 23.4em), (max-height: 34em) {
  :root { --logo-h: var(--tap); }
}
.bar-actions { display: flex; align-items: center; gap: var(--s-3); }
.bar-cta { flex: none; min-height: var(--tap); padding: 0 var(--s-3); white-space: nowrap; }
/* Very large text on the smallest phones (18em is 288px at the default size):
   a tighter bar and a label-sized button, so "I'm ready" stays on screen. */
@media (max-width: 18em) {
  .bar { gap: var(--s-3); padding-inline: var(--s-3); }
  .bar-cta { padding-inline: var(--s-2); font-size: var(--t-small); }
}
.bar-line { display: none; color: var(--soft-grey); font-size: var(--t-small); font-weight: var(--bold); letter-spacing: 0.14em; text-transform: uppercase; }
/* Sound is a desk flourish: on a phone the bar holds the logo and the one action. */
.sound {
  display: none;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--wordmark-white);
  font-size: var(--t-small);
  font-weight: var(--bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.sound:hover { border-color: var(--soft-grey); }
.sound[aria-pressed="true"] { background: var(--sphere-gold); border-color: var(--sphere-gold); color: var(--base-black); }
html:not(.js) .sound { visibility: hidden; }
html:not(.js) .bar-cta { display: none; }

/* ---------- the question: pinned while the answers rise ---------- */
.hero { position: relative; z-index: 1; padding: var(--s-7) var(--gutter) var(--s-8); }
.hero-stage { display: grid; gap: var(--s-5); }
.js .hero { height: 210svh; padding: 0; }
.js .hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(10rem, 1fr) auto;
  gap: var(--s-3);
  padding: calc(var(--bar-h) + var(--s-6) + var(--s-1)) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
}
/* On the plain page the still of the brain sits under the question, before the answers. */
.brain-slot { order: 1; pointer-events: none; }
.brain-still { width: min(100%, 26rem); margin-inline: auto; }
.choices { order: 2; }
.js .brain-slot { position: relative; grid-row: 3; grid-column: 1; min-height: 10rem; }

.question {
  color: var(--wordmark-white);
  font-size: var(--t-hero);
  font-weight: var(--display);
  letter-spacing: -0.02em;
  line-height: var(--lh-display);
}
.q { display: block; }
.q2 { color: var(--sphere-gold); }
/* The question is on screen from the first paint; the brain forms behind it. */
.js .question { grid-row: 1; }

.who { max-width: 34ch; }
.js .who { grid-row: 2; }

/* While loading, the gold sphere in the canvas and this wordmark under it are the logo. */
.js .loader-wordmark {
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--s-2));
  width: min(86vw, 26rem);
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out);
}
[data-state="loading"] .loader-wordmark { opacity: 1; }

.js .enter {
  display: block;
  grid-row: 3;
  grid-column: 1;
  z-index: 4;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.enter:focus-visible { outline-offset: -0.5rem; }
[data-state="loading"] .enter,
[data-state="forming"] .enter { visibility: hidden; }

.js .press {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: 7.5rem;
  height: 7.5rem;
  margin: -3.75rem 0 0 -3.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-mid) var(--ease-out);
}
.press.is-on { opacity: 1; }
/* It turns only while the pointer moves. */
.press svg { width: 100%; height: 100%; animation: turn 16s linear infinite paused; }
.press.is-moving svg { animation-play-state: running; }
.press text { fill: var(--wordmark-white); font-size: var(--t-small); font-weight: var(--bold); letter-spacing: 0.2em; text-transform: uppercase; }
.press::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  background: var(--sphere-gold);
}
@keyframes turn { to { transform: rotate(1turn); } }

.js .hint {
  display: flex;
  grid-row: 4;
  grid-column: 1;
  z-index: 1;
  align-self: start;
  justify-self: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  color: var(--wordmark-white);
  font-size: var(--t-small);
  font-weight: var(--bold);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out);
}
[data-state="intro"] .hint { opacity: 1; transition-delay: 320ms; }
.hint-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sphere-gold); animation: ping 1.8s var(--ease-out) 3; }
@keyframes ping {
  from { box-shadow: 0 0 0 0 var(--gold-ping); }
  to { box-shadow: 0 0 0 0.75rem var(--gold-ping-end); }
}
.hint-coarse { display: none; }
@media (pointer: coarse) {
  .hint-fine { display: none; }
  .hint-coarse { display: inline; }
}

/* ---------- the three answers ---------- */
.choices { display: grid; gap: var(--s-4); }
.choices ol { display: grid; }
.js .choices { grid-row: 4; grid-column: 1; z-index: 1; margin-top: var(--s-6); visibility: hidden; }
[data-state="choose"] .choices { visibility: visible; }
/* The skip link works before the page script has arrived: the answers show when they are the target. */
.js .choices:target { visibility: visible; }
.js .choices:target .eyebrow, .js .choices:target li { opacity: 1; transform: none; }
.js .choices .eyebrow, .js .choices li { opacity: 0; transform: translateY(0.75rem); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
[data-state="choose"] .choices .eyebrow, [data-state="choose"] .choices li { opacity: 1; transform: none; }
[data-state="choose"] .choices li:nth-child(1) { transition-delay: 60ms; }
[data-state="choose"] .choices li:nth-child(2) { transition-delay: 120ms; }
[data-state="choose"] .choices li:nth-child(3) { transition-delay: 180ms; }

.choice {
  position: relative;
  display: grid;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ui-line);
  text-decoration: none;
}
.choice::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--sphere-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}
.choice:hover::before,
.choice:focus-visible::before,
.choice.is-active::before { transform: scaleX(1); }
.choice:focus-visible { outline-offset: 0.25rem; }
.choice-fig { color: var(--ember-red); font-size: var(--t-small); font-weight: var(--bold); letter-spacing: 0.14em; text-transform: uppercase; }
.choice-label {
  color: var(--wordmark-white);
  font-size: var(--t-choice);
  font-weight: var(--display);
  text-wrap: balance;
  letter-spacing: -0.015em;
  line-height: 1.1;
  transition: transform var(--d-mid) var(--ease-out);
}
.choice:hover .choice-label,
.choice:focus-visible .choice-label,
.choice.is-active .choice-label { transform: translateX(0.375rem); }
.choice--ready .choice-label { color: var(--sphere-gold); }
.choice-note { display: none; }

/* ---------- the chapters ---------- */
.chapter { position: relative; z-index: 1; }
.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-5);
  padding: var(--s-9) var(--gutter) var(--s-7);
}
.js .cover { min-height: 115svh; }
/* A shade under the words, so the brain behind them never costs legibility. */
.js .cover::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(to top, var(--base-black) 30%, var(--veil) 70%, transparent);
  pointer-events: none;
}
.cover-text { position: relative; display: grid; gap: var(--s-4); max-width: var(--measure); }
/* The counter rides with the chapter's words, top right, like the carousel's. */
.counter { position: absolute; top: 0; right: 0; }
/* Room for the counter, so a long eyebrow wraps before it instead of running
   under it; in ch, so the room grows with the text size as the counter does. */
.cover-text > .eyebrow { padding-right: calc(4ch + var(--s-4)); }
/* Where the text is large for the screen, the counter takes its own line instead. */
@media (max-width: 21.9em) {
  .counter { position: static; justify-self: end; }
  .cover-text > .eyebrow { padding-right: 0; }
}
.js .cover-text { transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 10svh), 0); }
.chapter-title {
  color: var(--wordmark-white);
  font-size: var(--t-chapter);
  font-weight: var(--display);
  text-wrap: balance;
  letter-spacing: -0.025em;
  line-height: var(--lh-display);
}
#ready .chapter-title { color: var(--sphere-gold); }

.content { position: relative; padding: var(--s-7) var(--gutter) var(--s-9); }
/* On a phone the reading panel is solid, and the brain rests behind it. */
.js .content { background: linear-gradient(to bottom, transparent, var(--base-black) 6rem); padding-top: var(--s-9); }
/* minmax(0, 1fr) lets every column shrink to a 320px phone; an auto column
   would stretch to the form fields' default width and scroll the page sideways. */
.content-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); max-width: var(--measure); }
.content-inner > p { max-width: 62ch; }
.block-title { color: var(--wordmark-white); font-size: var(--t-card); font-weight: var(--display); line-height: var(--lh-tight); text-wrap: balance; margin-top: var(--s-4); }

/* Reveals start fully visible, only a little lower, so no frame ever shows faded text. */
.js .reveal { transform: translateY(var(--s-4)); transition: transform var(--d-slow) var(--ease-out); }
.js .reveal.is-in { transform: none; }

/* The journals, floating, each with a soft shadow beneath. Swipe on a phone. */
.shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(42vw, 11rem);
  gap: var(--s-4);
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--s-4) var(--gutter) var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf li { scroll-snap-align: start; }
.shelf a { display: grid; gap: var(--s-3); text-decoration: none; }
.shelf img {
  width: 100%;
  aspect-ratio: 440 / 570;
  border-radius: var(--r-cover);
  background: var(--grain-charcoal);
  box-shadow: var(--shadow-float);
  transition: transform var(--d-mid) var(--ease-out);
}
.shelf a:hover img, .shelf a:focus-visible img { transform: translateY(-0.375rem); }
.shelf-for { font-size: var(--t-small); line-height: var(--lh-tight); }

.crisis { padding: var(--s-5); border-left: var(--rule-h) solid var(--ember-red); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--grain-charcoal); }
.crisis strong { color: var(--wordmark-white); font-weight: var(--bold); }
.crisis a, .crisis-line a, .foot-crisis a { color: var(--sphere-gold); font-weight: var(--bold); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* The four doors: panels with light spilling in from above, like a lit doorway.
   One door per row, because the first carries the keynote's price ladder. */
.doors { display: grid; gap: var(--s-4); }
.door {
  container-type: inline-size;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  /* At very large text on a phone, a long word ("Imagination") breaks rather than widening the page. */
  overflow-wrap: anywhere;
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--gold-glow) 0%, transparent 55%) top / 100% 40% no-repeat,
    var(--grain-charcoal);
}
.door-kind { font-size: var(--t-small); font-weight: var(--bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wordmark-white); }
.door-name { color: var(--wordmark-white); font-size: var(--t-card); font-weight: var(--display); line-height: var(--lh-tight); text-wrap: balance; }
.bands { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--ui-line); }
/* A price sits under its label until the door is wide enough to set them side by side. */
.bands li { display: grid; gap: var(--s-1); }
.band-group > span { color: var(--wordmark-white); font-weight: var(--bold); }
.ladder { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding-left: var(--s-4); border-left: 1px solid var(--ui-line); }
.price { color: var(--sphere-gold); font-weight: var(--bold); }
@container (min-width: 32rem) {
  .bands li:not(.band-group) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline; }
}

/* ---------- the form ---------- */
/* The form is the lit object in its chapter: a panel with the doorway glow, over a dimmed brain. */
.talk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 60% at 50% 0%, var(--gold-glow) 0%, transparent 60%) top / 100% 30% no-repeat,
    var(--grain-charcoal);
}
.talk-for { display: grid; gap: var(--s-3); }
.talk-for legend { margin-bottom: var(--s-3); color: var(--wordmark-white); font-size: var(--t-small); font-weight: var(--bold); letter-spacing: 0.14em; text-transform: uppercase; }
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--r-card);
  background: var(--base-black);
  cursor: pointer;
  transition: border-color var(--d-fast);
}
.option:has(input:checked) { border-color: var(--sphere-gold); }
.option input { flex: none; width: var(--s-5); height: var(--s-5); margin: 0; accent-color: var(--sphere-gold); }
/* Beside its radio while there is room; under it when the text is set very large. */
.option { flex-wrap: wrap; }
.option > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.option strong { color: var(--wordmark-white); font-weight: var(--bold); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.field-label { color: var(--wordmark-white); font-weight: var(--bold); }
.field-note { margin-left: var(--s-2); color: var(--soft-grey); font-size: var(--t-small); font-weight: var(--regular); }
.field input, .field textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--r-card);
  background: var(--base-black);
  color: var(--wordmark-white);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; border-color: var(--sphere-gold); }
.field [aria-invalid="true"] { border-color: var(--ember-red); }
.talk .btn { min-height: var(--cta-h); }
.talk[aria-busy="true"] .btn { cursor: progress; }
/* The field only a bot fills in. */
.trap { display: none; }
.talk-status { color: var(--wordmark-white); }
.talk-status:empty { display: none; }
.talk-status:focus { outline: none; }
.talk-status.is-error { color: var(--ember-red); }
.privacy { color: var(--soft-grey); }

/* ---------- where a form post lands when scripts are off: sent.html, not-sent.html ---------- */
.notice { display: grid; gap: var(--s-5); max-width: var(--measure); padding: var(--s-8) var(--gutter) var(--s-9); }
.notice .btn { justify-self: start; }

/* ---------- the footer: the brain folds back into the logo ---------- */
.foot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom));
  text-align: center;
}
/* The locked stacked logo, rebuilt from its two files at its own proportions:
   the sphere is 0.578 of the wordmark's width, 0.046 of that width above it.
   With the stage running, the brain folds into the sphere's box, then the
   folded brain fades out as the transparent mark fades in over it (--seal,
   set by landing.js, which dims the brain by the same amount). */
.foot-mark { display: grid; justify-items: center; gap: calc(var(--foot-w) * 0.046); width: var(--foot-w); margin-bottom: var(--s-4); }
.foot-sphere-box { position: relative; width: 57.8%; aspect-ratio: 619 / 774; }
.foot-sphere { width: 100%; height: 100%; }
.foot-wordmark { width: 100%; }
.js .foot { min-height: 100svh; align-content: end; }
.js .foot-slot { display: block; position: absolute; inset: 0; }
.js .foot-sphere { position: relative; opacity: var(--seal, 0); }
.foot-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s-3); }
.foot-dot { display: none; }
.foot-legal { font-size: var(--t-small); }

/* ---------- readout and loader ---------- */
.readout, .loader-label {
  font-size: var(--t-small);
  font-weight: var(--bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.js .readout {
  position: fixed;
  z-index: 3;
  left: var(--gutter);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  gap: var(--s-2);
  color: var(--soft-grey);
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease-out);
}
.readout-count, .readout-state { color: var(--sphere-gold); font-variant-numeric: tabular-nums; }
.readout-sep { color: var(--soft-grey); }
.js .loader {
  display: flex;
  position: fixed;
  z-index: 30;
  right: var(--gutter);
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
  align-items: baseline;
  gap: var(--s-3);
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease-out);
}
.loader-label { color: var(--soft-grey); }
.loader-count { color: var(--sphere-gold); font-size: var(--t-choice); font-weight: var(--regular); line-height: 0.8; font-variant-numeric: tabular-nums; }
body:not([data-state="loading"]) .loader { opacity: 0; }

[data-state="read"] .readout { opacity: 0; }

/* ---------- wider screens ---------- */
@media (min-width: 48rem) {

  .sound { display: block; }
  .foot-dot { display: inline; }
  .choice-note { display: block; }

  .js .hero-stage { display: block; padding: 0; }
  .js .brain-slot { position: absolute; left: 54%; top: 47%; width: min(66svh, 50vw); aspect-ratio: 1; min-height: 0; transform: translate(-50%, -50%); }
  .js .enter { position: absolute; left: 54%; top: 47%; width: min(54svh, 41vw); height: auto; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
  .question { font-size: min(var(--t-hero), 16svh); }
  .js .q { position: absolute; }
  .js .q1 { left: var(--gutter); top: calc(var(--bar-h) + 1svh); }
  /* --choices-h is the answers' own height, measured by landing.js. */
  .js .q2 { right: var(--gutter); bottom: calc(var(--s-8) + var(--choices-h, 12rem) + var(--s-6)); text-align: right; }
  .js .who { position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 1svh + min(var(--t-hero), 16svh) * 1.1 + var(--s-3)); max-width: 34ch; }
  .js .loader-wordmark { bottom: var(--s-3); width: 110%; max-width: 38rem; }
  .js .hint { position: absolute; left: 54%; bottom: calc(var(--s-8) + var(--s-5)); margin: 0; transform: translateX(-50%); white-space: nowrap; }
  .js .choices { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-8); margin: 0; }
  .choices ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
  .choice { gap: var(--s-2); padding: var(--s-4) 0 0; }
  /* A shade under the answers so the ring never sits behind their words. */
  .js .hero-stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 0;
    height: 42svh;
    background: linear-gradient(to top, var(--base-black) 58%, var(--veil) 80%, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-slow) var(--ease-out);
  }
  [data-state="choose"] .hero-stage::after { opacity: 1; }
  .js .question, .js .q, .js .who, .js .choices, .js .hint { z-index: 1; }

  .slot-cover { left: 36vw; top: 8svh; width: 62vw; height: 84svh; }
  .slot-side { left: 62vw; top: 12svh; width: 34vw; height: 76svh; }
  .js .cover { min-height: 120svh; justify-content: center; }
  .cover-text { max-width: min(var(--measure), 48vw); }
  /* Solid black behind the whole column of words, whatever the width, then a fade to the brain. */
  .js .cover::before {
    inset: 0 auto 0 0;
    width: calc(var(--gutter) + min(var(--measure), 48vw) + var(--s-9));
    height: auto;
    background: linear-gradient(to right, var(--base-black) calc(100% - var(--s-8)), transparent);
  }
  .js .content { background: none; padding-top: var(--s-7); }
  .content-inner { max-width: min(var(--measure), 48vw); }
  .talk { padding: var(--s-6) var(--s-5); }
  .shelf { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: var(--s-4) 0 var(--s-5); overflow: visible; }
  .js .readout { display: flex; }
}

/* When the text is set very large (or the screen is very short) the pinned
   question cannot hold the answers, so the hero reads straight down instead,
   with the answers always showing. 34em is 544px at the default text size. */
@media (max-height: 34em) {
  .js .hero { height: auto; }
  .js .hero-stage { position: relative; height: auto; display: grid; grid-template-rows: none; padding: calc(var(--bar-h) + var(--s-5)) var(--gutter) var(--s-7); }
  .js .hero-stage > * { position: static; grid-row: auto; transform: none; }
  .js .hero-stage::after { display: none; }
  .js .brain-slot { width: 100%; height: 50vh; min-height: 0; aspect-ratio: auto; }
  .js .enter, .js .hint, .js .press, .js .markers, .js .leaders { display: none; }
  .js .choices { visibility: visible; margin: 0; }
  .js .choices .eyebrow, .js .choices li { opacity: 1; transform: none; }
  .question { font-size: var(--t-hero); }
  .js .q { position: static; text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .cover-text, .js .reveal { transform: none; }
}

/* The tagline in the bar only where it fits on one line beside the logo and the buttons. */
@media (min-width: 64rem) {
  .bar-line { display: block; }
}