/* =============================================================================
   site.css  ·  shared component styles for the whole site
   Depends on tokens.css (load it first). Matches the System Atlas language:
   warm graphite + antique brass, serif authority / grotesque UI / mono receipts.
   Holds the cross-page chrome (top nav, footer, data-handling promise),
   the shared type scale, buttons, the reveal motion, and the two-world
   primitives (dark "machine" card vs. parchment "paper" card).
   Page-specific layout stays in each page. No build step. No localStorage.
   ============================================================================= */

/* ---- reset + base ------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink-900);
  color:var(--tx);
  font-family:var(--grotesque);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:radial-gradient(1100px 560px at 50% -12%,var(--brass-faint),transparent 64%);
  background-repeat:no-repeat;
}
.tnum{font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:var(--brass-bright);text-decoration:none}
a:hover{color:var(--wm)}
::selection{background:var(--brass-soft);color:var(--wm)}

/* =============================================================================
   CROSS-PAGE TOP NAV  ·  thin, sticky, proof-first labels, one persistent CTA
   Wordmark slot is brand-agnostic: swaps a standalone name in without restructure.
   ============================================================================= */
.sitenav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px clamp(18px,4vw,40px);
  background:rgba(10,9,7,.96);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sitenav.scrolled{background:rgba(10,9,7,.97);border-bottom-color:var(--line-2)}
.sitenav .wm{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-78);white-space:nowrap}
.sitenav .wm:hover{color:var(--tx-78)}
.sitenav .wm b{color:var(--wm);font-weight:600;letter-spacing:.13em}
.sitenav .wm .wm-dot{width:5px;height:5px;border-radius:50%;background:var(--brass);transform:translateY(-1px);flex:none}
.sitenav .wm .wm-sub{color:var(--tx-78)}
.navlinks{display:flex;align-items:center;gap:22px;margin-left:auto}
.navlinks a{font-family:var(--grotesque);font-size:12.5px;font-weight:500;color:var(--tx-78);
  letter-spacing:.01em;white-space:nowrap;transition:color .2s var(--ease)}
.navlinks a:hover{color:var(--wm)}
.navlinks a.here{color:var(--brass-bright)}
.nav-cta{font-family:var(--grotesque);font-size:12.5px;font-weight:600;color:var(--ink-900);
  background:linear-gradient(180deg,var(--brass-bright),var(--brass));border-radius:22px;
  padding:9px 17px;white-space:nowrap;box-shadow:0 8px 22px rgba(154,108,41,.26);
  transition:transform .2s var(--ease),filter .2s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.05);color:var(--ink-900)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;
  color:var(--tx-60);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;cursor:pointer}
@media(max-width:860px){
  .navlinks{position:fixed;inset:54px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,9,7,.97);border-bottom:1px solid var(--line-2);padding:8px clamp(18px,4vw,40px) 16px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s var(--ease)}
  .navlinks.open{transform:none;opacity:1;pointer-events:auto}
  .navlinks a{padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
  .nav-cta{margin-top:12px;text-align:center}
  .nav-toggle{display:inline-block}
}
@media(max-width:480px){
  .sitenav .wm{min-width:0}
  .sitenav .wm .wm-sub{display:none}
  .sitenav .wm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* =============================================================================
   SECTION SCAFFOLD + SHARED TYPE  (mirrors the Atlas)
   ============================================================================= */
.section{position:relative;padding:clamp(48px,7vw,82px) clamp(20px,5vw,56px);border-top:1px solid var(--line)}
.section.reveal{opacity:0;transform:translateY(18px)}
.section.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.wrap{max-width:1100px;margin:0 auto}
.measure{max-width:720px}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);font-weight:500;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow .enum{color:var(--tx-30)}
.sechead{max-width:880px;margin-bottom:34px}
.sectitle{font-family:var(--serif);font-size:clamp(26px,4vw,33px);font-weight:500;color:var(--wm);
  line-height:1.15;letter-spacing:-.012em;margin-top:15px}
/* Emphasis discipline: a heading em is restrained by default (warm white italic,
   carries the sentence rhythm without shouting). Brass italic is the RARE turn,
   opted into with .turn, so it reads as the one moment that matters on a page. */
