/* STRATA_PAGE_V1 — page-specific CSS for /strata.
   Tokens, chrome, bands, batik, dark mode: all inherited from about.css +
   dark.css. This file declares NO tokens and overrides no brand rule except
   the two noted below, each with its reason.

   Colour rule: every value here is a token. /about's Trivium SVG shipped
   invisible in dark because its inline <style> hardcoded #1F1812 — the dark
   audit read the linked CSS and never the page's own <style>. Token-only
   means dark.css carries this page for free and there is nothing to miss. */


/* ---------- hero ------------------------------------------------------------
   about.css sets .hero .wrap to a 1fr/1.08fr grid for /about's video column.
   /strata has no media column — all five AI-generated images were dropped and
   nothing honest replaces them. Left as a grid, the h1 would be squeezed into
   half the page beside dead space. */
.hero .wrap { grid-template-columns: 1fr; }
.hero .lead-col { max-width: 900px; }

.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 32px; }

/* The v5 system has no button component — /about, /research and /blog are
   editorial and carry no CTA. /strata is a product page and needs one. Rather
   than invent a shape, this is the brand's OWN button, ported from the
   homepage (index.html: bone-on-ink, radius 10px) into v5 tokens. The context
   matches exactly: the homepage's buttons also sit on a --warm-dark hero. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bone); color: var(--warm-dark);
  border: 1px solid var(--bone); border-radius: 10px;
  padding: 12px 24px; font-size: 15px; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary:hover { background: transparent; color: var(--bone); }
.btn-ghost {
  display: inline-flex; align-items: center;
  color: var(--bone); border-bottom: 1px solid rgba(247, 241, 222, .45);
  padding-bottom: 2px; font-size: 15px; font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-bottom-color: var(--gold); color: var(--gold); }


/* ---------- section lede ---------------------------------------------------
   about.css scopes .lede to .hero only; bands there carry a bare h2. */
.band .sec-h .lede {
  margin: 14px 0 0;
  font-size: clamp(16.5px, 1.7vw, 18.5px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.band .sec-h { max-width: 720px; }


/* ---------- the hierarchy diagram — the signature --------------------------
   Laid out on about.css's own .ahead grid (5fr/7fr): the argument on the left,
   the diagram on the right. Left full-width in the wrap the figure occupied
   ~55% and the band read half-finished — the signature has to hold its band. */
.hier-row { align-items: center; }
.hier-fig { margin: 0; }
.hier { width: 100%; height: auto; overflow: visible; }

.hier-head {
  fill: var(--soga); font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.hier-level {
  fill: var(--ink); font-family: var(--fs); font-size: 15px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hier-rule, .hier-split { stroke: var(--rule); stroke-width: 1; }

/* navy is the brand's enumerative/structural voice — bullets, step chips,
   footnote refs, the dot. A ranked legal hierarchy is exactly that. */
.hier-brace { stroke: var(--navy); stroke-width: 1.5; fill: none; }
.hier-mass { fill: var(--navy); opacity: .82; }

.hier-masslabel {
  fill: var(--ink-faint); font-family: var(--fs); font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.hier-cap {
  margin-top: 22px; max-width: 560px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}


/* ---------- capability + why cards ----------------------------------------
   Card idiom lifted from the v5 .b-card: --bone ground, 1px --rule, radius
   14px, 3px lift on hover over .3s expo-out. No new vocabulary. */
.cap-grid, .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.cap, .why {
  background: var(--bone); border: 1px solid var(--rule); border-radius: 14px;
  padding: 28px 26px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
.cap:hover, .why:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: rgba(31, 24, 18, .2);
}
.cap h3, .why h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
.why .kick { margin-bottom: 14px; }
.cap p, .why p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.why p b { color: var(--ink); font-weight: 600; }

.coverage-line {
  margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--rule-soft);
  max-width: 840px; font-size: 16px; line-height: 1.7; color: var(--ink-faint);
}
.coverage-line b { color: var(--ink-soft); font-weight: 600; }


/* ---------- contact -------------------------------------------------------- */
.contact-block { display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: start; }
.contact-prose > p { margin: 0 0 28px; font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); max-width: 34em; }

.big-email {
  display: inline-block; font-size: clamp(22px, 3vw, 34px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
  border-bottom: 1.5px solid var(--rule); padding-bottom: 6px;
  transition: color .15s ease, border-color .15s ease;
}
.big-email:hover { color: var(--soga-deep); border-bottom-color: var(--soga-deep); }

.contact-prose .callout { margin-top: 40px; }
.contact-prose .callout h3 { color: var(--bone); font-size: 18px; margin: 0 0 10px; }
.contact-prose .callout p { margin: 0; color: rgba(247, 241, 222, .9); font-size: 15.5px; line-height: 1.62; }
.contact-prose .callout strong { color: var(--gold); font-weight: 600; }

/* .facts is a 2-col dl in about.css; as a sidebar it needs one column. */
.contact-block .facts { grid-template-columns: 1fr; }


/* ---------- dark ----------------------------------------------------------
   Only what tokens cannot carry. --bone is dual-role (text-on-dark AND a
   raised surface); dark.css re-points its surface uses, but a card that
   opts into --bone as a ground needs its own rule or it lands as a blinding
   cream slab with invisible text. */
html[data-theme="dark"] .cap,
html[data-theme="dark"] .why { background: var(--surface-raised); }
html[data-theme="dark"] .cap:hover,
html[data-theme="dark"] .why:hover { border-color: rgba(240, 232, 216, .28); }
html[data-theme="dark"] .big-email:hover { color: var(--soga-deep); border-bottom-color: var(--soga-deep); }


/* ---------- responsive ----------------------------------------------------- */
@media (max-width: 860px) {
  .cap-grid, .why-grid { grid-template-columns: 1fr; gap: 18px; }
  .hier { max-width: 620px; }
  .contact-block { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 680px) {
  .hier-level { font-size: 13px; }
  .hier-head, .hier-masslabel { font-size: 10px; }
  .hier-cap { font-size: 14px; margin-top: 16px; }
  .hero-actions { gap: 18px; }
}