/*
Theme Name: Career Choice
Theme URI: https://career-choice.ca/
Author: Career Choice
Description: The Career Choice blog theme. Matches the marketing site exactly —
  same palette, same self-hosted typefaces, same restraint. Built for a firm
  that sells discretion, so nothing here shouts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: career-choice
*/

/* Tokens lifted from site/styles.css so the blog and the marketing site cannot
   drift apart. If a value changes there, change it here. */
:root {
  --ink: #1a1a2e;
  --ink-soft: #4d4d72;
  --ink-dim: #54547a;
  --paper: #ffffff;
  --soft: #f8f8fc;
  --line: rgba(26, 26, 46, 0.08);
  --brand: #2d2462;
  --blue: #3a5dad;
  --gold: #b8954a;
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
.layout-wrapper { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── header ─────────────────────────────────────────────────────────── */
.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
}
.site-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 72px;
}
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand); }
.site-logo img { height: 30px; width: auto; }
.site-logo span {
  font-family: "DM Serif Display", Georgia, serif; font-size: 20px; letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 500;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--brand); }
.site-nav .nav-cta {
  background: var(--brand); color: #fff; padding: 9px 16px; border-radius: 8px;
}
.site-nav .nav-cta:hover { background: #241c53; color: #fff; }
.nav-toggle { display: none; background: none; border: 0; font: inherit; cursor: pointer; color: var(--brand); }

/* ── masthead: brand and culture, before any article ────────────────── */
.blog-masthead { padding: 72px 0 52px; border-bottom: 1px solid var(--line); }
.masthead-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}
.blog-masthead h1 {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: clamp(38px, 5.4vw, 60px); line-height: 1.06;
  margin: 16px 0 0; letter-spacing: -0.015em; text-wrap: balance;
}
.masthead-standfirst {
  font-size: 19px; line-height: 1.6; color: var(--ink-soft);
  max-width: 60ch; margin: 20px 0 0;
}
.masthead-values {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; margin-top: 44px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.masthead-value { background: var(--paper); padding: 20px 22px; }
.masthead-value strong {
  display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 4px;
}
.masthead-value span { font-size: 13.5px; color: var(--ink-dim); }

/* ── article grid ───────────────────────────────────────────────────── */
.posts-section { padding: 56px 0 88px; }
.section-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 22px;
}

/* The newest post gets the width. A grid of identical cards makes every
   article look equally (un)important, which is not how an editor thinks. */
.post-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  align-items: center; margin-bottom: 56px;
  padding-bottom: 56px; border-bottom: 1px solid var(--line);
}
.post-lead-media { border-radius: 14px; overflow: hidden; background: var(--soft); aspect-ratio: 16 / 10; }
.post-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.post-lead h2 {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; margin: 12px 0 14px;
  letter-spacing: -0.012em; text-wrap: balance;
}
.post-lead h2 a { color: inherit; text-decoration: none; }
.post-lead h2 a:hover { color: var(--brand); }
.post-lead p { color: var(--ink-soft); margin: 0 0 18px; font-size: 16.5px; }

.post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 34px 30px;
}
.post-card { display: flex; flex-direction: column; }
.post-card-media {
  border-radius: 12px; overflow: hidden; background: var(--soft);
  aspect-ratio: 16 / 10; margin-bottom: 16px;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card h3 {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.22; margin: 0 0 8px; letter-spacing: -0.008em;
}
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--brand); }
.post-card p { color: var(--ink-soft); font-size: 15px; margin: 0 0 14px; }

.post-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-dim);
}
.post-meta .cat {
  color: var(--gold); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 11px; text-decoration: none;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }
.read-more {
  margin-top: auto; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--brand);
}
.read-more::after { content: " \2192"; }

/* ── single post ────────────────────────────────────────────────────── */
.entry { padding: 56px 0 88px; }
.entry-head { max-width: 68ch; margin: 0 auto 36px; }
.entry-head h1 {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; margin: 14px 0 16px;
  letter-spacing: -0.015em; text-wrap: balance;
}
.entry-content { max-width: 68ch; margin: 0 auto; font-size: 17.5px; }
.entry-content h2 {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400;
  font-size: 30px; line-height: 1.2; margin: 44px 0 12px;
}
.entry-content h3 { font-size: 20px; margin: 32px 0 8px; }
.entry-content blockquote {
  margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold);
  font-size: 19px; color: var(--ink-soft);
}
.entry-content img { border-radius: 12px; margin: 28px 0; }
.entry-featured { border-radius: 14px; overflow: hidden; margin-bottom: 40px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--soft); padding: 44px 0; }
.site-foot-inner {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-dim);
}
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--brand); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 56px; }
.pagination .page-numbers {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--ink-soft); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--brand); color: #fff; border-color: var(--brand); }

