/* =============================================
   Prism Theme (v1) — modern spin-off of Default
   Same markup & PHP structure; refreshed visual system.
   Accent is driven by --red / --black (CMS theme_color_* settings).
   ============================================= */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:         #e2213a;   /* accent — overridden by CMS theme_color_light */
  --red-dark:    #c40f26;
  --red-soft:    #fdeef0;
  --black:       #14151a;   /* overridden by CMS theme_color_dark */
  --charcoal:    #1b1c22;
  --ink:         #23242b;
  --mid:         #55565f;
  --muted:       #6b6d75;
  --subtle:      #9a9ca4;
  --faint:       #b7b9c0;
  --border:      #ecedf1;
  --border-mid:  #dfe1e6;
  --bg:          #f6f7f9;
  --bg-alt:      #f0f1f4;
  --bg-card:     #ffffff;
  --white:       #ffffff;
  --max-w:       1280px;
  --font-head:   'Sora', system-ui, sans-serif;
  --font-ui:     'Sora', system-ui, sans-serif;
  --radius:      16px;
  --radius-sm:   11px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 2px rgba(20,21,26,.05), 0 2px 6px rgba(20,21,26,.04);
  --shadow-md:   0 22px 44px rgba(20,21,26,.12), 0 4px 10px rgba(20,21,26,.06);
  --shadow-lg:   0 30px 60px rgba(20,21,26,.16);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
  --transition-bounce: .28s cubic-bezier(.34,1.4,.64,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

.post-row-image, .post-row-image:hover,
.related-card a, .related-card a:hover { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- Reading Progress Bar ---------- */
#reading-progress {
  position: fixed; top: 0; left: 0; width: 0%; height: 3px;
  background: var(--red); z-index: 9999;
  transition: width .08s linear; border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(226,33,58,.55); pointer-events: none;
}

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--black); padding: 9px 34px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #c7cad2; letter-spacing: .08em;
}
.top-bar .top-bar-right {
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); font-size: 10.5px;
}
.top-bar a { transition: color var(--transition); }
.top-bar a:hover { color: var(--white); }
.top-bar .top-bar-right a:hover { color: #ff4d5e; }

/* ---------- Site Header (dark bar) ---------- */
.site-header {
  background: var(--black); border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative; top: 0; z-index: 100;
}
body.has-sticky-header .site-header { position: sticky; top: 0; }

.site-header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 34px;
  height: 74px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; width: 100%; position: relative;
}

.site-logo { display: flex; align-items: center; height: 46px; }
.site-logo img { height: 46px; width: auto; display: block; }
.site-logo .logo-text {
  font-family: var(--font-head); font-size: 27px; font-weight: 800;
  letter-spacing: -.03em; color: var(--white); line-height: 1;
}
.site-logo .logo-text span { color: var(--red); }

/* ---------- Primary Nav — pill hover ---------- */
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a,
.primary-nav button.nav-parent {
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0; color: #e6e7ea; padding: 9px 15px;
  border-radius: var(--radius-pill); position: relative;
  transition: color var(--transition), background var(--transition);
}
.primary-nav a:hover { background: var(--white); color: var(--black); }
.primary-nav a.active { background: var(--red); color: var(--white); }

.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: var(--white);
  border-radius: 2px; transition: transform .3s;
}

/* ---------- Search Toggle ---------- */
.header-actions { display: flex; align-items: center; gap: 10px; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill); background: rgba(255,255,255,.07);
  color: #c7cad2; cursor: pointer; font-family: var(--font-ui);
  font-size: 13px; font-weight: 500; flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.search-toggle:hover, .search-toggle.active {
  background: var(--white); border-color: var(--white); color: var(--black);
}
.search-toggle-icon { width: 15px; height: 15px; }
.search-toggle-text { display: inline-block; }

/* ---------- Search Dropdown ---------- */
.search-dropdown {
  position: absolute; top: 100%; right: 0; left: auto; width: 380px; z-index: 98;
  background: var(--white); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.search-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.search-dropdown-form { display: flex; align-items: center; gap: 10px; padding: 16px; }
.search-dropdown-input {
  flex: 1; height: 46px; padding: 0 18px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 15px;
  color: var(--black); background: var(--bg); outline: none;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none;
}
.search-dropdown-input:focus { border-color: var(--red); background: var(--white); }
.search-dropdown-input::placeholder { color: var(--subtle); }
.search-dropdown-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 22px;
  background: var(--red); color: var(--white); font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  border: none; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background var(--transition); flex-shrink: 0;
}
.search-dropdown-btn:hover { background: var(--red-dark); }

@media (max-width: 768px) {
  .search-dropdown { left: 0; right: 0; width: auto; border-left: none; border-right: none; border-radius: 0; }
  .search-dropdown-form { padding: 12px 16px; }
  .search-dropdown-btn { padding: 0 16px; }
}

/* ---------- Search Results Page ---------- */
.search-page-form { display: flex; gap: 10px; padding: 24px 0 8px; }
.search-page-input {
  flex: 1; height: 50px; padding: 0 20px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 15px;
  color: var(--black); background: var(--white); outline: none;
  transition: border-color var(--transition); -webkit-appearance: none;
}
.search-page-input:focus { border-color: var(--red); }
.search-page-input::placeholder { color: var(--subtle); }
.search-page-btn {
  height: 50px; padding: 0 30px; background: var(--red); color: var(--white);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  border: none; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background var(--transition); flex-shrink: 0;
}
.search-page-btn:hover { background: var(--red-dark); }

/* ---------- Wrapper ---------- */
.wrapper { max-width: var(--max-w); margin: 0 auto; padding: 0 34px; }

