/* ============================================================================
   dean.school — scenes
   Seven acts. The desk is the constant; the morning is what moves.
   ========================================================================= */

/* ==========================================================================
   ACT 1 — The desk behind the promise.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* The desk sits to the right and runs off the edge: the visitor is looking at
   software from the first frame, not at a picture of software. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__field .desk {
  position: absolute;
  left: 39%;
  top: 50%;
  width: min(1120px, 70vw);
  transform: translateY(-46%);
  opacity: 0.92;
  transition: opacity 1.2s var(--ease-enter), transform 1.2s var(--ease-enter);
}
/* The decision is the hook, so it must not be cropped mid-sentence. */
.hero__field .split { grid-template-columns: 1.15fr 1fr; }
.hero.is-seated .hero__field .desk {
  opacity: 0.55;
  transform: translateY(-52%) scale(1.03);
}

/* Scrim protects the reading column only, so the desk keeps its presence. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg,
      var(--ink) 0%, var(--ink) 33%,
      rgba(10, 11, 10, 0.9) 44%,
      rgba(10, 11, 10, 0.46) 58%,
      rgba(10, 11, 10, 0.12) 74%,
      transparent 88%),
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 74%, var(--ink) 100%);
}

.hero__say {
  position: relative;
  width: 100%;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(6rem, 13vh, 9rem);
}

/* Constrained so the promise never crosses into the desk. */
.hero__say > * { max-width: min(46%, 40rem); }
@media (max-width: 1099px) { .hero__say > * { max-width: min(72%, 34rem); } }
@media (max-width: 767px) { .hero__say > * { max-width: 100%; } }

.hero h1 { font-size: clamp(2.75rem, 5.6vw, 5.75rem); }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__eyebrow .t-micro { letter-spacing: 0.22em; }

.hero h1 { max-width: 15ch; }
.hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.hero__lead { margin-top: clamp(1.25rem, 2.6vh, 2rem); max-width: 40ch; }

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.4vh, 2.75rem);
}

.hero__foot {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hero__foot .fict { margin-right: auto; }

.cue {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-state);
}
.cue:hover { color: var(--chalk); }
.cue i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--brass), transparent);
  animation: drop 2.4s var(--ease-state) infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(26px); opacity: 0; }
}

/* ==========================================================================
   ACT 2 — 07:12 / 07:48 / 08:03. The morning arrives at a pinned desk.
   ========================================================================== */

.day { position: relative; padding-block: clamp(4rem, 10vh, 8rem) 0; }

.day__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 1040px) {
  /* No align-items:start here. The stage must inherit the full row height or
     the sticky desk runs out of travel and abandons the last beat. */
  .day__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}

/* The stage holds the desk and stays put while the beats move past it. */
.day__stage { position: relative; order: -1; height: 100%; }
@media (min-width: 1040px) { .day__stage { order: 0; } }

.day__stick {
  position: sticky;
  top: clamp(4.5rem, 9vh, 6.5rem);
}

.day__beats { display: flex; flex-direction: column; }

.beat {
  padding-block: clamp(3rem, 12vh, 9rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.beat:first-child { padding-top: clamp(1rem, 4vh, 3rem); }

.beat__time {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--chalk-faint);
  transition: color var(--dur-slow) var(--ease-state);
}
.beat.is-live .beat__time { color: var(--brass-lift); }
.beat__time small {
  font-family: var(--mono);
  font-size: var(--t-nano);
  font-weight: 450;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

.beat h2, .beat h3 { max-width: 17ch; }
.beat h3 { font-size: clamp(1.875rem, 3.6vw, 3.25rem); }
.beat p { max-width: 40ch; color: var(--chalk-dim); }
.beat__note {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--chalk-mute);
  padding-left: 1rem;
  border-left: 1px solid var(--brass);
  line-height: 1.75;
}

/* ==========================================================================
   ACT 3 — 08:12. The morning breaks. The one moment that asks for a human.
   ========================================================================== */

.brk {
  position: relative;
  padding-block: clamp(6rem, 16vh, 12rem);
  border-top: 1px solid var(--hair);
  margin-top: clamp(4rem, 10vh, 8rem);
  background:
    radial-gradient(120% 68% at 50% 0%, rgba(208, 128, 70, 0.075), transparent 62%);
}

.brk__say { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.brk__say .beat__time { margin-bottom: 1.25rem; color: var(--alert); }
.brk__say h2 { margin-bottom: 1.25rem; }

.brk__work {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}
@media (min-width: 1040px) { .brk__work { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.brk__aside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: clamp(4.5rem, 9vh, 6.5rem); }
@media (max-width: 1039px) { .brk__aside { position: static; } }

.brk__steps { display: flex; flex-direction: column; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
.brk__step {
  background: var(--ink);
  padding: 0.875rem 0;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.875rem;
  align-items: start;
  transition: opacity var(--dur-mid) var(--ease-state);
  opacity: 0.4;
}
.brk__step.is-on { opacity: 1; }
.brk__step em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-nano);
  color: var(--chalk-faint);
  padding-top: 0.1875rem;
  letter-spacing: 0.08em;
}
.brk__step.is-on em { color: var(--brass-lift); }
.brk__step b { display: block; font-size: 0.9375rem; font-weight: 520; letter-spacing: -0.016em; }
.brk__step span { display: block; font-size: 0.8125rem; color: var(--chalk-mute); margin-top: 0.1875rem; }

/* The change under review, shown whole. */
.change { display: flex; flex-direction: column; gap: 1rem; }

.change__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair);
}
.change__bar h3 { font-size: 1.0625rem; font-weight: 550; letter-spacing: -0.022em; }
.change__bar .chip { margin-left: auto; }

