/*
Theme Name:  GWill Finance
Theme URI:   https://gwillchijioke.com
Author:      G-will Chijioke
Author URI:  https://gwillchijioke.com
Description: finance.gwillchijioke.com — Nigerian personal finance blog. Honest guides on savings, investing, dollar accounts, crypto, banking and remittance. Built from the GWill starter theme. Light by default, warm-tinted dark mode, JetBrains Mono, ₦ wordmark.
Version:      1.0.162
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gwill-finance
Tags:        blog, finance, custom
*/

/*
 * ── FILE CHANGELOG ──────────────────────────────────────────────────────────
 * style.css — cleanup pass (2026-08-07, v1.0.156)
 * Removed 63 lines of dead CSS (2204 → 2141 before this block):
 *   .mni family (4), .b-out (2), .b-fw (1), INPUTS section (.lbl + .inp ×4),
 *   COMPARISON TABLE section (.cmp ×10 + .an/.as/.cy/.cn/.cm/.wp),
 *   .nl-f family (3), SEARCH section (.search-b ×4), .search-result family (7),
 *   .gwill-form__submit--full, .gwill-form__status--success,
 *   RELATED POSTS section (2 + .related-posts__grid in @media 767),
 *   .legal-toc-list a.is-active, plus dead utility tokens on shared lines
 *   (.mt8/12/16/24/32, .mb8/16/32, .g6/8/10/12/20, .fw7/8, .fz10/13,
 *   .ct/.cg/.cgr, .ls/.lsup) and pruned dead selectors from two live rules
 *   (.ac .ac-rd; .legal-toc-list a.is-active).
 * All deletions grep-proven dead: zero refs in PHP/JS/templates, zero in
 * rendered DOM (14 page types), zero in published post/page content.
 * Live siblings kept (.mt20/40/48, .mb12/20/24, .g16, .fw3, .fz11/12/14,
 * .cm-c/.cd, .lh, .badge, .ac, .pagination, .ad-*, .gs-*, .wp-block-*).
 */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --font: 'JetBrains Mono', monospace;
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --border: #e4e2dc;
  --border-dim: #eeece7;
  --text: #0d0d0d;
  --text-mid: #3a3a3a;
  --text-dim: #6b6b6b;
  /* Full-bleed article copy — near-black text on the cream page bg (light mode) */
  --art-copy: #262626;
  --art-dim: #3a3a3a;
  --gold: #b45309;
  --gold-b: #f59e0b;
  --gold-btn: #b45309;
  --gold-muted: #fef9ee;
  --gold-border: #fcd97a;
  --gold-glow: rgba(217,119,6,0.22);
  --green: #15803d;
  --green-btn: #15803d; /* button bg (a11y v1.0.146) */
  --green-muted: #f0fdf4;
  --green-border: #86efac;
  --purple: #7c3aed;
  --red: #b91c1c; /* was #dc2626 — 4.40:1 on red-muted, now 5.6:1 (a11y v1.0.146) */
  --red-muted: #fff1f2;
  --red-border: #fecdd3;
  --dark: #0d0b08;
  --dark-s: #131210;
  --dark-b: #211f1a;
  --dark-dim: #8f8575;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --pill: 100px;
  --sh-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
  --sh-md: 0 2px 8px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.08);
  --sh-gold: 0 4px 24px rgba(217,119,6,0.14);
  --t: 160ms ease; --t-md: 240ms ease;
  --header-h: 64px;
  --con-pad: 48px;
}

/* Dark mode — warm-tinted blacks (brand identity v1.0: #0d0b08 not #0d0d0d) */
[data-theme="dark"] {
  --bg: #0d0b08;
  --surface: #131210;
  --surface-2: #171512;
  --text: #f0ede6;
  /* Full-bleed article copy — light-mode steps up (cream bg), dark-mode stays warm-white */
  --art-copy: #e8e4dc;
  --art-dim: #8a8070;
  --border: #211f1a;
  --border-dim: #1d1a16;
  --text-mid: #c4b89a;
  --text-dim: #8f8575;
  --gold: #f59e0b;
  --gold-btn: #b45309;
  --gold-muted: rgba(245,158,11,0.08);
  --gold-border: rgba(245,158,11,0.25);
  --gold-glow: rgba(245,158,11,0.35);
  --green: #22c55e;
  --green-btn: #15803d; /* button bg — bright green fails white text 2.3:1 (a11y v1.0.146) */
  --green-muted: rgba(34,197,94,0.08);
  --green-border: rgba(34,197,94,0.25);
  --purple: #a78bfa;
  --red: #f87171;
  --red-muted: rgba(248,113,113,0.1);
  --red-border: rgba(248,113,113,0.3);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35);
  --sh-md: 0 2px 8px rgba(0,0,0,0.4), 0 8px 28px rgba(0,0,0,0.5);
  --sh-gold: 0 4px 24px rgba(245,158,11,0.12);
}

/* ── RESET / BASE ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 64px) + 20px); }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
  line-height: 1.6;
  transition: background var(--t-md), color var(--t-md);
}
img, picture, video, canvas, svg, iframe, input, textarea, select, table { max-width: 100%; }
img { height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); }
h1, h2, h3, h4 { letter-spacing: -0.02em; }
.skip-link, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999; width: auto; height: auto;
  clip: auto; clip-path: none; background: var(--gold); color: #fff;
  padding: 8px 16px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700;
}

/* ── BRAND SCROLLBAR (v1.0.121) ──────────────────────────────────────────── */
/* Thin gold-accented scrollbar on WebKit/Blink (Chrome, Edge, Safari, Android) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-b), var(--gold));
  border-radius: var(--pill);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* Firefox — brand gold, thin */
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg); }
/* Dark mode — darker track so the gold pops */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dark); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-b), var(--gold));
  border-color: var(--dark);
}
[data-theme="dark"] * { scrollbar-color: var(--gold-b) var(--dark); }
/* Gold scrollbar on the spotlight-search results panel */
.gs-results::-webkit-scrollbar { width: 8px; }
.gs-results::-webkit-scrollbar-thumb { border-width: 2px; }

/* ── TICKER ────────────────────────────────────────────────────────────────── */
.ticker { background: var(--dark); border-bottom: 1px solid var(--dark-b); overflow: hidden; height: 36px; display: flex; align-items: center; }
.ticker-inner { display: flex; align-items: center; animation: tick 64s linear infinite; white-space: nowrap; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* v1.0.155: pause + scrub + auto-resume marquee (user request) —
   hover (desktop) or press-and-drag (any device) freezes the loop so a
   price can be read; letting go resumes it. .ticker-drag carries the
   manual offset (inner keeps the animation). touch-action pan-y keeps
   vertical page scrolling intact while horizontal drags scrub. */
.ticker { cursor: grab; touch-action: pan-y; }
.ticker-drag { will-change: transform; }
.ticker.is-paused .ticker-inner,
.ticker.is-dragging .ticker-inner { animation-play-state: paused; }
.ticker.is-dragging { cursor: grabbing; }
.ticker-drag.gwill-returning { transition: transform 0.4s ease; }
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker-inner { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation-duration: 192s; }
}
.ti { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; border-right: 1px solid var(--dark-b); height: 36px; }
.t-pair { font-size: 10px; font-weight: 700; color: var(--dark-dim); letter-spacing: 0.1em; }
.t-rate { font-size: 11px; font-weight: 700; color: #f0ede6; letter-spacing: 0.04em; }
.t-up { font-size: 9px; font-weight: 700; color: #22c55e; }
.t-dn { font-size: 9px; font-weight: 700; color: #f87171; }
.t-cm { font-size: 9px; color: var(--dark-dim); }

/* ── HEADER (desktop) ──────────────────────────────────────────────────────── */
.sh {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 var(--con-pad); display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); position: sticky; top: 0; z-index: 100; box-shadow: var(--sh-sm);
}
.logo { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; position: relative; flex-shrink: 0; }
.logo .n { color: var(--gold); text-shadow: 0 0 14px var(--gold-glow); margin-right: 0.14em; }
.logo .nm { color: var(--text); }
.logo::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--green)); border-radius: 2px; opacity: 0.65;
}
.snav { display: flex; align-items: center; gap: 10px; }
.snav-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.snav-list > li { position: relative; }
/* Parent rows: pill background on hover, chevron indicator */
.snav-list > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  border-radius: var(--r-sm); transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.snav-list > li > a:hover { color: var(--text); background: var(--surface-2); }
.snav-list > li > a .nav-caret-desktop {
  font-size: 8px; color: var(--gold); opacity: 0.85;
  transition: transform var(--t);
}
.snav-list li:hover > a .nav-caret-desktop,
.snav-list li:focus-within > a .nav-caret-desktop { transform: rotate(180deg); }
/* Dropdown panel: card + fade/slide entrance, gold accent rail */
.snav-list .sub-menu {
  display: block; visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 210px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 8px; list-style: none; margin: 0; z-index: 120;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  transition: opacity var(--t-md), transform var(--t-md), visibility 0s linear var(--t-md);
}
/* Invisible hover bridge — fills gap between parent <a> and dropdown
   so cursor can't pass through dead zone. */
.snav-list > li.menu-item-has-children::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  z-index: 119; pointer-events: auto;
}
.snav-list .sub-menu::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--green)); border-radius: 2px;
}
.snav-list > li:hover > .sub-menu,
.snav-list > li:focus-within > .sub-menu,
.snav-list > li > .sub-menu:hover {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--t-md), transform var(--t-md), visibility 0s linear 0s;
}
/* Nested (level 3) sub-menus — fly out to the right of their parent item.
   Left-aligned (not centred like the top-level panel) so the rail + bullets
   line up with the parent row. */
.snav-list .sub-menu .sub-menu {
  top: -9px; left: 100%; transform: translateX(0) translateY(4px);
  border-left: 1px solid rgba(245, 158, 11, 0.25);
}
/* Invisible hover bridge for nested fly-outs — fills the gap between the
   level-2 row ("Investing") and its level-3 panel ("Fixed Income") so the
   cursor never crosses a dead zone travelling right. */
.snav-list .sub-menu li.menu-item-has-children::after {
  content: ''; position: absolute; top: -9px; bottom: -9px; left: 100%;
  width: 12px; z-index: 119; pointer-events: auto;
}
.snav-list .sub-menu li:hover > .sub-menu,
.snav-list .sub-menu li:focus-within > .sub-menu,
.snav-list .sub-menu li > .sub-menu:hover {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(0) translateY(0);
}
.snav-list .sub-menu li { position: relative; }
.snav-list .sub-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px;
  font-size: 12.5px; font-weight: 400;
  color: var(--text-dim); border-radius: var(--r-sm); width: 100%;
  transition: color var(--t), background var(--t), padding-left var(--t);
}
.snav-list .sub-menu a::before { content: '◆'; font-size: 6px; color: var(--gold); opacity: 0.8; flex-shrink: 0; }
.snav-list .sub-menu a:hover { color: var(--text); background: var(--surface-2); padding-left: 20px; }
.snav-list > li.current-menu-item > a, .snav-list .current-menu-ancestor > a {
  color: var(--text); font-weight: 700; background: var(--gold-muted);
}
[data-theme="dark"] .snav-list .sub-menu { background: var(--dark-s); border-color: var(--dark-b); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .snav-list .sub-menu a:hover { background: var(--dark); color: #f0ede6; }
[data-theme="dark"] .snav-list > li.current-menu-item > a, [data-theme="dark"] .snav-list .current-menu-ancestor > a { background: rgba(245, 158, 11, 0.1); }
/* Tablet (768-1023px): compact spacing so all items fit */
@media (max-width: 1023px) and (min-width: 768px) {
  .snav-list { gap: 2px; }
  .snav-list > li > a { padding: 8px 10px; font-size: 11.5px; }
  .snav .ncta { padding: 8px 12px; font-size: 11px; }
}
.nl { font-size: 12px; font-weight: 400; color: var(--text-dim); padding: 6px 12px; border-radius: var(--r-sm); transition: all var(--t); }
.nl:hover { color: var(--text); background: var(--surface-2); }
.nl.cur, .current-menu-item > .nl, .snav .current-menu-item > a { color: var(--text); font-weight: 700; }
.ntog {
  width: 38px; height: 22px; background: var(--gold); border-radius: var(--pill);
  display: flex; align-items: center; padding: 3px; margin-left: 8px; cursor: pointer; flex-shrink: 0;
  border: none; transition: background var(--t);
}
.ntog .ntog-i, .mtog .ntog-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--gold); margin-left: auto; transition: margin var(--t), color var(--t), background var(--t); }
.ntog-i .ntog-sun { display: flex; }
.ntog-i .ntog-moon { display: none; }
[data-theme="dark"] .ntog .ntog-i, [data-theme="dark"] .mtog .ntog-i { margin-left: 0; background: var(--dark); color: var(--gold-b); }
[data-theme="dark"] .ntog-i .ntog-sun { display: none; }
[data-theme="dark"] .ntog-i .ntog-moon { display: flex; }
[data-theme="dark"] .ntog, [data-theme="dark"] .mtog { background: var(--gold-b); }
.ncta {
  background: var(--gold-btn); color: #fff; border: none; font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; padding: 8px 18px; border-radius: var(--r-sm); margin-left: 10px;
  white-space: nowrap; transition: background var(--t); text-decoration: none; flex-shrink: 0;
}
.ncta:hover { background: #92400e; color: #fff; }
.nsearch {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-mid); display: inline-flex; align-items: center;
  justify-content: center; margin-left: 10px; transition: all var(--t); text-decoration: none;
}
.nsearch:hover { border-color: var(--gold-border); color: var(--gold); }
.msearch {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-mid); display: inline-flex; align-items: center;
  justify-content: center; transition: all var(--t); text-decoration: none;
}
.msearch:hover { border-color: var(--gold-border); color: var(--gold); }

