/* Sea of Conquest Pro — chart-room palette.
   Deep sounding-blue ground, brass accent, semantic colour kept separate from the accent so
   "two sources agree" and "sources disagree" read at a glance without competing with the brand. */
:root{
  --ground:#0C1417; --surface:#121E22; --surface-2:#18272B; --raise:#1D3037;
  --ink:#E6EDEB; --ink-2:#B3C4C1; --muted:#7E9491;
  --rule:#22343A; --rule-2:#1A2A2F;
  --brass:#D3A24B; --brass-2:#B8863099;
  --ok:#4FB994; --ok-bg:rgba(79,185,148,.12);
  --con:#E8735A; --con-bg:rgba(232,115,90,.12);
  --lead:#D3A24B; --lead-bg:rgba(211,162,75,.12);
  --shape:#B18CF0; --shape-bg:rgba(177,140,240,.12);
  --wrap:1120px;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ground:#F1F4F3; --surface:#FFFFFF; --surface-2:#F7F9F8; --raise:#EDF2F1;
  --ink:#12201E; --ink-2:#3C4F4C; --muted:#63776F;
  --rule:#D8E0DE; --rule-2:#E7ECEB;
  --brass:#8A6212; --brass-2:#8A621233;
  --ok:#1C6B54; --ok-bg:rgba(28,107,84,.10);
  --con:#AE3A22; --con-bg:rgba(174,58,34,.10);
  --lead:#8A6212; --lead-bg:rgba(138,98,18,.10);
  --shape:#6A46B0; --shape-bg:rgba(106,70,176,.10);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.65 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brass)}
h1,h2,h3,h4{font-family:Bitter,Georgia,serif;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(30px,5vw,50px);line-height:1.06;font-weight:700}
h2{font-size:clamp(21px,2.6vw,27px);font-weight:700;margin-bottom:14px}
h3{font-size:17px;font-weight:600}
h4{font-size:15.5px;font-weight:600}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.preview{background:var(--brass);color:#14100a;font:600 12.5px/1.5 "IBM Plex Mono",monospace;
  text-align:center;padding:7px 16px;letter-spacing:.02em}
.top{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:20px 22px;border-bottom:1px solid var(--rule)}
.brand{font-family:Bitter,serif;font-size:19px;text-decoration:none;color:var(--ink)}
.brand b{color:var(--brass)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.top nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:4px 0;
  border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a.on{color:var(--ink);border-bottom-color:var(--brass)}

main{max-width:var(--wrap);margin:0 auto;padding:0 22px 80px}
section{padding:40px 0;border-bottom:1px solid var(--rule-2)}
section:last-of-type{border-bottom:0}
.lede{border-bottom:0;padding-bottom:10px}
.lede p{color:var(--ink-2);font-size:18.5px;max-width:66ch;margin:14px 0 0}
.herofig{margin-top:26px;border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  background:var(--surface-2)}
.herofig img{display:block;width:100%;height:auto}
.note{color:var(--muted);font-size:14.5px;max-width:74ch}
.big{font-size:20px;color:var(--ink);max-width:62ch}
.sub{color:var(--muted);font-size:13px}

.callout{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--con);
  border-radius:5px;padding:22px 26px;margin:0 0 26px}
.callout h3{color:var(--con);margin-bottom:9px}
.callout p{color:var(--ink-2);margin:0 0 10px;max-width:70ch}
.big-callout{border-left-width:4px;padding:30px 32px}
.big-callout h3{font-size:22px}
.btn{display:inline-block;margin-top:6px;background:var(--brass);color:#14100a;text-decoration:none;
  font-weight:600;font-size:15px;padding:10px 20px;border-radius:4px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.stats div{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:20px}
.stats b{display:block;font-family:Bitter,serif;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--brass)}
.stats span{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.45}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:18px 20px}
.card h4{margin-bottom:7px}
.card p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.card .ing{color:var(--ink);font-size:14px}
a.card.link{text-decoration:none;display:block;transition:border-color .15s}
a.card.link:hover{border-color:var(--brass)}
.grid.dim .card{opacity:.72}

.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;
  padding:2px 10px;font:600 11px/1.7 "IBM Plex Mono",monospace;white-space:nowrap}
.p-ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.p-con{color:var(--con);border-color:var(--con);background:var(--con-bg)}
.p-lead{color:var(--lead);border-color:var(--lead);background:var(--lead-bg)}
.p-shape{color:var(--shape);border-color:var(--shape);background:var(--shape-bg)}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:5px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{position:sticky;top:0;background:var(--surface-2);text-align:left;color:var(--muted);
  font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 15px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:11px 15px;border-bottom:1px solid var(--rule-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td s{color:var(--muted)}
.bar{display:block;height:9px;background:var(--rule-2);border-radius:2px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--brass)}

input[type=search]{width:100%;max-width:440px;margin-bottom:16px;background:var(--surface);
  color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:11px 13px;
  font:400 15px "IBM Plex Sans",sans-serif}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
  counter-reset:s;margin-top:8px}
.steps>div{counter-increment:s;background:var(--surface);border:1px solid var(--rule);
  border-radius:5px;padding:20px 22px 20px 54px;position:relative}
.steps>div::before{content:counter(s);position:absolute;left:20px;top:20px;
  font:600 13px/1.4 "IBM Plex Mono",monospace;color:var(--brass)}
.steps h3{margin-bottom:6px}
.steps p{margin:0;color:var(--ink-2);font-size:14.5px}

footer{border-top:1px solid var(--rule);max-width:var(--wrap);margin:0 auto;padding:26px 22px 50px}
footer p{color:var(--muted);font-size:13.5px;max-width:78ch;margin:0 0 8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Art slot: honest empty space until real artwork lands. Never a placeholder image, never an
   emoji standing in for a picture. */
.herofig.slot{display:flex;align-items:center;justify-content:center;min-height:190px;
  border-style:dashed;color:var(--muted);font-size:12.5px;letter-spacing:.06em;
  background:repeating-linear-gradient(135deg,transparent,transparent 11px,var(--rule-2) 11px,var(--rule-2) 12px)}
.vs{color:var(--muted);font-size:11px;font-weight:400;padding:0 2px}

/* Published strip. Same slot the preview banner used, but it states the promise rather than
   the embargo — the one sentence a first-time reader needs before any number. */
.strip{background:var(--surface-2);border-bottom:1px solid var(--rule);color:var(--ink-2);
  font-size:13px;text-align:center;padding:9px 16px;line-height:1.5}