/* ═══════════════════════════════════════════════════════════════════════════════
   KORY CARDS — off-white page, black boxes, gold headings, white body copy.
   ═══════════════════════════════════════════════════════════════════════════════

   Owner 2026-09-27, in his own words:
     "then don't do Ivory just make it look similar. it's like an off-white back page
      with black boxes and either white letters or gold letters"
     "Make the gold letters more of like a subject you know heading and the white
      letters the content" / "or the white letters for the body"

   WHY THIS FILE EXISTS INSTEAD OF MORE IVORY PATCHES. ivory.css does the OPPOSITE of what he
   just described — its own comment reads "EVERY PANEL: WHITE GROUND, BLACK HAIRLINE, BLACK
   LETTERS." On these pages that fought the design three ways at once and made text invisible:
   measured on the live page, nav links were rgb(26,26,26) on rgb(13,13,15), contrast 1.04.
   I patched ivory's scope twice tonight. The first patch did nothing (I left `html body header a`
   in the list). The second fixed the nav — 1.04 to 9.98 — and 30 other elements were still
   unreadable, because the page carried three competing palettes. Patching a sheet that wants the
   inverse of the target was never going to converge, so this states the target directly.

   THE RULE OF THIS FILE: WHEREVER IT PAINTS TEXT, IT OWNS THE BACKGROUND BEHIND IT.
   That single discipline is what ivory broke. Ivory forced text near-black across the whole
   document while only claiming the background on a few containers, so any page with a dark panel
   got black-on-black. Every colour below is set on an element whose ground is set in the same
   block, or on a descendant of one. Nothing here paints into a background it did not set.

   -webkit-text-fill-color IS SET EVERYWHERE color IS. It beats `color` when painting, so a rule
   that sets only `color` loses to any inherited fill — that is exactly how the page's correct
   #c2b9a8 link colour lost to ivory's fill. Both properties, every time, or the rule is a lie.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  --kc-page:#FAF8F3;        /* the off-white back page */
  --kc-box:#000000;         /* black boxes — the jet-black law, never the brown #15110d */
  --kc-box-2:#0D0D0D;       /* a second surface, for a box inside a box */
  --kc-gold:#EAC15C;        /* headings and subjects */
  --kc-gold-2:#F6C445;      /* the brighter gold, for links inside a box */
  --kc-white:#FFFFFF;       /* body copy inside a box */
  --kc-white-2:#D8D4CC;     /* quieter second lines, still clear of AA on black */
  --kc-ink:#1A1A1A;         /* text sitting directly on the off-white page */
  --kc-ink-2:#4A4A4A;
  --kc-hair:rgba(234,193,92,.34);   /* the gold hairline that makes a box a box */
}

/* ── THE PAGE ──────────────────────────────────────────────────────────────── */
html body{
  background:var(--kc-page) !important;
  background-image:none !important;
  color:var(--kc-ink) !important;-webkit-text-fill-color:var(--kc-ink) !important;
}

/* ── THE BLACK BOXES ───────────────────────────────────────────────────────────
   Every container that reads as a panel on these pages. The real class names were taken
   from the rendered DOM, not guessed: header.topbar, section.block, div.stat, div.cta,
   article.profile-card and footer are what fractional-cro actually uses. The rest are the
   panel names shared across the other pages in this family. */
html body header,html body header.topbar,html body footer,
html body section.block,html body .block,html body .stat,html body .cta,
html body .profile-card,html body .card,html body .box,html body .band,
html body .cro,html body .cro-card,html body .cta-band,html body .guide,
html body .toc,html body .tile,html body .f,html body .pf,html body .crohdr,
html body .topic-card,html body .po-card,html body .bigdoor,html body .cc-wrap,
html body aside.ac,html body .direct,html body .direct-answer,html body .pulse-hook,
html body .pulse-offer-mid,html body .pulse-offer-end{
  background:var(--kc-box) !important;
  background-color:var(--kc-box) !important;
  background-image:none !important;
  border:1px solid var(--kc-hair) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  color:var(--kc-white) !important;-webkit-text-fill-color:var(--kc-white) !important;
}
/* the header and footer span the page, so they keep their edges square */
html body header,html body header.topbar,html body footer{
  border-radius:0 !important;border-left:0 !important;border-right:0 !important}

