/* ═══════════════════════════════════════════════════════════════════════════
   AmritSparsha — Clean & Modern Design System v3
   Brand: Red #C8102E · Charcoal #3D4555 · Rose #E0A8B2
   Font: Plus Jakarta Sans (300–800)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content (a11y · SXO · Core Web Vitals) ─────────────────────── */
.skip-to-content {
  position   : absolute;
  top        : -100%;
  left       : 1rem;
  z-index    : 9999;
  padding    : .65rem 1.25rem;
  background : var(--red, #C8102E);
  color      : #fff;
  font-size  : 14px;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  transition : top .15s ease;
  white-space: nowrap;
}
.skip-to-content:focus { top: 0; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --dark    : #1c2030;
  --dark-2  : #161926;
  --dark-3  : #111520;

  --red     : #C8102E;
  --red-dk  : #a50d24;
  --red-lt  : rgba(200,16,46,.08);

  --charcoal: #3D4555;
  --rose    : #E0A8B2;

  --text    : #1c2030;
  --text-mid: #4a5468;
  --text-sm : #64748b;
  --text-xs : #94a3b8;
  --white   : #ffffff;

  --bg      : #ffffff;
  --bg-alt  : #f7f8fa;
  --bg-alt2 : #eef0f4;
  --border  : #e8eaf0;

  --border-dk: rgba(255,255,255,.07);

  --ff      : 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --section-py: clamp(3.5rem, 7vw, 5.5rem);
  --dur : 180ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --r   : 10px;
  --shadow-sm : 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md : 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  --shadow-lg : 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family : var(--ff);
  font-size   : 16px;
  line-height : 1.6;
  color       : var(--text);
  background  : var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; }
button { cursor: pointer; font: inherit; background: none; border: none; padding: 0; }
input,textarea { font: inherit; }

/* ── Global focus ring (a11y · WCAG 2.2) ────────────────────────────────── */
:focus-visible {
  outline       : 2px solid var(--red);
  outline-offset: 3px;
  border-radius : 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Minimum 44×44px touch targets (a11y · SXO mobile) ─────────────────── */
@media (pointer: coarse) {
  .share-btn,
  .hdr-search-btn,
  .hdr-burger,
  .mob-nav-cta,
  .toc-link              { min-height: 44px; }
  .share-btn             { padding: .55rem .9rem; }
  .primary-nav ul li a   { padding: .55rem .75rem; }
  .mobile-nav ul li a    { padding: .75rem 0; }
  .sparsha-pagination a,
  .sparsha-pagination span { min-height: 44px; min-width: 44px; }
  .btn-yellow,
  .btn-primary,
  .btn-outline           { min-height: 44px; padding: .7rem 1.6rem; }
}

/* ── Container ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-yellow,
.btn-primary {
  display      : inline-flex;
  align-items  : center;
  gap          : .4rem;
  padding      : .8rem 1.6rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 14px;
  font-weight  : 700;
  letter-spacing: .01em;
  border-radius: 8px;
  white-space  : nowrap;
  transition   : background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-yellow:hover,
.btn-primary:hover {
  background : var(--red-dk);
  box-shadow : 0 4px 14px rgba(200,16,46,.3);
  transform  : translateY(-1px);
}
.btn-yellow.btn-full,
.btn-primary.btn-full { width: 100%; justify-content: center; }

.btn-outline {
  display      : inline-flex;
  align-items  : center;
  gap          : .4rem;
  padding      : .75rem 1.5rem;
  border       : 1.5px solid var(--red);
  color        : var(--red);
  font-size    : 14px;
  font-weight  : 700;
  border-radius: 8px;
  transition   : background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-outline:hover { background: var(--red); color: var(--white); }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-hd {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : 1rem;
  margin-bottom  : clamp(2rem, 4vw, 3rem);
}
.section-eyebrow {
  display       : flex;
  align-items   : center;
  gap           : .5rem;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color         : var(--red);
  margin-bottom : .5rem;
}
.section-eyebrow::before {
  content   : '';
  width     : 18px;
  height    : 2px;
  background: var(--red);
  flex-shrink: 0;
}
.section-title {
  font-size     : clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight   : 800;
  color         : var(--text);
  letter-spacing: -.03em;
  line-height   : 1.15;
}
.section-link {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--text-sm);
  flex-shrink: 0;
  white-space: nowrap;
  transition : color var(--dur) var(--ease);
}
.section-link:hover { color: var(--red); }

/* ── Post meta ───────────────────────────────────────────────────────────── */
.post-meta {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : .35rem;
  font-size  : 12px;
  font-weight: 500;
  color      : var(--text-sm);
}
.meta-dot {
  width        : 3px;
  height       : 3px;
  border-radius: 50%;
  background   : var(--text-xs);
  flex-shrink  : 0;
}
.post-cat-tag {
  display       : inline-block;
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color         : var(--red);
  margin-bottom : .3rem;
}
.post-cat-tag:hover { color: var(--red-dk); }
.img-badge {
  position      : absolute;
  top           : .65rem;
  left          : .65rem;
  background    : var(--red);
  color         : var(--white);
  font-size     : 9px;
  font-weight   : 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding       : 3px 7px;
  border-radius : 4px;
}
.text-link {
  font-size  : 13px;
  font-weight: 700;
  color      : var(--red);
  transition : color var(--dur) var(--ease);
}
.text-link:hover { color: var(--red-dk); }
.text-yellow { color: var(--red); }
.nl-msg { font-size: 13px; margin-top: .5rem; }
.nl-msg.ok  { color: #16a34a; }
.nl-msg.err { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position    : sticky;
  top         : 0;
  z-index     : 900;
  background  : var(--dark);
  border-bottom: 1px solid var(--border-dk);
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.4); }

.hdr-inner {
  display    : flex;
  align-items: center;
  height     : 62px;
  gap        : 2rem;
}
.site-logo, .footer-logo {
  display    : flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img { height: 36px; width: auto; }
.logo-mark {
  width        : 32px;
  height       : 32px;
  background   : var(--red);
  color        : var(--white);
  font-size    : 16px;
  font-weight  : 800;
  display      : flex;
  align-items  : center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink  : 0;
}
.logo-text {
  font-size     : 16px;
  font-weight   : 700;
  letter-spacing: -.02em;
  color         : var(--white);
  margin-left   : .6rem;
}
.logo-text strong { font-weight: 800; color: var(--rose); }

.primary-nav { flex: 1; overflow: hidden; }
.primary-nav ul { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.primary-nav ul li a {
  display      : block;
  padding      : .4rem .7rem;
  font-size    : 13px;
  font-weight  : 600;
  color        : rgba(255,255,255,.55);
  white-space  : nowrap;
  border-radius: 6px;
  transition   : color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item a { color: var(--white); background: rgba(255,255,255,.07); }

.hdr-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.hdr-search-btn {
  width   : 34px;
  height  : 34px;
  display : flex;
  align-items: center;
  justify-content: center;
  color   : rgba(255,255,255,.45);
  border-radius: 6px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hdr-search-btn:hover { color: var(--white); background: rgba(255,255,255,.07); }
.hdr-cta-btn {
  padding      : .45rem 1rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 13px;
  font-weight  : 700;
  border-radius: 6px;
  transition   : background var(--dur) var(--ease);
}
.hdr-cta-btn:hover { background: var(--red-dk); }
.hdr-burger {
  display        : none;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  gap            : 5px;
}
.hdr-burger span {
  display      : block;
  width        : 20px;
  height       : 2px;
  background   : rgba(255,255,255,.7);
  border-radius: 1px;
  transition   : transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hdr-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity: 0; }
.hdr-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hdr-search-bar {
  background: var(--dark-2);
  border-top: 1px solid var(--border-dk);
  padding   : .65rem 0;
}
.hdr-search-bar form { display: flex; align-items: center; gap: .5rem; }
.hdr-search-bar input[type="search"] {
  flex        : 1;
  background  : rgba(255,255,255,.06);
  border      : 1px solid rgba(255,255,255,.1);
  color       : var(--white);
  padding     : .55rem .9rem;
  font-size   : 14px;
  border-radius: 6px;
  outline     : none;
  transition  : border-color var(--dur) var(--ease);
}
.hdr-search-bar input::placeholder { color: rgba(255,255,255,.28); }
.hdr-search-bar input:focus { border-color: var(--red); }
.hdr-search-bar button[type="submit"] {
  padding      : .55rem 1.1rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 13px;
  font-weight  : 700;
  border-radius: 6px;
}
#sparsha-search-close { color: rgba(255,255,255,.4); padding: 4px; }
#sparsha-search-close:hover { color: var(--white); }

.mobile-nav {
  background: var(--dark-2);
  border-top: 1px solid var(--border-dk);
  padding   : .75rem 0 1.25rem;
}
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav ul li a {
  display      : block;
  padding      : .6rem 0;
  font-size    : 14px;
  font-weight  : 600;
  color        : rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition   : color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav ul li a:hover { color: var(--white); padding-left: .4rem; }
.mob-nav-cta {
  display      : inline-block;
  margin-top   : .9rem;
  padding      : .6rem 1.25rem;
  background   : var(--red);
  color        : var(--white);
  font-weight  : 700;
  font-size    : 13px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-section {
  background : var(--dark);
  padding    : clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
  position   : relative;
  overflow   : hidden;
}
.hero-section::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: radial-gradient(ellipse 65% 55% at 65% 35%, rgba(200,16,46,.06) 0%, transparent 65%);
  pointer-events: none;
}
.hero-grid {
  display              : grid;
  grid-template-columns: 1fr 400px;
  gap                  : 4rem;
  align-items          : center;
  position             : relative;
  z-index              : 1;
}
.hero-left { display: flex; flex-direction: column; gap: 1.75rem; }
.hero-eyebrow {
  display       : flex;
  align-items   : center;
  gap           : .5rem;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.38);
}
.eyebrow-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--red);
  animation    : blink 2s infinite;
}
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.3 } }

.hero-headline {
  font-size     : clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight   : 800;
  line-height   : 1.08;
  color         : var(--white);
  letter-spacing: -.035em;
}
.hero-highlight { color: var(--red); }

.hero-sub {
  font-size  : 16px;
  line-height: 1.75;
  color      : rgba(255,255,255,.52);
  max-width  : 480px;
}
.hero-form { display: flex; flex-direction: column; gap: .5rem; }
.hero-form-row {
  display : flex;
  max-width: 500px;
}
.hero-form-row input[type="email"] {
  flex         : 1;
  padding      : .85rem 1rem;
  background   : rgba(255,255,255,.07);
  border       : 1.5px solid rgba(255,255,255,.12);
  border-right : none;
  color        : var(--white);
  font-size    : 14px;
  border-radius: 8px 0 0 8px;
  outline      : none;
  transition   : border-color var(--dur) var(--ease);
}
.hero-form-row input::placeholder { color: rgba(255,255,255,.25); }
.hero-form-row input:focus { border-color: var(--red); }
.hero-form-row .btn-yellow { border-radius: 0 8px 8px 0; }
.hero-fine { font-size: 11px; color: rgba(255,255,255,.25); }

.hero-trust { display: flex; align-items: center; gap: .75rem; }
.trust-avatars { display: flex; }
.trust-av {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  border         : 2px solid var(--dark);
  font-size      : 11px;
  font-weight    : 700;
  color          : var(--white);
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-left    : -8px;
  flex-shrink    : 0;
}
.trust-avatars .trust-av:first-child { margin-left: 0; }
.hero-trust-text { font-size: 12px; color: rgba(255,255,255,.45); }
.hero-trust-text strong { color: var(--rose); }

.hero-right {}
.hero-card {
  background   : rgba(255,255,255,.04);
  border       : 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow     : hidden;
  backdrop-filter: blur(10px);
}
.hero-card-hd {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  padding    : .9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.live-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : #22c55e;
  box-shadow   : 0 0 0 3px rgba(34,197,94,.18);
  animation    : blink 1.8s infinite;
}
.hero-card-lbl {
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.32);
}
.hero-stats-grid {
  display              : grid;
  grid-template-columns: repeat(4,1fr);
}
.hero-stat {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : 1.1rem .75rem;
  border-right  : 1px solid rgba(255,255,255,.05);
  border-bottom : 1px solid rgba(255,255,255,.05);
}
.hero-stat:nth-child(4n) { border-right: none; }
.hero-stat-num {
  font-size     : 1.3rem;
  font-weight   : 800;
  color         : var(--red);
  line-height   : 1;
  margin-bottom : .2rem;
  letter-spacing: -.02em;
}
.hero-stat-lbl {
  font-size     : 9px;
  font-weight   : 600;
  color         : rgba(255,255,255,.3);
  text-align    : center;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-feed { padding: .9rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.hero-feed-lbl {
  font-size     : 9px;
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.25);
  margin-bottom : .2rem;
}
.hero-feed-item {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  padding    : .45rem .55rem;
  background : rgba(255,255,255,.025);
  border     : 1px solid rgba(255,255,255,.04);
  border-radius: 5px;
  transition : background var(--dur) var(--ease);
}
.hero-feed-item:hover { background: rgba(255,255,255,.06); }
.feed-cat {
  font-size     : 9px;
  font-weight   : 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color         : var(--red);
  flex-shrink   : 0;
}
.feed-title {
  flex       : 1;
  font-size  : 12px;
  font-weight: 500;
  color      : rgba(255,255,255,.6);
  overflow   : hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-feed-item svg { flex-shrink: 0; color: rgba(255,255,255,.22); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOPICS
   ═══════════════════════════════════════════════════════════════════════════ */
.cats-section { padding: var(--section-py) 0; background: var(--bg-alt); }
.cats-grid {
  display              : grid;
  grid-template-columns: repeat(3,1fr);
  gap                  : .75rem;
}
.cat-card {
  display      : flex;
  align-items  : center;
  gap          : .9rem;
  padding      : 1.1rem 1rem;
  background   : var(--white);
  border-radius: var(--r);
  box-shadow   : var(--shadow-sm);
  transition   : box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-card-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 8px;
  background     : var(--bg-alt2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  color          : var(--cat-color, var(--red));
  transition     : background var(--dur) var(--ease);
}
.cat-card:hover .cat-card-icon { background: rgba(var(--cat-color-rgb,200,16,46),.08); }
.cat-card-icon svg { width: 18px; height: 18px; }
.cat-card-body { flex: 1; min-width: 0; }
.cat-card-name {
  font-size    : 13.5px;
  font-weight  : 700;
  color        : var(--text);
  margin-bottom: .1rem;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  transition   : color var(--dur) var(--ease);
}
.cat-card:hover .cat-card-name { color: var(--cat-color, var(--red)); }
.cat-card-count { font-size: 11px; color: var(--text-xs); }
.cat-card-arrow { color: var(--text-xs); flex-shrink: 0; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.cat-card:hover .cat-card-arrow { color: var(--cat-color, var(--red)); transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL
   ═══════════════════════════════════════════════════════════════════════════ */
.editorial-section { padding: var(--section-py) 0; background: var(--bg); }
.editorial-layout {
  display              : grid;
  grid-template-columns: 1fr 320px;
  gap                  : 3rem;
  align-items          : start;
}
.editorial-lead-img {
  display      : block;
  aspect-ratio : 16/9;
  overflow     : hidden;
  border-radius: var(--r);
  margin-bottom: 1.1rem;
  position     : relative;
}
.editorial-lead-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.editorial-lead-img:hover img { transform: scale(1.04); }
.editorial-lead-title {
  font-size     : clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight   : 800;
  line-height   : 1.18;
  letter-spacing: -.03em;
  color         : var(--text);
  margin-bottom : .55rem;
}
.editorial-lead-title a:hover { color: var(--red); }
.editorial-lead-excerpt { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: .65rem; }
.editorial-lead-body { }

.editorial-stack { display: flex; flex-direction: column; }
.stack-item {
  display      : flex;
  gap          : .85rem;
  align-items  : flex-start;
  padding      : 1rem 0;
  border-bottom: 1px solid var(--border);
}
.stack-item:first-child { padding-top: 0; }
.stack-item:last-child  { border-bottom: none; }
.stack-item-img {
  width       : 80px;
  flex-shrink : 0;
  aspect-ratio: 16/9;
  overflow    : hidden;
  border-radius: 7px;
}
.stack-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.stack-item-img:hover img { transform: scale(1.07); }
.stack-item-body { flex: 1; min-width: 0; }
.stack-item-title {
  font-size    : 13.5px;
  font-weight  : 700;
  line-height  : 1.3;
  color        : var(--text);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}
.stack-item-title a:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-bar { background: var(--charcoal); padding: 2rem 0; }
.stats-bar-inner {
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-wrap      : wrap;
}
.stat-box {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : .5rem 2.75rem;
  text-align    : center;
}
.stat-num {
  font-size     : clamp(1.5rem, 3vw, 2.1rem);
  font-weight   : 800;
  color         : var(--rose);
  line-height   : 1;
  margin-bottom : .3rem;
  letter-spacing: -.03em;
}
.stat-lbl {
  font-size     : 10px;
  font-weight   : 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.4);
}
.stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.1); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY DEEP DIVES
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-deep     { padding: var(--section-py) 0; background: var(--bg); }
.cat-deep-alt { background: var(--bg-alt); }
.cat-deep-grid {
  display              : grid;
  grid-template-columns: 1fr 290px;
  gap                  : 2.5rem;
  align-items          : start;
}
.cat-deep-img {
  display      : block;
  aspect-ratio : 16/9;
  overflow     : hidden;
  border-radius: var(--r);
  margin-bottom: 1rem;
}
.cat-deep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cat-deep-img:hover img { transform: scale(1.04); }
.cat-deep-title {
  font-size     : clamp(1.2rem, 2vw, 1.5rem);
  font-weight   : 800;
  line-height   : 1.2;
  letter-spacing: -.025em;
  color         : var(--text);
  margin-bottom : .5rem;
}
.cat-deep-title a:hover { color: var(--red); }
.cat-deep-excerpt { font-size: 14px; color: var(--text-mid); line-height: 1.65; margin-bottom: .6rem; }

.cat-deep-list { display: flex; flex-direction: column; }
.cat-list-row {
  display      : flex;
  gap          : .75rem;
  align-items  : flex-start;
  padding      : .85rem 0;
  border-bottom: 1px solid var(--border);
}
.cat-list-row:last-child { border-bottom: none; }
.cat-list-thumb { width: 74px; flex-shrink: 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; }
.cat-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-list-body { flex: 1; min-width: 0; }
.cat-list-title {
  font-size    : 13px;
  font-weight  : 700;
  line-height  : 1.3;
  color        : var(--text);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}
.cat-list-title a:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════════
   POST CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.latest-section { padding: var(--section-py) 0; background: var(--bg-alt); }
.posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

.post-card {
  background    : var(--white);
  border-radius : var(--r);
  box-shadow    : var(--shadow-sm);
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  transition    : box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card-img {
  display     : block;
  aspect-ratio: 16/9;
  overflow    : hidden;
  position    : relative;
}
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .post-card-img img { transform: scale(1.05); }
.post-card-body {
  padding       : 1rem 1.1rem 1.25rem;
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : .3rem;
}
.post-card-title {
  font-size     : .95rem;
  font-weight   : 700;
  line-height   : 1.3;
  color         : var(--text);
  flex          : 1;
  letter-spacing: -.01em;
}
.post-card-title a:hover { color: var(--red); }
.post-card-excerpt { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRENDING
   ═══════════════════════════════════════════════════════════════════════════ */
.trending-section { padding: var(--section-py) 0; background: var(--bg); }
.trending-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.trending-card {
  display    : flex;
  align-items: flex-start;
  gap        : 1rem;
  padding    : 1.25rem;
  background : var(--white);
  border-radius: var(--r);
  box-shadow : var(--shadow-sm);
  transition : box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.trending-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trending-num {
  font-size     : 1.9rem;
  font-weight   : 800;
  color         : var(--bg-alt2);
  line-height   : 1;
  flex-shrink   : 0;
  width         : 38px;
  letter-spacing: -.04em;
}
.trending-body { flex: 1; min-width: 0; }
.trending-title {
  font-size    : 14px;
  font-weight  : 700;
  line-height  : 1.35;
  color        : var(--text);
  margin-bottom: .3rem;
  letter-spacing: -.01em;
}
.trending-title a:hover { color: var(--red); }
.trending-img { width: 72px; aspect-ratio: 1; flex-shrink: 0; overflow: hidden; border-radius: 7px; }
.trending-img img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════════════ */
.nl-section {
  background: var(--dark);
  padding   : var(--section-py) 0;
  position  : relative;
  overflow  : hidden;
}
.nl-section::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(200,16,46,.06) 0%, transparent 65%);
  pointer-events: none;
}
.nl-inner {
  display              : grid;
  grid-template-columns: 1fr 360px;
  gap                  : 4rem;
  align-items          : center;
  position             : relative;
  z-index              : 1;
}
.nl-title {
  font-size     : clamp(1.5rem, 3vw, 2.2rem);
  font-weight   : 800;
  color         : var(--white);
  line-height   : 1.15;
  letter-spacing: -.03em;
  margin-bottom : .85rem;
}
.nl-sub { font-size: 15px; color: rgba(255,255,255,.48); line-height: 1.7; margin-bottom: 1.5rem; }
.nl-perks { display: flex; flex-direction: column; gap: .5rem; }
.nl-perks li { display: flex; align-items: center; gap: .55rem; font-size: 13px; color: rgba(255,255,255,.6); }
.perk-check {
  width          : 17px;
  height         : 17px;
  border-radius  : 50%;
  background     : rgba(200,16,46,.2);
  color          : var(--rose);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 10px;
  font-weight    : 900;
  flex-shrink    : 0;
}
.nl-form-box {
  background   : rgba(255,255,255,.05);
  border       : 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding      : 1.75rem;
}
.nl-form-hd { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.nl-badge {
  padding       : 4px 10px;
  background    : var(--red);
  color         : var(--white);
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius : 4px;
}
.nl-tagline { font-size: 12px; color: rgba(255,255,255,.32); }
.nl-label {
  display       : block;
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.38);
  margin-bottom : .35rem;
}
.nl-input {
  display     : block;
  width       : 100%;
  background  : rgba(255,255,255,.06);
  border      : 1px solid rgba(255,255,255,.09);
  color       : var(--white);
  padding     : .65rem .85rem;
  font-size   : 14px;
  border-radius: 6px;
  outline     : none;
  margin-bottom: .9rem;
  transition  : border-color var(--dur) var(--ease);
}
.nl-input::placeholder { color: rgba(255,255,255,.2); }
.nl-input:focus { border-color: var(--red); }
.nl-fine { font-size: 11px; color: rgba(255,255,255,.2); margin-top: .6rem; line-height: 1.6; }
.nl-fine a { color: rgba(255,255,255,.38); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--dark-2); color: var(--white); }
.footer-top { padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--border-dk); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand .footer-logo { margin-bottom: .9rem; display: flex; }
.footer-brand > p { font-size: 13px; color: rgba(255,255,255,.36); line-height: 1.7; max-width: 280px; margin-bottom: 1.25rem; }
.footer-social { display: flex; gap: .4rem; }
.footer-social a {
  width          : 32px;
  height         : 32px;
  border-radius  : 7px;
  background     : rgba(255,255,255,.05);
  color          : rgba(255,255,255,.42);
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--red); color: var(--white); }
.footer-col-title {
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.28);
  margin-bottom : .9rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .45rem; }
.footer-col ul a { font-size: 13px; color: rgba(255,255,255,.42); transition: color var(--dur) var(--ease); }
.footer-col ul a:hover { color: var(--white); }
.footer-bar { border-top: 1px solid var(--border-dk); padding: 1.1rem 0; }
.footer-bar-inner {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 1rem;
  font-size      : 12px;
  color          : rgba(255,255,255,.26);
}

/* ═══════════════════════════════════════════════════════════════════════════
   READING PROGRESS
   ═══════════════════════════════════════════════════════════════════════════ */
.reading-progress {
  position  : fixed;
  top       : 62px;
  left      : 0;
  width     : 0%;
  height    : 2px;
  background: linear-gradient(90deg, var(--red), var(--rose));
  z-index   : 800;
  transition: width .1s linear;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST — complete redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* Article header */
.article-header {
  background: var(--dark);
  padding   : 4rem 0 3rem;
}
.article-header-inner {
  max-width: 820px;
}
.article-kicker {
  display       : inline-flex;
  align-items   : center;
  gap           : .5rem;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--rose);
  margin-bottom : 1rem;
  text-decoration: none;
  transition    : color var(--dur) var(--ease);
}
.article-kicker:hover { color: var(--white); }
.article-kicker::before {
  content   : '';
  width     : 14px;
  height    : 2px;
  background: var(--rose);
  flex-shrink: 0;
}
.article-title {
  font-size     : clamp(1.9rem, 4vw, 3.1rem);
  font-weight   : 800;
  color         : var(--white);
  line-height   : 1.09;
  letter-spacing: -.035em;
  margin-bottom : 1.5rem;
}
.article-byline {
  display    : flex;
  align-items: center;
  gap        : .85rem;
  flex-wrap  : wrap;
}
.byline-avatar {
  width        : 38px;
  height       : 38px;
  border-radius: 50%;
  overflow     : hidden;
  flex-shrink  : 0;
  background   : var(--charcoal);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 14px;
  font-weight  : 700;
  color        : var(--white);
}
.byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline-info { }
.byline-name {
  font-size  : 14px;
  font-weight: 700;
  color      : rgba(255,255,255,.85);
}
.byline-meta {
  display    : flex;
  align-items: center;
  gap        : .35rem;
  font-size  : 12px;
  color      : rgba(255,255,255,.38);
}
.byline-meta .meta-dot { background: rgba(255,255,255,.2); }
.article-meta-badge {
  display       : inline-block;
  background    : rgba(255,255,255,.07);
  padding       : 2px 8px;
  border-radius : 4px;
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.4);
}
.article-meta { display: none; }

/* Hero image — cinematic */
.article-hero-wrap {
  background: var(--dark-3);
}
.article-hero-img {
  aspect-ratio: 21/8;
  overflow    : hidden;
  max-height  : 520px;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-caption {
  max-width: 1240px;
  margin   : 0 auto;
  padding  : .6rem clamp(20px,4vw,48px) 0;
  font-size: 11px;
  color    : rgba(255,255,255,.35);
}

/* Article body */
.article-wrap { padding: 3.5rem 0 5rem; background: var(--bg); }
.article-layout {
  display              : grid;
  grid-template-columns: 1fr 280px;
  gap                  : 5rem;
  align-items          : start;
}
.article-main { max-width: 680px; }

/* Article content typography */
.article-content {
  font-size  : 17.5px;
  line-height: 1.85;
  color      : var(--text);
}
.article-content > * + * { margin-top: 1.5rem; }
.article-content h2 {
  font-size     : 1.65rem;
  font-weight   : 800;
  color         : var(--text);
  letter-spacing: -.028em;
  line-height   : 1.18;
  margin-top    : 3rem;
  margin-bottom : .6rem;
  padding-left  : .9rem;
  border-left   : 3px solid var(--red);
}
.article-content h3 {
  font-size    : 1.2rem;
  font-weight  : 700;
  color        : var(--text);
  margin-top   : 2.5rem;
  margin-bottom: .5rem;
  letter-spacing: -.015em;
}
.article-content p { margin-bottom: 1.5rem; }
.article-content ul, .article-content ol { margin: 0 0 1.5rem 1.5rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: .4rem; }
.article-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--red-dk); }
.article-content blockquote {
  margin      : 2.5rem 0;
  padding     : 1.4rem 1.5rem;
  background  : var(--bg-alt);
  border-left : 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  font-size   : 1.05rem;
  font-style  : italic;
  color       : var(--charcoal);
  line-height : 1.7;
}
.article-content pre {
  background   : var(--dark);
  color        : #e2e8f0;
  padding      : 1.5rem;
  overflow-x   : auto;
  font-size    : 14px;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  border-left  : 3px solid var(--red);
}
.article-content code { font-size: .87em; background: var(--bg-alt2); padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; }
.article-content pre code { background: none; padding: 0; font-family: inherit; }
.article-content img { margin: 2.5rem 0; border-radius: 10px; }
.article-content figure { margin: 2.5rem 0; }
.article-content figcaption, .article-content .wp-caption-text {
  font-size  : 12px;
  color      : var(--text-xs);
  text-align : center;
  margin-top : .5rem;
}

/* Tags */
.article-tags {
  display    : flex;
  flex-wrap  : wrap;
  gap        : .4rem;
  margin-top : 3rem;
  padding-top: 2rem;
  border-top : 1px solid var(--border);
}
.tag-pill {
  padding     : .3rem .8rem;
  background  : var(--bg-alt);
  font-size   : 11px;
  font-weight : 600;
  color       : var(--text-mid);
  border-radius: 20px;
  transition  : background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tag-pill:hover { background: var(--red); color: var(--white); }

/* Author box */
.author-box {
  display      : flex;
  gap          : 1.1rem;
  align-items  : flex-start;
  padding      : 1.5rem;
  background   : var(--bg-alt);
  border-radius: var(--r);
  border-left  : 3px solid var(--red);
  margin-top   : 2.5rem;
}
.author-avatar {
  width          : 54px;
  height         : 54px;
  border-radius  : 50%;
  overflow       : hidden;
  flex-shrink    : 0;
  background     : var(--charcoal);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  font-weight    : 700;
  color          : var(--white);
}
.author-name { font-size: 15px; font-weight: 800; margin-bottom: .2rem; letter-spacing: -.01em; }
.author-bio  { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; }

/* Sidebar */
.article-sidebar {
  display       : flex;
  flex-direction: column;
  gap           : 1.5rem;
  position      : sticky;
  top           : 78px;
}
.sidebar-widget-title {
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : var(--text-xs);
  margin-bottom : .85rem;
  padding-bottom: .5rem;
  border-bottom : 2px solid var(--border);
}
.sidebar-post {
  display      : flex;
  gap          : .65rem;
  align-items  : flex-start;
  padding      : .8rem 0;
  border-bottom: 1px solid var(--border);
}
.sidebar-post:last-child { border-bottom: none; }
.sidebar-post-img { width: 62px; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; flex-shrink: 0; }
.sidebar-post-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-post-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--text); letter-spacing: -.01em; }
.sidebar-post-title a:hover { color: var(--red); }
.sidebar-post-meta { font-size: 10.5px; color: var(--text-xs); margin-top: .2rem; }

