/*
Theme Name:  MoneyPantry
Theme URI:   https://moneypantry.com
Author:      Saeed Darabi
Author URI:  https://moneypantry.com/author/saeed-darabi/
Description: Standalone WordPress theme for MoneyPantry.com. Built for performance, conversions, and addictive browsing. Newsreader + DM Sans. Palette: Deep Navy + Gold + Coral.
Version:     2.0.7
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:     All Rights Reserved
License URI: https://moneypantry.com
Text Domain: moneypantry
Tags:        personal-finance, blog, custom-colors, custom-logo, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/* ============================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Utility Classes
   5.  Accessibility
   6.  Layout — Wrappers & Containers
   7.  Reading Progress Bar
   8.  Announcement Bar
   9.  Navigation — Desktop
   10. Navigation — Mobile
   11. Hero Section
   12. Hero — "Not Sure Where to Start" Band
   13. Ticker Strip
   14. About / E-E-A-T Section
   15. Live Reader Bar
   16. Best Of — Category Cards
   17. Stats Section
   18. Reader Wins / Testimonials
   19. Newsletter CTA Section
   20. Latest Posts Grid
   21. Social Follow Section
   22. Urgent Help Strip
   23. Footer
   24. Scroll To Top Button
   25. Mobile Sticky CTA Bar
   26. Single Post — Layout
   27. Single Post — Content Typography
   28. Single Post — Sidebar
   29. Single Post — Related Posts
   30. Archive / Category Templates
   31. Page Template
   32. Search Results
   33. 404 Page
   34. Comments
   35. Widgets
   36. Ad Injection Containers
   37. Skeleton Screens
   38. Reveal Animations
   39. Admin Bar Offset
   40. WordPress Core — Alignments & Embeds
   41. Responsive — Global Breakpoints
   ============================================================================ */


/* ============================================================================
   0. SELF-HOSTED FONTS (@font-face)
   Loaded from /fonts/ — no external Google Fonts dependency.
   DM Sans: body text, UI elements. Newsreader: headings, blockquotes.
   ============================================================================ */

/* dm-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}

/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}

/* dm-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/dm-sans-v17-latin-italic.woff2') format('woff2');
}

/* dm-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}

/* dm-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}

/* dm-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

/* dm-sans-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/dm-sans-v17-latin-800.woff2') format('woff2');
}

/* dm-sans-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/dm-sans-v17-latin-900.woff2') format('woff2');
}

/* newsreader-italic (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/newsreader-v26-latin-italic.woff2') format('woff2');
}

/* newsreader-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/newsreader-v26-latin-600.woff2') format('woff2');
}

/* newsreader-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/newsreader-v26-latin-700.woff2') format('woff2');
}

/* newsreader-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/newsreader-v26-latin-700italic.woff2') format('woff2');
}


/* ============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   All colors, shadows, and radii reference these variables.
   Never use hardcoded hex values outside this block.
   ============================================================================ */

:root {

  /* ── Palette: Deep Navy + Gold + Coral (v13) ── */
  --navy:         #0F172A;
  --navy-mid:     #1E293B;
  --navy-soft:    #334155;
  --navy-muted:   #475569;

  --gold:         #F0A500;
  --gold-lt:      #FFB92A;
  --gold-dim:     #8B6914; /* accessible deep bronze — passes WCAG AA on warm-white + white */
  --gold-pale:    #FFF8E0;
  --gold-glow:    rgba(240, 165, 0, 0.18);
  --gold-hover:   #996515; /* hover state — noticeably darker than gold-dim for clear visual shift */

  --link:         #1E40AF; /* navy-blue — content links only, high contrast, universally recognized */
  --link-hover:   #1e3a8a; /* darker navy-blue for hover state */

  --coral:        #E8522A; /* brand accent — buttons, CTAs, urgency highlights */
  --coral-lt:     #F56A40;
  --coral-pale:   #FEF0EB;

  --warn:         #9A3412; /* warning/caution text — pattern boxes, alerts */
  --warn-dark:    #7C2D12; /* warning headings — high contrast on light backgrounds */
  --warn-bg:      #FFFBF0; /* warning background tint */
  --error:        #DC2626; /* system error / cons — bullet dots, validation states */

  --forest:       #166534; /* functional only — success states, savings confirmations, not a brand color */
  --forest-mid:   #14532D;
  --forest-pale:  #DCFCE7;

  --green:        #22c55e;  /* live/active signal — ticker dot, live bar */
  --blue-lt:      #93c5fd;  /* light blue — newsletter badge on dark bg */

  --warm-white:   #FAFAF8;
  --paper:        #F1F5F9;
  --paper-dk:     #E2E8F0;
  --white:        #FFFFFF;

  --ink:          #0F172A;
  --ink-mid:      #334155;
  --ink-soft:     #64748B;

  /* ── Rules & Shadows — all use navy base, never pure black ── */
  --rule:         rgba(15, 23, 42, 0.08);
  --sh-sm:        0 2px 14px rgba(15, 23, 42, 0.07);
  --sh:           0 6px 36px rgba(15, 23, 42, 0.11);
  --sh-lg:        0 20px 64px rgba(15, 23, 42, 0.18);
  --sh-gold:      0 8px 32px rgba(240, 165, 0, 0.25);

  /* ── Border Radii ── */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* ── Typography ── */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── Transitions ── */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:       0.18s;
  --t-mid:        0.3s;
  --t-slow:       0.65s;

  /* ── Layout ── */
  --max-width:    1200px;
  --nav-height:   66px;

}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 112.5%; /* 18px base */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--warm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Single post pages get a pure white background — cleaner reading experience */
body.single-post {
  background-color: var(--white);
}

body.single-post .site-main,
body.single-post .site-container {
  background-color: var(--white);
}

/* Remove list styles on nav/utility lists */
ul, ol {
  list-style: none;
}

/* Keep list styles in post content */
.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 1.5em;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gold-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease, text-decoration-thickness var(--t-fast) ease;
}

a:hover {
  color: var(--gold-hover);
  text-decoration-thickness: 1px;
}

a img {
  border: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

input, textarea, select {
  font-family: var(--font-body);
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

::selection {
  background-color: var(--gold-pale);
  color: var(--navy);
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.1px;
  color: var(--ink);
}

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.25rem); letter-spacing: -0.15px; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); letter-spacing: 0; }
h4 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
h5 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
h6 { font-size: 0.9rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

/* Shared eyebrow / section label style */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--gold);
  margin-bottom: 10px;
  font-family: var(--font-body);
  text-decoration: none;
}

/* Shared section headline */
.sh {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.sh em {
  font-style: italic;
  color: var(--gold);
}

/* Shared section sub-paragraph */
.sp {
  font-size: 1rem;
  color: var(--ink-mid);
  font-weight: 300;
  max-width: 520px;
  line-height: 1.75;
}

/* Highlighter mark style */
.hl {
  background: linear-gradient(
    120deg,
    rgba(240, 165, 0, 0) 0%,
    rgba(240, 165, 0, 0.25) 15%,
    rgba(240, 165, 0, 0.20) 85%,
    rgba(240, 165, 0, 0) 100%
  );
  padding: 1px 5px 2px;
  border-radius: 3px;
  font-style: normal;
}


/* ============================================================================
   4. UTILITY CLASSES
   ============================================================================ */

.wrap {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-pad {
  padding-top: 88px;
  padding-bottom: 88px;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Grain texture overlay — applied via .grain class */
.grain {
  position: relative;
  overflow: hidden;
}

.grain::after {
  content: '';
  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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
  opacity: 0.55;
  z-index: 0;
  border-radius: inherit;
}

.grain > * {
  position: relative;
  z-index: 1;
}

/* Button — coral primary */
.btn-coral {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    transform 0.2s var(--ease-spring),
    box-shadow var(--t-mid) ease;
  box-shadow: 0 4px 28px rgba(232, 82, 42, 0.45);
}

.btn-coral:hover {
  background: var(--coral-lt);
  color: var(--white);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(232, 82, 42, 0.55);
  text-decoration: none;
}

/* Button — ghost on dark */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    transform 0.2s var(--ease-spring);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
  transform: translateY(-3px) scale(1.02);
  text-decoration: none;
}

/* Button — gold solid */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    transform 0.2s var(--ease-spring),
    box-shadow var(--t-mid) ease;
  box-shadow: var(--sh-gold);
}

.btn-gold:hover {
  background: var(--gold-lt);
  color: var(--navy);
  transform: translateY(-2px) scale(1.02);
  text-decoration: none;
}


/* ============================================================================
   5. ACCESSIBILITY
   ============================================================================ */

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 99999;
}

.skip-link:focus {
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Focus styles — keyboard nav */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================================
   6. LAYOUT — WRAPPERS & CONTAINERS
   ============================================================================ */

.site-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

/* Full-width override — used on homepage and archive pages */
.full-width-content .content-sidebar-wrap {
  max-width: 100%;
}

/* Content + Sidebar layout for single posts / pages */
.content-sidebar-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

.content-area {
  min-width: 0; /* prevent overflow in grid */
}

/* Section spacing — reusable */
section.mp-section {
  padding: 88px 24px;
}

/* Alternating section backgrounds for visual rhythm */
.bg-white      { background-color: var(--white); }
.bg-warm-white { background-color: var(--warm-white); }
.bg-paper      { background-color: var(--paper); }
.bg-navy       { background-color: var(--navy); }
.bg-gold-pale  { background-color: var(--gold-pale); }
.bg-forest-pale{ background-color: var(--forest-pale); }


/* ============================================================================
   7. READING PROGRESS BAR
   ============================================================================ */

.prog-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gold); /* solid — brief: all bars = one solid color */
  z-index: 99999; /* must exceed nav (100) and any backdrop-filter stacking context */
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(240, 165, 0, 0.6);
  will-change: width; /* promotes to own compositor layer — prevents nav backdrop-filter from painting over it */
}


/* ============================================================================
   8. ANNOUNCEMENT BAR
   ============================================================================ */

.ann-bar {
  background: var(--navy);
  padding: 9px 48px 9px 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  position: relative;
  z-index: 101;
  font-family: var(--font-body);
}

.ann-bar a {
  color: var(--gold-lt);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 185, 42, 0.35);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.ann-bar a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.ann-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  transition: color var(--t-fast);
  font-family: var(--font-body);
}

.ann-close:hover {
  color: rgba(255, 255, 255, 0.8);
}


/* ============================================================================
   9. NAVIGATION — DESKTOP
   ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 245, 249, 0.98); /* cool paper tint — consistent across all pages */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--t-mid) ease, background var(--t-mid) ease;
}

/* Inner pages get a soft always-on shadow for separation */
body:not(.home) .site-header {
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06);
}

body:not(.home) .site-header.scrolled {
  box-shadow: 0 4px 28px rgba(15, 23, 42, 0.12);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.site-logo img {
  height: 38px;
  width: auto;
  display: block;
}

/* Text logo fallback when no image logo set */
.logo-text {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 900;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.5px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.logo-text em {
  font-style: normal;
  color: var(--gold);
}

/* Logo shimmer sweep */
.logo-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(240, 165, 0, 0.35), transparent);
  animation: logoShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes logoShimmer {
  0%, 70% { left: -100%; }
  85%      { left: 150%; }
  100%     { left: 150%; }
}

/* Primary nav links */
.primary-nav {
  display: flex;
  gap: 2px;
}

.primary-nav li a {
  text-decoration: none;
  color: var(--ink-mid);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 15px 9px;
  position: relative;
  transition: color var(--t-fast);
  display: block;
}

/* Gold underline that scales in from center on hover */
.primary-nav li a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 15px;
  right: 15px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.25s var(--ease-spring);
}

