/* The Crossover — website token stylesheet
   tokens: v3 · scope: thecrossover.io (Beehiiv Website Builder)

   Everything is scoped under .cx. Beehiiv HTML blocks are fragments injected into
   an existing page; unscoped rules fight the site theme. Never add body / * / html
   / bare-element selectors to this file.

   Usage in a Beehiiv Custom HTML block:
     <link rel="stylesheet" href="https://<host>/cx.css">
     <div class="cx"> …markup… </div>

   Until this file is hosted, paste its contents inside a <style> tag at the top of
   the block instead. Same bytes either way. */

.cx {
  /* colour */
  --cx-ink:        #33384A;
  --cx-ink-strong: #1A1D28;
  --cx-muted:      #6B7080;
  --cx-bg:         #F3F6F6;
  --cx-surface:    #FFFFFF;
  --cx-gold:       #DEA63E;
  --cx-teal:       #00B8A9;
  --cx-rule:       #E2E6E6;
  --cx-ink-deep:   #12141C;
  --cx-muted-on-dark: #A8ADB8;

  /* section identity — defaults are the newsletter's. Override with
     .cx-sec-ask / .cx-sec-notebook on this same element. */
  --cx-accent:      var(--cx-gold);
  --cx-accent-lift: var(--cx-gold);
  --cx-well:        var(--cx-surface);
  --cx-rule-sec:    var(--cx-rule);

  /* spacing */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-space-7: 48px;
  --cx-space-8: 64px;

  /* measure */
  --cx-measure-text: 720px;
  --cx-measure-wide: 1040px;

  /* form — square, ruled by Justin 2026-09-05 (D-D). Direction A was
     hard-edged and the native Posts block already renders its images at 0.
     Keep this at 0: a rounded corner anywhere is now the exception and
     needs its own entry in DECISIONS. */
  --cx-radius: 0;

  /* type */
  --cx-font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --cx-serif: Georgia, 'Times New Roman', serif;
  --cx-mono:  'IBM Plex Mono', 'Courier New', monospace;

  font-family: var(--cx-font);
  color: var(--cx-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

.cx *,
.cx *::before,
.cx *::after { box-sizing: inherit; }

/* Beehiiv's theme sets margins on headings and paragraphs. Zero them inside .cx
   and drive all rhythm from the stack utilities below. */
.cx h1, .cx h2, .cx h3, .cx h4, .cx p, .cx ul, .cx ol, .cx figure {
  margin: 0;
  padding: 0;
}
.cx ul, .cx ol { list-style: none; }

/* ---- section identity ----
   One class on the .cx wrapper repoints every accent in the block. The same
   markup then serves Ask Viv and the Notebook with no other change.

   Contrast is NOT symmetrical between the two. Blue clears 5.15:1 on its own
   well and is safe as text at any size; amber manages 3.04:1 and is legal for
   large text and graphics only. Anything under 24px stays --cx-ink-strong in
   both sections, so a block written once is correct in both. */

.cx-sec-ask {
  --cx-accent:      #2E69B2;
  --cx-accent-lift: #7FB2E8;
  --cx-well:        #F2F7FC;
  --cx-rule-sec:    #CBD9E6;
}

.cx-sec-notebook {
  --cx-accent:      #C78509;
  --cx-accent-lift: #E8A317;
  --cx-well:        #FEFDF8;
  --cx-rule-sec:    #DAD5C6;
}

/* ---- type ---- */

.cx-display {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cx-ink-strong);
}

/* Locked to the newsletter masthead. Do not re-tune per page. */
.cx-masthead {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cx-ink-strong);
}
.cx-masthead b,
.cx-masthead strong { font-weight: 800; color: var(--cx-accent); }

/* Georgia italic. The one place a serif is allowed. */
.cx-standfirst {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--cx-ink);
}

.cx-h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--cx-ink-strong);
}

.cx-h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--cx-ink-strong);
}

.cx-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cx-ink);
}

.cx-body-sm {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--cx-ink);
}

