/*
Theme Name: Weekly Music Vibes - Pulse
Theme URI: https://weeklymusicvibes.com/
Author: Weekly Music Vibes
Author URI: https://weeklymusicvibes.com/
Description: Custom editorial theme for Weekly Music Vibes. Dark masthead, category-driven homepage modules (Music, Interviews, Artist Spotlight, Feature, News, Culture), and a clean article template. Built fresh for WeeklyMusicVibes.com.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wmv-pulse
*/

/* ==========================================================================
   0. Reset & base
   ========================================================================== */
:root{
  --wmv-black:#0c0c0e;
  --wmv-black-soft:#141416;
  --wmv-red:#e01b3d;
  --wmv-red-dark:#b8142f;
  --wmv-text:#17171a;
  --wmv-text-soft:#5b5c63;
  --wmv-border:#e7e7ea;
  --wmv-bg:#f5f5f7;
  --wmv-white:#ffffff;
  /* UI / headings: geometric sans. Body copy: serif. */
  --wmv-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wmv-serif: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--wmv-font);
  background:var(--wmv-bg);
  color:var(--wmv-text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ margin:0 0 .4em; line-height:1.2; }
button{ font-family:inherit; cursor:pointer; }
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.wmv-container{ max-width:1340px; margin:0 auto; padding:0 20px; }
.wmv-eyebrow{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--wmv-red);
}
.wmv-eyebrow.on-dark{ color:#ff5c76; }
.wmv-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding-bottom:10px; border-bottom:3px solid var(--wmv-text);
}
.wmv-section-head h2{
  font-size:19px; font-weight:900; letter-spacing:.03em; text-transform:uppercase;
}
.wmv-view-all{
  font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--wmv-text); white-space:nowrap;
}
.wmv-view-all:hover{ color:var(--wmv-red); }
.wmv-meta-time{ color:var(--wmv-text-soft); font-size:12px; }
.wmv-thumb-placeholder{
  display:block; width:100%; height:100%; min-height:60px;
  background:linear-gradient(135deg,#e7e7ea,#d6d6da);
}

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header{
  background:var(--wmv-black);
  color:#fff;
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid #000;
}
.site-header .wmv-container{
  display:flex; align-items:center; justify-content:space-between;
  height:82px; gap:24px;
}
.site-logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.site-logo img{ max-height:38px; width:auto; }

/* Inline disc mark. Strokes use currentColor so the same markup works on
   the dark header and any light surface. The explicit width stops the
   wordmark riding over the disc when width:auto mis-computes. */
.site-logo-mark{
  height:56px; width:74.7px; display:block; color:#fff;
  flex-shrink:0; overflow:visible;
}
.site-logo-disc{
  transform-box:fill-box; transform-origin:center;
  animation:wmv-disc-spin 12s linear infinite;
}
@keyframes wmv-disc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .site-logo-disc{ animation:none; } }
.site-logo .site-logo-text{
  font-size:19px; font-weight:900; letter-spacing:.02em; color:#fff;
  text-transform:uppercase; white-space:nowrap;
}
.site-logo .site-logo-text span{ color:var(--wmv-red); }

.primary-nav{ flex:1; display:flex; justify-content:center; }
.primary-nav ul{ display:flex; align-items:center; gap:34px; }
.primary-nav a{
  font-size:13.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#e9e9ec; padding:8px 0; position:relative;
}
.primary-nav a:hover{ color:#fff; }
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--wmv-red); transform:scaleX(0); transition:transform .15s ease;
}
.primary-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-search-toggle,
.mobile-nav-toggle{
  background:transparent; border:0; color:#fff; padding:6px;
  display:flex; align-items:center; justify-content:center;
}
.header-search-toggle svg,
.mobile-nav-toggle svg{ width:20px; height:20px; }
.mobile-nav-toggle{ display:none; }