.primary-nav li a:hover,
.primary-nav li a:focus {
  color: var(--navy);
}

.primary-nav li a:hover::after,
.primary-nav li a:focus::after {
  transform: scaleX(1);
}

/* Current page — persistent gold bar */
.primary-nav li.current-menu-item > a,
.primary-nav li.current-menu-ancestor > a {
  color: var(--navy);
  font-weight: 600;
}

.primary-nav li.current-menu-item > a::after,
.primary-nav li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Nav right — search + hamburger */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Search bar */
.nav-search-wrap {
  position: relative;
}

.nav-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  color: var(--ink-soft);
  z-index: 1;
}

.nav-search {
  background: var(--paper);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 36px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  width: 160px;
  transition:
    border-color 0.25s ease,
    width var(--t-mid) ease,
    background 0.2s ease,
    box-shadow 0.25s ease;
}

.nav-search:focus {
  border-color: var(--gold);
  background: var(--white);
  width: 210px;
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.12);
}

.nav-search::placeholder {
  color: var(--ink-soft);
}


/* ============================================================================
   10. NAVIGATION — MOBILE
   ============================================================================ */

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  flex-shrink: 0;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger → X animation */
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Full-screen mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--warm-white);
  z-index: 99;
  padding: 28px 24px;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--rule);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--t-fast), padding-left var(--t-fast);
}

.mobile-menu a:hover {
  color: var(--gold);
  padding-left: 6px;
}

/* Mobile menu — newsletter CTA at bottom */
.mob-nl-cta {
  margin-top: 20px;
  background: var(--coral) !important;
  color: var(--white) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-weight: 800 !important;
  justify-content: center !important;
  font-size: 15px !important;
  border-bottom: none !important;
  text-align: center;
}

.mob-nl-cta:hover {
  background: var(--coral-lt) !important;
  color: var(--white) !important;
  padding-left: 20px !important;
}

/* Show hamburger, hide desktop nav on small screens */
@media (max-width: 820px) {
  .primary-nav,
  .nav-search-wrap {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}


/* ============================================================================
   11. HERO SECTION
   ============================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
}

/* Radial gradient light overlays */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 35%, rgba(240, 165, 0, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(232, 82, 42, 0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Parallax background image layer */
.hero-bg {
  position: absolute;
  inset: 0;
  will-change: transform;
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.82) 50%, rgba(30, 41, 59, 0.75) 100%),
    var(--hero-bg-img, url('')) center / cover no-repeat;
  /* --hero-bg-img is set by Customizer via inline style on this element */
}

/* Floating particles */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: particleDrift var(--dur, 12s) var(--delay, 0s) ease-in infinite;
}

.particle:nth-child(1)  { left: 8%;  --dur: 14s; --delay: 0s;   width: 2px; height: 2px; }
.particle:nth-child(2)  { left: 18%; --dur: 11s; --delay: 2s; }
.particle:nth-child(3)  { left: 31%; --dur: 16s; --delay: 4s;   width: 2px; height: 2px; background: var(--coral); }
.particle:nth-child(4)  { left: 44%; --dur: 13s; --delay: 1s; }
.particle:nth-child(5)  { left: 57%; --dur: 15s; --delay: 3s;   width: 2px; height: 2px; }
.particle:nth-child(6)  { left: 68%; --dur: 12s; --delay: 5s;   background: var(--coral); }
.particle:nth-child(7)  { left: 79%; --dur: 14s; --delay: 2.5s; width: 2px; height: 2px; }
.particle:nth-child(8)  { left: 91%; --dur: 11s; --delay: 1.5s; }

@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  85%  { opacity: 0.3; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* Hero inner grid */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 110px 24px 100px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 72px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  animation: heroIn 0.65s 0s var(--ease-out) both;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
  animation: heroIn 0.65s 0.08s var(--ease-out) both;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-lt);
  display: block;
  filter: drop-shadow(0 0 20px rgba(240, 165, 0, 0.35));
}

.hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  max-width: 460px;
  margin-bottom: 38px;
  line-height: 1.78;
  animation: heroIn 0.65s 0.24s var(--ease-out) both;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: heroIn 0.65s 0.32s var(--ease-out) both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Hero category pills — gold fill sweep (Option B) */
.hero-cat-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  animation: heroIn 0.65s 0.32s var(--ease-out) both;
}

.hero-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Gold flood — slides in from left on hover */
.hero-cat-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  border-radius: var(--radius-pill);
  transform: translateX(-105%);
  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: -1;
}

.hero-cat-pill:hover {
  color: var(--navy);
  border-color: var(--gold);
}

.hero-cat-pill:hover::before {
  transform: translateX(0);
}

/* Emoji bounces on hover */
.hero-cat-pill .pill-emoji {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cat-pill:hover .pill-emoji {
  transform: scale(1.3) rotate(-5deg);
}

@media (max-width: 560px) {
  .hero-cat-pills {
    flex-direction: column;
    gap: 10px;
  }
  .hero-cat-pill {
    justify-content: center;
  }
}


/* Floating quick-nav card (desktop only) */
.hero-card {
  background: rgba(250, 250, 248, 0.98);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: heroIn 0.7s 0.4s var(--ease-out) both, floatCard 7s 1s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(0.3deg); }
}

.hc-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.hc-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hci {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition:
    background var(--t-fast),
    transform 0.25s var(--ease-spring),
    box-shadow var(--t-mid);
  position: relative;
  overflow: hidden;
}

.hci::after {
  content: '→';
  position: absolute;
  right: 14px;
  color: var(--ink-soft);
  font-size: 13px;
  transition: transform var(--t-mid), color var(--t-mid);
}

.hci:hover {
  background: var(--paper-dk);
  transform: translateX(5px);
  box-shadow: var(--sh-sm);
  text-decoration: none;
}

.hci:hover::after {
  transform: translateX(4px);
  color: var(--gold);
}

.hci-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}

.hci.earn .hci-icon { background: var(--forest-pale); }
.hci.save .hci-icon { background: var(--gold-pale); }
.hci.free .hci-icon { background: var(--coral-pale); }

.hci-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.hci-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.hc-divider {
  height: 1px;
  background: var(--rule);
  margin: 16px 0;
}

.hc-stats {
  display: flex;
}

.hcs {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  position: relative;
}

.hcs:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--rule);
}

.hcs-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.5px;
  line-height: 1;
}

.hcs-lbl {
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 3px;
}

/* Responsive hero */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px 64px;
  }

  .hero-card {
    display: none;
  }
}


/* ============================================================================
   12. TICKER STRIP
   ============================================================================ */

.ticker-wrap {
  background: var(--navy-mid);
  overflow: hidden;
  padding: 11px 0;
  border-top: 1px solid var(--navy-soft);
  border-bottom: 1px solid var(--navy-soft);
  display: flex;
  align-items: center;
}

/* LIVE badge — pinned to left, never scrolls */
.ticker-live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 18px;
  flex-shrink: 0;
  border-right: 1px solid var(--navy-soft);
  margin-right: 4px;
  z-index: 2;
  background: var(--navy-mid); /* covers scrolling content as it slides under */
}

.ticker-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green); /* green — signals live/active */
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0.7); opacity: 1; }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94, 0);  opacity: 0.85; }
}

.ticker-live-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--green);
  text-transform: uppercase;
}

.ticker-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
  width: max-content;
  /* overflow: visible — clipping is handled by .ticker-wrap only.
     overflow: hidden here was cutting off the last pill mid-render. */
}

.ticker-inner:hover {
  animation-play-state: paused;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition:
    color var(--t-fast),
    transform 0.2s var(--ease-spring);
  flex-shrink: 0;
  position: relative;
}

/* Underline flash — gold line slides in from left on hover */
.ticker-item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}

.ticker-item:hover {
  color: var(--gold-lt);
  transform: translateY(-2px);
  text-decoration: none;
}

.ticker-item:hover::after {
  transform: scaleX(1);
}

.ticker-item .ti-tag {
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ticker-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--navy-soft);
  flex-shrink: 0;
}


/* ============================================================================
   15. LIVE READER BAR
   ============================================================================ */

/* ============================================================================
   16. BEST OF — CATEGORY CARDS
   ============================================================================ */

.cats-s {
  background: var(--paper);
  padding: 88px 24px;
  content-visibility: auto;
  contain-intrinsic-size: 0 700px;
}

.cats-hdr {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.cats-hdr .sh {
  text-align: center;
}

.cats-hdr .sp {
  max-width: 100%;
  text-align: center;
}

.cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch; /* all cards stretch to the height of the tallest one */
}

/* Force 1-col on tablet/mobile — NEVER 2-col */
@media (max-width: 980px) {
  .cats-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
  }
}

/* Card container */
/* Card — navy background, same for all 3, no coloured header zone */
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--navy-mid);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  width: 100%;
  transition:
    box-shadow 0.3s var(--ease-spring),
    transform 0.3s var(--ease-spring);
}

.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.28);
}

/* Centred header: icon above, name + gold rule below */
.cat-head {
  padding: 28px 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cat-icon {
  font-size: 32px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}

.cat-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
}

/* Gold underline rule beneath category name */
.cat-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Body: links fill space, CTA always pins to bottom */
.cat-body {
  padding: 18px 26px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cat-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1; /* pushes CTA to bottom */
}

.cat-links li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--t-fast), padding-left 0.15s;
}

.cat-links li:last-child a { border-bottom: none; }

/* Arrow prefix on each link */
.cat-links li a::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--gold);
  flex-shrink: 0;
  margin-top: 5px;
  transition: transform var(--t-fast);
}

.cat-links li a:hover {
  color: var(--gold-lt);
  padding-left: 4px;
}

.cat-links li a:hover::before {
  transform: translateX(3px);
}

/* .arr kept for back-compat with any widget output that includes it */
.arr { display: none; }

/* Override global link colour for any raw links injected via Custom HTML widget
   inside the Best Of cards — keeps them white/dimmed on the dark background */
.cat-body a,
.cat-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--t-fast), padding-left 0.15s;
}
.cat-body a:hover,
.cat-links a:hover {
  color: var(--gold-lt);
  text-decoration: none;
}

/* Explore all CTA — pinned to bottom via margin-top: auto */
.cat-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: gap var(--t-mid), color var(--t-mid);
}

.cat-cta:hover {
  gap: 10px;
  color: var(--gold-lt);
  text-decoration: none;
}




/* ============================================================================
   17. STATS SECTION
   ============================================================================ */

.stats-s {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

.stats-s::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 85% 50%, rgba(240, 165, 0, 0.09) 0%, transparent 58%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(232, 82, 42, 0.06) 0%, transparent 55%);
  pointer-events: none;
}

.stats-head {
  text-align: center;
  padding: 72px 24px 0;
  position: relative;
  z-index: 1;
}