.sectitle em{font-style:italic;color:var(--wm);font-weight:500}
.sectitle em.turn,.turn{font-style:italic;color:var(--brass-bright);font-weight:500}
.seclead{font-family:var(--serif);font-size:16.5px;color:var(--tx-78);line-height:1.62;margin-top:15px;max-width:760px;font-weight:400}
.seclead em{font-style:italic;color:var(--tx)}
.seclead b{color:var(--tx);font-weight:600}
.prose{font-family:var(--serif);font-size:15.5px;line-height:1.72;color:var(--tx-78);max-width:680px;font-weight:400}
.prose + .prose{margin-top:15px}
.prose em{font-style:italic;color:var(--tx)}
.prose b{font-weight:600;color:var(--tx)}

/* ---- buttons ------------------------------------------------------------ */
.btn-brass{font-family:var(--grotesque);font-size:13.5px;font-weight:600;color:var(--ink-900);
  background:linear-gradient(180deg,var(--brass-bright),var(--brass));border:none;border-radius:24px;
  padding:13px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  box-shadow:0 12px 30px rgba(154,108,41,.30);transition:transform .2s var(--ease),filter .2s var(--ease)}
.btn-brass:hover{transform:translateY(-1px);filter:brightness(1.05);color:var(--ink-900)}
.btn-brass .tri{font-size:10px;transform:translateY(.5px)}
.btn-ghost{font-family:var(--grotesque);font-size:13.5px;font-weight:600;color:var(--tx);
  background:none;border:1px solid var(--line-2);border-radius:24px;padding:12px 22px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:.2s var(--ease)}
.btn-ghost:hover{border-color:var(--brass-soft);color:var(--wm)}
.cta-aside{font-family:var(--grotesque);font-size:12.5px;color:var(--tx-44)}
.cta-aside a{color:var(--tx-60);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.cta-aside a:hover{color:var(--brass-bright)}

/* ---- receipt + honesty marks (mono "evidence" voice) -------------------- */
.receipt{font-family:var(--mono);font-size:10px;color:var(--tx-44);border:1px solid var(--line);
  border-radius:var(--r1);padding:9px 12px;display:inline-flex;align-items:center;gap:10px}
.receipt b{color:var(--brass);font-weight:500}
.syn{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--tx-44)}
.hontag{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--tx-30)}

/* =============================================================================
   TWO-WORLD PRIMITIVES  ·  dark "machine" card vs. parchment "paper" card.
   The whole pitch (the machine vs. the document on your desk) rendered in layout.
   ============================================================================= */
.machine{border:1px solid var(--line-2);border-radius:var(--r3);overflow:hidden;
  background:linear-gradient(176deg,#14110b,#0e0c09 60%,#0b0908);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.machine .m-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-44)}
.machine .m-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 0 var(--brass-glow);animation:pulse 3.4s var(--ease) infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--brass-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* machine card body · shared so every .machine card has inner padding + serif
   voice (was defined only inside see-it-work, so the-loop's box ran flush and
   fell back to the UI font). Page-local .mcard rules still win ties for their page. */
.machine .m-in{padding:16px 19px 18px}
.machine .mc-quote{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.5;color:var(--tx);max-width:640px}
.machine .mc-quote b{color:var(--brass-bright);font-style:normal;font-weight:600}
.machine .mc-detail{font-family:var(--serif);font-size:13px;line-height:1.6;color:var(--tx-60);margin-top:10px;max-width:660px}
.machine .mc-detail:first-child{margin-top:0}
.machine .mc-detail b{color:var(--tx)}

.paper{background:var(--paper-0);color:var(--doc-ink);border-radius:var(--r2);overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.5)}
.paper .p-stripe{height:4px;background:linear-gradient(90deg,var(--brass-deep),var(--brass))}
.paper .p-inner{padding:clamp(20px,3vw,34px) clamp(18px,3vw,40px)}
.paper .p-org{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--doc-ink)}
.paper .p-conf{font-family:var(--grotesque);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);font-weight:700;margin-top:3px}
.paper p{font-family:var(--serif);font-size:13px;line-height:1.62;color:var(--doc-ink-72);margin:6px 0}
.paper p b{color:var(--doc-ink)}
.paper .cite{color:var(--brass-deep);font-style:italic}
.paper .exh{font-family:var(--mono);font-size:10.5px;color:var(--brass-deep);background:rgba(154,108,41,.10);border-radius:3px;padding:0 4px}
.paper .hl{background:var(--rust-faint);border-bottom:1px solid var(--rust);padding:0 2px}

