/* ==========================================================================
   Vantage site shell
   Everything shared by every page: reset, layout container, section surface
   system, navigation, buttons, status chips, framed figures, footer, reveal.
   Page-specific composition lives in each page's own <style> block.
   ========================================================================== */

/* --- Reset and base ------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface-canvas);
  color:var(--text-body);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a,button{outline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--text-primary)}
[hidden]{display:none !important}

.skip-link{position:fixed;top:var(--spacing-12);left:var(--spacing-12);z-index:100;padding:var(--spacing-8) var(--spacing-12);background:var(--text-primary);color:var(--surface-canvas);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-28)}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-faint);display:inline-flex;align-items:center;gap:var(--spacing-8);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--rule-edge)}

/* --- Section surface system ----------------------------------------------
   A boundary is carried by three cues together, never one: a full-bleed
   --rule-edge rule, a change of surface, and a change of pace. Sections
   alternate canvas / band, and adjacent sections never share both a surface
   and a padding tier. The surface ladder in tokens.css was widened so the
   second of those cues is actually perceptible.                             */
section{position:relative;scroll-margin-top:var(--anchor-offset)}
.band{background:var(--surface-band)}
.sec{padding:var(--section-pad) 0;border-top:1px solid var(--rule-edge)}
.sec-tight{padding:var(--section-pad-tight) 0}
.sec-wide{padding:var(--section-pad-lg) 0}

.sec-head{max-width:66ch;margin-bottom:var(--spacing-48)}
.sec-head h2{font-weight:var(--font-weight-medium);color:var(--text-primary);font-size:var(--text-h2);line-height:1.2;letter-spacing:var(--tracking-display);margin:var(--spacing-20) 0 var(--spacing-16)}
.sec-head p{color:var(--text-muted);font-size:var(--text-body-md)}

/* --- Navigation ---------------------------------------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(25px);
  background:rgba(0,0,0,.55);
  border-bottom:1px solid transparent;
  transition:border-color var(--motion-fast) var(--motion-ease-out),background var(--motion-fast) var(--motion-ease-out);
}
header.scrolled,header.menu-open{border-color:var(--rule-edge);background:rgba(0,0,0,.94)}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--spacing-16)}
.brand{display:flex;align-items:center;min-height:44px;gap:var(--spacing-12);font-weight:var(--font-weight-semibold);font-size:19px;letter-spacing:.04em;color:var(--text-primary);white-space:nowrap}
.brand .mark{width:26px;height:26px;flex:0 0 auto}
.brand .mark svg{display:block}
.navlinks{display:flex;gap:var(--spacing-24);align-items:center}
/* 44px hit target at every width, not only on coarse pointers. The links sit
   inside a 68px header and are flex-centred, so this enlarges the target
   without moving anything visually. */
.navlinks a{display:flex;align-items:center;min-height:44px;font-size:var(--text-body-sm);color:var(--text-muted);white-space:nowrap;transition:color var(--motion-fast) var(--motion-ease-out)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--text-primary)}
/* Only surfaces below 560px, where .nav-cta is hidden and the menu would
   otherwise contain no route to the contact path. Selector is kept at the
   same specificity as `.navlinks a` so the responsive rules below win. */
.navlinks a.nav-contact{display:none}

/* --- Buttons --------------------------------------------------------------
   Every action is a ghost outline. Priority is carried by border and label
   brightness, never by a fill. Minimum target 44px on every axis.           */
