/* ============================================================
   BASE — reset, typography, layout primitives, shared devices
   Depends on: tokens.css
   ============================================================ */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;           /* the page must never scroll sideways */
  background:var(--void);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  line-height:var(--leading-display);
  color:var(--text-head);
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- Layout primitives ---- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-padding);
}

.section{position:relative;padding-block:var(--section-padding-y)}
.section--alt{background:rgba(10,18,38,.78)}
.section__head{
  display:flex;flex-direction:column;gap:var(--space-4);
  margin-bottom:var(--space-8);
}

h2{
  font-size:var(--text-display-l);
  font-weight:900;
  text-transform:uppercase;      /* display treatment; copy is authored Title Case */
  letter-spacing:var(--tracking-display);
  text-wrap:balance;
}

/* Vignette darkening section edges, focusing the eye centrally. */
.vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,transparent 44%,rgba(5,9,20,.78));
}

/* ---- Skip link ---- */
.skip{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  background:var(--heat-500);color:var(--void);
  padding:var(--space-3) var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-micro);font-weight:600;
  transition:transform var(--duration-fast) var(--ease-out);
}
.skip:focus{transform:translateY(138px)}

/* ---- Shared devices ---- */

/* Eyebrow label: short, tracked, mono. */
.label{
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--heat-400);
  display:flex;align-items:center;gap:var(--space-3);
}
.label::before{content:"";width:22px;height:2px;background:var(--heat-500);flex:none}

/* Folio number. Used only where the content genuinely is a sequence
   (dialogue tracks, ecosystem constituencies, themes). */
.folio{
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;
  color:var(--ink-700);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
}

/* The GSA logo spectrum bar — thin divider only. */
.spectrum{
  height:3px;width:100%;border:0;
  background:linear-gradient(90deg,
    var(--spectrum-green),var(--spectrum-gold),
    var(--spectrum-blue),var(--spectrum-red));
}

.lede{
  font-size:clamp(1.0625rem,calc(1rem + .4vw),1.25rem);
  color:var(--text-body);
  max-width:62ch;              /* keep running text near 65 characters */
}

/* ---- Atmosphere: fixed engineering grid + thermal bloom ---- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none}
.field__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(34,49,92,.5) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(34,49,92,.5) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 75%);
}
/* Pooled key light. --bloom-* are written by js/motion.js on scroll. */
.field__bloom{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at var(--bloom-x) var(--bloom-y),
      rgba(255,106,61,var(--bloom-a)),transparent 66%),
    radial-gradient(52% 42% at calc(100% - var(--bloom-x)) calc(100% - var(--bloom-y)),
      rgba(43,127,224,calc(var(--bloom-a) * .85)),transparent 64%);
}
/* Everything above the atmosphere. */
.stage{position:relative;z-index:1}