/* FRST embeds: shared shell.
 Palette, type and page furniture used by every hosted embed page.
 Page-specific rules live alongside in <page>.css. */

:root{
  /* Team-Color-Pallete.txt, TEAM COLORS only. Group colors (Splash, Current,
     Category 5, etc.) identify a specific training group and must not be
     reused as general design colors. See CONVENTIONS.md. */
  --navy-900:#001c50; --navy-800:#001c50; --navy-700:#00337f; --blue:#004aad;
  --accent:#ffffff; --accent-d:#004aad;
  --bone:#eeeeee; --bone-d:#e3e3e3; --plate:#ffffff;
  --ink:#484848; --ink-soft:#8b8b8b; --rule:#e3e3e3; --gray:#b6b6b6;
  --t1:#f6c445; --t2:#fb7a5a; --t3:#1c8de0; --t4:#29b6d0; --t5:#8cdce8; --t6:#eef3f7;
  --display:'Oswald','Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Poppins','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.frst-mark{display:block;height:auto;max-width:100%}
.shell{max-width:1120px;margin:0 auto;padding:0 32px}

/* Shared type ------------------------------------------------------------ */
.eyebrow{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:0}
.eyebrow.dim{color:var(--ink-soft)}
h2.sect{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,46px);line-height:1;letter-spacing:.005em;margin:12px 0 0;
  color:var(--navy-800)}
.dark h2.sect,.climb h2.sect{color:#fff}
.lede{font-size:17px;font-weight:300;line-height:1.65;max-width:62ch;margin:16px 0 0;color:var(--ink)}
.dark .lede,.climb .lede{color:rgba(255,255,255,.8);font-weight:400}
.rule{width:54px;height:3px;background:var(--accent-d);border:0;margin:26px 0 0}
.dark .rule,.climb .rule{background:var(--accent)}
.rule.center{margin-left:auto;margin-right:auto}

/* ---------- HERO -------------------------------------------------------- */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding:64px 0 78px}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% -10%,rgba(0,74,173,.55) 0%,rgba(0,13,43,0) 62%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.055;
  background:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 9px)}
.hero .shell{position:relative;z-index:2;text-align:center}
.hero .frst-mark{width:118px;color:#fff;margin:0 auto 34px;opacity:.96}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,9vw,104px);line-height:.92;letter-spacing:-.005em;margin:14px 0 0}
.hero h1 .hl{color:var(--accent);display:block}
.hero .lede{margin:24px auto 0;color:rgba(255,255,255,.76);font-size:18px;text-align:center}
.tallies{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:44px 0 0;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.tally{padding:20px 34px;flex:0 1 auto;position:relative}
.tally + .tally::before{content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:rgba(255,255,255,.14)}
.tally b{display:block;font-family:var(--display);font-weight:500;font-size:40px;
  line-height:1;color:#fff}
.tally span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:7px}

/* ---------- Sections ---------------------------------------------------- */
section{padding:84px 0}
.dark{background:var(--navy-800);color:#fff}
.sect-head{max-width:62ch}
.sect-head.center{margin:0 auto;text-align:center}

/* ---------- CLOSING ----------------------------------------------------- */
.closing{background:var(--navy-900);color:#fff;text-align:center;padding:84px 0 70px;
  position:relative;overflow:hidden}
.closing::before{content:"";position:absolute;inset:0;
  background:radial-gradient(100% 80% at 50% 120%,rgba(0,74,173,.5) 0%,rgba(0,13,43,0) 62%)}
.closing .shell{position:relative;z-index:2}
.closing h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,5.6vw,62px);line-height:1;margin:16px 0 0}
.closing h2 .hl{color:var(--accent)}
.closing .lede{margin:22px auto 0;text-align:center;color:rgba(255,255,255,.74)}
.closing .frst-mark{width:92px;color:#fff;margin:46px auto 0;opacity:.85}
.colophon{margin:22px 0 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34)}


/* ---------- Responsive -------------------------------------------------- */
@media (max-width:820px){
.shell{padding:0 20px}
section{padding:58px 0}
.hero{padding:44px 0 56px}
.tally{padding:16px 22px}
.tally b{font-size:32px}
}
@media (max-width:560px){
/* three tallies wrap awkwardly at phone width; stack them with rules instead */
.tally{flex:1 1 100%;padding:15px 0}
.tally + .tally::before{display:none}
.tally + .tally{border-top:1px solid rgba(255,255,255,.12)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }
@media print{
body{background:#fff}
.hero,.closing{background:#fff !important;color:#000 !important}
.hero::before,.hero::after,.closing::before{display:none}
.hero h1 .hl,.closing h2 .hl{color:#000}
.tally b,.tally span,.hero .lede,.closing .lede{color:#000 !important}
}