.stats-head .eyebrow { color: var(--gold-lt); }
.stats-head .sh      { color: var(--white); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--max-width); /* prevent bleeding to edge */
  margin: 52px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* stat-item = outer container — perspective goes here, NOT on the flipping element */
.stat-item,
.stat-box {
  padding: 0;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  perspective: 800px;
  cursor: default;
  height: 220px; /* explicit height so stat-flip height:100% resolves — min-height alone is not enough */
}

.stat-item:last-child,
.stat-box:last-child { border-right: none; }

/* stat-flip = the element that physically rotates */
.stat-flip {
  position: relative;
  width: 100%;
  height: 100%; /* works because parent now has explicit height */
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.45, 0, 0.15, 1);
}

.stat-item:hover .stat-flip { transform: rotateX(-180deg); }

/* Front and back faces — absolutely fill the flip container */
.stat-front,
.stat-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.stat-front { transform: rotateX(0deg); }
.stat-back  { transform: rotateX(180deg); }

/* Back face content */
.stat-meaning {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.6;
  font-style: italic;
  max-width: 220px;
}

/* Mobile — stack front and back vertically (screen breakpoint, not hover media) */
@media (max-width: 860px) {
  .stat-item,
  .stat-box {
    height: auto;
    perspective: none;
    border-right: none;
  }

  .stat-flip {
    transform: none !important;
    transform-style: flat;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .stat-front,
  .stat-back {
    position: relative;
    inset: auto;
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    padding: 24px 24px 20px;
  }

  .stat-back { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; }
  .stat-meaning { font-size: 13px; }
}

.stat-label { /* template uses stat-label, CSS had stat-lbl */
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
  letter-spacing: 0.2px;
}

.stat-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240, 165, 0, 0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--t-mid);
}

.stat-box:hover::after { opacity: 1; }

.stat-box:last-child { border-right: none; }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-num span { color: var(--gold); }

/* Gold flash on count-up completion */
.stat-num.flash span {
  animation: statFlash 0.6s ease;
}

@keyframes statFlash {
  0%   { color: var(--gold); }
  40%  { color: var(--white); text-shadow: 0 0 20px rgba(240, 165, 0, 0.8); }
  100% { color: var(--gold); }
}

.stat-lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
  letter-spacing: 0.2px;
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-box {
    border-right: none;
  }
}


/* ============================================================================
   18. READER WINS / TESTIMONIALS
   ============================================================================ */

.wins-s {
  background: var(--white);
  padding: 80px 24px;
}

.wins-hdr {
  text-align: center;
  margin-bottom: 48px;
}

.wins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.win-card {
  background: var(--warm-white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 30px 28px 26px;
  position: relative;
  transition:
    box-shadow var(--t-mid),
    transform var(--t-mid) var(--ease-spring);
}

.win-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-5px);
}

/* Colored accent bar at top of each card — single solid color, no gradient */
.win-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.win-card:nth-child(1) .win-accent { background: var(--gold); }
.win-card:nth-child(2) .win-accent { background: var(--coral); }
.win-card:nth-child(3) .win-accent { background: var(--forest); }

.win-quote-mark {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--gold);
  line-height: 0.7;
  margin-bottom: 16px;
  display: block;
  opacity: 0.55;
}

.win-text {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.72;
  font-style: italic;
  margin-bottom: 22px;
}

.win-text strong {
  color: var(--ink);
  font-style: normal;
}

.win-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.win-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

.win-name   { font-size: 13px; font-weight: 700; color: var(--ink); }
.win-result { font-size: 12px; color: var(--forest); font-weight: 600; margin-top: 2px; }

@media (max-width: 820px) {
  .wins-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}


/* ============================================================================
   19. NEWSLETTER CTA SECTION
   ============================================================================ */

.nl-s {
  background: var(--gold-pale);
  padding: 88px 24px;
  border-top: 1px solid var(--rule);
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.nl-eyebrow-top {
  text-align: center;
  display: block;
  margin-bottom: 20px;
}

/* Dark card — single centered column */
.nl-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 64px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Subtle radial glow */
.nl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 92% 45%, rgba(240,165,0,0.10) 0%, transparent 58%),
    radial-gradient(ellipse 40% 50% at 5%  90%, rgba(232,82,42,0.07) 0%, transparent 55%);
  pointer-events: none;
}

/* Badge pill */
.nl-badge {
  display: inline-block;
  background: rgba(96,165,250,0.15);
  color: var(--blue-lt);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

/* Inner content wrapper */
.nl-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Heading */
.nl-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Body copy */
.nl-body {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.60);
  margin: 0 auto 36px;
  max-width: 560px;
}

.nl-body strong {
  color: var(--white);
  font-weight: 700;
}

/* CTA action area */
.nl-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Big CTA button */
.nl-btn {
  display: inline-block;
  background: var(--coral);
  color: var(--white);
  text-decoration: none;
  padding: 20px 52px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 6px 0 rgba(0,0,0,0.25);
  transition:
    background var(--t-fast),
    transform 0.2s var(--ease-spring),
    box-shadow var(--t-mid);
  border: none;
  cursor: pointer;
}

.nl-btn:hover {
  background: var(--coral-lt, #f06540);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(0,0,0,0.25);
  color: var(--white);
  text-decoration: none;
}

.nl-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

/* Italic footer line below button */
.nl-footer-line {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  font-style: italic;
  margin: 0;
}

/* Trust/spam note */
.nl-trust {
  font-size: 12px;
  color: rgba(255,255,255,0.30);
  margin: 0;
  line-height: 1.4;
}

/* Embed code wrapper — ensures any pasted HTML inherits white text */
.nl-embed-wrap {
  position: relative;
  z-index: 1;
  color: var(--white);
}

.nl-embed-wrap p,
.nl-embed-wrap h1,
.nl-embed-wrap h2,
.nl-embed-wrap h3,
.nl-embed-wrap span,
.nl-embed-wrap label {
  color: var(--white);
}

.nl-embed-wrap input[type="email"],
.nl-embed-wrap input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--white);
  box-sizing: border-box;
}

.nl-embed-wrap button,
.nl-embed-wrap input[type="submit"] {
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .nl-card {
    padding: 44px 24px;
  }
  .nl-btn {
    padding: 18px 32px;
    font-size: 18px;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 840px) {
  .nl-card { padding: 44px 32px; }
}


/* ============================================================================
   20. LATEST POSTS GRID
   ============================================================================ */

.posts-s {
  background: var(--warm-white);
  padding: 88px 24px;
}

.posts-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.posts-view-all {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: gap var(--t-mid), color var(--t-fast);
  flex-shrink: 0;
}

.posts-view-all:hover {
  color: var(--gold);
  gap: 9px;
}

/* Latest posts section (front-page.php → template-parts/homepage/latest-posts.php) */

/* ── Band 1: heading strip (navy-mid, full viewport width) ── */
.latest-hed-band {
  background: var(--navy-mid);
  padding: 40px 24px 36px;
  border-top: 3px solid var(--gold);
}

.latest-hed-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.latest-eyebrow { color: var(--gold); }

.latest-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 0;
}

/* ── Band 2: masonry grid on warm-white ── */
.latest-s {
  background: var(--warm-white);
  padding: 48px 24px 72px; /* matches after-post-cards padding */
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* 3-column grid, collapses to 2, then 1 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Post card */
.post-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border: 1.5px solid transparent;
  box-shadow: var(--sh-sm);
  transition:
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid),
    border-color var(--t-fast);
}

.post-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sh-lg);
  border-color: rgba(240, 165, 0, 0.22);
  text-decoration: none;
}

/* Post card image */
.post-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--paper);
}

.post-img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-card:hover .post-img-inner {
  transform: scale(1.06);
}

.post-img-emoji {
  font-size: 52px;
  opacity: 0.18;
  position: relative;
  z-index: 1;
}

.post-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.60) 0%, transparent 55%);
  z-index: 2;
}

/* Category pill on image */
.post-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--t-fast);
}

.post-cat:hover {
  background: var(--gold-lt);
  text-decoration: none;
}

/* Reading time badge on image */
.post-read-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(15, 23, 42, 0.72);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

/* Post card text body */
.post-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.38;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.post-excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Post meta — date, author */
.post-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.pm-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-soft);
}

@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr; /* 3-col → 1-col, no 2-col stop */
  }
}


/* ============================================================================
   21. SOCIAL FOLLOW SECTION
   ============================================================================ */

.social-s {
  background: var(--navy);
  padding: 60px 24px;
  content-visibility: auto;
  contain-intrinsic-size: 0 460px;
}

/* Narrower container — 4 compact cards feel tight and intentional */
.social-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.social-inner .eyebrow {
  color: var(--gold-lt);
  justify-content: center;
}

.social-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.25rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.social-inner p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 38px;
  font-weight: 400;
}

/* 4-col single row on desktop */
.social-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ── Flip card container ──────────────────────────────────────────── */
/* The <a> tag is the outer container — perspective goes here */
.social-card {
  display: block;
  text-decoration: none;
  height: 160px;
  perspective: 900px;
  border-radius: 18px;
  position: relative;
}

/* sc-inner = the element that actually rotates (preserve-3d lives here) */
.social-card .sc-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.45, 0, 0.15, 1);
  border-radius: 18px;
}

.social-card:hover .sc-inner {
  transform: rotateY(-180deg);
}

/* Front and back faces absolutely fill the inner wrapper */
.social-card .sc-front,
.social-card .sc-back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face — visible by default */
.social-card .sc-front {
  transform: rotateY(0deg);
}

/* Back face — starts flipped */
.social-card .sc-back {
  transform: rotateY(180deg);
}

/* ── Brand colours — front ───────────────────────────────────────── */
.social-card.pinterest .sc-front { background: #E60023; }
.social-card.facebook  .sc-front { background: #1877F2; }
.social-card.instagram .sc-front { background: #C13584; }
.social-card.twitter   .sc-front { background: #14171A; border: 1px solid rgba(255,255,255,0.12); }

/* ── Brand colours — back (slightly darker for depth) ────────────── */
.social-card.pinterest .sc-back { background: #B8001C; }
.social-card.facebook  .sc-back { background: #0F5FD4; }
.social-card.instagram .sc-back { background: #9B2770; }
.social-card.twitter   .sc-back { background: #000000; border: 1px solid rgba(255,255,255,0.12); }

/* ── Front face content ──────────────────────────────────────────── */
.sc-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  flex-shrink: 0;
}

.sc-icon svg {
  width: 28px;
  height: 28px;
}

.sc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.2px;
}

/* Tagline removed — descriptions were inaccurate and cluttered the cards */
.sc-tagline {
  display: none;
}

/* ── Back face content ───────────────────────────────────────────── */
.sc-follow-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.sc-handle {
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.2px;
}

.sc-cta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 14px;
  border-radius: 20px;
  transition: background 0.2s;
}

.social-card:hover .sc-cta {
  background: rgba(255, 255, 255, 0.25);
}

/* Mobile — single column stack */
@media (max-width: 580px) {
  .social-cards {
    grid-template-columns: 1fr;
  }

  .social-card {
    height: 140px;
  }
}


/* ============================================================================
   22. URGENT HELP STRIP
   ============================================================================ */

.urgent-strip {
  background: var(--navy-mid);
  padding: 22px 24px;
  border-top: 1px solid var(--navy-soft);
}

.urgent-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.urgent-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.urgent-text {
  flex: 1;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.5;
  min-width: 200px;
}

.urgent-text strong {
  color: rgba(255, 255, 255, 0.90);
}

.urgent-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.urgent-link {
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-lt);
  background: rgba(240, 165, 0, 0.09);
  border: 1px solid rgba(240, 165, 0, 0.18);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.urgent-link:hover {
  background: rgba(240, 165, 0, 0.18);
  color: var(--gold);
  border-color: rgba(240, 165, 0, 0.35);
  text-decoration: none;
}


/* ============================================================================
   23. FOOTER
   ============================================================================ */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.42);
}

/* Single solid gold rule at the very top — no gradient anywhere */
.site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--gold);
}

.foot-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 68px 24px 52px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Footer brand column */
.foot-brand .logo-text {
  font-size: 22px;
  display: inline-block;
  margin-bottom: 14px;
  color: var(--white);
}

.foot-brand .logo-text em { color: var(--gold); }

/* Suppress shimmer in footer */
.foot-brand .logo-text::after { display: none; }

.foot-brand p {
  font-size: 13.5px;
  line-height: 1.72;
  max-width: 280px;
  color: rgba(255, 255, 255, 0.42);
}

/* Footer social icons */
.foot-social {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.foot-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    background var(--t-fast),
    transform 0.2s var(--ease-spring);
}

.foot-social a:hover {
  background: var(--gold);
  transform: scale(1.15);
}

.foot-social a svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.62); }
.foot-social a:hover svg { fill: var(--navy); }