.btn{
  font-family:var(--font-sans);font-size:var(--text-body-sm);
  min-height:44px;padding:var(--spacing-12) var(--spacing-20);
  border:1px solid var(--rule-edge);border-radius:var(--radius-sm);
  color:var(--text-muted);background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);
  transition:border-color var(--motion-fast) var(--motion-ease-out),color var(--motion-fast) var(--motion-ease-out);
}
.btn:hover{border-color:var(--text-primary);color:var(--text-primary)}
.btn-primary{color:var(--text-primary);border-color:rgba(255,255,255,.42)}
.btn-primary:hover{border-color:var(--text-primary)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn[disabled]:hover{border-color:var(--rule-edge);color:var(--text-muted)}
.nav-toggle{display:none;min-width:44px;min-height:44px;background:none;border:1px solid var(--rule-edge);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;padding:var(--spacing-8)}
.cta-row{display:flex;gap:var(--spacing-16);flex-wrap:wrap;align-items:center}

/* --- Status chips ---------------------------------------------------------
   The three status colors are the only accents in the system, and each one
   means exactly one thing everywhere it appears.                            */
.chip{display:inline-flex;align-items:center;gap:var(--spacing-8);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.12em;text-transform:uppercase;padding:var(--spacing-4) var(--spacing-8);border-radius:var(--radius-xs);border:1px solid var(--rule-hairline);background:var(--surface-chrome);color:var(--text-faint)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-nominal{color:var(--status-nominal);border-color:rgba(58,211,137,.34)}
.chip-threat{color:var(--status-threat);border-color:rgba(255,107,95,.34)}

/* --- Framed figure --------------------------------------------------------
   Shared chrome for anything that is a picture of the system.               */
.frame{background:var(--surface-panel);border:1px solid var(--rule-edge);border-radius:var(--radius-sm);overflow:hidden;display:block}
.frame-bar{display:flex;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);border-bottom:1px solid var(--rule-hairline);background:var(--surface-chrome);font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-faint)}
.frame-bar .grow{margin-left:auto}

/* --- Footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--rule-edge);background:var(--surface-band);padding:var(--spacing-64) 0 var(--spacing-32)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--spacing-40);margin-bottom:var(--spacing-48)}
.foot-brand p{color:var(--text-muted);font-size:var(--text-body-sm);max-width:34ch;margin-top:var(--spacing-16)}
.footer-brand{font-size:18px}
.foot-col h5{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--spacing-12)}
.foot-col a,.foot-col .plain{display:flex;align-items:center;min-height:44px;color:var(--text-muted);font-size:var(--text-body-sm);transition:color var(--motion-fast) var(--motion-ease-out)}
.foot-col a:hover{color:var(--text-primary)}
.foot-col .plain{font-family:var(--font-mono);color:var(--text-faint);user-select:all}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-24);border-top:1px solid var(--rule-hairline);flex-wrap:wrap;gap:var(--spacing-12)}
.foot-bot p{font-size:12.5px;color:var(--text-faint)}
.badge{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.1em;color:var(--text-faint);border:1px solid var(--rule-hairline);background:var(--surface-chrome);padding:6px var(--spacing-12);border-radius:var(--radius-xs)}

/* --- Reveal ---------------------------------------------------------------
   Held at opacity 0 only when scripting can clear it. Each page ships a
   <noscript> override so a script-off visitor sees the full page.           */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--motion-reveal) var(--motion-ease-out),transform var(--motion-reveal) var(--motion-ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Responsive shell ----------------------------------------------------- */
@media(max-width:1040px){
  .nav-toggle{display:block}
  .nav-cta{margin-left:auto}
  .navlinks{display:none;position:absolute;top:var(--header-height);left:0;right:0;padding:var(--spacing-8) var(--spacing-28) var(--spacing-20);background:rgba(0,0,0,.97);border-bottom:1px solid var(--rule-edge);flex-direction:column;align-items:stretch;gap:0}
  header.menu-open .navlinks{display:flex}
  .navlinks a{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--rule-hairline)}
}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr}
}
/* Touch input gets 44px targets at every width, including the wide-viewport
   horizontal nav that a touchscreen laptop or landscape tablet still sees. */
@media(pointer:coarse){
  .navlinks a{display:flex;align-items:center;min-height:44px}
}
@media(max-width:560px){
  .wrap{padding-left:var(--spacing-20);padding-right:var(--spacing-20)}
  .navlinks{padding-left:var(--spacing-20);padding-right:var(--spacing-20)}
  .nav-cta{display:none}
  .navlinks a.nav-contact{display:flex}
  .sec,.sec-wide{padding:var(--section-pad-tight) 0}
  .foot-top{grid-template-columns:1fr}
}