/**
 * prolegomenon.css — letterpress design for the landing prolegomenon.
 *
 * Typography is Georgia (prose) + Arial (labels/rules). No webfonts, no CDNs:
 * every face here is a system face, so the page ships zero third-party
 * requests. See the no-external-font rule in routes/index.tsx.
 *
 * This stylesheet is self-contained — it does NOT sit on top of main.css or
 * landing.css (the neon idiom would fight the paper/ink one). It carries its
 * own reset.
 */

/* ── reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

canvas {
  display: block;
  vertical-align: middle;
}

button,
input,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

textarea {
  resize: vertical;
}

sup {
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── palette ───────────────────────────────────────────────────────────── */
:root {
  --paper: #e8ddc5;
  --paper-light: #f3ead8;
  --ink: #171715;
  --muted: #776f62;
  --saffron: #d96512;
  --cyan: #078f9a;
  --rose: #a83b5b;
  --indigo: #4d4b8b;
  --olive: #66733d;
  --ochre: #c17b22;
  --verdigris: #188a82;
  --rule: #17171557;

  /*
   * Wordmark triad, from the Nav mock: magenta / blue / gold. These are the
   * paper-header values — darkened from the source #FF3CAC / #3B82F6 / #FFD600,
   * which were drawn for a dark ground. On --paper the source gold measures
   * about 1.05:1 against the background and is effectively invisible; the
   * magenta and blue land near 2.4:1 and 2.7:1, under the 3:1 that display
   * text needs. These hold the same hues at >= 3.5:1. The footer, which is
   * ink-backed, restores the source values below.
   */
  --wm-magenta: #d4147f;
  --wm-blue: #2c6fe0;
  --wm-gold: #8a6d00;
}

.wm-a,
.wm-sa {
  color: var(--wm-magenta);
}

.wm-num {
  color: var(--wm-blue);
}

.wm-ta {
  color: var(--wm-gold);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
}

/* Paper grain. Purely decorative, sits above everything but eats no clicks. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 30% 40%, transparent 0 2px, #41301a14 3px 4px),
    linear-gradient(90deg, #ffffff1f, transparent 42%, #3d2a120d);
  background-size: 7px 7px, 100% 100%;
}

/* ── header ────────────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  margin: 0 2.5vw;
  padding: 0.6rem 0.5vw;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -0.04em;
}

.site-header .wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: inherit;
  line-height: 1.05;
}

.wordmark-glyphs {
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.wordmark-sub {
  color: var(--saffron);
  font: 600 clamp(0.52rem, 0.68vw, 0.64rem) / 1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

.site-nav a,
.eyebrow,
.enter,
.folio,
.movement-index,
.gate-eyebrow,
footer p,
footer .footer-return {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.site-nav a {
  font-size: 0.69rem;
  font-weight: 600;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--saffron);
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  align-items: center;
  gap: 6vw;
  min-height: calc(100vh - 76px);
  padding: 8vh 9vw 10vh 8vw;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero-copy {
  max-width: 790px;
  animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero-datestamp {
  max-width: 630px;
  margin: clamp(1.6rem, 3vw, 2.8rem) 0 0;
  color: var(--saffron);
  font: 600 clamp(0.6rem, 0.78vw, 0.76rem) / 1.7 Arial, Helvetica, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 1.2rem;
  color: var(--saffron);
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 700;
}

.incipit {
  max-width: 680px;
  margin: 0;
  font-size: clamp(1.7rem, 2.75vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.hero-prose {
  max-width: 620px;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.hero-prose p {
  margin: 0 0 1.1em;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
}

.hero-prose p:last-child {
  margin-bottom: 0;
}

/*
 * The incipit's initial is an illuminated Y rather than a letterform, so it
 * carries no border: the gold frame the drawing already has would only be
 * doubled by the saffron rule the typeset cap used to need. Height is set in
 * em of .incipit so the initial scales with the clamp above it — 3.2em spans
 * roughly the first three lines at line-height 1.18 — and width follows from
 * the intrinsic ratio, which the img's width/height attributes reserve before
 * the file lands.
 */
