/* ==========================================================================
   Wharf Gold LLC: "Basalt" design v2.0, 25 September 2026
   Spec: docs/superpowers/specs/2026-09-25-basalt-redesign-design.md
   Rules that bite: radius 0 and no shadows anywhere (founder instruction);
   no inline CSS in the HTML (the CSP, style-src 'self', blocks it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg: #0F1113;            /* basalt ground */
  --panel: #16191C;         /* protocol band, contact band, details panel */
  --text: #E9E5DE;          /* strong text; headings are pure white */
  --text-2: #C9C5BE;        /* paragraphs, 11:1 on --bg */
  --muted: #A2A7AB;         /* captions, dates, footer, 7.8:1 on --bg */
  --rule: #2B3035;          /* hairlines on --bg */
  --rule-2: #3A4046;        /* hairlines on --panel */
  --ember: #DA6153;         /* labels, current nav, text links, 5.2:1 on --bg */
  --oxide: #A32B1F;         /* primary button fill; white on it 7.2:1 */
  --oxide-hover: #BA3326;
  --oxide-active: #8A231A;
  --paper: #F0EDE7;         /* wordmark and logo strokes on dark */
  --white: #FFFFFF;
  --wash: rgba(12, 14, 16, 0.60);   /* flat hero overlay, never a gradient */

  --display: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --serif: 'Playfair Display', Georgia, serif;
  --sans-zh: 'Noto Sans SC', 'IBM Plex Sans', sans-serif;

  --pad: 48px;
  --fast: 160ms ease;
}

/* Google serves Plex Sans Condensed with cyrillic-ext only (no basic А–я),
   so the Mongolian page takes a condensed face with the full Cyrillic set. */
html[lang="mn"] { --display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; }
/* Chinese page: Latin from Plex Condensed, CJK falls through to Noto Sans SC. */
body.zh { --display: 'IBM Plex Sans Condensed', 'Noto Sans SC', sans-serif; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
body.zh { font-family: var(--sans-zh); line-height: 1.9; }

h1, h2, h3, p, figure, dl, dd { margin: 0; }
img { max-width: 100%; display: block; }
address { font-style: normal; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fast), border-color var(--fast), background-color var(--fast);
}

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

@keyframes wgFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

.container { max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.hero-title,
.h1,
.h2,
.h3 { font-family: var(--display); text-transform: uppercase; color: var(--white); }

.hero-title { font-weight: 700; font-size: clamp(46px, 4.6vw + 16px, 92px); line-height: 0.94; max-width: 10em; margin-top: 18px; }
.h1 { font-weight: 700; font-size: clamp(40px, 3vw + 18px, 64px); line-height: 0.96; text-wrap: balance; }
.h2 { font-weight: 700; font-size: clamp(30px, 1.6vw + 18px, 40px); line-height: 1; text-wrap: balance; }
.h3 { font-weight: 600; font-size: clamp(22px, 0.6vw + 18px, 26px); line-height: 1.1; letter-spacing: 0.02em; }
body.zh .h1, body.zh .h2, body.zh .h3 { line-height: 1.3; }

.lead { font-size: 19px; line-height: 1.6; color: var(--text); }

.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}
.label--muted { color: var(--muted); }