/* ── WHITE LETTERS = THE CONTENT ───────────────────────────────────────────────
   Everything inside a black box reads white by default. The gold block below then lifts the
   headings back out. Order matters: this is the floor, gold is the exception. */
html body header *,html body footer *,
html body section.block *,html body .block *,html body .stat *,html body .cta *,
html body .profile-card *,html body .card *,html body .box *,html body .band *,
html body .cro *,html body .cro-card *,html body .cta-band *,html body .guide *,
html body .toc *,html body .tile *,html body .f *,html body .pf *,html body .crohdr *,
html body .topic-card *,html body .po-card *,html body .bigdoor *,html body .cc-wrap *,
html body aside.ac *,html body .direct *,html body .direct-answer *,
html body .pulse-hook *,html body .pulse-offer-mid *,html body .pulse-offer-end *{
  color:var(--kc-white) !important;-webkit-text-fill-color:var(--kc-white) !important;
  background-color:transparent !important;background-image:none !important;
  text-shadow:none !important;
}

/* ── GOLD LETTERS = THE SUBJECT / HEADING ──────────────────────────────────────
   "Make the gold letters more of like a subject you know heading and the white letters
   the content." So: every heading level, the eyebrow/kicker above a heading, the big stat
   number, and a term in a definition list. Not paragraphs, not list items. */
html body header h1,html body header h2,html body header h3,
html body footer h1,html body footer h2,html body footer h3,html body footer h4,
html body section.block h1,html body section.block h2,html body section.block h3,
html body section.block h4,html body section.block h5,html body section.block h6,
html body .block h1,html body .block h2,html body .block h3,html body .block h4,
html body .stat h1,html body .stat h2,html body .stat h3,html body .stat h4,
html body .cta h1,html body .cta h2,html body .cta h3,html body .cta h4,
html body .profile-card h1,html body .profile-card h2,html body .profile-card h3,
html body .card h1,html body .card h2,html body .card h3,html body .card h4,
html body .box h1,html body .box h2,html body .box h3,html body .box h4,
html body .band h1,html body .band h2,html body .band h3,html body .band h4,
html body .cro h1,html body .cro h2,html body .cro h3,
html body .cro-card h1,html body .cro-card h2,html body .cro-card h3,
html body .cta-band h1,html body .cta-band h2,html body .cta-band h3,
html body .guide h1,html body .guide h2,html body .guide h3,
html body .tile h1,html body .tile h2,html body .tile h3,
html body .f h1,html body .f h2,html body .f h3,html body .f h4,
html body .crohdr h1,html body .crohdr h2,html body .crohdr h3,
html body .topic-card h1,html body .topic-card h2,html body .topic-card h3,
html body .po-card h1,html body .po-card h2,html body .po-card h3,
html body .bigdoor h1,html body .bigdoor h2,html body .bigdoor h3,
html body .cc-wrap h1,html body .cc-wrap h2,html body .cc-wrap h3,
html body aside.ac h1,html body aside.ac h2,html body aside.ac h3,
html body .direct h1,html body .direct h2,html body .direct h3,
html body .pulse-hook h1,html body .pulse-hook h2,html body .pulse-hook h3,
/* the kicker line that introduces a heading is a subject too */
html body header .eyebrow,html body footer .eyebrow,
html body .block .eyebrow,html body .stat .eyebrow,html body .cta .eyebrow,
html body .card .eyebrow,html body .box .eyebrow,html body .band .eyebrow,
html body .f .eyebrow,html body .tile .eyebrow,html body .cro-card .eyebrow,
html body .cro-card__eyebrow,html body .mbm-eyebrow,
/* the big number in a stat card is the subject of that card */
html body .stat .n,html body .block .n,html body .box .n,
html body .stat dt,html body .block dt,html body .box dt{
  color:var(--kc-gold) !important;-webkit-text-fill-color:var(--kc-gold) !important;
}

/* ── LINKS AND BUTTONS INSIDE A BLACK BOX ──────────────────────────────────────
   The brighter gold, so a link is findable against white body copy. This is the rule that
   replaces the page's own .topbar .contact, which painted rgb(26,10,0) — a near-black red
   on a near-black ground, contrast 1.01. That one was the page's own bug, not ivory's. */