.drop-cap {
  float: left;
  height: 3.2em;
  width: auto;
  margin: 0.16em 0.18em 0 0;
}

.enter {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  color: var(--saffron);
  font-size: 0.7rem;
  font-weight: 700;
}

.enter > span {
  display: block;
  width: 76px;
  height: 1px;
  background: var(--saffron);
  transition: width 0.25s;
}

.enter b {
  font-size: 1.25rem;
  font-weight: 400;
}

.enter:hover > span,
.enter:focus-visible > span {
  width: 100px;
}

.enter:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 8px;
}

.mathematical {
  color: var(--rose);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
}

.mathematical sup {
  vertical-align: super;
  font-size: 0.62em;
}

/* ── the figure ────────────────────────────────────────────────────────── */
/*
 * desire is a straight line — a linear slope, real-valued over expectation.
 * f(x) is possibility: convex, unbounded, diverging toward the asymptote it
 * never reaches (any possible value). They meet exactly once, at habit — the
 * force-point. Left of habit desire outruns possibility; that gap is misery.
 */
.geometry {
  position: relative;
  justify-self: end;
  width: min(27vw, 360px);
  margin: 0;
  animation: draw-in 1s 0.2s both;
}

.geometry svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.fig-axis {
  stroke: var(--ink);
  stroke-width: 1.25;
  fill: var(--ink);
  opacity: 0.55;
}

.fig-desire {
  stroke: var(--rose);
  stroke-width: 1.75;
  fill: none;
}

.fig-possibility {
  stroke: var(--saffron);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.fig-asymptote {
  stroke: var(--indigo);
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
  fill: none;
  opacity: 0.75;
}

.fig-misery {
  fill: var(--rose);
  opacity: 0.09;
}

.fig-habit {
  fill: var(--paper);
  stroke: var(--cyan);
  stroke-width: 2.25;
}

.fig-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.14em;
  fill: var(--muted);
}

.fig-label-real {
  font-style: normal;
  font-size: 13px;
  fill: var(--ink);
  text-anchor: end;
}

.fig-label-x {
  fill: var(--ink);
  text-anchor: middle;
}

.fig-label-desire {
  fill: var(--rose);
  text-anchor: start;
}

.fig-label-possibility {
  fill: var(--saffron);
  text-anchor: end;
}

.fig-label-habit {
  fill: var(--cyan);
  letter-spacing: 0.18em;
}

.fig-label-misery {
  fill: var(--rose);
  text-anchor: middle;
  opacity: 0.85;
}

.fig-label-asymptote {
  font-size: 9.5px;
  fill: var(--indigo);
  text-anchor: middle;
  opacity: 0.9;
}

/* ── quaternary spheroid (canvas island) ───────────────────────────────── */
.quaternary-spheroid {
  position: absolute;
  right: 7.2vw;
  bottom: 3.4vh;
  width: 268px;
  height: 268px;
  opacity: 1;
  cursor: crosshair;
  touch-action: none;
  will-change: transform;
  filter: saturate(1.12);
  transform: rotate(-8deg);
  animation: spheroid-enter 1.15s 0.55s both;
}

.quaternary-spheroid canvas {
  width: 100%;
  height: 100%;
}

/*
 * The sigil is anchored to the hero, not to the molecule. The molecule drifts
 * and tumbles beneath it; IV stays fixed and perpendicular to the page.
 */
.spheroid-sigil {
  position: absolute;
  right: 6.4vw;
  bottom: 2.2vh;
  color: var(--cyan);
  font: 600 0.62rem / 1 Arial, sans-serif;
  letter-spacing: 0.18em;
  text-shadow: 0 0 8px #078f9a47;
}