.change__msgs { display: flex; flex-direction: column; gap: 0.5rem; }
.msg {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6875rem 0.875rem;
  border-radius: 10px;
  background: rgba(244, 241, 232, 0.032);
  border: 1px solid var(--hair);
  font-size: 0.8125rem;
}
.msg em { font-style: normal; font-family: var(--mono); font-size: var(--t-nano); color: var(--chalk-faint); letter-spacing: 0.1em; text-transform: uppercase; }
.msg b { font-weight: 500; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.change__acts {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
}
.change__acts .mute { font-size: var(--t-micro); margin-left: auto; }

/* Outcome swaps in place of the review panel; never a half-state. */
.outcome { display: none; flex-direction: column; gap: 1rem; }
.brk[data-state='done'] .change__review,
.brk[data-state='declined'] .change__review { display: none; }
.brk[data-state='done'] .outcome--done,
.brk[data-state='declined'] .outcome--declined { display: flex; }

/* ==========================================================================
   ACT 4 — Breadth. Proof it is not a one-moment demo.
   ========================================================================== */

.span { position: relative; padding-block: clamp(5rem, 12vh, 9rem); overflow: hidden; }

.span__say { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.span__say h2 { margin-bottom: 1rem; }

/* The chapter rail. Moves with scroll; also fully operable by control. */
.rail-wrap { position: relative; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.rail-wrap::before,
.rail-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 8vw, 7rem);
  z-index: 2;
  pointer-events: none;
}
.rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.rail-wrap::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.chapters {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-state);
}
.chapters li { flex: none; }

.chapters button {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  font-weight: 550;
  letter-spacing: -0.038em;
  line-height: 1;
  white-space: nowrap;
  color: var(--chalk-faint);
  transition: color var(--dur-mid) var(--ease-state);
}
.chapters button:hover { color: var(--chalk-dim); }
.chapters [aria-selected='true'] button { color: var(--chalk); }
.chapters [aria-selected='true'] button::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--brass);
  border-radius: 2px;
  animation: mark var(--dur-slow) var(--ease-enter);
}
@keyframes mark { from { transform: scaleX(0); transform-origin: left; } }

.rail-ctl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}
.rail-ctl__pos { font-family: var(--mono); font-size: var(--t-micro); color: var(--chalk-mute); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.rail-ctl__spacer { flex: 1; }

.nudge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--chalk);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state);
}
.nudge:hover { background: rgba(244, 241, 232, 0.07); }
.nudge:active { transform: scale(0.94); }
.nudge:disabled { opacity: 0.3; cursor: default; }
.nudge svg { width: 14px; height: 14px; }

/* The wall of capability for the focused chapter. */
.wall {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}
@media (min-width: 900px) { .wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

.wall__lede h3 { margin-bottom: 0.875rem; }
.wall__terms { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: 1.25rem; }
.wall__terms li {
  padding: 0.3125rem 0.6875rem;
  border-radius: 7px;
  border: 1px solid var(--hair);
  background: rgba(244, 241, 232, 0.028);
  font-size: 0.8125rem;
  color: var(--chalk-dim);
  letter-spacing: -0.008em;
}

.flow { display: flex; flex-direction: column; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-panel); overflow: hidden; }
.flow li { background: var(--ink-raise); padding: 0.9375rem 1.125rem; display: grid; grid-template-columns: 22px 1fr; gap: 0.875rem; align-items: baseline; }
.flow em { font-style: normal; font-family: var(--mono); font-size: var(--t-nano); color: var(--brass-lift); letter-spacing: 0.06em; }
.flow b { display: block; font-size: 0.9375rem; font-weight: 520; letter-spacing: -0.016em; }
.flow span { display: block; font-size: 0.8125rem; color: var(--chalk-mute); margin-top: 0.25rem; }

/* Fades the swap so a chapter change reads as one motion, not a flicker. */
.wall.is-swapping { opacity: 0; transform: translateY(0.5rem); }
.wall { transition: opacity var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state); }

/* ==========================================================================
   ACT 5 — 09:30. The day is running. The only marketing on the page.
   ========================================================================== */

.settle {
  background: var(--paper);
  color: var(--paper-ink);
  padding-block: clamp(5rem, 13vh, 10rem);
}
.settle .t-micro { color: var(--paper-mute); }
.settle .fict { color: var(--paper-mute); }

.settle__head { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-bottom: clamp(3rem, 7vh, 5rem); }
.settle__head .beat__time { color: var(--paper-mute); }

.names { display: grid; grid-template-columns: 1fr; }
.name {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 3.4vh, 2.5rem);
  border-top: 1px solid var(--paper-hair);
  align-items: baseline;
}
@media (min-width: 860px) { .name { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.name:last-child { border-bottom: 1px solid var(--paper-hair); }
.name h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.625rem);
  font-weight: 550;
  letter-spacing: -0.034em;
  line-height: 1.02;
}
.name p { color: var(--paper-dim); max-width: 44ch; }

/* ==========================================================================
   ACT 6 — Horizon. One change reaching the rest of the family.
   ========================================================================== */