.caption {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.note { font-size: 13.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Buttons and links (square, condensed caps)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 22px;
  cursor: pointer;
}
.btn-primary { background: var(--oxide); color: var(--white); }
.btn-primary:hover { background: var(--oxide-hover); }
.btn-primary:active { background: var(--oxide-active); }
.btn-ghost { border-color: var(--ember); color: var(--white); }
.btn-ghost:hover { background: var(--ember); color: var(--bg); }
.btn-outline { border-color: var(--rule-2); color: var(--white); }
.btn-outline:hover { border-color: var(--text); }
.btn-nav { padding: 12px 18px; }
body.zh .btn { letter-spacing: 0.04em; }

.text-link {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}
.text-link:hover { color: var(--white); }

.inline-link { color: var(--ember); border-bottom: 1px solid rgba(218, 97, 83, 0.4); }
.inline-link:hover { border-bottom-color: var(--ember); }

.chip {
  display: inline-block;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 8px 10px;
}

/* --------------------------------------------------------------------------
   Header (the v1 utility bar is gone: language lives in the nav)
   -------------------------------------------------------------------------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-block: 22px;
}
.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: transparent;
  border-bottom-color: rgba(233, 229, 222, 0.18);
}

.lockup { display: flex; align-items: center; gap: 12px; }
.lockup svg { flex: none; }
.lockup-name {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--paper);
}
/* Logo artwork: the one exception to the 11px floor. */
.lockup-sub {
  display: block;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.site-nav > a:not(.btn) { padding-block: 6px; border-bottom: 2px solid transparent; }
.site-nav > a:not(.btn):hover { color: var(--white); border-bottom-color: var(--rule-2); }
.site-nav > a[aria-current="page"] { color: var(--white); border-bottom-color: var(--ember); }
body.zh .site-nav { letter-spacing: 0.04em; }

/* Set in Plex Sans (full Cyrillic), never the condensed display face. */
.lang {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lang > * + *::before { content: "·"; margin-inline: 8px; color: var(--muted); }
.lang a:hover { color: var(--white); }
.lang-current { color: var(--white); }
.zh { font-family: var(--sans-zh); }

/* --------------------------------------------------------------------------
   Home hero: full-bleed photo under a flat wash; fades in once
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  animation: wgFade 900ms ease both;
}
.hero picture,
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: center 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--wash); }
.hero-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  padding-top: 140px;
  padding-bottom: 56px;
}
.hero-meta {
  flex: none;               /* keep the caption on its two lines; the headline wraps instead */
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--text);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Home: statement row (replaces the v1 floating cards)
   -------------------------------------------------------------------------- */
.statements { border-bottom: 1px solid var(--rule); }
.statements-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.statement { padding: 36px 32px 40px 0; }
.statement + .statement { padding-left: 32px; border-left: 1px solid var(--rule); }
.statement .h3 { margin-top: 16px; }
.statement p:last-child { margin-top: 10px; font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Home: stage statement, section heads, field-record teaser
   -------------------------------------------------------------------------- */
.stage { padding-block: 72px; }
.stage-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.stage-grid .h2 { margin-top: 14px; }
.date-line { margin-top: 16px; }
.stage-body p + p { margin-top: 14px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.section-head .h2 { margin-top: 12px; }
.section-head--tight { align-items: baseline; padding-bottom: 16px; }
.section-intro { margin-top: 14px; max-width: 560px; }

.teaser { border-top: 1px solid var(--rule); padding-block: 56px 72px; }
.plate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* --------------------------------------------------------------------------
   Plates (home teaser + field record)
   -------------------------------------------------------------------------- */
.plate img { width: 100%; object-fit: cover; }
.ar-65 img { aspect-ratio: 6 / 5; }
.ar-45 img { aspect-ratio: 4 / 5; }
.ar-32 img { aspect-ratio: 3 / 2; }
.plate-cap {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plate-cap b { font-weight: 500; color: var(--text); }
.plate-cap--split { display: flex; justify-content: space-between; gap: 12px; }
.plate-note { font-size: 14.5px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Home: updates ledger and contact band
   -------------------------------------------------------------------------- */
.updates-band { border-top: 1px solid var(--rule); padding-block: 56px; }
.ledger-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  color: var(--text);
}
.ledger-date {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.65;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.contact-band { background: var(--panel); padding-block: 56px; }
.contact-band-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; }
.email-l {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 2.4vw + 14px, 54px);
  line-height: 1.05;
  color: var(--white);
  overflow-wrap: anywhere;
}
.email-l:hover { color: var(--ember); }
.contact-lines { margin-top: 18px; line-height: 1.8; color: var(--muted); }
.contact-lines a:not(.inline-link):hover { color: var(--white); }
.credential-line { max-width: 620px; color: var(--text-2); }
.contact-band .credential-line { margin-top: 22px; }
.credential-linkedin { margin-top: 8px; }
.contact-band-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 40px;
  flex-wrap: wrap;
  padding-block: 28px;
}
.footer-lockup { display: flex; align-items: center; gap: 12px; }
.footer-lockup .lockup-name { font-size: 13px; }
.footer-text { max-width: 760px; }
.legal {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.legal + .legal { margin-top: 6px; }
.legal a:hover { color: var(--white); }
body.zh .label,
body.zh .legal,
body.zh .zh-name-note { font-family: var(--sans-zh); letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Interior page head
   -------------------------------------------------------------------------- */
.page-head { padding-block: 64px 44px; }
.page-head-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.page-head .h1 { margin-top: 16px; }
.page-head-intro { max-width: 560px; }

/* --------------------------------------------------------------------------
   Field record: terrain band, targets, protocol
   -------------------------------------------------------------------------- */
.band { position: relative; }
.band img { width: 100%; height: 220px; object-fit: cover; object-position: center 55%; filter: brightness(0.78); }
.band-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--white);
}

.target { padding-top: 56px; }
.target--rule { margin-top: 16px; border-top: 1px solid var(--rule); }
.target-head { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; padding-bottom: 24px; }
.target-head .h2 { margin-top: 12px; }
.target-head-note { font-size: 14.5px; }

.plates-2,
.plates-3,
.plates-wide { display: grid; gap: 16px; padding-bottom: 36px; }
.plates-2 { grid-template-columns: 1fr 1fr; }
.plates-3 { grid-template-columns: repeat(3, 1fr); }
.plates-wide { grid-template-columns: 2fr 1fr; align-items: start; }
.plates-last { padding-bottom: 72px; }

.protocol { background: var(--panel); padding-block: 56px; }
.protocol-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.protocol-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-2);
  color: var(--text);
}
.protocol-row .num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ember);
}
.protocol-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--rule-2);
}