.cx-meta {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cx-muted);
}

.cx-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cx-muted);
}

.cx-accent { color: var(--cx-gold); }
.cx-muted  { color: var(--cx-muted); }

/* ---- layout ---- */

.cx-measure      { max-width: var(--cx-measure-text); }
.cx-measure-wide { max-width: var(--cx-measure-wide); }
.cx-center       { margin-left: auto; margin-right: auto; }

/* Vertical rhythm. Put the stack class on a container; children space themselves.
   Avoids per-element margin bookkeeping in every block.

   NOTE THE `.cx` PREFIX, and copy it in your own block rules. The reset above is
   `.cx p { margin: 0 }`, specificity (0,1,1). A bare `.my-thing > * + *` is
   (0,1,0) and loses to it, so the margin silently computes to zero and the block
   looks tight for no visible reason. Any block rule that sets margin on a p, h1-h4,
   ul, ol or figure must be prefixed with `.cx` to clear it. Found 2026-08-12. */
.cx .cx-stack-3 > * + * { margin-top: var(--cx-space-3); }
.cx .cx-stack-4 > * + * { margin-top: var(--cx-space-4); }
.cx .cx-stack-5 > * + * { margin-top: var(--cx-space-5); }
.cx .cx-stack-6 > * + * { margin-top: var(--cx-space-6); }

/* Section padding. --cx-space-7 is the default; -8 needs justifying in the page file. */
.cx-section    { padding-top: var(--cx-space-7); padding-bottom: var(--cx-space-7); }
.cx-section-sm { padding-top: var(--cx-space-6); padding-bottom: var(--cx-space-6); }

.cx-rule {
  border: 0;
  border-top: 1px solid var(--cx-rule);
  height: 0;
}

/* ---- links & buttons ---- */

.cx a { color: inherit; }

.cx-link {
  color: var(--cx-ink-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--cx-rule);
  transition: border-color 120ms ease;
}
.cx-link:hover { border-bottom-color: var(--cx-accent); }

.cx-btn {
  display: inline-block;
  font-family: var(--cx-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: var(--cx-radius);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.cx-btn:hover { opacity: 0.88; }

.cx-btn-primary {
  background: var(--cx-ink-strong);
  color: #FFFFFF;
  border: 1px solid var(--cx-ink-strong);
}

.cx-btn-accent {
  background: var(--cx-gold);
  color: var(--cx-ink-strong);
  border: 1px solid var(--cx-gold);
}

.cx-btn-quiet {
  background: transparent;
  color: var(--cx-ink-strong);
  border: 1px solid var(--cx-rule);
}

/* Section button: the accent as a ground, white label. On Ask Viv that is
   5.55:1 and passes. Do NOT use on Notebook — amber wants an ink label, which
   is what .cx-btn-accent already gives it. Ask Viv must never use
   .cx-btn-accent: gold on an Ask Viv page reads as WOW. */
.cx-btn-section {
  background: var(--cx-accent);
  color: #FFFFFF;
  border: 1px solid var(--cx-accent);
}

/* For a dark slab. Light ground, ink label, no accent involved, so it is
   palette-safe in every section. */
.cx-btn-light {
  background: var(--cx-surface);
  color: var(--cx-ink-strong);
  border: 1px solid var(--cx-surface);
}

/* ---- section well ----
   The barely-there panel that says which section you are in. Full-width inside
   whatever container Beehiiv gives the block; the keyline does the work. */
.cx-well {
  background: var(--cx-well);
  border-bottom: 3px solid var(--cx-accent);
}

/* ---- narrow viewports ---- */

@media (max-width: 640px) {
  .cx-display  { font-size: 30px; }
  .cx-masthead { font-size: 26px; }
  .cx-standfirst { font-size: 18px; }
  .cx-section    { padding-top: var(--cx-space-6); padding-bottom: var(--cx-space-6); }
  .cx-section-sm { padding-top: var(--cx-space-5); padding-bottom: var(--cx-space-5); }
}