.horizon { padding-block: clamp(5rem, 13vh, 10rem); }
.horizon__say { max-width: 44rem; margin-bottom: clamp(3rem, 7vh, 5rem); }

.thread {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-shell);
  overflow: hidden;
}
@media (min-width: 860px) { .thread { grid-template-columns: repeat(3, 1fr); } }

.node {
  background: var(--ink-raise);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 190px;
  position: relative;
}
.node h3 { font-size: 1.125rem; font-weight: 560; letter-spacing: -0.024em; }
.node p { font-size: 0.9375rem; color: var(--chalk-mute); }
.node__state { margin-top: auto; }

/* The brass thread only appears once the change has been sent through it. */
.node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-state);
  transition-delay: var(--thread-delay, 0ms);
}
.thread.is-through .node::before { transform: scaleX(1); }

/* ==========================================================================
   ACT 7 — The invitation.
   ========================================================================== */

.invite { padding-block: clamp(5rem, 13vh, 10rem); border-top: 1px solid var(--hair); }

.invite__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 960px) { .invite__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } }

.invite h2 { margin-bottom: 1.25rem; }

.form { display: flex; flex-direction: column; gap: 1.125rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: var(--t-small); font-weight: 500; letter-spacing: -0.01em; }
.field input {
  min-height: 52px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hair-strong);
  background: rgba(244, 241, 232, 0.038);
  color: var(--chalk);
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  transition: border-color var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state);
}
.field input::placeholder { color: var(--chalk-faint); }
.field input:hover { background: rgba(244, 241, 232, 0.055); }
.field input:focus { border-color: var(--brass); background: rgba(244, 241, 232, 0.055); }
.field__help { font-size: var(--t-micro); color: var(--chalk-mute); }
.field__err { font-size: var(--t-micro); color: var(--alert); display: none; }
.field.is-bad input { border-color: var(--alert); }
.field.is-bad .field__err { display: block; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.consent input { width: 20px; height: 20px; margin-top: 0.1875rem; accent-color: var(--brass); }
.consent span { font-size: var(--t-micro); color: var(--chalk-mute); line-height: 1.6; }
.consent a { color: var(--chalk-dim); }

/* Success resolves in place. The form is replaced, not stacked beneath. */
.invite[data-state='sent'] .form { display: none; }
.sent { display: none; flex-direction: column; gap: 1.25rem; }
.invite[data-state='sent'] .sent { display: flex; }
.sent__mark {
  width: 46px;
  height: 46px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  background: var(--signal-wash);
  border: 1px solid rgba(111, 156, 128, 0.3);
  color: var(--signal);
}
.sent__mark svg { width: 18px; height: 18px; }
.sent__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { border-top: 1px solid var(--hair); padding-block: clamp(2.5rem, 6vh, 4rem); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: baseline; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
.foot a { color: var(--chalk-mute); text-decoration: none; font-size: var(--t-small); transition: color var(--dur-fast) var(--ease-state); }
.foot a:hover { color: var(--chalk); }
.foot__fam { display: flex; gap: 1.5rem; }
.foot__fam span { font-size: var(--t-small); color: var(--chalk-faint); }
.foot__legal { width: 100%; font-size: var(--t-micro); color: var(--chalk-faint); max-width: 62ch; line-height: 1.7; }

/* ==========================================================================
   Small screens. Asymmetry collapses; nothing is lost.
   ========================================================================== */

@media (max-width: 1039px) {
  .day__stick { position: sticky; top: clamp(4rem, 8vh, 5.5rem); }
  .day__stage { margin-bottom: 1rem; }
}

/* Tablet: the desk drops behind the promise and dims to keep the type legible. */
@media (max-width: 1099px) {
  .hero__field .desk { left: 34%; width: min(1000px, 96vw); opacity: 0.5; }
  .hero__scrim {
    background:
      linear-gradient(96deg, var(--ink) 0%, rgba(10, 11, 10, 0.94) 42%, rgba(10, 11, 10, 0.66) 68%, rgba(10, 11, 10, 0.4) 100%),
      linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 70%, var(--ink) 100%);
  }
}

/* Phone: the desk stops being a backdrop and becomes a real object below the
   promise. Text over a busy interface is unreadable at this width, and a
   half-visible screenshot is worth less than a legible slice of the product. */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .hero__say { order: 1; padding-block: clamp(5rem, 14vh, 7rem) clamp(1.5rem, 4vh, 2.5rem); }
  .hero__scrim { display: none; }

  .hero__field {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(250px, 36vh, 330px);
    /* Bleed past the gutter so the desk reads as continuing off-screen. */
    margin-inline: calc(var(--gutter) * -1) 0;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  }
  .hero__field .desk {
    left: var(--gutter);
    top: 0;
    width: 148%;
    transform: none;
    opacity: 1;
  }
  .hero.is-seated .hero__field .desk { opacity: 1; transform: none; }

  .hero__foot {
    position: static;
    order: 3;
    margin-top: 1.75rem;
    padding-inline: var(--gutter);
    gap: 0.75rem;
  }
  .hero__foot .fict { margin-right: 0; width: 100%; }

  .day__stick { position: static; }
  .beat { padding-block: clamp(2rem, 6vh, 3.5rem); }
  .beat h3 { font-size: clamp(1.875rem, 8vw, 2.75rem); }
}