/* ── SPOTLIGHT SEARCH (finance live-search panel) ─────────────────────────── */
.gs {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 9999; width: min(560px, calc(100% - 24px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(13, 11, 8, 0.28);
  overflow: hidden;
}
.gs[hidden] { display: none; }
/* gold accent bar across the top of the panel */
.gs::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-b) 60%, transparent); }
.gs-inner { padding: 16px 18px 14px; }
.gs-form { display: flex; align-items: center; gap: 10px; }
.gs-glyph {
  font-family: var(--font); font-weight: 800; font-size: 15px; color: var(--gold);
  flex-shrink: 0; width: 18px; text-align: center;
}
.gs-input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px; font-weight: 400;
  color: var(--text); outline: none; transition: border-color var(--t), box-shadow var(--t);
  font-family: var(--font);
}
.gs-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12); }
.gs-input::placeholder { color: var(--text-dim); }
.gs-close {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-mid); flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  transition: all var(--t);
}
.gs-close:hover { border-color: var(--gold-border); color: var(--gold); }
.gs-results { max-height: 320px; overflow-y: auto; margin-top: 4px; }
.gs-results.has-results { border-top: 1px solid var(--border-dim); margin-top: 12px; padding-top: 6px; }
.gs-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px;
  border-bottom: 1px solid var(--border-dim); text-decoration: none; border-radius: var(--r-sm);
  transition: background var(--t);
}
.gs-row:last-of-type { border-bottom: none; }
.gs-row:hover { background: var(--surface-2); }
.gs-row.cur { background: var(--gold-muted); }
.gs-arrow {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--text-dim); font-size: 11px;
  display: flex; align-items: center; justify-content: center; transition: all var(--t);
}
.gs-row:hover .gs-arrow, .gs-row.cur .gs-arrow { background: var(--gold); border-color: var(--gold); color: #fff; }
.gs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gs-title {
  font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
}
.gs-dot { color: var(--gold); }
.gs-pill {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold-muted); border: 1px solid var(--gold-border); color: var(--gold);
  padding: 4px 9px; border-radius: var(--pill); white-space: nowrap;
}
.gs-pill--plain { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); }
.gs-viewall {
  display: block; text-align: center; padding: 11px; margin-top: 4px;
  font-size: 11px; font-weight: 700; color: var(--gold); text-decoration: none;
  border-top: 1px solid var(--border-dim); transition: background var(--t);
}
.gs-viewall:hover { background: var(--gold-muted); }
.gs-state {
  padding: 26px 10px; text-align: center; color: var(--text-dim);
  font-size: 12px; font-style: italic; font-family: var(--font-mono);
}
.gs-foot {
  display: flex; gap: 14px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em;
}
.gs-foot kbd {
  font-family: var(--font-mono); font-size: 9px; background: var(--surface-2);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; color: var(--text-mid);
}
.gs-foot-end { margin-left: auto; }
[data-theme="dark"] .gs { background: var(--dark-s); border-color: var(--dark-b); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .gs-input { background: var(--dark); border-color: var(--dark-b); color: #f0ede6; }
[data-theme="dark"] .gs-input::placeholder { color: #6b6152; }
[data-theme="dark"] .gs-row:hover { background: #1c1a16; }
[data-theme="dark"] .gs-row.cur { background: #1c1a16; }
[data-theme="dark"] .gs-pill { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.3); }
[data-theme="dark"] .gs-close, [data-theme="dark"] .gs-arrow { background: var(--dark); border-color: var(--dark-b); color: #8a8070; }
[data-theme="dark"] .gs-viewall:hover, [data-theme="dark"] .gs-state { background: #1c1a16; }
[data-theme="dark"] .gs-foot kbd { background: var(--dark); border-color: var(--dark-b); color: #8a8070; }
@media (max-width: 767px) {
  .gs { top: 56px; width: calc(100% - 16px); }
  .gs-inner { padding: 12px 12px 10px; }
  .gs-foot-mid { display: none; }
}

/* ── HEADER (mobile) ───────────────────────────────────────────────────────── */
.mh {
  background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100; box-shadow: var(--sh-sm);
}
.mlogo { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 16px; letter-spacing: -0.03em; position: relative; }
.mlogo .n { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); margin-right: 0.12em; }
.mlogo .nm { color: var(--text); }
.mlogo::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--green)); border-radius: 2px; opacity: 0.6;
}
.mhr { display: flex; align-items: center; gap: 10px; }
.mtog { width: 34px; height: 20px; background: var(--gold); border-radius: var(--pill); display: flex; align-items: center; padding: 3px; cursor: pointer; border: none; transition: background var(--t); }
.mtog .ntog-i { width: 14px; height: 14px; }
.hbg {
  width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; cursor: pointer;
}
.hbg span { width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; }

/* ── MOBILE NAV OVERLAY ────────────────────────────────────────────────────── */
.mno {
  position: fixed; inset: 0; background: var(--dark); z-index: 500; display: flex;
  flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(0.4,0,0.2,1);
}
.mno.open { transform: translateX(0); }
.mno-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--dark-b); }
.mno-top .mlogo .nm { color: #f0ede6; }
.mno-close {
  width: 36px; height: 36px; border: 1px solid var(--dark-b); border-radius: var(--r-sm);
  background: var(--dark-s); display: flex; align-items: center; justify-content: center;
  color: #f0ede6; font-size: 16px; cursor: pointer;
}
.mno-items { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.mno-list { list-style: none; margin: 0; padding: 0; }
/* Full-row tap targets: the <a> IS the bar (padding on the link, not the li) */
.mno-list li { position: relative; border-radius: var(--r-sm); }
.mno-list > li > a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; font-size: 14px; font-weight: 700;
  color: #f0ede6; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--dark-b); border-radius: var(--r-sm);
  min-height: 48px; /* comfortable touch target */
}
.mno-list li:last-child > a { border-bottom: none; }
.mno-list > li.current-menu-item > a { color: var(--gold-b); }
/* Leaf rows get a subtle gold arrow on the right */
.mno-list > li:not(.menu-item-has-children) > a::after {
  content: '→'; margin-left: auto; font-size: 13px; color: var(--dark-dim);
  transition: color var(--t), transform var(--t);
}
.mno-list > li:not(.menu-item-has-children) > a:active::after { color: var(--gold-b); transform: translateX(2px); }
/* Parent rows get a tappable gold chevron (the accordion handle) */
.mno-list .nav-caret {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dark-b); border-radius: 8px;
  color: var(--gold); font-size: 11px; line-height: 1;
  background: var(--dark-s);
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.mno-list li.open > a .nav-caret {
  transform: rotate(180deg);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--gold-b);
}
/* Sub-menus — hidden by default, accordion via .open. Finance styling:
   indented warm-black panel with gold rail, JetBrains Mono-ish smaller rows
   (NOT the tech theme's green/left-pad look). */
.mno-list .sub-menu {
  display: none; list-style: none; margin: 4px 0 8px 18px; padding: 0 0 0 14px;
  border-left: 2px solid rgba(245, 158, 11, 0.35);
  background: rgba(13, 11, 8, 0.55);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mno-list li.open > .sub-menu { display: block; }
.mno-list .sub-menu li { border-radius: 0; }
.mno-list .sub-menu a {
  display: flex; align-items: center;
  padding: 12px 12px; font-size: 13px; font-weight: 400;
  color: #c9c0b0; letter-spacing: 0; border-radius: 0;
  min-height: 44px;
}
.mno-list .sub-menu a::before { content: '◆'; font-size: 7px; color: var(--gold); margin-right: 10px; opacity: 0.8; }
.mno-list .sub-menu a:active { color: var(--gold-b); }
.mno-bot { padding: 16px 20px; border-top: 1px solid var(--dark-b); }
.mno-cta { display: block; width: 100%; text-align: center; background: var(--gold); color: #fff; border: none; font-size: 13px; font-weight: 700; padding: 14px; border-radius: var(--r-sm); transition: background var(--t); }
.mno-cta:hover { background: var(--gold-b); }
/* Mobile-nav ad: breathing room on ALL sides — never skin-to-skin with
   the menu items above or the CTA below (user: "mobile nav ad already
   breaks the skin to skin rule"). */
.mno-bot .ad-menu { height: 80px; margin: 14px 0 16px; }
.mno-bot .ad-menu .ad-txt { font-size: 8px; }

/* ── BADGES ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px;
  border-radius: var(--pill); border: 1px solid;
}
.bg { background: var(--gold-muted); border-color: var(--gold-border); color: var(--gold); }
.bgn { background: var(--green-muted); border-color: var(--green-border); color: var(--green); }
.bpu { background: #f5f0ff; border-color: #d0b4fe; color: var(--purple); }
.bsl { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.brd { background: var(--red-muted); border-color: var(--red-border); color: var(--red); }
[data-theme="dark"] .bpu { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.25); color: #a78bfa; }
[data-theme="dark"] .bsl { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.2); color: #94a3b8; }
[data-theme="dark"] .brd { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.2); color: #f87171; }

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; border-radius: var(--r-sm); border: none; cursor: pointer; transition: all var(--t); }
.b-gold { background: var(--gold-btn); color: #fff; padding: 10px 20px; }
.b-gold:hover { background: #92400e; transform: translateY(-1px); }
.b-ghost { background: transparent; color: var(--text-mid); border: 1px solid var(--border); padding: 9px 20px; }
.b-ghost:hover { border-color: var(--text-dim); color: var(--text); }
.b-green { background: var(--green-btn); color: #fff; padding: 10px 20px; }
.b-green:hover { background: #166534; transform: translateY(-1px); }
.b-sm { font-size: 11px; padding: 7px 14px; }
.bh { background: var(--gold-b); color: var(--dark); border: none; font-size: 13px; font-weight: 800; padding: 12px 24px; border-radius: var(--r-sm); transition: all var(--t); }
.bh:hover { background: #e09009; transform: translateY(-1px); }
.bhg { background: transparent; color: #f0ede6; border: 1px solid var(--dark-b); font-size: 13px; font-weight: 700; padding: 11px 24px; border-radius: var(--r-sm); transition: all var(--t); }
.bhg:hover { border-color: var(--dark-dim); }


/* ── HERO (home) ───────────────────────────────────────────────────────────── */
.hero { background: var(--dark); padding: 72px var(--con-pad) 68px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(217,119,6,0.1) 0%, transparent 65%); pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-b);
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  padding: 5px 14px; border-radius: var(--pill); margin-bottom: 22px; position: relative; z-index: 1;
}
.hero-h {
  font-size: clamp(38px, 5.5vw, 62px); font-weight: 800; letter-spacing: -0.045em;
  line-height: 1.0; margin-bottom: 16px; max-width: 640px; position: relative; z-index: 1;
}
.hero-h .g { color: var(--gold-b); }
.hero-h .w { color: #f0ede6; }
.hero-sub { font-size: 15px; font-weight: 300; color: var(--dark-dim); line-height: 1.75; max-width: 460px; margin-bottom: 28px; position: relative; z-index: 1; }
.hero-acts { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.hero-cats { display: flex; align-items: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-cats-lbl { font-size: 10px; font-weight: 300; color: var(--dark-dim); font-style: italic; }
.db { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--pill); border: 1px solid; }
.db-g { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: var(--gold-b); }
.db-gr { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.18); color: #22c55e; }
.db-p { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.2); color: #a78bfa; }
.db-s { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.18); color: #94a3b8; }

/* ── STATS STRIP ───────────────────────────────────────────────────────────── */
.stat-strip { background: var(--gold-muted); border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); display: flex; }
.si { flex: 1; padding: 20px 32px; border-right: 1px solid var(--gold-border); text-align: center; }
.si:last-child { border-right: none; }
.si-n { font-size: 24px; font-weight: 800; color: var(--gold); letter-spacing: -0.04em; }
.si-l { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); margin-top: 3px; }

/* ── ARTICLE CARD ──────────────────────────────────────────────────────────── */
.ac {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--t-md), transform var(--t-md), box-shadow var(--t-md);
  position: relative;
}
.ac:hover { border-color: var(--gold-border); transform: translateY(-3px); box-shadow: var(--sh-gold); }
.ac-img {
  width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-dim); font-size: 28px; position: relative; overflow: hidden;
}
.ac-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.45), transparent); pointer-events: none; }
.ac-img img { width: 100%; height: 100%; object-fit: cover; }
.ac-emoji { position: relative; z-index: 1; font-size: 28px; }
.ac-body { padding: 16px 20px 20px; position: relative; }
.ac-body .badge { margin-bottom: 10px; }
.ac-t { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; letter-spacing: -0.02em; margin-bottom: 8px; }
.ac-ex { font-size: 11px; font-weight: 300; color: var(--text-dim); line-height: 1.65; margin-bottom: 12px; }
.ac-ft { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-dim); }
.a-dt { font-size: 10px; color: var(--text-dim); font-weight: 300; }
.a-rd { font-size: 10px; color: var(--gold); font-weight: 700; }
/* Fully clickable card */
.ac h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ac .badge { position: relative; z-index: 2; }

