/* Custorian foundation pages: shared tokens and the rules that were byte-identical
   across index, about, governance and membership. Extracted 17 Sep 2026, when the four
   inline stylesheets had drifted to 18 selectors with the same name and different values.

   Loaded BEFORE each page's own <style>, so anything a page needs to do differently it
   can still do locally and win on source order. Change a brand colour here, not in four
   places. */

:root {
  --paper:#F6F4EF; --card:#FFFDF9; --ink:#0E0E10; --body:#33323a;
  --muted:#75727d; --line:#e2ddd3; --hair:#ebe6dc;
  --violet:#5B41C2; --violet-l:#9B7CFF; --violet-d:#46329E;
  --green:#4f7a4e; --amber:#a9701f;
  --serif:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* [hidden] must beat component display rules such as .field.check{display:flex}. */
[hidden] { display:none !important; }

/* --- shared components --- */
h2 { font-weight:650; letter-spacing:-.032em; }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  .topbar .inner { max-width:1180px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .brand { font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:10px; text-decoration:none; }
  .brand .dot { width:9px; height:9px; border-radius:50%; background:var(--violet); display:block; }
  /* The animated mark from the pre-redesign front page, restored 17 Sep 2026 and sized
     for the top bar. Each square fades up in turn, staggered by its --idx, so the sweep
     runs across the grid rather than pulsing as one block. */
  .logo-mark { width:22px; height:22px; display:block; flex:none; }
  .logo-mark .outer { fill:#8C8E9B; animation:pulse-sweep 4s ease-in-out infinite; animation-delay:calc(var(--idx, 0) * .125s); }
  .logo-mark .inner { fill:var(--violet); }
  @keyframes pulse-sweep { 0%, 100% { opacity:.32; } 6% { opacity:1; } 18% { opacity:.32; } }
  @media (prefers-reduced-motion: reduce) { .logo-mark .outer { animation:none; opacity:.7; } }
  .navleft { display:flex; align-items:center; gap:11px; }
  /* Top-bar right group: shared since 17 Sep 2026, when How it works joined it. */
  .topbar .right { display:flex; align-items:center; gap:18px; }
  .navbtn { font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid var(--line); border-radius:100px; padding:5px 12px; cursor:pointer; text-decoration:none; line-height:1.5; white-space:nowrap; transition:color .18s ease, border-color .18s ease, background .18s ease; }
  .navbtn:hover, .navbtn:focus-visible { color:#fff; background:var(--violet); border-color:var(--violet); outline:none; }
  .navbtn[disabled] { opacity:.35; cursor:default; }
  .navbtn[disabled]:hover { color:var(--muted); background:none; border-color:var(--line); }
  .topbar a.back:hover { color:var(--violet); }
  .eyebrow { font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--violet); margin-bottom:28px; }
  .sectnum { font-family:var(--mono); font-size:11px; color:var(--violet-l); letter-spacing:.1em; display:block; margin-bottom:14px; }
  strong { font-weight:600; color:var(--ink); }
  .note a { color:var(--violet); text-decoration:none; }
  .btn:hover { background:var(--ink); }
  footer nav { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 20px; }
  footer a { color:var(--muted); text-decoration:none; }
  footer a:hover { color:var(--violet); }

  /* Subheadings carry the brand colour; section titles stay ink. */
  h3, h3.grp { color:var(--violet); }
  .band h3 { color:var(--violet-l); }

/* Below 1180px the side rail is hidden, so the top bar is the only navigation
   and has to keep every destination. Adding "How it works" on 17 Sep 2026 took
   the two groups to ~489px of content, which does not fit a phone: they wrap to
   two rows instead of overflowing. Each group is ~238px, so both clear a 320px
   viewport on their own line. */
@media (max-width:900px) {
  .topbar .inner { flex-wrap:wrap; row-gap:10px; }
  .topbar .right { width:100%; justify-content:flex-start; gap:16px; }
  .topbar a.back { font-size:12px; }
}

/* --- LEFT SECTION NAV ------------------------------------------------------
   The sticky table of contents governance.html has always carried, extracted
   17 Sep 2026 so the front page and how-it-works.html can use it too.

   It is a grid column rather than a fixed overlay on purpose: a fixed rail
   would have to live in the page margin, which is only ~166px at 1512px wide
   and disappears entirely on a laptop. As a column it reserves its own space
   at every width, and collapses below 900px where there is none.

   .main carries no max-width here: these pages hold charts, tables and plots
   that need the full column, unlike the prose pages. */
.layout { display:grid; grid-template-columns:200px 1fr; gap:64px; padding-top:40px; }
.layout .rail { position:sticky; top:104px; align-self:start; }
.layout .rail ol { list-style:none; counter-reset:sec; margin:0; padding:0; }
.layout .rail li { counter-increment:sec; margin-bottom:2px; }
.layout .rail a {
  font-family:var(--sans); font-size:13px; color:var(--muted); text-decoration:none;
  display:flex; gap:10px; padding:6px 0; line-height:1.4;
  transition:color .16s ease;
}
.layout .rail a::before {
  content:counter(sec,decimal-leading-zero);
  font-family:var(--mono); font-size:10.5px; color:var(--violet-l);
  padding-top:2px; flex:none;
}
.layout .rail a:hover { color:var(--ink); }
/* Current section, set by sectionnav.js as you scroll. */
.layout .rail a.on { color:var(--ink); font-weight:600; }
.layout .rail a.on::before { color:var(--violet); }
.layout .main { min-width:0; }
.layout .main > section:first-of-type { border-top:none; padding-top:0; }

@media (max-width:900px) {
  .layout { grid-template-columns:1fr; gap:0; padding-top:28px; }
  .layout .rail { display:none; }
}