/* Col 1 site links — small utility nav below social icons */
.foot-site-links {
  margin-top: 24px;
}

.foot-site-links-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
}

.foot-site-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.foot-site-links ul a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: block;
}

.foot-site-links ul a:hover {
  color: var(--gold-lt);
  padding-left: 5px;
}

/* Col 4 book image */
.foot-book-img {
  display: inline-block;
  margin-top: 14px;
  opacity: 0.88;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.foot-book-img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.foot-book-img img {
  display: block;
  max-width: 140px;
  height: auto;
  border-radius: 4px;
}

/* Footer nav columns */
.foot-col h4 {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.foot-col h4 + h4 { margin-top: 28px; }

.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foot-col ul a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13.5px;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: block;
}

.foot-col ul a:hover {
  color: var(--gold-lt);
  padding-left: 5px;
}

/* ── Normalise any block/widget content dropped into footer columns ──────────
   Covers Gutenberg paragraph, heading, list, image, and Custom HTML blocks.
   Goal: everything inherits the footer's muted-white palette automatically,
   so you can paste HTML from the old theme widgets without extra styling.     */

.foot-col,
.foot-col .widget {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.72;
}

/* All headings inside footer cols — match the existing h4 style */
.foot-col h1,
.foot-col h2,
.foot-col h3,
.foot-col h4,
.foot-col h5,
.foot-col h6,
.foot-col .widget-title {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px;
  line-height: 1.3;
}

.foot-col h1 + h1, .foot-col h2 + h2, .foot-col h3 + h3,
.foot-col h4 + h4, .foot-col h5 + h5, .foot-col h6 + h6 {
  margin-top: 28px;
}

/* All paragraph text */
.foot-col p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.72;
  margin: 0 0 10px;
}

.foot-col p:last-child { margin-bottom: 0; }

/* All links — override global gold+underline */
.foot-col a,
.foot-col ul a,
.foot-col ol a,
.foot-col p a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 13.5px;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: block;
}

.foot-col a:hover,
.foot-col ul a:hover,
.foot-col ol a:hover,
.foot-col p a:hover {
  color: var(--gold-lt);
  padding-left: 5px;
  text-decoration: none;
}

/* Inline links inside paragraphs shouldn't be block or shift on hover */
.foot-col p a {
  display: inline;
}

.foot-col p a:hover { padding-left: 0; }

/* Lists */
.foot-col ul,
.foot-col ol {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Images */
.foot-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Footer bottom bar */
.foot-bot {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.72;
}

.foot-bot a {
  color: rgba(255, 255, 255, 0.34);
  text-decoration: none;
  transition: color var(--t-fast);
}

.foot-bot a:hover { color: var(--gold-lt); }

/* Footer responsive */
@media (max-width: 1024px) {
  /* Tablet: brand full width on top, 3 widget cols below */
  .foot-top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding: 48px 24px 40px;
  }
  .foot-brand {
    grid-column: 1 / -1; /* span all 3 cols */
  }
}

@media (max-width: 860px) {
  /* iPad portrait / large phone: 2 cols */
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 48px 24px 40px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .foot-top {
    grid-template-columns: 1fr;
  }
  .foot-brand {
    grid-column: auto;
  }
}


/* ============================================================================
   23b. BOOKMARK / SAVE FOR LATER
   ============================================================================ */

/* ── Bookmark button on masonry cards ──────────────────────────────────────── */
.masonry-card {
  position: relative; /* needed so .mc-bookmark can absolute-position */
}

.mc-bookmark {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
  color: rgba(255,255,255,0.75);
}

.mc-bookmark svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Show on card hover */
.masonry-card:hover .mc-bookmark,
.masonry-card:focus-within .mc-bookmark {
  opacity: 1;
  transform: scale(1);
}

/* Always visible when saved */
.mc-bookmark[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.mc-bookmark[aria-pressed="true"] svg path {
  fill: var(--navy);
  stroke: var(--navy);
}

.mc-bookmark:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ── Floating pill ──────────────────────────────────────────────────────────── */
.bm-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--navy);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(15,23,42,0.3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.bm-pill.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.bm-pill svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.bm-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(15,23,42,0.4);
}

.bm-pill-count {
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Move pill above mobile sticky bar */
@media (max-width: 640px) {
  .bm-pill {
    bottom: 68px;
    right: 16px;
  }
}

/* ── Slide-in drawer ────────────────────────────────────────────────────────── */
.bm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 100vw;
  height: 100%;
  background: var(--white);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease;
  overflow: hidden;
}

.bm-drawer.open {
  transform: translateX(0);
  box-shadow: -8px 0 40px rgba(15,23,42,0.18);
}

.bm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.bm-drawer-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.bm-drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}

.bm-drawer-close:hover {
  background: var(--paper-dk);
}

.bm-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* Individual saved post row */
.bm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.bm-item:last-child { border-bottom: none; }

.bm-item-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--t-fast);
}

.bm-item-title:hover { color: var(--gold-dim); }

.bm-item-remove {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--t-fast), background var(--t-fast);
  line-height: 1;
}

.bm-item-remove:hover {
  color: var(--coral);
  background: rgba(232,82,42,0.08);
}

/* Empty state */
.bm-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.bm-drawer-empty svg {
  width: 36px;
  height: 36px;
  color: var(--paper-dk);
}

/* Drawer branding footer */
.bm-drawer-foot {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}

.bm-drawer-foot a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--t-fast);
}

.bm-drawer-foot a em {
  color: var(--gold-dim);
  font-style: italic;
}

.bm-drawer-foot a:hover {
  color: var(--ink);
}

/* Overlay */
.bm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.35);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bm-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================================
   24. SCROLL TO TOP BUTTON
   ============================================================================ */

.to-top {
  position: fixed;
  bottom: 84px; /* sits above the ~70px mob-sticky bar with comfortable clearance */
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 16px rgba(240, 165, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-mid),
    transform 0.2s var(--ease-spring);
  z-index: 88;
  font-weight: 800;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
}

.to-top:hover {
  transform: translateY(-3px) scale(1.1);
}

@media (min-width: 641px) {
  .to-top { bottom: 20px; }
}


/* ============================================================================
   25. MOBILE STICKY CTA BAR
   ============================================================================ */

.mob-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.97);
  padding: 12px 16px;
  z-index: 90;
  border-top: 1px solid var(--navy-soft);
}

.mob-sticky a {
  display: block;
  background: var(--coral);
  color: var(--white);
  text-align: center;
  padding: 13px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--t-fast);
}

.mob-sticky a:hover {
  background: var(--coral-lt);
  color: var(--white);
  text-decoration: none;
}

@media (max-width: 640px) {
  .mob-sticky { display: block; }
}


/* ============================================================================
   26. SINGLE POST — LAYOUT
   ============================================================================ */

.single-post-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}

/* Post header */
.entry-header {
  margin-bottom: 32px;
}

.entry-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold-pale);
  color: var(--gold-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  margin-bottom: 14px;
  transition: background var(--t-fast), color var(--t-fast);
}

.entry-cat-pill:hover {
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
}

.entry-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.entry-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.entry-meta-top a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast);
}

.entry-meta-top a:hover { color: var(--gold-hover); }

.entry-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--paper-dk);
  flex-shrink: 0;
}

/* Featured image — full width */
.entry-featured-img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
  box-shadow: var(--sh);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ============================================================================
   27. SINGLE POST — CONTENT TYPOGRAPHY
   ============================================================================ */

.entry-content {
  font-size: 18px;
  line-height: 1.82;
  color: var(--ink-mid);
  margin-bottom: 48px; /* breathing room between post content and whatever follows (ads, author box) */
}

.entry-content h2 {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rule);
}

.entry-content h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--ink);
}

.entry-content h4 {
  font-size: 1.05rem;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  color: var(--ink);
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.6em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.entry-content a {
  color: var(--gold-dim);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(139, 105, 20, 0.35);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.entry-content a:hover {
  color: var(--gold-hover);
  text-decoration-color: var(--gold-hover);
}

.entry-content strong { color: var(--ink); }

.entry-content blockquote {
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 28px;
  margin: 2em 0;
  position: relative;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.1em;
  color: var(--ink-mid);
}

/* Gold opening quote mark — brand accent, no background */
.entry-content blockquote::before {
  content: '\201C';
  position: absolute;
  left: -2px;
  top: -8px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 3.5em;
  line-height: 1;
  color: var(--gold);
  font-style: normal;
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content img {
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-sm);
  margin: 1.5rem 0;
}

.entry-content figure { margin: 2rem 0; }

.entry-content figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 8px;
}

/* Responsive overflow — replaces Make Tables Responsive plugin. Can delete that plugin. */
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.5rem 0;
  font-size: 15px;
}

.entry-content table th {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
}

.entry-content table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.entry-content table tr:nth-child(even) td {
  background: var(--paper);
}

.entry-content code {
  background: var(--paper);
  border: 1px solid var(--paper-dk);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.88em;
  font-family: 'Courier New', Courier, monospace;
  color: var(--coral);
}

.entry-content pre {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 14px;
  line-height: 1.65;
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Mid-article "You might also like" */
.mid-article-related {
  background: var(--paper);
  border: 1px solid var(--paper-dk);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin: 2.5rem 0;
}

.mid-article-related h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.mid-article-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mid-article-related ul li a {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  display: block;
  padding: 5px 0;
  transition: color var(--t-fast), padding-left var(--t-fast);
}

.mid-article-related ul li a:hover {
  color: var(--gold-dim);
  padding-left: 4px;
}

/* ── End of post meta area ── */

/* Entry footer */
.entry-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.entry-tags a {
  display: inline-block;
  background: var(--paper);
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid var(--rule);
  transition: background var(--t-fast), border-color var(--t-fast);
  margin: 3px;
}

.entry-tags a:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--gold-dim);
}