/* Category art gradients */
.i-sav { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.i-inv { background: linear-gradient(135deg, #dcfce7, #86efac); }
.i-cry { background: linear-gradient(135deg, #f5f0ff, #ddd6fe); }
.i-ban { background: linear-gradient(135deg, #eff6ff, #bfdbfe); }
.i-rem { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.i-dol { background: linear-gradient(135deg, #fef9ee, #fde68a); }

/* ── FEATURED ──────────────────────────────────────────────────────────────── */
.feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.feat-img { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); font-size: 40px; min-height: 260px; position: relative; overflow: hidden; }
.feat-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent); pointer-events: none; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-emoji { position: relative; z-index: 1; font-size: 56px; }
.feat-body { padding: 32px 36px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.feat-body .badge { align-self: flex-start; }
.feat-t { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; line-height: 1.2; }
.feat-ex { font-size: 13px; font-weight: 300; color: var(--text-dim); line-height: 1.75; flex: 1; }
.feat-meta { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-dim); font-size: 10px; color: var(--text-dim); font-weight: 300; flex-wrap: wrap; }
.feat-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.feat-body .feat-t a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.feat-body .badge, .feat-body .btn { position: relative; z-index: 2; }

/* ── SECTION HEADER / PILLS ────────────────────────────────────────────────── */
.shd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.stitle { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.slink { font-size: 11px; font-weight: 700; color: var(--gold); }
.cp-strip { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cp-strip::-webkit-scrollbar { display: none; }
.cp {
  font-size: 11px; font-weight: 700; padding: 7px 16px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  cursor: pointer; white-space: nowrap; transition: all var(--t); flex-shrink: 0;
}
/* Gold ghost scroll buttons for the pill row — appear on EVERY device
   (PC, tablet, mobile) when the strip overflows. Buttons fade by scroll
   position: prev (‹) stays hidden at position 0 and only appears once
   the user scrolls right; next (›) hides at the end. No overflow = no
   buttons at all (buttons + edge fade stay hidden). */
.cp-strip-wrap { position: relative; min-width: 0; }
/* Soft edge fade behind the buttons so pills slide under them cleanly.
   Gated by scroll position like the buttons themselves — the left fade
   must NOT show at position 0 (it faded the first pill without any
   scrolling — user: "Why fading the first pill without even scrolling,
   terrible UI and UX"). v1.0.147: fade color comes from --strip-bg (the
   ACTUAL background behind the strip — archive .pill-strip #faf9f6 /
   #171512, apps .apps-tabs #fff / #131210 — the old var(--bg)/var(--dark)
   ended a shade off, leaving a visible rectangle; worst in dark mode) and
   narrowed 44→32px so it can't eat a whole pill. */
.cp-strip-wrap.has-overflow.can-prev::before,
.cp-strip-wrap.has-overflow.can-next::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; z-index: 4;
}
.cp-strip-wrap.has-overflow.can-prev::before {
  left: 0;
  background: linear-gradient(90deg, var(--strip-bg, var(--bg)), transparent);
}
.cp-strip-wrap.has-overflow.can-next::after {
  right: 0;
  background: linear-gradient(270deg, var(--strip-bg, var(--bg)), transparent);
}
[data-theme="dark"] .cp-strip-wrap.has-overflow.can-prev::before {
  background: linear-gradient(90deg, var(--strip-bg, var(--dark)), transparent);
}
[data-theme="dark"] .cp-strip-wrap.has-overflow.can-next::after {
  background: linear-gradient(270deg, var(--strip-bg, var(--dark)), transparent);
}
/* v1.0.147: strip containers declare the fade's backdrop color (the fade
   must end in the surface the strip actually sits on, not the page bg). */
.pill-strip { --strip-bg: var(--surface-2); }
.apps-tabs { --strip-bg: var(--surface); }
.cp-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--gold); font-size: 15px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; box-shadow: var(--sh-sm);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), border-color var(--t), color var(--t), background var(--t);
}
.cp-strip-wrap.has-overflow.can-next .cp-scroll-next,
.cp-strip-wrap.has-overflow.can-prev .cp-scroll-prev { opacity: 1; pointer-events: auto; }
.cp-scroll-prev { left: 0; }
.cp-scroll-next { right: 0; }
.cp-scroll-btn:hover { border-color: var(--gold-border); color: var(--gold); background: var(--gold-muted); }
.cp-scroll-btn:disabled { opacity: 0; pointer-events: none; }
[data-theme="dark"] .cp-scroll-btn { background: var(--dark-s); border-color: var(--dark-b); color: var(--gold-b); }
[data-theme="dark"] .cp-scroll-btn:hover { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.cp:hover { border-color: var(--gold-border); color: var(--gold); }
.cp.on { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
/* Category filter — grid loading state + image fade-in
   v1.0.148: dim + centered gold spinner during fetches so slow loads
   read as "working", not broken (user: "no loading animation ... users
   know it's not broken and it's actually loading"). The dim targets the
   grid's CHILDREN (:not(.gwill-spinner)) — a parent-level opacity would
   compound onto the spinner itself and wash it out (caught in pixel
   verification: gold ring rendered at 35% = invisible). */
#gwill-posts-grid { position: relative; transition: min-height 240ms ease; }
#gwill-posts-grid.gwill-loading { pointer-events: none; }
#gwill-posts-grid.gwill-loading > :not(.gwill-spinner) { opacity: 0.35; }
#gwill-posts-grid > * { transition: opacity var(--t-md); }
#gwill-posts-grid .gwill-spinner {
  position: absolute; top: 56px; left: 0; right: 0; margin: 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--gold);
  animation: gwill-spin 0.8s linear infinite;
  z-index: 2;
}
@keyframes gwill-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #gwill-posts-grid .gwill-spinner { animation-duration: 2s; }
}
#gwill-posts-grid img { opacity: 0; transition: opacity var(--t-md); }
#gwill-posts-grid img.gwill-img-in { opacity: 1; }
.gwill-filter-empty { font-size: 13px; color: var(--text-dim); font-weight: 300; padding: 24px 0; }

/* Gutenberg table → comparison look */
.wp-block-table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 12px; }
.wp-block-table figure, .wp-block-table { max-width: 100%; }
.wp-block-table table { min-width: 0; }
/* Mobile: table scrolls inside its own box — never blows the page wide */
@media (max-width: 767px) {
  .art-body .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .art-body .wp-block-table table { width: max-content; min-width: 100%; }
}
/* Flat square table scrollbar — GOLD BY DEFAULT so it is ALWAYS visible
   until the user scrolls (user: "It must always be visible until user
   scrolls" + "Make sure table Scrollbar is visible initially but fades
   after scrolling the table"). Inverted logic: no class = visible;
   main.js adds .tbl-idle after 1.5s of no scrolling following the
   first user scroll (and removes it on scroll). Fail-safe: if JS ever
   breaks, the scrollbar stays visible — never invisible. */
.wp-block-table { scrollbar-width: thin; scrollbar-color: var(--gold-border) transparent; }
.wp-block-table::-webkit-scrollbar { width: 6px; height: 6px; }
.wp-block-table::-webkit-scrollbar-track { background: transparent; }
.wp-block-table::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 0; }
.wp-block-table.tbl-idle { scrollbar-color: transparent transparent; }
.wp-block-table.tbl-idle::-webkit-scrollbar-thumb { background: transparent; }
[data-theme="dark"] .wp-block-table { scrollbar-color: rgba(217, 119, 6, 0.45) transparent; }
[data-theme="dark"] .wp-block-table::-webkit-scrollbar-thumb { background: rgba(217, 119, 6, 0.45); }
.wp-block-table thead { background: var(--surface-2); }
.wp-block-table th { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.wp-block-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-dim); color: var(--text-mid); }
.wp-block-table tr:last-child td { border-bottom: none; }
.wp-block-table tbody tr:hover { background: var(--gold-muted); }

/* ── DISCLOSURE ────────────────────────────────────────────────────────────── */
.discl { background: var(--gold-muted); border: 1px solid var(--gold-border); border-radius: var(--r-sm); padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start; }
.discl-i { color: var(--gold); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.discl-t { font-size: 11px; font-weight: 300; color: var(--text-mid); line-height: 1.65; }
.discl-t strong { color: var(--gold); font-weight: 700; }

/* ── SIDEBAR WIDGET ────────────────────────────────────────────────────────── */
.sw { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; margin-bottom: 14px; }
.sw-t { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-dim); }
.sw .gwill-newsletter__prompt { display: none; }
.sw .gwill-form__status { font-size: 11px; }

/* ── NEWSLETTER ────────────────────────────────────────────────────────────── */
.nl-s { background: var(--dark); border-radius: var(--r-xl); padding: 36px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; border: 1px solid var(--dark-b); }
[data-theme="dark"] .nl-s { background: #1e1b16; border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.nl-s::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 28px 28px;
}
.nl-s::after {
  content: ''; position: absolute; top: -120px; right: -120px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(217,119,6,0.14) 0%, transparent 65%); pointer-events: none;
}
.nl-s > * { position: relative; z-index: 1; }
.nl-s h3 { font-size: 20px; font-weight: 800; color: #f0ede6; letter-spacing: -0.03em; margin-bottom: 6px; }
.nl-s p { font-size: 12px; font-weight: 300; color: var(--dark-dim); line-height: 1.7; max-width: 420px; }
.nl-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 9px; font-weight: 300; color: var(--dark-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.nl-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dark-b); }
/* Starter newsletter form inside .nl-s */
.nl-s .gwill-newsletter { display: flex; flex-direction: column; gap: 14px; flex: 1; max-width: 420px; }
.nl-s .gwill-newsletter__prompt { display: none; }
.nl-s .gwill-form--newsletter__fields { display: flex; gap: 8px; }
.nl-s .gwill-form--newsletter__fields .gwill-form__field { flex: 1; min-width: 0; }
.nl-s .gwill-form input[type="email"] { background: var(--dark-s); border-color: var(--dark-b); color: #f0ede6; }
.nl-s .gwill-form input[type="email"]:-webkit-autofill,
.nl-s .gwill-form input[type="email"]:-webkit-autofill:hover,
.nl-s .gwill-form input[type="email"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dark-s) inset !important;
  -webkit-text-fill-color: #f0ede6 !important;
  caret-color: #f0ede6 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.nl-s .gwill-form input[type="email"]::placeholder { color: var(--dark-dim); }
.nl-s .gwill-form__submit { background: var(--gold-btn); color: #fff; border: none; font-size: 12px; font-weight: 700; padding: 0 20px; border-radius: var(--r-sm); white-space: nowrap; transition: background var(--t); height: 38px; }
.nl-s .gwill-form__submit:hover { background: #92400e; }
.nl-s .gwill-form__status { font-size: 11px; color: #c4b89a; }
.nl-s .gwill-form__status.error { color: #f87171; }
.m-nl { background: var(--dark); border-radius: var(--r-lg); padding: 24px 20px; }
[data-theme="dark"] .m-nl { background: #1e1b16; border: 1px solid rgba(245, 158, 11, 0.25); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.m-nl h3 { font-size: 18px; font-weight: 800; color: #f0ede6; letter-spacing: -0.03em; margin-bottom: 4px; }
.m-nl p { font-size: 12px; font-weight: 300; color: var(--dark-dim); line-height: 1.65; margin-bottom: 14px; }
.m-nl .gwill-newsletter__prompt { display: none; }
.m-nl .gwill-form input[type="email"] { background: var(--dark-s); border-color: var(--dark-b); color: #f0ede6; }
.m-nl .gwill-form input[type="email"]::placeholder { color: var(--dark-dim); }
/* Sidebar Weekly Digest form — stack input + full-width button */
.sw .gwill-form--newsletter__fields { display: flex; flex-direction: column; gap: 8px; }
.sw .gwill-form__submit { width: 100%; justify-content: center; height: 38px; padding: 0 20px; }
/* Newsletter submit buttons match the 46px input height EXACTLY — the
   38px button sat 8px shorter than the input in the mobile digest row
   (user: "weekly digest button and text field are not equally aligned").
   Stretch alignment guarantees equal tops/bottoms in flex rows. */
.m-nl .gwill-form__submit,
.nl-s .gwill-form__submit,
.nl-hero-form .gwill-form__submit,
.sw .gwill-form__submit { height: 48px; }
.m-nl .gwill-form--newsletter__fields,
.nl-s .gwill-form--newsletter__fields,
.nl-hero-form .gwill-form--newsletter__fields { align-items: stretch; }
/* Mobile-only newsletter block on singles (wireframe m-nl) */
.m-nl-wrap { display: none; }
@media (max-width: 767px) {
  .m-nl-wrap { display: block; margin-top: 24px; }
  .article-sidebar { display: none; }
  .m-nl .gwill-form--newsletter__fields { display: flex; gap: 8px; }
  .m-nl .gwill-form--newsletter__fields .gwill-form__field { flex: 1; min-width: 0; }
  .m-nl .gwill-form__submit { background: var(--gold-btn); color: #fff; border: none; font-size: 12px; font-weight: 700; padding: 0 20px; border-radius: var(--r-sm); white-space: nowrap; height: 46px; }
}
/* The sidebar must NEVER clip its widgets (user: "why did you cut off
   the bottom of the ad widget"). The TOC square (.toc-scroll) handles
   long heading lists internally; the sidebar itself stays natural
   height so the ad + digest always render fully. Slightly tighter
   widget padding here so the whole stack (square TOC + ad + digest)
   fits within a 1080p viewport when the sidebar is stuck.
   padding-top: 40px ALIGNS the TOC card with the breadcrumb line —
   equal space from the site header for both (user: "Make sure toc and
   breadcrumbs are on the same and have equal space between the header
   and them"). */
.article-sidebar { padding-top: 20px; }
.article-sidebar .sw { padding: 16px; margin-bottom: 10px; }

/* ── FOOTER ────────────────────────────────────────────────────────────────── */
.footer { background: var(--dark); padding: 48px var(--con-pad) 24px; margin-top: 72px; }
.ftop { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.fcol--brand { max-width: 320px; }
.flogo { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 16px; letter-spacing: -0.03em; margin-bottom: 12px; }
.flogo .n { color: var(--gold-b); text-shadow: 0 0 12px rgba(245,158,11,0.35); margin-right: 0.12em; }
.flogo .nm { color: #f0ede6; }
.ftag { font-size: 12px; font-weight: 300; color: var(--dark-dim); line-height: 1.75; margin-bottom: 10px; }
.fnet { font-size: 10px; color: var(--dark-dim); font-weight: 300; margin-bottom: 14px; }
.fsoc { display: flex; gap: 8px; }
.fsoc .soci {
  width: 34px; height: 34px; border-radius: 8px; background: var(--dark-s);
  border: 1px solid var(--dark-b); color: var(--dark-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; transition: all var(--t);
}
.fsoc .soci:hover { border-color: var(--gold-border); color: var(--gold-b); transform: translateY(-1px); }
.fct { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #f0ede6; margin-bottom: 12px; }
.fl { display: block; font-size: 12px; font-weight: 300; color: var(--dark-dim); margin-bottom: 8px; transition: color var(--t); }
.fl:hover { color: #c4b89a; }
.fbot { border-top: 1px solid var(--dark-b); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--dark-dim); font-weight: 300; gap: 12px; flex-wrap: wrap; }
.fbot-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.flegal { white-space: nowrap; }
.flegal a { color: var(--dark-dim); transition: color var(--t); }
.flegal a:hover { color: var(--gold-b); }
.fdot { color: var(--dark-dim); margin: 0 6px; opacity: 0.6; }
.mfooter .flegal a { color: var(--dark-dim); }
.mfooter .flegal a:hover { color: var(--gold-b); }
.mfooter .flegal .fdot { margin: 0 4px; }
@media (max-width: 767px) {
  .flegal { white-space: normal; }
  .mfbot .flegal { display: block; margin: 6px 0; }
}
.ftoplink { color: var(--dark-dim); font-weight: 700; transition: color var(--t); }
.ftoplink:hover { color: var(--gold-b); }
.mfooter { background: var(--dark); padding: 32px 20px 24px; margin-top: 40px; }
.mfgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.mfbot { border-top: 1px solid var(--dark-b); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--dark-dim); font-weight: 300; }

/* ── AD SLOTS ──────────────────────────────────────────────────────────────── */
.ad-slot {
  background: #eae8e3; border: 1.5px dashed #c8c4bc; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: relative; overflow: hidden; width: 100%; flex-shrink: 0;
}
.ad-slot::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,0.025) 8px, rgba(0,0,0,0.025) 9px);
  pointer-events: none;
}
.ad-txt { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9a9080; position: relative; z-index: 1; }
/* Simple gold ring spinner — replaces the old spinning ₦ coin (user:
   "replace all ads loading SVG that had that naira sign stuff with this
   simple loading svg"). Same language as the homepage filter spinner
   (.gwill-spinner): plain ring, no glyph, no glow — nothing to clip.
   --border/--gold flip with the theme, no dark overrides needed. */
.ad-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--gold);
  animation: gwill-spin 0.8s linear infinite;
  flex: none; z-index: 1; margin-bottom: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ad-ring { animation: none; }
}
.ad-leader { height: 90px; }
.ad-rect { height: 280px; max-width: 336px; margin: 24px auto; }
.ad-sq { height: 250px; }
.ad-feed {
  height: 180px;
  /* In a card grid (.g3) the feed slot must span the FULL row so it reads
     as an ad BETWEEN posts, not a squeezed 1/3-width grid cell. */
  grid-column: 1 / -1;
  width: 100%;
  margin: 8px 0;
}
/* Comment-section ads (v1.0.105): injected rect slots sit BETWEEN main
   comments — full width, generous gap, never squeezed by the list. */
.gwill-comment-ad { width: 100%; margin: 28px 0; }
.gwill-comment-ad .ad-rect { margin: 0 auto; }
.ad-banner { height: 60px; }
/* Wrapper used on page templates (page-*, search, author, 404) to give the
   banner slot breathing room between the page header and content. */
.ad-bg { margin-bottom: 24px; }
.ad-menu { height: 100px; }
.ad-menu:not(.mno-bot .ad-menu) { height: 100px; }
/* (Nav ad sizing lives with the nav styles at line ~443 — margins there.) */
.mno-bot .ad-menu .ad-txt { font-size: 8px; }
/* Compact slots (banner 60px / menu 80px): shrink the ring so it fits —
   no glow to clip anymore, just the ring size. */
.ad-banner .ad-ring, .mno-bot .ad-menu .ad-ring { width: 22px; height: 22px; border-width: 2px; margin-bottom: 0; }
/* Compact slots: shrink the spinner's content area (ring + label) so the
   full circle centers INSIDE the slot — no edge clipping. */
.ad-banner .ad-slot__spinner, .mno-bot .ad-menu .ad-slot__spinner,
.ad-sticky .ad-slot__spinner { padding: 6px 0; gap: 2px; }
.ad-banner .ad-slot__spinner .ad-txt, .mno-bot .ad-menu .ad-slot__spinner .ad-txt,
.ad-sticky .ad-slot__spinner .ad-txt { line-height: 1; }
/* Every ad slot in content flow gets breathing room — NEVER skin-to-skin
   with paragraphs, headings, or adjacent cards (user: "ads are skin to
   skin with elements around them"). Sticky/feed slots manage their own
   spacing. */
.ad-slot { margin: 24px 0; position: relative; }
.ad-sticky .ad-slot, .ad-slot.ad-feed { margin: 0; }
.ad-rect { margin: 24px auto; }

/* Spinning ₦ coin renders in EVERY slot (v1.0.97) — layered behind the
   ad content; .ad-filled (set by main.js when a variant instantiates)
   hides the coin so the real ad shows clean. */
.ad-slot__spinner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  z-index: 1;
  pointer-events: none;
}
.ad-slot__content { position: relative; z-index: 2; min-height: 100%; display: flex; align-items: center; justify-content: center; }
.ad-slot.ad-filled .ad-slot__spinner { display: none; }
/* Slots without any configured code keep the coin visible (placeholder). */
.ad-slot:not(.ad-filled) .ad-slot__spinner { display: flex; }

/* ── PER-DEVICE SLOT SIZES (v1.0.96) ───────────────────────────────────────
   Breakpoints match the device picker in main.js + Customizer fields:
   PC ≥1024px | tablet 768–1023px | mini-tab 600–767px | phone ≤599px.
   Heights mirror the researched ad sizes each device should serve. */
@media (max-width: 767px) {
  /* Phone + mini-tab: 320×50 leaders/banners, 300×250 rects/feeds. */
  .ad-leader, .ad-banner { height: 50px; }
  .ad-rect { height: 250px; max-width: 300px; }
  .ad-feed { height: 250px; }
  .ad-sq { height: 250px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: 728×90 preferred (468×60 has limited advertiser supply per
     AdSense — sub-optimal performance). Height 90px so a real 728×90
     code never gets clipped by the slot's overflow:hidden. */
  .ad-leader { height: 90px; }
  .ad-banner { height: 90px; }
  .ad-rect { height: 280px; }
  .ad-feed { height: 250px; }
  .ad-sq { height: 250px; }
}
@media (min-width: 1024px) {
  /* PC: full 728×90 leaders/banners, 336×280 rects/feeds, 300×250 sidebar. */
  .ad-leader { height: 90px; }
  .ad-banner { height: 90px; }
  .ad-rect { height: 280px; }
  .ad-feed { height: 280px; }
  .ad-sq { height: 250px; }
}
[data-theme="dark"] .ad-slot { background: #171512; border-color: #2c2822; }
[data-theme="dark"] .ad-txt { color: #5a5248; }

/* ── CONSENT BANNER ─────────────────────────────────────────────────────────
   Warm-black glass card, gold ₦ mark. z-400 sits ABOVE the sticky ad bar
   (z-350) so they never stack 3-deep; JS hides the banner on choice and
   gates the ad reveal on acceptance. */
.gconsent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: none; justify-content: center; padding: 0 12px 14px;
  pointer-events: none;
}
body.gconsent-open .gconsent { display: flex; }
.gconsent-card {
  pointer-events: auto;
  position: relative;
  width: 100%; max-width: 460px;
  background: rgba(24, 20, 15, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 28px rgba(245, 158, 11, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: ad-sticky-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gconsent-mark {
  position: absolute; top: -14px; left: 20px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), #d97706);
  color: #1a1408; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
}
.gconsent-title {
  font-size: 14px; font-weight: 800; color: #f0ede6;
  letter-spacing: -0.02em; margin: 2px 0 6px;
}
.gconsent-copy {
  font-size: 11.5px; font-weight: 300; color: rgba(240, 237, 230, 0.65);
  line-height: 1.6; margin: 0 0 12px;
}
.gconsent-acts { display: flex; gap: 8px; }
.gconsent-yes {
  flex: 1; background: var(--gold-btn); color: #fff;
  border: none; border-radius: 10px; padding: 10px 14px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.gconsent-yes:hover { background: #92400e; transform: translateY(-1px); }
.gconsent-no {
  flex: 1; background: transparent; color: rgba(240, 237, 230, 0.7);
  border: 1px solid rgba(240, 237, 230, 0.2); border-radius: 10px;
  padding: 10px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.gconsent-no:hover { border-color: rgba(245, 158, 11, 0.5); color: #f0ede6; }
@media (prefers-reduced-motion: reduce) {
  .gconsent-card { animation: none; }
}
@media (max-width: 767px) {
  .gconsent { padding: 0 8px 8px; }
  .gconsent-card { padding: 16px 16px 14px; }
  .gconsent-copy { font-size: 11px; }
}

/* ── STICKY FOOTER AD BAR ──────────────────────────────────────────────────
   Logic: fixed bar, hidden until JS adds body.ad-sticky-visible (scroll
   reveal), dismissible on ALL devices via .ad-sticky-x (current page view
   only, no persistence) — same behaviour as the tech theme.
   DESIGN (v1.0.90 — restored the premium glass look after the plain-dashed
   detour; user directive): glass card — cream in light mode, warm-black in
   dark — gold border + soft gold glow, backdrop blur, slide-up entrance,
   spinning ₦ coin, "Advertisement" text. NO top gradient hairline (removed
   1.0.87: "too much"). The X sits INSIDE the card's top-right corner
   (top:10px; right:10px; z-50 + white ring) so it's always fully visible ON
   TOP of the ad — never half-hanging off the edge.
   Footer padding compensation targets the real footer classes (.footer /
   .mfooter) so the bar never blocks footer links at the page bottom. */
.ad-sticky {
  position: fixed; left: 0; right: 0; bottom: 12px; z-index: 350;
  display: none; justify-content: center; padding: 0 12px;
  pointer-events: none; /* empty bar area lets clicks pass through */
}
.ad-sticky-card { position: relative; pointer-events: auto; width: 100%; max-width: 728px; }
body.ad-sticky-visible .ad-sticky { display: flex; }
/* Glass card — light mode: cream glass + gold border + soft glow. */
.ad-sticky .ad-slot {
  position: relative;
  z-index: 0; /* below .ad-sticky-x (z-50) — the slot must NEVER paint over the X */
  width: 100%; max-width: none; height: 90px;
  background: rgba(255, 252, 246, 0.96);
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 24px rgba(245, 158, 11, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ad-sticky-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
  background-image: none;
}
.ad-sticky .ad-slot::before { display: none; }
/* Keep the X from overlapping ad content: the dismiss corner is reserved. */
.ad-sticky .ad-slot__content,
.ad-sticky .ad-slot__spinner { padding-right: 28px; }
/* Dark mode: warm-black glass. */
[data-theme="dark"] .ad-sticky .ad-slot {
  background: rgba(24, 20, 15, 0.94);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 24px rgba(245, 158, 11, 0.12);
}
/* Ring + text: slightly compact for the bar, theme-aware. */
.ad-sticky .ad-ring { width: 24px; height: 24px; border-width: 2px; }
.ad-sticky .ad-txt { font-size: 8px; color: rgba(90, 80, 66, 0.6); letter-spacing: 0.22em; }
[data-theme="dark"] .ad-sticky .ad-txt { color: rgba(240, 237, 230, 0.45); }
/* Dismiss button — GOLD GHOST style (v1.0.100): small gold-tinted circle,
   semi-transparent, on-brand (matches --gold family), no ring or glow.
   Sits inside the card's top-right corner; visible on top but never
   blocks or outshines the ad. z-index 50 guarantees paint order. */
.ad-sticky-x {
  position: absolute; top: 6px; right: 6px; z-index: 50;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Ghost dismiss (v1.0.100): subtle but ON-BRAND — gold-tinted, not
     neutral grey (user: "the grey doesn't match the theme color scheme").
     Semi-transparent gold wash + gold glyph, no ring/glow; dark mode uses
     a lighter gold tint. Present but never blocks or outshines the ad. */
  background: rgba(217, 119, 6, 0.14);
  color: rgba(217, 119, 6, 0.75);
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t);
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ad-sticky-x svg { width: 10px; height: 10px; }
[data-theme="dark"] .ad-sticky-x {
  background: rgba(245, 158, 11, 0.16);
  color: rgba(245, 158, 11, 0.8);
}
.ad-sticky-x:hover { transform: rotate(90deg); background: rgba(217, 119, 6, 0.26); color: rgba(217, 119, 6, 0.95); }
[data-theme="dark"] .ad-sticky-x:hover { background: rgba(245, 158, 11, 0.3); color: rgba(245, 158, 11, 1); }
.ad-sticky-x:focus-visible { outline: 2px solid var(--gold-b); outline-offset: 2px; }
@keyframes ad-sticky-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-sticky .ad-slot { animation: none; }
}
/* Phone + mini-tab (≤767px): compact 320×100 anchor banner, above the edge. */
@media (max-width: 767px) {
  .ad-sticky { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 0 8px; }
  .ad-sticky-card { max-width: 360px; }
  .ad-sticky .ad-slot { max-width: none; height: 100px; border-radius: 16px; }
  .ad-sticky .ad-ring { width: 20px; height: 20px; border-width: 2px; }
  body.ad-sticky-visible .mfooter { padding-bottom: 120px; }
}
/* Tablet (768–1023px): 728×90 leaderboard (468×60 has limited advertiser
   supply per AdSense — sub-optimal; the 728 card fits 768px viewports). */
@media (min-width: 768px) and (max-width: 1023px) {
  .ad-sticky-card { max-width: 728px; }
  .ad-sticky .ad-slot { height: 90px; border-radius: 12px; }
  body.ad-sticky-visible .footer { padding-bottom: 130px; }
}
/* PC (≥1024px): 728×90 leaderboard. */
@media (min-width: 1024px) {
  body.ad-sticky-visible .footer { padding-bottom: 130px; }
}
/* When the bar is hidden (dismissed), restore footer padding. */
body:not(.ad-sticky-visible) .footer,
body:not(.ad-sticky-visible) .mfooter { padding-bottom: inherit; }
/* Near the page bottom (comment form / footer links in view) the bar
   hides entirely so it NEVER covers content — returns on scroll up. */
body.ad-sticky-bottom .ad-sticky { display: none !important; }
body.ad-sticky-bottom .footer,
body.ad-sticky-bottom .mfooter { padding-bottom: inherit !important; }

/* ── BRAND TEXT SELECTION ───────────────────────────────────────────────────
   Gold selection everywhere — brand color, dark text on gold for contrast
   in BOTH themes (gold is the brand anchor; #1a1408 text keeps 9:1+). */
::selection {
  background: var(--gold);
  color: #1a1408;
}
::-moz-selection {
  background: var(--gold);
  color: #1a1408;
}

/* ── ARTICLE PAGE ──────────────────────────────────────────────────────────── */
.prog { height: 3px; background: var(--border-dim); position: sticky; top: var(--header-h); z-index: 90; }
.prog-f { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--green)); border-radius: 0 2px 2px 0; transition: width 120ms linear; }
.art-surface-pad { padding: 36px 44px 40px; }
.art-cover { min-height: 300px; border-bottom: 1px solid var(--border-dim); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; }
.art-hd { background: transparent; border-bottom: none; padding: 20px 0 48px; position: relative; }
.bc { font-size: 11px; color: var(--text-dim); font-weight: 300; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.bc a { color: var(--text-dim); transition: color var(--t); }
.bc a:hover { color: var(--gold); }
.bc-s { opacity: 0.5; }
/* Breadcrumb nav (shared helper gwill_breadcrumbs()) — same visual language
   as .bc but with Schema.org <ol> markup: separators via li+li::before. */
.gwill-breadcrumbs { margin-bottom: 18px; }
.gwill-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 300; color: var(--text-dim); margin: 0; padding: 0; list-style: none; }
.gwill-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.gwill-breadcrumbs__item + .gwill-breadcrumbs__item::before { content: '›'; opacity: 0.5; }
.gwill-breadcrumbs__item a { color: var(--text-dim); text-decoration: none; transition: color var(--t); }
.gwill-breadcrumbs__item a:hover { color: var(--gold); }
.gwill-breadcrumbs__item--current { opacity: 1; }
/* On dark heroes (about / apps / newsletter) the dim link colour must flip. */
.about-hero .gwill-breadcrumbs__list,
.apps-hero .gwill-breadcrumbs__list,
.nl-hero .gwill-breadcrumbs__list,
.legal-hero .gwill-breadcrumbs__list { color: rgba(240, 237, 230, 0.6); }
.about-hero .gwill-breadcrumbs__item a,
.apps-hero .gwill-breadcrumbs__item a,
.nl-hero .gwill-breadcrumbs__item a,
.legal-hero .gwill-breadcrumbs__item a { color: rgba(240, 237, 230, 0.6); }
.about-hero .gwill-breadcrumbs__item a:hover,
.apps-hero .gwill-breadcrumbs__item a:hover,
.nl-hero .gwill-breadcrumbs__item a:hover,
.legal-hero .gwill-breadcrumbs__item a:hover { color: var(--gold); }
.about-hero .gwill-breadcrumbs__item--current,
.apps-hero .gwill-breadcrumbs__item--current,
.nl-hero .gwill-breadcrumbs__item--current,
.legal-hero .gwill-breadcrumbs__item--current { color: rgba(240, 237, 230, 0.85); }
/* 404 empty state — breadcrumb sits above the centred block. */
.es .gwill-breadcrumbs__list { justify-content: center; }
.art-t { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; color: var(--text); letter-spacing: -0.035em; line-height: 1.08; max-width: 720px; margin-bottom: 20px; }
.art-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-dim); font-weight: 300; flex-wrap: wrap; }
.art-author { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface-2); }
.art-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.art-author-link { color: var(--text); font-weight: 700; }
.art-author-link:hover { color: var(--gold); }
.art-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.art-reading-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.art-body { font-size: 16px; font-weight: 400; color: var(--text-mid); line-height: 1.8; }
.art-body h1 { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; margin: 30px 0 12px; }
.art-body h2 { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; margin: 28px 0 10px; }
.art-body h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 20px 0 8px; }
.art-body h4, .art-body h5, .art-body h6 { font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 0 8px; letter-spacing: -0.01em; }
/* ── Article — desktop editorial polish (≥1024px) ───────────────────────────
   NOTE: this MUST stay AFTER the .art-body base rules above — an earlier
   copy placed it before them and the base rules silently overrode the
   media query (body stayed 16px on desktop). */
@media (min-width: 1024px) {
  .art-surface-pad { padding: 48px 56px 56px; }
  .art-cover { min-height: 380px; }
  .art-body { font-size: 17px; line-height: 1.9; }
  .art-body > p:first-of-type {
    font-size: 19px; font-weight: 300; color: var(--text);
    line-height: 1.85; margin-bottom: 26px;
  }
  .art-body h2 { font-size: 24px; margin: 44px 0 14px; }
  .art-body h3 { font-size: 18px; margin: 28px 0 10px; }
  .art-body h4 { font-size: 15px; margin: 22px 0 8px; }
  .art-body ul, .art-body ol { margin: 18px 0 22px; }
  .art-body blockquote, .art-body .wp-block-pullquote { margin: 30px 0; }
}
.art-body p { margin-bottom: 14px; }
.art-body a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.art-body a:hover { color: var(--gold-b); }
.art-body ul, .art-body ol { margin: 0 0 16px 20px; }
.art-body li { margin-bottom: 7px; line-height: 1.7; }
.art-body li > ul, .art-body li > ol { margin: 7px 0 0 22px; }
/* Brand list markers — gold diamonds for bullets, JetBrains Mono gold numbers for ordered lists */
.art-body ul { list-style: none; }
.art-body ul:not(.wp-block-categories):not(.wp-block-archives):not(.wp-block-latest-comments):not(.wp-block-tag-cloud):not(.wp-block-social-links) > li { position: relative; padding-left: 18px; }
.art-body ul:not(.wp-block-categories):not(.wp-block-archives):not(.wp-block-latest-comments):not(.wp-block-tag-cloud):not(.wp-block-social-links) > li::before {
  content: '◆'; position: absolute; left: 0; top: 0.12em;
  font-size: 9px; color: var(--gold); opacity: 0.75;
}
.art-body ul:not(.wp-block-categories):not(.wp-block-archives):not(.wp-block-latest-comments):not(.wp-block-tag-cloud):not(.wp-block-social-links) > li > ul > li::before { content: '◇'; opacity: 0.5; }
.art-body ul:not(.wp-block-categories):not(.wp-block-archives):not(.wp-block-latest-comments):not(.wp-block-tag-cloud):not(.wp-block-social-links) > li > ul > li > ul > li::before { content: '▪'; font-size: 8px; }
.art-body ol:not(.wp-block-latest-comments) { list-style: none; counter-reset: gwill-li; }
.art-body ol:not(.wp-block-latest-comments) > li { position: relative; padding-left: 30px; counter-increment: gwill-li; }
.art-body ol:not(.wp-block-latest-comments) > li::before {
  content: counter(gwill-li); position: absolute; left: 0; top: 0.22em;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--gold); background: var(--gold-muted); border-radius: 5px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-border);
}
.art-body ol:not(.wp-block-latest-comments) > li > ol { counter-reset: gwill-sub; }
.art-body ol:not(.wp-block-latest-comments) > li > ol > li { counter-increment: gwill-sub; padding-left: 26px; }
.art-body ol:not(.wp-block-latest-comments) > li > ol > li::before {
  content: counter(gwill-sub); width: 16px; height: 16px; font-size: 9px; top: 0.3em;
  background: none; border: none; color: var(--gold-b);
}
.art-body blockquote { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 18px 0; color: var(--text-mid); font-style: italic; }
.art-body blockquote cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; color: var(--text-dim); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.art-body .wp-block-pullquote { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-md); background: var(--surface-2); padding: 22px 24px; margin: 18px 0; }
.art-body .wp-block-pullquote blockquote { border: none; padding: 0; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); font-style: normal; line-height: 1.55; }
.art-body .wp-block-pullquote cite { display: block; margin-top: 10px; font-size: 11px; font-style: normal; color: var(--text-dim); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.art-body figure { margin: 0 0 18px; }
.art-body figcaption { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 10px; line-height: 1.5; }
.art-body .wp-block-image img { border-radius: var(--r-md); }
.art-body .wp-block-image.alignleft { float: left; margin: 4px 20px 14px 0; max-width: 45%; }
.art-body .wp-block-image.alignright { float: right; margin: 4px 0 14px 20px; max-width: 45%; }
.art-body .wp-block-image.aligncenter { text-align: center; }
.art-body .wp-block-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.art-body .wp-block-gallery .wp-block-image { margin: 0; }
.art-body .wp-block-gallery .wp-block-image img { border-radius: var(--r-sm); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.art-body .wp-block-gallery .wp-block-image figcaption { margin-top: 6px; }
.art-body .wp-block-embed iframe { border-radius: var(--r-md); }
.art-body .wp-block-embed { margin-bottom: 18px; }
.art-body .wp-block-embed__wrapper { position: relative; }
.art-body .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ''; display: block; padding-top: 56.25%; }
.art-body .wp-block-embed.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-body .wp-block-video video, .art-body .wp-block-audio audio { width: 100%; border-radius: var(--r-md); }
.art-body .wp-block-video { margin-bottom: 18px; }
.art-body .wp-block-cover { border-radius: var(--r-md); overflow: hidden; margin: 0 0 18px; min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; }
.art-body .wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 1; color: #fff; padding: 24px; text-align: center; }
.art-body .wp-block-cover .wp-block-cover__inner-container p { color: #fff; }
.art-body .wp-block-cover img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.art-body .wp-block-cover__background { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.art-body .wp-block-columns { display: flex; gap: 20px; margin: 0 0 18px; }
.art-body .wp-block-column { flex: 1; min-width: 0; }
.art-body .wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin: 0 0 18px; }
.art-body .wp-block-media-text img { border-radius: var(--r-md); width: 100%; }
.art-body .wp-block-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.art-body .wp-block-button__link { display: inline-block; background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; padding: 11px 22px; border-radius: var(--r-sm); text-decoration: none; transition: background var(--t); }
.art-body .wp-block-button__link:hover { background: var(--gold-b); color: #fff; }
.art-body .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.art-body .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--gold-muted); }
.art-body .wp-block-file { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.art-body .wp-block-file__button { background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-sm); text-decoration: none; margin-left: auto; }
.art-body .wp-block-file__button:hover { background: var(--gold-b); color: #fff; }
.art-body .wp-block-details, .art-body details.wp-block-details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: 14px 18px; margin: 0 0 18px; }
.art-body .wp-block-details summary, .art-body details.wp-block-details summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--gold); }
.art-body .wp-block-details p, .art-body details.wp-block-details p { margin: 12px 0 0; }
.art-body .wp-block-code { background: var(--dark); border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 18px; overflow-x: auto; }
.art-body .wp-block-code code { background: none; color: #e8e4da; font-size: 13px; line-height: 1.7; }
.art-body .wp-block-preformatted { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 18px; font-size: 13px; overflow-x: auto; white-space: pre; }
.art-body .wp-block-verse { background: var(--dark); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 18px; color: #e8e4da; font-size: 13px; line-height: 1.8; overflow-x: auto; }
.art-body code { background: var(--surface-2); border: 1px solid var(--border-dim); border-radius: 4px; padding: 1px 6px; font-size: 13px; color: var(--gold); }
.art-body .wp-block-separator { border: none; border-top: 1px solid var(--border); margin: 26px 0; }
.art-body .wp-block-footnotes { border-top: 1px solid var(--border); padding-top: 14px; font-size: 12px; color: var(--text-dim); margin-top: 26px; }
.art-body .footnote-ref a { color: var(--gold); font-size: 12px; text-decoration: none; }
/* Widget blocks */
.art-body .wp-block-search { margin: 0 0 18px; }
.art-body .wp-block-search__input { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; background: var(--surface); color: var(--text); width: 100%; max-width: 320px; }
.art-body .wp-block-search__button { background: var(--gold); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 18px; font-size: 12px; font-weight: 700; margin-left: 8px; }
.art-body .wp-block-categories, .art-body .wp-block-archives, .art-body .wp-block-tag-cloud { margin: 0 0 18px; font-size: 13px; }
.art-body .wp-block-categories a, .art-body .wp-block-archives a, .art-body .wp-block-tag-cloud a { text-decoration: none; }
.art-body .wp-block-categories li, .art-body .wp-block-archives li { margin-bottom: 6px; }
.art-body .wp-block-categories li ul, .art-body .wp-block-archives li ul { margin: 6px 0 0 18px; }
/* Widget blocks styled as surface cards (finance look) */
.art-body .wp-block-categories, .art-body .wp-block-archives {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 18px; list-style: none; margin: 0 0 18px;
}
.art-body .wp-block-categories li, .art-body .wp-block-archives li {
  border-bottom: 1px solid var(--border-dim); padding: 8px 0; margin: 0;
  display: flex; justify-content: space-between; align-items: center;
}
.art-body .wp-block-categories li:last-child, .art-body .wp-block-archives li:last-child { border-bottom: none; }
.art-body .wp-block-categories li a, .art-body .wp-block-archives li a { color: var(--text-mid); font-weight: 500; }
.art-body .wp-block-categories li a:hover, .art-body .wp-block-archives li a:hover { color: var(--gold); }
.art-body .wp-block-categories .wp-block-categories__list { list-style: none; padding: 0; margin: 0; }
.art-body .wp-block-categories .wp-block-categories__list .wp-block-categories__list { margin-left: 18px; }
.art-body .wp-block-tag-cloud a {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--pill); padding: 5px 14px; margin: 0 6px 8px 0;
  font-size: 11px !important; font-weight: 700; color: var(--text-mid); transition: all var(--t);
}
.art-body .wp-block-tag-cloud a:hover { background: var(--gold-muted); border-color: var(--gold-border); color: var(--gold); }
.art-body .wp-block-latest-comments {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 18px; margin: 0 0 18px; list-style: none; font-size: 13px;
}
.art-body .wp-block-latest-comments li { margin-bottom: 10px; color: var(--text-dim); }
.art-body .wp-block-latest-comments li:last-child { margin-bottom: 0; }
.art-body .wp-block-latest-comments__comment-author { color: var(--text); font-weight: 700; }
.art-body .wp-block-latest-comments__comment-date { font-size: 10px; color: var(--text-dim); display: block; margin-top: 2px; }
[data-theme="dark"] .art-body .wp-block-categories, [data-theme="dark"] .art-body .wp-block-archives,
[data-theme="dark"] .art-body .wp-block-latest-comments { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .art-body .wp-block-tag-cloud a { background: var(--dark-s); border-color: var(--dark-b); color: #c9c2b4; }
[data-theme="dark"] .art-body .wp-block-tag-cloud a:hover { background: #1c1a16; border-color: var(--dark-b); color: var(--gold-b); }
.art-body .wp-block-social-links { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; }
.art-body .wp-block-social-links li { margin: 0; }
.art-body .wp-block-social-links .wp-block-social-link { background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; padding: 0; }
.art-body .wp-block-social-links .wp-block-social-link a { display: flex; padding: 6px; text-decoration: none; }
.art-body .wp-block-social-links svg { width: 18px; height: 18px; fill: var(--text-mid); }
.art-body .wp-block-latest-comments { margin: 0 0 18px; font-size: 13px; }
.art-body .wp-block-latest-comments li { margin-bottom: 10px; color: var(--text-dim); }
/* Callouts (manual class) */
.callout { background: var(--gold-muted); border-left: 3px solid var(--gold); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0; font-size: 14px; color: var(--text-mid); }
.callout strong { color: var(--gold); }
/* Dark mode content */
[data-theme="dark"] .art-body .wp-block-pullquote { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .art-body .wp-block-file, [data-theme="dark"] .art-body .wp-block-preformatted { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .art-body .wp-block-details { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .art-body code { background: var(--dark-s); border-color: var(--dark-b); color: var(--gold-b); }
[data-theme="dark"] .art-body .wp-block-search__input { background: var(--dark-s); border-color: var(--dark-b); color: #f0ede6; }
[data-theme="dark"] .art-body .wp-block-social-links .wp-block-social-link { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .art-body .wp-block-social-links svg { fill: #c9c2b4; }
/* Mobile content */
@media (max-width: 767px) {
  .art-body .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
  .art-body .wp-block-columns { flex-direction: column; }
  .art-body .wp-block-media-text { grid-template-columns: 1fr; }
  .art-body .wp-block-image.alignleft, .art-body .wp-block-image.alignright { float: none; max-width: 100%; margin: 0 0 14px; }
}
/* ── Lightbox (ported from tech theme — click any article image to zoom) ── */
.gl-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gl-overlay.gl-open { opacity: 1; pointer-events: auto }
.gl-image-wrap { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 80vh }
.gl-image { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 8px 40px rgba(0,0,0,.5) }
.gl-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.gl-close:hover { background: rgba(255,255,255,.16) }
.gl-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.gl-nav:hover { background: rgba(255,255,255,.16) }
.gl-prev { left: 16px }
.gl-next { right: 16px }
.gl-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 20px;
  color: rgba(255,255,255,.7); font-size: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.gl-counter {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.4);
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
  z-index: 2;
}
.art-body .wp-block-image img { cursor: zoom-in; }
@media (max-width: 767px) {
  .gl-nav { width: 36px; height: 36px; font-size: 20px }
  .gl-prev { left: 8px }
  .gl-next { right: 8px }
  .gl-image { max-height: 70vh }
}

.share-row { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-dim); flex-wrap: wrap; }
.share-l { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.share-b { font-size: 10px; font-weight: 700; padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); cursor: pointer; transition: all var(--t); }
.share-b:hover { border-color: var(--gold-border); color: var(--gold); }
.abio { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
.aav {
  width: 48px; height: 48px; border-radius: 50%; background: var(--gold-muted);
  border: 2px solid var(--gold-border); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--gold); flex-shrink: 0; overflow: hidden;
}
.aav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.an-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.abio-t { font-size: 11px; font-weight: 300; color: var(--text-dim); line-height: 1.65; }
.abio-s { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.abio-si {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mid); transition: all var(--t);
}
.abio-si svg { width: 13px; height: 13px; }
.abio-si:hover { background: var(--gold-muted); border-color: var(--gold-border); color: var(--gold); }

/* ── TOC SIDEBAR ───────────────────────────────────────────────────────────── */
.toc-i { padding: 8px 0; border-bottom: 1px solid var(--border-dim); font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.toc-i:last-child { border-bottom: none; }
.toc-i.cur { color: var(--gold); font-weight: 700; }
/* Desktop sidebar TOC — compact square-ish box with its own scroll.
   User: "make it like a square and scrollable so the button ads widget
   can also get viewed" → "This isn't what a square is" → "Look at where
   the mouse cursor is, there is still much space there, reduce it a bit
   so there is space for the bottom ad". Height 220px (trimmed from the
   width-derived 274px) — still reads as a square at sidebar widths, but
   leaves room for the 300×250 ad + digest below. Gold scrollbar, same
   language as the mobile TOC. */
/* Desktop sidebar TOC — flat square scrollbar, GOLD BY DEFAULT so it is
   ALWAYS visible until the user scrolls (same inverted logic as the
   table: no class = visible; main.js adds .toc-idle after 1.5s of no
   scrolling following the first user scroll, removes it on scroll). */
.toc-scroll {
  height: 220px;
  overflow-y: auto;
  margin: 0 -8px 0 0;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.toc-scroll::-webkit-scrollbar { width: 5px; }
.toc-scroll::-webkit-scrollbar-track { background: transparent; }
.toc-scroll::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 0; }
.toc-scroll.toc-idle { scrollbar-color: transparent transparent; }
.toc-scroll.toc-idle::-webkit-scrollbar-thumb { background: transparent; }
[data-theme="dark"] .toc-scroll { scrollbar-color: rgba(217, 119, 6, 0.45) transparent; }
[data-theme="dark"] .toc-scroll::-webkit-scrollbar-thumb { background: rgba(217, 119, 6, 0.45); }
.toc-bar { width: 2px; height: 12px; background: var(--gold); border-radius: 1px; flex-shrink: 0; }
.toc-g { width: 2px; height: 12px; flex-shrink: 0; }
.toc-i a { color: inherit; display: flex; align-items: center; gap: 8px; flex: 1; }

/* ── PAGE HEADER ───────────────────────────────────────────────────────────── */
.phd { background: var(--surface); border-bottom: 1px solid var(--border); padding: 40px var(--con-pad) 32px; }
.phd h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); margin-bottom: 6px; }
.phd p { font-size: 13px; font-weight: 300; color: var(--text-dim); max-width: 520px; }
.pill-strip { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 12px var(--con-pad); }

/* ── ABOUT HERO ────────────────────────────────────────────────────────────── */
.about-hero { background: var(--dark); padding: 56px var(--con-pad); position: relative; overflow: hidden; }
.about-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 28px 28px;
  pointer-events: none;
}
.about-hero::after {
  content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(217,119,6,0.08) 0%, transparent 70%); pointer-events: none;
}
.about-hero > * { position: relative; z-index: 1; }
.about-hero .aav { width: 88px; height: 88px; font-size: 32px; border-width: 3px; }

/* ── MOBILE TOC dropdown (wireframe: no sidebar on mobile) ───────────────── */
.toc-dropdown { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; box-shadow: var(--sh-sm); }
.toc-summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; }
.toc-summary::-webkit-details-marker { display: none; }
.toc-caret { font-size: 10px; color: var(--gold); transition: transform var(--t); }
.toc-dropdown.toc-open .toc-caret { transform: rotate(180deg); }
.toc-list { display: flex; flex-direction: column; padding: 0 12px 12px; gap: 2px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-border) transparent; }
.toc-list::-webkit-scrollbar { width: 4px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 0; }
/* Flat square scrollbar, GOLD BY DEFAULT — always visible until the
   user scrolls (inverted logic like table + desktop TOC: main.js adds
   .toc-idle after 1.5s of no scrolling following the first user
   scroll, removes it on scroll). */
.toc-dropdown.toc-idle .toc-list { scrollbar-color: transparent transparent; }
.toc-dropdown.toc-idle .toc-list::-webkit-scrollbar-thumb { background: transparent; }
.toc-list::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* Scroll fade: tells the reader more TOC items are below */
.toc-dropdown::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: linear-gradient(to top, var(--surface-2), rgba(250, 249, 246, 0));
  pointer-events: none; opacity: 1; transition: opacity var(--t);
}
.toc-dropdown.toc-scrolled-end::after { opacity: 0; }
[data-theme="dark"] .toc-dropdown::after { background: linear-gradient(to top, var(--dark-s), rgba(19, 18, 16, 0)); }
[data-theme="dark"] .toc-list { scrollbar-color: rgba(217, 119, 6, 0.45) transparent; }
[data-theme="dark"] .toc-list::-webkit-scrollbar-thumb { background: rgba(217, 119, 6, 0.45); }
[data-theme="dark"] .toc-list::-webkit-scrollbar-thumb:hover { background: var(--gold-b); }
[data-theme="dark"] .toc-dropdown.toc-idle .toc-list { scrollbar-color: transparent transparent; }
[data-theme="dark"] .toc-dropdown.toc-idle .toc-list::-webkit-scrollbar-thumb { background: transparent; }
.toc-list a { padding: 9px 12px; font-size: 13px; font-weight: 400; color: var(--text-mid); border-radius: var(--r-sm); border-left: 2px solid transparent; line-height: 1.4; }
.toc-list a:hover { color: var(--text); background: var(--surface-2); border-left-color: var(--gold); }
.toc-list a.toc-sub { padding-left: 28px; font-size: 12px; color: var(--text-dim); }
.toc-mobile { display: none; }
@media (max-width: 767px) {
  .toc-mobile { display: block; }
  .toc-dropdown.toc-open .toc-list { display: flex; }
  .toc-dropdown:not(.toc-open) .toc-list { display: none; }
}
[data-theme="dark"] .toc-dropdown { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .toc-list a:hover { background: #1c1a16; color: #f0ede6; }
[data-theme="dark"] .toc-list a.toc-sub { color: #7a6f5e; }

/* ── CONTACT ───────────────────────────────────────────────────────────────── */
.ci { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--gold-muted); border: 1px solid var(--gold-border); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.soci { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-mid); }
.contact-sidebar-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-dim); font-size: 12px; font-weight: 300; color: var(--text-mid); }
.contact-sidebar-item:last-child { border-bottom: none; }

/* ── ABOUT CARDS / NETWORK TILES ───────────────────────────────────────────── */
.about-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px;
}
.about-card--gold { background: var(--gold-muted); border-color: var(--gold-border); }
.about-card--gold .about-card-text { color: var(--text-mid); } /* a11y: text-dim was 4.41:1 on gold-tint — v1.0.145 */
.about-card-emoji { font-size: 22px; margin-bottom: 10px; }
.about-card-title { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 6px; }
.about-card-text { font-size: 12px; font-weight: 300; color: var(--text-dim); line-height: 1.65; }
.about-net {
  width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.about-net--main { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.about-net--tech { background: #0d0d0d; border: 1px solid #2a2a2a; color: #00ff91; font-size: 9px; }

/* ── APP CARDS (Finance Apps page) ────────────────────────────────────────── */
.apps-hero { background: var(--dark); padding: 40px var(--con-pad); position: relative; overflow: hidden; border-bottom: 1px solid var(--dark-b); }
.apps-tabs { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px var(--con-pad); position: sticky; top: var(--header-h); z-index: 50; }
.what-i-do { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 40px var(--con-pad); }
@media (max-width: 767px) {
  .apps-hero { padding: 28px 20px; }
  .apps-tabs { padding: 10px 20px; }
  .what-i-do { padding: 28px 20px; }
}
.app-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--t-md), transform var(--t-md), box-shadow var(--t-md);
}
.app-card:hover { border-color: var(--gold-border); transform: translateY(-3px); box-shadow: var(--sh-gold); }
.app-card .b-green, .app-card .b-ghost { position: relative; z-index: 1; }


/* ── SEARCH FORM (theme searchform.php) ─────────────────────────────────── */
.search-form { display: flex; align-items: center; gap: 8px; flex: 1; }
.search-label { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; }
.search-icon { color: var(--text-dim); flex-shrink: 0; }
.search-field { border: none; outline: none; font-size: 12px; color: var(--text); background: transparent; width: 100%; padding: 0; font-family: var(--font); }
.search-field::placeholder { color: var(--text-dim); }
.search-submit { background: var(--gold-btn); color: #fff; border: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 9px 18px; border-radius: var(--r-sm); white-space: nowrap; cursor: pointer; transition: background var(--t); line-height: 1; height: 36px; }
.search-submit:hover { background: #92400e; }
/* vibe-comments plugin's "Load Comments" button hardcodes #d97706 bg
   (3.25:1 with white text) — a11y override to the theme's AA gold button. */
#vibe-load-comments-btn { background: var(--gold-btn) !important; color: #fff !important; }
#vibe-load-comments-btn:hover { background: var(--gold-btn) !important; }
/* v1.0.151: NO hover effects in the comments area (user request) — the
   vibe-comments plugin's hovers flip blue (#2563eb) and lift the cards,
   clashing with the gold theme. Neutralized to their resting state.
   Keyboard focus (:focus-visible) and press feedback (:active/:disabled)
   deliberately KEPT — a11y stays intact. */
.vibe-comment-body:hover { box-shadow: none !important; }
.vibe-comment-author a:hover { color: inherit !important; }
.vibe-reaction-summary:hover { background: none !important; border-color: var(--vibe-border, #e5e7eb) !important; }
.vibe-reaction-option:hover { transform: none !important; background: none !important; }
.vibe-comment-footer .comment-reply-link:hover,
.vibe-reply-trigger:hover { background: none !important; color: inherit !important; }
.vibe-view-replies-btn:hover { color: var(--vibe-text-muted, #64748b) !important; text-decoration: none !important; }
.vibe-sort-icon-btn:hover { border-color: var(--vibe-border, #e5e7eb) !important; color: var(--vibe-text-muted, #64748b) !important; }
.vibe-logout:hover { color: inherit !important; }
.vibe-btn-load-more:hover { background: var(--vibe-surface) !important; color: var(--vibe-text) !important; border-color: var(--vibe-border) !important; }
/* The pill wrapper used on search/archive pages */
.search-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 8px 8px 14px; background: var(--surface); transition: border-color var(--t), box-shadow var(--t); }
.search-pill:focus-within { border-color: var(--gold-border); box-shadow: 0 0 0 3px rgba(217,119,6,0.08); }
.search-pill .search-form { flex: 1; }
[data-theme="dark"] .search-pill { background: var(--dark-s); border-color: var(--dark-b); }
[data-theme="dark"] .search-pill .search-field { color: #f0ede6; }
[data-theme="dark"] .search-icon { color: #5a5248; }

/* Gutenberg search block in content */
.art-body .wp-block-search { display: block; margin: 0 0 18px; }
.art-body .wp-block-search__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.art-body .wp-block-search__inside-wrapper { display: flex; gap: 8px; align-items: center; }
.art-body .wp-block-search__input { flex: 1; min-width: 0; }
.art-body .wp-block-search__button { height: 38px; padding: 0 18px; flex-shrink: 0; }

/* ── PAGINATION ────────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 12px; font-size: 11px; font-weight: 700; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); transition: all var(--t);
}
.pagination .page-numbers:hover { border-color: var(--gold-border); color: var(--gold); }
.pagination .page-numbers.current { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.error-404 { text-align: center; padding: 80px var(--con-pad) 100px; }
.error-404__code { font-size: clamp(64px, 10vw, 120px); font-weight: 800; color: var(--gold); letter-spacing: -0.05em; line-height: 1; text-shadow: 0 0 30px var(--gold-glow); }

/* ── EMPTY STATE (404 + no search results) ────────────────────────────────── */
.es { max-width: 560px; margin: 0 auto; text-align: center; }
.es-glyph {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--gold-muted); border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: var(--gold);
}
.es-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 0 0 8px; }
.es-copy { font-size: 13px; font-weight: 300; color: var(--text-dim); line-height: 1.7; margin: 0 auto 24px; max-width: 400px; }
.es .search-pill { max-width: 360px; margin: 0 auto 24px; text-align: left; }
.es .cp-strip { justify-content: safe center; margin-bottom: 28px; padding-inline: 4px; scroll-padding-inline: 4px; }
.es .btn { text-decoration: none; }
[data-theme="dark"] .es-glyph { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.3); }
[data-theme="dark"] .es-title { color: #f0ede6; }

/* ── CONTENT PAGES ─────────────────────────────────────────────────────────── */
.page-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 40px 44px; box-shadow: var(--sh-sm); }

/* ── LEGAL PAGES (page-legal.php — v1.0.115 dark-hero redesign) ──────────── */
/* Dark hero — same pattern as About + Newsletter pages */
.legal-hero {
  background: var(--dark); padding: 56px 0 36px;
  position: relative; overflow: hidden;
}
.legal-hero::after {
  content: ''; position: absolute; top: -140px; left: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.11), transparent 65%);
  pointer-events: none;
}
.legal-hero-inner { max-width: 860px; margin-inline: auto; position: relative; z-index: 1; }
.legal-hero-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-b);
  margin-bottom: 10px;
}
.legal-hero-title {
  font-size: clamp(26px, 4vw, 38px); font-weight: 800;
  letter-spacing: -0.03em; color: #f0ede6; margin: 0 0 16px;
}
.legal-updated {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-dim);
  background: var(--dark-s); border: 1px solid var(--dark-b);
  border-radius: 100px; padding: 6px 14px;
}
.legal-section { padding: 40px 0 64px; }
.legal-layout { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 860px; margin-inline: auto; }
/* Banner ad is the FIRST grid child — must span ALL columns so it sits
   above the TOC + content columns, not steal the 196px TOC column. */
.legal-layout > .ad-bg { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: 196px 1fr; gap: 48px; align-items: start; }
}
.legal-toc { position: sticky; top: calc(var(--header-h, 64px) + 24px); }
.legal-toc-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.legal-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: toc-counter; }
.legal-toc-list li { counter-increment: toc-counter; }
.legal-toc-list a {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  text-decoration: none; padding: 6px 8px; border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.legal-toc-list a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--gold); opacity: 0.7; flex-shrink: 0;
}
.legal-toc-list a:hover { color: var(--text); background: var(--gold-muted); }
.legal-toc-list a:hover::before { color: var(--gold); opacity: 1; }
@media (max-width: 899px) {
  .legal-toc { position: static; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); }
  [data-theme="dark"] .legal-toc { background: var(--dark-s); border-color: var(--dark-b); }
  .legal-toc-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .legal-toc-list a { font-size: 11.5px; padding: 5px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 100px; gap: 5px; }
  [data-theme="dark"] .legal-toc-list a { background: var(--dark); border-color: var(--dark-b); }
  .legal-toc-list a::before { display: none; }
.legal-toc-list a:hover { border-color: var(--gold); }
}
.legal-body { min-width: 0; }
.legal-body > p:first-child {
  font-size: clamp(15px, 1.8vw, 17px); color: var(--text-mid); line-height: 1.85;
  max-width: 64ch; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border);
}
.legal-body > h2 {
  font-family: var(--font-mono); font-size: clamp(15px, 2vw, 18px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--text); margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h, 64px) + 24px);
}
.legal-body > h2:first-of-type { border-top: none; padding-top: 0; }
.legal-body > h2::before {
  content: ''; display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.legal-body > h3 {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text);
  margin: 24px 0 10px;
}
.legal-body p { font-size: clamp(14px, 1.6vw, 15.5px); color: var(--text-mid); line-height: 1.85; max-width: 64ch; margin-bottom: 14px; }
/* Brand list markers — same gold ◆ diamonds + numbered badges as .art-body */
.legal-body ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal-body ol { margin: 0 0 16px; padding-left: 4px; list-style: none; counter-reset: gwill-legal-li; }
.legal-body li { font-size: clamp(14px, 1.6vw, 15.5px); color: var(--text-mid); line-height: 1.85; margin-bottom: 8px; position: relative; padding-left: 18px; }
.legal-body ul > li::before { content: '◆'; position: absolute; left: 0; top: 0.18em; font-size: 9px; color: var(--gold); opacity: 0.75; }
.legal-body ul > li > ul > li::before { content: '◇'; opacity: 0.5; }
.legal-body ul > li > ul > li > ul > li::before { content: '▪'; font-size: 8px; }
.legal-body ol > li { counter-increment: gwill-legal-li; padding-left: 30px; }
.legal-body ol > li::before {
  content: counter(gwill-legal-li); position: absolute; left: 0; top: 0.22em;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--gold); background: var(--gold-muted); border-radius: 5px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-border);
}
.legal-body li > ul, .legal-body li > ol { margin: 7px 0 0 22px; }
.legal-body strong { color: var(--text); font-weight: 700; }
.legal-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--gold-b); }
.legal-body > blockquote {
  margin: 20px 0; padding: 16px 20px;
  background: var(--gold-muted); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px; color: var(--text); line-height: 1.7;
}
[data-theme="dark"] .legal-body > blockquote { background: rgba(245, 158, 11, 0.08); }