/* The rewind line. The clock runs backwards here on purpose, so say so. */
.day__intro {
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.day__intro h2 { max-width: 30ch; }
.day__intro h2 span { color: var(--chalk-mute); }

/* --- Static capability atlas ------------------------------------------------
   The no-script view of the breadth act. Complete, semantic and readable; the
   interactive rail replaces it when the engine takes over. */
.atlas { display: grid; gap: clamp(2.5rem, 5vh, 4rem); margin-top: clamp(2rem, 5vh, 3.5rem); }
.atlas__ch { display: grid; gap: 1rem; padding-top: clamp(1.5rem, 3vh, 2.25rem); border-top: 1px solid var(--hair); }
.atlas__ch h3 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 550;
  letter-spacing: -0.034em;
  line-height: 1;
}
.atlas__ch [data-promise] { color: var(--chalk-dim); }
@media (min-width: 900px) {
  .atlas__ch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .atlas__ch h3 { grid-column: 1 / -1; }
  .atlas__ch .flow { grid-row: span 3; grid-column: 2; }
}

/* The nudge controls must keep their target size when space is tight. */
.nudge { flex: none; }

/* --- Brand lockup -----------------------------------------------------------
   DEAN leads the hero. The mark is the only saturated colour on the page, which
   is exactly why it can be this large without the field turning into tech-slop. */
.lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.6vw, 1.375rem);
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}

.lockup__mark {
  width: clamp(52px, 6.2vw, 84px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 6px 26px rgba(90, 70, 220, 0.28));
}

.lockup__type { display: flex; flex-direction: column; gap: 0.15em; line-height: 1; }
.lockup__type b {
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.86;
}
.lockup__type i {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1.05vw, 0.9375rem);
  font-weight: 450;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  padding-left: 0.2em;
}

/* The mark travels with the wordmark in the nav and footer. */
.wordmark img { width: 22px; height: 22px; flex: none; }
.wordmark { gap: 0.5rem; align-items: center; }

/* --- The concierge ----------------------------------------------------------
   One appearance, at the invitation, and never inside the product interface.
   No blend mode: he wears a black tuxedo on a black plate, so `screen` or
   `lighten` would erase the subject along with the background. The plate is
   #000 against a #0a0b0a field — imperceptible — and the feathered mask
   removes the square edge. */
.invite { position: relative; overflow: hidden; }

.invite__dean {
  position: absolute;
  right: clamp(-3rem, -1vw, 0rem);
  bottom: -4%;
  width: clamp(130px, 15vw, 220px);
  height: auto;
  opacity: 0.96;
  pointer-events: none;
  z-index: 0;
}
.invite__grid { position: relative; z-index: 1; }

/* He must never crowd the form or the copy. */
@media (max-width: 1199px) { .invite__dean { opacity: 0.55; width: clamp(110px, 13vw, 160px); } }
@media (max-width: 767px) {
  .invite__dean {
    position: static;
    display: block;
    width: min(130px, 34vw);
    margin: 2.5rem auto -1.5rem;
    opacity: 0.85;
  }
  .invite { display: flex; flex-direction: column; }
  .invite__grid { order: -1; }
}

/* The promise stays inside its own column; the desk owns the right-hand field.
   `.hero h1` out-specifies the `.hero__say > *` constraint, so restate it here. */
.hero h1 { max-width: min(15ch, 46%); }
@media (max-width: 1099px) { .hero h1 { max-width: min(15ch, 72%); } }
@media (max-width: 767px) { .hero h1 { max-width: 15ch; } }

/* --- Concierge placement, corrected -----------------------------------------
   He stood over the form and blocked the consent row. He now occupies the
   dead space under the left-hand copy, cropped by the section edge, with the
   section given room so he never reaches the fields. Quiet presence, not a
   mascot page. */
.invite { padding-bottom: clamp(7rem, 18vh, 13rem); }

.invite__dean {
  right: auto;
  left: clamp(-2rem, 1vw, 3rem);
  bottom: -3%;
  width: clamp(130px, 14vw, 185px);
  opacity: 0.82;
}

@media (min-width: 960px) {
  /* Reserve the corner so the copy never sits on top of him either. */
  .invite__grid > :first-child { padding-bottom: clamp(4rem, 10vh, 8rem); }
}

@media (max-width: 1199px) { .invite__dean { width: clamp(110px, 12vw, 160px); opacity: 0.7; } }

@media (max-width: 767px) {
  .invite { padding-bottom: clamp(3rem, 8vh, 5rem); }
  .invite__grid > :first-child { padding-bottom: 0; }
}

/* Consent row: the box must sit on the first line of its label, not below it. */
.consent { align-items: start; }
.consent input { margin-top: 0; align-self: start; }
.consent label { display: block; line-height: 20px; }

/* The superhero artwork has true transparency — no plate, so no blend games. */
.invite__dean {
  bottom: -3%;
  left: clamp(-2rem, 1vw, 3rem);
  opacity: 1;
}
@media (min-width: 960px) {
  /* Clear the copy above him so his head never crosses a line of text. */
  .invite__grid > :first-child { padding-bottom: clamp(6rem, 14vh, 10rem); }
}

/* --- Superhero Dean, his appearances ----------------------------------------
   Escalating in size and meaning: he reveals himself at the door, he presents
   the one decision that needs a human, and he signs off at the invitation.
   The artwork ships with real alpha (2026-08-03 superhero set), so no blend
   or mask tricks are needed — what you see is the figure itself. */
