/*
Theme Name: Maybe
Theme URI: https://maybe.earth
Author: Jason Smith
Author URI: https://maybe.earth
Description: Custom theme for Maybe — objective summaries of the most important voices in consciousness, disclosure and awakening.
Version: 2.7
License: GNU General Public License v2 or later
Text Domain: maybe
*/

:root {
  --ink: #0d0d0d;
  --ink-mid: #444;
  --ink-light: #888;
  --cream: #f7f4ef;
  --cream-dark: #ede9e1;
  --white: #ffffff;
  --gold: #c9a84c;
  --gold-light: #d4b96a;
  --gold-deep: #9a7d24;
  --gold-pale: #f3ecd9;
  --gold-soft: #b89a52;
  --purple: #7b5ea7;
  --pad: clamp(20px, 5vw, 64px);
}

/*
  Shared token block for the "mb-" component system: header.php, footer.php,
  archive-maybe_prediction.php, single-maybe_prediction.php, single.php's
  embedded claim card, and taxonomy-maybe_voice.php. Each of those files
  currently still declares its own identical copy of this same :root block
  inline (self-contained per the full-file-paste workflow — if style.css
  and a template ever get pasted out of sync, the template still renders
  correctly on its own). Additive only — does not touch the --ink/--gold/
  --cream/--purple system above, which governs the dark summary-hero,
  plain-english box, tracker section, cross-refs, try-this, teaser-next,
  and discernment line on single.php, plus whatever still reads
  .site-header/.site-nav/.site-footer/.archive-*/.summary-card (unconfirmed
  whether those are still live — left untouched pending a server check).
*/
:root {
  --mb-gold: #b7972f;
  --mb-gold-dark: #a8842c; /* digest button only — deliberately darker for WCAG contrast against white text */
  --mb-ink: #0d0d0d;
  --mb-ink-soft: #3d3a36;
  --mb-muted: #6b6560;
  --mb-muted-2: #857f78;
  --mb-border: #e8e3dc;
  --mb-cream: #f7f4ef;
  --mb-size-xs: 12px;
  --mb-size-sm: 14px;
  --mb-size-md: 18px;
  --mb-size-lg: 24px;
  --mb-size-xl: 32px;
  /* Panel 7/18: three container widths instead of seven near-identical ones. */
  --mb-width-wide: 1140px;
  --mb-width-mid: 960px;
  --mb-width-narrow: 720px;
  --mb-status-pending-bg: #eef7f2;
  --mb-status-pending-fg: #2d6b4a;
  --mb-status-partial-bg: #fdf5e6;
  --mb-status-partial-fg: #7a5c10;
  --mb-status-confirmed-bg: #eef3fb;
  --mb-status-confirmed-fg: #1a4d8b;
  --mb-status-unconfirmed-bg: #fdf0f0;
  --mb-status-unconfirmed-fg: #8b2020;
  --mb-status-unsupported-bg: #efece7;
  --mb-status-unsupported-fg: var(--mb-muted);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--cream);
  /* Paper grain (design panel II, illustration/texture lens, 2026-07-22): a near-invisible
     noise texture so the cream reads as paper stock, not a flat screen fill — the cheapest,
     highest-reach visual-identity move available, since it's sitewide from this one file.
     Generated (not hand-drawn): SVG feTurbulence, desaturated, tiled, ~3.5% opacity —
     stitchTiles keeps the repeat seamless. Deliberately subliminal; should never be
     consciously "seen," only felt as warmth. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden; /* safety net: one runaway element should never force the whole page to pan sideways on mobile */
}

/* THE EMERGENCE — generative claim visual (Jason, 2026-07-23). The canvas markup
   comes from maybe_emergence_canvas() in functions.php and the drawing script from
   maybe_emergence_script(); this rule only sizes it. Sitewide because every claim
   surface (board, homepage, theme/voice pages, single claim) carries one.
   Resized 2026-07-23 (Jason: "takes up too much space") — a small fixed square
   icon instead of a full-width banner; single-claim pages get the --lg variant. */
