/* ============================================================================
   public/shared/site.css
   Shared header/footer/nav chrome + base reset for every page built with
   server/layout.js's pageShell(). Page-specific content (report cards,
   metric blocks, upload flows, etc.) stays in each page's own <style> --
   this file only owns the chrome every page shares, plus a minimal reset.
   Depends on tokens.css being loaded first.
   ============================================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); min-height:100vh;
}
a{ color:inherit; }

/* ---------- Header ---------- */
.site-header{ border-bottom:1px solid var(--panel-line); background:var(--bg); position:relative; z-index:10; }
.site-header__inner{
  max-width:1300px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-brand{
  font-family:var(--font-serif); font-weight:700; font-size:22px;
  letter-spacing:-0.01em; text-decoration:none; color:var(--text);
  white-space:nowrap;
}
.site-nav{ display:flex; align-items:center; gap:28px; }
.site-nav a{
  font-family:var(--font-sans); font-size:14px; font-weight:500;
  text-decoration:none; color:var(--muted); padding:4px 0; position:relative;
}
.site-nav a:hover{ color:var(--text); }
.site-nav a.is-active{ color:var(--text); }
.site-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--mesh);
}
.site-nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  color:var(--text);
}
.site-nav-toggle svg{ width:22px; height:22px; display:block; }

@media (max-width:700px){
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--panel); border-bottom:1px solid var(--panel-line);
    padding:8px 28px 16px;
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{ width:100%; padding:10px 0; }
  .site-nav a.is-active::after{ display:none; }
  .site-nav a.is-active{ color:var(--mesh); }
  .site-nav-toggle{ display:block; }
}

/* ---------- Main ---------- */
.site-main{ min-height:60vh; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--panel-line); margin-top:60px; }
.site-footer__inner{
  max-width:1300px; margin:0 auto; padding:32px 28px 40px;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px 32px;
}
.site-footer__brand{ font-family:var(--font-serif); font-weight:700; font-size:16px; color:var(--text); }
.site-footer__nav{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer__nav a{ font-size:13px; color:var(--muted); text-decoration:none; }
.site-footer__nav a:hover{ color:var(--text); }
.site-footer__meta{ font-size:12px; color:var(--muted); width:100%; }

/* ---------- Typography utilities ---------- */
/* .display-italic: one big, sparse display moment per page (a hero
   headline, a pull-quote) -- --font-display (Cormorant, swash-capable
   italic) at large size, not --font-serif (Cormorant Garamond), which
   stays the everyday heading/label/score face. Default size is a true
   hero size; override inline per-page if a specific moment needs
   something smaller. */
.display-italic{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:64px; line-height:1.05; letter-spacing:-0.01em; margin:0;
}
@media (max-width:700px){ .display-italic{ font-size:40px; } }

/* ---------- Buttons ---------- */
/* .lp-btn / .lp-btn--primary: shared here (not just in landingPage.js's own
   <style>) so any page built with pageShell -- the landing page, guide/
   content pages, etc. -- can use the same CTA button without redeclaring
   it. landingPage.js still defines the identical rule in its own page-
   specific <style>, which loads after this file and simply re-asserts the
   same values -- harmless, not a conflict. */
.lp-btn{ font-family:var(--font-serif); font-weight:700; font-size:17px; padding:18px 36px; border-radius:100px; cursor:pointer; text-decoration:none; display:inline-block; }
.lp-btn--primary{ background:var(--text); border:1px solid var(--text); color:var(--bg); }
.lp-btn--secondary{ background:transparent; border:1px solid var(--panel-line); color:var(--text); }