/* ace.education: page styles on top of the scrollcraft floor.
   Grammar: split stage. Two columns held in tension for the whole page,
   "as you are" on the left (oxblood ground) and "as Ace" on the right
   (near-black), resolved by scroll: the divider travels left until the Ace
   column takes the page at the close.
   Chrome: the divider itself (.deal). It carries the two side labels, the
   stage of the path (Initiate, Solver, Traveller, Ace) and the dealt hand:
   five cards threaded on the line, one per discipline, each turning face up
   under the scroll as its discipline is passed. The hand is also the nav.
   Nothing in here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */

:root {
  --sc-canvas:      #0c0809;
  --sc-surface:     #17100f;
  --sc-ink:         #ece3d2;
  --sc-ink-soft:    #ab9789;
  --sc-accent:      #c6ced8;
  --sc-accent-ink:  #0c0809;

  --sc-font-display: "Cormorant Garamond", "Cormorant", "Hoefler Text", Georgia, serif;
  --sc-font-text:    "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;

  --sc-shadow-color: 350 40% 3%;
  --sc-r-sm: 3px; --sc-r-md: 4px; --sc-r-lg: 6px;

  --ox:        #2b0a0f;                     /* the YOU ground */
  --ox-deep:   #1c0609;
  --ox-card:   #5e1019;                     /* a card's back */
  --bone:      #e9dfcd;                     /* a card's face */
  --line:      rgba(198, 206, 216, 0.24);
  --line-soft: rgba(198, 206, 216, 0.11);
  --you-ink:   #d9c7bd;
  --you-soft:  #b49a93;

  --split:  0.5;                            /* written by site.js, 0..0.5 */
  --crush:  0;                              /* 1 when the YOU side is gone */
  --hand-x: -50%;                           /* the hand's anchor on the line */
}

/* light-on-dark compensation: a touch more leading and tracking on prose */
body {
  line-height: 1.62;
  letter-spacing: 0.004em;
  font-weight: 400;
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.sc-grain { opacity: 0.055; }

/* ------------------------------------------------------------- the ground --
   Two grounds, one per side, and they hold. The split is the only thing that
   moves. On a phone the YOU blocks paint their own ground instead. */
.ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    var(--ox) 0 calc(var(--split) * 100%),
    var(--sc-canvas) calc(var(--split) * 100%) 100%);
}
.ground::after {
  /* felt: a faint diagonal weave on the oxblood only */
  content: ""; position: absolute; inset: 0; right: calc((1 - var(--split)) * 100%);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 7px);
}
main { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- labels -- */
.tag {
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft);
  margin: 0;
}
.you .tag { color: var(--you-soft); }

/* --------------------------------------------------------------- the deal --
   The divider is the chrome. Fixed, at --split of the viewport. */
.deal {
  position: fixed; top: 0; bottom: 0; left: calc(var(--split) * 100%);
  width: 0; z-index: 60;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}
.deal__line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--sc-accent); opacity: 0.55;
  box-shadow: 0 0 18px 0 rgba(198, 206, 216, 0.22);
}
.deal__side {
  position: absolute; top: 1.1rem; color: var(--sc-ink-soft);
  padding: 0.3em 0.6em; transition: opacity 240ms var(--sc-ease-out);
}
.deal__side--you { right: 0.6rem; color: var(--you-soft); background: var(--ox); }
.deal__side--ace { left: 0.6rem; color: var(--sc-accent); background: var(--sc-canvas); }
.deal__stage {
  position: absolute; top: calc(50% - 14rem); left: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center; font-weight: 500; color: var(--sc-ink);
  background: var(--sc-canvas); padding: 0.35em 0.9em; letter-spacing: 0.3em;
}
.deal__links {
  position: absolute; bottom: 1.1rem; display: flex; gap: 0; flex-direction: column; align-items: flex-start;
  left: 1rem;
}
.deal__links a { color: var(--sc-ink); text-decoration: none; transition: color 140ms var(--sc-ease-out); padding: 0.25em 0; }
.deal__links a:hover { color: var(--sc-accent); }
.deal__links a.key { color: var(--sc-accent); }
.deal__links a.key::after { content: " →"; }
/* the collapse: the YOU label goes with its side */
.deal--edge .deal__side--you { opacity: 0; }