/* =============================================================================
   LIGHT/DARK RHYTHM  ·  the machine hands you a document.
   A .paperband is a full-bleed parchment section: the reader crosses from the
   dark "system doing the work" world into the light "work product on your desk"
   world. Use it for document/prose moments so every page has a felt cadence,
   dark -> light -> dark, instead of one long graphite stretch. Child type is
   re-toned to ink-on-parchment automatically.
   ============================================================================= */
.paperband{
  background:linear-gradient(178deg,var(--paper-1),var(--paper-0) 42%,var(--paper-1));
  border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  color:var(--doc-ink)}
.paperband::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass-deep),transparent);opacity:.5}
.paperband .eyebrow{color:var(--brass-deep)}
.paperband .eyebrow .enum{color:var(--doc-ink-36)}
.paperband .sectitle{color:var(--doc-ink)}
.paperband .sectitle em{color:var(--doc-ink);font-style:italic}
.paperband .sectitle em.turn,.paperband .turn{color:var(--brass-deep)}
.paperband .seclead{color:var(--doc-ink-72)}
.paperband .seclead em{color:var(--doc-ink)}
.paperband .seclead b{color:var(--doc-ink)}
.paperband .prose{color:var(--doc-ink-72)}
.paperband .prose em{color:var(--doc-ink)}
.paperband .prose b{color:var(--doc-ink)}
.paperband .cite{color:var(--brass-deep);font-style:italic}
.paperband .exh{font-family:var(--mono);font-size:10.5px;color:var(--brass-deep);
  background:rgba(154,108,41,.12);border-radius:3px;padding:0 4px}
.paperband .hl{background:var(--rust-faint);border-bottom:1px solid var(--rust);padding:0 2px}
.paperband a{color:var(--brass-deep)}
.paperband a:hover{color:var(--doc-ink)}

/* Margin pin-cites  ·  small exhibit refs set in the document margin, so a
   parchment section reads like an annotated filing. Wrap prose in .annot and
   drop <span class="pincite">Ex. C · BWC 02:11:07</span> beside the claim.
   Falls inline under the text on narrow screens. */
.annot{position:relative}
.pincite{font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--brass-deep);display:block;
  padding-left:11px;border-left:2px solid var(--brass-soft);margin:4px 0}
.pincite .pc-k{color:var(--doc-ink-36);display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:1000px){
  .annot{padding-right:212px}
  .annot .pincite{position:absolute;right:0;width:188px;padding-left:14px;margin:0;
    border-left:2px solid var(--brass-soft)}
}

/* =============================================================================
   TWO-WORLD RHYTHM  ·  parchment "document" band vs. the default graphite "machine".
   Add class "paperband" to any .section to flip it into the light document world.
   Machine cards (.machine) intentionally stay dark inside a light band, that IS
   the two-world contrast. Dark = the system; light = the paper on your desk.
   ============================================================================= */
.paperband{background:var(--paper-1);color:var(--doc-ink);border-top:1px solid var(--paper-line)}
.paperband .eyebrow{color:var(--brass-deep)}
.paperband .eyebrow .enum{color:var(--doc-ink-36)}
.paperband .sectitle,.paperband h2,.paperband h3{color:var(--doc-ink)}
.paperband .sectitle em,.paperband h2 em{color:var(--brass-deep)}
.paperband .seclead{color:var(--doc-ink-72)}
.paperband .seclead b,.paperband .seclead em{color:var(--doc-ink)}
.paperband .prose{color:var(--doc-ink-72)}
.paperband .prose b,.paperband .prose em{color:var(--doc-ink)}
.paperband .btn-ghost{color:var(--doc-ink);border-color:var(--brass-soft)}
.paperband .btn-ghost:hover{color:var(--doc-ink);border-color:var(--brass-deep)}
.paperband .cta-aside{color:var(--doc-ink-52)}
.paperband .cta-aside a{color:var(--brass-deep);border-bottom-color:var(--brass-soft)}
.paperband .receipt{color:var(--doc-ink-52);border-color:var(--paper-line)}
.paperband .receipt b{color:var(--brass-deep)}
.paperband .hontag,.paperband .syn{color:var(--doc-ink-36)}
.paperband .pincite{color:var(--brass-deep);border-left-color:var(--brass-soft)}
.paperband .pincite .pc-k{color:var(--doc-ink-36)}
/* a light-world document floats on the parchment desk with tone + shadow */
.paperband .paper{box-shadow:0 22px 46px -24px rgba(34,29,20,.42),0 0 0 1px var(--paper-line)}