.mb-emergence { display: block; width: 56px; height: 56px; margin: 0 0 10px; }
.mb-emergence--lg { width: 88px; height: 88px; }
/* Caption (Jason, 2026-07-23): without this the halftone image reads as pure
   decoration to a first-time visitor. Quiet, always-on, one line — explains the
   mechanic without repeating the verdict stamp's own label right below it. */
.mb-emergence-caption { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--mb-muted-2, #857f78); font-style: italic; margin: 0 0 12px; }

/* EVIDENCE BASIS beside every verdict chip — the Sagan Fork panel's #1 fix
   (decided 2026-07-16, shipped 2026-07-23). Markup comes from
   maybe_evidence_basis_line() in functions.php. Sitewide from here because it
   appears on all six claim surfaces (same reasoning as .mb-emergence above).
   Deliberately SUBORDINATE to the stamp — the verdict is the headline, the
   evidence type is the qualifier — so: small, muted, mono, its own line.
   display:block keeps it layout-robust in every parent; on the claims board it
   sits outside the flex .claim-foot row so it still gets its own line there. */
.mb-basis { display: block; margin-top: 8px; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--mb-muted-2, #857f78); }

/* NAV */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); height: 64px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-wordmark { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--white); text-decoration: none; letter-spacing: -.5px; }
.site-wordmark span { color: var(--gold); }
.site-nav { display: flex; gap: 28px; list-style: none; }
.site-nav a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .2s; }
.site-nav a:hover { color: var(--white); }
.nav-digest { background: var(--gold); color: var(--ink); padding: 8px 18px; font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 3px; white-space: nowrap; }

/* ARCHIVE */
.archive-hero { background: var(--ink); padding: 72px var(--pad) 64px; text-align: center; }
.archive-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.archive-title { font-family: 'DM Serif Display', serif; font-size: clamp(32px, 6vw, 64px); font-weight: 400; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.archive-sub { font-size: 16px; color: rgba(255,255,255,.55); max-width: 560px; margin: 0 auto; line-height: 1.7; }
.archive-grid { max-width: var(--mb-width-mid); margin: 0 auto; padding: 56px var(--pad); display: flex; flex-direction: column; gap: 0; }
.summary-card { padding: 36px 0; border-bottom: 1px solid var(--cream-dark); }
.summary-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.summary-card-number { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: .1em; }
.summary-card-platform { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-light); letter-spacing: .06em; }
.summary-card-date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: .06em; }
.summary-card-title { font-family: 'DM Serif Display', serif; font-size: 26px; font-weight: 400; margin-bottom: 10px; line-height: 1.2; }
.summary-card-title a { color: var(--ink); text-decoration: none; transition: color .2s; }
.summary-card-title a:hover { color: var(--gold); }
.summary-card-teaser { font-family: 'DM Serif Display', serif; font-size: 16px; font-style: italic; color: var(--ink-mid); line-height: 1.6; margin-bottom: 14px; }
.summary-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.summary-card-tag { background: var(--cream-dark); color: var(--ink-mid); font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 10px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase; }
.summary-read-link { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: opacity .2s; }
.summary-read-link:hover { opacity: .7; }

/* FEATURED POST */
.featured-card { padding: 44px; background: var(--ink); margin-bottom: 48px; border-radius: 6px; }
.featured-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; }
.featured-title { font-family: 'DM Serif Display', serif; font-size: clamp(28px, 4vw, 42px); font-weight: 400; color: var(--white); line-height: 1.15; margin-bottom: 12px; }
.featured-title a { color: var(--white); text-decoration: none; transition: color .2s; }
.featured-title a:hover { color: var(--gold); }
.featured-teaser { font-family: 'DM Serif Display', serif; font-size: 17px; font-style: italic; color: rgba(255,255,255,.65); line-height: 1.65; margin-bottom: 24px; }
.featured-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.featured-platform { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: .06em; }
.featured-date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: .06em; }
.featured-read-link { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; border: 1px solid var(--gold); padding: 10px 20px; display: inline-block; transition: all .2s; }
.featured-read-link:hover { background: var(--gold); color: var(--ink); }

