/* ⚠ THE HAND-DRAWN MAP'S RULES ARE GONE (2026-09-11). `.map__svg`, `.pin__dot*` and `.craft`
   styled an SVG a person drew by eye: a bezier for the route, four pins placed by hand, an ellipse
   for the SIGMET. Act III now renders the REAL `route_geometry` through the brief's own
   `render_route_map_section`, so those rules had nothing left to style. Found by the orphan guard,
   which is now three-for-three on this arc. */
/* ==========================================================================
   TEMassist — THE FIVE ACTS
   Choreography per 02_website_blueprint.md.  Composition rhythm per CD §5:
   full-bleed atmospheric acts alternate with tight framed instrument panels.
   That vast ↔ precise alternation is the page's heartbeat.
   ========================================================================== */

/* ==========================================================================
   ACT 0 — COLD OPEN
   One dark, calm screen.  No selling.  Establish the register.
   ========================================================================== */

.act0 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-9) var(--sp-8);
}

.act0__grid { align-items: center; width: 100%; }

/* Content in the left 7; the right 5 holds the DISPLAY — the sample's own readout.
   ⛔ IT IS NOT HIDDEN ON A PHONE, WHICH THE DECORATIVE GLYPH IT REPLACED WAS. That was correct
   for an abstract arc and wrong for this: the readout is the only place on the hero where a
   visitor sees the product's actual voice — real ICAOs, a real runway, a real caution. Below
   60rem it moves under the copy at full width instead of vanishing. */
.act0__body    { grid-column: 1 / span 7; }
.act0__display { grid-column: 8 / span 5; }

@media (max-width: 60rem) {
  .act0__body    { grid-column: 1 / -1; }
  .act0__display { grid-column: 1 / -1; margin-top: var(--sp-7); }
}

.act0__eyebrow { margin-bottom: var(--sp-6); }

.act0__head { margin-bottom: var(--sp-5); font-size: clamp(2.5rem, 6.2vw, 4rem); }

.act0__sub {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--muted);
  max-width: 38rem;
  margin-bottom: var(--sp-7);
}

.act0__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

/* "By invitation." sits UNDER the CTA and quietly (EA v2 §2 Act 0). It is the sentence that makes
   the button honest, so it is never hidden and never styled as a disclaimer — it is the terms of
   entry, said once, in the placard voice. */
.act0__door {
  margin: var(--sp-3) 0 var(--sp-8);
  color: var(--muted);
}

/* ══ THE DISPLAY — the sample's readout, as an instrument ═══════════════════════════
   ⛔ THE DECODE LINE'S RULES LEFT WITH ITS MARKUP. It was `OMDB → KLAX · RWY 30R → … · 4 ALTS`,
   a middle-dot string, which CD v2 §14 retired by name in favour of columns and §15 lists as a
   generated-page tell. Its caret animation went too — there is nothing left to type. A rule that
   outlives its element is the next session's ghost. */
.disp {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  overflow: hidden;
}
/* The rim-light on the top edge — the one place a display catches the light, and the same
   single-source-top-left rule the whole skin is lit by. */
.disp::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rim, rgba(230,237,243,.22)), transparent);
}
/* The grid the power-up resolves out of. Present at rest and very faint — the motion fades it
   IN and back, it is never the thing that makes the panel legible. */