/* the hand: five cards threaded on the line */
.hand {
  position: absolute; top: 50%; left: 0; margin: 0; padding: 0; list-style: none;
  transform: translate(var(--hand-x), -45%);
  display: grid; gap: 0.55rem;
}
.card {
  display: block; width: 2.9rem; height: 4.1rem; position: relative;
  perspective: 600px; text-decoration: none; color: inherit;
}
.card__in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--f, 0) * 180deg));
  border-radius: var(--sc-r-md);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7), var(--sc-edge);
}
.card__back, .card__face {
  position: absolute; inset: 0; border-radius: var(--sc-r-md);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card__back {
  background:
    repeating-linear-gradient(45deg, rgba(198, 206, 216, 0.16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(198, 206, 216, 0.16) 0 1px, transparent 1px 5px),
    var(--ox-card);
  box-shadow: inset 0 0 0 3px var(--ox-card), inset 0 0 0 4px rgba(233, 223, 205, 0.45);
}
.card__face {
  transform: rotateY(180deg);
  background: var(--bone); color: #130709;
  display: grid; grid-template-rows: auto 1fr auto; padding: 0.3rem 0.35rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.9rem; line-height: 1;
  letter-spacing: 0; text-transform: none;
  box-shadow: inset 0 0 0 1px rgba(19, 7, 9, 0.18);
}
.card__face svg { width: 1.1rem; height: 1.1rem; fill: currentColor; place-self: center; }
.card__face i { font-style: normal; }
.card__face em { font-style: normal; font-family: var(--sc-font-text); font-weight: 500; font-size: 0.42rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; }
.card:hover .card__in { box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--sc-accent); }
.card:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-md); }
.card.is-dealt .card__in { transform: rotateY(180deg); }

/* a page without the split (curriculum, legal): the deal sits at the edge
   with the whole hand face up as an index */
.deal--static { left: 0; }
.deal--static .deal__line { opacity: 0.35; }
.deal--static .deal__side--you { display: none; }
.deal--static .deal__stage { left: 1.1rem; }
.deal--static .hand { --hand-x: 0.9rem; }
.deal--static .card .card__in { transform: rotateY(180deg); }

/* ----------------------------------------------------------------- split -- */
.split { display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); }
.you, .ace { min-width: 0; }
.you {
  color: var(--you-ink);
  padding: var(--sc-section) 1.8rem var(--sc-section) var(--sc-gutter);
  overflow: hidden;
}
.ace { padding: var(--sc-section) var(--sc-gutter) var(--sc-section) calc(var(--sc-gutter) + 1.6rem); }
/* Content widths are fixed to what each column has at its narrowest (YOU at
   the body split of 0.26, ACE at the hero's 0.5), so the text never reflows
   while the divider travels: only the grid moves, the document height holds. */
.you__in { max-width: min(30ch, calc(26vw - var(--sc-gutter) - 1.8rem)); margin-left: auto; opacity: calc(1 - var(--crush)); }
.ace__in { max-width: min(56ch, calc(50vw - 2 * var(--sc-gutter) - 1.6rem)); }
.ace__in > * + * { margin-top: var(--sc-5); }
.ace h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-3xl); line-height: 0.96; letter-spacing: -0.015em;
  margin: var(--sc-3) 0 0; text-wrap: balance; color: var(--sc-ink);
}
.ace p { margin: 0; text-wrap: pretty; color: var(--sc-ink); font-size: var(--sc-t-base); }
.ace p.soft { color: var(--sc-ink-soft); }
.ace .pull {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.15; color: var(--sc-accent); max-width: 26ch;
  margin-top: var(--sc-7);
}
.you .say {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.15; margin: var(--sc-4) 0 0; text-wrap: pretty;
  color: var(--you-ink);
}
.you .say::before { content: "\201C"; } .you .say::after { content: "\201D"; }

