/* ==========================================================================
   WE THE PEOPLE U.S.A. PARTY — the shared design system
   assets/css/wtp.css · adopted 2026-08-11

   WHY THIS FILE EXISTS

   Every page in this site carried its own copy of the entire stylesheet in an
   inline <style> block — eighteen pages, eighteen copies, zero shared files.
   That is not a cosmetic problem: it means a facelift is eighteen edits, and
   it means the site drifts apart one page at a time, because nobody edits
   eighteen files consistently under deadline.

   So this file is loaded AFTER each page's own block and deliberately wins.
   Every page keeps working exactly as before if this file is removed, and
   with it present the whole site gets one coherent, modern treatment. Future
   design work happens here, once, rather than eighteen times.

   The identity does not change: navy, gold, cream, Futura caps. This is the
   same party wearing a better-cut version of the same suit.

   PRINCIPLES THIS FILE HOLDS TO
   · Contrast first. Gold on navy is the brand; gold on cream is unreadable,
     and the tokens below keep body text at a ratio that passes on real
     screens rather than on a designer's monitor.
   · Nothing moves that a reader did not ask to move. No autoplay, no
     parallax, no scroll-jacking, and every transition respects
     prefers-reduced-motion.
   · It has to work on a phone in sunlight, because that is where most
     people will actually read it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — unchanged in hue, tuned in value for contrast. */
  --navy:      #061426;
  --navy-2:    #0A1D33;
  --navy-3:    #12283F;
  --navy-4:    #1B3450;
  --cream:     #FCF9F2;
  --gold:      #E7BE45;
  --gold-2:    #F5D77E;
  --gold-deep: #B8912A;
  --teal:      #58A9B8;
  --teal-2:    #7FC4D0;

  --ink:        var(--cream);
  --ink-muted:  rgba(252, 249, 242, 0.74);
  --ink-faint:  rgba(252, 249, 242, 0.55);
  --line:       rgba(231, 190, 69, 0.26);
  --line-soft:  rgba(252, 249, 242, 0.12);

  --surface:      var(--navy-2);
  --surface-high: var(--navy-3);

  /* Type. Futura is the brand face; the stack degrades honestly. */
  --heads: Futura, "Avenir Next", Avenir, "Century Gothic", "Trebuchet MS",
           "Helvetica Neue", Arial, sans-serif;
  --body:  "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid scale — no media queries needed for type. */
  --t-xs:  clamp(11px, 0.68rem + 0.1vw, 12.5px);
  --t-sm:  clamp(13px, 0.78rem + 0.14vw, 14.5px);
  --t-base: clamp(16px, 0.95rem + 0.22vw, 18px);
  --t-lg:  clamp(18px, 1.05rem + 0.4vw, 21px);
  --t-xl:  clamp(22px, 1.2rem + 1.1vw, 30px);
  --t-2xl: clamp(28px, 1.4rem + 2.2vw, 44px);
  --t-3xl: clamp(38px, 1.7rem + 4.6vw, 76px);

  /* Rhythm */
  --gap-1: 6px;
  --gap-2: 12px;
  --gap-3: 20px;
  --gap-4: 32px;
  --gap-5: 52px;
  --gap-6: 84px;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 28px -12px rgba(0, 0, 0, 0.65);
  --shadow-3: 0 22px 60px -26px rgba(0, 0, 0, 0.8);

  --measure: 68ch;
  --page:    1120px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.7;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A quiet field of depth behind the whole page — not an image, so it costs
   nothing and never fails to load. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(231, 190, 69, 0.08), transparent 60%),
    radial-gradient(90% 70% at 92% 8%, rgba(88, 169, 184, 0.07), transparent 62%);
}

h1, h2, h3, h4 {
  font-family: var(--heads);
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.045em;
  text-wrap: balance;
  margin-top: 0;
}

p { text-wrap: pretty; }

a { color: var(--teal-2); text-underline-offset: 3px; }
a:hover { color: var(--gold-2); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--gold); color: var(--navy); }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: clamp(18px, 4vw, 30px); }

section { padding-block: clamp(56px, 8vw, 104px); }

/* --------------------------------------------------------------------------
   3 · Header
   -------------------------------------------------------------------------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

header.site .site-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  max-width: var(--page);
  margin-inline: auto;
  padding: 11px clamp(18px, 4vw, 30px);
}

header.site img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(231, 190, 69, 0.12);
  transition: box-shadow 0.3s var(--ease);
}
header.site img:hover { box-shadow: 0 0 0 7px rgba(231, 190, 69, 0.16); }

header.site .name {
  font-family: var(--heads);
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: var(--t-xs);
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 12ch;
}

nav.main { margin-left: auto; display: flex; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; align-items: center; }

nav.main a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.86;
  padding-block: 4px;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
nav.main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
nav.main a:hover { opacity: 1; color: var(--gold); }
nav.main a:hover::after { transform: scaleX(1); }

nav.main a.cta,
.cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--navy) !important;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  opacity: 1 !important;
  box-shadow: var(--shadow-1);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
nav.main a.cta::after { display: none; }
nav.main a.cta:hover,
.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); color: var(--navy) !important; }

/* --------------------------------------------------------------------------
   4 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: flex-end;
  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero::after {
  background: linear-gradient(
    180deg,
    rgba(6, 20, 38, 0.28) 0%,
    rgba(6, 20, 38, 0.52) 46%,
    rgba(6, 20, 38, 0.88) 82%,
    var(--navy) 100%
  );
}
.hero-inner { padding-block: clamp(96px, 14vw, 140px) clamp(52px, 7vw, 82px); }

.kicker {
  color: var(--gold);
  font-family: var(--heads);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  font-weight: 700;
  margin: 0 0 var(--gap-2);
}

.hero h1 {
  color: var(--cream);
  font-size: var(--t-3xl);
  margin: 0 0 var(--gap-2);
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.03em;
}

.hero .motto {
  font-family: var(--heads);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--gold);
  margin: 0 0 var(--gap-4);
}

/* --------------------------------------------------------------------------
   5 · Buttons
   -------------------------------------------------------------------------- */
