/* ==========================================================================
   AES NUCLEAR — Option C: Cherenkov Blue / Cadweld Copper
   STAGE 1 of the look-and-feel update: TOKEN LAYER ONLY.

   Nothing here touches a component. It overrides the variables aes.css
   already declares, plus the handful of places aes.css hardcodes a colour
   that would otherwise go patchy against the new base.

   Loads after aes.css and after aes-atom.css.
   TO REVERT THE ENTIRE PALETTE: delete this file and the one <link> per
   page that references it. aes.css itself is untouched.

   Base sampled from Cherenkov radiation — the blue glow of a reactor core
   under water — so the palette comes from the physics rather than from
   sci-fi convention. The teal that was already chosen for the atom halo
   sits inside it as the interactive glow, which is why the button reads as
   the system's logic rather than a bolt-on.
   ========================================================================== */

:root{

  /* --- structure ------------------------------------------------------
     Deeper and bluer than the outgoing navy. Body text measures 12.88:1
     against the new base — AAA, and slightly better than the 11.22:1 it
     managed before.                                                     */
  --ink:#050C15;          /* deepest — was #0A1622 (unused by aes.css)   */
  --wall:#08131F;         /* page background — was #0F1E2E              */
  --panel:#10243A;        /* raised panel   — was #152838               */
  --panel-2:#16314C;      /* hover panel    — was #1B3145               */

  /* Rules picked up a blue cast so they sit in the same light as the base */
  --line:rgba(180,208,232,.15);
  --line-soft:rgba(180,208,232,.08);

  /* --- type ------------------------------------------------------------
     body   #C9D8E8 on base  12.88:1  AAA
     mute   #8FA6BE on base   7.45:1  AAA
     white  #F2F7FD on base  16.30:1  AAA                                */
  --steel:#C9D8E8;
  --mute:#8FA6BE;
  --white:#F2F7FD;

  /* --- retained deliberately -------------------------------------------
     --red   stays #D2222B. It is the AES signal red and the only accent
             that carries white at AA on a fill (4.91:1). Primary CTAs
             keep it; the new accents do figures and interaction.
     --halo  stays warm #FFE3BC. It is the logo's own backlight, and
             aes.css uses it for 10.5–12px text at 13.62:1. Copper would
             drop that to 5.61:1 — legal, but not at those sizes.
     Neither is redeclared here, so both inherit from aes.css unchanged.  */

  /* Only two uses in aes.css (a list bullet and an input focus ring),
     so it is safe to pull toward the core glow.                          */
  --blue:#2F93D8;
  --blue-soft:rgba(47,147,216,.16);

  /* --- new tokens, for Stage 2 -----------------------------------------
     Declared now so the component work has somewhere to point. Nothing
     in aes.css consumes these yet, so they change nothing on their own.  */
  --core:#3E7BF5;                        /* Cherenkov blue — the same     */
  --core-soft:rgba(62,123,245,.14);      /* value the atom halo now uses  */
  --core-line:rgba(62,123,245,.28);
  --core-hi:#9DC6FF;                     /* pale core — 9.94:1 on base    */

  --copper:#C67B3F;                      /* cadweld splice / busbar      */
  --copper-soft:rgba(198,123,63,.16);
  --copper-hi:#E0A16B;                   /* 8.04:1 — for smaller figures */
}


/* --------------------------------------------------------------------------
   Hardcoded colours in aes.css that the token change cannot reach.
   Without these four the new base would show seams at the hero, the
   sub-page hero and the splash.
   -------------------------------------------------------------------------- */

/* aes.css:38 — the fixed page wash. Blue lifted toward the core glow,
   the red bloom cooled right down so it no longer tints the lower page. */