/* ------------------------------------------------------------------ hero -- */
.hero { align-items: end; }
.hero .you, .hero .ace { padding-top: calc(var(--sc-section) + 1rem); padding-bottom: clamp(2.5rem, 9vh, 7rem); align-self: end; }
.hero .you__in { max-width: none; margin-left: 0; text-align: right; }
.word {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(5rem, 17vw, 15rem); line-height: 0.82; letter-spacing: -0.03em;
  margin: 0; text-transform: uppercase;
}
.word--you { color: var(--you-ink); margin-right: -0.03em; }
.word--ace { color: var(--sc-accent); margin-left: -0.05em; }
.word small {
  display: block; font-family: var(--sc-font-text); font-weight: 500;
  font-size: var(--sc-t-xs); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0.9rem 0 0 0.12em; line-height: 1;
}
.pairs { display: grid; margin-top: var(--sc-6); min-height: 4.2em; }
.pairs .pair {
  grid-area: 1 / 1; margin: 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.08; text-wrap: balance;
}
.you .pair { color: var(--you-ink); }
.ace .pair { color: var(--sc-ink); max-width: 18ch; }
.deck {
  margin: var(--sc-7) 0 0; max-width: 44ch; color: var(--sc-ink-soft);
  font-size: var(--sc-t-base); line-height: 1.55;
}
.hero .ace__in { max-width: none; }

/* --------------------------------------------------------------- reading -- */
.reading .you__in, .reading .ace__in { display: grid; gap: var(--sc-7); }
.reading .you .say { font-size: var(--sc-t-lg); }
.reading .ace p { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 34ch; }
.reading .ace .big {
  font-family: var(--sc-font-display); font-weight: 600; font-style: normal;
  font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.01em; max-width: 20ch;
  color: var(--sc-ink); margin-top: var(--sc-4);
}
.reading .ace .big em { color: var(--sc-accent); font-style: italic; }