.dean-fig {
  pointer-events: none;
  height: auto;
}

/* At the door. Sits in the gap between the promise and the desk. Portrait art:
   the width is roughly 40% of the old square frame for the same on-screen height. */
.hero__dean {
  position: absolute;
  left: 34%;
  bottom: -6%;
  width: clamp(96px, 9vw, 140px);
  opacity: 0.85;
  z-index: -1;
}
@media (max-width: 1099px) { .hero__dean { display: none; } }
/* On short viewports the CTA row descends into him and he ends up peeking out
   from behind the buttons (Mark, 31 July). Below 800px of height he steps out. */
@media (max-height: 799px) { .hero__dean { display: none; } }

/* Presenting the change. */
.brk__dean { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.25rem); }
.brk__dean img { width: clamp(80px, 8vw, 120px); flex: none; margin-inline: -4% 0; }
.brk__dean .t-edit {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  color: var(--chalk-dim);
  max-width: 12ch;
}
@media (max-width: 1039px) { .brk__dean img { width: 90px; } }

/* --- Concierge and timetable corrections ------------------------------------ */

/* The field colour is now baked into the artwork, so no blend mode is needed —
   and none can be trusted here, because `position: sticky` ancestors create a
   stacking context with no painted backdrop and the plate reappears. */
.dean-fig { mix-blend-mode: normal; }

/* The proposed slot squeezed the teacher's name into four wrapped lines to make
   room for the reason. Stack the reason under the name instead. */
.slot {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.1875rem 0.75rem;
  align-items: baseline;
}
.slot em { grid-column: 1; grid-row: 1 / span 2; }
.slot b { grid-column: 2; grid-row: 1; }
.slot i { grid-column: 2; grid-row: 2; font-size: var(--t-nano); line-height: 1.5; }

/* --- Chapter detail ---------------------------------------------------------
   Selecting a chapter opens a full write-up beneath it. The rail is a way in,
   not a summary that stops at ten words. */
.wall { grid-template-areas: 'lede flow' 'detail detail'; }
@media (max-width: 899px) { .wall { grid-template-areas: 'lede' 'flow' 'detail'; } }
.wall__lede { grid-area: lede; }
.wall > .flow { grid-area: flow; }

.wall__detail {
  grid-area: detail;
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (min-width: 720px) { .wall__detail { grid-template-columns: repeat(2, 1fr); } }

.detail h4 {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 550;
  letter-spacing: -0.022em;
  line-height: 1.22;
  margin-bottom: 0.5rem;
  max-width: 30ch;
}
.detail p { color: var(--chalk-dim); font-size: var(--t-small); max-width: 52ch; line-height: 1.62; }

/* The static atlas shows the same write-up without any script. */
.atlas__detail {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-block: 0.5rem 0.25rem;
}
@media (min-width: 720px) { .atlas__detail { grid-template-columns: repeat(2, 1fr); } }

/* --- Scale line -------------------------------------------------------------
   The atlas was doing the arguing on its own and the section read modestly.
   State the span outright; it is a fact about our own inventory. */
.span__scale {
  margin-top: clamp(1.25rem, 2.4vh, 1.75rem);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}
.span__scale span { color: var(--violet-lift); }

/* --- The film ---------------------------------------------------------------
   Silent, so it can play without asking anyone's permission. Full-bleed and
   large because the film is kinetic type — at small sizes it is unreadable,
   which would defeat the point of showing it at all. */
.film { padding-block: clamp(3rem, 7vh, 5.5rem) clamp(4rem, 10vh, 7rem); }
.film__say { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.film__say h2 { margin-bottom: 0.875rem; }

.film__bleed { width: 100%; padding-inline: clamp(0px, 2vw, var(--gutter)); }
.film__stage { width: 100%; max-width: 1760px; margin-inline: auto; }

.film__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: clamp(12px, 1.6vw, var(--r-shell));
  background: #000;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  transition: border-color var(--dur-mid) var(--ease-state);
}
.film__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: opacity var(--dur-slow) var(--ease-state), transform var(--dur-slow) var(--ease-state);
}
.film__poster:hover img { opacity: 1; transform: scale(1.012); }
.film__poster:hover { border-color: var(--hair-strong); }

.film__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(66px, 6vw, 104px);
  height: clamp(66px, 6vw, 104px);
  display: grid;
  place-items: center;
  border-radius: var(--r-chip);
  background: rgba(247, 245, 255, 0.95);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--dur-mid) var(--ease-state);
}
.film__play svg { width: 42%; height: 42%; margin-left: 6%; }
.film__poster:hover .film__play { transform: scale(1.06); }
.film__poster:active .film__play { transform: scale(0.97); }

.film__stage video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair);
  border-radius: clamp(12px, 1.6vw, var(--r-shell));
  background: #000;
  display: block;
}

/* --- The rest of the day ----------------------------------------------------
   Six more moments after the 08:12 set piece, covering the parts of a school
   that a morning briefing never reaches. Deliberately a different treatment
   from the pinned desk — a ledger, not a second scroll sequence. */
