/* sequence.css — the geometry sections 08 and 09 share
 *
 * Achievements and About are one designed sequence: the same rail, the same
 * side column, the same guides, the same split heading, and one flight layer
 * that carries figures out of 08 and into 09. All of it used to sit at the top
 * of achievements.css, which made that file the owner of rules About depends
 * on — during the mobile build an unscoped rule there silently rewrote About.
 *
 * SCOPE ANYTHING THAT OVERRIDES THESE. A rule for one section must say which:
 * `.ach .railcol`, `.about .railcol`. An unscoped `.railcol` in either section's
 * sheet reaches both, and whichever sheet loads later wins.
 *
 * There is no sequence.small.css. Every mobile override of this geometry is
 * section-specific by the rule above, so it belongs in achievements.small.css
 * or about.small.css — a shared small sheet would have nothing to hold.
 */


/* Column guides at 11 / 40 / 60 / 80% — shared by both 08 and 09. */
.guides { position: absolute; inset: 0; pointer-events: none; }
.guides i {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: var(--guide);
}
.guides i:nth-child(1) { left: 11%; }
.guides i:nth-child(2) { left: 40%; }
.guides i:nth-child(3) { left: 60%; }
.guides i:nth-child(4) { left: 80%; }


/* --- shared column geometry for 08 and 09 -------------------------------- */

.railcol {
  position: absolute;
  left: 2.6vw;
  width: calc(11% - 2.6vw);
  top: 3.4vh;
  bottom: calc(3vh + var(--banner-h));
  display: flex; flex-direction: column; justify-content: space-between;
}
.railcol__top {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
  line-height: 1.6;
}
.railcol__bottom {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, .66vw, 11px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

.sidecol {
  position: absolute;
  right: 3.6vw;
  width: 37%;
  top: 3.4vh;
  bottom: calc(3vh + var(--banner-h));
  display: flex; flex-direction: column;
}
.sidecol__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
  /* Reserves the top-right corner for the floating MENU, which is fixed above
     this panel and would otherwise land on top of the range label. Both 08 and
     09 sit far past the hero, so the control is always present here and the
     space can be reserved permanently — toggling it would make the row jump. */
  padding-right: clamp(64px, 5.4vw, 86px);
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(11px, .8vw, 13px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.sidecol__range { color: var(--red); }

.h2-split {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 3.5vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-head);
}
.h2-split b { font-weight: inherit; color: var(--muted-3); }


/* --- the flight layer ----------------------------------------------------
   Ten fixed clones (five numbers + five captions), built by sequence.js from
   the source elements so they can never fall out of sync with the copy.
   z-55: under the availability banner (60) and the menu panel (70), which the
   handoff did not know about. */

.flight {
  position: fixed; inset: 0;
  z-index: 55;
  pointer-events: none;
}
/* SCOPED, not a bare .flight__clone. Every clone is cloned from a flight source
   — .metric__n, .n16, .metric__cap — and each of those is visibility: hidden,
   which the clone has to beat. A bare class selector only won that on source
   order, and moving this rule into sequence.css (which now loads before
   achievements.css) silently flipped it and left the clones invisible. Two
   classes beats one at any load position. */
.flight .flight__clone {
  position: fixed; top: 0; left: 0;
  transform-origin: 0 0;
  white-space: nowrap;
  visibility: visible;
  opacity: 0;                          /* sequence.js owns this from frame one */
  will-change: transform, opacity;
}


/* --- the line reveal, used by both 08 and 09 -----------------------------
   sequence.js splits a block into measured visual lines and wraps each in a
   clip edge; scroll only TRIGGERS a line and the slide runs on its own clock,
   which is why the transition lives here in CSS and not in JS. About retimes it
   below 768px — see about.small.css. */

.line-clip { display: block; overflow: hidden; }
.line {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.3s cubic-bezier(.22, .61, .36, 1);
}