/* ------------------------------------------------------------ disciplines -- */
.disc .ace__in { position: relative; }
.num {
  font-family: var(--sc-font-display); font-weight: 600; font-style: italic;
  font-size: clamp(7rem, 16vw, 15rem); line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--line); margin: 0 0 0 -0.06em;
  user-select: none; display: block; position: relative;
}
.num::after {
  content: attr(data-n); position: absolute; inset: 0; color: var(--sc-accent); opacity: 0.08;
  -webkit-text-stroke: 0;
}
.disc .ace h2 { margin-top: var(--sc-4); }
/* II: a short pinned act, the frame holds while three lines cross */
.space .ace__in { align-self: center; }
.lines { display: grid; min-height: 2.4em; margin-top: var(--sc-5); }
.lines p {
  grid-area: 1 / 1; margin: 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-3xl); line-height: 1; color: var(--sc-accent);
}
.space .you__in { align-self: center; }
/* III: the numeral drifts at its own rate behind the copy */
.time .num { will-change: transform; }
/* IV: the frame opens with an iris */
.frame {
  margin: var(--sc-6) 0 0; max-width: 30rem; aspect-ratio: 3 / 2;
  border: 1px solid var(--line); position: relative; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(198, 206, 216, 0.06), transparent 60%);
}
.frame::before, .frame::after { content: ""; position: absolute; }
.frame::before { left: 33%; right: 33%; top: -1px; bottom: -1px; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.frame::after { top: 33%; bottom: 33%; left: -1px; right: -1px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.frame p {
  position: relative; z-index: 1; margin: 0; padding: var(--sc-5);
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.15; color: var(--sc-ink); text-align: center; max-width: 20ch;
}
/* V: a card you can pick up */
.pickup {
  margin: var(--sc-7) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5); align-items: center;
}
.pickup .big-card {
  width: clamp(7rem, 10vw, 9rem); aspect-ratio: 5 / 7; border-radius: var(--sc-r-lg);
  background: var(--bone); color: #130709; position: relative;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9), var(--sc-edge);
  display: grid; place-items: center;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 2.6rem; line-height: 1;
}
.pickup .big-card svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.pickup .big-card i, .pickup .big-card b {
  position: absolute; font-style: normal; font-weight: 700; font-size: 1.1rem; line-height: 1;
}
.pickup .big-card i { top: 0.5rem; left: 0.6rem; }
.pickup .big-card b { bottom: 0.5rem; right: 0.6rem; transform: rotate(180deg); }
.pickup p { color: var(--sc-ink-soft); max-width: 26ch; }

/* ----------------------------------------------------------------- close -- */
.close { align-items: stretch; }
.close .you { display: grid; align-content: center; }
.close .you__in { text-align: left; margin-left: auto; }
.close .you .say { font-size: var(--sc-t-xl); }
.close .ace {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-8);
  align-content: center; align-items: center;
  padding-top: calc(var(--sc-section) * 0.6); padding-bottom: calc(var(--sc-section) * 0.6);
}
.close .ace__in { max-width: 62ch; }
.close h2 { font-size: var(--sc-t-3xl); }
.close .lede { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 46ch; font-size: var(--sc-t-base); }
.acecard {
  margin: 0; width: clamp(8rem, 13vw, 12rem); aspect-ratio: 5 / 7; border-radius: var(--sc-r-lg);
  background: var(--bone); color: #130709; position: relative; transform: rotate(-7deg);
  box-shadow: 0 36px 60px -24px rgba(0, 0, 0, 0.95), var(--sc-edge);
  display: grid; place-items: center; align-self: center;
  font-family: var(--sc-font-display); font-weight: 700;
}
.acecard > svg { width: 42%; height: auto; fill: currentColor; }
.acecard i, .acecard b { position: absolute; font-style: normal; font-size: 1.6rem; line-height: 1; display: grid; justify-items: center; gap: 0.1rem; }
.acecard i svg, .acecard b svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.acecard i { top: 0.7rem; left: 0.8rem; }
.acecard b { bottom: 0.7rem; right: 0.8rem; transform: rotate(180deg); }
.cta-line {
  margin: var(--sc-6) 0 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: var(--sc-t-lg); line-height: 1.25; color: var(--sc-ink-soft); max-width: 40ch;
}
.cta-line a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.cta-line a:hover { text-decoration-color: transparent; }
.small {
  margin: var(--sc-7) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.small a { color: var(--sc-ink); text-decoration: none; }
.small a:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------------ form -- */
.inq {
  margin: var(--sc-6) 0 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-5) var(--sc-6);
}
.inq .f { display: grid; gap: var(--sc-2); align-content: start; }
.inq .f--wide { grid-column: 1 / -1; }
.inq label {
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.inq input, .inq select, .inq textarea {
  font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.55em 0; border-radius: 0; width: 100%; outline: none;
  transition: border-color 140ms var(--sc-ease-out);
}
.inq input:focus-visible, .inq select:focus-visible, .inq textarea:focus-visible {
  border-bottom-color: var(--sc-accent); box-shadow: 0 1px 0 0 var(--sc-accent);
}
.inq ::placeholder { color: var(--sc-ink-soft); opacity: 0.7; }
.inq textarea { min-height: 6em; resize: vertical; }
.inq select {
  appearance: none; -webkit-appearance: none; padding-right: 1.6em; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23c6ced8' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 0.1em center;
}
.inq select option { background: var(--sc-surface); color: var(--sc-ink); }
.inq .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.inq__foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap;
  margin-top: var(--sc-2);
}
.inq__status {
  margin: 0; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  letter-spacing: 0.02em;
}
.inq__status[data-state="ok"] { color: var(--sc-accent); }
.inq__status[data-state="err"] { color: var(--sc-ink); }
.inq__status:not(:empty)::before { content: "♠ "; color: var(--sc-accent); }
.inq[aria-busy="true"] .btn { opacity: 0.55; pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sc-accent-ink); background: var(--sc-accent); border: 0; cursor: pointer;
  padding: 1.05em 1.5em 1em; border-radius: var(--sc-r-sm);
  transition: filter 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
  box-shadow: 0 10px 24px -12px rgba(198, 206, 216, 0.5);
}
.btn::after { content: "→"; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------- the ledger --
   The curriculum page: five rows, one per discipline, same voice.
   Legal pages share the frame. */
.legal { padding-block: calc(var(--sc-section) + 2rem) var(--sc-section); position: relative; z-index: 1; }
.legal .wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: calc(var(--sc-gutter) + 4rem) var(--sc-gutter); }
.legal h1 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-4xl); line-height: 0.92; letter-spacing: -0.02em; margin: var(--sc-4) 0 0; text-wrap: balance;
}
.legal .updated { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; }
.legal .lede { margin: var(--sc-6) 0 0; max-width: 46ch; font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.2; color: var(--sc-ink); }
.legal .prose { max-width: 66ch; margin-top: var(--sc-8); }
.legal .prose h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.1; margin: var(--sc-8) 0 var(--sc-3); }
.legal .prose p, .legal .prose li { color: var(--sc-ink-soft); text-wrap: pretty; }
.legal .prose p { margin: 0 0 var(--sc-4); }
.legal .prose strong { color: var(--sc-ink); font-weight: 500; }
.legal .prose a { color: var(--sc-accent); }
.legal .prose ul { padding-left: 1.2em; margin: 0 0 var(--sc-4); }
.legal .back { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; }
.legal .back:hover { color: var(--sc-accent); }