.disp__grid {
  position: absolute; inset: 0; pointer-events: none;
  /* ⚠ .16, NOT .5 — AT HALF OPACITY A HAIRLINE GRID IS GRAPH PAPER, and the panel read as ruled
     stationery with numbers on it rather than as a screen. The grid is what the power-up RESOLVES
     OUT OF; it is scaffolding the eye should find only after the values, never a texture the
     values sit on. Wider cells for the same reason: 28px made a mesh, 44px makes a frame. */
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 44px);
}
.disp__mark {
  position: absolute; top: var(--sp-3); right: var(--sp-4);
  color: var(--faint);
}
.disp__rows { position: relative; margin: 0; display: grid; gap: var(--sp-3); }
/* Label, value, label, value — a readout is columns, and the labels are placards on a panel. */
.disp__row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}
.disp__row dt { color: var(--faint); }
.disp__row dd {
  margin: 0;
  font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* The alternates span the value columns rather than wrapping under a label. */
.disp__altn { grid-column: 2 / -1; font-size: var(--fs-data); color: var(--muted); }

/* ⛔ THE ONE LIT CAPTION. Everything above is ink; this is the only coloured thing in the panel,
   and it is coloured because it is the only thing that needs attention. */
.disp__caption {
  position: relative;
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  /* ⛔ THE HUE FOLLOWS THE SEVERITY, because it has to. This was hardcoded `--medium` back when
     the caption always lit a caution; once it lights the WORST finding on the flight, a CRITICAL
     row wearing the caution amber is a lie in the one channel this product reserves for meaning —
     and it is the channel a visitor reads before any word on the page. Mark, word and colour, all
     three, always (CD §13): the glyph and the count are set with it. */
  color: var(--medium);
}
.disp__caption[data-rank="critical"] { color: var(--critical); }
.disp__caption[data-rank="high"]     { color: var(--high); }
.disp__caption[data-rank="medium"]   { color: var(--medium); }
.disp__caption[data-rank="low"]      { color: var(--low); }
.disp__glyph { font-size: .8em; flex: none; }
/* ⚠ `min-width: 0` — the caption is a flex row and its text ran straight through the panel's
   right edge. A flex item will not shrink below its content, and "ZWSH runway width" is one
   unbreakable-looking string to the layout. The same defect this site was fixed for twice today:
   once as a grid track written `1fr`, once as a chip with `white-space: nowrap`. Third instance,
   third shape, one cause. */
.disp__cap-text {
  font-family: var(--mono); font-size: var(--fs-data); color: var(--muted);
  min-width: 0; overflow-wrap: anywhere;
}

/* ⚠ `.act0__foot` IS GONE TOO. It pinned `A380-842` to the hero's bottom-right corner; the
   aircraft type is a row of the display now, where it sits with the rest of the readout instead
   of floating on its own. Third orphaned rule found in this pass — the decode line's, the
   disciplines', and this — all from elements removed in the last two commits. *A rule and its
   element leave together, or one of them becomes a mystery.* */

/* ══ ACT I — THE RELEASE ═══════════════════════════════════════════════════════════
   ⛔ PAPER, AT NIGHT AS WELL. This is the one act that refuses the reader's theme, because the
   MATERIAL is the argument: the site alternates atmospheric acts with printed ones, and a
   dispatch release is a printed thing. The day values are re-declared on the act rather than
   read from `:root`, so everything inside — rules, muted text, the accent — resolves to paper
   without a single component needing to know. */
.act--paper {
  /* ⛔ THE COMPLETE DAY SET. Act II's panel shipped a PARTIAL override and every quiet label in it
     went invisible in day mode — `--muted` is `rgba(var(--ink-rgb), a)`, and with `--ink-rgb`
     falling through to the other theme it resolved to near-black on near-black. This block had the
     same shape: `--muted` and `--faint` were set explicitly so nothing was actually broken, but
     `--ink-rgb` was not, and the next rule to use it would have failed the same way in NIGHT.
     A scoped theme override is all of the theme or none of it. */
  --paper:    #f4efe5;
  --ink:      #182126;
  --ink-rgb:  24, 33, 38;
  --surface-rgb: 255, 255, 255;
  /* ⚠ THE `-rgb` COMPANIONS BELONG TO THE OVERRIDE TOO. This act forces DAY while the page may be
     NIGHT, so a rule inside it reading `rgba(var(--high-rgb), a)` would otherwise take the NIGHT
     numbers from `:root` and paint a night hue on parchment — the partial-override bug this
     block's own comment was written about, one token family over. */
  --accent-rgb:   15, 95, 115;
  --critical-rgb: 143, 29, 20;
  --high-rgb:     197, 97, 31;
  --medium-rgb:   176, 138, 18;
  --low-rgb:      53, 106, 72;
  --page-bg:      #ebe4d6;   /* the desk, day — theme-varying, so the override must carry it */
  --critical: #8f1d14;
  --high:     #c5611f;
  --medium:   #b08a12;
  --low:      #356a48;
  --signal:   #c5611f;
  /* ⚠ THE -text VARIANTS ARE THE REASON THIS LIST IS EXHAUSTIVE RATHER THAN JUDGED. `--high-text`
     and `--medium-text` exist because `--high` and `--medium` measure 3.59:1 and 2.82:1 AS TEXT on
     parchment — below AA. Falling through to the night values on a night page would put exactly
     those failing ratios back on this act's paper, and nothing on screen would say so. */
  --high-text:   #ab541b;
  --medium-text: #86690e;
  --critical-text: #8f1d14;
  --low-text:      #356a48;
  --glow:     rgba(197, 97, 31, .16);
  --shadow:   rgba(24, 33, 38, .14);
  --band-a:   rgba(15, 95, 115, .12);
  --band-b:   rgba(53, 106, 72, .10);
  --panel:    rgba(255, 252, 246, .88);
  --line:     rgba(24, 33, 38, .12);
  --hairline: rgba(24, 33, 38, .12);
  --muted:    rgba(24, 33, 38, .64);
  --faint:    rgba(24, 33, 38, .63);
  --accent:   #0f5f73;
  --rim:      rgba(255, 255, 255, .55);
  /* `--display` is `var(--paper)` at `:root`, and a var() token is substituted where it is
     DECLARED — so without this line an act that flips to paper while the page is in night mode
     inherits the NIGHT sheet under its parchment ink. Nothing in Act I reads it today; it is
     declared because the pair is one fact, and the guard now says so. */
  --display:  #f4efe5;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}

/* Centred 8 of 12 (EA §2), and a measure that keeps prose near 65 characters. */
.release {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--sp-7) 0 var(--sp-6);
}

/* The document header: name left, kind right, a rule under it. The one place a placard is
   correct here — `PRE-FLIGHT BRIEFING` is a document header, not an eyebrow on a heading
   (CD §6). */
.release__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
}
.release__kind { color: var(--faint); }