/* HERO */
.summary-hero { background: var(--ink); padding: 64px var(--pad) 56px; }
.summary-hero-inner { max-width: var(--mb-width-narrow); margin: 0 auto; }
.summary-back { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; display: inline-block; margin-bottom: 28px; transition: opacity .2s; }
.summary-back:hover { opacity: .7; }
.summary-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.summary-title { font-family: 'DM Serif Display', serif; font-size: clamp(36px, 6vw, 64px); font-weight: 400; color: var(--white); line-height: 1.1; margin-bottom: 12px; }
/* Connectivity pass (2026-07-22): the hero name links to that voice's profile page. */
.summary-title a { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.25); transition: border-color .2s; }
.summary-title a:hover { border-color: var(--gold); }
.hero-episode-title { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--gold); letter-spacing: .08em; margin-bottom: 6px; }
.hero-platform { font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.hero-airdate { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.summary-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.summary-tag { background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); font-family: 'DM Mono', monospace; font-size: 10px; padding: 4px 12px; border-radius: 20px; letter-spacing: .08em; text-transform: uppercase; }

/* BODY */
.summary-body { max-width: var(--mb-width-narrow); margin: 0 auto; padding: 56px var(--pad); }

/* PLAIN ENGLISH */
.plain-english {
  background: var(--gold-pale);
  border-radius: 6px;
  padding: 44px 44px;
  margin-bottom: 56px;
  border: 1px solid #e6d9b8;
}
.plain-english-label {
  display: block;
  margin-bottom: 30px;
}
.pe-label-big {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-deep);
  display: block;
  line-height: 1.2;
  margin-bottom: 4px;
}
.pe-label-small {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-soft);
  display: block;
  line-height: 1.2;
}
.pe-hook {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 22px;
}
.pe-body {
  font-size: 17px;
  line-height: 1.8;
  color: #3a3526;
  margin-bottom: 24px;
}
.pe-tagline {
  font-family: 'DM Serif Display', serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
  padding-top: 20px;
  border-top: 1px solid #e0cf9f;
}

/* QUIET INTRO SECTIONS */
.opener-wrap, .scene-setter-wrap { margin-bottom: 44px; }
.field-label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
}
.opener-text, .scene-setter-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-mid);
  font-style: normal;
}

/* KEY THEMES */
.themes-section { margin-bottom: 48px; margin-top: 8px; }
.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--gold);
}
.theme-text h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 14px;
  margin-top: 44px;
  line-height: 1.3;
  font-style: normal;
}
.theme-text h3:first-child { margin-top: 0; }
.theme-text p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-mid);
  margin-bottom: 16px;
  font-style: normal;
}

/* ANALYST NOTE */
.analyst-note { background: var(--ink); color: rgba(255,255,255,.85); padding: 32px 36px; margin-bottom: 40px; border-radius: 6px; }
.analyst-note-label { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,168,76,.3); }
.analyst-note p { font-size: 15px; line-height: 1.85; font-style: normal; }