/* =============================================================================
   FOOTER  ·  the plain-English data-handling promise as one human's commitment
   ============================================================================= */
.sitefoot{border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) clamp(20px,5vw,56px) 48px;
  background:linear-gradient(180deg,transparent,rgba(201,154,75,.03))}
.sitefoot .foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:40px 56px;align-items:start}
@media(max-width:820px){.sitefoot .foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-promise .eyebrow{margin-bottom:16px}
.foot-promise h3{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--wm);line-height:1.3;letter-spacing:-.01em;margin-bottom:14px}
.foot-promise ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-promise li{font-family:var(--serif);font-size:13.5px;line-height:1.5;color:var(--tx-60);padding-left:18px;position:relative}
.foot-promise li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:1px;background:var(--brass);transform:rotate(45deg)}
.foot-promise li b{color:var(--tx);font-weight:600}
.foot-promise .promise-note{font-family:var(--mono);font-size:10px;color:var(--tx-30);margin-top:16px;line-height:1.6;max-width:480px}
.foot-promise .promise-note a{color:var(--tx-44)}
.foot-side{display:flex;flex-direction:column;gap:20px}
.foot-sign{font-family:var(--mono);font-size:12px;color:var(--tx-60);line-height:1.8}
.foot-sign b{color:var(--wm);font-weight:600;font-family:var(--serif);font-size:16px;letter-spacing:.01em}
.foot-sign .role{color:var(--tx-44)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-nav a{font-family:var(--grotesque);font-size:12px;color:var(--tx-60)}
.foot-nav a:hover{color:var(--brass-bright)}
.foot-honest{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--tx-44);line-height:1.6;max-width:560px}
.foot-bar{max-width:1100px;margin:30px auto 0;border-top:1px solid var(--line);padding-top:18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--tx-30);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---- popover a11y: hover dossier cards open on focus and tap too -------- */
.pp-stage:focus-visible .ag-pop,.pnode:focus-visible .ag-pop,
.pp-stage.pop-open .ag-pop,.pnode.pop-open .ag-pop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pp-stage:focus-visible,.pnode:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:6px}
@media(max-width:700px){
  .ag-pop{display:none;width:min(240px,80vw)}
  .pp-stage:focus-visible .ag-pop,.pnode:focus-visible .ag-pop,
  .pp-stage.pop-open .ag-pop,.pnode.pop-open .ag-pop{display:block}
}

/* ---- blueprint node + foundation highlight (the configurator language) --
   .pnode.bp = a COMPOSITION that does not exist yet (dashed). The capability it
   draws on is solid in the foundation strip; dashed never means "not possible".
   .lit = the foundation agent a hovered composition card draws on, lit up. */
.pnode.bp{border-style:dashed;border-color:var(--brass-soft);background:rgba(201,154,75,.02)}
.pnode.bp:hover{border-color:var(--brass);background:rgba(201,154,75,.06)}
.pn-tag{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-44);white-space:nowrap}
.pnode.bp .pn-tag{color:var(--brass)}
.pp-stage.lit,.pnode.lit{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass-soft),0 0 16px var(--brass-glow)}

/* ---- print: drop site chrome so forwardable pages print clean ----------- */
@media print{
  .sitenav,.sitefoot{display:none !important}
  body{background:#fff !important;background-image:none !important}
}

/* ---- reduced motion: honored everywhere (a competence signal) ----------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;scroll-behavior:auto}
  .section.reveal{opacity:1;transform:none}
}