.rest-day {
  padding-block: clamp(5rem, 12vh, 9rem);
  border-top: 1px solid var(--hair);
}
.rest-day__say { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.rest-day__say h2 { margin-bottom: 1rem; }

.ledger { display: flex; flex-direction: column; }

.led {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid var(--hair);
  align-items: start;
}
.led:last-child { border-bottom: 1px solid var(--hair); }

@media (min-width: 900px) {
  .led { grid-template-columns: 8.5rem minmax(0, 1.35fr) minmax(0, 1fr); }
}

.led__t { display: flex; flex-direction: column; gap: 0.375rem; }
.led__t span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--violet-lift);
}
.led__t small {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

.led__b h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 550;
  letter-spacing: -0.026em;
  line-height: 1.16;
  margin-bottom: 0.625rem;
  max-width: 26ch;
}
.led__b p { color: var(--chalk-dim); font-size: var(--t-small); max-width: 54ch; line-height: 1.6; }

.led__p { display: flex; flex-direction: column; gap: 0.5rem; }
.led__p li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--chalk-mute);
  letter-spacing: 0.005em;
}
.led__p li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 1px;
  background: var(--violet);
}

/* --- Hero film --------------------------------------------------------------
   Ambient. It plays itself, loops, and carries no chrome — so it reads as the
   product breathing rather than as a video someone has to decide to watch. */
.hero__film {
  position: absolute;
  left: 39%;
  top: 50%;
  width: min(1120px, 70vw);
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  object-fit: cover;
  border-radius: clamp(10px, 1.2vw, 18px);
  border: 1px solid var(--hair);
  background: #000;
  opacity: 0.95;
  transition: opacity 1.2s var(--ease-enter), transform 1.2s var(--ease-enter);
}
.hero.is-seated .hero__film { opacity: 0.6; transform: translateY(-54%) scale(1.02); }

@media (max-width: 1099px) { .hero__film { left: 34%; width: min(1000px, 96vw); opacity: 0.5; } }
@media (max-width: 767px) {
  .hero__film {
    position: relative;
    left: auto;
    top: auto;
    width: 148%;
    transform: none;
    opacity: 1;
  }
  .hero.is-seated .hero__film { opacity: 1; transform: none; }
}

/* --- Hero film, corrected ---------------------------------------------------
   The film is kinetic type. Cropping it makes it unreadable, which defeats the
   reason for showing it, so the whole 16:9 frame sits clear of the copy. */
.hero__film {
  left: auto;
  right: var(--gutter);
  width: min(780px, 52vw);
  object-fit: contain;
}
.hero.is-seated .hero__film { transform: translateY(-52%) scale(1.01); opacity: 0.72; }

/* Scrim clears the film entirely; it only has to protect the reading column. */
.hero__scrim {
  background:
    linear-gradient(96deg, var(--ink) 0%, var(--ink) 34%, rgba(10, 8, 18, 0.72) 44%, transparent 56%),
    linear-gradient(180deg, var(--ink) 0%, transparent 14%, transparent 78%, var(--ink) 100%);
}

@media (max-width: 1099px) {
  .hero__film { right: var(--gutter); width: min(560px, 54vw); opacity: 0.9; }
  .hero__scrim {
    background:
      linear-gradient(96deg, var(--ink) 0%, rgba(10, 8, 18, 0.92) 40%, rgba(10, 8, 18, 0.5) 62%, transparent 80%),
      linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 74%, var(--ink) 100%);
  }
}
@media (max-width: 767px) {
  .hero__film { right: auto; width: 100%; opacity: 1; }
}

/* Keep the concierge beside the copy rather than under the film. */
.hero__dean { left: 34%; }
@media (max-width: 1399px) { .hero__dean { display: none; } }

/* --- The invitation, given real weight --------------------------------------
   This is the only thing the page is actually asking for, so it gets hero-scale
   type and the form sits in its own enclosure rather than floating on the field. */
.invite { border-top: 1px solid var(--hair-strong); }
.invite h2 { max-width: 14ch; margin-bottom: 1.25rem; }
@media (min-width: 960px) { .invite__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); } }

.form {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-shell);
  background: rgba(196, 178, 255, 0.038);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(247, 245, 255, 0.06);
  gap: 1.25rem;
}

