/* ══════════════════════════════════════════════════════════════════════════
   css/storm-folio.css — THE RUNNING FOLIO, for the storm pages
   service.tnaado.ca · pairs with js/storm-folio.js
   Linked by: technology.html, apps.html, newsroom.html

   WHY THIS FILE EXISTS RATHER THAN css/components/folio.css.
   PORTED-COMPONENTS.md §10 ships a running head driven by two
   IntersectionObservers watching [data-folio] sections. That is right for an
   ordinary flow page and MEASURABLY WRONG here, and it was measured rather
   than assumed: on a storm page every section is an absolutely-positioned
   body carrying a matrix3d written per frame, so bodies cross the middle of
   the viewport in an order that has nothing to do with document order.
   Driven on newsroom.html at 1440x900 the ported rail read "Contact" at
   scroll 1800 while the reader was still on act 01, "What the desk does" at
   10200 while the chrome correctly said "03 The standards", and "Who we are"
   at 12000 sitting on the booking panel. It disagreed with the bypass row at
   roughly half the sampled positions.

   So this rail is fed the chrome's own answer instead — see the driver.
   Nothing here is a second opinion about where the reader is.

   THE RULES ARE MEDIA.HTML'S, COPIED, NOT REDECIDED. That page has carried
   this marginal since the rebuild and Ethan singled it out. Four sibling
   pages must not have four slightly different rails, so the geometry, the
   type, the tail and the breakpoint below are its values verbatim.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tokens are BRIDGED, not assumed — PORTED-COMPONENTS.md rule 5. All three
   pages declare these at :root in their own <style>, but a component that
   renders in the browser default serif when dropped somewhere else is a trap
   waiting for the next agent. The fallbacks are the real values. */
.folio {
  --folio-red:  var(--red-ink, #ef5c6e);
  --folio-dim:  var(--dim-ink, #b9b3a6);
  --folio-rule: var(--red, #c8102e);

  position: fixed;
  /* PHYSICAL left/top, NEVER inset-inline-start/inset-block-start. Logical
     insets resolve against the element's OWN writing mode, and this element
     sets writing-mode: vertical-rl — which makes its inline axis vertical and
     its block axis horizontal, so written logically these two lines mean TOP
     and RIGHT and the rail lands across the page heading. That is not
     hypothetical; it is what the first build of the ported component did, and
     it reads as completely correct in source. */
  left: clamp(.9rem, 2.2vw, 1.7rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;

  font-size: .5625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  /* NO font-family. Measured, not assumed: forcing --mono here gave four
     sibling pages three different rails — JetBrains Mono on technology (the
     only page that declares --mono), the generic ui-monospace stack on apps
     and newsroom, and Inter on media, whose rail sets no family and inherits.
     media's is the one Ethan singled out, so inheriting is the right answer
     and the other three now match it and match their own bypass row. */
  color: var(--folio-dim);

  z-index: 1180;
  pointer-events: none;   /* never in the way of anything */
  margin: 0;
  display: none;          /* the default state is ABSENT — see the driver */
  align-items: center;
  gap: .8rem;
}

.folio b { font-weight: 700; color: var(--folio-red); }

/* The tail. Reads as a rule running off the end of the label because the
   whole element is rotated 180deg, so "to bottom" resolves upward on screen. */
.folio::after {
  content: '';
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--folio-rule), transparent);
}

/* ONLY when the storm is actually running, and only where there is a margin
   to put it in. Both halves matter: below 1180px there is no gutter, and
   without .sc-live the page is ordinary flow, which is the fallback the
   chrome's own bypass row already serves with five real links. */
@media (min-width: 1180px) {
  .sc-live .folio { display: flex; }
}

/* Reduced motion keeps the rail and keeps it updating — less movement, not
   less information. Only the crossfade goes. */
.folio span { transition: opacity .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .folio span { transition: none; }
}