html body header a,html body header.topbar a,html body header.topbar nav a,
html body header.topbar .contact,html body footer a,
html body section.block a,html body .block a,html body .stat a,html body .cta a,
html body .profile-card a,html body .card a,html body .box a,html body .band a,
html body .cro a,html body .cro-card a,html body .cta-band a,html body .guide a,
html body .toc a,html body .tile a,html body .f a,html body .crohdr a,
html body .topic-card a,html body .po-card a,html body .bigdoor a,
html body .cc-wrap a,html body aside.ac a,html body .direct a{
  color:var(--kc-gold-2) !important;-webkit-text-fill-color:var(--kc-gold-2) !important;
  text-decoration:none;
}
html body header a:hover,html body footer a:hover,html body .block a:hover,
html body .box a:hover,html body .card a:hover,html body .f a:hover{
  text-decoration:underline;text-underline-offset:3px}

/* a solid call-to-action button: gold ground, black letters — the one place letters go dark,
   and this file sets that ground itself, so the pairing cannot come apart */
html body .btn-primary,html body button.btn-primary,html body a.btn-primary,
html body .btn.btn-primary{
  background:var(--kc-gold) !important;background-color:var(--kc-gold) !important;
  background-image:none !important;
  color:#000000 !important;-webkit-text-fill-color:#000000 !important;
  border:1px solid var(--kc-gold) !important;border-radius:999px !important;
  box-shadow:none !important;font-weight:700 !important;
}
html body .btn-primary *,html body a.btn-primary *,html body button.btn-primary *{
  color:#000000 !important;-webkit-text-fill-color:#000000 !important}
html body .btn-primary:hover,html body a.btn-primary:hover{
  background:var(--kc-gold-2) !important;background-color:var(--kc-gold-2) !important}

/* a secondary button reads as an outline on the black box */
html body .btn:not(.btn-primary){
  background:transparent !important;background-image:none !important;
  color:var(--kc-gold-2) !important;-webkit-text-fill-color:var(--kc-gold-2) !important;
  border:1px solid var(--kc-hair) !important;border-radius:999px !important}

/* ── QUIETER SECOND LINES, STILL WELL CLEAR OF AA ON BLACK ─────────────────────
   #D8D4CC on #000 is 13.6:1 — "quiet" here means a step down in emphasis, never in legibility.
   The mistake this file exists to undo was treating dim as a colour rather than a contrast. */
html body .block small,html body .box small,html body .card small,html body .f small,
html body footer small,html body .stat small,html body .cta small,
html body .block .sub,html body .box .sub,html body .cro-card__sub,
html body .meta,html body figcaption,html body .cap{
  color:var(--kc-white-2) !important;-webkit-text-fill-color:var(--kc-white-2) !important}

/* ── TEXT SITTING DIRECTLY ON THE OFF-WHITE PAGE ───────────────────────────────
   Outside every box, the ground is --kc-page, so letters go dark. Scoped to direct children
   of body and of a plain wrapper, so it can never reach inside a black box. */
html body > h1,html body > h2,html body > h3,html body > p,html body > ul,html body > ol,
html body > .wrap > h1,html body > .wrap > h2,html body > .wrap > h3,html body > .wrap > p,
html body > main > h1,html body > main > h2,html body > main > h3,html body > main > p,
html body > .container > h1,html body > .container > h2,html body > .container > h3,
html body > .container > p{
  color:var(--kc-ink) !important;-webkit-text-fill-color:var(--kc-ink) !important}
html body > .wrap > h1 a,html body > main > h1 a,html body > h1 a,
html body > .wrap > p a,html body > main > p a,html body > p a{
  color:#8A6B12 !important;-webkit-text-fill-color:#8A6B12 !important;
  text-decoration:underline;text-underline-offset:3px}

/* ── IMAGES KEEP THEIR OWN PIXELS ──────────────────────────────────────────────
   A colour rule must never repaint a photograph or an inline SVG that carries its own fill. */
html body img,html body picture,html body video,html body canvas{
  background:none !important;-webkit-text-fill-color:initial !important}
html body svg{-webkit-text-fill-color:initial !important}