/* --------------------------------------------------------------------------
   Updates page
   -------------------------------------------------------------------------- */
.entries { padding-bottom: 64px; }
.entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.entry--first { border-top-color: var(--rule-2); }
.entry-date {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--text);
}
.entry-tag { margin-top: 4px; }
.entry-body { max-width: 700px; }
.entry-body p { margin-top: 10px; }
.entries-end { padding-top: 24px; border-top: 1px solid var(--rule); }

.cta-band { background: var(--panel); padding-block: 44px; }
.cta-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 32px;
  flex-wrap: wrap;
}
.cta-band p { max-width: 560px; }

/* --------------------------------------------------------------------------
   Contact page and the МН / 中文 identity pages
   -------------------------------------------------------------------------- */
.contact-main,
.identity-main { padding-block: 64px 72px; }
.contact-main-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; }
.contact-main .h1,
.identity-main .h1 { margin-top: 16px; }

.email-xl {
  display: inline-block;
  margin-top: 30px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ember);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 2vw + 16px, 46px);
  line-height: 1.05;
  color: var(--white);
  overflow-wrap: anywhere;
}
.email-xl:hover { color: var(--ember); }
.response-note { margin-top: 12px; }
.contact-intro { margin-top: 12px; color: var(--text); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.contact-divider { max-width: 540px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }

.details-card { align-self: start; background: var(--panel); padding: 32px; }
.details-card dl { margin-top: 16px; }
.detail-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-2);
  font-size: 14px;
}
.detail-row--narrow { grid-template-columns: 140px 1fr; }
.detail-row dt { color: var(--muted); }
.detail-row dd { color: var(--text); }
.details-more { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rule-2); font-size: 14px; line-height: 1.8; }
.details-card .contact-lines { color: var(--text-2); }

.identity-lead { margin-top: 20px; max-width: 560px; }
.identity-block { max-width: 560px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.identity-block > * + * { margin-top: 12px; }
.identity-block .date-line { margin-top: 6px; }
.email-m {
  display: block;
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 1vw + 18px, 30px);
  line-height: 1.1;
  color: var(--white);
  overflow-wrap: anywhere;
}
.email-m:hover { color: var(--ember); }
.investor-note { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.zh-name-note {
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ember);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --pad: 32px; }
}

@media (max-width: 880px) {
  .statements-grid,
  .stage-grid,
  .page-head-grid,
  .target-head,
  .plates-3,
  .plates-wide,
  .protocol-grid,
  .contact-band-grid,
  .contact-main-grid { grid-template-columns: 1fr; }

  .stage-grid,
  .page-head-grid,
  .target-head,
  .protocol-grid,
  .contact-main-grid { gap: 24px; }
  .contact-band-grid { gap: 32px; }
  .contact-band-side { justify-content: flex-start; }

  .statement,
  .statement + .statement { padding: 28px 0; border-left: 0; }
  .statement + .statement { border-top: 1px solid var(--rule); }

  .plate-row { grid-template-columns: 1fr 1fr; }

  .hero { min-height: 560px; }
  .hero-layer { flex-direction: column; align-items: flex-start; padding-top: 200px; padding-bottom: 40px; }
  .hero-meta { text-align: left; }

  .lead { font-size: 17px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
  .site-nav { gap: 10px 18px; font-size: 12px; }
  .hero-layer { padding-top: 220px; }
  .plates-2 { grid-template-columns: 1fr; }
  .plate-cap--split { display: block; }
  .ledger-row,
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .details-card { padding: 24px 20px; }
}

@media (max-width: 440px) {
  .detail-row,
  .detail-row--narrow { grid-template-columns: 1fr; gap: 2px; }
}