/* ── NEWSLETTER PAGE (page-newsletter.php) ─────────────────────────────────── */
/* ── NEWSLETTER PAGE (v1.0.114 redesign) ─────────────────────────────────── */
/* Dark hero — same grain + gold-bleed pattern as the About page */
.nl-hero {
  background: var(--dark); padding: 64px 0 56px;
  position: relative; overflow: hidden;
}
.nl-hero::after {
  content: ''; position: absolute; top: -140px; right: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 65%);
  pointer-events: none;
}
/* Thin gold accent bar below nav — subtle brand bridge */
.nl-hero::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 96px)); height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-b), transparent);
  pointer-events: none; opacity: 0.5;
}
.nl-hero-inner {
  max-width: 680px; margin-inline: auto; text-align: center; position: relative;
  padding-left: 48px; padding-right: 48px;
}
/* Brand mark + label stacked together */
.nl-hero-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.nl-hero-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--gold-b); font-size: 28px; font-weight: 800;
  text-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
}
.nl-hero-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-b);
}
.nl-hero-title {
  font-size: clamp(30px, 5.5vw, 48px); font-weight: 800;
  letter-spacing: -0.04em; color: #f0ede6; margin: 0 0 18px; line-height: 1.15;
}
.nl-hero-sub {
  font-size: 15px; font-weight: 300; color: #c9c0b0; line-height: 1.75;
  max-width: 48ch; margin: 0 auto 32px;
}
.nl-hero-form { max-width: 450px; margin-inline: auto; }
.nl-hero-form .gwill-newsletter__prompt { display: none; }
.nl-hero-form .gwill-form--newsletter__fields { display: flex; gap: 8px; align-items: stretch; }
.nl-hero-form .gwill-form__field { flex: 1; min-width: 0; }
.nl-hero-form .gwill-form input[type="email"] {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: #f0ede6; border-radius: var(--r-sm);
  padding: 13px 16px; font-size: 13.5px; width: 100%; height: 48px;
  transition: border-color var(--t), box-shadow var(--t);
  font-family: var(--font);
}
.nl-hero-form .gwill-form input[type="email"]::placeholder { color: var(--dark-dim); }
.nl-hero-form .gwill-form input[type="email"]:focus {
  border-color: var(--gold-b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); outline: none;
}
/* Autofill fix — dark context */
.nl-hero-form .gwill-form input[type="email"]:-webkit-autofill,
.nl-hero-form .gwill-form input[type="email"]:-webkit-autofill:hover,
.nl-hero-form .gwill-form input[type="email"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #100e0c inset !important;
  -webkit-text-fill-color: #f0ede6 !important;
  caret-color: #f0ede6 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.nl-hero-form .gwill-form__submit {
  background: var(--gold-btn); color: #fff; border: none; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; padding: 0 24px; height: 48px; white-space: nowrap;
  transition: background var(--t), transform var(--t); cursor: pointer;
}
.nl-hero-form .gwill-form__submit:hover { background: #92400e; transform: translateY(-1px); }
.nl-hero-form .gwill-form__status { margin-top: 12px; font-size: 12.5px; color: rgba(240, 237, 230, 0.6); }
.nl-hero-form .gwill-form__status--error { color: #f87171; }
.nl-hero-form .gwill-form__success-msg {
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac; border-radius: var(--r-sm); padding: 14px 18px; font-size: 13px;
  margin-top: 14px;
}
/* Perks — clean gold ◆ markers only (no duplicate ✓) */
.nl-hero-perks {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px; align-items: center;
}
.nl-hero-perks li {
  font-size: 13px; font-weight: 300; color: #a89f8e;
  display: flex; align-items: center; gap: 10px;
}
.nl-hero-perks li::before {
  content: '◆'; color: var(--gold); opacity: 0.7;
  font-size: 7px; flex-shrink: 0;
}
/* Editorial / about section — light bg, card-like surface */
.nl-content { padding: 40px 0 64px; }
.nl-content-inner { max-width: 680px; margin-inline: auto; }
.nl-content-inner > :first-child { margin-top: 0 !important; }
.nl-content h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text); margin: 0 0 12px;
}
.nl-content p {
  font-size: 14.5px; font-weight: 300; color: var(--text-mid); line-height: 1.8; margin-bottom: 16px;
}
.nl-content ul { margin: 0 0 18px; padding-left: 4px; }
.nl-content li {
  font-size: 14px; color: var(--text-mid); line-height: 1.8; margin-bottom: 7px;
  position: relative; padding-left: 18px; list-style: none;
}
.nl-content li::before {
  content: '◆'; position: absolute; left: 0; top: 0.28em;
  color: var(--gold); font-size: 7px;
}
.nl-content a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nl-content strong { font-weight: 700; color: var(--text); }
/* Ad slots inside nl-content — keep spacing */
.nl-content .ad-bg { margin: 28px 0; }
@media (max-width: 767px) {
  .nl-hero { padding: 44px 0 36px; }
  .nl-hero-inner { padding-left: 20px; padding-right: 20px; }
  .nl-hero::before { width: calc(100% - 40px); }
  .nl-hero-form .gwill-form--newsletter__fields { flex-direction: column; }
  .nl-hero-form .gwill-form__submit { width: 100%; justify-content: center; }
  .nl-content { padding: 28px 0 48px; }
}
.page-surface h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin: 28px 0 10px; color: var(--text); }
.page-surface h3 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--text); }
.page-surface p { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; }
.page-surface a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.page-surface ul, .page-surface ol { margin: 0 0 14px 4px; font-size: 14px; color: var(--text-mid); list-style: none; }
.page-surface ol { counter-reset: gwill-page-li; }
.page-surface li { margin-bottom: 6px; position: relative; padding-left: 18px; }
.page-surface ul > li::before { content: '◆'; position: absolute; left: 0; top: 0.2em; font-size: 9px; color: var(--gold); opacity: 0.75; }
.page-surface ul > li > ul > li::before { content: '◇'; opacity: 0.5; }
.page-surface ol > li { counter-increment: gwill-page-li; padding-left: 30px; }
.page-surface ol > li::before {
  content: counter(gwill-page-li); position: absolute; left: 0; top: 0.24em;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--gold); background: var(--gold-muted); border-radius: 5px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-border);
}