body{
  background:
    radial-gradient(1100px 640px at 50% -220px, rgba(47,147,216,.13), transparent 62%),
    radial-gradient(900px 560px at 88% 112%, rgba(62,123,245,.06), transparent 55%),
    linear-gradient(180deg,#06101B 0%, var(--wall) 42%, #061019 100%);
}

/* aes.css:101 — .hero{background:#0F1E2E} */
.hero{ background:var(--wall) }

/* aes.css:212 — .rhero marble wash was rgba(12,20,30)/rgba(15,30,46) on #10202F */
.rhero{
  background:linear-gradient(rgba(6,14,24,.88),rgba(10,26,42,.94)),
             url("marble.jpg") center/cover no-repeat #0A1A2A;
}

/* aes.css:349 — splash plate */
#aesSplash{ background-color:#0A1A2A }


/* ==========================================================================
   ============================ STAGE 2 START ==============================
   Motif layer. Everything below is additive — delete from this banner to
   the STAGE 2 END banner and the site returns to the Stage 1b palette
   with no other effect.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2.1  BLUEPRINT GRID
   Drawing-paper ruling behind the page: a fine 28px grid with a heavier
   line every 140px, the way a drawing sheet is ruled. Held at 3.5% and
   5.5% opacity so it reads as texture, not pattern. Fixed, so the page
   travels over the sheet rather than dragging it along.
   -------------------------------------------------------------------------- */

body{
  background:
    /* fine ruling */
    repeating-linear-gradient(0deg,  rgba(157,198,255,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(157,198,255,.035) 0 1px, transparent 1px 28px),
    /* major ruling, every fifth line */
    repeating-linear-gradient(0deg,  rgba(157,198,255,.055) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(157,198,255,.055) 0 1px, transparent 1px 140px),
    /* Stage 1b washes, unchanged */
    radial-gradient(1100px 640px at 50% -220px, rgba(47,147,216,.13), transparent 62%),
    radial-gradient(900px 560px at 88% 112%, rgba(62,123,245,.06), transparent 55%),
    linear-gradient(180deg,#06101B 0%, var(--wall) 42%, #061019 100%);
  background-attachment:fixed;
}

/* Panels sit on the sheet, so they mask the ruling behind them — otherwise
   the grid shows through and the card stops reading as a solid object. */
.card, .panel, .dl-card, .hero-tags span{ background-color:var(--panel) }


/* --------------------------------------------------------------------------
   2.2  HALO ON HOVER
   The atom's glow, borrowed at a fraction of its strength so cards and
   links belong to the same system as the button. The red edge bar is kept
   exactly as it was — it still wipes down on hover.
   -------------------------------------------------------------------------- */

.card{ transition:transform .18s, border-color .2s, background .2s, box-shadow .28s }
.card:hover{
  border-color:var(--core-line);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 26px rgba(62,123,245,.16);
}
.card:hover .go{ color:var(--core-hi) }

.dl-card{ transition:border-color .2s, background .2s, box-shadow .28s }
.dl-card:hover{
  border-color:var(--core-line);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 22px rgba(62,123,245,.14);
}

.btn{ transition:transform .15s, background .2s, border-color .2s, box-shadow .28s }
.btn:hover{ box-shadow:0 0 24px rgba(62,123,245,.20) }
.btn.primary:hover{ box-shadow:0 0 24px rgba(210,34,43,.32) }   /* CTAs stay red */

.cline:hover{ text-shadow:0 0 14px rgba(62,123,245,.45) }
.cfield input:focus, .cfield textarea:focus{
  border-color:var(--core);
  box-shadow:0 0 0 3px rgba(62,123,245,.14);
}


/* --------------------------------------------------------------------------
   2.3  DIMENSION-LINE SECTION HEADS
   The eyebrow rule already present is extended into a drawing dimension
   line: a run of rule with an end tick, the way a span is called out on a
   GA drawing. Red start dash retained — this only adds the tail.
   -------------------------------------------------------------------------- */

.band-head .spec{ position:relative; padding-bottom:14px }
.band-head .spec::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:7px;
  pointer-events:none;
  background:
    linear-gradient(90deg, var(--core-line), rgba(62,123,245,0) 78%) bottom left/100% 1px no-repeat,
    linear-gradient(var(--core-line), var(--core-line)) bottom left/1px 7px no-repeat;
}


/* --------------------------------------------------------------------------
   2.4  NAV HOVER GLOW
   The same Cherenkov glow the cards and buttons now carry, applied to the
   top menu. The red underline is kept — it still marks hover and current
   page. This only adds light behind the label.
   -------------------------------------------------------------------------- */

header.nav .nav-links a{ transition:color .2s, border-color .2s, text-shadow .22s }
header.nav .nav-links a:hover,
header.nav .nav-links a:focus-visible,
header.nav .nav-links a[aria-current]{
  text-shadow:
    0 -1px 1px rgba(0,0,0,.5),
    0  1px 0  rgba(255,255,255,.35),
    0  0  13px rgba(62,123,245,.55);
}

header.nav .brand{ transition:text-shadow .22s }
header.nav .brand:hover .nm b{ text-shadow:0 0 13px rgba(62,123,245,.55) }
header.nav .brand img{ transition:filter .22s }
header.nav .brand:hover img{
  filter:drop-shadow(0 0 10px rgba(255,201,139,.25))
         drop-shadow(0 0 14px rgba(62,123,245,.45));
}

.nav-burger{ transition:color .2s, border-color .2s, box-shadow .26s }
.nav-burger:hover{
  border-color:var(--core-line);
  box-shadow:0 0 18px rgba(62,123,245,.24);
}


/* --------------------------------------------------------------------------
   2.5  SECTION DIVIDER — SCHEMATIC SECTION LINE
   Replaces the plain 1px rule between sections with a drawing section
   line: rule running in from both margins, breaking around a schematic
   section through an SMR containment on its centreline.

   Drawn entirely in the existing 84px gap between sections, so no content
   moves. Purely decorative and pointer-transparent.
   -------------------------------------------------------------------------- */

section.band{ position:relative; border-bottom-color:transparent }

section.band::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-28px; height:56px;
  pointer-events:none; opacity:.42;
  background:
    url("aes-section-line.svg") center center / 240px 56px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(157,198,255,.20) 11%,
      rgba(157,198,255,.20) calc(50% - 128px),
      transparent           calc(50% - 118px),
      transparent           calc(50% + 118px),
      rgba(157,198,255,.20) calc(50% + 128px),
      rgba(157,198,255,.20) 89%,
      transparent 100%) center center / 100% 1px no-repeat;
}