/* ============================================================================
   28. SINGLE POST — SIDEBAR
   ============================================================================ */

.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

/* Widgets inside sidebar — no extra shadow since widget already has border + shadow */
.sidebar .widget {
  box-shadow: none;
}

/* Sidebar links — clean at rest, underline on hover */
.sidebar a {
  text-decoration: none;
}

.sidebar a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--rule);
  box-shadow: var(--sh-sm);
}

/* Widget title styling handled in section 55 (Sidebar Widgets — Contained Panels) */

/* Popular posts widget */
.popular-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.popular-posts-list li a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  transition: transform 0.2s var(--ease-spring);
}

.popular-posts-list li a:hover {
  transform: translateX(3px);
}

.popular-posts-list .pp-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--paper-dk);
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
}

.popular-posts-list .pp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  transition: color var(--t-fast);
}

.popular-posts-list li a:hover .pp-title {
  color: var(--gold-dim);
}

/* Categories widget */
.widget_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.widget_categories ul li a {
  text-decoration: none;
  color: var(--ink-mid);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.widget_categories ul li a:hover {
  background: var(--paper);
  color: var(--navy);
}

/* Sidebar newsletter widget */
.widget-newsletter {
  background: var(--navy);
  border-color: var(--navy);
}

.widget-newsletter .widget-title {
  color: var(--gold-lt);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.widget-newsletter p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.widget-newsletter input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--white);
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.25s, background 0.25s;
}

.widget-newsletter input[type="email"]:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.10);
}

.widget-newsletter input::placeholder { color: rgba(255, 255, 255, 0.30); }

.widget-newsletter .nl-btn {
  width: 100%;
  padding: 13px;
}


/* ============================================================================
   29. SINGLE POST — RELATED POSTS
   ============================================================================ */

.related-posts {
  background: var(--paper);
  padding: 56px 0 72px;
  margin-top: 64px;
}

.related-posts-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.related-posts h2 {
  font-size: 1.5rem;
  margin-bottom: 28px;
  color: var(--ink);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Reuses .post-card styles defined above */

@media (max-width: 480px) {
  .related-posts-grid {
    grid-template-columns: 1fr; /* 3-col → 1-col, no 2-col */
  }
}

/* Responsive single post layout */
@media (max-width: 900px) {
  .single-post-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sidebar {
    position: static;
    margin-top: 56px;
  }
}


/* ============================================================================
   30. ARCHIVE / CATEGORY TEMPLATES
   ============================================================================ */

.archive-header {
  background: var(--navy);
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
}

.archive-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(240, 165, 0, 0.09) 0%, transparent 60%);
  pointer-events: none;
}

.archive-header .wrap { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; }

.archive-header .eyebrow { color: var(--gold-lt); }

.archive-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.archive-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  font-weight: 400;
}

/* Archive posts grid — full width, 3-col */
.archive-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Archive entry — list variant */
.archive-entry {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: transform 0.2s var(--ease-spring);
}

.archive-entry:hover { transform: translateX(4px); text-decoration: none; }

.archive-entry-thumb {
  width: 120px;
  height: 82px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.archive-entry-body h2 {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.archive-entry-body h2 a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast);
}

.archive-entry-body h2 a:hover { color: var(--gold-dim); }

.archive-entry-excerpt {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Archive pagination */
.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0;
}

.archive-pagination a,
.archive-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
  border: 1px solid var(--rule);
  color: var(--ink-mid);
  white-space: nowrap;
}

.archive-pagination a:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.archive-pagination .current {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 800;
}

@media (max-width: 560px) {
  .archive-grid {
    grid-template-columns: 1fr; /* 3-col → 1-col, no 2-col */
  }
}


/* ============================================================================
   31. PAGE TEMPLATE
   ============================================================================ */

.page-content-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

.page-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -1px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--rule);
}


/* ============================================================================
   32. SEARCH RESULTS
   ============================================================================ */

/* Search header styles in section 49 below */

.search-results-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.search-form-wrap {
  max-width: 540px;
  margin-bottom: 40px;
}

.search-form {
  display: flex;
  gap: 10px;
}

.search-form input[type="search"] {
  flex: 1;
  padding: 14px 20px;
  border: 1.5px solid var(--paper-dk);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.search-form input[type="search"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.12);
}

.search-form button {
  padding: 14px 24px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.search-form button:hover { background: var(--navy-mid); }

.no-results-msg {
  text-align: center;
  padding: 80px 24px;
  max-width: 500px;
  margin: 0 auto;
}

.no-results-msg .no-results-icon {
  font-size: 56px;
  margin-bottom: 20px;
}

.no-results-msg h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.no-results-msg p {
  color: var(--ink-soft);
  font-size: 15px;
}


/* ============================================================================
   33. 404 PAGE
   ============================================================================ */

.error-404-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.error-404-inner {
  max-width: 520px;
}

.error-404-num {
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 11rem);
  font-weight: 900;
  color: var(--paper-dk);
  line-height: 0.85;
  letter-spacing: -8px;
  margin-bottom: 24px;
}

.error-404-num span { color: var(--gold); }

.error-404-inner h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.error-404-inner p {
  color: var(--ink-soft);
  font-size: 16px;
  margin-bottom: 32px;
}


/* ============================================================================
   34. COMMENTS
   ============================================================================ */

.comments-area {
  margin-top: 96px;
  padding-top: 48px;
  border-top: 2px solid var(--rule);
}

.comments-title {
  font-size: 1.4rem;
  margin-bottom: 32px;
  letter-spacing: -0.3px;
}

/* Comment list */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
}

.comment-list li {
  margin-bottom: 0;
}

.comment {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.comment-body {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: flex-start;
}

.comment-author-avatar img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.comment-author-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.comment-date {
  font-size: 12px;
  color: var(--ink-soft);
}

.comment-content {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.72;
}

.comment-reply-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
  transition: color var(--t-fast);
}

.comment-reply-link:hover { color: var(--gold-dim); }

/* Nested replies */
.children {
  list-style: none;
  padding: 0;
  margin-left: 64px;
}

/* Comment form */
#respond {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-top: 40px;
}

#reply-title {
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 6px;
}

.comment-form-wrap input[type="text"],
.comment-form-wrap input[type="email"],
.comment-form-wrap input[type="url"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.cf-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--paper-dk);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  margin-bottom: 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* Textarea — 160px tall by default, full width, user can resize vertically */
.comment-form-wrap textarea,
.comment-form textarea,
.cf-textarea {
  width: 100%;
  min-height: 160px; /* locked decision: 160px default height */
  padding: 12px 16px;
  border: 1.5px solid var(--paper-dk);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  margin-bottom: 16px;
  resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.comment-form-wrap input:focus,
.comment-form-wrap textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.cf-input:focus,
.cf-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.12);
}

.comment-form-submit .submit {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast), transform 0.2s var(--ease-spring);
}

.comment-form-submit .submit:hover {
  background: var(--navy-mid);
  transform: translateY(-2px);
}


/* ============================================================================
   35. WIDGETS
   ============================================================================ */

/* Base widget styles defined in section 28 above.
   Additional widget-specific overrides: */

.widget_recent_entries ul,
.widget_pages ul,
.widget_meta ul,
.widget_nav_menu ul,
.widget_archive ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget_recent_entries ul li a,
.widget_pages ul li a,
.widget_nav_menu ul li a,
.widget_archive ul li a {
  text-decoration: none;
  color: var(--ink-mid);
  font-size: 14px;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: block;
  padding: 4px 0;
}

.widget_recent_entries ul li a:hover,
.widget_pages ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_archive ul li a:hover {
  color: var(--gold-dim);
  padding-left: 4px;
}

.widget_search .search-form {
  display: flex;
  gap: 8px;
}

.widget_search input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--paper-dk);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.25s;
}

.widget_search input:focus { border-color: var(--gold); }

.widget_search button {
  padding: 10px 18px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast);
}

.widget_search button:hover { background: var(--navy-mid); }

/* Email / newsletter widget (e.g. Bloom, Mailchimp) */
.enews-widget,
.enews-widget .enews {
  background: transparent;
  border: none;
  box-shadow: none;
}


/* ============================================================================
   37. SKELETON SCREENS
   ============================================================================ */

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel {
  background: linear-gradient(90deg, var(--paper) 25%, var(--paper-dk) 50%, var(--paper) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite;
  border-radius: 6px;
}

.post-card.skeleton { pointer-events: none; cursor: default; }

.post-card.skeleton .post-body h3,
.post-card.skeleton .post-excerpt,
.post-card.skeleton .post-meta,
.post-card.skeleton .post-cat,
.post-card.skeleton .post-read-time,
.post-card.skeleton .post-img-emoji,
.post-card.skeleton .post-overlay { visibility: hidden; }

.post-card.skeleton .post-img-inner { display: none; }
.post-card.skeleton .post-img { background: var(--paper); }

.post-card.skeleton {
  position: relative;
}

.post-card.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  z-index: 10;
  border-radius: 18px;
}

.post-card.skeleton .skel-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
}

.skel-img-block {
  height: 180px;
  background: linear-gradient(90deg, var(--paper) 25%, var(--paper-dk) 50%, var(--paper) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite;
  flex-shrink: 0;
}

.skel-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.skel-line {
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--paper) 25%, var(--paper-dk) 50%, var(--paper) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite;
}

.skel-line.w100 { width: 100%; }
.skel-line.w75  { width: 75%; }
.skel-line.w55  { width: 55%; }
.skel-line.w40  { width: 40%; margin-top: auto; }


/* ============================================================================
   38. REVEAL ANIMATIONS
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for best-of cards */
.stagger .cat-card:nth-child(1) { transition-delay: 0.04s; }
.stagger .cat-card:nth-child(2) { transition-delay: 0.14s; }
.stagger .cat-card:nth-child(3) { transition-delay: 0.24s; }

/* Staggered delays for wins/testimonial cards */
.stagger-wins .win-card:nth-child(1) { transition-delay: 0.04s; }
.stagger-wins .win-card:nth-child(2) { transition-delay: 0.14s; }
.stagger-wins .win-card:nth-child(3) { transition-delay: 0.24s; }

/* Staggered delays for post cards */
.stagger-posts .post-card:nth-child(1) { transition-delay: 0.04s; }
.stagger-posts .post-card:nth-child(2) { transition-delay: 0.10s; }
.stagger-posts .post-card:nth-child(3) { transition-delay: 0.16s; }
.stagger-posts .post-card:nth-child(4) { transition-delay: 0.22s; }
.stagger-posts .post-card:nth-child(5) { transition-delay: 0.28s; }
.stagger-posts .post-card:nth-child(6) { transition-delay: 0.34s; }


/* ============================================================================
   39. ADMIN BAR OFFSET
   When the WP admin bar is visible, offset sticky nav and fixed elements.
   ============================================================================ */

.admin-bar .site-header {
  top: 32px;
}

.admin-bar .mobile-menu {
  top: calc(var(--nav-height) + 32px);
}

@media (min-width: 641px) {
  .admin-bar .to-top {
    bottom: 52px; /* desktop only: 20px base + 32px admin bar */
  }
}