.is-empty-state { padding: 72px 0; text-align: center; color: var(--ink-soft); }

@media (max-width: 860px) {
  .post-lead { grid-template-columns: 1fr; gap: 22px; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px 24px 22px;
  }
  .nav-toggle { display: block; }
  .blog-masthead { padding: 48px 0 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card:hover .post-card-media img { transform: none; }
}


/* ── Direction B · the hero ────────────────────────────────────────────────
   Full-bleed image with the lead headline over it. Two rules here are
   load-bearing rather than decorative:

   The scrim is a gradient, not a flat overlay. A flat wash at the opacity
   needed to make text legible over a bright photograph greys out the whole
   image and the hero stops being a photograph; a gradient keeps the top of the
   frame open and darkens only where the type sits.

   Type never sits directly on the photograph without that scrim. The images
   here are generated and their brightness is not knowable in advance, so the
   safe assumption is that some of them will be light. */
.hero {
  position: relative;
  background-color: var(--brand-deep, #241d52);
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgba(26,26,46,0.46) 0%,
              rgba(26,26,46,0.68) 55%,
              rgba(26,26,46,0.86) 100%);
}
.hero--no-image::after { background: none; }
.hero-inner { padding: 132px 0 44px; max-width: var(--max, 1240px); }
.hero-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 10px 0 12px;
  max-width: 20ch;              /* a headline, not a paragraph */
  text-wrap: balance;
}
.hero-title a { color: #fff; text-decoration: none; }
.hero-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-standfirst {
  font-size: 16px; line-height: 1.55; max-width: 62ch;
  color: rgba(255,255,255,0.88); margin: 0 0 20px;
}
.post-meta--on-dark { color: rgba(255,255,255,0.78); }
.post-meta--on-dark .cat { color: var(--gold, #b08d4f); }
.post-meta--on-dark .dot { background: rgba(255,255,255,0.45); }
.hero-cta {
  display: inline-block; background: #fff; color: var(--brand, #2d2462);
  font-weight: 600; font-size: 14px; padding: 10px 20px;
  border-radius: var(--radius-sm, 8px); text-decoration: none;
}
.hero-cta:hover { background: rgba(255,255,255,0.9); }
.hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The masthead follows the hero, so it loses its top padding: two large
   stacked headers with full padding read as two separate pages. */
.hero + .blog-masthead { padding-top: 44px; }

@media (max-width: 720px) {
  .hero-inner { padding: 84px 0 32px; }
  .hero-title { max-width: none; }
}

/* ── Direction B · the article ─────────────────────────────────────────────
   Hero image, then the headline card lifted over it. The card is pulled up
   with a negative margin rather than absolutely positioned, so it cannot
   overlap the text below it when the headline wraps to three lines on a
   phone. */
.entry-hero {
  height: clamp(220px, 34vw, 400px);
  background-size: cover; background-position: center;
  background-color: var(--brand-deep, #241d52);
}
.entry-card {
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(26,26,46,0.08));
  border-radius: var(--radius, 14px);
  padding: 30px 34px;
  margin: -72px auto 0;
  max-width: 760px;
  position: relative;
  box-shadow: var(--shadow, 0 24px 48px -16px rgba(26,26,46,0.12));
}
.entry-card h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12; margin: 8px 0 0; text-wrap: balance;
}
.entry-byline {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--line, rgba(26,26,46,0.08));
}
.entry-byline .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-soft, #f1f0fa); color: var(--brand, #2d2462);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  flex: none;
}
.entry-byline strong { font-size: 13.5px; display: block; }
.entry-byline span { font-size: 12.5px; color: var(--ink-soft, #4d4d72); }

@media (max-width: 720px) {
  .entry-card { margin: -40px 16px 0; padding: 22px 20px; }
}

/* No featured image means no hero to overlap, so the pull-up must not apply --
   otherwise the card is dragged up under the site header. */
.entry-card--no-hero { margin-top: 40px; box-shadow: none; border: 0; padding-left: 0; padding-right: 0; }


/* ── Brand lockup, mirrored from the marketing site ────────────────────────
   Copied from .site-brand-logo in site/styles.css rather than reinvented: the
   two headers sit one click apart and any drift between them reads as a
   different company. The old .site-logo rule is left in place because header
   markup elsewhere in the theme may still use it. */
.site-brand-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
}
.site-brand-logo img { height: 44px; width: auto; flex-shrink: 0; }
.site-brand-logo .brand-name-block {
  display: flex; flex-direction: column; line-height: 1.1;
  border-left: 1px solid var(--line); padding-left: 14px;
}
.site-brand-logo .brand-name-block span {
  font-size: 11px; color: var(--ink-soft);
  font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
}
/* The descriptor is the first thing worth dropping on a phone -- the mark
   alone still identifies the firm, and the nav needs the room. */
@media (max-width: 600px) {
  .site-brand-logo .brand-name-block { display: none; }
}


/* ── Primary nav — mirrors the marketing site ──────────────────────────────
   Hover-intent dropdowns, with the Insights item opening a two-column mega
   menu split by vertical.

   Two accessibility rules the marketing site also honours: the panel opens on
   :focus-within as well as :hover, so it is reachable by keyboard; and there
   is no gap between the trigger and the panel, because a mouse crossing dead
   space closes the menu and the reader has to start again. */
.site-nav.is-primary > ul {
  list-style: none; display: flex; align-items: center;
  gap: 4px; margin: 0; padding: 0;
}
.site-nav.is-primary > ul > li { position: relative; }
.site-nav.is-primary a {
  display: block; padding: 10px 12px; font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-sm, 8px);
  white-space: nowrap;
}
.site-nav.is-primary a:hover { background: var(--soft, #f8f8fc); }
.site-nav.is-primary a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.main-nav-dropdown, .main-nav-mega {
  position: absolute; top: 100%; left: 0; z-index: 60;
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(26,26,46,0.10));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-lift, 0 24px 48px -16px rgba(26,26,46,0.12));
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.main-nav-dropdown { list-style: none; margin: 0; padding: 8px; min-width: 210px; }
.main-nav-group:hover > .main-nav-dropdown,
.main-nav-group:focus-within > .main-nav-dropdown,
.main-nav-group:hover > .main-nav-mega,
.main-nav-group:focus-within > .main-nav-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* The mega panel. Anchored to the left of its trigger and allowed to run
   right, rather than centred: a centred panel on the last-but-one nav item
   overflows the viewport on a 1280px laptop. */
.main-nav-mega {
  display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 8px 28px; padding: 20px 24px; min-width: 480px;
}
.mega-col > .mega-head {
  display: block; padding: 0 0 8px; margin-bottom: 6px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 16px; color: var(--brand, #2d2462);
  border-bottom: 1px solid var(--line, rgba(26,26,46,0.10));
  border-radius: 0;
}
.mega-col > .mega-head:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col ul a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 8px; font-size: 13.5px; color: var(--ink-soft, #4d4d72);
}
.mega-col ul a:hover { color: var(--ink); background: var(--soft, #f8f8fc); }
.mega-count {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-dim, #54547a); background: var(--brand-soft, #f1f0fa);
  padding: 1px 7px; border-radius: 999px;
}

.site-head-cta { margin-left: 8px; }
.button-cta {
  display: inline-block; background: var(--brand, #2d2462); color: #fff;
  font-size: 14px; font-weight: 600; padding: 10px 18px;
  border-radius: var(--radius-sm, 8px); text-decoration: none; white-space: nowrap;
}
.button-cta:hover { background: var(--brand-deep, #241d52); }

/* Mobile: dropdowns become plain stacked lists. Hover does not exist on a
   phone, so a hover-only panel would hide half the navigation. */
@media (max-width: 900px) {
  .site-nav.is-primary { display: none; }
  .site-nav.is-primary.is-open { display: block; width: 100%; }
  .site-nav.is-primary.is-open > ul { flex-direction: column; align-items: stretch; }
  .main-nav-dropdown, .main-nav-mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 8px 12px; min-width: 0;
    display: block; background: transparent;
  }
  .site-head-cta { display: none; }
}


/* ── Author persona page ───────────────────────────────────────────────────
   The portrait is a fixed square with object-fit: cover. The team photos are
   not all the same crop, and without this a portrait shot stretches while a
   landscape one squashes -- on a page whose whole point is that these are real
   named people. */
.author-head { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.author-head-inner { display: flex; gap: 26px; align-items: flex-start; }
.author-portrait { position: relative; flex: none; }
.author-portrait img {
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 1px solid var(--line);
}
.author-initials {
  display: grid;              /* place-items below is inert without this */
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--brand-soft, #f1f0fa); color: var(--brand, #2d2462);
  place-items: center; font-size: 32px;
  font-family: 'DM Serif Display', Georgia, serif;
}
.author-head h1 {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; margin: 6px 0 10px;
}
.author-bio { font-size: 16px; color: var(--ink-soft); max-width: 60ch; margin: 0 0 12px; }
.author-count { font-size: 13px; color: var(--ink-dim); display: flex;
                align-items: center; gap: 10px; margin: 0; }
.author-count a { color: var(--blue); }
@media (max-width: 640px) {
  .author-head-inner { flex-direction: column; gap: 16px; }
  .author-portrait img, .author-initials { width: 84px; height: 84px; font-size: 24px; }
}

a.entry-byline { text-decoration: none; color: inherit; }
a.entry-byline:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* The house byline shows the mark rather than initials — "CC" in a circle
   beside the name "Career Choice" is the same thing said twice. */
.avatar--mark { background: transparent; padding: 3px; object-fit: contain; }
.author-portrait img[src$=".svg"] {
  object-fit: contain; padding: 18px; background: var(--brand-soft, #f1f0fa);
}

/* A category hero is shorter than the homepage hero: it introduces a section
   rather than selling one article, and a full-height image above a list of
   three cards pushes the actual content below the fold. */
.hero--category .hero-inner { padding: 104px 0 40px; }
.hero--category .hero-title { max-width: 24ch; }
.hero--category .hero-standfirst p { margin: 0; }
@media (max-width: 720px) { .hero--category .hero-inner { padding: 72px 0 28px; } }


/* ── Byline headshot ───────────────────────────────────────────────────────
   56px, because the point of showing a face is that it is recognisable. The
   crop is pinned to the TOP of the frame: team photos are portraits, and
   centring a portrait inside a circle cuts the forehead and lands on the
   chin. */
.avatar-wrap { position: relative; flex: none; width: 56px; height: 56px; }
.avatar-photo {
  width: 56px; height: 56px; border-radius: 50%;
  /* The source is already face-aligned by cc-avatar-crop.py, so centre it.
     'center top' here would shift every face up a second time. */
  object-fit: cover; object-position: center;
  border: 1px solid var(--line, rgba(26,26,46,0.10));
  background: var(--brand-soft, #f1f0fa);
  display: block;
}
.avatar-photo.avatar--mark {
  object-fit: contain; padding: 10px; background: var(--brand-soft, #f1f0fa);
}
.avatar-wrap .avatar {
  position: absolute; inset: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-soft, #f1f0fa); color: var(--brand, #2d2462);
  place-items: center; font-size: 17px; font-weight: 700;
}
/* The byline row grows with the photo; the name should sit optically centred
   against it rather than on the first text baseline. */
.entry-byline { align-items: center; gap: 14px; }
.entry-byline strong { font-size: 14.5px; }

/* ── Call to action ────────────────────────────────────────────────────────
   Quiet by construction. This firm sells discretion, so the block reads as an
   editorial aside rather than a banner: brand-soft ground, no border shout, a
   serif head matching the article's own hierarchy. */
.cc-cta {
  margin: 44px 0 8px;
  padding: 30px 32px;
  background: var(--soft, #f8f8fc);
  border: 1px solid var(--line, rgba(26,26,46,0.08));
  border-radius: var(--radius, 14px);
}
.cc-cta-eyebrow {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue, #3a5dad);
}
.cc-cta-head {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.18;
  margin: 0 0 8px; text-wrap: balance;
}
.cc-cta-sub {
  margin: 0 0 20px; font-size: 15px; line-height: 1.6;
  color: var(--ink-soft, #4d4d72); max-width: 56ch;
}
.cc-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-cta-btn {
  display: inline-block; font-size: 14.5px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--radius-sm, 8px);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.cc-cta-btn--primary { background: var(--brand, #2d2462); color: #fff; }
.cc-cta-btn--primary:hover { background: var(--brand-deep, #241d52); }
.cc-cta-btn--ghost {
  background: transparent; color: var(--brand, #2d2462);
  border-color: rgba(45,36,98,0.28);
}
.cc-cta-btn--ghost:hover { background: rgba(45,36,98,0.06); }
.cc-cta-btn:focus-visible { outline: 2px solid var(--blue, #3a5dad); outline-offset: 2px; }
/* The mid-article block interrupts a read, so it is lighter than the closer. */
.cc-cta[data-cc-placement="article_mid"] { margin: 36px 0; padding: 24px 26px; }
@media (max-width: 620px) {
  .cc-cta { padding: 24px 20px; }
  .cc-cta-actions { flex-direction: column; align-items: stretch; }
  .cc-cta-btn { text-align: center; }
}