/* ============================================================
   Landing · title geometry
   ONE gutter: everything keys to the header's 34px (--s-7) column —
   corner reticles, name stamp, M.O., PROCEED key share x = 34px.
   Bottom mono lines live BELOW the bottom corners on one baseline.
   Loaded after landing.css / flight.css / wide.css.
   ============================================================ */
.title__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mo-skip-link {
  position: fixed;
  z-index: 130;
  top: 14px;
  left: 50%;
  padding: 10px 14px;
  border: 1px solid var(--signal);
  color: var(--bone);
  background: var(--void);
  font-family: var(--ff-mono);
  font-size: var(--fs-nano);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  transform: translate(-50%, calc(-100% - 24px));
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.mo-skip-link:focus-visible {
  outline: 1px solid var(--signal);
  outline-offset: 3px;
  transform: translate(-50%, 0);
}

.lp-title {
  --tc-x: var(--gutter);           /* content + corner gutter = header gutter */
  --tf-top: max(58px, 3.4vw);      /* frame top — sits just under the fixed header */
  --tf-bot: 42px;                  /* frame bottom — baseline row lives beneath */
  --tc-bot: var(--gutter-bot);     /* content bottom, 13px inside the frame */
}

/* frame + shields follow the same box */
.lp-title .title__frame { inset: var(--tf-top) var(--tc-x) var(--tf-bot); }
.lp-title .title__shield--top   { height: var(--tf-top); }
.lp-title .title__shield--bot   { height: var(--tf-bot); }
.lp-title .title__shield--left  { top: var(--tf-top); bottom: var(--tf-bot); width: var(--tc-x); }
.lp-title .title__shield--right { top: var(--tf-top); bottom: var(--tf-bot); width: var(--tc-x); }

/* content aligned to the corner column */
.lp-title .title__idTop { top: calc(var(--tf-top) + var(--s-5)); left: var(--tc-x); right: var(--tc-x); }
.lp-title .title__idRole { padding-left: 0; }
.lp-title .title__wordmark {
  left: var(--tc-x);
  bottom: var(--tc-bot);
  right: calc(var(--tc-x) + max(240px, 14vw));
}
.lp-title .title__ctl { right: var(--tc-x); bottom: var(--tc-bot); }
/* board-flight overlays (chapter card, waypoint rail, progress, entry cue,
   footer) carry pointer-events:auto and are stacked over the fixed title
   stage at opacity 0 — they were swallowing drags inside the frame. None of
   them may hit-test until the title has actually left. (.bf-rail sets
   pointer-events inline from JSX, hence !important.) */
body:not(.fl-titleGone) .bf-rail,
body:not(.fl-titleGone) .bf-rail *,
body:not(.fl-titleGone) .bf-prog,
body:not(.fl-titleGone) .bf-cue,
body:not(.fl-titleGone) .bf-foot,
body:not(.fl-titleGone) .bf-foot *,
body:not(.fl-titleGone) .bf-ch,
body:not(.fl-titleGone) .bf-ch__card,
.bf-ch:not(.is-on) .bf-ch__card { pointer-events: none !important; }

/* THE M.O. IS THE EXIT. A wheel over the wordmark scrolls the page instead of
   flying the camera — everything else inside the frame stays discoverable.
   The hit box is the <pre>, NOT its column: the column runs to
   `right: tc-x + max(240px, 14vw)` for layout, so blocking on it put a wide
   invisible slab across the bottom of the hero where a drag did nothing. The
   column stays `pointer-events: none` (base.css); the <pre> is
   `width: max-content` (base.css), so this is exactly the ASCII you can see.
   The wordmark's cursor bubble does not depend on this — it reads the
   pointer from a window listener and lights up either way.
   The two states that retire the title's controls — the exit engaging
   (`fl-titleDim`, scroll-flight.css) and the explore overlay (`mo-explore`,
   base.css) — have to retire this with them. Their `none` sits on the wordmark
   column, so an unconditional `auto` down here would out-specify it and leave
   an invisible wheel trap behind after the title is gone. `fl-titleGone` needs
   no clause: it hides the whole stage. */
body:not(.fl-titleDim):not(.mo-explore) .lp-title .title__stage .title__wordmark .asciiHero {
  pointer-events: auto;
}
.lp-title .title__idTop { pointer-events: none; }

/* wheel handed back to the page mid-gesture — the Continue cue acknowledges it */
body.mo-yield .lp-title .scrollcue { animation: moYieldPulse 700ms var(--e-out) 2; }
@keyframes moYieldPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) { body.mo-yield .lp-title .scrollcue { animation: none } }
/* the PROCEED keycap scales 1.25× from its bottom-right corner, growing
   ~30px leftward INTO the Continue cue — widen the gap to clear it */
.lp-title .title__proceedRow { gap: calc(var(--s-6) + var(--s-7)); }

/* baseline row — below the bottom corners, shared baseline L/R */
.lp-title .title__baseline {
  position: absolute;
  left: var(--tc-x); right: var(--tc-x); bottom: 14px;
  z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline;
  pointer-events: none;
}
.lp-title .title__baseline .title__wordmarkSub {
  border-top: 0; padding-top: 0;
  font-size: var(--fs-nano); line-height: 1;
  opacity: 1; transform: none;
}
.lp-title .title__baseline .title__proceedCap { font-size: var(--fs-nano); line-height: 1; }

/* scroll-dissolve — the row exits with the b-stagger, like the old sub */
.lp-title .title__stage .title__baseline {
  opacity: calc(1 - var(--flt-b, 0) * 1.3);
  transform: translateY(calc(var(--flt-b, 0) * -18px));
}
body.mo-explore .lp-title .title__baseline {
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--e-out);
}
@media (prefers-reduced-motion: reduce) {
  .lp-title .title__stage .title__baseline { transform: none; }
}

/* Mobile lifts the wordmark above the control cluster,
   but from the new aligned bottom */
@media (max-width: 700px) {
  .lp-title .title__wordmark { bottom: calc(var(--tc-bot) + 108px); right: var(--tc-x); }
  .lp-title .title__proceedCap { display: none; }
}