@media (max-width: 782px) {
  /* WP admin bar collapses to 46px on mobile */
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .mobile-menu {
    top: calc(var(--nav-height) + 46px);
  }

  body.admin-bar {
    padding-top: calc(var(--nav-height) + 46px);
  }
}


/* ============================================================================
   40. WORDPRESS CORE — ALIGNMENTS & EMBEDS
   Required classes for editor blocks and post content compatibility.
   ============================================================================ */

/* Alignment classes */
.alignleft {
  float: left;
  margin: 0.5em 1.5em 1em 0;
}

.alignright {
  float: right;
  margin: 0.5em 0 1em 1.5em;
}

.aligncenter,
.aligncenter img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  margin-left: -5%;
  margin-right: -5%;
  max-width: 110%;
}

.alignfull {
  margin-left: calc(-1 * var(--max-width) / 2);
  width: 100vw;
  max-width: 100vw;
}

/* Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.wp-caption img {
  display: block;
  width: 100%;
}

.wp-caption-text,
.wp-caption .wp-caption-text {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Responsive embeds (iframes, videos) */
.wp-block-embed,
.embed-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.wp-block-embed iframe,
.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Gutenberg block spacing */
.wp-block-separator {
  border: none;
  border-top: 2px solid var(--rule);
  margin: 2.5rem 0;
}

/* Sticky post indicator */
.sticky .entry-title::before {
  content: '📌 ';
  font-size: 0.75em;
}

/* Post password form */
.post-password-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.post-password-form input[type="password"] {
  padding: 10px 14px;
  border: 1.5px solid var(--paper-dk);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  margin-right: 10px;
  outline: none;
  transition: border-color 0.25s;
}

.post-password-form input[type="password"]:focus {
  border-color: var(--gold);
}

.post-password-form input[type="submit"] {
  padding: 10px 22px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast);
}

.post-password-form input[type="submit"]:hover {
  background: var(--navy-mid);
}


/* ============================================================================
   41. RESPONSIVE — GLOBAL BREAKPOINTS
   Final catch-all overrides for small screens.
   ============================================================================ */

@media (max-width: 768px) {

  /* ── Sticky nav: switch to position:fixed on mobile so it's always
     glued to the very top edge of the screen — no gap ever ── */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* Compensate so content doesn't sit under the fixed nav */
  body {
    padding-top: var(--nav-height);
  }

  /* When admin bar is visible on mobile, nav is pushed down 32px —
     body needs extra padding to match so content isn't hidden under it */
  body.admin-bar {
    padding-top: calc(var(--nav-height) + 32px);
  }

  /* When ann-bar is visible, hide it on mobile to keep nav at top
     (ann-bar adds confusing gap on small screens) */
  .ann-bar {
    display: none;
  }

  /* Section padding reduction */
  section.mp-section,
  .section-pad {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .cats-s,
  .nl-s,
  .posts-s,
  .wins-s {
    padding: 64px 24px;
  }

  /* Typography scale */
  .sh { font-size: clamp(1.5rem, 4.5vw, 2rem); }

  /* Ticker on small screens */
  .ticker-item { padding: 0 18px; font-size: 12px; }

  /* Footer bottom bar */
  .foot-bot { font-size: 11px; }

  /* Comments nested replies */
  .children { margin-left: 24px; }

}

@media (max-width: 480px) {

  /* Base font — explicit px avoids compounding percentage issue */
  html { font-size: 16px; }

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-inner { padding: 60px 16px 48px; }

  .nl-card { padding: 32px 20px; }

  /* Related posts — single column */
  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  /* Stats — single column */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-box { border-right: none; padding: 36px 24px; }

}

/* Print styles */
@media print {
  .site-header,
  .ann-bar,
  .ticker-wrap,
  .sidebar,
  .related-posts,
  .mob-sticky,
  .to-top,
  .prog-bar {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}


/* ============================================================================
   42. MASONRY CARD
   Used on archive, category, author, search, and 404 templates.
   ============================================================================ */

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* reduced from 24px — cards gain more of the available width */
  margin-bottom: 48px;
  width: 100%;
}

.masonry-card {
  background: var(--white);
  border-radius: var(--radius-lg); /* 14px — up from 10px, more modern presence */
  overflow: hidden;
  box-shadow: var(--sh-sm);
  /* border removed — shadow alone gives enough definition, border made cards look small/boxed */
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow var(--t-mid);
  display: flex;
  flex-direction: column;
}

.masonry-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16); /* stronger lift on hover */
}

/* Both markup patterns:
   mp_masonry_card() → <article.masonry-card><a.masonry-card-link>
   after-post.php   → <a.masonry-card> (anchor IS the card)          */
a.masonry-card,
.masonry-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit;
}

a.masonry-card:hover,
.masonry-card-link:hover { text-decoration: none !important; }

.masonry-card-img {
  aspect-ratio: 3 / 2; /* up from 16/9 — slightly taller = more visual weight */
  overflow: hidden;
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
}

.masonry-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease-out);
  margin: 0;
}

.masonry-card:hover .masonry-card-img img {
  transform: scale(1.04);
}

/* Reading time badge — top-right corner of image, subtle pill */
.mc-read-time {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(255, 255, 255, 0.90);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 3px 9px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  letter-spacing: 0.1px;
  line-height: 1.6;
}

/* Hover overlay — "Read it now" dark band slides up from bottom on desktop */
.masonry-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(15,23,42,.88) 0%, transparent 100%);
  padding: 22px 16px 14px;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-lt);
  pointer-events: none;
}

.masonry-card:hover .masonry-card-overlay {
  transform: translateY(0);
}

.masonry-card-overlay-arrow {
  transition: transform var(--t-fast);
}

.masonry-card:hover .masonry-card-overlay-arrow {
  transform: translateX(4px);
}

.masonry-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category pill — kept in CSS but NOT output in PHP for masonry cards. */
.post-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold-dim);
  background: var(--gold-pale);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  margin-bottom: 12px;
  transition: background var(--t-fast), color var(--t-fast);
  align-self: flex-start;
}

.post-cat:hover {
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
}

.masonry-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem); /* up from clamp(1rem,1.8vw,1.15rem) */
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  transition: color var(--t-fast);
  text-decoration: none;
}

.masonry-card:hover .masonry-card-title { color: var(--gold-dim); }

.masonry-card-excerpt {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  text-decoration: none;
}

.masonry-card-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t-fast), color var(--t-fast);
  margin-top: auto;
  text-decoration: none;
}

.masonry-card:hover .masonry-card-cta {
  gap: 8px;
  color: var(--gold);
}

/* Search result highlight */
.search-highlight {
  background: var(--gold-pale);
  color: var(--navy);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

/* 3-col → 1-col. No 2-col breakpoint — prevents orphaned cards */
@media (max-width: 900px) {
  .masonry-grid { grid-template-columns: 1fr; }
  .masonry-card-img { aspect-ratio: 2 / 1; }
  .masonry-card-overlay { display: none; }
  .mc-read-time { font-size: 10px; padding: 2px 7px; }
}


/* ============================================================================
   43. SINGLE POST — HEADER, META, VERIFIED BADGE
   ============================================================================ */

.post-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  align-items: start;
  background: var(--white);
}

/* No sidebar — collapse to single readable column */
.post-wrap--full {
  grid-template-columns: 1fr;
  max-width: 780px; /* optimal reading width */
}

.post-main {
  min-width: 0;
  background: var(--white);
}

.post-header {
  margin-bottom: 28px;
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.3px;
  margin-bottom: 18px;
}

.post-meta-top {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.post-meta-top a {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
}

.post-meta-top a:hover { color: var(--gold-dim); }

.post-meta-dot {
  color: var(--paper-dk);
  font-weight: 300;
  font-size: 12px;
  margin: 0 1px;
}

.post-meta-sep {
  color: var(--paper-dk);
  font-weight: 300;
}

.post-meta-affiliate {
  font-style: italic;
  font-size: 12.5px;
  opacity: 0.75;
}

/* Desktop: show full, hide compact */
.post-meta-affiliate--compact { display: none; }

/* Mobile: hide full, show compact */
@media (max-width: 640px) {
  .post-meta-affiliate--full { display: none; }
  .post-meta-affiliate--compact { display: inline; }
}

.post-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Fact-checked badge — button resets, inherits inline flow */
.post-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--forest);
  background: var(--forest-pale);
  border: 1px solid rgba(22, 101, 52, 0.2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-body);
  position: relative; /* tooltip positioned relative to this */
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* Checkmark icon inside the badge */
.vt-check {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
}

/* SVG parts use CSS so no hex values live in PHP/JS */
.vt-check-circle {
  fill: var(--forest);
}

.vt-check-mark {
  stroke: var(--white);
}

.post-verified-badge:hover,
.post-verified-badge[aria-expanded="true"] {
  background: rgba(34,197,94,0.2); /* slightly richer green on active */
  border-color: rgba(22, 101, 52, 0.4);
}

/* Tooltip box */
.vt-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  background: var(--navy);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
  text-align: left;
  white-space: normal;
}

/* Arrow pointing down toward badge */
.vt-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}

/* Show on hover (desktop) or aria-expanded (JS/mobile) */
.post-verified-badge:hover .vt-tooltip,
.post-verified-badge[aria-expanded="true"] .vt-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.vt-tooltip strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1px;
}

.vt-body {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

.vt-body a {
  color: var(--gold);
  text-decoration: none;
  transition: text-decoration var(--t-fast);
}

.vt-body a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: var(--gold);
}

.vt-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  margin-top: 2px;
  display: inline-block;
  transition: color var(--t-fast);
}

.vt-link:hover { color: var(--gold-lt); }

/* Mobile — tooltip repositions to not clip off screen edges */
@media (max-width: 600px) {
  .vt-tooltip {
    left: 0;
    transform: translateX(0) translateY(4px);
    width: 240px;
  }

  .post-verified-badge:hover .vt-tooltip,
  .post-verified-badge[aria-expanded="true"] .vt-tooltip {
    transform: translateX(0) translateY(0);
  }

  .vt-tooltip::after {
    left: 20px;
    transform: none;
  }
}

/* Featured image hidden on single posts — used only for cards/grids */
.post-featured-img { display: none; }

/* Affiliate note line */
.entry-affiliate-note {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 4px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .post-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 20px 48px;
  }

  .sidebar {
    position: static !important;
    margin-top: 48px;
  }
}


/* ============================================================================
   44. AUTHOR BOX
   ============================================================================ */

.author-box {
  display: flex;
  gap: 22px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 28px 28px 24px;
  margin-top: 48px;
  margin-bottom: 64px;
}

.author-box-avatar-wrap {
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.author-box-avatar-wrap:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.10), 0 8px 24px rgba(15, 23, 42, 0.15);
}

.author-box-avatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.10);
  display: block;
}

.author-box-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gold-dim);
  margin-bottom: 4px;
}

.author-box-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.author-box-role {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.author-box-bio {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 12px;
}

.author-box-bio a {
  color: var(--gold-dim);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast);
}

.author-box-bio a:hover {
  color: var(--gold-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.author-box-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t-fast), color var(--t-fast);
}

.author-box-link:hover {
  color: var(--gold-hover);
  gap: 8px;
  text-decoration: none;
}

@media (max-width: 540px) {
  .author-box {
    flex-direction: column;
    gap: 16px;
  }
}