/* PREDICTION TRACKER */
.tracker-section { margin-bottom: 40px; padding: 32px 36px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 6px; }
.tracker-row { padding: 16px 0; border-bottom: 1px solid var(--cream-dark); }
.tracker-row:last-of-type { border-bottom: none; }
.tracker-claim { font-family: 'DM Serif Display', serif; font-size: 16px; font-style: italic; color: var(--ink); margin-bottom: 8px; line-height: 1.5; }
.tracker-meta { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--ink-light); letter-spacing: .04em; }
.tracker-status-confirmed { color: #2a7a4a; font-weight: 500; }
.tracker-status-pending { color: #b8860b; font-weight: 500; }
.tracker-status-unconfirmed { color: #8b2020; font-weight: 500; }
.tracker-disclaimer { font-size: 13px; color: var(--ink-light); font-style: italic; margin-top: 20px; line-height: 1.7; padding-top: 16px; border-top: 1px solid var(--cream-dark); }

/* CROSS REFS */
.cross-refs { background: var(--cream-dark); padding: 28px 32px; margin-bottom: 40px; border-left: 4px solid var(--purple); border-radius: 0 6px 6px 0; }
.cross-refs-label { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--purple); display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(123,94,167,.25); }
.cross-refs p { font-size: 16px; line-height: 1.8; color: var(--ink-mid); font-style: normal; }

/* TRY THIS */
.try-this {
  background: var(--gold);
  border-radius: 6px;
  padding: 32px 36px;
  margin-bottom: 40px;
  box-shadow: 0 6px 20px rgba(184, 134, 42, 0.3);
}
.try-this-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.try-this-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.try-this-icon::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--gold);
  line-height: 1;
}
.try-this-label {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  padding: 5px 14px;
  border-radius: 20px;
}
.try-this p {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* YOUTUBE THUMBNAIL */
.youtube-wrap { margin-bottom: 40px; }
.youtube-wrap .field-label { color: var(--ink); }
.youtube-thumb-link { display: block; text-decoration: none; }
.youtube-thumb-container { position: relative; width: 100%; border-radius: 6px; overflow: hidden; background: var(--ink); }
.youtube-thumb-img { width: 100%; display: block; transition: opacity .3s; }
.youtube-thumb-link:hover .youtube-thumb-img { opacity: .85; }
.youtube-play-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.35); transition: background .3s; }
.youtube-thumb-link:hover .youtube-play-overlay { background: rgba(0,0,0,.5); }
.youtube-play-btn { width: 72px; height: 72px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--ink); margin-bottom: 12px; transition: transform .2s; }
.youtube-thumb-link:hover .youtube-play-btn { transform: scale(1.1); }
.youtube-play-label { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.youtube-attribution { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--ink-light); letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; text-align: center; }

/* TEASER NEXT */
.teaser-next { background: var(--ink); border-left: 4px solid var(--gold); padding: 28px 32px; margin-bottom: 40px; border-radius: 0 6px 6px 0; }
.teaser-next-label { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,168,76,.3); }
.teaser-next-q { font-family: 'DM Serif Display', serif; font-size: 19px; font-style: italic; color: var(--white); line-height: 1.55; margin-bottom: 16px; }
.teaser-next-source { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--gold); letter-spacing: .08em; font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border: 1px solid var(--gold); transition: all .2s; }
.teaser-next-source:hover { background: var(--gold); color: var(--ink); }

/* DISCERNMENT */
.discernment { text-align: center; margin: 88px auto 32px; max-width: 700px; }
.discernment-star { font-size: 16px; color: var(--gold-soft); margin-bottom: 12px; opacity: .8; }
.discernment-line { font-family: 'DM Serif Display', serif; line-height: 1.3; }
.d-maybe {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-soft);
  display: inline;
}
.d-small {
  font-size: clamp(20px, 3vw, 28px);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-light);
}
.d-call {
  display: block;
  margin-top: 32px;
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-soft);
  line-height: 1.25;
}
.d-subline {
  display: block;
  margin-top: 22px;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(16px, 2.4vw, 20px);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
  opacity: .85;
}

/* FOOTER */
.site-footer { background: var(--ink); padding: 36px var(--pad); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-wordmark { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--white); }
.footer-wordmark span { color: var(--gold); }
.footer-tagline { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--gold); letter-spacing: .15em; text-transform: uppercase; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; }
.footer-links { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; padding: 0; margin: 0; }
.footer-links li { margin: 0; }
.footer-links a { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }

/* RESPONSIVE */
@media(max-width: 768px) {
  .site-nav { display: none; }
  .summary-body { padding: 40px 22px; }
  .summary-hero { padding: 48px 22px 40px; }
  .archive-grid { padding: 40px 22px; }
  .analyst-note { padding: 24px; }
  .tracker-section { padding: 22px; }
  .plain-english { padding: 30px 24px; }
  .pe-label-big { font-size: 20px; }
  .pe-hook { font-size: 22px; }
  .youtube-play-btn { width: 56px; height: 56px; font-size: 22px; }
  .theme-text h3 { font-size: 22px; }
  .discernment { margin: 64px auto 24px; }
  .site-footer { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
  .featured-card { padding: 28px 22px; }
  .try-this { padding: 24px; }
}

/*
  COOKIE CONSENT RESKIN — panel 7/18, unanimous 7/7 finding: "the only
  dishonest element on the page" / "a mustard stain on a bespoke suit."
  This is the CookieAdmin plugin (cookieadmin/cookieadmin-pro), not theme
  code — never edit the plugin's own files, they get overwritten on every
  plugin update. Visual reskin ONLY: same banner, same buttons, same
  consent-before-tracking timing. Nothing about when it appears or what it
  blocks has changed. The plugin sets some colors via inline style="" from
  its own JS, which beats a plain CSS rule — those need !important to win;
  everything else (font, radius, shadow) doesn't.
*/
.cookieadmin_consent_inside {
  background-color: var(--mb-cream) !important;
  border-color: var(--mb-border) !important;
  border-radius: 4px;
  box-shadow: 0 6px 30px rgba(0,0,0,.12);
  font-family: 'DM Sans', sans-serif;
  padding: 16px 20px !important; /* plugin default was a loose 15px on every side plus tall stacked text; this + the title/notice changes below cut the banner's height roughly in half */
}
/* Title sits inline with the notice text instead of its own stacked line —
   saves a full row of height and reads as one compact sentence, not a
   mini-headline + paragraph. */
#cookieadmin_notice_title {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: var(--mb-ink) !important;
  display: inline;
  margin-right: 6px;
}
#cookieadmin_notice {
  color: var(--mb-ink-soft) !important;
  font-size: 13px;
  line-height: 1.5;
  display: inline;
}
#cookieadmin_notice b { color: var(--mb-ink); }
.cookieadmin_consent_btns { margin-top: 10px; }
.cookieadmin_btn {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px !important;
  border: 1px solid var(--mb-border) !important;
  transition: all .2s;
  padding: 9px 16px !important;
}
#cookieadmin_customize_button,
#cookieadmin_reject_button,
#cookieadmin_reject_modal_button,
#cookieadmin_prf_modal_button {
  background-color: #fff !important;
  color: var(--mb-ink-soft) !important;
}
#cookieadmin_customize_button:hover,
#cookieadmin_reject_button:hover,
#cookieadmin_reject_modal_button:hover,
#cookieadmin_prf_modal_button:hover {
  border-color: var(--mb-gold) !important;
  color: var(--mb-gold) !important;
}
#cookieadmin_accept_button,
#cookieadmin_accept_modal_button {
  background-color: var(--mb-ink) !important;
  color: #fff !important;
  border-color: var(--mb-ink) !important;
}
#cookieadmin_accept_button:hover,
#cookieadmin_accept_modal_button:hover {
  background-color: var(--mb-gold) !important;
  border-color: var(--mb-gold) !important;
}
.cookieadmin-poweredby {
  font-family: 'DM Mono', monospace;
  font-size: 12px; /* 10px was below the 12px legibility floor (panel 7/18) */
  color: var(--mb-muted-2);
  opacity: .7;
}
.cookieadmin_mod_head, .cookieadmin_preference_title {
  font-family: 'DM Serif Display', serif;
  color: var(--mb-ink);
}
/* The plugin injects its own inline stylesheet with !important on these —
   the html prefix out-specifies it so ours wins regardless of load order. */
html .cookieadmin_remark,
html .cookieadmin_showmore {
  color: var(--mb-gold) !important;
}
html .cookieadmin_slider {
  background-color: #b8b2a6 !important; /* off-state: warm neutral, not web-gray */
}
html input:checked + .cookieadmin_slider,
html input:disabled + .cookieadmin_slider {
  background-color: var(--mb-gold) !important; /* on/always-on: the house gold, not plugin blue */
}