/* The last band runs into the footer, which brings its own rule. */
section.band:last-of-type::after{ display:none }

@media(max-width:760px){
  /* the glyph crowds a narrow column — keep the rule, drop the vessel */
  section.band::after{ background-image:none, linear-gradient(90deg,
      transparent 0%, rgba(157,198,255,.18) 14%,
      rgba(157,198,255,.18) 86%, transparent 100%) }
}


/* --------------------------------------------------------------------------
   2.6  PAGE VIEW AT 0.8
   Implemented with `zoom`, not `transform: scale()`.

   transform:scale on <body> would break this site: it establishes a new
   containing block, so the sticky header stops sticking and the fixed
   Atom Geometry panel starts scrolling with the page. It also leaves the
   page occupying only 80% of the window with dead space around it,
   because a transform does not reflow.

   `zoom` reflows properly, keeps sticky and fixed intact, and is what the
   browser's own zoom control does. Same visual result, none of the damage.
   -------------------------------------------------------------------------- */

body{ zoom:1 }   /* multiplier removed — see aes-type.css STAGE 8 */


/* --------------------------------------------------------------------------
   2.7  MICRO-LABEL TYPE, MATCHED TO THE SIGNATURE LINE
   The credential captions ("PROJECT PEGASUS DELIVERED") and the contact
   field labels were Share Tech Mono 11px. Both now carry the same face as
   the pull-quote signature: Orbitron 800 / 13.5px / .04em, engraved.
   -------------------------------------------------------------------------- */

.cred span,
.cfield span{
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  color:#7C8794;
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 -2px 2px rgba(0,0,0,.5),
              0 1px 0 rgba(210,222,236,.28),0 2px 2px rgba(210,222,236,.12);
}
/* Orbitron is far wider than the mono it replaces — give the caption room
   to run to two lines rather than clipping it. */
.cred span{ display:block; line-height:1.3; margin-top:6px }
.cfield span{ line-height:1.3 }


/* --------------------------------------------------------------------------
   2.8  DOWNLOAD FILENAMES
   Last of the micro-labels brought onto the signature face. The player
   track title is deliberately left on Share Tech Mono.
   -------------------------------------------------------------------------- */

.dl-card .file{
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.3;
}


/* --------------------------------------------------------------------------
   2.9  THE TWO HERO BUTTONS
   "INTRODUCTION FROM THE CEO" and "THE ATOMIC BUTTON" now carry the same
   face and size as the credential figures (£475M, $12B) — Orbitron at
   clamp(19px,2.2vw,25px) — set to 900, the heaviest weight loaded.
   Icons run at 1.25x the cap height and track the clamp automatically.
   Scoped by id: the two named buttons only, not .btn generally.
   -------------------------------------------------------------------------- */

#vopen, #atomGeoOpen{
  font-family:"Orbitron",sans-serif;
  font-weight:900;
  font-size:clamp(19px,2.2vw,25px);
  letter-spacing:.02em;
  gap:.55em;
  padding:.52em .82em;
  line-height:1.1;
}
#vopen svg, #atomGeoOpen svg{
  height:1.25em; width:auto; flex:none;
}
/* the atom is stroked, so weight has to come from the stroke */
#atomGeoOpen svg{ stroke-width:2.4 }


/* --------------------------------------------------------------------------
   2.10  PAGER AND FOOTER — BOLD ENGRAVED
   Brought onto the same face as the hero signature line
   ("JASON JAMES McCAFFREY · PROJECT DIRECTOR · CIVIL & STRUCTURAL"):
   Orbitron 800 / uppercase / engraved.

   Sizes are graded rather than uniform so the pager keeps its hierarchy:
   the destination title is the loudest thing in it, its label sits under
   the title, and the footer sits under both — closing matter should not
   shout as loudly as navigation.
   -------------------------------------------------------------------------- */

.pager .lab,
.pager .home,
.pager a,
.foot-in{
  font-family:"Orbitron",sans-serif; font-weight:800;
  text-transform:uppercase;
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 -2px 2px rgba(0,0,0,.5),
              0 1px 0 rgba(210,222,236,.28),0 2px 2px rgba(210,222,236,.12);
}

/* destination title — "DOCUMENTATION", "TIME"   (was Orbitron 600 / 15px) */
.pager a{ font-size:15.5px; letter-spacing:.03em; color:var(--steel) }

/* its label — "← 01 PREVIOUS"        (was Share Tech Mono 10.5px) */
.pager .lab{ font-size:13.5px; letter-spacing:.05em; color:#7C8794; margin-bottom:6px }

/* "◆ INDEX"                          (was Share Tech Mono 11.5px) */
.pager .home{ font-size:13.5px; letter-spacing:.05em; color:#7C8794 }

/* footer                             (was Share Tech Mono 11.5px) */
.foot-in{ font-size:12.5px; letter-spacing:.05em; color:#7C8794; gap:20px }
.foot-in a{ color:inherit }
.foot-in a:hover{ color:var(--white) }


/* ============================= STAGE 2 END =============================== */