/* 01-base.css - 1 of 6 - Tokens (:root), resets, base typography, layout primitives, reveal.
   Order matters: these six files are one stylesheet cut at section
   boundaries, and every page links them in numeric order. A rule in a
   later file overrides an earlier one exactly as it did in the single
   file. Do not reorder the links, and do not add a seventh without
   updating check.js, which enforces the manifest. */


:root{
  --bg:#040816;--bg2:#071021;--ink:#f6f8ff;--muted:#a6b4d0;
  --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.07);
    --accent:#74c476;--accent-mid:#41ab5d;--accent-deep:#238b45;
  --accent-rgb:116,196,118;--accent-deep-rgb:35,139,69;
  --dark:#07101f;
  --shadow:0 30px 120px rgba(0,0,0,.42);--shadow-soft:0 20px 60px rgba(0,0,0,.25);
  --radius:28px;--max:1220px;
  --font-display:"Chivo",system-ui,sans-serif;
  --font-body:"Chivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-serif:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
  --font-mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Glow radii are pinned to the viewport WIDTH rather than left to farthest-corner.
   A radial-gradient with no size resolves against its own box - here body, whose
   height is the whole document - so "transparent 24%" came out as 86vw on desktop
   but 572vw on a phone, where the page is taller AND the screen is narrower. Six
   times too big: the glow stopped falling off inside the screen and became a flat
   green wash.
   The unit must be vw, not vmax. vmax is the LONG edge, which on a portrait phone
   is the height - the very dimension that should not drive this - so it left the
   glow at 1.9 screen-widths against desktop's 0.86 and the wash was still visible.
   vw is the same number as vmax on a landscape desktop, so that rendering is
   unchanged, and it finally makes a phone match it. It is also the only stable
   choice on iOS, where vh/vmax grow and shrink as the URL bar hides.
   Each fade ends on its own hue at zero alpha instead of `transparent`, which is
   the same result in a premultiplied compositor but says so explicitly. */
body{margin:0;font-family:var(--font-body);color:var(--ink);background:
radial-gradient(circle 86vw at 12% 0%,rgba(var(--accent-deep-rgb),.30),rgba(var(--accent-deep-rgb),0)),
radial-gradient(circle 65vw at 86% 10%,rgba(65,171,93,.13),rgba(65,171,93,0)),
radial-gradient(circle 51vw at 60% 35%,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),0)),
linear-gradient(180deg,var(--bg),var(--bg2) 42%,#03060d);overflow-x:hidden}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
svg{display:block;max-width:100%}
/* height:auto is the required partner to a width-only rule: the width/height
   attributes on <img> are presentational hints, so a rule that sets only width
   leaves height pinned at the attribute value and the bitmap stretches to fill.
   Rules that want a fixed box (.brand img, .corridor-card img) set both and win. */
img{display:block;max-width:100%;height:auto}
button{color:inherit}
.container{width:min(var(--max),calc(100% - 42px));margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:0;z-index:400;padding:12px 18px;border-radius:0 0 14px 0;background:var(--accent);color:#05111d;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.skip-link:focus{left:0}
.bg-orb{position:fixed;pointer-events:none;border-radius:999px;filter:blur(56px);opacity:.15;z-index:-1}
.orb1{width:360px;height:360px;background:var(--accent);top:90px;left:-80px}
.orb3{width:280px;height:280px;background:var(--accent-mid);left:38%;bottom:0}
.reveal{opacity:0;transform:translateY(22px);transition:.75s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left,.reveal-right{opacity:0;transition:.75s cubic-bezier(.2,.8,.2,1)}
.reveal-left{transform:translateX(-48px)}
.reveal-right{transform:translateX(48px)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}