/* ---------- Homepage Hero Banner ---------- */
.site-hero {
  position: relative; display: block; width: 100%; max-width: 100%;
  height: 620px; background-color: var(--charcoal); overflow: hidden; isolation: isolate;
}
.site-hero--color { background: linear-gradient(135deg, #14151a 0%, #241419 100%); }
.site-hero--video { background: var(--charcoal); }
.site-hero-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.site-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(226,33,58,.28) 0%, transparent 55%),
    linear-gradient(to top, rgba(15,16,20,.92) 0%, rgba(15,16,20,.18) 58%, transparent 100%);
  transition: background .25s;
}
.site-hero-inner {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  z-index: 2; padding-bottom: 48px;
}
.site-hero-text-box { max-width: var(--max-w); margin: 0 auto; width: 100%; padding: 0 34px; }
.site-hero-title {
  font-family: var(--font-head); font-size: clamp(34px, 5vw, 54px); font-weight: 800;
  line-height: 1.03; letter-spacing: -.03em; color: var(--white);
  margin: 0 0 12px; max-width: 900px; text-wrap: balance;
}
.site-hero-subtitle {
  font-family: var(--font-ui); font-size: clamp(16px, 1.6vw, 19px); font-weight: 400;
  color: rgba(255,255,255,.82); line-height: 1.5; margin: 0 0 8px; max-width: 640px;
}
.site-hero-custom-text {
  font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); font-weight: 700;
  color: var(--white); line-height: 1.15; letter-spacing: -.02em; word-break: break-word;
}
.site-hero-rule { width: 46px; height: 3px; background: var(--red); border-radius: 2px; margin: 18px 0 0; }
.site-hero-cta {
  display: inline-flex; align-items: center; gap: 9px; background: var(--white);
  color: var(--black); font-weight: 600; font-size: 14px; padding: 13px 24px;
  border-radius: var(--radius-pill); margin-top: 20px; transition: gap var(--transition), transform var(--transition);
}
a.site-hero { display: block; text-decoration: none; color: inherit; }
a.site-hero.site-hero--linked { cursor: pointer; }
a.site-hero.site-hero--linked:hover .site-hero-overlay {
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(226,33,58,.36) 0%, transparent 55%),
    linear-gradient(to top, rgba(15,16,20,.95) 0%, rgba(15,16,20,.28) 58%, transparent 100%);
}
a.site-hero.site-hero--linked:hover .site-hero-cta { gap: 15px; }

/* ---------- Index / Archive Section Bar ---------- */
.index-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; }
.index-hero .wrapper { display: flex; align-items: center; gap: 16px; }
.index-hero-accent { width: 6px; height: 40px; background: var(--red); border-radius: 3px; flex-shrink: 0; display: block; }
.index-hero-text { flex: 1; }
.index-hero-title {
  font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 800;
  letter-spacing: -.02em; color: var(--black); line-height: 1;
}
.index-hero-sub { font-size: 12px; color: var(--subtle); margin-top: 4px; font-weight: 500; }
.index-hero-line { flex: 1; height: 1px; background: var(--border); }
.index-hero-back { font-size: 13px; font-weight: 500; color: var(--muted); transition: color var(--transition); white-space: nowrap; }
.index-hero-back:hover { color: var(--red); }

/* ---------- Post Listing ---------- */
.post-listing { padding: 24px 0 16px; display: flex; flex-direction: column; gap: 16px; }
.post-row {
  display: grid; grid-template-columns: 300px 1fr; background: var(--bg-card);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); align-items: stretch;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  will-change: transform;
}
.post-row:hover {
  box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--border-mid);
}
/* No height:100% here. .post-row rows are auto-sized, so a percentage height
   on a grid item is a cyclic dependency (row height depends on the item, item
   height depends on the row) — and the <img> below nested a second percentage
   on top of it. Blink resolves that leniently; WebKit does not, which blanked
   the text column on iPad wherever the split post layout is used. The
   declaration was redundant anyway: .post-row sets align-items: stretch, so
   the grid already stretches this item to the full row height. */
.post-row-image { display: block; position: relative; overflow: hidden; min-height: 200px; background: var(--bg-alt); flex-shrink: 0; }
/* Neither the image nor the placeholder may feed back into the row's intrinsic
   height — that is the whole point of the rule above, so they share one
   declaration block rather than two that could drift apart.
   Longhand offsets rather than `inset`, which needs Safari 14.1+: these rules
   exist to fix an old-WebKit bug, so they must not depend on a newer feature.
   width/height are required too — offsets alone do not stretch a replaced
   element, an <img> would fall back to its intrinsic size. */
.post-row-image img,
.post-row-image-placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.post-row-image img { object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); display: block; }
.post-row:hover .post-row-image img { transform: scale(1.05); }
.post-row-cat-strip {
  position: absolute; bottom: 12px; left: 12px; background: var(--black);
  padding: 6px 12px; border-radius: var(--radius-pill); display: flex; align-items: center; pointer-events: none;
}
.post-row-cat-strip span { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.post-row-image-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--subtle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.post-row-content { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 9px; min-height: 200px; }
.post-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--subtle); }
.post-row-meta strong { color: var(--mid); font-weight: 600; }
.post-row-meta .meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.post-row-title {
  font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 25px); font-weight: 700;
  letter-spacing: -.02em; color: var(--black); line-height: 1.15;
}
.post-row-title a { transition: color var(--transition); }
.post-row-title a:hover, .post-row:hover .post-row-title a { color: var(--red); }
.post-row-excerpt {
  font-size: 14.5px; color: var(--muted); line-height: 1.6; min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row-readmore {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--red); align-self: flex-start; margin-top: 2px;
  transition: gap var(--transition);
}
.post-row-readmore::after { content: '→'; transition: transform var(--transition); }
.post-row:hover .post-row-readmore, .post-row-readmore:hover { gap: 11px; }
.no-posts {
  font-size: 15px; color: var(--muted); padding: 72px 24px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ---------- Multi-Column Grid Variants ---------- */
.post-listing--grid_2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 24px 0 16px; }
.post-listing--grid_2col .post-row { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.post-listing--grid_2col .post-row-image { height: 275px; min-height: 0; }
.post-listing--grid_2col .post-row-content { justify-content: flex-start; padding: 18px 22px 22px; min-height: 0; }
.post-listing--grid_2col .post-row-readmore { margin-top: auto; }
.post-listing--grid_2col .post-row-title { font-size: clamp(17px, 1.8vw, 21px); }
.post-listing--grid_2col .post-row-excerpt { -webkit-line-clamp: 3; }
.post-listing--grid_3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 24px 0 16px; }
.post-listing--grid_3col .post-row { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.post-listing--grid_3col .post-row-image { height: 200px; min-height: 0; }
.post-listing--grid_3col .post-row-content { justify-content: flex-start; padding: 18px 20px 22px; min-height: 0; }
.post-listing--grid_3col .post-row-readmore { margin-top: auto; }
.post-listing--grid_3col .post-row-title { font-size: clamp(16px, 1.5vw, 19px); }
.post-listing--grid_3col .post-row-excerpt { -webkit-line-clamp: 3; }

.post-listing--card_grid .post-row { grid-template-columns: 2fr 3fr; }
.post-listing--card_grid .post-row-image { min-height: 280px; }

/* Manual-posts ranking number */
.post-rank {
  font-family: var(--font-head); font-size: 2rem !important; font-weight: 800 !important;
  color: var(--red) !important; opacity: 1 !important; display: flex; align-items: center;
  justify-content: center; min-width: 2.5rem !important;
}

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 34px 0 54px; flex-wrap: wrap; }
.page-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--white); border: 1px solid var(--border); padding: 9px 15px;
  border-radius: var(--radius-sm); min-width: 40px; text-align: center;
  transition: all var(--transition), transform var(--transition-bounce); will-change: transform;
}
.page-btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.page-btn.active { background: var(--red); color: var(--white); border-color: var(--red); pointer-events: none; }
.page-dots { color: var(--subtle); padding: 0 4px; font-size: 14px; }

