/* ============================================================================
   CORA blog, maroon ground (2026-07-19)

   WHAT THIS DOES
   Turns the 35 /blog/ pages (hub index plus 34 guides) maroon led rather than
   cream led: maroon page ground, maroon nav, maroon banner, maroon article
   prose, maroon CTA and maroon footer. Cream is kept only where it earns its
   place, on the dense reference surfaces (callouts and data tables), which is
   the readability carve out the brief allows for.

   WHY THIS IS A SEPARATE FILE, NOT AN EDIT TO blog.css OR styles.css
   Both of those stylesheets are shared well beyond this group. /blog/blog.css
   is also loaded by the 79 /courses/ pages, and /styles.css is loaded by the
   whole site. Putting a maroon page ground in either one would silently
   repaint pages outside this group. This file is linked ONLY from the 35 blog
   pages, and only ever after styles.css, so:
     1. nothing leaks into the course or main pages, and
     2. it wins ties on source order, so almost nothing here needs !important.

   SPECIFICITY NOTES, READ BEFORE EDITING
   blog.css styles the article with descendant selectors like
   "article.post h2" and "article.post a", which score (0,1,2). A single class
   selector such as ".cta-box h2" (0,1,1) LOSES to them regardless of order.
   That is the live defect this file fixes, see the CTA section. Any new rule
   that targets a heading, link or button inside the article must match or beat
   (0,1,2), which is why several selectors below are deliberately long.

   COLOUR RULES ON MAROON #481827, all measured, none assumed:
     #FCF7F1 cream          13.73:1   headings, emphasis, wordmark
     #F3E9D6 cream deep     12.15:1   body copy, nav links, buttons on dark
     #EBE2CF cream          11.36:1   footer body copy
     #d3c6ac peach deep      8.67:1   metadata and de emphasised copy
     #f0a599 salmon          7.35:1   links, accents, rules, focus and borders
   Never used as text on maroon, all measured failures:
     rust #ab482d 2.58:1, rust dark #8a3a22 1.89:1, moss #6a7049 2.81:1,
     olive #4f552f 1.86:1, #5c3c44 1.52:1.
   Two maroon surfaces cannot be told apart by fill alone: a lifted panel at
   #7d4256 measures only 1.94:1 against #481827 and #5a2033 only 1.18:1, both
   under the 3:1 needed for a visible boundary. Panels on maroon are therefore
   separated by a BORDER, not by a second maroon.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Only the two text only tokens are retargeted. Both are used on this group
   exclusively for copy that now sits on maroon, including the 28 inline
   style attributes in the HTML, which reference these vars and so are fixed
   here without touching the markup.
   --terra-dk is deliberately NOT retargeted: it is a button and pill FILL
   (.btn-primary, .nav-cta) as well as a text colour, and flipping it would
   turn those fills salmon.
   --------------------------------------------------------------------------- */
:root {
  --muted: #F3E9D6;            /* was #481827, invisible on maroon */
  --light-txt: #d3c6ac;        /* was #5c3c44, 1.52:1 on maroon */
  --on-maroon: #F3E9D6;
  --on-maroon-strong: #FCF7F1;
  --on-maroon-quiet: #d3c6ac;
  --on-maroon-accent: #f0a599;
  --maroon: #481827;
  --paper: #f3e9d6;            /* cream island: callouts and tables */
  --paper-head: #ebe2cf;       /* table header banding */
  --paper-rule: #d3c6ac;
  --paper-ink: #481827;
  --paper-link: #8a3a22;       /* rust dark, 6.44:1 on paper, light grounds only */
}

/* ---------------------------------------------------------------------------
   2. PAGE GROUND
   --------------------------------------------------------------------------- */
body {
  background: var(--maroon);
  color: var(--on-maroon);
}