/* ============================================================================
   45. AFTER-POST SECTION (Related Posts — Full Width Navy Band)
   ============================================================================ */

/* ── Band 1: heading strip ── */
.after-post-hed-band {
  background: var(--navy-mid);
  padding: 40px 24px 36px;
  border-top: 3px solid var(--gold);
}

.after-post-hed-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.after-post-hed-band .eyebrow { color: var(--gold); }

.after-post-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 0;
}

.after-post-heading em { color: var(--gold); font-style: italic; }

/* ── Band 2: cards on warm-white ── */
.after-post-cards {
  background: var(--warm-white);
  padding: 48px 24px 72px;
}

.after-post-cards-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.after-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* match masonry-grid gap */
  width: 100%;
}

/* Cards in after-post are white on warm-white — inherit base masonry-card styles */

@media (max-width: 640px) {
  .after-post-grid { grid-template-columns: 1fr; gap: 16px; }
  .after-post-hed-band { padding: 28px 20px 24px; }
  .after-post-cards { padding: 28px 16px 48px; }
}


/* ============================================================================
   46. ARCHIVE / CATEGORY INTRO (category.php + archive.php classes)
   ============================================================================ */

.archive-wrap { min-height: 60vh; }

.archive-intro {
  background: var(--navy);
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
}

.archive-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 65% at 85% 50%, rgba(240,165,0,0.08) 0%, transparent 65%);
  pointer-events: none;
}

.archive-intro-inner {
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.archive-intro .eyebrow { color: var(--gold-lt); margin-bottom: 12px; }

.archive-intro .archive-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 14px;
}

.archive-intro .archive-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

/* Paged header (page 2+) — simpler, no background */
.archive-paged-header {
  padding: 36px 24px 28px;
  border-bottom: 1px solid var(--rule);
}

.archive-paged-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.archive-paged-header .archive-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--ink);
  margin-bottom: 4px;
}

.archive-paged-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

.archive-grid-wrap {
  padding: 48px 24px 72px;
}

.no-posts {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-soft);
  font-size: 15px;
}



/* ============================================================================
   47. PAGE TEMPLATE
   ============================================================================ */

.page-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.page-inner { width: 100%; }

.page-article {}

.page-header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--rule);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 10px;
}

.page-updated {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

.page-featured-img {
  margin-bottom: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}

.page-featured-img img {
  width: 100%;
  height: auto;
  display: block;
}

.page-content { /* inherits .entry-content typography */ }

.page-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.page-links span a,
.page-links > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-mid);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.page-links span a:hover,
.page-links > a:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}


/* ============================================================================
   48. LANDING PAGE TEMPLATE
   ============================================================================ */

.landing-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 120px; /* bottom pad for sticky bar */
}

.landing-article {}

.landing-hero-img {
  margin-bottom: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.landing-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}

.landing-content { /* inherits .entry-content typography */ }

/* Sticky conversion bar */
.landing-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  border-top: 2px solid var(--gold);
  padding: 14px 24px;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.25);
}

.landing-sticky-bar.visible {
  transform: translateY(0);
}

.landing-sticky-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-sticky-text {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0;
  flex: 1;
  min-width: 160px;
}

.landing-sticky-cta {
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
}

.landing-sticky-cta:hover {
  background: var(--gold-lt);
  transform: scale(1.03);
  text-decoration: none;
  color: var(--navy);
}

.landing-sticky-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}

.landing-sticky-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

@media (max-width: 540px) {
  .landing-sticky-text { display: none; }
  .landing-sticky-inner { justify-content: center; gap: 12px; }
}


/* ============================================================================
   49. SEARCH RESULTS PAGE
   ============================================================================ */

.search-wrap { min-height: 60vh; }

.search-header { background: var(--navy); padding: 64px 24px; }

.search-header-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.search-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.search-title em { color: var(--gold); font-style: italic; }

.search-title--empty em { color: var(--coral-lt); }

/* Search form */
.search-form { width: 100%; }

.search-form-inner {
  display: flex;
  gap: 0;
  max-width: 600px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--sh);
}

.search-form-inner input[type="search"] {
  flex: 1;
  padding: 14px 18px;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}

.search-form-inner button {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast);
}

.search-form-inner button:hover { background: var(--gold-lt); }

/* Suggested search pills */
.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.search-suggestions-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
}

.search-suggestion-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.search-suggestion-pill:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  text-decoration: none;
}

/* Results grid wrapper */
.search-results-wrap {
  padding: 48px 24px 72px;
}

/* Zero results */
.search-empty { padding: 48px 24px 72px; }

.search-tips {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 36px;
  max-width: 640px;
}

.search-tips-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-dim);
  margin-bottom: 12px;
}

.search-tips-list {
  list-style: disc;
  padding-left: 1.4em;
}

.search-tips-list li {
  font-size: 14px;
  color: var(--ink-mid);
  margin-bottom: 6px;
  line-height: 1.55;
}

/* Category quick-links row */
.search-empty-cats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.sec-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1.5px solid var(--rule);
  text-decoration: none;
  transition: transform 0.25s var(--ease-spring), box-shadow var(--t-mid), border-color var(--t-fast);
  background: var(--white);
}

.sec-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  text-decoration: none;
}

.sec-card.earn  { border-color: rgba(22,101,52,0.25); }
.sec-card.save  { border-color: rgba(240,165,0,0.25); }
.sec-card.free  { border-color: rgba(232,82,42,0.25); }
.sec-card.tips  { border-color: var(--rule); }

.sec-card.earn:hover  { border-color: var(--forest); }
.sec-card.save:hover  { border-color: var(--gold); }
.sec-card.free:hover  { border-color: var(--coral); }

.sec-icon { font-size: 22px; }

.sec-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.search-empty-popular { margin-top: 8px; }

.search-empty-popular .sh {
  margin-bottom: 28px;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}


/* ============================================================================
   50. 404 PAGE
   ============================================================================ */

.error-404 { min-height: 100vh; }

/* Hero */
.err-hero {
  background: var(--navy);
  padding: 80px 24px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Floating particles */
.err-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.err-p {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.18;
  animation: errFloat 6s ease-in-out infinite;
}

.err-p:nth-child(1) { left: 12%; top: 20%; animation-delay: 0s;    animation-duration: 5.5s; }
.err-p:nth-child(2) { left: 25%; top: 65%; animation-delay: 1s;    animation-duration: 7s;   width: 4px; height: 4px; }
.err-p:nth-child(3) { left: 70%; top: 15%; animation-delay: 2s;    animation-duration: 6s;   width: 8px; height: 8px; opacity: 0.1; }
.err-p:nth-child(4) { left: 85%; top: 55%; animation-delay: 0.5s;  animation-duration: 8s;   }
.err-p:nth-child(5) { left: 50%; top: 80%; animation-delay: 3s;    animation-duration: 5s;   width: 5px; height: 5px; opacity: 0.12; }
.err-p:nth-child(6) { left: 40%; top: 30%; animation-delay: 1.5s;  animation-duration: 6.5s; width: 3px; height: 3px; }

@keyframes errFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.2); }
}

/* 404 number */
.err-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 10rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold) 0%, var(--coral) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* Pantry jar SVG */
.err-jar {
  width: 90px;
  margin: 0 auto 20px;
  animation: errWobble 3.5s ease-in-out infinite;
}

.err-jar svg { width: 100%; height: auto; }

/* SVG layer colours — CSS variables, no hardcoded hex */
.jar-lid-top  { fill: var(--gold); }
.jar-lid-band { fill: var(--gold-dim, #8B6914); }
.jar-body     { fill: var(--white); stroke: var(--paper-dk); stroke-width: 1.5; }
.jar-label    { fill: var(--gold-pale); stroke: var(--gold); stroke-width: 1.5; }
.jar-line     { fill: var(--gold-dim, #8B6914); }
.jar-text     { fill: var(--gold); opacity: 0.5; }

@keyframes errWobble {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-4deg); }
  40%       { transform: rotate(4deg); }
  60%       { transform: rotate(-2deg); }
  80%       { transform: rotate(2deg); }
}

.err-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  color: var(--white);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.err-heading em {
  color: var(--gold);
  font-style: italic;
}

.err-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  max-width: 500px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* Search bar in hero */
.err-search { margin-bottom: 14px; }

.err-search-inner {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.err-search-inner input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}

.err-search-inner button {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
}

.err-search-inner button:hover { background: var(--gold-lt); }

.err-tip {
  font-size: 12.5px;
  color: rgba(255,255,255,0.3);
  margin: 0;
}

/* Best guides cards */
.err-guides {
  background: var(--warm-white);
  padding: 72px 24px;
}

.err-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

.err-wrap--narrow {
  max-width: 760px;
}

.err-guides .sh em { color: var(--gold); font-style: italic; }
.err-guides .sp {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 36px;
}

.err-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.err-guide-card {
  background: var(--gold-pale);
  border: 1.5px solid rgba(240,165,0,0.2);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-spring), box-shadow var(--t-mid);
}

.err-guide-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh);
  text-decoration: none;
}

.egc-icon { font-size: 28px; margin-bottom: 12px; }

.egc-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 10px;
}

.egc-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 14px;
}

.egc-arrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dim);
  margin-top: auto;
  transition: gap var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.err-guide-card:hover .egc-arrow { color: var(--gold); }

/* Popular posts */
.err-popular {
  background: var(--paper);
  padding: 72px 24px;
}

.err-popular .sh em { color: var(--gold); font-style: italic; }

.err-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.err-post-pill {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-decoration: none;
  transition: transform 0.25s var(--ease-spring), box-shadow var(--t-mid), border-color var(--t-fast);
}

.err-post-pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
  border-color: var(--gold);
  text-decoration: none;
}

.epp-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
}

.epp-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  transition: color var(--t-fast);
}

.err-post-pill:hover .epp-text { color: var(--gold-dim); }

/* Rotating money fact */
.err-fact {
  background: var(--navy-mid);
  padding: 64px 24px;
}

.err-fact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.err-fact-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

.err-fact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-dim);
  margin-bottom: 16px;
}

.err-fact-text {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin-bottom: 12px;
  min-height: 64px;
}

.err-fact-text em {
  color: var(--gold-lt);
  font-style: normal;
  font-weight: 700;
}

.err-fact-source {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 16px;
}

.err-fact-cta {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,165,0,0.3);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
  margin-bottom: 20px;
}

.err-fact-cta:hover {
  color: var(--gold-lt);
  border-color: var(--gold-lt);
  text-decoration: none;
}

.err-fact-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.err-fact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.err-fact-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Quiz section */
.err-quiz {
  background: var(--warm-white);
  padding: 72px 24px 80px;
}

.err-quiz .eyebrow { color: var(--gold-dim); }
.err-quiz .sh em   { color: var(--gold); font-style: italic; }
.err-quiz .sp {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 36px;
}

.quiz-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
}

.quiz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold); /* solid — brief: all bars = one solid color */
}

/* Progress dots */
.quiz-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.qp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper-dk);
  transition: background var(--t-mid), transform var(--t-mid);
}

.qp-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}

.qp-dot.done {
  background: var(--forest);
}

/* Quiz steps */
.quiz-step { display: none; }
.quiz-step.active { display: block; }