.release__statement {
  font-family: var(--serif);
  font-size: var(--fs-act);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: var(--sp-6) 0 var(--sp-5);
}
.release__body {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--sp-7);
}

/* ⛔ LABELLED PARAGRAPHS, NOT A THREE-UP GRID. `repeat(3, 1fr)` of bordered blocks is the SaaS
   card kit (CD §15) and EA §2 forbids it in as many words. A release states its terms as a
   label and a line, ruled apart — and they carry no numbers, because three disciplines are not
   a sequence. Below 44rem the label stacks over its line rather than squeezing the measure. */
.release__terms { margin: 0; display: grid; }
.release__term {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--hairline);
}
.release__term:last-child { border-bottom: 1px solid var(--hairline); }
.release__term dt { color: var(--muted); }
.release__term dd {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-body, 1rem);
  line-height: 1.6;
}
@media (max-width: 44rem) {
  .release__term { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

.release__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink);
}
.release__oath {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.4;
}
/* Decorative, and it says so to assistive tech (EA §2). A signature RULE, not a fake signature —
   nothing on this page pretends a person signed it. */
.release__sign {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-2);
  min-width: 14rem;
  text-align: center;
}

/* ⚠ THE DISCIPLINE RULES ARE GONE WITH THEIR MARKUP — including the one that drew a hairline
   left-to-right on scroll. It was the act's only ornament and it was well made; it is also the
   act that CD §10 says must not animate at all ("Paper does not animate. Reduced-motion and
   full-motion are identical here — that is the point"). A rule that outlives its element is the
   next session's ghost, and an animation that outlives the ruling against it is worse. */

/* ══ ACT II — THE PANEL ════════════════════════════════════════════════════════════
   The act's own furniture. Everything INSIDE `.act2__panel` is the brief's own stylesheet,
   generated and scoped — nothing here reaches into it, deliberately: the moment this file starts
   restyling the product's markup, the panel stops being the product. */
.act2__note {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--muted);
  max-width: 52rem;
  margin: var(--sp-4) 0 0;
}

/* ⛔ THE PANEL IS A DISPLAY SET INTO THE PAGE, so it takes the product's night ground even when
   the reader is on paper — it is a photograph of an instrument, not a section of the site. One
   hairline, 2px radius, no shadow (CD §8). */
.act2__panel {
  /* ⛔ THE COMPLETE NIGHT SET COMES FROM `tokens.css`, WHICH IS WHERE IT IS DEFINED ONCE. This
     block used to transcribe it — and a transcript of thirty declarations goes stale one line at
     a time: it was missing `--display`, so every card in the panel drew night ink on the DAY
     sheet at 1.01:1, invisible in day mode and perfect in night, which is why four render passes
     missed it. The selector now sits beside `:root[data-theme="night"]`; see the reason there. */
  margin-top: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
}

/* The product's sticky glareshield must not stick to the SITE's viewport — inside a marketing
   page it would follow the reader down past the act it belongs to.
   ⚠ AND ITS NEGATIVE MARGIN HAS TO GO WITH THE STICKINESS. In the brief the glareshield BLEEDS to
   the shell's edges (`margin: 0 calc(-1 * var(--gutter))`) so the bezel reaches the window. There
   is no shell here, so it overhung the panel's right edge by 63px and the annunciator say-line was
   clipped mid-sentence — a rule doing exactly its job in a container it was never given. */
.act2__panel .v4-stickytop { position: static; margin-inline: 0; }
/* ⚠ `.act2__panel .v4-shell` WAS WRITTEN AND THE FRAGMENT HAS NO `.v4-shell` — I reached for a
   class the product uses without checking which classes the EXTRACTED shell actually carries. The
   orphan guard caught it on the run it was written for, which is the argument for having it. */

/* The three annotations. Not cards: label, line, ruled apart — the same grammar as the release
   in Act I, because they are doing the same job. */
