/* Impart Frameworks — shared stylesheet
   Tokens and values taken from the design handoff (design_handoff_impart_site), with three
   changes made 2026-09-04 at Julian's request for section contrast:
     --paper2   a second, visibly darker warm tone for alternating full-bleed bands
     --muted    #6B7484 -> #626B7A, so secondary copy stays above 4.5:1 on the darker band
     --goldtext #8F6418 -> #875F17, same reason
   and a dark palette where the navy centerpiece is actually distinct from the page: the handoff's
   dark --navy (#0D1728) sat three points from the page (#0A1120) and the section vanished.
   Hard prohibitions from the brief still hold: no cards, no shadows, no radius above 2px,
   no gradients, no icons, no third typeface. Section padding is deliberately uneven. */

:root{
  --paper:#FBF9F4; --paper2:#F3EDE3; --surface:#FFFFFF; --ink:#101B2E; --body:#3A4456; --muted:#626B7A;
  --rule:#DDD6C8; --navy:#101B2E; --deep:#0A1120; --gold:#C08A2E; --goldlt:#D9A552;
  --goldtext:#875F17;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Barlow",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0A1120; --paper2:#131F36; --surface:#172540; --ink:#FBF9F4; --body:#C6CCD9; --muted:#8B93A3;
    --rule:#24314A; --navy:#1E3155; --deep:#060B15; --gold:#D9A552; --goldtext:#DCAB5C;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}
::selection{background:rgba(192,138,46,.22)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input,select,textarea,button{font-family:inherit}

/* Every asymmetric grid collapses at 860px, including nested ones. */
@media (max-width:860px){ [data-r2]{grid-template-columns:1fr !important; gap:32px !important} }
@media (max-width:640px){ body{font-size:16px} }

/* ---- Layout ---- */
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
/* A full-bleed tinted band. The outer element carries the color; the inner .wrap carries the
   measure and padding. Not a card: no border, no radius, edge to edge. */
.band{background:var(--paper2)}

/* ---- Type ---- */
/* Serif headings are always weight 400. Weight comes from size, never thickness. */
.h1{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.03;letter-spacing:-.025em;margin:0}
.h2{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.022em;margin:0}
.serif{font-family:var(--serif);font-weight:400;color:var(--ink)}
.kicker{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---- Rules: the main structural device ---- */
.rt{border-top:1px solid var(--rule)}
.rb{border-bottom:1px solid var(--rule)}

/* ---- Approved emphasis treatments. Never invent a fourth, never reach for a box. ---- */
.em-goldtop{border-top:2px solid var(--gold);padding-top:22px}
.em-goldleft{padding-left:22px;border-left:3px solid var(--gold)}
.em-ruleleft{padding-left:22px;border-left:3px solid var(--rule)}

/* ---- Controls ---- */
.btn{display:inline-block;background:var(--navy);color:#FBF9F4;font-size:15px;font-weight:600;letter-spacing:.05em;border-radius:2px;border:0;cursor:pointer;text-align:center}
.link-gold{border-bottom:1px solid var(--gold);padding-bottom:3px}
.field{width:100%;font-size:16px;padding:13px 14px;border:1px solid var(--rule);border-radius:2px;background:var(--surface);color:var(--ink)}
.flabel{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:22px 0 7px}
.flabel.first{margin-top:0}

/* Role picker on the download page. State is set by JS, not by :checked. */
.pill{font-size:14.5px;padding:11px 20px;border-radius:2px;cursor:pointer;text-align:left;background:transparent;border:1px solid var(--rule);color:var(--muted);font-weight:400}
.pill[aria-pressed="true"]{border:1px solid var(--gold);background:rgba(192,138,46,.10);color:var(--ink);font-weight:600}

/* Netlify honeypot. Offscreen rather than display:none so the parser still sees it. */
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden}

/* ---- Header ---- */
.site-header{border-bottom:1px solid var(--rule)}
.site-header-in{max-width:1140px;margin:0 auto;padding:22px 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.lockup{display:flex;align-items:center;gap:14px}
.lockup img{display:block;height:42px;width:auto;flex:none}
/* The wordmark is live type, not the raster lockup — at 40px tall the raster sub-line blurred. */
.wordmark{font-family:var(--serif);font-size:27px;line-height:1;color:var(--ink);letter-spacing:-.012em}
.wordmark-sub{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--goldtext);font-weight:600;margin-top:6px}
/* Every page carries the way to the other audience, so nobody is stranded on the wrong one. */
.header-nav{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:flex-end}
.header-link{font-size:13.5px;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:3px}

/* ---- Footer ---- */
.site-footer{background:var(--deep);padding:64px 0 56px}
.site-footer-in{max-width:1140px;margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.footer-mark{display:block;height:52px;width:auto}
.footer-nav{display:flex;flex-wrap:wrap;gap:28px;align-items:center;font-size:14px}
.footer-nav a{color:rgba(251,249,244,.72)}
.footer-note{margin:0;font-size:13.5px;line-height:1.6;color:rgba(251,249,244,.52);max-width:340px}