.load-more-wrap { display: none; text-align: center; padding: 24px 0 48px; }
.load-more-btn {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--white);
  background: var(--red); border: none; padding: 15px 48px; border-radius: var(--radius-pill);
  cursor: pointer; transition: all var(--transition);
}
.load-more-btn:hover { background: var(--red-dark); }
.load-more-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 768px) { .pagination { display: none; } .load-more-wrap { display: block; } }

/* ---------- In-Post Pagination ---------- */
.post-page-pagination { margin: 36px 0; padding: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.post-page-count { font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.post-page-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-page-links a {
  display: inline-block; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--ink);
  font-size: 14px; font-weight: 500; transition: all var(--transition), transform var(--transition-bounce);
}
.post-page-links a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.post-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.post-page-num.active { background: var(--red); color: var(--white); border-color: var(--red); padding: 0 10px; }

/* ---------- Article Hero Image ---------- */
.hero-wrap { background: var(--charcoal); position: relative; overflow: hidden; margin: 0; }
.hero-wrap img { width: 100%; max-height: 560px; object-fit: cover; }
.hero-caption { position: absolute; bottom: 12px; right: 16px; font-size: 11px; color: rgba(255,255,255,.5); font-style: italic; letter-spacing: .04em; }

/* ---------- Article Page Layout ---------- */
.page-layout { padding: 44px 0 64px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--subtle); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); font-weight: 500; transition: color var(--transition); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb-sep { color: var(--faint); }

/* ---------- Article Typography ---------- */
.article-title {
  font-family: var(--font-head); font-size: clamp(30px, 4.4vw, 48px); font-weight: 800;
  line-height: 1.05; color: var(--black); margin-bottom: 18px; letter-spacing: -.03em; text-wrap: balance;
}
.byline {
  font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 14px 0; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.byline-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.byline-meta strong { color: var(--black); font-weight: 600; }
.byline a { color: var(--red); font-weight: 600; transition: color var(--transition); }
.byline a:hover { color: var(--red-dark); }
.byline .meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.byline-meta span, .byline-meta strong { white-space: nowrap; }
.updated-label { font-weight: 600; color: var(--subtle); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }

/* ---------- Share Buttons ---------- */
.share-buttons { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.share-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin-right: 2px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--white); color: var(--mid);
  cursor: pointer; text-decoration: none; overflow: hidden; font-size: 13px; font-weight: 700;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-bounce);
  flex-shrink: 0; will-change: transform;
}
.share-btn:hover { transform: translateY(-2px); }
.share-facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-twitter:hover   { background: var(--black); border-color: var(--black); color: #fff; }
.share-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.share-copy:hover      { background: var(--red); border-color: var(--red); color: #fff; }
.share-copy.copied { background: #16a34a; border-color: #16a34a; color: #fff; }
@media (max-width: 540px) { .byline { flex-direction: column; align-items: flex-start; gap: 12px; } .share-buttons { align-self: flex-start; } }

/* ---------- Article Body ---------- */
.top-answer {
  font-size: 18px; line-height: 1.65; color: var(--black); background: var(--red-soft);
  border-left: 4px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 0 0 30px; font-weight: 500;
}
.article-body p { font-family: var(--font-ui); margin-bottom: 1.4em; font-size: 18px; color: #33343b; line-height: 1.85; }
.article-body h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 1.5em 0 .5em; color: var(--black); }
.article-body h3 { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 23px); font-weight: 700; letter-spacing: -.01em; margin: 1.4em 0 .5em; color: var(--black); }
.article-body strong { color: var(--black); font-weight: 700; }
.article-body a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(226,33,58,.35); text-underline-offset: 3px; transition: text-decoration-color var(--transition); }
.article-body a:hover { text-decoration-color: var(--red); }
.article-body ul, .article-body ol { font-family: var(--font-ui); margin: 0 0 1.4em 1.5em; font-size: 18px; color: #33343b; line-height: 1.75; }
.article-body li { margin-bottom: .5em; }
.article-body blockquote {
  border-left: 4px solid var(--red); margin: 1.7em 0; padding: 18px 26px; background: var(--red-soft);
  font-style: italic; color: var(--mid); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 19px; line-height: 1.6;
}
.article-body > :first-child { margin-top: 0; }
.article-body img { width: 100%; border-radius: var(--radius); margin: 28px 0; }
.article-body figure { margin: 28px 0; }
.article-body figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.article-body iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); margin: 28px 0; }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.article-body img.img-left   { float: left;  width: auto; max-width: 50%; margin: 0 1.25em 1em 0; border-radius: var(--radius-sm); }
.article-body img.img-right  { float: right; width: auto; max-width: 50%; margin: 0 0 1em 1.25em; border-radius: var(--radius-sm); }
.article-body img.img-center { float: none;  display: block; width: auto; max-width: 100%; margin: 0 auto 1em; }
.article-body img.img-full   { float: none;  display: block; width: 100%; height: auto; margin: 0 0 1em; }
.article-body::after { content: ''; display: table; clear: both; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }
.table-responsive table { margin: 0; }
.article-body .cms-table { border-collapse: collapse; width: 100%; }
.article-body .cms-table th, .article-body .cms-table td { border: 1px solid var(--border); padding: 9px 13px; vertical-align: top; text-align: left; }
.article-body .cms-table th { background: var(--bg-alt); font-weight: 600; }