.ledger { margin-top: var(--sc-8); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sc-6);
  padding-block: var(--sc-7); border-bottom: 1px solid var(--line-soft);
}
.row .lbl { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-style: italic; font-size: var(--sc-t-2xl); line-height: 1; color: var(--sc-accent); }
.row h3 {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.row p { margin: 0; max-width: 46ch; color: var(--sc-ink); text-wrap: pretty; }
.row .go {
  display: inline-block; margin-top: var(--sc-4);
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sc-accent); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 0.3em;
  transition: border-color 140ms var(--sc-ease-out);
}
.row .go::after { content: " →"; }
.row .go:hover { border-color: var(--sc-accent); }

.foot-form { margin-top: var(--sc-section); padding-block: var(--sc-8) var(--sc-7); border-top: 1px solid var(--line); }
.foot-form .spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-8); align-items: start; }
.foot-form h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); line-height: 0.96; margin: 0; text-wrap: balance; }
.foot-form .lede { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); font-family: var(--sc-font-text); font-style: normal; max-width: 30ch; }
.foot-form .inq { margin-top: 0; }

/* ---------------------------------------------------------------- focus -- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- phone --
   The same grammar turned 90 degrees. YOU is a band across the top of the
   screen (oxblood felt), ACE is the ground beneath it. The divider is a
   horizontal steel line that travels UP as the reader goes down: the band
   holds --split of the viewport (0.50 at the hero, 0.26 by the last
   discipline) and is crushed to 0 across the close. Each section's YOU copy
   rides its own slab: a sticky block, clipped to the band, that slides up
   into place as its section arrives while the ACE copy scrolls beneath it.
   The hand rides the line at the right, at a size you can read; the stage
   sits on the line at the left; the two links live in a transparent bar
   across the top. Per frame only transforms, clips and paint change: the
   slabs have a fixed layout height (--band, the split at the section's
   top), so the document height holds while the line travels. */