.form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field select,
.field textarea {
  min-height: 52px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hair-strong);
  background: rgba(247, 245, 255, 0.045);
  color: var(--chalk);
  font-size: var(--t-body);
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: border-color var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state);
}
.field select { appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--chalk-mute) 50%),
                    linear-gradient(135deg, var(--chalk-mute) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field select:focus, .field textarea:focus { border-color: var(--violet); background: rgba(247, 245, 255, 0.06); }
.field select:hover, .field textarea:hover { background: rgba(247, 245, 255, 0.06); }
.field.is-bad select, .field.is-bad textarea { border-color: var(--alert); }
.field select option { background: var(--ink-raise-2); color: var(--chalk); }

.field__opt {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-left: 0.5rem;
}

.form__go { display: flex; flex-direction: column; gap: 0.875rem; align-items: flex-start; }
.btn--big {
  min-height: 56px;
  padding: 0.875rem 0.875rem 0.875rem 1.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.btn--big .btn__ico { width: 36px; height: 36px; }
.btn--big .btn__ico svg { width: 15px; height: 15px; }

/* ==========================================================================
   The day — an interactive rail instead of eighteen paragraphs
   ========================================================================== */

/* A second light block, so the page is not one long dark run. */
.rest-day {
  background: var(--paper);
  color: var(--paper-ink);
  border-top: 0;
}
.rest-day .t-lead { color: var(--paper-dim); }
.rest-day .fict { color: var(--paper-mute); }
.rest-day .rail-ctl__pos { color: var(--paper-mute); }
.rest-day .rail-wrap::before { background: linear-gradient(90deg, var(--paper), transparent); }
.rest-day .rail-wrap::after { background: linear-gradient(270deg, var(--paper), transparent); }
.rest-day .nudge { border-color: var(--paper-hair); color: var(--paper-ink); }
.rest-day .nudge:hover { background: rgba(20, 16, 31, 0.06); }
.rest-day .btn--bare { border-color: var(--paper-hair); color: var(--paper-ink); }
.rest-day .btn--bare:hover { background: rgba(20, 16, 31, 0.06); }

.daynav__rail {
  display: flex;
  gap: 0.375rem;
  align-items: stretch;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-state);
}
.daynav__rail li { flex: none; }

.daynav__rail button {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.875rem;
  min-width: 6.25rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-state),
    border-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state);
}
.daynav__rail button em {
  font-style: normal;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  letter-spacing: -0.03em;
  color: var(--paper-mute);
  transition: color var(--dur-fast) var(--ease-state);
}
.daynav__rail button i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 16, 31, 0.34);
}
.daynav__rail button:hover { background: rgba(20, 16, 31, 0.05); }
.daynav__rail button:active { transform: scale(0.98); }
.daynav__rail [aria-selected='true'] {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
}
.daynav__rail [aria-selected='true'] em { color: var(--paper); }
.daynav__rail [aria-selected='true'] i { color: rgba(245, 243, 251, 0.6); }

.btn--play { min-height: 44px; font-size: 0.8125rem; }

.daystage {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--paper-hair);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem clamp(2rem, 5vw, 4rem);
  align-items: start;
  min-height: 15rem;
}
@media (min-width: 900px) {
  .daystage { grid-template-columns: 9rem minmax(0, 1.3fr) minmax(0, 1fr); }
}

.daystage__t { display: flex; flex-direction: column; gap: 0.375rem; }
.daystage__t span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
}
.daystage__t small {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.daystage h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 22ch;
}
.daystage__b { color: var(--paper-dim); max-width: 52ch; margin-top: 0.75rem; }

.daystage__p { display: flex; flex-direction: column; gap: 0.5rem; }
.daystage__p li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--paper-mute);
}
.daystage__p li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 1px;
  background: var(--violet);
}

/* Static fallback keeps the light treatment. */
.rest-day .led { border-color: var(--paper-hair); }
.rest-day .led__t span { color: var(--violet); }
.rest-day .led__t small,
.rest-day .led__b p,
.rest-day .led__p li { color: var(--paper-dim); }

/* ==========================================================================
   Section tone — vary the field so the page has rhythm
   ========================================================================== */

.span { background: linear-gradient(180deg, var(--ink-sunken), var(--ink) 34%); }
.horizon { background: radial-gradient(100% 62% at 50% 100%, rgba(53, 176, 247, 0.07), transparent 66%); }
.invite { background: linear-gradient(180deg, var(--ink), var(--ink-sunken)); }

/* Three grid children: the time, the headline block, the proof list. */
@media (min-width: 900px) { .daystage { grid-template-columns: 9rem minmax(0, 1.45fr) minmax(0, 0.85fr); } }
.daystage__p li { line-height: 1.6; }

/* Both rails are driven by transform, so the wrapper must clip them. Without
   this the eighteen-item day rail pushed 1743px of horizontal scroll at 320px. */
.rail-wrap { overflow: hidden; }

/* Stack rather than fan where a fan would be unreadable. */


/* ==========================================================================
   Mid-page calls to action
   ========================================================================== */

.midcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--hair);
}
.midcta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--chalk-dim);
  margin: 0;
  flex: 1 1 18ch;
}
.midcta--span { border-top-color: var(--hair); margin-bottom: clamp(1rem, 3vh, 2rem); }

/* ==========================================================================
   Mobile: sticky call to action
   The page is seventeen screens on a phone. Without this the only way to act
   is to scroll to the very bottom.
   ========================================================================== */

.mcta { display: none; }

@media (max-width: 899px) {
  .mcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom));
    background: var(--chalk);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-decoration: none;
    box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.9);
    transform: translateY(110%);
    transition: transform 460ms var(--ease-state);
  }
  .mcta.is-up { transform: none; }
  .mcta:active { background: #fff; }
  .mcta__ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-chip);
    background: rgba(10, 8, 18, 0.1);
  }
  .mcta__ico svg { width: 13px; height: 13px; }

  /* Clear the bar so it never covers the last line of a section. */
  body { padding-bottom: 68px; }
  .foot { padding-bottom: clamp(3rem, 8vh, 5rem); }
}

/* ==========================================================================
   Mobile polish
   ========================================================================== */

