/* THE COUL & GOLD BRIEFING — briefing-home.css
   LOAD THIS ON THE HOME PAGE ONLY, alongside briefing.css.

   These are the rules that cannot be site-wide. They set text colour, which
   means they are only correct where this file also controls the background.
   The home page is navy sections with ivory cards; post pages are ivory
   throughout. An earlier version applied these everywhere and would have
   rendered every article cream-on-cream at about 1.05:1 — invisible.

   briefing.css  = safe everywhere (type, spacing, measure, form, nav)
   this file      = home page only (hero, ivory cards)
   ============================================================ */

/* ---- Hero: we paint the navy, so we own the text ---- */
/* ---- Navy marketing surfaces (HOME PAGE ONLY) ----------------------------
   This is the block that CANNOT be site-wide, and the reason this file exists.
   On the home page every surface that is not an ivory card is navy, so
   unclaimed body copy and headings must be cream. Four paragraphs on the home
   page — the hero subhead, the address line and the two toolkit captions —
   carry no colour of their own at all (measured: ownColor false, spanColor
   false). Without this they inherit whatever beehiiv's theme gives, which on
   /subscribe computes to rgb(0,0,0): black on navy.

   Putting this in briefing.css would destroy every newsletter article, where
   the same `section p` selector matches text sitting on IVORY at ~1.05:1.
   That is not hypothetical — it is what v12 did, and it is why the file is
   split. The card rules further down are more specific and re-colour
   ivory-card copy to ink; `.cgwho` carries its own self-sufficient block. */
body { background-color: var(--cg-navy) !important; }

section :is(p, li, td) { color: rgba(244,239,228,0.86) !important; }
section :is(h1, h2, h3, h4, h5, h6) { color: #f4efe4 !important; }

/* Gold italics: 6.63:1 on navy. The card block below overrides these to
   gold-deep, which is 5.42:1 on ivory — plain gold there is only 2.24:1. */
section :is(h1, h2, h3) em,
section :is(h1, h2, h3) :is(span, strong) em { color: #C8A45A !important; font-style: italic !important; }

section a { color: #C8A45A; }
section :is(p, li) a:hover { color: #d9b876; border-bottom-color: #C8A45A; }

section:has(> div h1) {
  background-color: #0d2345 !important;
  background-image:
    linear-gradient(180deg, rgba(13,35,69,0.80) 0%, rgba(13,35,69,0.72) 45%, rgba(8,23,48,0.88) 100%),
    url('https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/371e65b0-21d0-4853-9fe4-d0aa278c1fec/Blueprint_Design_Website_2.png?t=1783082089') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding-top: 72px !important;
  padding-bottom: 84px !important;
}
section:has(> div h1) > div > :is(h1, p),
section:has(> div h1) > div > :is(h1, p) :is(span, strong) {
  color: #f4efe4 !important;
  text-align: center !important;
}
section:has(> div h1) > div > h1 em { color: #C8A45A !important; font-style: italic !important; }
section:has(> div h1) > div > p {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important;
  max-width: 60ch !important;
  margin-inline: auto !important;
  line-height: 1.65 !important;
}
section:has(> div h1) > div > p em:first-child {
  display: block !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem) !important;
  line-height: 1.25 !important;
  padding-bottom: 26px;
  margin-bottom: 30px;
  background: linear-gradient(90deg, transparent calc(50% - 45px), #C8A45A 50%, transparent calc(50% + 45px)) no-repeat bottom / 100% 2px;
}

/* ---- Ivory cards ----
   These were set to ivory at 90% ALPHA (#FCF9F0E6). Over navy that composites
   to rgb(228,228,223) — the warm red-to-blue spread collapses from 12 points to
   5, which is why they read grey-green beside the solid bio box. Forcing solid
   ivory makes all four match, and lets us own the text colour on top of it. */
section div:has(> h2):not(.cgwho) {
  background-color: #FCF9F0 !important;
  border: 1px solid rgba(200,164,90,0.45) !important;
  border-radius: 16px !important;
  padding: 34px 38px !important;
}
section div:has(> h2):not(.cgwho) :is(h2, h3, p, ul, ol, li) { text-align: center !important; }
section div:has(> h2):not(.cgwho) h2 { margin-bottom: 6px !important; }
section div:has(> h2):not(.cgwho) :is(p, li, td, p span, li span) { color: #24334A !important; }
section div:has(> h2):not(.cgwho) :is(h2, h3, h2 span, h3 span, strong) { color: #0d2345 !important; }
section div:has(> h2):not(.cgwho) em { color: #856016 !important; }
section div:has(> h2):not(.cgwho) :is(a, a span) { color: #856016 !important; }
/* LISTS — centre the block, left-align the text inside it.
   Two traps here, both found by looking at the rendered result.
   (1) `list-style-position: inside` puts the marker in the item's first LINE
   box. beehiiv wraps each item's content in a block-level element, which opens
   a new line and leaves the bullet stranded on a line of its own. `outside`
   moves the marker into the margin, where it aligns with the first line of
   whatever the item contains.
   (2) The `text-align: center` rule above targets `li` DIRECTLY, so setting
   `text-align: left` on the `ul` alone does not win for the li — and beehiiv's
   inner wrapper inherits the centring too. Both need naming explicitly. */
section div:has(> h2):not(.cgwho) :is(ul, ol) {
  width: fit-content;
  max-width: 60ch;
  margin-inline: auto !important;
  text-align: left !important;
  list-style-position: outside !important;
  padding-left: 1.35em !important;
}
section div:has(> h2):not(.cgwho) :is(ul, ol) :is(li, li *) { text-align: left !important; }
section div:has(> h2):not(.cgwho) :is(ul, ol) li { margin-bottom: 6px; }
section div:has(> h2):not(.cgwho) ul { list-style-type: disc !important; }
section div:has(> h2):not(.cgwho) li::marker { color: #856016; }
section div:has(> h2):not(.cgwho) mark { background: transparent; color: #856016 !important; }
section:has(div > h2) { padding-block: 28px; }

/* CARD HOVER — beehiiv's theme dims these panels on pointer-over, which reads
   as "this is clickable". They are not links, so the affordance is a lie. The
   background is pinned on rest, hover AND focus-within, and `filter` and
   `opacity` are pinned alongside it because a dimming effect can come from any
   of the three — fixing one and leaving the others live would look identical
   in a screenshot and still break under a real pointer. Only the border
   answers the pointer. */
section div:has(> h2):not(.cgwho) {
  transition: border-color .18s ease, box-shadow .18s ease;
}
section div:has(> h2):not(.cgwho),
section div:has(> h2):not(.cgwho):hover,
section div:has(> h2):not(.cgwho):focus-within {
  background-color: #FCF9F0 !important;
  filter: none !important;
  opacity: 1 !important;
}
section div:has(> h2):not(.cgwho):hover {
  border-color: #C8A45A !important;
  box-shadow: 0 0 0 1px rgba(200,164,90,0.22) !important;
}

/* Consent line sits on an ivory card here, so ink is correct on this page. */
section form :is(label, span, p) { color: #24334A !important; }
section form a { color: #856016 !important; }

@media (max-width: 640px) {
  section div:has(> h2):not(.cgwho) { padding: 24px 18px !important; }
}