/* ── folio (vertical contents rail) ────────────────────────────────────── */
/*
 * The track runs the height of <main> below the header — hero and gate, not the
 * footer — and the folio rides it on position: sticky, so it follows the reader
 * down the page with no script at all. islands/Folio.tsx only moves the marker.
 *
 * The folio is sized to the first screen's hero (88% of it, as the old in-hero
 * folio was) and sticks centred in the viewport once the header scrolls away.
 */
.folio-host {
  position: relative;
}

.folio-track {
  position: absolute;
  top: calc(76px + 6vh);
  right: 2.9vw;
  bottom: 6vh;
}

.folio {
  position: sticky;
  top: calc(6vh + 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: calc(88vh - 76px);
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
  font-size: 0.6rem;
}

.folio ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.folio li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.folio a {
  writing-mode: vertical-rl;
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.folio a[aria-current] {
  color: var(--ink);
}

.folio a:hover,
.folio a:focus-visible {
  color: var(--saffron);
}

.folio i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--saffron);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.folio .is-current i {
  opacity: 1;
}

.folio b {
  font-weight: 400;
  line-height: 2.2;
  text-align: center;
}

/* ── the sequence ──────────────────────────────────────────────────────── */
.sequence {
  background: var(--paper-light);
}

.epigraph {
  width: min(790px, 84vw);
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(1rem, 3vw, 3rem);
  color: #362f28;
}

.epigraph h2 {
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  color: var(--ink);
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.epigraph blockquote {
  margin: 0;
}

.epigraph blockquote p {
  margin: 0 0 1.5em;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-style: italic;
  line-height: 1.6;
}

.epigraph figcaption {
  margin-top: 2rem;
  color: var(--saffron);
  font: 600 0.64rem / 1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.movement {
  width: min(1040px, 84vw);
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 9rem) 0 0;
}

.movement p {
  width: min(790px, 100%);
  margin: 0 auto;
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.movement p::first-line {
  color: #362f28;
}

.prose-paragraph {
  display: block;
}

.prose-paragraph + .prose-paragraph {
  margin-top: 1.45em;
}

.first-movement > .prose-paragraph:first-child::first-letter {
  float: left;
  padding: 0.12em 0.11em 0 0;
  color: var(--saffron);
  font-size: 5.7em;
  line-height: 0.67;
}

.paragraph-break {
  display: block;
  height: 1.5em;
}

.question,
.answer {
  display: block;
}

.question {
  color: var(--muted);
  font-style: italic;
}

.answer {
  margin-top: 0.2em;
  color: var(--rose);
  font-size: 1.15em;
}

.inline-quotation {
  color: #4f473d;
  font-style: italic;
}

.movement-index {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.2rem;
  color: var(--muted);
  font-size: 0.62rem;
}

.movement-index i {
  width: 74px;
  height: 1px;
  background: var(--rule);
}

.section-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(4rem, 8vw, 7rem) 0 0;
  color: var(--saffron);
}

.section-break i {
  display: block;
  width: min(170px, 23vw);
  height: 1px;
  background: var(--rule);
}

.section-break span {
  font-size: 0.85rem;
}

.movement:last-of-type {
  padding-bottom: clamp(6rem, 12vw, 11rem);
}

/* ── the gate — where the prolegomenon terminates ──────────────────────── */
.gate-section {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(6rem, 12vw, 10rem);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.gate-content {
  width: min(790px, 84vw);
  margin: 0 auto;
}

.gate-eyebrow {
  margin-bottom: 1.2rem;
  color: var(--saffron);
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 700;
}

.gate-title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.gate-description {
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  color: #4f473d;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.65;
}

.form-group {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.form-group label {
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.gate-form textarea,
.gate-form input[type='email'],
.gate-form input.gate-captcha-input,
.gate-form input.gate-riddle-input {
  display: block;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--paper-light);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gate-form textarea::placeholder,
.gate-form input[type='email']::placeholder,
.gate-form input.gate-captcha-input::placeholder,
.gate-form input.gate-riddle-input::placeholder {
  color: var(--muted);
  font-style: italic;
}

.gate-form textarea:focus,
.gate-form input[type='email']:focus,
.gate-form input.gate-captcha-input:focus,
.gate-form input.gate-riddle-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px #078f9a1a;
}

.accessibility-note,
.privacy-notice {
  margin-top: 0.9rem;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  line-height: 1.65;
}

.accessibility-note a,
.privacy-notice a {
  color: var(--saffron);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.15rem 2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.gate-submit:hover {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--paper-light);
}

.gate-submit:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/*
 * The wearable invitation (/w/, /e/ -- components/WearableInvitation.tsx) is
 * drawn as a gate that stands alone: no rule above it, since it opens straight
 * under the site header, and prose links marked the way the gate's own notes
 * mark theirs. Its begin is an <a class='gate-submit'>, which the rule above
 * already draws as the landing's button.
 */
.invitation {
  border-top: 0;
}

.invitation .gate-description {
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.invitation .hero-prose {
  max-width: none;
  margin-top: 0;
}

.invitation .hero-prose a,
.invitation .gate-description a {
  color: var(--saffron);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * The illuminated H of Hi / Hola: an initial set into the greeting, the way
 * .drop-cap sets the Y into the incipit. Sized off the title's own em so it
 * scales with the clamp above; the negative vertical-align seats the painted
 * letter's foot, not the image box, on the text baseline.
 */
.invitation .greeting-initial {
  display: inline-block;
  height: 1.9em;
  width: auto;
  margin-right: -0.06em;
  vertical-align: -0.26em;
}

/*
 * The French no-parking sign (components/NoParkingSign.tsx), shown only to
 * visitors greeted with Bonjour: posted to the right of the greeting like a
 * sign on the door, slightly askew.
 */
.invitation .no-parking-sign {
  float: right;
  width: clamp(88px, 13vw, 150px);
  height: auto;
  margin: -0.5rem 0 1rem 1.5rem;
  transform: rotate(4deg);
}

.invitation .gate-submit {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.gate-error {
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--rose);
  background: #a83b5b12;
  color: var(--rose);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
}

/*
 * The image challenge (components/GateForm.tsx, lib/captcha.ts). The bitmap
 * is drawn at 1:1 and scaled up here; pixelated keeps its blocks crisp rather
 * than letting the browser blur digits into one another.
 */
.gate-captcha-image {
  display: block;
  width: min(360px, 100%);
  height: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--rule);
  image-rendering: pixelated;
}

/*
 * The challenge is a fieldset (digits OR question); drawn without the
 * browser's box so it reads as one more group of the form, its legend set
 * like the other labels.
 */
.gate-challenge {
  border: 0;
  padding: 0;
  min-width: 0;
}

.gate-challenge legend {
  margin-bottom: 1rem;
  padding: 0;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.gate-challenge label {
  font-size: 1.05rem;
}

.gate-challenge .gate-riddle-label {
  margin-top: 1.8rem;
}

.gate-form input.gate-riddle-input {
  max-width: 24rem;
}

.gate-form input.gate-captcha-input {
  max-width: 14rem;
  font-family: 'Courier New', monospace;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
}

/*
 * The honeypot. Moved off-screen rather than display:none, which some form
 * scripts check for; hidden from assistive technology by aria-hidden on the
 * wrapper and from the tab order by tabindex=-1 on the field.
 */
.gate-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── completion (/completion) ──────────────────────────────────────────── */
/*
 * The copy offer and the way onward reuse the gate's section, measure and
 * type; the consent form is drawn in the gate form's idiom, its two buttons
 * the gate's submit — ink for yes, outline for no.
 */
.completion-offer {
  border-top: 0;
}

.completion-quote {
  margin-inline: 0;
}

.completion-quote p {
  margin: 0;
}

.completion-quote cite {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
  font: normal 0.72rem / 1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.completion-status {
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--cyan);
  background: #078f9a12;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
}

.completion-status.is-problem {
  border-left-color: var(--rose);
  background: #a83b5b12;
  color: var(--rose);
}

.consent-question {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.pw-panel {
  margin-bottom: 1.75rem;
}

.pw-panel input[type='password'] {
  display: block;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--paper-light);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pw-panel input[type='password']::placeholder {
  color: var(--muted);
  font-style: italic;
}

.pw-panel input[type='password']:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px #078f9a1a;
}

.pw-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  line-height: 1.65;
}

.consent-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.consent-btn {
  padding: 1.15rem 2rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.consent-btn-yes {
  background: var(--ink);
  color: var(--paper);
}

.consent-btn-no {
  background: transparent;
  color: var(--ink);
}

.consent-btn:hover {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--paper-light);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* The essay: .movement's measure and type, with room between its paragraphs. */
.essay p + p {
  margin-top: 1.1em;
}

.essay .section-break {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.essay-threshold {
  color: var(--saffron);
}

.essay-threshold img {
  width: auto;
  height: 1.6em;
  vertical-align: middle;
}

.essay-kicker {
  width: min(790px, 100%);
  margin: 0.4em auto 0.6em;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.essay-dedication {
  color: var(--muted);
  font-size: 0.8em !important;
}

.essay-close {
  font-style: italic;
}

.completion-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0 0 2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.completion-links a,
.completion-newsletter a {
  color: var(--saffron);
  text-underline-offset: 3px;
}

.completion-newsletter {
  margin: 0;
  color: #4f473d;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-style: italic;
  line-height: 1.65;
}

/* ── footer ────────────────────────────────────────────────────────────── */
footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 2rem;
  min-height: 260px;
  padding: 4rem 6vw;
  background: var(--ink);
  color: var(--paper);

  /* Ink ground: the source triad from the Nav mock, undarkened. */
  --wm-magenta: #ff3cac;
  --wm-blue: #3b82f6;
  --wm-gold: #ffd600;
}

footer p {
  margin: 0;
  color: #bfb5a4;
  font-size: 0.58rem;
  text-align: center;
  text-transform: lowercase;
}

footer a {
  color: #dca064;
}

footer .footer-links {
  display: flex;
  gap: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

footer .footer-return {
  font-size: 0.58rem;
  text-align: right;
  text-transform: lowercase;
}

/* Opt a proper noun back out of the footer's lowercasing. */
.keep-case {
  text-transform: none;
}

/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes draw-in {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes spheroid-enter {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(-8deg) scale(0.92);
  }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .site-header {
    height: 68px;
  }

  /*
   * A `.site-nav a:not(:first-child) { display: none }` rule lived here, from a
   * nav whose links were bare <a> children of .site-nav. They are <li><a> inside
   * .nav-list now, so it stopped hiding links some time ago — and once the
   * wordmark became an <a> it matched that instead, deleting the wordmark on
   * every viewport under 900px. Removed rather than rescoped: the disclosure is
   * what handles narrow widths now.
   */

  .hero {
    display: block;
    min-height: calc(100svh - 68px);
    padding: 13vh 8vw 10vh;
  }

  .hero-copy {
    max-width: 650px;
  }

  .geometry {
    width: 260px;
    margin: 8vh 0 0 auto;
    opacity: 0.82;
  }

  .quaternary-spheroid {
    right: 7vw;
    bottom: 2.5vh;
    width: 190px;
    height: 190px;
    transform-origin: 100% 100%;
  }

  .folio-track {
    display: none;
  }

  footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  footer p,
  footer .footer-return {
    text-align: left;
  }
}

@media (width <= 580px) {
  .wordmark {
    font-size: 1.2rem;
  }

  /*
   * The nav used to be hidden outright here, because a row of four links had
   * nowhere to go on a phone. It collapses to a single toggle now, so it stays
   * — and it must, since the wordmark lives inside it.
   */
  .hero {
    padding: 10vh 7vw 8vh;
  }

  .incipit {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .drop-cap {
    height: 2.7em;
  }

  .enter {
    margin-top: 3rem;
  }

  .geometry {
    width: 220px;
  }

  .quaternary-spheroid {
    position: relative;
    right: auto;
    bottom: auto;
    width: 172px;
    height: 172px;
    margin: -4.5rem 0 1rem auto;
  }

  .movement {
    width: 86vw;
  }

  .movement p {
    font-size: 1.22rem;
    line-height: 1.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Prose pages (/about, /shop, /about/*) — rendered via components/PageShell.tsx
   inside .movement, so paragraph measure and typography are already inherited.
   These rules only cover structures the landing page has no equivalent for.
   All colour comes from the tokens above so the pages stay in the same palette.
   --------------------------------------------------------------------------- */

.about-header {
  width: min(790px, 100%);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}

/*
 * The page's name is set as the landing's eyebrow ("PROLEGOMENON:"), and the
 * line beneath it and the .lead take the hero-title's large, tight Georgia.
 * Headings used to inherit the reset's `font-size: inherit` -- the body's
 * 16px -- under prose set at up to 1.95rem, so they read smaller than the
 * text they introduce.
 */
.about-header h1,
.about-content h2 {
  color: var(--saffron);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.62rem, 0.76vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.about-header h1 {
  margin-bottom: 1.2rem;
}

.about-header p {
  color: var(--muted);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.about-content .lead {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/*
 * Section labels sit on the prose column, not on .movement's wider edge.
 * Every h2 in .about-content, .subtle or not: the plain ones were just as
 * tiny and just as out-dented. The top margin is modest because an Ornament
 * usually precedes one and already carries the section's air.
 */
.about-content h2 {
  width: min(790px, 100%);
  margin: clamp(2.5rem, 5vw, 4rem) auto 1.2rem;
}

/*
 * .movement p darkens every paragraph's first line; on these display-size
 * lines that split one sentence into two greys.
 */
.about-header p::first-line,
.about-content .lead::first-line {
  color: inherit;
}

/* Sub-heads (privacy's, the shop's titles), a step above the prose size. */
.about-content h3 {
  width: min(790px, 100%);
  margin: 1.6em auto 0.4em;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/*
 * Paragraphs apart, as .hero-prose sets them; .movement p zeroes margins, so
 * the prose ran together. Direct children only: a .shop-item's meta, blurb
 * and links are one entry and stay tight.
 */
.about-content > p + p {
  margin-top: 1.1em;
}

/* A label straight over a sub-head (privacy) needs no second gap. */
.about-content h2 + h3 {
  margin-top: 0;
}

.about-links {
  width: min(790px, 100%);
  margin: 0 auto;
  padding-left: 1.15em;
}

.about-links li + li {
  margin-top: 0.6em;
}

/* Privacy ------------------------------------------------------------------ */

/*
 * Replaces the .highlight-box the page carried under western-theme.css. The
 * saffron rule is the same device .shop-disclosure uses, so the two pages
 * mark an aside the same way.
 */
.callout {
  border-left: 2px solid var(--saffron);
  padding-left: 1em;
}

.policy-revised {
  margin-top: 2rem;
  color: var(--muted);
  font-style: italic;
}

/* Gift shop ---------------------------------------------------------------- */

.shop-disclosure {
  border-left: 2px solid var(--saffron);
  padding-left: 1em;
  color: var(--muted);
  font-size: 0.95em;
}

.shop-item {
  width: min(790px, 100%);
  margin: 0 auto;
  padding: 1.4em 0;
  border-bottom: 1px solid var(--rule);
}

.shop-item h3 {
  margin: 0 0 0.25em;
}

/* The mockups are background-removed cutouts, so a garment sits directly on
   the paper ground — no plate, no frame. Views are laid out two ways:

   one view   → fixed column beside the copy (.shop-item--illustrated)
   two or more → gallery spanning the measure, copy beneath (--gallery), so
                 front and back stay large enough to compare.

   Views do not share an aspect ratio, so the row aligns on its top edge and
   each figure keeps its own height rather than being stretched to match. */
.shop-item--illustrated {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
}

.shop-body {
  flex: 1 1 auto;
  min-width: 0;
}

.shop-figures {
  display: flex;
  gap: 1em;
  align-items: flex-start;
}

.shop-item--illustrated .shop-figures {
  flex: 0 0 280px;
  max-width: 280px;
}

.shop-item--gallery .shop-figures {
  margin-bottom: 1.3em;
}

/* Front and back are shot at different ratios. Containing both in a box of the
   taller ratio equalises their heights, so the captions share a baseline and
   the two garments read at one scale. `contain` letterboxes rather than crops,
   and the slack is transparent against the paper. */
.shop-item--gallery .shop-figure img {
  aspect-ratio: 560 / 667;
  object-fit: contain;
}

.shop-figure {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  line-height: 0;
}

.shop-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.shop-figure figcaption {
  margin-top: 0.5em;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .shop-item--illustrated {
    display: block;
  }

  .shop-item--illustrated .shop-figures {
    max-width: min(320px, 100%);
    margin: 0 auto 1.2em;
  }
}

.shop-meta {
  color: var(--muted);
  font-size: 0.92em;
  font-style: italic;
}

/* Lead time and the state of the artwork — sits between the price and the Buy
   button so it is read before paying, not after. Quieter than the affiliate
   disclosure, which is a legal obligation rather than a courtesy. */
.shop-caveat {
  width: min(52ch, 100%);
  margin-top: 0.7em;
  border-left: 1px solid var(--rule);
  padding-left: 0.9em;
  color: var(--muted);
  font-size: 0.86em;
  line-height: 1.5;
}

.shop-links a {
  color: var(--cyan);
}

.shop-links a:hover {
  color: var(--saffron);
}

/* Support / tip block on /about ---------------------------------------
   The Zcash unified address is 178 characters; without an explicit wrap and a
   monospace face it renders as one unbroken line that blows out the layout on
   every viewport. Everything below is built from the tokens above. */

.about-header-image {
  display: block;
  width: min(420px, 100%);
  height: auto;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--rule);
}

.support-section {
  width: min(790px, 100%);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--paper-light);
  border: 1px solid var(--rule);
}

.support-header h3 {
  margin: 0 0 0.4em;
}

.support-header p {
  margin: 0 0 1.5em;
  color: var(--muted);
}

.crypto-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--saffron);
}

.crypto-icon {
  font-size: 0.9rem;
}

.address-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.crypto-address {
  flex: 1 1 22rem;
  min-width: 0;
  padding: 0.7em 0.85em;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink);
  /* the address has no spaces — force it to break rather than overflow */
  overflow-wrap: anywhere;
  word-break: break-all;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6em 1em;
  background: transparent;
  border: 1px solid var(--saffron);
  color: var(--saffron);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.copy-btn:hover,
.copy-btn:focus-visible {
  background: var(--saffron);
  color: var(--paper-light);
}

@media (max-width: 34rem) {
  .address-container {
    flex-direction: column;
  }

  .copy-btn {
    align-self: flex-start;
  }
}

.crypto-support {
  margin-top: 1.25rem;
}

.copy-text {
  white-space: nowrap;
}

/* Buttons carried over from the previous stylesheet (the shop's Buy links) */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65em 1.4em;
  border: 1px solid var(--saffron);
  color: var(--saffron);
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--saffron);
  color: var(--paper-light);
}

.btn-primary {
  background: var(--saffron);
  color: var(--paper-light);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}