::selection { background: #F3E9D6; color: #481827; }
/* The cream islands take an inverted highlight. The #F3E9D6 fill above lands
   on their #f3e9d6 surface at 1.00:1, so a selection made on exactly the
   panels that carry the reference content was imperceptible. */
.callout ::selection,
article.post table ::selection { background: #481827; color: #F3E9D6; }

/* blog.css sets `a:hover { color: var(--green) }`, which resolves to #481827,
   and the :hover overrides further down this file are all written per
   component. The hub's one bare paragraph link, "See common questions", sits
   directly on the maroon ground and matched none of them, so it went maroon
   on maroon at 1.00:1 the moment the pointer touched it. Scoped to bare
   paragraph links in the main column so it cannot reach the cream nav portal
   pill or anything inside a cream island. */
main .wrap > p a:hover { color: #FCF7F1; }

/* Focus is cream on the maroon ground. Rust at 1.89:1 was effectively an
   invisible focus ring, which is a keyboard navigation failure, not a
   cosmetic one. Inside the cream islands it flips back to maroon. */
:focus-visible { outline: 3px solid #FCF7F1; outline-offset: 3px; }
.callout :focus-visible,
article.post table :focus-visible { outline-color: #481827; }

.skip-link { background: #F3E9D6; color: #481827; }

/* ---------------------------------------------------------------------------
   3. NAV
   Ported from index.html, which already carries a maroon nav. This closes the
   cream nav / maroon banner seam and fixes the rust wordmark dot, which was
   2.58:1 on maroon in production.
   --------------------------------------------------------------------------- */
.site-nav {
  background: var(--maroon);
  border-bottom: 1.5px solid rgba(243,233,214,0.40);
}
.site-nav.scrolled { box-shadow: 0 1px 0 rgba(243,233,214,0.30), 0 8px 24px -18px rgba(0,0,0,0.6); }

.wordmark { color: #FCF7F1; }
.wordmark .dot { color: #f0a599; }

.nav-links a { color: #F3E9D6; }
.nav-links a:hover,
.nav-links a.active { color: #f0a599; }
.nav-links a::after { background: #f0a599; }

/* Mobile drawer: styles.css paints this cream in two places (a media query and
   the always on hamburger block). Both are single class selectors, so this
   later rule wins over each. */
.nav-links { background: var(--maroon); border-bottom-color: rgba(243,233,214,0.40); }
.nav-links a { border-bottom-color: rgba(243,233,214,0.20); }

.nav-toggle { border-color: rgba(243,233,214,0.45); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #F3E9D6; }
.nav-open .nav-toggle span { background: transparent; }

/* Portal inverts to a cream pill so it still reads as a control on maroon. */
.nav-portal { background: #F3E9D6; color: #481827; }
.nav-portal:focus-visible { outline: 2px solid #FCF7F1; }

/* The rust CTA pill keeps its fill (label is 7.28:1 on it) but the fill itself
   is only 1.89:1 against maroon, so the pill had no silhouette. A salmon
   hairline at 7.35:1 gives it its shape back.
   The background is restated at (0,2,1) because ".nav-links a { background:
   none }" in styles.css scores (0,1,1) and was stripping the fill entirely.
   That is a live defect: in the open drawer the pill rendered as white text on
   the cream drawer at 1.29:1. */
.nav-links a.nav-cta,
a.nav-cta {
  background: #8a3a22;
  color: #FCF7F1;
  border: 1.5px solid #f0a599;
}
.nav-links a.nav-cta:hover,
a.nav-cta:hover { background: #742f1c; color: #FCF7F1; }

/* ---------------------------------------------------------------------------
   4. BANNER
   blog.css already made .post-hero and .hub-hero maroon. On a maroon ground
   the rounded card has no edge, so the banner is re anchored with a rule at
   its foot, which divides banner from article at 3.12:1.
   The 20px radius and the fluid padding from blog.css are left alone: the
   hero div sits inside .wrap in all 35 files and moving it out would be a
   structural change to the markup.
   --------------------------------------------------------------------------- */
.post-hero, .hub-hero {
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid rgba(243,233,214,0.40);
  margin-bottom: 36px;
}
/* The hub already gets a rule from the first .post-card border, so the banner
   rule would read as a double line there. */
.hub-hero { padding-bottom: clamp(28px, 4vw, 40px); border-bottom: none; margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   5. BYLINE
   --------------------------------------------------------------------------- */
.byline .byline-text { color: #d3c6ac; }
.byline .byline-name a { color: #FCF7F1; text-decoration: none; }
.byline .byline-name a:hover { color: #f0a599; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   6. ARTICLE PROSE
   Body weight goes 300 to 400. Light on dark at weight 300 haloes, especially
   at 17px over a long read, so the extra weight is a legibility measure, not
   a style preference. No copy, sizes or structure change.
   --------------------------------------------------------------------------- */
article.post { color: #F3E9D6; }
article.post p,
article.post li,
article.post td { color: #F3E9D6; font-weight: 400; }
article.post h2,
article.post h3,
article.post h4 { color: #FCF7F1; }
article.post strong { color: #FCF7F1; }

/* Links stay underlined so they are not signalled by colour alone. Buttons are
   excluded: they are already identifiable as controls by their shape. */
article.post a:not(.btn) { color: #f0a599; text-decoration: underline; }
article.post a:not(.btn):hover { color: #FCF7F1; }
article.post a.btn { text-decoration: none; }

/* ---------------------------------------------------------------------------
   7. CREAM ISLANDS
   Callouts and data tables stay on paper. A 25 of 34 posts carry a comparison
   table with hairline row rules and two to three columns of dense text; that
   is the case the brief flags as worth keeping legible rather than forcing
   maroon onto. Callouts keep the same paper so the two read as one family.
   Everything inside an island is re inked to maroon, and links inside revert
   to rust dark, which passes on paper (6.44:1) but never on maroon.
   --------------------------------------------------------------------------- */
.callout {
  background: var(--paper);
  border-color: var(--paper-rule);
  color: var(--paper-ink);
}
article.post .callout,
article.post .callout p,
article.post .callout li,
article.post .callout strong { color: var(--paper-ink); }
article.post .callout h2,
article.post .callout h3,
article.post .callout h4 { color: var(--paper-ink); }
/* :not(.btn) is repeated here deliberately. The prose link rule above scores
   (0,2,2) because :not() contributes its argument's specificity, so a plain
   ".callout a" at (0,1,2) would lose to it and leave salmon links on cream. */
article.post .callout a:not(.btn) { color: var(--paper-link); }
article.post .callout a:not(.btn):hover { color: #481827; }

/* Table becomes a paper card. blog.css leaves td transparent, so without this
   every table cell would inherit cream on the maroon ground while the th kept
   its cream fill, which would invert the header relationship. */
article.post table {
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  color: var(--paper-ink);
}
article.post th,
article.post td {
  border-bottom-color: var(--paper-rule);
  color: var(--paper-ink);
}
article.post th { background: var(--paper-head); color: var(--paper-ink); }
article.post td { color: var(--paper-ink); font-weight: 400; }
article.post tr:last-child td { border-bottom: none; }
article.post table a:not(.btn) { color: var(--paper-link); }
article.post table a:not(.btn):hover { color: #481827; }
article.post table strong { color: var(--paper-ink); }

/* Tables must be able to scroll rather than push the page sideways on a
   phone. blog.css sets width:100% with no overflow owner. */
article.post table { display: block; overflow-x: auto; max-width: 100%; }
@media (min-width: 560px) { article.post table { display: table; } }

/* ---------------------------------------------------------------------------
   8. CTA BOX
   Fixes three elements that are invisible in production today on all 34 posts.
   Measured live with getComputedStyle, not inferred:
     .cta-box h2            #481827 on #481827   1.00:1
     .cta-box .btn-primary  #8a3a22 on #8a3a22   1.00:1
     .cta-box .btn-ghost    #8a3a22 on #4f552f   1.01:1
   Cause in every case is blog.css "article.post h2" and "article.post a" at
   (0,1,2) out ranking the component rules, plus styles.css line 754 repainting
   .btn-ghost with an off palette olive fill. Selectors below are lengthened to
   beat (0,1,2) rather than reaching for !important.
   The box keeps the maroon fill and gains a salmon border, because a second
   maroon cannot separate from the ground (see file header).
   --------------------------------------------------------------------------- */
.cta-box {
  background: var(--maroon);
  border: 1.5px solid #f0a599;
  color: #F3E9D6;
}
article.post .cta-box h2 { color: #FCF7F1; }
article.post .cta-box p { color: #F3E9D6; }

/* Cream fill with a maroon label is the sanctioned primary on maroon: it is
   the only treatment that gives the button both a readable label and a
   visible silhouette against the ground. */
article.post .cta-box .btn-primary {
  background: #F3E9D6;
  color: #481827;
  border-color: #F3E9D6;
}
article.post .cta-box .btn-primary:hover {
  background: #FCF7F1;
  color: #481827;
  border-color: #FCF7F1;
}

/* Restores a true outline button. styles.css:754 had turned this into a solid
   olive #4f552f chip, which is 1.86:1 against the maroon panel. */
article.post .cta-box .btn-ghost {
  background: transparent;
  color: #F3E9D6;
  border: 1.5px solid #f0a599;
}
article.post .cta-box .btn-ghost:hover {
  background: #F3E9D6;
  color: #481827;
  border-color: #F3E9D6;
}

/* ---------------------------------------------------------------------------
   9. FAQ
   Four to five questions per post, so this is not the long dense accordion the
   brief warns about and it stays on maroon.
   --------------------------------------------------------------------------- */
.post-faq details { border-top-color: rgba(243,233,214,0.28); }
.post-faq details:last-of-type { border-bottom-color: rgba(243,233,214,0.28); }
.post-faq summary { color: #FCF7F1; }
.post-faq summary::marker { color: #f0a599; }
.post-faq p { color: #F3E9D6; }
.post-faq a { color: #f0a599; }

/* ---------------------------------------------------------------------------
   10. FOOT OF ARTICLE
   --------------------------------------------------------------------------- */
.back-link { color: #f0a599; }
.back-link:hover { color: #FCF7F1; }

/* ---------------------------------------------------------------------------
   11. HUB INDEX
   --------------------------------------------------------------------------- */
.post-card { border-top-color: rgba(243,233,214,0.28); }
.post-card:last-child { border-bottom-color: rgba(243,233,214,0.28); }
.post-card .meta { color: #d3c6ac; }
.post-card h2 a { color: #FCF7F1; }
.post-card h2 a:hover { color: #f0a599; }
.post-card p { color: #F3E9D6; }

/* Was moss on cream deep at 4.33:1, an existing AA failure before any of this
   work. Now a peach deep chip carrying maroon text. */
.tag { color: #481827; background: #d3c6ac; }
.tag.soon-tag { color: #481827; background: #d3c6ac; }

.hub-plain { color: #F3E9D6; }
.hub-links a { color: #f0a599; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   Already maroon. Two fixes: the wordmark full stop was rust at 2.58:1, a live
   failure, and the two rgba(188,208,197,x) values are a grey green left over
   from the retired palette, replaced with warm cream at a higher ratio.
   --------------------------------------------------------------------------- */
.site-footer .wordmark { color: #FCF7F1; }
.site-footer .wordmark .dot { color: #f0a599; }
.footer-top { border-bottom-color: rgba(243,233,214,0.45); }  /* 3.57:1, was 0.22 at 1.84:1 */
.footer-bottom { color: rgba(243,233,214,0.70); }
.footer-contact a { color: #F3E9D6; }
.footer-contact a:hover { color: #f0a599; }
.footer-links a:hover { color: #f0a599; }

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   The hero loses its side padding on the maroon ground, so on narrow screens
   the banner column lines up with the article column rather than sitting in a
   card. Nothing else changes shape.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .post-hero, .hub-hero { margin-bottom: 28px; }
}

/* ---------------------------------------------------------------------------
   14. CATEGORISED ARTICLE INDEX (blog hub only)
   A scannable topic index in place of the old stacked cards: plain text title
   links grouped under category headings, two columns on desktop, one on
   mobile. No cards, no images, no excerpts, no dates.

   Measured contrast against the maroon ground #481827:
     heading cream    #FCF7F1                  13.73:1  (AA large + normal)
     link cream deep  #F3E9D6                  12.15:1  (AA normal)
     intro            #EBE2CF                  11.36:1  (AA normal)
     subtitle peach   #d3c6ac                   8.67:1  (AA normal)
     hover / more     #f0a599                   7.35:1  (AA normal)
     rules            rgba(243,233,214,0.42)
                      composites to #907070      3.30:1  (clears the 3:1
                      non text bar in WCAG 1.4.11 at 1px)
   --------------------------------------------------------------------------- */

.topic-index { margin: 8px 0 0; }

.topic-index-head { margin: 0 0 40px; }
.topic-index-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #FCF7F1;
  margin: 0 0 6px;
}
.topic-index-head p {
  margin: 0;
  color: #d3c6ac;
  font-size: 1rem;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 72px;
  align-items: start;
}

.topic-col { min-width: 0; }

.topic-group + .topic-group { margin-top: 56px; }

.topic-group h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FCF7F1;
  margin: 0 0 4px;
}

.topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topic-list li { border-top: 1px solid rgba(243,233,214,0.42); }

.topic-list a {
  display: block;
  padding: 13px 0;
  color: #F3E9D6;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.4;
}
.topic-list a:hover { color: #f0a599; }
.topic-list a:focus-visible {
  color: #f0a599;
  outline: 2px solid #f0a599;
  outline-offset: 3px;
  border-radius: 2px;
}

.topic-more {
  display: inline-block;
  margin-top: 18px;
  color: #f0a599;
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.topic-more:hover { text-decoration: underline; }
.topic-more:focus-visible {
  outline: 2px solid #f0a599;
  outline-offset: 3px;
  border-radius: 2px;
}

.topic-foot {
  margin: 72px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(243,233,214,0.42);
  color: #d3c6ac;
  font-size: 0.95rem;
}
.topic-foot a { color: #f0a599; text-decoration: none; }
.topic-foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .topic-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .topic-index-head { margin-bottom: 32px; }
  .topic-group + .topic-group { margin-top: 56px; }
}

/* ---------------------------------------------------------------------------
   9. CTA BOX, SECOND PASS (2026-07-19)
   Section 8 above gave the box a salmon border, which is a correct
   accessibility fix and is why the border rule stays. It does not fix the
   hierarchy. A 7.35:1 hairline drawn around a 1.00:1 fill still leaves the
   strongest ask on the page as the quietest object on it, sitting at the foot
   of a long read where the eye is meant to stop.

   The blog already proves the cream island works in exactly this context:
   .callout and the article tables are cream panels on the maroon ground and
   they read immediately. This is a consistency fix as much as a hierarchy
   one. Selectors stay lengthened to beat blog.css's article.post rules at
   (0,1,2) rather than reaching for !important.
   --------------------------------------------------------------------------- */
.cta-box {
  background: #F3E9D6;                 /* 12.15:1 against the maroon ground */
  border: 1.5px solid #d3c6ac;
  color: #481827;                      /* 12.15:1 */
}
article.post .cta-box h2 { color: #481827; }               /* 12.15:1 */
article.post .cta-box h2 em { color: #983E28; }            /*  5.71:1 */
article.post .cta-box p { color: #481827; }                /* 12.15:1 */
article.post .cta-box a:not(.btn) { color: #8a3a22; }     /*  6.44:1 */

/* On a cream panel the primary inverts: rust fill under a cream label, which
   is the on-cream primary used on the pricing ladder and in the callouts. */
article.post .cta-box .btn-primary {
  background: #8a3a22;
  color: #FCF7F1;                      /* 7.28:1 */
  border-color: #8a3a22;
}
article.post .cta-box .btn-primary:hover {
  background: #742f1c;
  color: #FCF7F1;                      /* 9.10:1 */
  border-color: #742f1c;
}
article.post .cta-box .btn-ghost {
  background: transparent;
  color: #8a3a22;                      /* 6.44:1 */
  border: 1.5px solid #8a3a22;
}
article.post .cta-box .btn-ghost:hover {
  background: #8a3a22;
  color: #FCF7F1;                      /* 7.28:1 */
  border-color: #8a3a22;
}
.cta-box :focus-visible { outline-color: #8a3a22; }
.cta-box .btn:focus-visible { outline: 3px solid #8a3a22; outline-offset: 3px; }