/* ⚠ ACT III'S MAP BORROWED `.act2__panel` FOR ITS DARK GROUND AND INHERITED THE WHOLE PANEL
   TREATMENT WITH IT — including a frame it does not want. It gets the ground explicitly instead;
   borrowing a class for one of its declarations is how a stylesheet stops being readable. */
.act3__map {
  /* Its night token set comes from `tokens.css` beside `:root[data-theme="night"]` — it had NONE
     of its own, so the graticule labels and every quiet mark on the map resolved to the day
     palette over this dark ground (2.11:1). `color-scheme` comes with the set. */
  margin-top: var(--sp-6);
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
}

.act2__annotations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
@media (max-width: 60rem) { .act2__annotations { grid-template-columns: 1fr; gap: var(--sp-5); } }
.act2__more { margin-top: var(--sp-6); }
.act2__more a { color: var(--signal); }

/* ==========================================================================
   ACT II — THE BRIEF AS OBJECT
   Desktop: left 5 holds the card (sticky through the scroll), right 7 the
   spine legend.  Mobile: card first, legend below.
   ========================================================================== */

.act2__head { margin-bottom: var(--sp-7); }

.act2__title {
  font-family: var(--serif);
  font-size: var(--fs-act);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-top: var(--sp-4);
}


.annotation { padding-block: var(--sp-5); border-top: 1px solid var(--hairline); }
.annotation:first-of-type { border-top: 0; padding-top: 0; }
.annotation__label { display: block; margin-bottom: var(--sp-3); }
.annotation__text {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

/* ==========================================================================
   ACT III — ENROUTE
   Full-bleed map, then a two-column depth panel.
   ========================================================================== */

.act3 { overflow: hidden; }

.act3__head { margin-bottom: var(--sp-6); }
.act3__title {
  font-family: var(--serif);
  font-size: var(--fs-act);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-top: var(--sp-4);
}

.map {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-block: var(--sp-6);
}


/* The route line draws departure → arrival.  Westbound: the arc reads
   right → left, bowing north, and the glyph travels the same way. */



@media (prefers-reduced-motion: reduce) {

}







/* No opacity gate. The glyph carries a resting transform in the markup (the departure end,
   on the tangent), so the static state is correct and JS only moves it. Hiding it until a
   script ran was the old approach and it left the no-JS reader with nothing where the
   blueprint asks for a complete static route. */

.map__caption {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- the depth panel ------------------------------------------------------ */

.act3__panel { margin-top: var(--sp-8); align-items: start; }
.act3__timeline { grid-column: 1 / span 6; }
.act3__why { grid-column: 8 / span 5; }

@media (max-width: 60rem) {
  .act3__timeline, .act3__why { grid-column: 1 / -1; }
  .act3__why { margin-top: var(--sp-7); }
}

/* THE PHASE TIMELINE (Component 5) — the flight's own phases, threats
   pinned to the phase they belong to, the active phase glowing on scroll. */
.phases { display: grid; gap: 0; margin-top: var(--sp-5); }

.phase {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);   /* see brief.css .row — same rule */
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline);
  transition: opacity var(--t-micro) var(--ease);
}
.phase:last-child { border-bottom: 1px solid var(--hairline); }

.phase__tick {
  position: relative;
  justify-self: center;
  width: 1px;
  background: var(--line);
}
.phase__tick::before {
  content: "";
  position: absolute;
  top: .45em; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 50%;
  transition: background var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}
.phase.is-active .phase__tick::before {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 0 4px var(--glow);
}

.phase__name {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  transition: color var(--t-micro) var(--ease);
}
.phase.is-active .phase__name { color: var(--ink); }

.phase__threat {
  margin-top: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.phase__none {
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--faint);
}

.act3__whytitle {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.4;
  margin-bottom: var(--sp-4);
}
.act3__whytext {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--muted);
}

/* ==========================================================================
   ACT IV — ARRIVAL
   ========================================================================== */

.act4 { text-align: left; }

.act4__title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-block: var(--sp-4) var(--sp-6);
}

/* The door's own paragraph, set as prose rather than as fine print: CD §12 asks for the fine
   print to be as handsomely set as the headline, and this is the part a reader actually needs —
   what the door is, and which account opens it. */
.act4__body {
  max-width: 62ch;
  margin: var(--sp-5) 0 var(--sp-7);
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--muted);
}

.act4__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

/* The fine print, set in the same careful type as the headline — the small
   words as handsome as the big ones.  That is the whole brand in one line. */
.fineprint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 56rem) { .fineprint { grid-template-columns: 1fr; } }

.fineprint__label { display: block; margin-bottom: var(--sp-3); }
.fineprint__text {
  font-family: var(--serif);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}