.quiz-q {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 20px;
  text-align: center;
}

.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--warm-white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform 0.25s var(--ease-spring), box-shadow var(--t-mid);
  width: 100%;
}

.quiz-opt:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
  transform: translateX(4px);
  box-shadow: var(--sh-sm);
}

.qo-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.qo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qo-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.qo-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Quiz result */
.qr-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold-dim);
  background: var(--gold-pale);
  border: 1px solid rgba(240,165,0,0.2);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.qr-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
  display: block;
  text-align: center;
}

.qr-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  text-align: center;
}

.qr-desc {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 24px;
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.qr-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.qr-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.2s var(--ease-spring);
}

.qr-link:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  transform: translateX(4px);
  text-decoration: none;
  color: var(--ink);
}

.qr-link-icon { font-size: 1.1rem; flex-shrink: 0; }

.qr-restart {
  display: block;
  margin: 0 auto;
  background: none;
  border: 1.5px solid var(--rule);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.qr-restart:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--paper);
}

/* Footer note */
.err-foot {
  background: var(--paper);
  padding: 28px 24px;
  text-align: center;
  border-top: 1px solid var(--rule);
}

.err-foot p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

.err-foot a {
  color: var(--gold-dim);
  font-weight: 600;
}

/* 404 Responsive */
@media (max-width: 860px) {
  .err-guides-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .err-posts-grid  { grid-template-columns: 1fr; } /* 3-col → 1-col, no 2-col stop */
  .quiz-card       { padding: 28px 20px; }
}


/* ============================================================================
   51. STAT NUMBER FLASH (animations.js)
   ============================================================================ */

.stat-num.flash {
  animation: statFlash 0.7s ease forwards;
}

@keyframes statFlash {
  0%   { color: var(--gold); text-shadow: 0 0 24px rgba(240,165,0,0.6); }
  100% { color: inherit;     text-shadow: none; }
}


/* ============================================================================
   52. AS SEEN ON — verify section exists, add if missing
   ============================================================================ */

/* ============================================================================
   SITE INTRO SECTION
   Sits between ticker and As Seen On. Warm-white bg, constrained prose column.
   ============================================================================ */

.site-intro {
  background: var(--white);
  padding: 80px 24px 72px;
  border-bottom: 1px solid var(--rule);
}

/* 2-col layout: intro text left, author card right */
.site-intro-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 72px;
  align-items: center;
}

/* Left column max-width for comfortable reading */
.site-intro-left {
  max-width: 680px;
}

/* Eyebrow — "About MoneyPantry" with a leading gold dash */
.site-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
}

.site-intro-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.site-intro-heading {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.2;
}

/* Short gold bar anchors the heading */
.site-intro-rule {
  width: 48px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 0 32px;
}

/* First paragraph — slightly larger and darker to pull readers in */
.site-intro-body .intro-lead {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-mid);
  line-height: 1.75;
  margin: 0 0 18px;
}

.site-intro-body p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0 0 14px;
  font-weight: 400;
}

.site-intro-body p:last-child { margin-bottom: 0; }

/* Optional cards — hidden by default, shown only when Customizer fields are filled */
/* Closing callout */
.site-intro-closing {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-mid);
  line-height: 1.7;
  margin: 32px 0 0;
  padding: 22px 24px;
  background: var(--gold-pale);
  border-radius: 12px;
  border: 1px solid rgba(240, 165, 0, 0.25);
}

.closing-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Author card (right column) ─────────────────────────────────────────── */
.site-intro-author {
  text-align: center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 32px 24px 28px;
}

/* Circular photo — white frame, no gold ring */
.sia-photo-wrap {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  border: 4px solid var(--white);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sia-photo-wrap:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.10), 0 8px 24px rgba(15, 23, 42, 0.15);
}

.sia-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Author name */
.sia-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

/* Gold rule under the name */
.sia-rule {
  width: 36px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: 10px auto 10px;
}

/* Role */
.sia-role {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Pull quote — italic, normal weight, quiet. Not bold. */
.sia-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.7;
  margin: 0 0 14px;
  font-weight: 400 !important;
}

/* Links inside author quote — gold to match the rule accent, clean at rest */
.sia-quote a {
  color: var(--gold-dim);
  text-decoration: none;
  font-style: normal;
  font-weight: 600;
  transition: color var(--t-fast);
}

.sia-quote a:hover {
  color: var(--gold-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Responsive — stack to 1-col on tablet and below */
@media (max-width: 900px) {
  .site-intro-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .site-intro-left {
    max-width: 100%;
  }

  .site-intro-author {
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .site-intro { padding: 48px 20px 56px; }

  .site-intro-closing { padding: 18px 20px; }
}


/* ============================================================================
   AS SEEN ON
   ============================================================================ */

.as-seen-on {
  background: var(--white);
  padding: 32px 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.aso-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.aso-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.aso-logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.aso-logo {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  opacity: 0.45;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}

.aso-logo:hover { opacity: 0.8; text-decoration: none; }

.aso-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity var(--t-fast), filter var(--t-fast);
}

.aso-image:hover {
  opacity: 0.75;
  filter: grayscale(40%);
}

@media (min-width: 768px) {
  .aso-image {
    max-width: 780px;
  }
}

@media (max-width: 480px) {
  .as-seen-on {
    padding: 24px 16px;
  }
}


/* ============================================================================
   53. URGENT HELP STRIP
   ============================================================================ */

.urgent-strip {
  background: var(--coral-pale);
  border-top: 1px solid rgba(232,82,42,0.15);
  border-bottom: 1px solid rgba(232,82,42,0.15);
  padding: 14px 24px;
}

.urgent-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.urgent-icon { font-size: 1.2rem; flex-shrink: 0; }

.urgent-text {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.urgent-text strong {
  color: var(--ink); /* dark — background is coral-pale (light) */
  font-weight: 700;
}

.urgent-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.urgent-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--coral);
  background: var(--white);
  border: 1.5px solid rgba(232,82,42,0.25);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.urgent-link:hover {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  text-decoration: none;
}

@media (max-width: 600px) {
  .urgent-inner { gap: 10px; }
  .urgent-text strong { display: block; }
}


/* ============================================================================
   54. ENTRY CONTENT — LAYOUT
   ============================================================================ */

/* Content sits flush on the white single-post page — no card wrapper */
.entry-content {
  padding: 0;
}

@media (max-width: 640px) {
  .entry-content { padding: 0; }
}


/* ============================================================================
   55. SIDEBAR WIDGETS — CONTAINED PANELS (fix #27)
   Each widget has its own white panel with paper header
   ============================================================================ */

.widget {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  margin-bottom: 24px;
  padding: 0;
}

.widget:last-child { margin-bottom: 0; }

.widget-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--navy);
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  text-align: center;
}

.widget .widget-content,
.widget > ul,
.widget > div:not(.widget-title) {
  padding: 16px 18px;
}

/* Newsletter widget — navy panel */
.widget-newsletter {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}

.widget-newsletter .widget-title {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
}


/* ============================================================================
   57. SKIP TO CONTENT (Accessibility)
   Invisible to sighted users, visible on keyboard focus
   ============================================================================ */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 24px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 10000;
  transition: top var(--t-fast);
}

.skip-to-content:focus {
  top: 8px;
}


/* ============================================================================
   58. CATEGORY ARCHIVE INTRO (updated — no sub-category pills)
   ============================================================================ */

.cat-intro {
  background: var(--navy);
  padding: 64px 24px; /* unified with all other dark-band headers */
  position: relative;
  overflow: hidden;
  isolation: isolate; /* prevents hovering cards from visually entering the band */
}

.cat-intro::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 100% 50%, rgba(240,165,0,.06) 0%, transparent 65%);
  pointer-events: none;
}

.cat-intro-inner {
  max-width: 1140px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

.cat-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--gold);
  display: block; margin-bottom: 12px;
}

.cat-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 20px;
}

.cat-title em { color: var(--gold); font-style: italic; }

.cat-description {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  font-weight: 400;
}

/* Headings and paragraphs inside HTML category descriptions */
.cat-description p        { margin-bottom: 1rem; }
.cat-description p:last-child { margin-bottom: 0; }
.cat-description h2       { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--white); margin: 1.4em 0 .4em; }
.cat-description h3       { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--white); margin: 1.2em 0 .4em; }
.cat-description ul,
.cat-description ol       { padding-left: 1.4em; margin-bottom: 1rem; }
.cat-description li       { margin-bottom: .35em; }

.cat-description a { color: var(--gold-lt); text-decoration: none; }
.cat-description a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-description strong { color: rgba(255,255,255,.85); font-weight: 600; }

/* Archive grid bar — post count left only (no sort, no duplicate count) */
.archive-grid-bar {
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.archive-grid-bar strong { color: var(--ink); }

/* Archive posts wrapper — used in category.php, archive.php, author.php, search.php */
.archive-posts {
  padding: 48px 24px 64px; /* top padding = visual gap below cat-intro band */
  max-width: var(--max-width);
  margin: 0 auto;
}

.archive-posts-inner {
  width: 100%; /* was a comment only — this was the width bug */
}

@media (max-width: 640px) {
  .cat-intro { padding: 40px 20px 36px; }
}


/* ============================================================================
   59. AUTHOR ARCHIVE INTRO (fix #28 — photo left, bio right, full width)
   ============================================================================ */

.author-intro {
  background: var(--navy);
  padding: 64px 24px 64px; /* extra bottom = gap above grid, matches cat-intro */
  position: relative;
  overflow: hidden;
  isolation: isolate; /* prevents hovering masonry cards entering the band */
}

.author-intro::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 90% 40%, rgba(240,165,0,.07) 0%, transparent 65%);
  pointer-events: none;
}

.author-intro-inner {
  max-width: 1140px;
  margin: 0 auto;
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
}

/* Self-hosted photo — no Gravatar (fix #15) */
.author-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--white);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.10);
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.author-photo:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.10), 0 8px 24px rgba(15, 23, 42, 0.15);
}

.author-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--gold);
  display: block; margin-bottom: 10px;
}

.author-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.author-role {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  font-weight: 400;
  margin-bottom: 18px;
}

.author-bio-text {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  max-width: 1140px;
  margin-bottom: 22px;
  font-weight: 400;
}

.author-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.trust-pill {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.author-link {
  font-size: 13px; font-weight: 700;
  color: var(--gold-lt);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--t-fast), gap var(--t-fast);
}

.author-link:hover { color: var(--gold-hover); gap: 6px; text-decoration: none; }
.author-link-sep { color: rgba(255,255,255,.2); font-size: 12px; }

@media (max-width: 900px) {
  .author-intro-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .author-photo { margin: 0 auto; }
  .author-trust-pills { justify-content: center; }
  .author-links { justify-content: center; }
}

@media (max-width: 640px) {
  .author-intro { padding: 48px 20px 44px; }
  .author-photo { width: 110px; height: 110px; }
}


/* ============================================================================
   60. SVG FAVICON SUPPORT
   Registered via functions.php / Customizer
   ============================================================================ */

/* No CSS needed — handled via wp_site_icon and functions.php */


/* ============================================================================
   61. COLOR-SCHEME — EXPLICIT LIGHT MODE (no dark mode auto-inversion)
   ============================================================================ */

:root { color-scheme: light; }