.header-search-form{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:var(--wmv-black-soft); border-top:1px solid #2a2a2e; padding:16px 0;
}
.header-search-form.is-open{ display:block; }
.header-search-form form{
  max-width:1240px; margin:0 auto; padding:0 20px; display:flex; gap:10px;
}
.header-search-form input[type="search"]{
  flex:1; background:#1d1d20; border:1px solid #333; color:#fff;
  padding:10px 14px; font-size:14px; border-radius:2px;
}
.header-search-form button{
  background:var(--wmv-red); color:#fff; border:0; padding:0 18px;
  font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.03em;
  border-radius:2px;
}

/* ==========================================================================
   2. Hero section (trending + news rail + top picks)
   ========================================================================== */
/* Column ratio 1 : 3.02 : 1.49 and the 16:9 crops below are derived from
   24hip-hop's own registered image sizes (227x127 rail, 682x383 hero,
   156x87 picks, 390x216 category) and the proportions of the reference. */
.wmv-hero{ padding:44px 0 88px; }
.wmv-hero-grid{
  display:grid; grid-template-columns:1fr 3.13fr 1.38fr; gap:24px; align-items:start;
}
.wmv-news-rail{ display:flex; flex-direction:column; }
.wmv-news-rail .wmv-mini-card{ display:flex; flex-direction:column; gap:6px; }
.wmv-news-rail .wmv-mini-card img,
.wmv-news-rail .wmv-mini-card .wmv-thumb-placeholder{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px;
}
.wmv-news-rail .wmv-mini-card h3{
  font-size:15px; font-weight:800; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-news-rail .wmv-mini-card h3 a:hover{ color:var(--wmv-red); }

.wmv-rail-viewport{ overflow:hidden; position:relative; }
.wmv-rail-track{
  display:flex; flex-direction:column; gap:14px;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.wmv-rail-slide{ flex:0 0 auto; }
.wmv-rail-slide[data-clone="true"]{ pointer-events:none; }
.wmv-rail-dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.wmv-rail-dots button{
  width:7px; height:7px; border-radius:50%; background:#d5d5d9; border:0; padding:0; cursor:pointer;
  transition:background .2s ease,width .2s ease;
}
.wmv-rail-dots button.is-active{ background:var(--wmv-red); width:16px; border-radius:4px; }

/* Trending: 16:9 image with a centred white panel that overlaps the
   bottom of the photo and hangs below it (as on the reference). */
.wmv-trending{ position:relative; }
.wmv-trending-media img,.wmv-trending-media .wmv-thumb-placeholder{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:3px;
}
.wmv-trending-panel{
  position:relative; z-index:2; background:#fff;
  width:80%; margin:-72px auto 0;
  padding:22px 26px 0; text-align:center;
}
.wmv-trending-badge{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--wmv-red); color:#fff; font-size:11px;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:6px 14px;
  border-radius:2px; white-space:nowrap;
}
.wmv-trending-panel h1{ color:var(--wmv-text); font-size:26px; font-weight:900; line-height:1.24; padding:6px 0 18px; }
.wmv-trending-panel h1 a:hover{ color:var(--wmv-red); }
.wmv-trending-stripe{
  display:block; height:10px; margin:0 -26px;
  background-image:repeating-linear-gradient(-45deg, var(--wmv-red) 0 8px, #fff 8px 16px);
}

.wmv-top-picks{ background:#fff; border:1px solid var(--wmv-border); border-radius:4px; overflow:hidden; }
.wmv-top-picks-head{
  background:var(--wmv-red); color:#fff; font-size:19px; font-weight:900;
  letter-spacing:.03em; text-transform:uppercase; padding:15px 20px; margin:0;
}
.wmv-top-picks > .wmv-trending-stripe{
  margin:0; height:11px;
  background-image:repeating-linear-gradient(-45deg, var(--wmv-red) 0 8px, #fff 8px 16px);
}
.wmv-pick-item{ display:flex; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--wmv-border); }
.wmv-pick-item:last-child{ border-bottom:0; }
.wmv-pick-rank{ font-size:24px; font-weight:800; color:#c9c9cf; width:20px; flex-shrink:0; line-height:1; }
.wmv-pick-body{ flex:1; min-width:0; }
/* 24hip-hop serves these thumbs at 156x87 — a 16:9 crop, not a square. */
.wmv-pick-thumb{ width:92px; aspect-ratio:16/9; border-radius:3px; overflow:hidden; flex-shrink:0; }
.wmv-pick-thumb img{ width:100%; height:100%; object-fit:cover; }
/* Titles are clamped (the reference truncates with an ellipsis) so rows
   stay a predictable height and the column doesn't outgrow the hero. */
.wmv-pick-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13.5px; font-weight:800; line-height:1.3; margin-top:2px;
}
.wmv-pick-title a:hover{ color:var(--wmv-red); }

/* ==========================================================================
   3. Three-column module: Artist Spotlight / Latest News / Interviews
   ========================================================================== */
.wmv-triple{ padding:0 0 88px; }
/* stretch (not start) so all three panels share a height and their
   footer buttons line up along the bottom. */
.wmv-triple-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch; }

/* --- Shared panel header (dark / red / black variants) --- */
.wmv-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px;
}
.wmv-panel-head h2{
  font-size:19px; font-weight:900; letter-spacing:.03em; text-transform:uppercase;
  margin:0; color:#fff;
}
.wmv-panel-head a{
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.wmv-panel-head a:hover{ color:var(--wmv-red); }
.wmv-panel-head--dark{ background:var(--wmv-black); }
.wmv-panel-head--red{ background:var(--wmv-red); }
.wmv-panel-head--red a:hover{ color:var(--wmv-black); }
.wmv-panel-head--black{ background:var(--wmv-black); }
.wmv-stripe{
  display:block; height:11px;
  background-image:repeating-linear-gradient(-45deg, var(--wmv-red) 0 8px, #fff 8px 16px);
}
.wmv-stripe--dark{
  background-image:repeating-linear-gradient(-45deg, var(--wmv-red) 0 8px, var(--wmv-black) 8px 16px);
}
.wmv-hot-sup{ color:var(--wmv-red); font-size:11px; vertical-align:super; margin-left:2px; }

/* Footer action that closes each of the three panels. */
.wmv-panel-more{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:18px 16px; margin-top:auto;
}
.wmv-panel-more--dark{ background:var(--wmv-black); color:#fff; }
.wmv-panel-more--dark:hover{ color:var(--wmv-red); }
.wmv-panel-more--red{ background:var(--wmv-red); color:#fff; }
.wmv-panel-more--red:hover{ background:var(--wmv-red-dark); }
.wmv-panel-more--link{ color:var(--wmv-red); }
.wmv-panel-more--link:hover{ text-decoration:underline; }

/* --- Column 1: Artist Spotlight (dark card, large square art) --- */
.wmv-spotlight-card{
  background:var(--wmv-black); color:#fff; overflow:hidden; border-radius:3px;
  display:flex; flex-direction:column;
}
/* Lists fill the remaining column height. Counts and row sizes are tuned
   so the three columns land close together, leaving only a little slack
   to spread between rows. */
.wmv-spotlight-list,
.wmv-newslist{
  flex:1; display:flex; flex-direction:column; justify-content:space-between;
}
.wmv-spotlight-row{ display:flex; gap:20px; padding:18px 20px; align-items:stretch; }
.wmv-spotlight-thumb{ width:40%; max-width:185px; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; }
.wmv-spotlight-thumb img,.wmv-spotlight-thumb .wmv-thumb-placeholder{
  width:100%; height:100%; object-fit:cover; display:block;
}
.wmv-spotlight-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.wmv-badge{
  align-self:flex-end; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:var(--wmv-red); color:#fff; padding:5px 12px;
  border-radius:2px; margin-bottom:14px;
}
.wmv-spotlight-row h3{
  font-size:20px; font-weight:800; color:#fff; line-height:1.24; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-spotlight-row h3 a:hover{ color:#ff5c76; }
.wmv-spotlight-author{ font-size:15px; font-weight:700; color:#9a9aa0; }
.wmv-spotlight-time{ font-size:12.5px; font-style:italic; color:#7d7d84; margin-top:auto; padding-top:12px; text-align:right; }

/* --- Column 2: Latest News (red banner, 16:9 thumbs) --- */
.wmv-newspanel{
  background:#fff; border:1px solid var(--wmv-border); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
}
.wmv-news-list-item{ display:flex; gap:14px; padding:14px 16px; border-bottom:1px solid var(--wmv-border); align-items:flex-start; }
.wmv-news-list-item:last-child{ border-bottom:0; }
.wmv-news-list-thumb{ width:38%; max-width:150px; aspect-ratio:16/9; border-radius:2px; overflow:hidden; flex-shrink:0; }
.wmv-news-list-thumb img,.wmv-news-list-thumb .wmv-thumb-placeholder{ width:100%; height:100%; object-fit:cover; display:block; }
.wmv-news-list-item h3{
  font-size:15.5px; font-weight:800; line-height:1.3; margin:5px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-news-list-item h3 a:hover{ color:var(--wmv-red); }

/* --- Column 3: Interviews (black header + ranked rows) --- */
.wmv-hotpanel{
  background:#fff; border:1px solid var(--wmv-border); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
}
.wmv-hot-week{
  display:flex; align-items:center; gap:9px; margin:12px 14px;
  border:1px solid var(--wmv-border); border-radius:3px; padding:11px 14px;
  font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.wmv-hot-week svg{ width:15px; height:15px; color:var(--wmv-red); flex-shrink:0; }
.wmv-hot-list{
  padding:0 14px 14px; display:flex; flex-direction:column; gap:8px;
  flex:1; justify-content:space-between;
}
/* Taller rows here: this category typically holds fewer posts than the
   other two columns, so each row carries more height to compensate. */
.wmv-rank-item{
  display:flex; align-items:center; gap:14px; padding:15px 14px;
  border:1px solid var(--wmv-border); border-radius:3px;
}
.wmv-rank-num{
  font-size:22px; font-weight:900; color:var(--wmv-text); width:26px; flex-shrink:0; text-align:center;
}
.wmv-rank-item--top .wmv-rank-num{
  background:var(--wmv-red); color:#fff; border-radius:2px; padding:14px 0; width:34px;
}
.wmv-rank-thumb{ width:88px; height:88px; border-radius:2px; overflow:hidden; flex-shrink:0; }
.wmv-rank-thumb img,.wmv-rank-thumb .wmv-thumb-placeholder{ width:100%; height:100%; object-fit:cover; display:block; }
.wmv-rank-body{ flex:1; min-width:0; }
.wmv-rank-item h3{
  font-size:14.5px; font-weight:800; line-height:1.28; margin:0 0 3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-rank-item h3 a:hover{ color:var(--wmv-red); }
.wmv-rank-item .wmv-rank-meta{ font-size:12.5px; color:var(--wmv-text-soft); }

/* ==========================================================================
   4. Six-category grid block
   ========================================================================== */
.wmv-cat-grid{ padding:0 0 88px; }
.wmv-cat-grid-inner{
  display:grid; grid-template-columns:repeat(3,1fr); gap:64px 24px;
}
/* Heading + rule sit outside the card; the card itself is white, rounded
   and shadowed, with the image running flush to its top edge. Cards in a
   row stretch to equal height. */
.wmv-cat-block{ display:flex; flex-direction:column; }
/* Rules above *and* below the label, as on the reference. */
.wmv-cat-block .wmv-section-head{
  border-top:2px solid var(--wmv-text);
  border-bottom:2px solid var(--wmv-text);
  margin-bottom:0; padding:12px 0;
}
.wmv-cat-card{
  background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.08);
  padding:0; margin-top:16px; overflow:hidden; flex:1;
  display:flex; flex-direction:column;
}
.wmv-cat-block-feature img,
.wmv-cat-block-feature .wmv-thumb-placeholder{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:0;
}
.wmv-cat-block-feature h3{
  font-size:19px; font-weight:800; line-height:1.28;
  margin:0 16px; padding:16px 0; border-bottom:1px solid var(--wmv-border);
}
/* Clamp lives on the link, not the padded heading — clamping a box that
   also carries padding lets an extra line bleed past the divider. */
.wmv-cat-block-feature h3 a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-cat-block-feature h3 a:hover{ color:var(--wmv-red); }
.wmv-cat-sub-list{ padding:0 16px; }
.wmv-cat-sub-list li{
  position:relative; margin-left:18px; padding:12px 0;
  border-bottom:1px solid var(--wmv-border);
  font-size:15px; font-weight:600; line-height:1.4;
}
.wmv-cat-sub-list li:last-child{ border-bottom:0; }
.wmv-cat-sub-list li::before{
  content:""; position:absolute; left:-15px; top:19px;
  width:5px; height:5px; border-radius:50%; background:var(--wmv-red);
}
.wmv-cat-sub-list li a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-cat-sub-list li a:hover{ color:var(--wmv-red); }
.wmv-empty-note{ font-size:13px; color:var(--wmv-text-soft); font-style:italic; }
.wmv-cat-card > .wmv-empty-note{ padding:18px 16px; margin:0; }

/* ==========================================================================
   5. Archive / index card grid
   ========================================================================== */
.wmv-archive{ padding:32px 0 60px; }
.wmv-archive-header{ margin-bottom:26px; border-bottom:1px solid var(--wmv-border); padding-bottom:16px; }
.wmv-archive-header h1{ font-size:26px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.wmv-archive-header p{ color:var(--wmv-text-soft); margin-top:8px; max-width:640px; }
.wmv-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wmv-card{ background:#fff; border:1px solid var(--wmv-border); border-radius:4px; overflow:hidden; }
.wmv-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.wmv-card-body{ padding:14px; }
.wmv-card-body h3{ font-size:15px; font-weight:800; line-height:1.3; margin-bottom:8px; }
.wmv-card-body h3 a:hover{ color:var(--wmv-red); }
.wmv-card-excerpt{ font-size:13px; color:var(--wmv-text-soft); line-height:1.5; }
.wmv-pagination{ display:flex; gap:8px; justify-content:center; margin-top:36px; }
.wmv-pagination a,.wmv-pagination span{
  padding:8px 14px; border:1px solid var(--wmv-border); border-radius:3px; font-size:13px; font-weight:700;
}
.wmv-pagination .current{ background:var(--wmv-text); color:#fff; border-color:var(--wmv-text); }
.wmv-pagination a:hover{ border-color:var(--wmv-red); color:var(--wmv-red); }

/* ==========================================================================
   6. Single article template
   ========================================================================== */
.wmv-article{ padding:26px 0 60px; }
.wmv-article-grid{
  display:grid; grid-template-columns:58px minmax(0,1fr) 330px; gap:30px; align-items:start;
}
/* Breadcrumb, title and byline span the content + sidebar columns, so the
   header's left edge lines up with the featured image rather than with
   the share rail. */
.wmv-article-header{ grid-column:2 / -1; }
.wmv-breadcrumb{ font-size:13.5px; color:var(--wmv-text-soft); margin-bottom:18px; }
.wmv-breadcrumb a:hover{ color:var(--wmv-red); }
.wmv-breadcrumb-sep{ margin:0 6px; }
.wmv-article h1{
  font-size:48px; font-weight:900; line-height:1.12; margin-bottom:26px;
  letter-spacing:-.015em; max-width:1120px;
}

/* Sticky vertical share rail */
.wmv-share-rail{
  position:sticky; top:100px; display:flex; flex-direction:column; gap:14px;
}
.wmv-share-rail a{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--wmv-border);
  display:flex; align-items:center; justify-content:center; color:var(--wmv-text); background:#fff;
}
.wmv-share-rail a:hover{ background:var(--wmv-red); border-color:var(--wmv-red); color:#fff; }
.wmv-share-rail svg{ width:19px; height:19px; }

.wmv-article-byline{
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-bottom:22px; margin-bottom:24px;
}
.wmv-byline-info{ font-size:13.5px; }
.wmv-byline-author{ display:flex; align-items:center; margin-bottom:4px; }
.wmv-byline-info .wmv-by{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wmv-text-soft); margin-right:6px;
}
.wmv-byline-info .wmv-author{
  font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--wmv-text);
}
.wmv-byline-info .wmv-author:hover{ color:var(--wmv-red); }
/* Verified badge beside the author name. */
.wmv-verified{ width:16px; height:16px; margin-left:5px; flex-shrink:0; fill:#1d9bf0; }
.wmv-verified .wmv-verified-check{ fill:#fff; }
.wmv-byline-info .wmv-date{ color:var(--wmv-text-soft); }
.wmv-byline-info .wmv-published-label{ color:var(--wmv-red); font-weight:700; }
.wmv-share{ display:flex; gap:12px; }
.wmv-share a{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--wmv-border);
  display:flex; align-items:center; justify-content:center; color:var(--wmv-text);
}
.wmv-share a:hover{ background:var(--wmv-red); border-color:var(--wmv-red); color:#fff; }
.wmv-share svg{ width:20px; height:20px; }
.wmv-article-thumb{ width:100%; border-radius:4px; margin-bottom:26px; aspect-ratio:16/9; object-fit:cover; }
/* Body copy is set in a serif face, as on the reference article pages —
   but headings inside the article stay in the sans UI face. */
.wmv-article-content{
  font-family:var(--wmv-serif);
  font-size:17px; line-height:1.8; color:#222;
}
.wmv-article-content p{ margin:0 0 1.35em; }
.wmv-article-content h1,
.wmv-article-content h2,
.wmv-article-content h3,
.wmv-article-content h4,
.wmv-article-content h5,
.wmv-article-content h6{
  font-family:var(--wmv-font); font-weight:800; letter-spacing:-.01em;
}
.wmv-article-content h2{ font-size:25px; margin:1.7em 0 .55em; }
.wmv-article-content h3{ font-size:20px; margin:1.5em 0 .5em; }
.wmv-article-content img{ border-radius:4px; margin:1em 0; }
.wmv-article-content a{ color:var(--wmv-red); text-decoration:underline; }
.wmv-article-content blockquote{
  border-left:4px solid var(--wmv-red); margin:1.4em 0; padding:6px 0 6px 18px;
  font-style:italic; color:var(--wmv-text-soft);
}
.wmv-article-tags{ margin-top:28px; display:flex; gap:8px; flex-wrap:wrap; }
.wmv-article-tags a{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background:var(--wmv-bg); border:1px solid var(--wmv-border); padding:5px 10px; border-radius:20px;
}
.wmv-article-tags a:hover{ border-color:var(--wmv-red); color:var(--wmv-red); }

/* About the author */
.wmv-author-box{ margin-top:40px; padding-top:26px; border-top:1px solid var(--wmv-border); }
.wmv-author-box h2{ font-size:19px; font-weight:800; margin-bottom:16px; }
.wmv-author-box-inner{ display:flex; gap:16px; align-items:flex-start; }
.wmv-author-avatar{ border-radius:50%; flex-shrink:0; width:64px; height:64px; }
.wmv-author-name{ font-weight:800; font-size:15px; margin-bottom:4px; }
.wmv-author-bio{ margin:0; font-size:14.5px; color:var(--wmv-text-soft); line-height:1.6; }

/* Related content */
.wmv-related{ margin-top:44px; }
.wmv-related .wmv-section-head{ border-top:2px solid var(--wmv-text); border-bottom:2px solid var(--wmv-text); padding:12px 0; margin-bottom:24px; }
.wmv-related .wmv-view-all{ font-size:18px; }
.wmv-related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.wmv-related-item{ display:flex; gap:14px; align-items:flex-start; }
.wmv-related-thumb{ width:44%; max-width:170px; aspect-ratio:16/10; overflow:hidden; flex-shrink:0; border-radius:2px; }
.wmv-related-thumb img,.wmv-related-thumb .wmv-thumb-placeholder{ width:100%; height:100%; object-fit:cover; display:block; }
.wmv-related-body{ flex:1; min-width:0; }
.wmv-related-item h3{
  font-size:15.5px; font-weight:800; line-height:1.3; margin:4px 0 8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.wmv-related-item h3 a:hover{ color:var(--wmv-red); }
.wmv-related-date{ font-size:12.5px; font-style:italic; color:var(--wmv-text-soft); }

/* Sidebar picks: image sits on the left here (unlike the homepage) and
   the rank numbers are dropped.
   The column must stretch the full height of the grid row — otherwise the
   sticky child has no travel range and just scrolls away with the page. */
.wmv-article-sidebar{ align-self:stretch; height:100%; }
.wmv-sidebar-picks{ position:sticky; top:90px; }
.wmv-sidebar-picks .wmv-pick-item{ align-items:flex-start; gap:12px; padding:13px 16px; }
.wmv-sidebar-picks .wmv-pick-thumb{ width:104px; }
.wmv-sidebar-picks .wmv-pick-title{ -webkit-line-clamp:3; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer{ background:var(--wmv-black); color:#c9c9cd; padding:0; }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px; padding:22px 0; border-bottom:1px solid #232326; text-align:left;
}
.footer-logo{ flex-shrink:0; }
.footer-logo .site-logo-text{ color:#fff; font-size:19px; }
.footer-logo .site-logo-mark{ height:50px; width:66.7px; }
.footer-top-right{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid #333;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .15s ease,border-color .15s ease;
}
.footer-social a:hover{ background:var(--wmv-red); border-color:var(--wmv-red); }
.footer-social svg{ width:17px; height:17px; }
.footer-submit{ font-size:13.5px; white-space:nowrap; margin:0; }
.footer-submit a{ color:var(--wmv-red); font-weight:800; }
.footer-submit a:hover{ text-decoration:underline; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:16px 0; font-size:12.5px;
}
.footer-legal-links,.footer-page-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal-links a:hover,.footer-page-links a:hover{ color:#fff; }
.footer-copyright{
  text-align:center; font-size:11.5px; color:#6c6c72; padding:14px 0; border-top:1px solid #1c1c1f;
}

/* ==========================================================================
   8. Simple pages (About / Contact / Privacy / Terms)
   ========================================================================== */
.wmv-page{ padding:44px 0 70px; }
.wmv-page-header{ text-align:center; margin-bottom:34px; }
.wmv-page-header h1{ font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.wmv-page-header p{ color:var(--wmv-text-soft); margin-top:10px; }
.wmv-page-body{ max-width:760px; margin:0 auto; font-size:15.5px; line-height:1.75; }
.wmv-page-body h2{ font-size:20px; font-weight:800; margin:1.8em 0 .6em; }
.wmv-page-body p{ margin:0 0 1.2em; }
.wmv-page-body ul{ list-style:disc; padding-left:22px; margin:0 0 1.2em; }
.wmv-page-body li{ margin-bottom:.4em; }
/* Links inside page copy (email addresses, cross-links) pick up the brand
   red, matching how links read inside articles. */
.wmv-page-body a{
  color:var(--wmv-red); font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.wmv-page-body a:hover{ color:var(--wmv-red-dark); }
.wmv-contact-card{
  max-width:460px; margin:0 auto; background:#fff; border:1px solid var(--wmv-border);
  border-radius:6px; padding:36px; text-align:center;
}
.wmv-contact-card .wmv-eyebrow{ margin-bottom:10px; }
.wmv-contact-email{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:12px 22px;
  background:var(--wmv-text); color:#fff; font-weight:800; border-radius:4px; font-size:15px;
}
.wmv-contact-email:hover{ background:var(--wmv-red); }
.wmv-contact-email svg{ width:18px; height:18px; }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .wmv-article-grid{ grid-template-columns:minmax(0,1fr) 300px; }
  .wmv-share-rail{ display:none; }
  /* Rail column is gone, so the header starts at the first column again. */
  .wmv-article-header{ grid-column:1 / -1; }
  .wmv-article h1{ font-size:40px; }
}
@media (max-width: 980px){
  .wmv-hero-grid{ grid-template-columns:1fr; }
  .wmv-triple-grid{ grid-template-columns:1fr; }
  .wmv-cat-grid-inner{ grid-template-columns:1fr 1fr; }
  .wmv-card-grid{ grid-template-columns:1fr 1fr; }
  .wmv-article-grid{ grid-template-columns:1fr; }
  .wmv-sidebar-picks{ position:static; }
  .wmv-article h1{ font-size:31px; }
  .primary-nav{ display:none; }
  .mobile-nav-toggle{ display:flex; }
}
/* --- Logo scales down before the header runs out of room --- */
@media (max-width: 860px){
  .site-header .wmv-container{ height:70px; }
  .site-logo{ gap:10px; min-width:0; }
  .site-logo-mark{ height:46px; width:61.3px; }
  .site-logo-text{ font-size:16px; }
}
@media (max-width: 620px){
  .wmv-cat-grid-inner{ grid-template-columns:1fr; }
  .wmv-card-grid{ grid-template-columns:1fr; }
  .wmv-related-grid{ grid-template-columns:1fr; }
  .site-header .wmv-container{ height:64px; gap:12px; }
  .site-logo{ gap:8px; }
  .site-logo-mark{ height:40px; width:53.3px; }
  .site-logo-text{ font-size:14px; letter-spacing:0; }
  .header-actions{ gap:10px; flex-shrink:0; }
  .wmv-article h1{ font-size:25px; }
  .footer-top{ flex-direction:column; text-align:center; }
  .footer-top-right{ flex-direction:column; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .footer-logo .site-logo-mark{ height:44px; width:58.7px; }
}
@media (max-width: 480px){
  .site-header .wmv-container{ height:60px; padding:0 14px; }
  .site-logo-mark{ height:36px; width:48px; }
  .site-logo-text{ font-size:12.5px; }
  .header-search-toggle svg,.mobile-nav-toggle svg{ width:18px; height:18px; }
}
/* Only on the narrowest phones does the wordmark drop and the disc
   carry the brand on its own. */
@media (max-width: 360px){
  .site-logo-text{ display:none; }
  .site-logo-mark{ height:40px; width:53.3px; }
}
.mobile-nav-panel{
  display:none; position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
  background:var(--wmv-black); z-index:200; padding:22px; overflow-y:auto;
}
.mobile-nav-panel.is-open{ display:block; }
.mobile-nav-panel ul{ display:flex; flex-direction:column; gap:4px; }
.mobile-nav-panel a{
  display:block; padding:12px 4px; color:#fff; font-weight:800; text-transform:uppercase;
  font-size:14px; border-bottom:1px solid #222;
}
.mobile-nav-close{ background:none; border:0; color:#fff; margin-bottom:16px; font-size:13px; font-weight:700; }
.mobile-nav-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:199; }
.mobile-nav-overlay.is-open{ display:block; }