/* ---------- Navigation (prev/next) ---------- */
.post-nav { margin-top: 8px; background: var(--charcoal); padding: 20px 24px; border-radius: var(--radius); display: flex; gap: 14px; align-items: flex-start; transition: background var(--transition); }
.post-nav:hover { background: var(--black); }
.post-nav .arrow { color: var(--red); font-size: 20px; line-height: 1.2; flex-shrink: 0; margin-top: 2px; display: inline-block; transition: transform var(--transition); }
.post-nav .label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); margin-bottom: 6px; }
.post-nav strong { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--white); line-height: 1.2; letter-spacing: -.01em; }
.post-nav a { color: var(--subtle); transition: color var(--transition); }
.post-nav:hover { color: var(--white); }
.post-nav:hover .arrow { transform: translateX(-4px); }
.post-nav-next { justify-content: flex-end; }
.post-nav-next .arrow { order: 2; margin-left: auto; }
.post-nav-next:hover .arrow { transform: translateX(4px); }

/* ---------- Author Bio Card ---------- */
.author-card { margin: 40px 0 0; padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; }
.author-card-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.author-card-name a:hover { color: var(--red); }
.author-card-bio { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
.author-card-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.author-social-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); text-decoration: none; transition: opacity .15s, transform var(--transition-bounce); }
.author-social-link:hover { opacity: .85; transform: translateY(-2px); }
.author-social-li  { background: #0a66c2; color: #fff; }
.author-social-x   { background: var(--black); color: #fff; }
.author-social-ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

/* ---------- Post FAQs ---------- */
.post-faqs { margin: 48px 0 0; border-top: 2px solid var(--border); padding-top: 32px; }
.post-faqs-heading { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--black); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.post-faqs-heading::before { content: ''; display: block; width: 5px; height: 24px; background: var(--red); border-radius: 3px; flex-shrink: 0; }
.post-faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.post-faq-item:last-child { border-bottom: none; }
.post-faq-question { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--black); margin: 0 0 8px; line-height: 1.4; }
.post-faq-answer { font-size: 16px; line-height: 1.75; color: var(--ink); margin: 0; }

/* ---------- People tag ---------- */
.post-people { margin: 1.25rem 0 0; font-size: .9rem; color: var(--muted); }
.post-people-label { font-weight: 600; margin-right: .25rem; color: var(--ink); }
.post-people a { color: var(--red); text-decoration: none; font-weight: 500; }
.post-people a:hover { text-decoration: underline; }
.post-people-sep { margin-right: .25rem; }

/* ---------- Related Posts ---------- */
.related-posts { margin-top: 52px; }
.section-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--black); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ''; display: block; width: 5px; height: 24px; background: var(--red); border-radius: 3px; flex-shrink: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card { background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); will-change: transform; }
.related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.related-card-img-wrap { position: relative; overflow: hidden; height: 175px; background: var(--bg-alt); }
.related-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.related-card:hover .related-card-img-wrap img { transform: scale(1.05); }
.related-card-cat { position: absolute; bottom: 12px; left: 12px; background: var(--black); padding: 5px 11px; border-radius: var(--radius-pill); }
.related-card-cat span { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.related-card-body { padding: 16px 18px 18px; }
.related-card h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.2; margin-bottom: 8px; color: var(--black); letter-spacing: -.01em; transition: color var(--transition); }
.related-card:hover h4 { color: var(--red); }
.related-card .date { font-size: 11.5px; color: var(--subtle); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); padding: 56px 34px 28px; margin-top: 24px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo { margin-bottom: 14px; }
.footer-logo img { height: 38px; width: auto; display: block; }
.footer-logo .logo-text { font-family: var(--font-head); font-size: 54px; font-weight: 800; letter-spacing: -.04em; color: var(--white); line-height: .9; }
.footer-logo .logo-text span { color: var(--red); }
.footer-about p { font-size: 13px; line-height: 1.75; color: #8b8d96; max-width: 320px; margin-top: 18px; }
.footer-col h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 13.5px; color: #c7cad2; transition: color var(--transition), padding-left var(--transition); display: inline-block; }
.footer-col ul li a:hover { color: var(--white); padding-left: 4px; }
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.social-chip { padding: 7px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: #c7cad2; transition: all var(--transition), transform var(--transition-bounce); cursor: pointer; will-change: transform; }
.social-chip:hover { border-color: var(--red); color: var(--white); background: var(--red); transform: translateY(-2px); }
.footer-network { max-width: var(--max-w); margin: 0 auto; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.footer-network-label { color: var(--subtle); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.footer-network a { color: #c7cad2; font-weight: 500; transition: color var(--transition); }
.footer-network a:hover { color: var(--red); }
.footer-bottom { max-width: var(--max-w); margin: 22px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--subtle); flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: var(--subtle); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--red); }

/* ==========================================================================
   Sidebar Architecture & Layout
   ========================================================================== */
.homepage-sidebar-wrap,
.single-post-with-sidebar {
  display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start;
  max-width: var(--max-w); margin: 24px auto; padding: 0 34px; box-sizing: border-box;
}
.homepage-main-content,
.single-post-main { min-width: 0; padding: 0 !important; }
.homepage-main-content .post-listing { padding-top: 0 !important; }
.homepage-sidebar,
.single-post-sidebar { width: 320px; min-width: 320px; max-width: 320px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
body.single-post-page .page-layout-sidebar { max-width: var(--max-w); }

/* Sidebar cards */
.sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; overflow: hidden; }
.sidebar-ad-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sidebar-card-title {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--black);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--red);
}
.sidebar-latest-list { list-style: none; display: flex; flex-direction: column; gap: 15px; counter-reset: sidebar-latest; }
.sidebar-latest-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 0 15px 34px; border-bottom: 1px solid var(--border); counter-increment: sidebar-latest; }
.sidebar-latest-item::before {
  content: counter(sidebar-latest); position: absolute; left: 0; top: -2px;
  font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1; color: var(--border-mid);
}
.sidebar-latest-item:first-child::before { color: var(--red); }
.sidebar-latest-item:last-child { padding-bottom: 0; border-bottom: none; }
.sidebar-latest-item a { font-size: 14px; font-weight: 600; color: var(--black); line-height: 1.35; transition: color var(--transition); }
.sidebar-latest-item a:hover { color: var(--red); }
.sidebar-latest-date { font-size: 11.5px; color: var(--subtle); }

