/* ==========================================================================
   HOME PAGE — the redesign
   assets/css/home.css · adopted 2026-09-16
   Layout from handoff/cowork/home-mockup.html; copy from HOME_COPY.md.

   WHY THIS IS A SEPARATE FILE

   wtp.css is the site-wide system and is deliberately loaded so that it wins
   over each page's own inline block. The home page is the one page that has
   been redesigned, so it loads THIS file after wtp.css and wins in turn.
   Keeping it external rather than inline means it caches, it does not bloat
   the document that has to paint first, and the day the rest of the site
   catches up we can drop 'unsafe-inline' from the style CSP entirely.

   NO JAVASCRIPT. The site's CSP is script-src 'none' and that is a promise,
   not an oversight — so progressive disclosure here is <details>, and the
   Charter explorer is real links rather than a filtered list.
   ========================================================================== */

:root {
  --h-navy: #0B1F3A;
  --h-deep: #071528;
  --h-parch: #F4ECD8;
  --h-gold: #E3B83A;
  --h-gold-2: #F0CC6B;
  --h-ox: #9E2B3A;
  --h-ink: #0B1F3A;
  --h-ink-soft: #33415A;
  --h-muted: rgba(244, 236, 216, .74);
  --h-line: rgba(227, 184, 58, .3);
  --h-serif: Georgia, "Times New Roman", serif;
  --h-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.home {
  margin: 0;
  background: var(--h-deep);
  color: var(--h-parch);
  font: 16px/1.65 var(--h-sans);
}

.home h1, .home h2, .home h3, .home h4 {
  font-family: var(--h-serif);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: normal;
  text-transform: none;
}

.home a { color: var(--h-gold); }

/* Focus you can actually see. WCAG 2.2 wants it unmistakable, not tasteful. */
.home :focus-visible {
  outline: 3px solid var(--h-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.home .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.home section { padding: clamp(56px, 8vw, 96px) 0; }
.home h2 { font-size: clamp(28px, 4.2vw, 44px); color: var(--h-parch); }
.home .lede { font-size: 18px; max-width: 62ch; color: var(--h-muted); }
.home .kicker {
  font: 700 12px/1 var(--h-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--h-gold);
  margin: 0 0 12px;
}
.home .micro { font-size: 13px; color: var(--h-muted); }

.home .skip { position: absolute; left: -999px; }
.home .skip:focus {
  left: 12px; top: 12px; z-index: 99;
  background: var(--h-gold); color: var(--h-ink); padding: 10px;
}

/* --- Status bar: the honest disclosure, above everything, never buried --- */
.home .statusbar {
  background: var(--h-ox);
  color: var(--h-parch);
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
}
.home .statusbar a { color: var(--h-parch); font-weight: 700; }

/* --- Header --- */
.home header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 21, 40, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--h-line);
}
.home .hd { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.home .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--h-parch); text-decoration: none;
  font: 700 14px var(--h-serif); letter-spacing: .08em;
}
.home .brand img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--h-gold); object-fit: cover;
}
.home nav.main { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.home nav.main a {
  color: var(--h-parch); text-decoration: none; font-size: 14px;
  padding: 12px 10px; min-height: 44px;   /* 44px tap target, WCAG 2.2 */
  display: inline-flex; align-items: center;
  opacity: 1; letter-spacing: normal; text-transform: none; font-weight: 400;
}
.home nav.main a:hover { color: var(--h-gold); }

.home .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-weight: 700; text-decoration: none; letter-spacing: .04em;
  font-family: var(--h-sans); font-size: 15px; text-transform: none;
}
.home .btn.gold { background: var(--h-gold); color: var(--h-ink); }
.home .btn.gold:hover { background: var(--h-gold-2); color: var(--h-ink); }
.home .btn.ghost { border: 2px solid var(--h-parch); color: var(--h-parch); }
.home .btn.ghost:hover { border-color: var(--h-gold); color: var(--h-gold); }
.home nav.main .btn { min-height: 44px; padding: 0 16px; margin-left: 8px; white-space: nowrap; }

/* Below 860px the nav links collapse to the footer's full list rather than a
   JavaScript menu — there is no JavaScript. The three that matter most stay. */
@media (max-width: 860px) {
  .home nav.main a.secondary { display: none; }
}