.btns { display: flex; gap: var(--gap-2); flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heads);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  border-radius: var(--radius);
  padding: 15px 26px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn.gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--navy);
  box-shadow: var(--shadow-2);
}
.btn.gold:hover { box-shadow: var(--shadow-3); color: var(--navy); }

.btn.line {
  border: 2px solid rgba(252, 249, 242, 0.55);
  color: var(--cream);
  background: rgba(252, 249, 242, 0.04);
}
.btn.line:hover { border-color: var(--gold); color: var(--gold); background: rgba(231, 190, 69, 0.08); }

/* --------------------------------------------------------------------------
   6 · Stat band
   -------------------------------------------------------------------------- */
.stats {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border-block: 1px solid var(--line);
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: var(--page);
  margin-inline: auto;
}
.stat {
  padding: clamp(22px, 3.4vw, 34px) 18px;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-family: var(--heads);
  font-size: var(--t-xl);
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 7px;
}
.stat span {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   7 · Section headings
   -------------------------------------------------------------------------- */
.sec-kicker,
.sec-label {
  color: var(--teal-2);
  font-family: var(--heads);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  font-weight: 700;
  margin: 0 0 var(--gap-1);
}

h2.sec {
  color: var(--gold);
  font-size: var(--t-2xl);
  margin: 0 0 var(--gap-3);
  position: relative;
  padding-bottom: var(--gap-2);
}
h2.sec::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lede {
  font-size: var(--t-lg);
  max-width: var(--measure);
  color: var(--ink);
  line-height: 1.6;
}

.sec-sub { color: var(--ink-muted); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   8 · Cards, tiles, panels — the shared surface treatment
   -------------------------------------------------------------------------- */
.tile, .card, .rule-card, .platform-card, .stack-card, .block-item,
.sys-cell, .flow-row, .feat-item, .task-item {
  background: linear-gradient(180deg, rgba(252, 249, 242, 0.045), rgba(252, 249, 242, 0.015));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform 0.26s var(--ease), border-color 0.26s var(--ease),
              box-shadow 0.26s var(--ease);
}

.tile:hover, .card:hover, .rule-card:hover, .platform-card:hover,
.stack-card:hover, .sys-cell:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--shadow-2);
}

.tile h3, .card h3, .rule-title, .platform-name, .sys-cell-title {
  color: var(--gold);
  font-size: var(--t-lg);
  letter-spacing: 0.05em;
}

.tiles, .cards3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: var(--gap-3);
  margin-top: var(--gap-4);
}

/* --------------------------------------------------------------------------
   9 · Chips — the Charter article map and everything like it
   -------------------------------------------------------------------------- */
.articles, .flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--gap-3);
}

.chip {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(231, 190, 69, 0.07);
  color: var(--cream);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), transform 0.22s var(--ease);
}
.chip:hover {
  background: rgba(231, 190, 69, 0.16);
  border-color: var(--gold);
  color: var(--gold-2);
  transform: translateY(-1px);
}

/* Status colours, kept semantic across every page that uses them. */
.green  { color: #7BD88F; }
.gold   { color: var(--gold); }
.blue   { color: var(--teal-2); }
.red    { color: #F08A8A; }
.high   { color: #F08A8A; }
.med    { color: var(--gold); }

/* --------------------------------------------------------------------------
   10 · The honesty section — the most important block on the site
   -------------------------------------------------------------------------- */
.honesty {
  background:
    linear-gradient(180deg, rgba(231, 190, 69, 0.06), transparent 40%),
    var(--navy-2);
  border-block: 1px solid var(--line);
}

.aspiration {
  margin-top: var(--gap-4);
  padding: var(--gap-3);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(231, 190, 69, 0.06);
  color: var(--ink);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   11 · Lists and prose blocks
   -------------------------------------------------------------------------- */
.pillars, .feat-list, .block-list { padding-left: 0; list-style: none; }

.pillars li, .feat-item {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--gap-2);
}
.pillars li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(231, 190, 69, 0.18);
}

.feat-dot { color: var(--gold); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap-4);
  align-items: start;
}

/* --------------------------------------------------------------------------
   12 · Tables
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  color: var(--gold);
  font-family: var(--heads);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-xs);
}
tbody tr:hover { background: rgba(252, 249, 242, 0.03); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll, .overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   13 · Footer
   -------------------------------------------------------------------------- */
footer, footer.site {
  border-top: 1px solid var(--line);
  background: var(--navy-2);
  padding-block: var(--gap-5);
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
footer a { color: var(--teal-2); }

/* --------------------------------------------------------------------------
   14 · Motion, print, and the small screen
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  header.site .site-inner { flex-wrap: wrap; row-gap: 8px; }
  header.site .name { max-width: none; font-size: 11px; }
  nav.main { margin-left: 0; width: 100%; gap: 12px 14px; }
  nav.main a { font-size: 11px; }
  .hero { min-height: 74vh; }
  .stat { border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .tile:hover, .card:hover, .chip:hover { transform: none; }
}

@media print {
  body::before, header.site, nav.main { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3 { color: #111; }
  .tile, .card { border-color: #ccc; box-shadow: none; }
}