.sidebar-nl-box {
  background   : var(--charcoal);
  border-radius: var(--r);
  padding      : 1.4rem;
  color        : var(--white);
}
.sidebar-nl-box h4 { font-size: 1rem; font-weight: 800; margin-bottom: .35rem; letter-spacing: -.01em; }
.sidebar-nl-box p  { font-size: 12px; color: rgba(255,255,255,.48); margin-bottom: .9rem; line-height: 1.6; }
.sidebar-nl-box input[type="email"] {
  width       : 100%;
  background  : rgba(255,255,255,.08);
  border      : 1px solid rgba(255,255,255,.1);
  color       : var(--white);
  padding     : .55rem .75rem;
  font-size   : 13px;
  border-radius: 6px;
  outline     : none;
  margin-bottom: .5rem;
  display     : block;
}
.sidebar-nl-box input::placeholder { color: rgba(255,255,255,.22); }
.sidebar-nl-box input:focus { border-color: var(--rose); }
.sidebar-nl-box button[type="submit"] {
  width        : 100%;
  padding      : .55rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 12px;
  font-weight  : 700;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition   : background var(--dur) var(--ease);
}
.sidebar-nl-box button:hover { background: var(--red-dk); }

/* Related posts */
.related-section { background: var(--bg-alt); padding: 4rem 0; }
.related-section .section-hd { margin-bottom: 1.75rem; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE / INDEX
   ═══════════════════════════════════════════════════════════════════════════ */
.archive-hero { background: var(--dark); padding: 3.5rem 0 2.5rem; }
.archive-eyebrow {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color         : var(--red);
  margin-bottom : .5rem;
}
.archive-title {
  font-size     : clamp(1.9rem, 4vw, 2.9rem);
  font-weight   : 800;
  color         : var(--white);
  letter-spacing: -.035em;
  line-height   : 1.1;
  margin-bottom : .55rem;
}
.archive-desc { font-size: 15px; color: rgba(255,255,255,.42); max-width: 460px; line-height: 1.65; }

.archive-body { padding: 3rem 0; background: var(--bg-alt); }
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

.sparsha-pagination { display: flex; gap: .35rem; justify-content: center; margin-top: 3rem; }
.sparsha-pagination a, .sparsha-pagination span {
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-width      : 36px;
  height         : 36px;
  padding        : 0 .7rem;
  background     : var(--white);
  box-shadow     : var(--shadow-sm);
  font-size      : 13px;
  font-weight    : 600;
  color          : var(--text);
  border-radius  : 7px;
  transition     : box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sparsha-pagination a:hover { background: var(--charcoal); color: var(--white); box-shadow: var(--shadow-md); }
.sparsha-pagination span.current { background: var(--red); color: var(--white); font-weight: 700; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   404
   ═══════════════════════════════════════════════════════════════════════════ */
.error-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5rem 1rem; }
.error-num { font-size: clamp(6rem,15vw,12rem); font-weight: 800; color: var(--bg-alt2); line-height: 1; letter-spacing: -.04em; display: block; }
.error-title { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: var(--text); margin-bottom: .75rem; letter-spacing: -.025em; }
.error-desc  { font-size: 15px; color: var(--text-sm); max-width: 400px; margin: 0 auto 2rem; line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADSENSE & MONETIZE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ad container — policy-compliant: clearly labeled, spaced from content */
.ams-ad-unit {
  margin    : 2.5rem 0;
  text-align: center;
  /* Prevent ad from touching adjacent text */
  padding   : 0;
  clear     : both;
}
.ams-ad-label {
  display       : block;
  font-size     : 10px;
  font-weight   : 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--text-xs);
  margin-bottom : .4rem;
  text-align    : center;
  /* Visible "Advertisement" label — required for policy transparency */
}

/* Legacy wrappers (kept for backwards compat) */
.ams-ad-wrap  { margin: 2rem 0; text-align: center; }
.ams-atf-wrap { margin-bottom: 2rem; }

/* Post newsletter CTA — editorial content, clearly not an ad */
.post-nl-cta {
  margin       : 3rem 0 1rem;
  border-top   : 1px solid var(--border);
  padding-top  : 2.5rem;
}
.post-nl-cta-inner {
  background   : var(--bg-alt);
  border       : 1px solid var(--border);
  border-radius: var(--r);
  border-left  : 3px solid var(--red);
  padding      : 1.75rem 2rem;
  max-width    : 500px;
}
.post-nl-icon { font-size: 1.5rem; margin-bottom: .6rem; }
.post-nl-title {
  font-size     : 1.1rem;
  font-weight   : 800;
  color         : var(--text);
  margin-bottom : .3rem;
  letter-spacing: -.015em;
}
.post-nl-sub {
  font-size    : 13.5px;
  color        : var(--text-mid);
  margin-bottom: 1rem;
  line-height  : 1.6;
}
.post-nl-form { display: flex; gap: .4rem; flex-wrap: wrap; }
.post-nl-form input[type="email"] {
  flex        : 1;
  min-width   : 180px;
  padding     : .6rem .9rem;
  border      : 1.5px solid var(--border);
  border-radius: 6px;
  font-size   : 13px;
  outline     : none;
  transition  : border-color var(--dur) var(--ease);
}
.post-nl-form input:focus { border-color: var(--red); }
.post-nl-form button[type="submit"] {
  padding      : .6rem 1.1rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 13px;
  font-weight  : 700;
  border-radius: 6px;
  white-space  : nowrap;
  transition   : background var(--dur) var(--ease);
}
.post-nl-form button:hover { background: var(--red-dk); }

/* Media kit CTA */
.media-kit-cta {
  background   : var(--bg-alt);
  border       : 1px solid var(--border);
  border-radius: var(--r);
  padding      : 1.5rem;
  margin       : 2rem 0;
  text-align   : center;
}
.media-kit-cta h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .35rem; letter-spacing: -.015em; }
.media-kit-cta p  { font-size: 13.5px; color: var(--text-mid); margin-bottom: 1rem; }

.affiliate-card {
  display    : grid;
  grid-template-columns: 110px 1fr;
  gap        : 1.4rem;
  align-items: center;
  border-radius: var(--r);
  box-shadow : var(--shadow-sm);
  padding    : 1.4rem;
  background : var(--white);
  margin     : 2rem 0;
}
.affiliate-card-badge {
  display       : inline-block;
  padding       : 3px 8px;
  background    : var(--red);
  color         : var(--white);
  font-size     : 9px;
  font-weight   : 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius : 4px;
  margin-bottom : .5rem;
}
.affiliate-card-name { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; letter-spacing: -.01em; }
.affiliate-card-rating { color: var(--red); font-size: 14px; margin-bottom: .25rem; }
.affiliate-card-price { font-size: 13px; font-weight: 600; margin-bottom: .7rem; color: var(--text-mid); }
.affiliate-card-cta {
  display      : inline-block;
  padding      : .5rem 1.2rem;
  background   : var(--charcoal);
  color        : var(--white);
  font-size    : 12px;
  font-weight  : 700;
  border-radius: 6px;
  transition   : background var(--dur) var(--ease);
}
.affiliate-card-cta:hover { background: var(--red); }

.lead-magnet-box {
  background   : var(--dark);
  padding      : 2.5rem;
  text-align   : center;
  margin       : 2rem 0;
  border-radius: 12px;
  color        : var(--white);
}
.lead-magnet-box h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.02em; }
.lead-magnet-box p  { color: rgba(255,255,255,.52); margin-bottom: 1.25rem; }
.lead-magnet-cta {
  display      : inline-block;
  padding      : .7rem 2rem;
  background   : var(--red);
  color        : var(--white);
  font-weight  : 700;
  font-size    : 13px;
  border-radius: 7px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB (single + page)
   ═══════════════════════════════════════════════════════════════════════════ */
.article-breadcrumb,
.page-breadcrumb {
  display    : flex;
  align-items: center;
  gap        : .4rem;
  flex-wrap  : wrap;
  font-size  : 11px;
  font-weight: 600;
  color      : rgba(255,255,255,.28);
  margin-bottom: .9rem;
}
.article-breadcrumb a,
.page-breadcrumb a {
  color     : rgba(255,255,255,.45);
  transition: color var(--dur) var(--ease);
}
.article-breadcrumb a:hover,
.page-breadcrumb a:hover { color: var(--rose); }
.article-breadcrumb [aria-current],
.page-breadcrumb [aria-current] {
  color       : rgba(255,255,255,.52);
  overflow    : hidden;
  white-space : nowrap;
  text-overflow: ellipsis;
  max-width   : 240px;
  display     : inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL SHARE
   ═══════════════════════════════════════════════════════════════════════════ */
.article-share {
  display    : flex;
  align-items: center;
  gap        : .4rem;
  flex-wrap  : wrap;
  margin-top : 1.25rem;
}
.share-label {
  font-size     : 10px;
  font-weight   : 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.28);
  margin-right  : .1rem;
}
.share-btn {
  display    : inline-flex;
  align-items: center;
  gap        : .35rem;
  padding    : .35rem .8rem;
  border-radius: 6px;
  font-size  : 11px;
  font-weight: 700;
  cursor     : pointer;
  border     : none;
  transition : background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.share-twitter { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.share-twitter:hover { background: #000; color: var(--white); transform: translateY(-1px); }
.share-linkedin { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.share-linkedin:hover { background: #0077b5; color: var(--white); transform: translateY(-1px); }
.share-copy { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.share-copy:hover { background: rgba(255,255,255,.14); color: var(--white); transform: translateY(-1px); }
.share-copy.copied { background: var(--red); color: var(--white); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS (sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-toc {}
.toc-list {
  list-style    : none;
  counter-reset : toc;
  margin-top    : .1rem;
}
.toc-list li { counter-increment: toc; }
.toc-link {
  display      : flex;
  align-items  : flex-start;
  gap          : .45rem;
  padding      : .3rem 0 .3rem .5rem;
  font-size    : 12px;
  font-weight  : 500;
  color        : var(--text-mid);
  line-height  : 1.4;
  border-left  : 2px solid transparent;
  transition   : color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
}
.toc-link::before {
  content     : counter(toc) '.';
  font-size   : 10px;
  font-weight : 700;
  color       : var(--text-xs);
  flex-shrink : 0;
  margin-top  : 1px;
  min-width   : 16px;
}
.toc-link:hover {
  color       : var(--red);
  border-color: rgba(200,16,46,.35);
  background  : var(--red-lt);
}
.toc-link.active {
  color       : var(--red);
  border-color: var(--red);
  font-weight : 700;
  background  : var(--red-lt);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE DISCLOSURE
   ═══════════════════════════════════════════════════════════════════════════ */
.affiliate-disclosure {
  display      : flex;
  gap          : .8rem;
  align-items  : flex-start;
  padding      : 1rem 1.2rem;
  background   : #fffbeb;
  border       : 1px solid #fde68a;
  border-left  : 3px solid #f59e0b;
  border-radius: 8px;
  margin       : 2rem 0;
  font-size    : 13px;
  color        : #92400e;
  line-height  : 1.6;
}
.affiliate-disclosure svg {
  flex-shrink : 0;
  color       : #f59e0b;
  margin-top  : 1px;
}
.affiliate-disclosure strong {
  color        : #78350f;
  display      : block;
  margin-bottom: .15rem;
  font-size    : 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TEMPLATE (page.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.page-hero {
  background : var(--dark);
  padding    : 3.5rem 0 2.5rem;
}
.page-title {
  font-size     : clamp(1.9rem, 4vw, 2.9rem);
  font-weight   : 800;
  color         : var(--white);
  letter-spacing: -.035em;
  line-height   : 1.1;
  margin-top    : .25rem;
}
.page-subtitle {
  font-size  : 16px;
  color      : rgba(255,255,255,.45);
  margin-top : .75rem;
  max-width  : 560px;
  line-height: 1.65;
}
.page-hero-img-wrap {
  background: var(--dark-3);
  max-height: 420px;
  overflow  : hidden;
}
.page-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.page-main {
  padding   : 3.5rem 0 5rem;
  background: var(--bg);
}
.page-content {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.82;
  color: var(--text);
}
.page-content > * + * { margin-top: 1.4rem; }
.page-content h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-top: 2.5rem;
  padding-left: .9rem;
  border-left: 3px solid var(--red);
}
.page-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-top: 2rem; }
.page-content p  { margin-bottom: 1.4rem; }
.page-content ul, .page-content ol { margin: 0 0 1.4rem 1.5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: .35rem; }
.page-content a  { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.page-content a:hover { color: var(--red-dk); }
.page-content blockquote {
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--charcoal);
}
.page-content img { border-radius: 10px; margin: 2rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH PAGE (search.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.search-bar-inline {
  display  : flex;
  max-width: 520px;
  margin-top: 1.25rem;
}
.search-bar-inline input[type="search"] {
  flex        : 1;
  background  : rgba(255,255,255,.07);
  border      : 1.5px solid rgba(255,255,255,.12);
  border-right: none;
  color       : var(--white);
  padding     : .7rem 1rem;
  font-size   : 14px;
  border-radius: 7px 0 0 7px;
  outline     : none;
  transition  : border-color var(--dur) var(--ease);
}
.search-bar-inline input::placeholder { color: rgba(255,255,255,.3); }
.search-bar-inline input:focus { border-color: var(--red); }
.search-bar-inline button {
  padding      : .7rem 1.25rem;
  background   : var(--red);
  color        : var(--white);
  font-size    : 13px;
  font-weight  : 700;
  border-radius: 0 7px 7px 0;
  white-space  : nowrap;
  transition   : background var(--dur) var(--ease);
}
.search-bar-inline button:hover { background: var(--red-dk); }

.search-no-results {
  padding   : 4rem 0;
  text-align: center;
}
.search-no-results p {
  font-size: 1.05rem;
  color    : var(--text-mid);
  margin-bottom: .75rem;
}
.search-no-cats {
  display  : flex;
  gap      : .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-grid             { grid-template-columns: 1fr 360px; }
  .editorial-layout      { grid-template-columns: 1fr 280px; }
  .nl-inner              { grid-template-columns: 1fr 320px; gap: 3rem; }
  .article-layout        { grid-template-columns: 1fr 240px; gap: 3rem; }
  .cat-deep-grid         { grid-template-columns: 1fr 260px; }
  .footer-grid           { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .primary-nav           { display: none; }
  .hdr-burger            { display: flex; }
  .hdr-cta-btn           { display: none; }
  .hero-grid             { grid-template-columns: 1fr; }
  .hero-right            { display: none; }
  .cats-grid             { grid-template-columns: repeat(2,1fr); }
  .editorial-layout      { grid-template-columns: 1fr; }
  .posts-grid            { grid-template-columns: repeat(2,1fr); }
  .trending-grid         { grid-template-columns: 1fr; }
  .nl-inner              { grid-template-columns: 1fr; gap: 2.5rem; }
  .article-layout        { grid-template-columns: 1fr; }
  .article-sidebar       { position: static; }
  .article-main          { max-width: 100%; }
  .cat-deep-grid         { grid-template-columns: 1fr; }
  .related-grid          { grid-template-columns: repeat(2,1fr); }
  .archive-grid          { grid-template-columns: repeat(2,1fr); }
  .footer-grid           { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats-bar-inner       { flex-wrap: wrap; justify-content: space-around; }
  .stat-sep              { display: none; }
  .stat-box              { padding: .6rem 1.5rem; }
}

@media (max-width: 640px) {
  .cats-grid             { grid-template-columns: 1fr; }
  .posts-grid            { grid-template-columns: 1fr; }
  .related-grid          { grid-template-columns: 1fr; }
  .archive-grid          { grid-template-columns: 1fr; }
  .footer-grid           { grid-template-columns: 1fr; }
  .trending-grid         { grid-template-columns: 1fr; }
  .hero-form-row         { flex-direction: column; }
  .hero-form-row input   { border-right: 1.5px solid rgba(255,255,255,.12); border-radius: 8px; }
  .hero-form-row .btn-yellow { border-radius: 8px; }
  .hero-stats-grid       { grid-template-columns: repeat(2,1fr); }
  .footer-bar-inner      { flex-direction: column; text-align: center; }
  .affiliate-card        { grid-template-columns: 1fr; }
  .article-title         { font-size: 1.75rem; }
  /* Search page */
  .search-bar-inline     { flex-direction: column; }
  .search-bar-inline input { border-right: 1.5px solid rgba(255,255,255,.12); border-radius: 7px; margin-bottom: .4rem; }
  .search-bar-inline button { border-radius: 7px; }
  /* Share buttons — stack to two rows on very narrow screens */
  .article-share         { gap: .3rem; }
  /* Page template */
  .page-title            { font-size: 1.75rem; }
  /* Breadcrumb */
  .article-breadcrumb [aria-current],
  .archive-breadcrumb [aria-current] { max-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */
.archive-breadcrumb {
  display    : flex;
  align-items: center;
  gap        : .4rem;
  flex-wrap  : wrap;
  font-size  : 11px;
  font-weight: 600;
  color      : rgba(255,255,255,.28);
  margin-bottom: .75rem;
}
.archive-breadcrumb a { color: rgba(255,255,255,.45); transition: color var(--dur) var(--ease); }
.archive-breadcrumb a:hover { color: var(--rose); }
.archive-breadcrumb [aria-current] { color: rgba(255,255,255,.5); max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ═══════════════════════════════════════════════════════════════════════════
   WHATSAPP SHARE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.share-whatsapp { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.share-whatsapp:hover { background: #25d366; color: var(--white); transform: translateY(-1px); }
.share-native   { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }
.share-native:hover { background: rgba(255,255,255,.18); color: var(--white); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE OF CONTENTS  (collapsible, shown above article on mobile)
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-toc {
  display      : none; /* shown only at ≤ 900px via media query below */
  margin-bottom: 2rem;
  border       : 1px solid var(--border);
  border-radius: var(--r);
  overflow     : hidden;
}
.mobile-toc-toggle {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  width          : 100%;
  padding        : .85rem 1rem;
  background     : var(--bg-alt);
  font-size      : 13px;
  font-weight    : 700;
  color          : var(--text);
  cursor         : pointer;
  border         : none;
  text-align     : left;
}
.mobile-toc-toggle svg { transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.mobile-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-toc-body {
  display : none;
  padding : .75rem 1rem 1rem;
  background: var(--bg);
}
.mobile-toc-body.open { display: block; }
.mobile-toc-body .toc-list { counter-reset: toc-m; }
.mobile-toc-body .toc-list li { counter-increment: toc-m; }
.mobile-toc-body .toc-link {
  font-size  : 13px;
  padding    : .35rem 0 .35rem .5rem;
  color      : var(--text-mid);
}
.mobile-toc-body .toc-link::before { content: counter(toc-m) '.'; }

@media (max-width: 900px) {
  .mobile-toc { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES  (content readability + SEO-friendly printing)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .site-header,
  .site-footer,
  .article-sidebar,
  .mobile-toc,
  .article-share,
  .article-breadcrumb,
  .related-section,
  .reading-progress,
  .post-nl-cta,
  .hdr-search-bar,
  .mobile-nav         { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .article-layout     { grid-template-columns: 1fr; gap: 0; }
  .article-main       { max-width: 100%; }
  .article-wrap       { padding: 1rem 0; }
  .article-content    { font-size: 11pt; line-height: 1.65; }
  .article-content a  { color: #000; text-decoration: underline; }
  .article-content a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .article-content img { max-width: 100%; page-break-inside: avoid; }
  h1,h2,h3            { page-break-after: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION  (a11y · WCAG 2.3 · Core Web Vitals)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration       : .01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration      : .01ms !important;
    scroll-behavior          : auto  !important;
  }
  html                { scroll-behavior: auto; }
  .reading-progress   { transition: none; }
  .eyebrow-dot        { animation: none; }
  .live-dot           { animation: none; }
}