/* oddly broadsheet layer. Visual-signature build, phase 1 (2026-06-12).
 *
 * The shared editorial-broadsheet system for the PUBLIC marketing pages
 * (landing, /pricing, /what-is-oddly, /faq). One layer, three jobs:
 *
 *   1. Marketing token aliases. The short names the landing's editorial
 *      CSS established (--cream, --navy, --serif ...) defined ONCE here,
 *      sourced from the locked 52.0a contract (/_shared/oddly-tokens.css)
 *      wherever an exact token exists. Pages keep layout-only CSS and
 *      reference these vars; no page declares its own font or color value.
 *   2. The masthead nameplate (PR #186), generalized so every public page
 *      carries it: full-size on the landing, --compact on subpages.
 *   3. The signature primitives: dollar hero, evidence block, read-only
 *      seal, same-data-same-answer. Reusable components, deployed across
 *      the phase-1 surfaces.
 *
 * Anti-slop rules enforced by this sheet: sharp corners (radius 0 on
 * surfaces), hairline rules over shadows, tabular numerals on every
 * figure, ink on cream, teal as THE accent, gold sparingly.
 *
 * Load order on a page: oddly-chrome.css, oddly-tokens.css, then this.
 */

/* Fraunces, self-hosted (visual P1.5). Two variable files (upright +
 * italic), latin subset, weight range 400-600 with the optical-size axis,
 * served from /_shared/fonts like the dashboard's Space Grotesk: no
 * third-party font roundtrip on the marketing surface. Pages keep Google
 * Fonts for Inter only. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_shared/fonts/fraunces-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_shared/fonts/fraunces-italic-latin-var.woff2") format("woff2");
}

:root {
  /* exact matches sourced from the locked contract */
  --cream: var(--oddly-canvas, #FAFAF7);
  --navy: var(--oddly-ink, #1A1A2E);
  --teal: var(--oddly-teal, #2C7873);
  --gold: var(--oddly-gold, #B08D57);
  /* marketing-surface values with no 52.0a equivalent (kept byte-identical
   * to the shipped landing palette so nothing shifts) */
  --navy-soft: #4a4860;
  --teal-deep: #1f5f5b;
  --gold-deep: #8a6d3f;
  --loss: #b3261e;
  --line: #d8d3c4;            /* warm hairline on cream */
  --serif: var(--oddly-font-serif, Georgia, "Times New Roman", serif);
  --sans: var(--oddly-font-sans, -apple-system, sans-serif);
  --mono: var(--oddly-text-mono, ui-monospace, Menlo, monospace);
}

/* ---------- Base editorial page (subpages opt in via body.bs-page) ----- */
.bs-page {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* small-caps section tag, shared with the landing */
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 16px;
}

/* ---------- The masthead nameplate (carried on every public page) ------ */
.masthead-band { background: var(--cream); padding: 0 28px; }
.hero-masthead { max-width: 1200px; margin: 0 auto; padding-top: 8px; }
.hm-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.hm-side {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.hm-side.hm-right { text-align: right; color: var(--teal-deep); }
.hm-nameplate {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(38px, 6.6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
}
.hm-strapline {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--teal);
  letter-spacing: 0.01em;
  margin: 9px 0 0;
}
/* subpage register: same nameplate, lower volume */
.hero-masthead--compact { padding-top: 6px; padding-bottom: 4px; }
.hero-masthead--compact .hm-row { padding: 9px 0; }
.hero-masthead--compact .hm-nameplate { font-size: clamp(28px, 4.2vw, 44px); }
.hero-masthead--compact .hm-strapline { font-size: 13px; margin-top: 7px; }
@media (max-width: 640px) {
  .hm-row { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .hm-side { display: none; }
}

/* ---------- Primitive 1: the dollar hero ------------------------------- */
/* The money figure as typographic protagonist: serif tabular numerals,
 * the honest kind-label beneath in small caps. The null state renders the
 * reason line instead of a number; it never fakes a figure. */
.bs-dollar { display: flex; flex-direction: column; }
.bs-dollar-num {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}
.bs-dollar-kind {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-top: 8px;
}
/* on an ink panel the figure carries the single gold highlight */
.bs-dollar--onink .bs-dollar-num { color: var(--gold); }
.bs-dollar--onink .bs-dollar-kind { color: rgba(250, 250, 249, 0.7); }
/* the honest null state: a reason, never a fake number */
.bs-dollar--null .bs-dollar-reason {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--navy-soft);
  margin: 0;
}

/* ---------- Primitive 2: the evidence block ---------------------------- */
/* Provenance of a claim, styled as a newspaper pull-quote: hairline left
 * rule, the claim in serif, the raw figures in mono, the source line in
 * small caps with window + date. */
.bs-evidence {
  border-left: 2px solid var(--teal);
  padding: 4px 0 4px 18px;
  margin: 0;
}
.bs-evidence-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 10px;
}
.bs-evidence-data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 8px;
}
.bs-evidence-source {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin: 0;
}
/* a guarantee/trait block reads as evidence too: serif lead, plain body */
.bs-evidence > strong {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 4px;
}

/* ---------- Primitive 3: the read-only seal ----------------------------- */
/* A small set seal: "reads your store. never raises your spend." (copy v2,
 * used on landing, pricing, listing screenshots, docs. The ring is the
 * stamp; gold is earned here (a guarantee, not a decoration). */
.bs-seal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--gold);
  background: transparent;
  padding: 9px 16px 9px 11px;
}
.bs-seal-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 999px; /* the seal ring itself; everything else stays sharp */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  color: var(--gold-deep);
}
.bs-seal-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Primitive 4: same data, same answer ------------------------- */
/* Deterministic repetition as a visual idea: the same finding rendered
 * twice, pixel-identical, two run stamps. A section, not a wallpaper. */
.bs-twice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--navy);
}
.bs-twice-pane { padding: 24px 26px; background: var(--cream); }
.bs-twice-pane + .bs-twice-pane { border-left: 1px solid var(--line); }
.bs-run-label {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bs-mini-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.bs-mini-data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--navy);
  margin: 0 0 12px;
}
.bs-mini-impact {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 6px;
}
.bs-mini-impact .bs-mini-impact-cap {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-left: 8px;
}
.bs-mini-rule {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0;
}
.bs-twice-caption {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--navy-soft);
  margin: 16px 0 0;
}
@media (max-width: 720px) {
  .bs-twice-grid { grid-template-columns: 1fr; }
  .bs-twice-pane + .bs-twice-pane { border-left: none; border-top: 1px solid var(--line); }
}

/* ---------- Editorial doc furniture for subpages ------------------------ */
.bs-h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--navy);
}
.bs-h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
}
.bs-rule-gold { height: 1px; background: var(--gold); border: none; }