/* --- Hero --- */
.home .hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex; align-items: flex-end;
  background: var(--h-deep) url("/assets/img/hero-1440.jpg") center 30% / cover no-repeat;
}
@media (min-width: 1441px) {
  .home .hero { background-image: url("/assets/img/hero-1920.jpg"); }
}
@media (max-width: 760px) {
  .home .hero { background-image: url("/assets/img/hero-960.jpg"); }
}
.home .hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,21,40,.92) 0%, rgba(7,21,40,.7) 45%, rgba(7,21,40,.15) 80%),
    linear-gradient(180deg, transparent 60%, var(--h-deep));
}
@media (max-width: 760px) {
  .home .hero::after {
    background: linear-gradient(180deg, rgba(7,21,40,.35), rgba(7,21,40,.85) 45%, var(--h-deep));
  }
}
.home .hero .wrap { position: relative; z-index: 1; padding: 120px 20px 64px; }
.home .hero h1 {
  font-size: clamp(40px, 7.5vw, 84px);
  max-width: 14ch; color: var(--h-parch);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.home .motto {
  font: 700 clamp(13px, 2vw, 17px) var(--h-sans);
  letter-spacing: .24em; color: var(--h-gold); margin: 0 0 14px;
}
.home .sub {
  max-width: 52ch; font-size: clamp(16px, 2vw, 19px);
  color: var(--h-parch); margin: 0 0 28px;
}
.home .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Proof strip: every figure clicks through to where it is backed up --- */
.home .proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--h-line); background: var(--h-navy);
}
.home .proof a {
  padding: 22px 12px; text-align: center; text-decoration: none;
  border-left: 1px solid var(--h-line); color: var(--h-parch);
}
.home .proof a:first-child { border-left: 0; }
.home .proof a:hover { background: rgba(227, 184, 58, .08); }
.home .proof b {
  display: block; line-height: 1.1;
  font: 700 30px var(--h-serif); color: var(--h-gold);
}
.home .proof span {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h-muted);
}
@media (max-width: 640px) {
  .home .proof { grid-template-columns: repeat(2, 1fr); }
  .home .proof a:nth-child(3) { border-left: 0; }
  .home .proof a:nth-child(n+3) { border-top: 1px solid var(--h-line); }
}

/* --- Light sections: parchment, for the passages that carry the most trust
       weight. Dark-on-light reads as a document rather than a pitch deck. --- */
.home .light { background: var(--h-parch); color: var(--h-ink); }
.home .light h2, .home .light h3 { color: var(--h-ink); }
.home .light .lede { color: var(--h-ink-soft); }
.home .light .kicker { color: var(--h-ox); }
.home .light a { color: var(--h-ox); }

.home .tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 28px;
}
.home .light .tile {
  background: #fff; border: 1px solid #E3D6B3;
  border-top: 4px solid var(--h-ox); border-radius: 12px; padding: 22px;
}
.home .light .tile h3 { font-size: 19px; margin-bottom: .4em; }
.home .light .tile p { margin: 0; font-size: 15px; color: var(--h-ink-soft); }

.home .quote {
  margin: 28px 0 0; border-left: 4px solid var(--h-gold);
  padding: 4px 0 4px 18px; max-width: 70ch;
  color: var(--h-ink-soft); font-style: italic;
}

/* --- Progressive disclosure, without script --------------------------------
   Mission/Purpose/Vision were tabs in the mockup. Tabs need JavaScript to be
   accessible (roving focus, aria-selected); <details> needs none and the
   browser gives us the keyboard behaviour for free. HOME_COPY.md asks for
   "short tabs or accordions", so this is the accordion. */
.home .disclose {
  border: 1px solid var(--h-line); border-radius: 12px;
  background: var(--h-navy); margin: 0 0 12px; padding: 0 22px;
}
.home .disclose > summary {
  min-height: 56px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; font: 700 20px var(--h-serif); color: var(--h-gold);
  list-style: none;
}
.home .disclose > summary::-webkit-details-marker { display: none; }
.home .disclose > summary::after {
  content: "+"; margin-left: auto; font-size: 26px; font-weight: 400;
  color: var(--h-muted); line-height: 1;
}
.home .disclose[open] > summary::after { content: "\2212"; }
.home .disclose .soundbite {
  font-family: var(--h-serif); font-size: 18px; color: var(--h-parch);
  margin: 0 0 10px;
}
.home .disclose > div { padding-bottom: 20px; max-width: 70ch; }

