/* style.css — one stylesheet for every page.

   THE STRUCTURE, which is what keeps the page from reading as flat while still
   being readable: the photograph is fixed behind everything and is never
   covered by paint. Full-width sections are GLASS — alpha 0.07 to 0.30, never
   more, and never blurred, because a blur on a full-width band destroys the
   photograph's detail even when the alpha is right. Nothing is ever set
   directly on a bare band: every paragraph, table, figure and stat sits on its
   own SURFACE at 0.62–0.80, which is where the contrast comes from. Band =
   glass, card = surface; asking one layer to do both jobs is what makes these
   pages either flat or unreadable.

   Measured against usevynex.org in the same browser run by tools/shots.mjs
   (painted pixels: flat%, chroma, busy) and tools/contrast.mjs (every text
   node, with a control that must fail). */

/* ---- tokens -------------------------------------------------------- */
:root {
  --ink: #0c1512;          /* deep basalt green-black: the frame */
  --ink-2: #122020;
  --paper: #ecf4f0;        /* type on dark */
  --muted: #a7bdb4;
  /* Raised from #7e968e: measured at 3.1–4.3:1 over the app's own surfaces,
     which is under AA for body text. tools/contrast.mjs found it; nothing
     about it looked wrong. */
  --dim: #a8beb5;

  --gold: #e8b14a;         /* value, emphasis, the mark's middle strand */
  --gold-deep: #c78f2c;
  --water: #74cac4;        /* the braid, routes, links */
  --water-deep: #2f9a95;
  --up: #86d7a6;
  --down: #ef8878;

  --line: rgba(236, 244, 240, 0.14);
  --line-soft: rgba(236, 244, 240, 0.08);

  /* Glass: full-width bands. Nothing here goes above 0.30. */
  --band-1: rgba(12, 21, 18, 0.06);
  --band-2: rgba(12, 21, 18, 0.13);
  --band-3: rgba(12, 21, 18, 0.09);
  --band-4: rgba(12, 21, 18, 0.15);
  --band-deep: rgba(8, 15, 13, 0.18);

  /* Surfaces: where type lives. */
  --card: rgba(11, 19, 17, 0.76);
  --card-2: rgba(14, 24, 21, 0.82);
  --card-hi: rgba(20, 33, 29, 0.80);
  --wash: rgba(10, 18, 16, 0.62);   /* section heads: flat rgba, real element */

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 34px;

  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.26);

  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1090px;
  --pad: 26px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- the ground ----------------------------------------------------
   One photograph, fixed, behind every section on every page. It is not
   decoration: it is the reason the page is not flat. The filter deepens and
   saturates it so that glass over it reads as tinted rather than as white
   haze; the exact numbers were solved against the reference by
   tools/ground.mjs, not chosen by eye. */
.ground {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--ink) url("../img/ground.jpg") center / cover no-repeat;
  /* No filter here. The tone is baked into the jpg by tools/make-ground.mjs,
     so that what tools/ground.mjs measures is what ships — a CSS filter on top
     is applied to every candidate alike and makes the solve meaningless. */
}
/* A very slight vertical grade, so the nav end is a touch deeper than the
   middle. Low alpha: this must not become paint. */
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 12, 0.20) 0%, rgba(8, 14, 12, 0.00) 30%, rgba(8, 14, 12, 0.14) 100%);
}

/* ---- layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-tight { max-width: 840px; }

.band { position: relative; padding: 118px 0; }
.band-1 { background: var(--band-1); }
.band-2 { background: var(--band-2); }
.band-3 { background: var(--band-3); }
.band-4 { background: var(--band-4); }
.band-deep { background: var(--band-deep); }
.band + .band { border-top: 1px solid var(--line-soft); }

/* ---- nav ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 14, 12, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper); }
.brand svg { display: block; border-radius: 9px; }
.brand-name {
  font-family: var(--display); font-size: 22px; letter-spacing: 0.012em; line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 8px 13px; border-radius: 999px;
}
.nav-links a:hover { color: var(--paper); background: rgba(236, 244, 240, 0.08); }
.nav-links a.on { color: var(--ink); background: var(--water); }
.nav-x { display: inline-flex; padding: 8px; border-radius: 999px; color: var(--muted); }
.nav-x:hover { color: var(--paper); background: rgba(236, 244, 240, 0.08); }
.burger { display: none; }

/* ---- type ----------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: -0.004em; }
h1 { font-size: clamp(40px, 6.4vw, 70px); }
h2 { font-size: clamp(28px, 3.8vw, 42px); }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--water); }
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #dbe8e2; }
.small { font-size: 13.5px; }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
.gold { color: var(--gold); }

/* A section head sits on its own wash — a flat rgba on a real element, large
   radius, no border. A gradient here would leave backgroundColor transparent
   and a live contrast audit would walk straight past it to the band. */
.head {
  background: var(--wash);
  border-radius: var(--r-xl);
  padding: 34px 38px;
  margin-bottom: 30px;
  max-width: 780px;
}
.head h2 { margin-bottom: 10px; }
.head p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  /* A paler aqua than --water: the eyebrow is 12px on a wash over a bright
     photograph, where --water measured 3.2:1. */
  color: #c2ece8; margin-bottom: 14px;
}

