/* PHAROS - the page layer over the Cortex Prime design system.
   Brand manual, edition 01. styles.css is a copy of the one in the
   cortexprime-site repo and is not edited here; if a token changes, it changes
   there and is copied across. This file carries only what that file has no
   reason to know about: a stage, where a computed canvas sits beside the claim
   it supports.

   Every value below is a token. Nothing here introduces a colour, a radius or a
   duration of its own. */

/* A stage is one claim and the scene that computes it. Deliberately not
   viewport-locked: 06 sets the section rhythm at 96px, and a scroll story that
   pins the window is the autoplay pattern 09 forbids. */
.stage{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);align-items:center;
}
.stage .copy > .lede{margin-top:var(--s24)}

/* The scene changes side down the page so the eye has to re-enter each claim.
   Source order stays claim-then-scene, so a reader without CSS gets the words. */
.stage.rev .scene{order:2}

@media(max-width:940px){
  .stage{grid-template-columns:1fr;gap:var(--s32)}
  .stage.rev .scene{order:0}
}

/* 06: panels are square, bordered by a hairline, and flat. The canvas paints
   its own basalt field, so the panel carries no background of its own. */
.scene{
  position:relative;aspect-ratio:1/.82;overflow:hidden;
  background:var(--basalt-950);border:1px solid var(--border-hairline);
  border-radius:var(--radius-panel);
}
.scene canvas{position:absolute;inset:0;width:100%;height:100%}

/* A figure the engine computed, with the mono line that says what it is.
   05: the value is evidence, so the label under it is Plex Mono. */
.figure{margin-top:var(--s32)}
.figure b{
  display:block;font-size:var(--display-3);font-weight:600;line-height:1;
  letter-spacing:var(--tr-display);color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
.figure span{
  display:block;margin-top:var(--s12);
  font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--text-faint);
}

/* The hero scene sits on basalt with the graticule, like every other hero in
   the system; only the aspect handling differs, because this one is full bleed. */
.hero .scene{
  position:absolute;inset:0;aspect-ratio:auto;border:0;background:none;z-index:1;
}

/* 08 / the export-control note closes the page. Body floor is 15px, so it is
   set at body-3 in mono, which 05 permits for legal lines. */
.disclosure{
  margin-top:var(--s32);padding-top:var(--s24);
  border-top:1px solid rgba(252,251,248,.14);
  font-family:var(--font-mono);font-size:var(--mono-1);line-height:var(--lh-mono);
  letter-spacing:var(--tr-mono);color:var(--basalt-400);max-width:var(--measure-prose);
}