/* ── FORMS (contact) ───────────────────────────────────────────────────────── */
.gwill-form .gwill-form__field { margin-bottom: 18px; }
.gwill-form .gwill-form__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) {
  .gwill-form .gwill-form__row--2col { grid-template-columns: 1fr; gap: 0; }
}
.gwill-form input[type="text"], .gwill-form input[type="email"], .gwill-form input[type="tel"], .gwill-form textarea, .gwill-form select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; background: var(--surface); color: var(--text); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  height: 46px;
}
.gwill-form textarea { height: auto; min-height: 150px; resize: vertical; line-height: 1.6; }
/* Native select → brand select: hide the arrow, draw a gold chevron. */
.gwill-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d97706' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.gwill-form select:invalid { color: var(--text-dim); }
/* Pasted / autofilled fields keep the theme — Chrome's -webkit-autofill
   paints its own white/light-blue bg that ignores CSS; the inset shadow
   trick forces our surface + text color for autofill states. */
.gwill-form input:-webkit-autofill,
.gwill-form input:-webkit-autofill:hover,
.gwill-form input:-webkit-autofill:focus,
.gwill-form textarea:-webkit-autofill,
.gwill-form textarea:-webkit-autofill:hover,
.gwill-form textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}
[data-theme="dark"] .gwill-form input:-webkit-autofill,
[data-theme="dark"] .gwill-form input:-webkit-autofill:hover,
[data-theme="dark"] .gwill-form input:-webkit-autofill:focus,
[data-theme="dark"] .gwill-form textarea:-webkit-autofill,
[data-theme="dark"] .gwill-form textarea:-webkit-autofill:hover,
[data-theme="dark"] .gwill-form textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dark-s) inset !important;
  -webkit-text-fill-color: #f0ede6 !important;
  caret-color: #f0ede6 !important;
}
.gwill-form input:focus, .gwill-form textarea:focus, .gwill-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,119,6,0.12); }
.gwill-form label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 8px; }
.gwill-form .gwill-form__required { color: var(--gold); margin-left: 2px; }
.gwill-form .gwill-form__field-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.gwill-form__submit { background: var(--gold-btn); color: #fff; border: none; font-size: 14px; font-weight: 700; padding: 14px 28px; border-radius: var(--r-md); transition: background var(--t), transform var(--t), box-shadow var(--t); display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; appearance: none; -webkit-appearance: none; min-height: 0; box-shadow: var(--sh-gold); }
.gwill-form__submit:hover { background: #92400e; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(217,119,6,0.25); }
.gwill-form__submit:active { transform: translateY(0); }
.gwill-form__submit-loading { display: none; }
.gwill-form__submit[data-loading] { opacity: 0.7; cursor: wait; }
.gwill-form__submit[data-loading] .gwill-form__submit-text { display: none; }
.gwill-form__submit[data-loading] .gwill-form__submit-loading { display: inline; }
.gwill-form__status { margin-top: 12px; font-size: 12px; font-weight: 700; min-height: 1.4em; }
.gwill-form__status--error { color: var(--red); }
.gwill-honey { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }


/* ── COMMENTS (minimal) ────────────────────────────────────────────────────── */
.comments-area { margin-top: 40px; }
.comments-title, .comment-reply-title { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.comment-list { list-style: none; }
.comment { margin-bottom: 20px; }
.comment-list .children { list-style: none; margin: 16px 0 0 24px; }
/* Legacy server-rendered comment cards (only used if VibeComments is ever
   deactivated — the plugin brings its own .vibe-comment-body cards). */
.vibe-comment-list .comment { padding: 0; background: none; border: none; border-radius: 0; }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 12px; background: var(--surface); color: var(--text); margin-bottom: 12px;
}
.comment-form .submit { background: var(--gold); color: #fff; border: none; font-size: 12px; font-weight: 700; padding: 10px 20px; border-radius: var(--r-sm); cursor: pointer; }

/* ── LAYOUT UTILITIES ──────────────────────────────────────────────────────── */
.con { max-width: 1100px; margin: 0 auto; padding: 0 var(--con-pad); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sb-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }
.sb-layout > div { min-width: 0; } /* let the article column shrink below table min-content on mobile */
.cl-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.sg { margin-top: 56px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; } .mt48 { margin-top: 48px; }
.mb12 { margin-bottom: 12px; } .mb20 { margin-bottom: 20px; }
.mb24 { margin-bottom: 24px; }
.flex { display: flex; } .aic { align-items: center; } .jsb { justify-content: space-between; }
.g16 { gap: 16px; }
.fw3 { font-weight: 300; }
.fz11 { font-size: 11px; } .fz12 { font-size: 12px; } .fz14 { font-size: 14px; }
.cm-c { color: var(--text-mid); } .cd { color: var(--text-dim); }
.lh { line-height: 1.7; }

/* ── RESPONSIVE: tablet 768–1023px ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --con-pad: 28px; --header-h: 56px; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .sb-layout, .cl-layout { grid-template-columns: 1fr 250px; gap: 24px; }
  .ftop { grid-template-columns: 1fr 1fr; }
  .hero { padding: 52px var(--con-pad) 52px; }
  .hero-h { font-size: 42px; }
  .feat { grid-template-columns: 1fr; }
  .feat-img { min-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  .stat-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .si { border-right: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); }
  .si:nth-child(2n) { border-right: none; }
  .si:nth-last-child(-n+2) { border-bottom: none; }
  /* v1.0.133: art-hd lives inside the sb-layout column — .con already
     provides the side padding; only full-width heroes need it here. */
  .phd, .about-hero { padding-left: var(--con-pad); padding-right: var(--con-pad); }
  .art-surface-pad { padding: 24px 28px 28px; }
  /* Tablet: keep the newsletter box in ROW layout (title left, form right) —
     it has ~700px of room at 768-1023px; stacking (column) is for phones
     only (see the 767px block). */
  .nl-s { flex-direction: row; align-items: center; }
  .nl-s .nl-copy, .nl-s .gwill-newsletter { width: auto; flex: 1 1 50%; min-width: 0; }
  .nl-s .gwill-form--newsletter__fields { flex-direction: row; }
  .nl-s .gwill-form__submit { width: auto; }
  .footer { padding: 36px var(--con-pad) 20px; }
  .ticker { height: 30px; }
  .ticker .ti { padding: 0 16px; height: 30px; }
}

/* ── RESPONSIVE: mobile ≤767px ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --con-pad: 20px; }
  .sh, .footer { display: none; }
  .mh { display: flex; }
  .ticker { height: 28px; }
  .ticker .ti { padding: 0 14px; height: 28px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .sb-layout, .cl-layout { grid-template-columns: 1fr; }
  .hero { padding: 40px 20px 48px; }
  .hero .con, .about-hero .con { padding-left: 0; padding-right: 0; }
  .hero-h { font-size: 30px; }
  .hero-sub { font-size: 13px; }
  .hero-acts { flex-direction: column; align-items: stretch; }
  .hero-acts .bh, .hero-acts .bhg { justify-content: center; display: flex; width: 100%; }
  .stat-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .si { border-right: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); }
  .si:nth-child(2n) { border-right: none; }
  .feat-img { min-height: 170px; font-size: 32px; }
  .feat-emoji { font-size: 32px; }
  .feat-body { padding: 24px 20px; }
  .feat-t { font-size: 18px; }
  .art-hd { padding: 24px 0 32px; }
  .art-t { font-size: 21px; }
  /* Full-bleed article on phones: strip the card chrome, let media run
     edge-to-edge, keep body text comfortably padded (readability first). */
  .art-reading-surface { border-radius: 0; border: none; box-shadow: none; background: transparent; overflow: visible; }
  .art-cover { min-height: 180px; margin-left: calc(-1 * var(--con-pad)); margin-right: calc(-1 * var(--con-pad)); width: auto; border-bottom: 1px solid var(--border-dim); border-radius: 0; }
  .art-surface-pad { padding: 24px var(--con-pad); }
  /* The body spans the full width; its text is padded, media breaks out.
     art-body pulls left by --con-pad (cancelling surface-pad padding);
     text children re-add it; media children re-add it and subtract it
     again via their own margin for a true edge-to-edge break-out. */
  .art-body { margin-left: calc(-1 * var(--con-pad)); margin-right: calc(-1 * var(--con-pad)); padding: 0; }
  .art-body > * { margin-left: var(--con-pad); margin-right: var(--con-pad); }
  .art-body > figure, .art-body > .wp-block-image, .art-body > .wp-block-gallery,
  .art-body > .wp-block-embed, .art-body > .wp-block-video, .art-body > .wp-block-audio,
  .art-body > .wp-block-table, .art-body > .wp-block-cover, .art-body > pre,
  .art-body > .wp-block-code, .art-body > .wp-block-pullquote, .art-body > .wp-block-quote {
    margin-left: calc(-1 * var(--con-pad)); margin-right: calc(-1 * var(--con-pad)); width: auto; max-width: none; border-radius: 0;
  }
  /* The in-content ad keeps its centered 336px box (don't let the body's
     full-bleed margins left-align it) */
  .art-body > .ad-rect { margin-left: auto; margin-right: auto; max-width: 336px; width: 100%; }
  .art-body > .wp-block-image img, .art-body > .wp-block-gallery img { border-radius: 0; }
  /* Full-bleed readability: cream page bg replaces the old white card in
     light mode, so body copy steps up a shade — theme-aware, so dark mode
     stays readable too (no hardcoded hex that breaks the dark palette) */
  .art-body { color: var(--text); }
  .art-body p, .art-body li { color: var(--art-copy, #262626); }
  .art-body figcaption, .art-body .wp-block-quote cite { color: var(--art-dim, #6b6b6b); }
  .art-body blockquote, .art-body .wp-block-pullquote { color: var(--text-mid); }
  /* v1.0.132: art-hd now lives INSIDE the sb-layout column (v1.0.130) —
     the old sibling-selector rule no longer applies; con handles padding. */
  .phd { padding: 24px 20px 20px; }
  .about-hero { padding: 32px 20px; }
  .nl-s { padding: 28px 24px; }
  /* Phones AND mini-tablets (≤767px): stack the whole box — title on top,
     form below. At 640px the row layout squeezes the h3 to 263px and wraps
     it; column is the clean layout below 768px. */
  .nl-s { flex-direction: column; align-items: stretch; }
  .nl-s .nl-copy, .nl-s .gwill-newsletter { width: 100%; max-width: none; }
  .nl-s .gwill-form--newsletter__fields { flex-direction: column; }
  .nl-s .gwill-form__submit { width: 100%; justify-content: center; height: 46px; padding: 0 20px; }
  .page-surface { padding: 24px 20px; }
  .mfooter { display: block; }
  .footer { display: none; }
  .error-404 { padding: 60px 20px 80px; }
  .ad-rect { height: 250px; }
  .ad-feed { height: 120px; }
}

/* Desktop / tablet default above 767 */
@media (min-width: 768px) {
  .mh, .mfooter, .mno { display: none; }
}