@media (min-width: 1024px) {
  .homepage-sidebar-wrap .homepage-sidebar,
  .page-layout-sidebar .single-post-sidebar { position: sticky; top: 90px; }
  .page-layout-sidebar .single-post-sidebar .sidebar-ad-sticky,
  .page-layout-sidebar .single-post-sidebar .ad-slot-sticky,
  .homepage-sidebar .sidebar-ad-sticky { position: static; }
  .sidebar-ad-sticky { position: sticky; top: 90px; }
  .sidebar-ad-sticky .ad-slot-sticky { position: static; }
  .ad-slot-sticky { position: sticky; top: 90px; }
}

@media (max-width: 1024px) {
  .homepage-sidebar-wrap,
  .single-post-with-sidebar { grid-template-columns: 1fr; padding: 0 34px; margin: 16px auto; gap: 32px; }
  .homepage-sidebar,
  .single-post-sidebar { width: 100%; min-width: 100%; max-width: 100%; }
}
@media (max-width: 960px) { .sidebar-ad-sticky, .ad-slot-sticky { position: static; } }
@media (max-width: 640px) {
  .homepage-sidebar-wrap,
  .single-post-with-sidebar { padding: 0 16px; margin: 16px auto; }
}

/* ---------- Homepage Ads & Module Centering ---------- */
.homepage-ads-block { width: 100%; }
.ads-block-hide-mobile { display: none; }
@media (min-width: 600px) { .ads-block-hide-mobile { display: block; } }
.ads-block-card { overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ads-block-title { margin-bottom: 1rem; }
.ads-block-card.ads-rotating-out { opacity: 0; transition: opacity .25s ease; }
.ads-block-card.ads-rotating-in { opacity: 1; transition: opacity .25s ease; }
.ad-slot-wrap { width: 100%; }
@media (max-width: 900px)  { .ad-slot-wrap.ad-target-desktop { display: none !important; } }
@media (min-width: 901px)  { .ad-slot-wrap.ad-target-mobile  { display: none !important; } }

/* ---------- Block Registry Shared Layout ---------- */
.block-shell { width: 100%; margin: 2.5rem auto; box-sizing: border-box; }
.block-shell .section-heading { text-align: center; margin: 0 auto 1.5rem; }
.block-shell .block-inner { margin-left: auto; margin-right: auto; }
.block-shell .newsletter-block, .block-shell .homepage-ads-block, .block-shell .category-strip-items { margin-left: auto; margin-right: auto; }
.section-heading { font-family: var(--font-head); font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.homepage-section { }

/* Category strip pills */
.category-strip-items { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; padding: .5rem 0 1rem; }
.category-strip-items a { display: inline-block; padding: .5rem 1rem; background: var(--bg-alt); border-radius: var(--radius-pill); font-size: .9rem; font-weight: 600; color: var(--ink); transition: background var(--transition), color var(--transition); }
.category-strip-items a:hover { background: var(--red); color: var(--white); }

/* Newsletter block — dark accent card */
.newsletter-block {
  text-align: center; background: var(--black); color: var(--white);
  padding: 3rem 2rem; border-radius: var(--radius); max-width: 760px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.newsletter-block::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(226,33,58,.35), transparent 70%); pointer-events: none;
}
.newsletter-block h2 { position: relative; margin: 0 0 1rem; font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.newsletter-block .btn-cta {
  position: relative; display: inline-block; background: var(--red); color: var(--white);
  text-decoration: none; padding: .8rem 2rem; border-radius: var(--radius-pill); font-weight: 600;
  margin-top: .5rem; transition: background var(--transition), transform var(--transition-bounce);
}
.newsletter-block .btn-cta:hover { background: var(--red-dark); transform: scale(1.03); }

.custom-html-block { text-align: left; }

/* ---------- Custom Layout Builder Blocks ---------- */
.custom-block-section { width: 100%; box-sizing: border-box; padding: 3rem 0; }
.custom-block-section .custom-block-inner { margin-left: auto; margin-right: auto; }
.custom-block-section .custom-block-grid { display: grid; gap: 2rem; align-items: start; }
.custom-block-section .custom-block-grid--1 { grid-template-columns: minmax(0, 1fr); }
.custom-block-section .custom-block-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.custom-block-section .custom-block-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom-block-section .custom-block-col { min-width: 0; word-wrap: break-word; }
.custom-block-section .custom-block-col > *:first-child { margin-top: 0; }
.custom-block-section .custom-block-col > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .custom-block-section .custom-block-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .custom-block-section { padding: 2rem 0; }
  .custom-block-section .custom-block-grid--2, .custom-block-section .custom-block-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ---------- Reusable Blocks (image-text, cta-banner) ---------- */
.reusable-block .image-text-copy h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.image-text-img img { border-radius: var(--radius); }
.cta-banner-block { background: var(--charcoal); color: var(--white); border-radius: 0; }
.cta-banner-headline { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; }
.btn, .btn-primary {
  display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  padding: .7rem 1.6rem; border-radius: var(--radius-pill); text-decoration: none;
  background: var(--red); color: var(--white); border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition-bounce);
}
.btn:hover, .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); color: var(--white); }
.btn-cta { transition: transform var(--transition-bounce), opacity var(--transition); }
.btn-cta:hover { transform: translateY(-2px); opacity: .92; }