.home .light details.fineprint {
  margin-top: 24px; border: 1px solid #E3D6B3; border-radius: 12px;
  background: #fff; padding: 6px 22px;
}
.home .light details.fineprint > summary {
  min-height: 48px; display: flex; align-items: center;
  font-weight: 700; cursor: pointer; color: var(--h-ox);
}
.home .light details.fineprint li { margin: 8px 0; color: var(--h-ink-soft); }

/* --- Charter explorer --- */
.home .grid28 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; margin-top: 24px; padding: 0; list-style: none;
}
.home .grid28 a {
  display: flex; gap: 10px; align-items: baseline;
  min-height: 56px; padding: 12px 14px;
  border: 1px solid var(--h-line); border-radius: 10px;
  background: var(--h-navy); color: var(--h-parch);
  text-decoration: none; font-size: 14.5px;
}
.home .grid28 a:hover { border-color: var(--h-gold); }
.home .grid28 i {
  font: 700 13px var(--h-serif); font-style: normal;
  color: var(--h-gold); min-width: 3.4em;
}
.home .grid28 .tag {
  margin-left: auto; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--h-muted); white-space: nowrap;
}

/* --- Constitutional Capitalism --- */
.home .split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 860px) { .home .split { grid-template-columns: 1fr; } }
.home .split img {
  width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--h-line);
}
.home ol.pillars {
  counter-reset: p; list-style: none; padding: 0; margin: 20px 0 28px;
}
.home ol.pillars li {
  counter-increment: p; position: relative;
  padding: 14px 0 14px 52px;
  border-bottom: 1px solid rgba(244, 236, 216, .1);
  font-size: 17px;
}
.home ol.pillars li::before {
  content: counter(p); position: absolute; left: 0; top: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--h-gold); color: var(--h-ink);
  font: 700 16px/34px var(--h-serif); text-align: center;
}

/* --- The Library --- */
.home .lib {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; margin-top: 28px;
}
.home .lib .card {
  display: block; padding: 24px; border: 1px solid var(--h-line);
  border-radius: 14px; background: var(--h-navy); color: var(--h-parch);
  text-decoration: none; transition: transform .15s, border-color .15s;
}
.home .lib .card:hover { transform: translateY(-3px); border-color: var(--h-gold); }
.home .lib .card b {
  font: 700 20px var(--h-serif); display: block; margin: 10px 0 6px;
}
.home .lib .card span { color: var(--h-muted); font-size: 14.5px; }
.home .badge {
  display: inline-block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.home .b-live { background: var(--h-gold); color: var(--h-ink); }
.home .b-soon { border: 1px solid var(--h-parch); color: var(--h-parch); }
.home .b-dev { background: rgba(244, 236, 216, .12); color: var(--h-muted); }

/* --- Join --- */
.home .join {
  background: linear-gradient(180deg, var(--h-navy), var(--h-deep));
  text-align: center;
}
.home .join .lede { margin-inline: auto; }
.home .join iframe {
  display: block; width: 100%; max-width: 520px; margin: 28px auto 10px;
  border: 1px solid var(--h-line); border-radius: 14px; background: #fff;
}
.home .channels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 28px;
}
.home .channels a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  border: 1px solid var(--h-line); border-radius: 999px;
  color: var(--h-parch); text-decoration: none;
}
.home .channels a:hover { border-color: var(--h-gold); color: var(--h-gold); }

/* --- Footer --- */
.home footer.site {
  border-top: 1px solid var(--h-line); padding: 48px 0;
  font-size: 14px; color: var(--h-muted); background: var(--h-deep);
}
.home .fcols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px;
}
@media (max-width: 760px) { .home .fcols { grid-template-columns: 1fr 1fr; } }
.home footer.site h4 {
  color: var(--h-gold); margin: 0 0 10px;
  font: 700 13px var(--h-sans); letter-spacing: .14em; text-transform: uppercase;
}
.home footer.site a {
  display: block; color: var(--h-parch); text-decoration: none;
  padding: 6px 0; min-height: 24px;
}
.home footer.site a:hover { color: var(--h-gold); }
.home .legal { margin-top: 32px; font-size: 13px; color: var(--h-muted); }
.home .legal p { max-width: 80ch; }

/* Nothing moves that a reader did not ask to move. */
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after {
    transition: none !important;
    animation: none !important;
  }
  .home .lib .card:hover { transform: none; }
}