@media (max-width: 860px) {
  :root {
    --bar: 2.75rem;                                  /* the top bar, 44px */
    --line-y: calc(var(--split) * 100svh);           /* where the line is */
    /* the felt as a 10px seamless tile: its phase is fixed to each box's
       top-left, so the ground, the bar's floor and a stuck slab (all at 0,0)
       weave as one */
    --felt:
      linear-gradient(45deg, transparent 0 46%, rgba(255, 255, 255, 0.025) 46% 54%, transparent 54%),
      linear-gradient(-45deg, transparent 0 46%, rgba(0, 0, 0, 0.12) 46% 54%, transparent 54%);
  }

  /* the ground: oxblood above the line, canvas below, felt on the oxblood */
  .ground {
    background: linear-gradient(180deg, var(--ox) 0 var(--line-y), var(--sc-canvas) var(--line-y) 100%);
  }
  .ground::after { right: 0; clip-path: inset(0 0 calc(100% - var(--line-y)) 0); background: var(--felt); background-size: 10px 10px; }

  /* the slabs */
  .act--hero  { --band: 0.5; }
  .reading    { --band: 0.46; }
  .solve      { --band: 0.42; }
  .space      { --band: 0.38; }
  .time       { --band: 0.34; }
  .dimension  { --band: 0.30; }
  .luck       { --band: 0.26; }
  .act--close { --band: 0.26; }
  .split { display: block; }
  .you {
    position: sticky; top: 0; z-index: 2;
    height: calc(var(--band, 0.26) * 100svh);
    padding: 0; overflow: visible; pointer-events: none;
    background: var(--felt) var(--ox); background-size: 10px 10px;
    clip-path: inset(0 0 calc(100% - var(--line-y)) 0);
  }
  /* the copy sits on the band's foot, clear of the cards on the line. Anchored
     with bottom, not transform: the engine owns transform on a data-sc-in. */
  .you__in {
    position: absolute; top: var(--bar); left: var(--sc-gutter); right: var(--sc-gutter);
    bottom: calc(100% - min(var(--line-y), var(--band, 0.26) * 100svh) + 2.3rem);
    display: grid; align-content: end; overflow: hidden;      /* boxed under the bar */
    max-width: none; margin: 0; opacity: 1; text-align: left;
    /* copy pressed up into the bar's foot dissolves there rather than being cut */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.4rem);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.4rem);
  }
  .you .say { font-size: var(--sc-t-lg); margin-top: var(--sc-3); }
  .ace { position: relative; z-index: 1; padding: 1.7rem var(--sc-gutter) var(--sc-8); }
  .ace__in { max-width: 62ch; }

  /* the deal: the line, the stage on it, the hand on it, the bar above */
  .deal {
    top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 100svh;
    z-index: 2;   /* above the page, under the engine's grain (z 3), so the bar's felt floor grains like the band */
    font-size: 0.62rem; letter-spacing: 0.16em; pointer-events: none;
    /* where the stage and the hand sit: on the line, never above the bar;
       as the band is crushed they settle into the bar itself */
    --rail-y: max(var(--line-y), calc(var(--bar) * 0.5 + (1 - var(--crush)) * (var(--bar) * 0.5 + 1.75rem)));
  }
  /* the bar has a floor at all times, so no copy ever meets the links: the
     band's own felt while the band is up (invisible: same tile, same phase),
     canvas from the moment the line passes under the bar */
  .deal::before, .deal::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; }
  .deal::before { height: var(--bar); background: var(--felt) var(--ox); background-size: 10px 10px; }
  .deal::after {
    height: calc(var(--bar) + 0.6rem);
    background: linear-gradient(to bottom, var(--sc-canvas) 80%, transparent);
    opacity: calc((var(--crush) - 0.8) / 0.1);
  }
  .deal__line {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; opacity: 0.7;
    transform: translate3d(0, var(--line-y), 0); will-change: transform;
    box-shadow: 0 0 16px 0 rgba(198, 206, 216, 0.3);
  }
  .deal__side { display: none; }
  .deal__stage {
    top: 0; left: var(--sc-gutter);
    transform: translate3d(0, calc(var(--rail-y) - 50%), 0); will-change: transform;
    padding: 0.45em 0.8em; letter-spacing: 0.22em; opacity: calc(1 - var(--crush));
  }
  /* the hand rides the line at the right; across the collapse it slides to
     the left and shrinks into the bar, where it stays as the index */
  .hand {
    top: 0; left: var(--sc-gutter); right: auto; pointer-events: auto;
    transform-origin: left center; will-change: transform;
    transform: translate3d(calc((1 - var(--crush)) * (100vw - 2 * var(--sc-gutter) - 100%)), calc(var(--rail-y) - 50%), 0)
               scale(calc(1 - var(--crush) * 0.38));
    display: flex; gap: 0.45rem;
  }
  .card { width: 2.3rem; height: 3.15rem; perspective: 420px; }
  .card::before { content: ""; position: absolute; inset: -0.35rem -0.22rem; }   /* the tap target */
  .card__face { padding: 0.22rem 0.2rem; font-size: 0.74rem; }
  .card__face svg { width: 0.85rem; height: 0.85rem; }
  .card__face em { font-size: 0.3rem; letter-spacing: 0.04em; }
  .card__back { box-shadow: inset 0 0 0 2px var(--ox-card), inset 0 0 0 3px rgba(233, 223, 205, 0.45); }
  .deal__links {
    top: 0; bottom: auto; left: auto; right: var(--sc-gutter); height: var(--bar);
    flex-direction: row; align-items: center; gap: 1.3rem; pointer-events: auto;
  }
  .deal__links a { display: inline-flex; align-items: center; min-height: var(--bar); padding: 0; }
  /* a page without the split: the bar, with the hand docked in it as the index */
  .deal--static { --line-y: var(--bar); --crush: 1; --rail-y: calc(var(--bar) * 0.5); }
  .deal--static .deal__line { opacity: 0.35; }

  /* the hero: YOU over ACE, each half of the screen */
  .hero { height: 100svh; }
  .hero .you { padding: 0; }
  .hero .ace {
    height: 50svh; padding: 0.8rem var(--sc-gutter) 1.4rem;
    display: grid; align-content: end; overflow: hidden;
  }
  /* as the hero stage leaves, its ACE copy would climb through the band
     before the reading slab covers it: it fades on the way out (--hero-out) */
  .hero .ace__in { max-width: none; opacity: calc(1 - var(--hero-out, 0)); }
  .word { font-size: clamp(4.2rem, 24vw, 7rem); }
  .pairs { margin-top: var(--sc-4); min-height: 3.2em; }
  .pairs .pair { font-size: var(--sc-t-xl); }
  .ace .pair { max-width: none; }
  .deck { margin-top: var(--sc-5); font-size: var(--sc-t-sm); max-width: none; }

  /* the reading */
  .reading .you__in { gap: var(--sc-3); }
  .reading .you .say { font-size: var(--sc-t-base); margin: 0; }
  .reading .ace__in { gap: var(--sc-5); }
  .reading .ace p { max-width: none; }

  /* the disciplines */
  .num { font-size: clamp(5rem, 24vw, 8rem); }
  .space .ace {
    height: calc((1 - var(--band)) * 100svh); overflow: hidden;
    display: grid; align-content: start; padding-top: 1.2rem;
  }
  .space .num { font-size: 4.2rem; }
  .lines { min-height: 2.2em; margin-top: var(--sc-4); }
  .lines p { font-size: var(--sc-t-2xl); }
  .pickup { grid-template-columns: minmax(0, 1fr); }

  /* the close: the slab is crushed to nothing, the Ace column takes the screen */
  .close .you { display: block; }
  .close .you__in { margin: 0; clip-path: none; }
  .close .ace {
    grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); align-content: start;
    padding-top: 1.4rem; padding-bottom: var(--sc-8);
  }
  .acecard { width: 6.5rem; }
  .inq { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
  .inq__foot { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: space-between; }

  /* the ledger and the legal pages under the bar and the hanging hand */
  .legal .wrap { padding-inline: var(--sc-gutter); }
  .legal { padding-top: calc(var(--bar) + 2.6rem); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); padding-block: var(--sc-6); }
  .foot-form .spread { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); }
}

/* a phone on its side, or any short phone screen: tighter type, same bones */
@media (max-width: 860px) and (max-height: 560px) {
  .word { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .word small { margin-top: 0.5rem; }
  .pairs { margin-top: var(--sc-2); min-height: 1.4em; }
  .pairs .pair { font-size: var(--sc-t-lg); }
  .deck { margin-top: var(--sc-3); font-size: var(--sc-t-xs); line-height: 1.4; }
  .hero .ace { padding-bottom: 0.9rem; }
  .space .num { display: none; }
  .space .ace h2 { margin-top: 0; font-size: var(--sc-t-2xl); }
  .space .ace p { font-size: var(--sc-t-sm); }
  .lines p { font-size: var(--sc-t-xl); }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .card__in, .btn, .deal__links a, .row .go, .deal__side { transition: none; }
}