/* ---------- Taxonomy / Archive Header ---------- */
.archive-header { display: flex; align-items: flex-start; gap: 1.75rem; padding: 2.5rem 0 1.75rem; }
.archive-header-image { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--white); box-shadow: var(--shadow-sm); }
.archive-header-title { font-family: var(--font-head); margin: 0 0 .5rem; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.archive-header-description { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 640px; }
@media (max-width: 600px) { .archive-header { flex-direction: column; gap: 1rem; } .archive-header-image { width: 84px; height: 84px; } }

/* ---------- Contact Form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px; }
.contact-form .field, .comment-form .field { display: flex; flex-direction: column; gap: .5rem; }
.contact-form label, .comment-form label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form textarea,
.comment-form input, .comment-form textarea {
  font-family: var(--font-ui); font-size: 15px; color: var(--black); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition); -webkit-appearance: none;
}
.contact-form input:focus, .contact-form textarea:focus,
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,33,58,.12); }
.contact-form textarea, .comment-form textarea { min-height: 160px; resize: vertical; }
.contact-form button, .comment-form button {
  align-self: flex-start; font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  background: var(--red); color: var(--white); border: none; padding: 14px 34px;
  border-radius: var(--radius-pill); cursor: pointer; transition: background var(--transition), transform var(--transition-bounce);
}
.contact-form button:hover, .comment-form button:hover { background: var(--red-dark); transform: translateY(-2px); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-alert, .comment-alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 1.25rem; }
.contact-alert.is-success, .comment-alert.is-success { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.contact-alert.is-error, .comment-alert.is-error { background: var(--red-soft); border: 1px solid #f5c2c7; color: var(--red-dark); }
.contact-alert ul, .comment-alert ul { margin: .5rem 0 0 1.2rem; }

/* ---------- Cookie Consent ---------- */
.cookie-consent {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 9998; max-width: 560px; margin: 0 auto;
  background: var(--black); color: #e6e7ea; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner { display: flex; align-items: center; gap: 18px; padding: 18px 22px; flex-wrap: wrap; }
.cookie-consent__text { font-size: 13px; line-height: 1.6; color: #c7cad2; flex: 1; min-width: 220px; margin: 0; }
.cookie-consent__text a { color: var(--red); font-weight: 600; }
.cookie-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-consent__btn { font-family: var(--font-ui); font-weight: 600; font-size: 13px; padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: all var(--transition); }
.cookie-consent__btn--accept { background: var(--red); color: var(--white); }
.cookie-consent__btn--accept:hover { background: var(--red-dark); }
.cookie-consent__btn--decline { background: transparent; color: #c7cad2; border-color: rgba(255,255,255,.2); }
.cookie-consent__btn--decline:hover { border-color: var(--white); color: var(--white); }
@media (max-width: 540px) { .cookie-consent__inner { flex-direction: column; align-items: stretch; } .cookie-consent__actions { justify-content: flex-end; } }

/* ---------- Error / 404 ---------- */
.error-card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius); padding: 40px; }
.error-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 10px; }
.error-copy { font-size: 15px; color: var(--muted); max-width: 640px; }
.error-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Focus states ---------- */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
body.single-post-page .page-layout { max-width: 940px; }

/* ---------- Global Responsive ---------- */
@media (max-width: 900px) {
  .post-row { grid-template-columns: 260px 1fr; }
  .post-listing--grid_3col { grid-template-columns: repeat(2, 1fr); }
  .post-listing--grid_3col .post-row { grid-template-columns: 1fr; }
  .post-listing--grid_2col .post-row { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-about { grid-column: 1 / -1; }
  .header-actions { gap: 8px; }
  .search-toggle-text { display: none; }
  .search-toggle { width: 40px; padding: 0; }
}
@media (max-width: 640px) {
  .site-hero { height: 460px; }
  .site-hero-inner { padding-bottom: 32px; }
  .site-header-inner { padding: 0 18px; height: 62px; gap: 12px; }
  .primary-nav {
    display: none; flex-direction: column; position: fixed; top: 62px; left: 0; right: 0;
    background: var(--white); border-top: 1px solid var(--border); padding: 12px 18px 16px;
    box-shadow: var(--shadow-md); z-index: 99; gap: 4px;
  }
  .primary-nav.open { display: flex; }
  /* Changing this breakpoint? The .header-action swap at the end of this
     file must move with it, or the header button shows twice (or not at
     all) in the gap. tests/header-action-button-smoke.php enforces the
     pairing. */
  .primary-nav a,
  .primary-nav button.nav-parent { border-radius: var(--radius-sm); color: var(--black); }
  .primary-nav a:hover { background: var(--red); color: var(--white); }
  .hamburger { display: flex; }
  .header-actions { margin-left: auto; }
  .top-bar { padding: 8px 18px; }
  .wrapper { padding: 0 16px; }
  .post-row { grid-template-columns: 1fr; }
  .post-listing--card_grid .post-row { grid-template-columns: 1fr; }
  .post-listing--card_grid .post-row-image { height: 200px; min-height: 0; }
  .post-row-image { height: 200px; min-height: 0; }
  .post-row-content { padding: 18px 20px; min-height: 0; }
  .post-listing--grid_2col { grid-template-columns: 1fr; }
  .post-listing--grid_3col { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo .logo-text { font-size: 40px; }
  .article-title { font-size: 30px; }
  .post-nav, .post-nav-next { padding: 16px 18px; }
  .error-card { padding: 24px 20px; }
}

/* ==========================================================================
   CMS Slider — Prism sizing & colors
   ========================================================================== */
.cms-slider {
    width: 100%; max-width: 100%;
    --swiper-navigation-color: var(--white);
    --swiper-pagination-color: var(--red);
    --slider-progress-fill: var(--red);
    --slider-feature-bg: var(--black);
}
.cms-slider.cms-slider--featured_posts .cms-slider__overlay {
    padding-left: max(2rem, calc((100% - 1400px) / 2 + 2rem));
    padding-right: max(2rem, calc((100% - 1400px) / 2 + 2rem));
    padding-bottom: 4rem;
    background: linear-gradient(to top, rgba(15,16,20,.9) 0%, rgba(15,16,20,.25) 60%, transparent 100%);
}
.cms-slider--featured_posts .cms-slider__title {
    font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05;
    font-weight: 800; letter-spacing: -.03em; color: var(--white);
}
.cms-slider--featured_posts .cms-slider__excerpt {
    font-family: var(--font-ui); font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.6;
    color: rgba(255,255,255,.85); margin-bottom: 1.5rem; max-width: 680px;
}
.cms-slider--featured_posts .cms-slider__read-more {
    display: inline-block; padding: 12px 24px; background: var(--red); color: var(--white);
    border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: .04em; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: background var(--transition), transform var(--transition-bounce);
}
.cms-slider--featured_posts .cms-slider__read-more:hover { background: var(--red-dark); transform: scale(1.04); }
.cms-slider--featured_posts .cms-slider__media { width: 100%; aspect-ratio: 21 / 9; height: 620px; }
@media (max-width: 1024px) { .cms-slider--featured_posts .cms-slider__media { height: 520px; } }
@media (max-width: 640px) {
    .cms-slider--featured_posts .cms-slider__media { aspect-ratio: auto; height: 440px; }
    .cms-slider.cms-slider--featured_posts .cms-slider__overlay { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 2.75rem; }
}


/* ==========================================================================
   Post list layouts — tablet / iPad responsive pass
   --------------------------------------------------------------------------
   Breakpoints requested: 1024px (tablet/iPad) and 768px (mobile).

   Selector note: this theme's markup does not use .post-layout-* / .post-card /
   .post-thumbnail. The listing emits .post-listing (+ a --grid_2col /
   --grid_3col / --card_grid modifier) wrapping .post-row, which is a CSS grid
   of .post-row-image + .post-row-content. The rules below are the requested
   behaviour expressed against those real selectors, with flex-basis
   percentages translated to grid tracks.

   Appended at the end of the stylesheet so it composes with, and takes
   precedence over, the theme's existing 900px / 640px rules.
   ========================================================================== */

/* A grid item's automatic minimum size is its min-content width, so a long
   word or URL in the copy can force the text track wider than its share.
   min-width:0 lets the track shrink as intended. */
.post-row-content { min-width: 0; }

/* --- Tablet / iPad (<= 1024px) --- */
@media screen and (max-width: 1024px) {
  /* 3-up grids drop to 2-up so cards keep a legible width */
  .post-listing--grid_3col { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .post-listing--grid_2col { gap: 1.25rem; }

  /* Split (card_grid): thumbnail 40% -> 35%, giving the copy more room */
  .post-listing--card_grid .post-row { grid-template-columns: 35% minmax(0, 1fr); }

  /* List: cap the thumbnail at 200px so title and excerpt get the remainder */
  .post-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

  /* Ranked rows carry a third child (.post-rank) and must keep a third track.
     The bare .post-row rule above would otherwise win on source order and push
     the content onto an implicit second row. */
  .post-row--ranked { grid-template-columns: minmax(4.5rem, auto) minmax(0, 200px) minmax(0, 1fr); }
}

/* --- Mobile (<= 768px) --- */
@media screen and (max-width: 768px) {
  /* All grids collapse to a single column */
  .post-listing--grid_2col,
  .post-listing--grid_3col { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

  /* Split and list stack vertically with a full-width thumbnail */
  .post-row,
  .post-listing--card_grid .post-row { grid-template-columns: minmax(0, 1fr); }
  .post-row-image,
  .post-listing--card_grid .post-row-image { width: 100%; max-width: 100%; }

  /* Ranked rows keep the rank beside the image, with the copy spanning below,
     rather than stranding a large numeral on a line of its own. */
  .post-row--ranked { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); }
  .post-row--ranked .post-row-image { width: auto; max-width: none; }
  .post-row--ranked .post-row-content { grid-column: 1 / -1; }
}

/* ---------- Header call-to-action button ---------- */
/* Rendered twice by render_header_action() (cms-core/helpers-header-action.php):
   the --bar copy sits beside the search toggle, the --menu copy inside
   .primary-nav. Exactly one is ever shown. The swap happens at THIS theme's own
   nav-collapse breakpoint (640px) so the button drops into the mobile
   dropdown at the same moment the nav does — leaving the mobile header bar
   exactly as it was. */
.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--red);
  border-radius: 6px;
  /* Rests as an outline and fills in on hover, the same direction as its
     neighbour .search-toggle. It used to run the other way — solid at rest,
     draining to transparent on hover — so hovering across the pair made one
     button empty while the other filled.

     The resting label is picked per theme from the header it sits on: white on
     the dark headers, var(--white) on this one. A red label was measured at only
     3.45-3.92:1 against the dark headers, under the 4.5:1 AA needs at 12px, and
     resting states are persistent — so the fill moves on hover, not the label. */
  background: transparent;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.header-action:hover,
.header-action:focus-visible {
  background: var(--red);
  color: var(--white);
}
/* Above the breakpoint only the bar copy exists visually.
   Scoped to .primary-nav deliberately: the menu copy is an <a> inside the nav,
   and the theme's own `.primary-nav a` rule has specificity 0,1,1 — which beats
   a lone `.header-action--menu` class at 0,1,0. In hits that rule sets
   `display: inline-block` and forced BOTH copies on screen at once on desktop;
   in every theme it also overrides the button's colour, padding and radius.
   `.primary-nav .header-action--menu` is 0,2,0 and wins on class count. */
.primary-nav .header-action--menu { display: none; }

@media (max-width: 640px) {
  .header-action--bar { display: none; }
  .primary-nav .header-action--menu {
    display: flex;
    width: 100%;
    height: 40px;
    margin-top: 10px;
    /* Re-assert the button look; `.primary-nav a` outranks `.header-action`. */
    justify-content: center;
    padding: 0 14px;
    border-radius: 6px;
    /* Outline at rest, filling on hover — same direction as the desktop copy. */
    background: transparent;
    /* !important only here: lumen's mobile block sets
       `.primary-nav a { color: var(--mid) !important; }`, and !important beats
       specificity outright — without matching it the label renders as muted
       grey on the button's own background. Harmless in the other four, which
       use no !important on nav links. */
    /* The collapsed panel is var(--white), not the dark header, so the resting
       label is --black here rather than white — matching this theme's own
       mobile nav links. */
    color: var(--black) !important;
    font-size: 12px;
    font-weight: 700;
  }
  /* 0,2,1 — ties `.primary-nav a:hover`, and wins on source order. */
  .primary-nav .header-action--menu:hover {
    background: var(--red);
    /* !important MUST match the resting rule above: !important outranks
       specificity, so an !important resting colour against a plain hover colour
       pins the label and the hover never lands. That was the live bug — the
       background changed on hover and the text did not. */
    color: var(--white) !important;
  }
}

/* ---------- Primary nav submenus ---------- */
/* An item with children is wrapped in .nav-item; one without renders as a bare
   <a>, exactly as before, so nothing about the existing nav layout moves.
   Selectors are scoped through .primary-nav so they outrank this theme's own
   `.primary-nav a` rule (0,1,1) — the same specificity trap that put the header
   button on screen twice. */
.primary-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.primary-nav .nav-item .nav-parent { display: inline-flex; align-items: center; gap: 6px; }

/* Parent rendered as a <button> (no destination, e.g. url '#'). Only the
   form-control chrome is reset here — font and colour deliberately are NOT set,
   because this theme's own `.primary-nav a, .primary-nav button.nav-parent`
   rule above supplies them. Declaring `color: inherit` here would outrank it
   (0,3,1 against 0,2,1) and leave the parent grey among white siblings. */
.primary-nav .nav-item button.nav-parent {
  background: none; border: 0; cursor: pointer;
}
.primary-nav .nav-toggle {
  background: none; border: 0; padding: 0 4px;
  color: inherit; cursor: pointer; line-height: 0;
}
/* The caret-only button is mobile-only. A parent that IS the toggle (no
   destination, so it is a <button> rather than a link) must stay visible on
   desktop — hiding every .nav-toggle would erase the parent's label. */
.primary-nav .nav-toggle:not(.nav-parent) { display: none; }
.primary-nav .nav-caret { transition: transform .2s ease; }

.primary-nav .nav-submenu { display: none; }
.primary-nav .nav-submenu a {
  display: block; padding: 8px 12px; border-radius: 6px;
  text-transform: none; letter-spacing: 0;
}

/* The floating card is a desktop shape, and so is its colour. Scoping it to
   min-width keeps `color: var(--ink)` off the collapsed panel, which sits on
   the header's own dark background — inside the breakpoint the links simply
   inherit this theme's `.primary-nav a` colour and stay readable without this
   file having to know what that colour is. */
@media (min-width: 641px) {
  .primary-nav .nav-submenu {
    position: absolute; top: 100%; left: 0; z-index: 120;
    min-width: 210px; padding: 8px;
    background: var(--bg-card, var(--white)); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md);
  }
  .primary-nav .nav-submenu a { white-space: nowrap; color: var(--ink); }
  .primary-nav .nav-submenu a:hover { background: var(--border); color: var(--ink); }
}

/* Desktop opens on hover, and on keyboard focus so it is reachable without a
   mouse. `hover: hover` keeps a touch device from latching it open. */
@media (hover: hover) {
  .primary-nav .nav-item--has-children:hover > .nav-submenu { display: block; }
}
.primary-nav .nav-item--has-children:focus-within > .nav-submenu { display: block; }

@media (max-width: 640px) {
  /* In the mobile panel the nav is a column, so a parent takes a full row and
     its children stack underneath. Hover is meaningless here: the caret button
     drives it, and .open is what shows the panel. */
  /* Block, not flex: the parent and its caret then flow inline exactly like a
     sibling <a>, inheriting whatever text-align the theme gives its collapsed
     nav instead of this file imposing one. The submenu is a block underneath. */
  /* No width here on purpose. The collapsed nav is a flex column and each
     theme positions its items with align-items, so a shrink-to-fit wrapper
     lands exactly where a sibling <a> does; forcing width:100% stretched the
     row and dropped its text to the left of centred siblings. */
  .primary-nav .nav-item,
  .primary-nav .nav-item--has-children { display: block; }
  .primary-nav .nav-item .nav-parent { display: inline-flex; }
  .primary-nav .nav-toggle:not(.nav-parent) { display: inline-flex; align-items: center; padding: 10px 12px; }
  .primary-nav .nav-item--has-children:hover > .nav-submenu,
  .primary-nav .nav-item--has-children:focus-within > .nav-submenu { display: none; }
  .primary-nav .nav-item--has-children.open > .nav-submenu { display: block; }
  .primary-nav .nav-item--has-children.open .nav-caret { transform: rotate(180deg); }
  .primary-nav .nav-submenu {
    position: static; width: auto; min-width: 0; order: 3;
    margin: 4px 0 6px; box-shadow: none; background: transparent; border: 0;
    border-left: 2px solid var(--border); border-radius: 0; padding: 2px 0 2px 12px;
  }
  .primary-nav .nav-submenu a { white-space: normal; }
}

/* ---------- Primary nav submenus · touch above the collapse width ---------- */
/* An iPad is 768-1366px wide, so it sits ABOVE this theme's collapse
   breakpoint and gets the desktop treatment: caret display:none, submenu on
   :hover. A touch device has neither. Tapping a linked parent just followed
   the link, and its children were unreachable at any width. (A '#' parent
   happened to keep working — it renders as a <button>, so :focus-within fired
   on tap. Only linked parents were affected, which is why it looked partial.)

   Hand touch devices the caret and the same .open mechanism the collapsed
   layout already uses. The parent link keeps its own tap, so the destination
   stays reachable in one tap and the caret is what opens the panel.

   Gated on .nav-touch from main.js rather than (hover: none)/(pointer: coarse):
   iPadOS Safari in desktop mode can report itself as hover-capable, and the
   media query would then silently never match on the exact device this is for.
   Without the class nothing here applies, so a JS failure leaves the existing
   desktop behaviour untouched. */
@media (min-width: 641px) {
  .nav-touch .primary-nav .nav-toggle:not(.nav-parent) {
    display: inline-flex;
    align-items: center;
  }
  /* :focus-within must not fight .open up here: tapping the caret leaves it
     focused, so focus-within would re-open the panel the same tap just closed.

     :hover is deliberately NOT neutralised. Its rule already sits inside
     @media (hover: hover), so on a pure touch device it is inert anyway — and
     maxTouchPoints is true for hybrids too (touchscreen laptops, iPad with a
     trackpad), where hover-to-open is real and worth keeping alongside the
     caret. Cancelling it here would take that away for no gain. */
  .nav-touch .primary-nav .nav-item--has-children:focus-within > .nav-submenu {
    display: none;
  }
  .nav-touch .primary-nav .nav-item--has-children.open > .nav-submenu {
    display: block;
  }
  .nav-touch .primary-nav .nav-item--has-children.open .nav-caret {
    transform: rotate(180deg);
  }
}