@media (max-width: 899px) {

  /* --- The desk was 1.57 screens tall. Show the morning, not the whole app. */
  .day__stick .desk__body { min-height: 0; }
  .day__stick .stage { gap: 0.875rem; }
  /* Keep the three arrivals and the decision; drop the overnight backlog and
     the secondary queue, which are detail nobody reads on a phone. */
  .day__stick .stream:not(.stream--tight) .row:not([data-arrive]) { display: none; }
  .day__stick .stream--tight { display: none; }
  .day__stick .panel__head { padding-bottom: 0.5rem; }
  .day__stick .row { padding-block: 0.625rem; }
  .day__stick .metric { padding: 0.625rem 0.75rem; }
  .day__stick .metric b { font-size: 1.5rem; }
  .day__stick .decide { padding: 0.875rem; }
  .day__stick .decide h4 { font-size: 1rem; }

  /* --- Everything in view: room to breathe. */
  .span { padding-block: clamp(4rem, 10vh, 6rem); }
  .chapters { gap: 1.5rem; }
  .chapters button {
    font-size: clamp(1.5rem, 7vw, 2rem);
    padding: 0.625rem 0;
    min-height: 48px;
  }
  .rail-ctl { margin-top: 1.75rem; gap: 0.75rem; }
  .wall { gap: 2.25rem; }
  .wall__lede h3 { margin-bottom: 1rem; }
  .wall__terms { gap: 0.5rem; margin-top: 1.5rem; }
  .wall__terms li { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
  .flow li { padding: 1.125rem 1.25rem; }
  .wall__detail { margin-top: 2.5rem; padding-top: 2.25rem; gap: 2rem; }
  .detail h4 { margin-bottom: 0.625rem; }

  /* --- The day rail: bigger targets, more air. */
  .rest-day { padding-block: clamp(4rem, 10vh, 6rem); }
  .daynav__rail { gap: 0.625rem; }
  .daynav__rail button {
    min-width: 8.5rem;
    min-height: 60px;
    padding: 0.875rem 1rem;
    border-radius: 14px;
    border-color: var(--paper-hair);
  }
  .daynav__rail button em { font-size: 1.125rem; }
  .daystage { margin-top: 2.25rem; padding-top: 2rem; gap: 1.25rem; min-height: 0; }
  .daystage h3 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .daystage__b { margin-top: 0.875rem; }
  .daystage__p { gap: 0.75rem; margin-top: 0.5rem; }

  /* --- More air between the acts generally. */
  .brk { padding-block: clamp(4rem, 11vh, 7rem); }
  .horizon, .invite { padding-block: clamp(4rem, 11vh, 7rem); }
  .midcta { flex-direction: column; align-items: stretch; text-align: left; }
  .midcta .btn { justify-content: center; }
}

/* --- The concierge, present on a phone too --------------------------------
   He was hidden below 1400px, which is where most people will see this. */
@media (max-width: 1399px) {
  .hero__dean { display: block; }
}
@media (max-width: 899px) {
  .hero__dean {
    position: static;
    width: min(120px, 30vw);
    margin: 1.75rem auto -0.5rem;
    opacity: 0.95;
  }
  .hero { flex-direction: column; }
  .hero__dean { order: 3; }
  .hero__foot { order: 4; }
  .brk__dean { flex-direction: row; align-items: center; gap: 0.75rem; }
  .brk__dean img { width: min(95px, 24vw); }
  .invite__dean { width: min(140px, 36vw); opacity: 0.95; }
}

/* Mobile: the control row was cramming prev/next, the counter and the note onto
   one line, wrapping "01 / 08" in half. Give the note its own row. */
@media (max-width: 899px) {
  .rail-ctl { flex-wrap: wrap; row-gap: 1rem; }
  .rail-ctl__pos { white-space: nowrap; }
  .rail-ctl__spacer { display: none; }
  .rail-ctl .fict { flex-basis: 100%; }

  /* Metric labels were running to three lines and stretching the desk. */
  .day__stick .metric i { letter-spacing: 0.05em; font-size: 0.625rem; line-height: 1.35; }
  .day__stick .metrics { gap: 1px; }
}

/* --- Figure marks: the character, spread thinner ----------------------------
   27 Aug (Ashley). The superhero set only appeared at the top of a page and at
   the invitation; everything between was figureless. A figmark is a decorative
   standing figure parked in a section's own whitespace — always behind the
   text, never in its column, and gone below 1200px where there is no spare
   room to stand in. Purely ornamental: alt="" and aria-hidden on every one, so
   nothing here is announced and nothing here carries meaning a reader needs. */

.has-figmark { position: relative; }
.has-figmark > .shell { position: relative; z-index: 1; }

.figmark {
  position: absolute;
  bottom: 0;
  width: clamp(132px, 12vw, 190px);
  height: auto;
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.figmark--right { right: clamp(-1rem, 2vw, 4rem); }
.figmark--left  { left:  clamp(-1rem, 2vw, 4rem); }

/* Sits beside a section heading rather than at its foot. */
.figmark--head { bottom: auto; top: clamp(2rem, 6vh, 5rem); }

@media (max-width: 1199px) { .figmark { display: none; } }

/* The legal and utility pages: body copy is capped at 46rem inside a full
   shell, so the right-hand third is empty. He stands there and nowhere near
   a line of text. */
.legal { position: relative; }
.legal > .shell { position: relative; z-index: 1; }
/* Anchored to the heading, not to `bottom` — .legal is the whole document,
   so bottom-anchoring parks him past the end of a long notice. */
.legal .figmark { top: clamp(7rem, 16vh, 10rem); bottom: auto; opacity: 0.3; }
@media (max-width: 1399px) { .legal .figmark { display: none; } }

/* Its own keyframe, not poster.css's dean-float: the legal pages and the tour
   never load poster.css, and a figmark stands on those too. */
@keyframes figmark-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: no-preference) {
  .figmark { animation: figmark-float 9s ease-in-out infinite; }
  .figmark--head { animation-duration: 10.5s; animation-delay: 1.2s; }
}