/* The hero's copy sits on its own wash, like every other block of type on
   this site. Large radius, no border, no shadow, and low enough alpha that the
   photograph still reads through it — the rule is that nothing is ever set on a
   bare band, not that the photograph gets covered up. */
.herocard {
  max-width: 820px;
  background: var(--wash);
  border-radius: var(--r-xl);
  padding: 40px 44px 36px;
}
@media (max-width: 640px) { .herocard { padding: 26px 22px 24px; border-radius: var(--r-lg); } }

/* ---- surfaces ------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: var(--shadow-sm);
}
.card-hi { background: var(--card-hi); }
.sheet {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px 44px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat { }
.stat .k { font-size: 12.5px; color: var(--dim); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--mono); }
.stat .v { font-family: var(--mono); font-size: 27px; line-height: 1.2; margin-top: 5px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 13px; color: var(--muted); margin-top: 3px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(236, 244, 240, 0.10);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; font-family: var(--mono); color: var(--muted);
}
.chip-v3 { color: #c9d8ff; border-color: rgba(160, 185, 255, 0.30); background: rgba(120, 150, 255, 0.14); }
.chip-v4 { color: #a9e9e3; border-color: rgba(116, 202, 196, 0.32); background: rgba(116, 202, 196, 0.14); }
.chip-gold { color: #f6d99a; border-color: rgba(232, 177, 74, 0.34); background: rgba(232, 177, 74, 0.15); }

/* ---- controls ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--water); color: #06110f; text-decoration: none; cursor: pointer;
  transition: transform 0.08s ease, filter 0.14s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn-gold { background: var(--gold); color: #1a1204; }
.btn-ghost { background: rgba(236, 244, 240, 0.09); color: var(--paper); border-color: var(--line); }
.btn-ghost:hover { background: rgba(236, 244, 240, 0.15); }
.btn-lg { padding: 16px 30px; font-size: 16px; }

input, select, textarea {
  font-family: var(--sans); font-size: 15px; color: var(--paper);
  background: rgba(6, 12, 10, 0.62);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--water-deep); outline-offset: 1px; }
input.num { font-family: var(--mono); font-size: 19px; }
label { display: block; font-size: 12.5px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 7px; }

.seg { display: inline-flex; background: rgba(6, 12, 10, 0.55); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 999px;
}
.seg button.on { background: var(--water); color: #06110f; }

/* ---- tables --------------------------------------------------------- */
.tablewrap { overflow-x: auto; border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: rgba(236, 244, 240, 0.06); }
td.r, th.r { text-align: right; }

/* ---- the braid figure ----------------------------------------------
   The split, drawn: one bar per leg, widths in proportion to the money. */
.legs { display: flex; height: 40px; border-radius: 10px; overflow: hidden; gap: 2px; background: rgba(6,12,10,0.5); }
.legs .leg { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; color: #06110f; min-width: 0; overflow: hidden; white-space: nowrap; }
.legs .leg.v3 { background: #8aa6f5; }
.legs .leg.v4 { background: var(--water); }
.legs .leg:nth-child(2n).v4 { background: #56b3ad; }
.legs .leg:nth-child(3n).v3 { background: #6f8ce0; }

.keyrow { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.keyrow i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ---- notices -------------------------------------------------------- */
.note {
  background: rgba(232, 177, 74, 0.12);
  border: 1px solid rgba(232, 177, 74, 0.30);
  border-radius: var(--r);
  padding: 14px 16px; font-size: 14px; color: #f4e0b4;
}
.note-bad { background: rgba(239, 136, 120, 0.13); border-color: rgba(239, 136, 120, 0.34); color: #ffd6cf; }
.note-ok { background: rgba(134, 215, 166, 0.12); border-color: rgba(134, 215, 166, 0.32); color: #cdf0dc; }

/* ---- footer --------------------------------------------------------- */
.foot { background: rgba(6, 11, 10, 0.80); padding: 52px 0 40px; border-top: 1px solid var(--line-soft); }
.foot-in { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding: 72px 0; }
  .sheet { padding: 28px 22px; border-radius: var(--r-lg); }
  /* A narrow viewport puts a brighter part of the photograph behind the heads,
     and the running text in them measured 3.4:1 there. The wash carries more
     weight on mobile for that reason, not for taste. */
  .head { padding: 24px 22px; border-radius: var(--r-lg); background: rgba(10, 18, 16, 0.80); }
}
@media (max-width: 640px) {
  :root { --pad: 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(8, 14, 12, 0.96); padding: 12px 18px 18px;
    border-bottom: 1px solid var(--line);
  }
  .burger {
    display: inline-flex; margin-left: auto; background: rgba(236, 244, 240, 0.09);
    border: 1px solid var(--line); color: var(--paper); border-radius: 10px;
    padding: 9px 11px; cursor: pointer;
  }
  .band { padding: 48px 0; }
  .head { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}