/*
Theme Name: WAW Theme
Theme URI: https://wearewrestling.net
Author: We Are Wrestling
Description: Editorial redesign — a premium sports-publication presentation layer
             over the WAW autonomous plugin ecosystem. Light, type-led, restrained.
Version: 2.5.0
*/

/* ============================================================================
   WE ARE WRESTLING — EDITORIAL THEME  (waw-main.css v2.0.0)
   ----------------------------------------------------------------------------
   Typography is the design. Newsreader (serif) commands; Libre Franklin
   (Franklin Gothic lineage) carries structure. Pink (#ff0a8a) is a scalpel:
   active nav, dividers, kickers, links, buttons, trending numerals — never a
   fill behind content. Structure comes from whitespace + hairlines, not cards.
   ========================================================================== */

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────*/
:root{
  --paper:#ffffff;
  --paper-soft:#f7f7f8;
  --ink:#131316;
  --ink-soft:#55555c;
  --ink-faint:#8b8b93;
  --line:#e7e7ea;
  --line-strong:#d7d7db;
  --pink:#ff0a8a;
  --pink-deep:#d1006f;        /* pink as small text on white — clears AA */
  --night:#000000;
  --night-2:#17171a;
  --night-line:rgba(255,255,255,.12);
  --night-faint:rgba(255,255,255,.55);

  /* Dark surfaces — pure black (v2.6.3). Theme is black / white / pink; no grey.
     Card separation on black comes from the hairline border + the pink glow. */
  --slate:#000000;            /* Exclusives band background */
  --slate-2:#000000;          /* card surface */
  --slate-3:#000000;          /* card media / hover */
  --slate-line:rgba(255,255,255,.10);
  --slate-glow:rgba(255,10,138,.16);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(16px,4vw,40px);
  --radius:6px;
  --tick:.14s cubic-bezier(.2,.6,.2,1);

  /* ── PREMIUM SYSTEM TOKENS (v2.7.0) ──────────────────────────────────────
     Added for the sitewide "signature design system" pass: card polish,
     section-heading accents, background texture, geometric brand language.
     Every new rule in this pass references these rather than hardcoding
     values, so the whole system stays a single edit away from tuning.
     Pink stays the one accent per the existing philosophy above — nothing
     new is introduced. */
  --card-shadow:0 1px 2px rgba(19,19,22,.04),0 6px 16px -8px rgba(19,19,22,.10);
  --card-shadow-hover:0 2px 4px rgba(19,19,22,.06),0 14px 28px -12px rgba(19,19,22,.16);
  --card-lift:-2px;
  --card-tick:.2s cubic-bezier(.2,.6,.2,1);   /* 180–220ms per brief */
  --glow-pink:0 0 0 1px rgba(255,10,138,.35),0 0 20px -4px rgba(255,10,138,.35);
  /* Clipped-corner is the one geometric motif (chosen over angled-edge or
     diagonal-cut as the least likely to fight the existing 6px --radius
     editorial rounding) — a single top-right corner nick, applied via
     clip-path so it costs no extra markup. Two sizes: badges at normal
     scale (--clip-sm) and the smaller compact feed badges (--clip-xs). */
  --clip-sm:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  --clip-xs:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%);
}

/* ── PREMIUM SYSTEM — reusable background texture (v2.7.0) ──────────────────
   The same fine diagonal-line SVG is applied everywhere the brief asks for
   texture (hero, originals band, sidebar cards, newsletter, footer, promo
   blocks) — inline as a ::before/::after on each section below, since
   every one of those elements already owns a pseudo-element for its own
   glow/overlay and adding a markup-dependent utility class would mean
   editing every template. This class is the same implementation kept as a
   standalone, reusable version for markup that doesn't yet have a
   ::before/::after slot free — add class="waw-texture" to any
   position:relative container and it drops in with zero extra CSS. */
.waw-texture{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;
  background-position:top right;
  -webkit-mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
  opacity:.03;
}
.waw-texture--dark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.04;
}
.waw-texture--corner-bl{
  background-position:bottom left;
  -webkit-mask-image:radial-gradient(60% 60% at 0% 100%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 0% 100%,#000 0%,transparent 72%);
}


/* ── RESET / BASE ─────────────────────────────────────────────────────────*/
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:2px}
::selection{background:var(--pink);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;border-radius:4px}

/* v2.7.0 premium pass — micro-interactions:
   Section headings fade in slightly on page load (CSS-only, no scroll
   observer — keeps this pass free of new JS surface area). Respects
   prefers-reduced-motion. Applied to .section-header / .sidebar-title /
   .waw-originals-head directly rather than a class the templates would
   need editing to add, so every existing heading picks it up automatically. */
@media (prefers-reduced-motion:no-preference){
  @keyframes wawHeadingIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .section-header,.sidebar-title,.waw-originals-head{animation:wawHeadingIn .5s cubic-bezier(.2,.6,.2,1) both}
}

.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.waw-empty,.sidebar-empty{color:var(--ink-faint);font-size:.9rem;padding:12px 0}

/* ============================================================================
   TOP NAV — sticky, dark, logo left / nav centred / tools right
   ========================================================================== */
.waw-topnav{position:sticky;top:0;z-index:200;background:var(--night);color:#fff;border-bottom:1px solid var(--night-line);transition:box-shadow var(--tick)}
.waw-topnav.is-stuck{box-shadow:0 1px 0 rgba(0,0,0,.4),0 8px 24px -18px rgba(0,0,0,.9)}
.waw-topnav-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}

.waw-logo a{display:inline-flex;flex-direction:column;line-height:.86;letter-spacing:.02em}
.waw-logo img{max-height:40px;width:auto}
.logo-we{font-family:var(--sans);font-weight:700;font-size:.62rem;letter-spacing:.34em;color:#fff}
.logo-wr{font-family:var(--sans);font-weight:800;font-size:1.42rem;letter-spacing:.01em;color:var(--pink)}

.waw-nav{justify-self:center}
.waw-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.waw-nav-list li{position:relative}
.waw-nav-list a{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--night-faint);padding:6px 0;display:inline-block;position:relative;transition:color var(--tick)}
.waw-nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform var(--tick)}
.waw-nav-list a:hover,.waw-nav-list a:focus-visible{color:#fff}
.waw-nav-list a:hover::after{transform:scaleX(1)}
.waw-nav-list li.active>a,.waw-nav-list li.current-menu-item>a,.waw-nav-list li.current_page_item>a{color:#fff}
.waw-nav-list li.active>a::after,.waw-nav-list li.current-menu-item>a::after{transform:scaleX(1)}

/* Dropdown submenus (wp_nav_menu children) */
.waw-nav-list .sub-menu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:190px;background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);box-shadow:0 18px 40px -24px rgba(0,0,0,.9);opacity:0;visibility:hidden;transition:opacity var(--tick),transform var(--tick);z-index:10}
.waw-nav-list li:hover>.sub-menu,.waw-nav-list li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.waw-nav-list .sub-menu a{display:block;padding:9px 18px;letter-spacing:.04em}
.waw-nav-list .sub-menu a::after{display:none}
.menu-item-has-children>a::before{content:"▾";position:absolute;right:-13px;top:50%;transform:translateY(-50%);font-size:.7em;opacity:.6}

.waw-topnav-tools{justify-self:end;display:flex;align-items:center;gap:4px}
.tool-btn{width:38px;height:38px;border:0;background:transparent;color:var(--night-faint);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:color var(--tick),background var(--tick)}
.tool-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.tool-btn svg{width:18px;height:18px}
.nav-socials{display:flex;gap:2px}
.nav-socials a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--night-faint);font-size:.95rem;border-radius:50%;transition:color var(--tick),background var(--tick)}
.nav-socials a:hover{color:#fff;background:rgba(255,255,255,.08)}

.waw-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:0;background:transparent;padding:0;justify-self:end}
.waw-nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:transform var(--tick),opacity var(--tick)}
.waw-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.waw-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.waw-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================================
   THE SQUASH — ticker strip (JS drives the belt motion)
   ----------------------------------------------------------------------------
   Lives above .waw-site-wrap now (v2.6.5, see header.php) — a body-level
   sibling of the grid, not a grid child — so a full-width black background
   is safe here and won't collide with the sidebar the way it would inside
   .waw-content-col.
   ========================================================================== */
.waw-topbar{background:#000000;border-bottom:1px solid var(--night-line)}
.waw-topbar-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:42px;display:flex;align-items:center}
.ticker-label{flex:none;align-self:stretch;display:flex;align-items:center;padding-right:16px;margin-right:16px;border-right:1px solid var(--night-line);font-family:var(--sans);font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);white-space:nowrap}
.ticker-track{flex:1;min-width:0;overflow:hidden;position:relative;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker-inner,.ticker-belt{display:flex;align-items:center;height:100%;white-space:nowrap}
.ticker-item{display:inline-flex;align-items:center;gap:8px;padding-right:38px}
.ticker-item a{font-size:.82rem;color:rgba(255,255,255,.7);transition:color var(--tick)}
.ticker-item a:hover{color:#fff}
.ticker-dot{color:var(--pink);font-size:.5rem;line-height:1}
.topbar-date{flex:none;margin-left:16px;padding-left:16px;border-left:1px solid var(--night-line);font-size:.72rem;color:rgba(255,255,255,.55);white-space:nowrap}

/* ============================================================================
   SITE GRID
   ========================================================================== */
.waw-site-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,4vw,56px);align-items:start}
.waw-content-col{min-width:0;padding:34px 0 0}
.waw-main{min-width:0}
.waw-sidebar{padding:34px 0 0;position:sticky;top:88px;align-self:start}

/* ============================================================================
   SECTION HEADER — label · pink tick · hairline · view-all
   ========================================================================== */
.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:64px 0 24px;padding-bottom:16px;border-bottom:1px solid var(--ink);position:relative;isolation:isolate}
.section-header::before{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pink)}
/* v2.7.0 premium pass: thin accent line above the heading + a barely-there
   gradient wash behind it, layered onto the existing below-heading tick
   (::before, untouched) rather than replacing it. ::after does double duty:
   a 3px pink line at its own top edge, with a soft gradient filling the
   rest of its height beneath — one pseudo-element, both effects, no
   change to the parent's own background. */
.section-header::after{
  content:"";position:absolute;left:0;top:-54px;width:100%;height:54px;pointer-events:none;z-index:-1;
  background:
    linear-gradient(var(--pink),var(--pink)) top left/48px 3px no-repeat,
    linear-gradient(180deg,transparent,rgba(255,10,138,.04) 60%,transparent);
}
.section-title{font-family:var(--sans);font-weight:800;font-size:.94rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
/* "N stories" count that sits opposite .section-title on promotion pages
   — reuses .view-all's exact treatment since it's functionally the same
   kind of secondary, right-aligned section-header label. */
.section-date{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.view-all{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;transition:color var(--tick)}
.view-all:hover{color:var(--pink-deep)}

/* ============================================================================
   HERO BAND — full-width black editorial band (v2.6.13)
   ----------------------------------------------------------------------------
   Hero Story (70%) + three stacked modules (30%): Featured Original,
   SMARK, Today in Wrestling. No floating cards, no coloured boxes
   behind modules — the whole band is one flat #000 surface. Ends
   cleanly; .waw-main resumes on --paper immediately below. Body-level
   sibling of .waw-site-wrap (see header.php), not nested inside
   .waw-content-col, so full width here is safe and doesn't collide
   with the sidebar grid.

   A dedicated hero ticker lived here in v2.6.6–v2.6.7, directly above
   this band and directly below The Squash ticker in header.php — with
   no visible separation between two black bars, it read as one ticker
   doubled. Removed in v2.6.8; the ticker rules that went with it
   (.hero-ticker*) are gone too. The Squash remains the only ticker.
   ========================================================================== */
.waw-hero-band{background:#000000;isolation:isolate}
.waw-hero-band-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(20px,2.6vw,30px) var(--gutter)}
.waw-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,4vw,56px);align-items:start}
.waw-hero-col-main{min-width:0}
.waw-hero-col-side{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ── Side module eyebrow — same vocabulary as .sidebar-title / .waw-originals-eyebrow ── */
.hero-side-module{min-width:0}
.hero-side-eyebrow{display:block;font-family:var(--sans);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin:0 0 9px}

/* ── Featured Original (Gorilla Position) — dark card, no border, no extra box ── */
/* Aspect ratio measured directly from the red target box (h/w ≈ 0.555)
   rather than estimated — this is the single biggest lever in the side
   column's total height, so getting this one number right matters more
   than any other in this file (v2.6.12). */
.hero-gp-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:260/144}
.hero-gp-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.hero-gp-card:hover img{transform:scale(1.04)}
.hero-gp-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.2) 55%,transparent)}
.hero-gp-label{font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.15;color:#fff;text-wrap:balance}

/* ── SMARK — minimal, pink CTA, reused Wordle-style result grid on the right ── */
.hero-smark-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.hero-smark-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hero-smark-title{font-family:var(--sans);font-weight:800;font-size:1.7rem;letter-spacing:.01em;color:#fff;line-height:1}
.hero-smark-sub{font-size:.8rem;color:rgba(255,255,255,.62)}
.hero-smark-cta{margin-top:6px;display:inline-flex;align-items:center;font-family:var(--sans);font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--pink);padding:9px 18px;border-radius:100px;transition:background var(--card-tick),box-shadow var(--card-tick)}
.hero-smark-card:hover .hero-smark-cta{background:var(--pink-deep);box-shadow:var(--glow-pink)}
/* Reused .sb-smark-grid from the sidebar widget — .sb-miss/.sb-close use
   light greys (var(--line)/var(--line-strong)) tuned for the white
   sidebar, which would be nearly invisible on black. Scoped override
   here only, so the sidebar's own grid is untouched. */
.waw-hero-band .sb-smark-grid{flex:none}
.waw-hero-band .sb-box{width:15px;height:15px;border-radius:2px}
.waw-hero-band .sb-box.sb-miss{background:rgba(255,255,255,.14)}
.waw-hero-band .sb-box.sb-close{background:rgba(255,255,255,.32)}
.waw-hero-band .sb-box.sb-hit{background:var(--pink)}

/* ── Today in Wrestling — third module, calendar icon + date ── */
.hero-otd-card{display:flex;align-items:flex-start;gap:14px}
.hero-otd-icon{flex:none;width:44px;height:44px;color:var(--pink);margin-top:0}
.hero-otd-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.hero-otd-date{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1;color:#fff}
.hero-otd-sub{font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.62)}
.hero-otd-cta{margin-top:4px;font-family:var(--sans);font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);transition:color var(--tick)}
.hero-otd-card:hover .hero-otd-cta{color:#fff}

/* ── Hero Story inside the band — fixed size, matched against the condensed side column (v2.6.12) ── */
.waw-hero-band .waw-hero{margin-top:0}

@media (max-width:1080px){
  .waw-hero-grid{grid-template-columns:1fr}
  .waw-hero-col-side{flex-direction:row;gap:24px}
  .hero-side-module{flex:1;min-width:0}
  .hero-smark-card{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){
  .waw-hero-band-inner{padding:clamp(20px,6vw,26px) var(--gutter)}
  .waw-hero-col-side{flex-direction:column}
  .waw-hero-col-side{order:2}
  .waw-hero-col-main{order:1}
  .hero-side-original{order:1}
  .hero-side-smark{order:2}
  .hero-side-otd{order:3}
}

/* ============================================================================
   HERO STORY CARD (unchanged look — now lives inside .waw-hero-band)
   ========================================================================== */
.waw-hero{position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:#000000}
.waw-hero-link{display:block;position:relative}
/* v2.6.11's stretch-to-match-the-side-column approach solved the wrong
   problem: it inflated the hero image to fill whatever height the side
   column happened to need, which made the whole band taller instead of
   shorter. Reverted (v2.6.12). Both sides now use real fixed sizes,
   sized from directly measured targets rather than guessed numbers —
   440px keeps the hero at essentially its natural 16/9 size; the side
   column is what actually gets condensed (Featured Original's aspect
   ratio shrinks significantly below, from 260/210 to 260/144), so the
   two land within ~15px of each other with no leftover black under
   either one. */
.hero-img-wrap{position:relative;aspect-ratio:16/9;max-height:440px}
.hero-img-wrap img,.hero-img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.waw-hero:hover .hero-img{transform:scale(1.03)}
/* Placeholder — near-black with a single restrained pink glow. Deliberately
   dark; no grid, no second glow to lighten it. */
.hero-img--placeholder,.hero-placeholder-bg{
  background:
    radial-gradient(70% 100% at 86% 2%,rgba(255,10,138,.22),transparent 52%),
    linear-gradient(160deg,#000000,#000000 64%);
}
/* Overlay — darkens the whole frame (not just the base) so any story photo
   reads dark and moody, with a pink glow echoing the neon hero. Heavy at the
   bottom for headline legibility. */
/* v2.7.0 premium pass: layered onto the existing scrim + pink glow rather
   than replacing them — richer bottom contrast, a soft vignette at the
   corners, and a barely-there grain, all stacked as extra background
   layers on the base element. The diagonal texture needs its own
   corner-only mask (background-image stacking can't mask individual
   layers), so it lives on ::after instead, matching .waw-texture's
   corner-only rule elsewhere in this file. */
.hero-overlay{position:absolute;inset:0;background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.32) 100%),
    radial-gradient(66% 86% at 90% 4%,rgba(255,10,138,.20),transparent 54%),
    linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.52) 64%,rgba(0,0,0,.32) 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:120px 120px,100% 100%,100% 100%,100% 100%;
  background-blend-mode:overlay,normal,normal,normal;
}
.hero-overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;
  opacity:.05;
  -webkit-mask-image:radial-gradient(55% 55% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(55% 55% at 100% 0%,#000 0%,transparent 70%);
}
.hero-badge{position:absolute;top:18px;left:18px;z-index:2;background:var(--pink);color:#fff;font-family:var(--sans);font-weight:800;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:3px;clip-path:var(--clip-sm)}
.hero-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3.2vw,38px);color:#fff}
.hero-promo-label{margin:0 0 12px;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.05;letter-spacing:-.012em;margin:0;max-width:20ch;text-wrap:balance;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.waw-hero:hover .hero-title{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:6px;text-decoration-thickness:2px}
.hero-meta{display:flex;align-items:center;gap:16px;margin-top:16px}
.hero-time{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:rgba(255,255,255,.82)}
.hero-time svg{width:13px;height:13px}
.hero-read-more{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);opacity:0;transform:translateX(-4px);transition:opacity var(--tick),transform var(--tick)}
.waw-hero:hover .hero-read-more{opacity:1;transform:none}

/* ── Hero story mobile fix — must come after the base rules above so it
   wins the cascade at equal specificity (a duplicate selector earlier in
   the file, even inside a media query, loses to a plain rule declared
   later in source order). The base title used a 1.9rem font-size floor
   with a 3-line clamp regardless of viewport; on a short 16/9 mobile
   image that left the badge, a 3-line headline and the meta row fighting
   over ~200px with almost no clearance between them. Taller image on
   mobile, smaller floor, tighter line-height — addresses the actual
   cause (fixed min font-size on a fixed-aspect image) rather than
   nudging padding around it. ── */
@media (max-width:640px){
  .hero-img-wrap{aspect-ratio:4/3;max-height:none}
  .hero-badge{top:14px;left:14px;padding:5px 10px;font-size:.6rem}
  .hero-content{padding:16px 16px 20px}
  .hero-promo-label{margin:0 0 8px;font-size:.68rem}
  .hero-title{font-size:1.5rem;line-height:1.14;max-width:none}
  .hero-meta{margin-top:12px}
}
@media (max-width:400px){
  .hero-title{font-size:1.32rem}
}

/* ============================================================================
   LATEST NEWS — three stories, photo + kicker + serif head + dek
   ========================================================================== */
.waw-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.news-card{min-width:0}
/* Thumbnails sized up ~12% (v2.6.4) via a taller aspect ratio — same crop
   behaviour (object-fit:cover), same card, same typography. v2.7.0 adds a
   hairline border + resting shadow on the image only — this component is
   deliberately borderless/cardless elsewhere in the design ("structure
   comes from whitespace + hairlines, not cards", per the file's own
   opening note), so a full boxed card here would be a bigger change than
   "polish". The image is the one place a border reads as refinement
   rather than a new container. */
.news-card-img{position:relative;aspect-ratio:16/11.2;border-radius:var(--radius);overflow:hidden;background:var(--paper-soft);margin-bottom:14px;border:1px solid var(--line);box-shadow:var(--card-shadow);transition:box-shadow var(--card-tick),transform var(--card-tick)}
.news-card-link:hover .news-card-img{transform:translateY(var(--card-lift));box-shadow:var(--card-shadow-hover),var(--glow-pink)}
.news-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.news-card-link:hover .news-card-img img{transform:scale(1.03)}
.news-card-img-ph,.news-card-img--placeholder{width:100%;height:100%;background:linear-gradient(135deg,#ececef,#f7f7f8)}
.news-card-kicker{display:inline-block;margin-bottom:9px;color:var(--pink-deep);font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.news-card-title{font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.14;letter-spacing:-.006em;margin:0 0 8px;color:var(--ink);text-wrap:balance;transition:color var(--card-tick)}
.news-card-link:hover .news-card-title{color:var(--pink-deep)}
.news-card-dek{font-size:.92rem;line-height:1.5;color:var(--ink-soft);margin:0 0 12px}
.news-card-meta{font-size:.72rem;color:var(--ink-faint);font-weight:500;display:flex;gap:12px;align-items:center}
/* promotion badge on card image kept subtle (mono) */
.waw-badge{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(13,13,15,.82);padding:4px 8px;border-radius:3px;backdrop-filter:blur(2px);clip-path:var(--clip-sm)}

/* ============================================================================
   ALL THE LATEST — the wire-stamp feed (signature)
   ========================================================================== */
.feed-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 24px}
.feed-filter{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:7px 14px;border:1px solid var(--line-strong);border-radius:100px;background:var(--paper);transition:all var(--tick)}
.feed-filter:hover{border-color:var(--ink);color:var(--ink)}
.feed-filter.is-active{background:var(--pink);border-color:var(--pink);color:#fff}

.waw-feed-list{display:flex;flex-direction:column}
.feed-item{border-top:1px solid var(--line);position:relative}
.feed-item:first-child{border-top:0}
.feed-item-link{display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:start;padding:24px 52px 24px 4px;transition:background var(--card-tick)}
.feed-item-link:hover{background:var(--paper-soft)}

/* wire stamp */
.feed-logo-tile{width:76px;height:76px;border:1px solid var(--line-strong);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);padding:8px}
.feed-logo-tile img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.03);transition:filter var(--tick)}
.feed-item-link:hover .feed-logo-tile img{filter:none}
.feed-logo-initials{font-family:var(--sans);font-weight:800;font-size:1.4rem;color:var(--ink)}
.feed-logo-tile--original{border-color:var(--line-strong)}
/* Featured module — natural interruption every 8–10 items (v2.6.4).
   Same .feed-item--original card language; a hairline pink rail on the
   left is the only distinguishing touch, no new card design. */
.feed-item--featured{border-top-color:var(--line-strong)}
.feed-item--featured .feed-item-link{border-left:3px solid var(--pink);padding-left:calc(4px + 15px);margin-left:-16px}
.feed-item--featured .feed-badge--original{color:var(--pink-deep);background:rgba(255,10,138,.08);border-color:rgba(255,10,138,.25)}

.feed-content{min-width:0}
.feed-top-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.feed-badge{font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;clip-path:var(--clip-xs)}
.feed-badge--news{color:var(--pink-deep);background:rgba(255,10,138,.09)}
.feed-badge--result{color:#0d7a53;background:rgba(13,122,83,.1)}
.feed-badge--original{color:var(--ink);background:var(--paper-soft);border:1px solid var(--line-strong)}
.feed-new{font-family:var(--sans);font-weight:800;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--pink);padding:3px 7px;border-radius:3px;clip-path:var(--clip-xs)}
.feed-time{font-size:.72rem;color:var(--ink-faint);font-weight:500;margin-left:auto}
.feed-title{display:block;font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.2;letter-spacing:-.004em;color:var(--ink);margin-bottom:6px;text-wrap:pretty;transition:color var(--tick)}
.feed-item-link:hover .feed-title{color:var(--pink-deep)}
.feed-excerpt{font-size:.88rem;line-height:1.45;color:var(--ink-soft);margin:0 0 8px}
.feed-source-row{display:flex;align-items:center;gap:7px}
.feed-favicon-sm{width:14px;height:14px;border-radius:3px}
.feed-source-name{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.02em;color:var(--ink-faint)}

.feed-save{position:absolute;top:20px;right:6px;z-index:2;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink-faint);display:inline-flex;align-items:center;justify-content:center;transition:all var(--tick)}
.feed-save:hover{border-color:var(--pink);color:var(--pink)}
.feed-save svg{width:16px;height:16px}
.feed-save.is-saved{background:var(--pink);border-color:var(--pink);color:#fff}
.feed-save.is-saved svg{fill:currentColor}

.feed-load-more-wrap{display:flex;justify-content:center;padding:34px 0 8px}
.feed-load-more-btn{font-family:var(--sans);font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep);background:var(--paper);border:1.5px solid var(--pink);border-radius:100px;padding:13px 34px;transition:all var(--tick)}
.feed-load-more-btn:hover{background:var(--pink);color:#fff}
.feed-load-more-btn:disabled{opacity:.6;cursor:default}

/* ============================================================================
   ADS — quiet, labelled, self-collapsing
   ========================================================================== */
.ad-unit{margin:34px 0;text-align:center}
.ad-label,.sponsored-label{display:block;font-family:var(--sans);font-weight:700;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.ad-slot{display:flex;align-items:center;justify-content:center;margin:0 auto}
.ad-slot--leaderboard{min-height:0}
.ad-slot--sidebar{margin:0 auto}
.ad-unit:has(.ad-slot:empty){display:none}
.sponsored-card:has(.ad-slot:empty),.sponsored-feed-item:has(.ad-slot:empty){display:none}
.sponsored-feed-item{border-top:1px solid var(--line);padding:18px 4px}
.ad-unit--mobile-anchor{position:fixed;left:0;right:0;bottom:0;z-index:150;margin:0;background:var(--paper);border-top:1px solid var(--line);padding:6px 0;display:none}
@media (max-width:860px){.ad-unit--mobile-anchor{display:block}}

/* ============================================================================
   RIGHT RAIL — shared chrome
   ========================================================================== */
.sidebar-section{margin-bottom:40px}
.sidebar-title{font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;padding-bottom:16px;padding-top:16px;border-bottom:1px solid var(--ink);position:relative;display:flex;align-items:center;gap:8px;isolation:isolate}
.sidebar-title::before{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:3px;background:var(--pink)}
/* v2.7.0 premium pass: a smaller version of .section-header's above-heading
   accent, scaled down for the sidebar's tighter stacking (18px width vs
   56px, no gradient wash — a wash at this density would just muddy
   adjacent widgets rather than read as "depth"). */
.sidebar-title::after{content:"";position:absolute;left:0;top:0;width:24px;height:2px;background:var(--pink)}
.sidebar-title .ti{font-size:.9em;color:var(--pink-deep)}
.sidebar-sub{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 10px}
.sidebar-view-all{display:inline-block;margin-top:16px;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-deep)}
.sidebar-view-all:hover{text-decoration:underline;text-underline-offset:3px}

/* ── SMARK daily puzzle ───────────────────────────────────────────────────*/
.sb-smark-wrap{margin-bottom:22px}
.sb-smark{position:relative;overflow:hidden;isolation:isolate;display:block;border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px;background:var(--paper);box-shadow:var(--card-shadow);transition:border-color var(--card-tick),box-shadow var(--card-tick),transform var(--card-tick)}
.sb-smark:hover{border-color:var(--pink);transform:translateY(var(--card-lift));box-shadow:var(--card-shadow-hover),var(--glow-pink)}
.sb-smark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;opacity:.03;
  -webkit-mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
}
.sb-smark > *{position:relative;z-index:1}
.sb-smark-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sb-smark-left{display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-smark-eyebrow{font-family:var(--sans);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-deep)}
.sb-smark-title{font-family:var(--sans);font-weight:800;font-size:1.7rem;letter-spacing:.02em;color:var(--ink);line-height:1}
.sb-smark-sub{font-size:.72rem;color:var(--ink-faint)}
.sb-smark-grid{display:flex;flex-direction:column;gap:4px;flex:none}
.sb-smark-row{display:flex;gap:4px}
.sb-box{width:15px;height:15px;border-radius:2px;background:var(--line)}
.sb-box.sb-miss{background:var(--line)}
.sb-box.sb-close{background:var(--line-strong)}
.sb-box.sb-hit{background:var(--pink)}
.sb-smark-cta{margin-top:14px;font-family:var(--sans);font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-deep)}
.sb-smark:hover .sb-smark-cta{color:var(--pink)}

/* ── Gorilla Position poster ──────────────────────────────────────────────*/
.sb-gp-wrap{margin-bottom:0}
.sb-gp-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:260/300;background:#0d0d0f;border:1px solid var(--slate-line);box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);transition:box-shadow var(--card-tick),transform var(--card-tick)}
.sb-gp-card:hover{transform:translateY(var(--card-lift));box-shadow:0 4px 8px rgba(0,0,0,.35),0 16px 32px -14px rgba(0,0,0,.7),var(--glow-pink)}
.sb-gp-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.sb-gp-card:hover img{transform:scale(1.04)}
.sb-gp-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(0deg,rgba(6,6,8,.9),rgba(6,6,8,.15) 55%,transparent)}
.sb-gp-label{font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.15;color:#fff;text-wrap:balance}

/* ── Live / recent events ─────────────────────────────────────────────────*/
.sb-live-list{display:flex;flex-direction:column}
.sb-live-card{display:block;padding:14px 0;border-top:1px solid var(--line);position:relative;padding-left:14px}
.sb-live-list .sb-live-card:first-child{border-top:0}
.sb-live-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--wlf-accent,var(--pink))}
.sb-live-card.is-live::before{top:10px;bottom:10px}
.sb-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wlf-ink,#fff);background:var(--wlf-accent,var(--pink));padding:3px 8px;border-radius:3px}
.sb-live-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sb-live-promo{font-family:var(--sans);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.sb-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:sbPulse 1.6s ease-in-out infinite}
@keyframes sbPulse{0%,100%{opacity:1}50%{opacity:.35}}
.sb-live-name{display:block;font-family:var(--sans);font-weight:700;font-size:.92rem;line-height:1.25;color:var(--ink)}
.sb-live-card:hover .sb-live-name{color:var(--pink-deep)}
.sb-live-body{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sb-live-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.sb-live-meta{font-size:.68rem;color:var(--ink-faint);margin-top:3px;display:block}
.sb-live-latest{font-size:.74rem;color:var(--ink-soft);margin-top:5px;display:block}
.sb-live-latest.is-empty{color:var(--ink-faint)}
.sb-live-latest strong{color:var(--ink);font-weight:700}
.sb-live-cta{font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-deep);margin-top:4px;display:inline-block}
.is-ended .sb-chip{background:var(--paper-soft);color:var(--ink);border:1px solid var(--line-strong)}
.sb-live-card.is-ended::before{background:var(--wlf-accent,var(--line-strong))}
.sidebar-event-hubs{margin-top:6px}

/* ── WAW Originals nav (mono editorial list) ──────────────────────────────*/
.originals-nav{display:flex;flex-direction:column}
.originals-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);transition:padding-left var(--tick)}
.originals-nav .originals-link:first-child{border-top:0}
.originals-link:hover{padding-left:6px}
.originals-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.originals-label{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--ink)}
.originals-link:hover .originals-label{color:var(--pink-deep)}
.originals-meta{font-size:.7rem;color:var(--ink-faint)}
.originals-count{font-family:var(--sans);font-weight:700;font-size:.72rem;color:var(--ink-soft);background:var(--paper-soft);border:1px solid var(--line);border-radius:100px;padding:2px 10px;flex:none}
.originals-count--off{color:var(--ink-faint)}

/* ── Trending Now (Wrestler Hubs → numbered, no avatars) ──────────────────*/
.sidebar-trending{counter-reset:trend}
.wh-trending-item{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;padding:14px 0;border-top:1px solid var(--line);counter-increment:trend}
.sidebar-trending .wh-trending-item:first-of-type{border-top:0}
.wh-trending-item::before{content:counter(trend);font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1;color:var(--pink);width:1.4ch;text-align:center}
.wh-trend-avatar,.wh-trend-fires,.wh-trend-arrow{display:none}   /* no thumbnails, no emoji clutter */
.wh-trend-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.wh-trend-name{font-family:var(--sans);font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink);transition:color var(--tick);display:flex;align-items:center;gap:6px}
.wh-trending-item:hover .wh-trend-name{color:var(--pink-deep)}
.wh-trend-crown{font-size:.8em}
.wh-trend-meta{font-size:.68rem;color:var(--ink-faint);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.wh-trend-promo{font-weight:700}
.wh-trend-count{font-weight:700}

/* ── Follow us ────────────────────────────────────────────────────────────*/
.social-row{display:flex;gap:9px;flex-wrap:wrap}
.social-row a{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:all var(--tick)}
.social-row a:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.social-row svg{width:17px;height:17px;fill:currentColor}

/* ── Newsletter ───────────────────────────────────────────────────────────*/
.sidebar-newsletter .newsletter-copy,.newsletter-copy{font-size:.88rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.waw-newsletter-form{display:flex;flex-direction:column;gap:9px}
.waw-newsletter-form input[type="email"]{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.waw-newsletter-form input[type="email"]:focus{border-color:var(--pink);outline:none}
.waw-btn{font-family:var(--sans);font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;border:0;border-radius:var(--radius);padding:13px 20px;box-shadow:0 1px 2px rgba(19,19,22,.06);transition:background var(--card-tick),color var(--card-tick),box-shadow var(--card-tick),transform var(--card-tick)}
.waw-btn--pink{color:#fff;background:var(--pink)}
.waw-btn--pink:hover{background:var(--pink-deep);box-shadow:0 1px 2px rgba(19,19,22,.06),var(--glow-pink)}
.waw-btn:active{transform:translateY(1px)}
.waw-newsletter-msg{font-size:.78rem;margin-top:4px}
.waw-newsletter-msg.success{color:#0d7a53}
.waw-newsletter-msg.error{color:var(--pink-deep)}
.newsletter-fine{font-size:.66rem;color:var(--ink-faint);text-align:center;margin:9px 0 0}

/* v2.7.0 premium pass: newsletter box was a bare wrapper with no styling
   of its own — the same border/shadow/texture-corner treatment as other
   cards in this pass, on a light surface. */
.newsletter-box{position:relative;overflow:hidden;isolation:isolate;background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--card-shadow)}
.newsletter-box::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;opacity:.03;
  -webkit-mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 100% 0%,#000 0%,transparent 72%);
}
.newsletter-box > *{position:relative;z-index:1}

/* ============================================================================
   FOOTER
   ========================================================================== */
/* v2.7.0 premium pass: subtle black-to-deep-purple gradient + corner
   texture + a soft glow behind the logo. The violet here matches the
   existing atmospheric glow already used in .waw-originals-band::before
   (rgba(155,0,255,...)) — background atmosphere only, never a UI accent;
   pink stays the only interactive/functional colour, unchanged. */
.waw-site-footer{
  background:
    radial-gradient(60% 50% at 8% 0%,rgba(255,10,138,.10),transparent 60%),
    linear-gradient(165deg,var(--night) 0%,#160617 65%,#1c0a1f 100%);
  color:#fff;margin-top:72px;border-top:3px solid var(--pink);position:relative;overflow:hidden;isolation:isolate;
}
.waw-site-footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;
  opacity:.04;
  -webkit-mask-image:radial-gradient(55% 70% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(55% 70% at 100% 0%,#000 0%,transparent 70%);
}
.waw-footer-inner{max-width:var(--wrap);margin:0 auto;padding:52px var(--gutter) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;position:relative;z-index:1}
.waw-footer-brand a.footer-logo{display:inline-flex;flex-direction:column;line-height:.86;margin-bottom:16px;position:relative}
.waw-footer-brand a.footer-logo::before{
  content:"";position:absolute;left:-16px;top:-16px;width:120px;height:80px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 20% 40%,rgba(255,10,138,.16),transparent 70%);
}
.waw-footer-brand .logo-we{color:#fff}
.waw-footer-brand .logo-wr{color:var(--pink)}
.footer-tag{font-size:.86rem;color:var(--night-faint);line-height:1.55;max-width:34ch;margin:0 0 20px}
.footer-social{display:flex;gap:8px}
.footer-social a{width:36px;height:36px;border:1px solid var(--night-line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:all var(--tick)}
.footer-social a:hover{background:var(--pink);border-color:var(--pink)}
.footer-social svg{width:15px;height:15px;fill:currentColor}
.footer-col h4{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:2px 0 16px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:.86rem;color:var(--night-faint);transition:color var(--tick)}
.footer-col a:hover{color:var(--pink)}
.waw-footer-copy{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter);border-top:1px solid var(--night-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--night-faint);position:relative;z-index:1}
.waw-footer-copy a{color:var(--night-faint)}
.waw-footer-copy a:hover{color:var(--pink)}

/* ============================================================================
   INTERIOR PAGES — single / archive / page / search / comments / 404
   Editorial baseline so the whole site inherits the new voice.
   ========================================================================== */
.waw-content-col > article,.page-content,.entry,.hentry{min-width:0}
.entry-header{margin:8px 0 28px}
.entry-kicker,.post-kicker{color:var(--pink-deep);font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px;display:inline-block}
.entry-title,.page-title,.single-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.014em;margin:0 0 14px;text-wrap:balance}
.entry-meta{font-size:.8rem;color:var(--ink-faint);display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-weight:500}
.entry-meta a{color:var(--pink-deep)}

.entry-content{font-size:1.06rem;line-height:1.72;color:#26262b}
.entry-content > *{max-width:70ch}
.entry-content .alignwide{max-width:none}
.entry-content p{margin:0 0 1.35em}
.entry-content h2{font-size:1.7rem;margin:1.8em 0 .5em}
.entry-content h3{font-size:1.32rem;margin:1.6em 0 .5em}
.entry-content a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(209,0,111,.4)}
.entry-content a:hover{text-decoration-color:var(--pink-deep)}
.entry-content img,.entry-content figure{border-radius:var(--radius)}
.entry-content figure{margin:1.8em 0}
.entry-content figcaption,.wp-caption-text{font-size:.8rem;color:var(--ink-faint);margin-top:8px;text-align:center}
.entry-content blockquote{margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--pink);font-family:var(--serif);font-size:1.28rem;line-height:1.4;color:var(--ink);font-style:italic}
.entry-content ul,.entry-content ol{margin:0 0 1.35em;padding-left:1.3em}
.entry-content li{margin-bottom:.5em}
.entry-content code,.entry-content kbd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em;background:var(--paper-soft);border:1px solid var(--line);border-radius:4px;padding:.1em .4em}
.entry-content pre{background:var(--night);color:#f2f2f5;border-radius:var(--radius);padding:18px 20px;overflow:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86rem;line-height:1.6}
.entry-content pre code{background:none;border:0;padding:0;color:inherit}
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.92rem}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry-content th{background:var(--paper-soft);font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:.4em 1.4em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.4em}

/* archive / category header reuses section grammar */
.archive-header,.page-header{margin:32px 0 8px;padding-bottom:16px;border-bottom:1px solid var(--ink);position:relative}
.archive-header::before,.page-header::before{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pink)}
.archive-title,.archive-header .page-title{font-family:var(--sans);font-weight:800;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;margin:0}
.archive-description{color:var(--ink-soft);font-size:.95rem;margin-top:10px;max-width:64ch}

/* pagination */
.waw-pagination,.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:44px 0}
.waw-pagination a,.waw-pagination span,.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--ink);transition:all var(--tick)}
.page-numbers.current{background:var(--pink);border-color:var(--pink);color:#fff}
.page-numbers:hover:not(.current){border-color:var(--ink)}

/* search form */
.search-form,.wp-block-search__inside-wrapper{display:flex;gap:8px;max-width:520px}
.search-field,.wp-block-search__input{flex:1;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper)}
.search-field:focus{border-color:var(--pink);outline:none}
.search-submit,.wp-block-search__button{font-family:var(--sans);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--pink);border:0;border-radius:var(--radius);padding:12px 22px}
.search-submit:hover{background:var(--pink-deep)}

/* ── search.php — this template's own markup (search-form-large, the bare
   #waw-search-main input, its emoji submit button, the results count and
   the empty state) had no matching rules anywhere in the file — it was
   rendering as raw unstyled browser form controls with an emoji button,
   which is roughest right where mobile most needs a clean full-width
   input. Same visual language as .search-form above (paper/line/pink),
   scoped to this page's actual class names. ── */
.search-header{margin:8px 0 30px}
.search-form-large{display:flex;gap:8px;max-width:560px}
.search-form-large input[type="search"]{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);font-size:1rem}
.search-form-large input[type="search"]:focus{border-color:var(--pink);outline:none}
.search-form-large button{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;background:var(--pink);border:0;border-radius:var(--radius);transition:background var(--tick)}
.search-form-large button:hover{background:var(--pink-deep)}
.search-meta{margin:16px 0 0;font-size:.92rem;color:var(--ink-soft)}
.search-meta strong{color:var(--ink)}
.search-post-type{font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto}
.news-card-excerpt{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
.search-no-results{text-align:center;padding:60px 0 40px}
.search-no-results .empty-icon{font-size:2.4rem;margin-bottom:14px;opacity:.5}
.search-no-results h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0 0 10px}
.search-no-results p{color:var(--ink-soft);margin:0 0 22px}
.empty-cats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:480px;margin:0 auto}
.empty-cat-pill{font-family:var(--sans);font-weight:600;font-size:.82rem;padding:9px 18px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink);transition:all var(--tick)}
.empty-cat-pill:hover{border-color:var(--pink);color:var(--pink-deep)}
@media (max-width:480px){
  .search-form-large{max-width:100%}
}

/* comments */
.comments-area{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--ink)}
.comments-title,.comment-reply-title{font-family:var(--sans);font-weight:800;font-size:.94rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.comment-list{list-style:none;margin:0;padding:0}
.comment-body{padding:18px 0;border-top:1px solid var(--line)}
.comment-author{font-family:var(--sans);font-weight:700;font-size:.9rem}
.comment-metadata{font-size:.72rem;color:var(--ink-faint)}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);margin-top:6px}
.comment-form textarea:focus,.comment-form input:focus{border-color:var(--pink);outline:none}
.form-submit .submit{font-family:var(--sans);font-weight:800;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--pink);border:0;border-radius:var(--radius);padding:13px 26px}
.form-submit .submit:hover{background:var(--pink-deep)}

/* ── comments.php's actual markup — the block above targets an older WP
   default class scheme (.comments-title, .comment-list) that this
   template doesn't use; its real heading is .comments-heading, its real
   list is .waw-comment-list, and the avatar/meta/text/reply layout
   inside each comment had no rules anywhere. It's the Disqus plugin's
   fallback (see the file's own header comment), so it only renders when
   Disqus is inactive — easy for a styling gap here to go unnoticed for a
   long time, but still real raw-HTML the moment it does render.
   Avatar-left/body-right on desktop, stacked on mobile (an 80px-wide
   avatar column has no room to be useful under ~380px). ── */
.comments-heading{font-family:var(--sans);font-weight:800;font-size:.94rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 22px}
.waw-comment-list{list-style:none;margin:0;padding:0}
.waw-comment-list li.waw-comment{border-top:1px solid var(--line);padding:20px 0}
.waw-comment-list li.waw-comment:first-child{border-top:0}
.comment-inner{display:flex;gap:14px;align-items:flex-start}
.comment-avatar{flex:none}
.comment-avatar img{width:40px;height:40px;border-radius:50%;display:block}
.comment-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.comment-time{font-size:.72rem;color:var(--ink-faint)}
.comment-text{font-size:.94rem;line-height:1.55;color:#26262b}
.comment-text p{margin:0 0 .9em}
.comment-text p:last-child{margin-bottom:0}
.comment-reply{margin-top:8px}
.comment-reply a{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-deep)}
.comment-reply a:hover{text-decoration:underline;text-underline-offset:3px}
.comment-form-title{font-family:var(--sans);font-weight:800;font-size:.94rem;letter-spacing:.12em;text-transform:uppercase;margin:36px 0 18px}
.comment-form-field{margin-bottom:14px}
.comment-form-field label{display:block;font-family:var(--sans);font-weight:700;font-size:.78rem;margin-bottom:2px}
@media (max-width:480px){
  .comment-inner{gap:11px}
  .comment-avatar img{width:32px;height:32px}
}

/* ── 404 — "BOTCHED." brand treatment. The one rule here previously
   targeted .error-404 .page-title, but the template's actual heading is
   .error-botched — a mismatch, so none of it ever applied and the whole
   page (eyebrow, the big wordmark, action buttons, search) rendered as
   unstyled default browser text. Styled to the real class names, mobile
   sizing prioritized since a lost/mistyped-URL visitor is disproportion-
   ately likely to be on a phone. ── */
.error-404{text-align:center;padding:70px 0 60px;max-width:520px;margin:0 auto}
.error-eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:18px}
.error-botched{font-family:var(--sans);font-weight:800;font-size:clamp(2.6rem,11vw,5rem);letter-spacing:-.01em;line-height:1;margin:0;color:var(--ink)}
.error-botched span{color:var(--pink)}
.error-msg{margin:18px 0 0;font-size:1.02rem;line-height:1.55;color:var(--ink-soft)}
.error-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px 0 0}
.error-btn{font-family:var(--sans);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 24px;border-radius:100px;transition:all var(--tick)}
.error-btn--results{color:#fff;background:var(--pink)}
.error-btn--results:hover{background:var(--pink-deep)}
.error-btn--ghost{color:var(--ink);border:1.5px solid var(--line-strong)}
.error-btn--ghost:hover{border-color:var(--ink)}
.error-search{margin:36px 0 0}
.error-search form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.error-search input[type="search"]{flex:1;min-width:0;padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);font-size:1rem}
.error-search input[type="search"]:focus{border-color:var(--pink);outline:none}
.error-search button{flex:none;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:#fff;background:var(--ink);border:0;border-radius:var(--radius);transition:background var(--tick)}
.error-search button:hover{background:var(--pink)}
@media (max-width:480px){
  .error-404{padding:50px 0 40px}
  .error-actions{flex-direction:column;align-items:stretch}
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .waw-site-wrap{grid-template-columns:1fr}
  .waw-sidebar{position:static;border-top:1px solid var(--line);margin-top:16px;padding-top:8px}
  .waw-news-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  /* Search was fully unreachable on mobile: .waw-topnav-tools (its only
     entry point) was display:none below this breakpoint, and nothing
     replaced it inside the nav panel. Kept as a compact icon next to the
     hamburger instead of display:none — grid goes to 4 tracks so both
     controls sit in the same right-hand cluster. */
  .waw-topnav-inner{grid-template-columns:auto 1fr auto auto;height:60px;gap:6px}
  .waw-topnav-tools{display:flex}
  .waw-nav{position:fixed;inset:60px 0 auto 0;background:var(--night);border-bottom:1px solid var(--night-line);justify-self:stretch;max-height:0;overflow:hidden;transition:max-height .28s ease}
  .waw-nav.is-open{max-height:75vh;overflow:auto}
  .waw-nav-list{flex-direction:column;gap:0;align-items:stretch;padding:8px var(--gutter)}
  .waw-nav-list>li{border-top:1px solid var(--night-line)}
  .waw-nav-list>li:first-child{border-top:0}
  .waw-nav-list a{padding:15px 0;font-size:.92rem}
  .waw-nav-list a::after{display:none}
  .waw-nav-list .sub-menu{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .waw-nav-toggle{display:inline-flex}
  .topbar-date{display:none}
  /* 38px undershoots the ~44px comfortable tap-target minimum; only
     worth the fix on touch viewports; unscoped it would loosen the
     tighter desktop icon cluster for no reason. */
  .tool-btn{width:44px;height:44px}
}
@media (max-width:620px){
  .waw-news-grid{grid-template-columns:1fr;gap:26px}
  /* .news-card{display:grid} was never doing anything: every template
     (front-page.php, archive.php, category.php, search.php) wraps the
     image and title in a single <a class="news-card-link"> — .news-card
     itself only ever has that one child, so a 118px/1fr grid on it had
     nothing to split into two columns. The grid belongs on
     .news-card-link, the actual multi-child container — but that
     container isn't a clean 2-item split either: front-page.php's cards
     have 5 direct children (img, kicker, title, dek, meta), so a plain
     118px/1fr grid auto-placed them kicker-next-to-image on row 1, then
     wrapped title/dek/meta onto their own 118px-wide row below —
     visually identical to no fix at all. Naming the image into its own
     column spanning every row, with every text child explicitly in
     column 2, is what actually produces a thumb-left/text-right card
     regardless of how many text children a given template's card has
     (archive/category/search wrap theirs in .news-card-body — one
     child, same column-2 rule, same result). */
  .news-card-link{display:grid;grid-template-columns:118px 1fr;grid-auto-flow:row;gap:0 14px;align-items:start}
  .news-card-img{grid-column:1;grid-row:1/-1;margin-bottom:0;aspect-ratio:1/1}
  /* Structural, not an enumerated class list: any direct child of
     .news-card-link other than the image goes in column 2. An
     enumerated list (kicker/title/dek/meta/body) already missed
     search.php's .news-card-excerpt once — a card variant gaining a new
     text child in the future shouldn't require remembering to update
     this selector too. */
  .news-card-link > :not(.news-card-img){grid-column:2}
  .news-card-title{font-size:1.05rem}
  .news-card-dek{display:none}
  .feed-item-link{grid-template-columns:56px 1fr;gap:14px;padding:18px 2px}
  .feed-logo-tile{width:56px;height:56px;padding:6px}
  .feed-logo-initials{font-size:1.05rem}
  .feed-save{display:none}
  .feed-time{margin-left:0}
  .feed-top-row{flex-wrap:wrap}
  .waw-footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:440px){.waw-footer-inner{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================================
   LEGACY TOKEN COMPATIBILITY  (v2.1.0)
   ----------------------------------------------------------------------------
   The WAW plugins (Wrestler Hub, SMARK, Live Companion, etc.) were authored
   against the previous dark theme's CSS variables. Re-declaring those names
   here — mapped to light-theme values — keeps plugin templates coherent on the
   new theme without editing plugin code. Text tokens map to dark ink because
   plugin content now sits on light surfaces; any element that is *intentionally*
   dark (e.g. a photo hero banner) is owned by its plugin and styled there.
   ========================================================================== */
:root{
  --pink-dark:#d1006f;
  --purple:#9b00ff;
  --bg:#ffffff;
  --surface:#f7f7f8;
  --surface2:#f0f0f2;
  --surface3:#e9e9ec;
  --bg2:#f0f0f2;
  --bg3:#e9e9ec;
  --text:#131316;
  --text-bright:#0b0b0d;
  --muted:#8b8b93;
  --border:#e7e7ea;
  --hairline:rgba(19,19,22,.08);
  --pink-wash:rgba(255,10,138,.07);
  --radius-sm:4px;
  --radius-lg:14px;
  --nav-width:200px;
  --sidebar-w:320px;
  --topnav-h:68px;
  --topbar-h:42px;
  --shadow-lift:0 12px 28px rgba(0,0,0,.12);
  --transition:.15s ease;
  --container:100%;
  --ink-dark:#0a0a0a;
  --skew-chrome:-8deg;
  --skew-display:-4deg;
  --font:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Bebas Neue","Oswald",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
}

/* ============================================================================
   SINGLE POST / STORY  (v2.1.0)
   Main sidebar is hidden on single views; .single-layout owns the columns.
   ========================================================================== */
body.single #waw-sidebar,
body.single-waw_wrestler #waw-sidebar{display:none}
body.single .waw-site-wrap,
body.single-waw_wrestler .waw-site-wrap{grid-template-columns:1fr}

.waw-main--single{max-width:100%}
.single-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,4vw,56px);align-items:start}
.single-article-col{min-width:0}
.single-story-aside{min-width:0;position:sticky;top:88px;align-self:start}

/* ── Breadcrumb ── */
.waw-breadcrumb{display:flex;align-items:center;gap:9px;margin:24px 0 26px;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);min-width:0}
.waw-breadcrumb a{color:var(--ink-faint);white-space:nowrap;transition:color var(--tick)}
.waw-breadcrumb a:hover{color:var(--pink-deep)}
.waw-breadcrumb .bc-sep{color:var(--line-strong);flex:none}
.waw-breadcrumb .bc-current{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── Article header ── */
.waw-article{min-width:0}
.article-header{margin-bottom:8px}
.article-meta-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.article-kicker{color:var(--pink-deep);font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase}
.article-source-tag{position:relative;color:var(--ink-faint);font-family:var(--sans);font-size:.74rem;font-weight:500;padding-left:13px}
.article-source-tag::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.article-title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}

.article-byline{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}
.byline-left{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.82rem;color:var(--ink-faint);font-weight:500}
.byline-read{color:var(--ink-soft)}
.byline-share{display:flex;align-items:center;gap:8px}
.share-btn{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;background:var(--paper);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;transition:all var(--tick)}
.share-btn svg{width:16px;height:16px;fill:currentColor}
.share-btn:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.share-btn--copy{width:auto;border-radius:100px;padding:0 15px;gap:8px}
.share-btn--copy svg{fill:none}
.share-copy-label{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.share-btn--copy.is-copied{background:var(--pink);border-color:var(--pink);color:#fff}

/* ── Hero image ── */
.article-hero-img{margin:26px 0 6px;border-radius:var(--radius);overflow:hidden;background:var(--paper-soft)}
.article-hero-img img{width:100%;height:auto;display:block}

/* page.php's own hero image — same treatment, its own class since static
   pages (About, Contact, Privacy) render outside the article/story flow.
   Had no rule at all before this: an unconstrained full-resolution image
   with square corners sitting right under the title, exactly where a
   contact/about page would first make an impression. */
.page-hero-img{margin:22px 0 8px;border-radius:var(--radius);overflow:hidden;background:var(--paper-soft)}
.page-hero-img img{width:100%;height:auto;display:block}

/* ── Body ── */
.article-body{margin-top:26px}
.article-story-wrap{min-width:0}
.article-story-excerpt{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.32rem);line-height:1.6;color:#26262b;margin:0 0 26px;text-wrap:pretty}

/* ── Source CTA (external stories) ── */
.article-source-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:6px 0 0;padding:20px 24px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:#fff;transition:background var(--tick),border-color var(--tick)}
.article-source-cta:hover{background:var(--pink);border-color:var(--pink)}
.source-cta-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.source-cta-label{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.article-source-cta:hover .source-cta-label{color:rgba(255,255,255,.85)}
.source-cta-name{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.1}
.source-cta-arrow{width:22px;height:22px;flex:none;transition:transform var(--tick)}
.article-source-cta:hover .source-cta-arrow{transform:translateX(4px)}

/* ── Mentioned wrestlers ── */
.article-wrestler-links{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wrestler-links-label{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);flex:none}
.wrestler-links-row{display:flex;gap:8px;flex-wrap:wrap}
.wrestler-link-pill{font-family:var(--sans);font-weight:600;font-size:.8rem;padding:7px 15px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink);transition:all var(--tick)}
.wrestler-link-pill:hover{border-color:var(--pink);color:var(--pink-deep)}

/* ── Tags ── */
.article-footer{margin-top:26px}
.article-tags{display:flex;gap:8px;flex-wrap:wrap}
.article-tag{font-family:var(--sans);font-size:.74rem;font-weight:500;color:var(--ink-faint);padding:6px 13px;background:var(--paper-soft);border:1px solid var(--line);border-radius:100px;transition:all var(--tick)}
.article-tag::before{content:"#";opacity:.5;margin-right:1px}
.article-tag:hover{color:var(--ink);border-color:var(--line-strong)}

/* ── Related (bottom) ── */
.related-posts{margin-top:8px}

/* ── Story aside (right column on single) ── */
.single-story-aside .story-aside-section{margin-bottom:36px}
.story-aside-title{margin-bottom:16px}
.story-aside-list{display:flex;flex-direction:column}
.aside-story-item{display:grid;grid-template-columns:66px 1fr;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.story-aside-list .aside-story-item:first-child{border-top:0;padding-top:2px}
.aside-story-img{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-soft);position:relative}
.aside-story-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.aside-story-item:hover .aside-story-img img{transform:scale(1.05)}
.aside-story-img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ececef,#f7f7f8)}
.aside-story-img-ph span{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint)}
.aside-story-info{min-width:0;align-self:center}
.aside-story-title{font-family:var(--serif);font-weight:600;font-size:.94rem;line-height:1.2;color:var(--ink);margin:0 0 4px;transition:color var(--tick)}
.aside-story-item:hover .aside-story-title{color:var(--pink-deep)}
.aside-story-time{font-family:var(--sans);font-size:.7rem;color:var(--ink-faint)}

/* ── Single responsive ── */
@media (max-width:980px){
  .single-layout{grid-template-columns:1fr;gap:40px}
  .single-story-aside{position:static;border-top:1px solid var(--line);padding-top:24px}
}
@media (max-width:620px){
  .article-byline{gap:14px}
  .related-posts .waw-news-grid{grid-template-columns:1fr}
  /* No override needed here anymore — related-posts cards use the same
     .news-card-link > .news-card-img + .news-card-body structure as
     archive/category/search, which the universal rule above (in the
     .waw-news-grid media block) already handles correctly. */
  /* Byline row was landing right at the viewport edge on phones (374px
     right edge in a 390px viewport, zero margin) because "Copy link"'s
     text label ate ~90px next to two icon buttons — the label earns its
     keep on desktop as a discoverability hint but is dead weight once
     the row is this tight. Icon-only here recovers the room properly
     instead of leaning on flex-wrap to bail the row out at the last
     possible moment. Icons also come back up to a 44px tap target,
     matching the .tool-btn fix for the same reason. */
  .share-btn{width:44px;height:44px}
  .share-btn--copy{width:44px;padding:0}
  .share-copy-label{display:none}
}

/* ============================================================================
   WRESTLER HUB — theme template parts  (v2.2.0)
   .waw-news-item, .waw-widget, "Latest From WAW", section headers and the
   stats widget are rendered by the theme (news-item.php / sidebar-posts.php)
   for the Wrestler Hub plugin, so they are styled here to match the editorial
   look. The plugin's own .wh-* components are styled in the plugin.
   ========================================================================== */

/* Section header used by the plugin ("Latest {Name} News", career blocks) */
.waw-section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:32px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--ink);position:relative}
.waw-section-header::before{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pink)}
.waw-section-title{font-family:var(--sans);font-weight:800;font-size:.9rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);margin:0}

/* Generic sidebar widget shell (stats, rivalries, Latest From WAW) */
.waw-widget{margin-bottom:32px}
.waw-widget__title{font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--ink);position:relative}
.waw-widget__title::before{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:3px;background:var(--pink)}

/* Wrestler stats widget (Stories / Promotion / Last Story) */
.waw-wrestler-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.waw-wrestler-stat{text-align:center;padding:14px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-soft)}
.waw-wrestler-stat__num{display:block;font-family:var(--sans);font-weight:800;font-size:1.5rem;line-height:1;color:var(--pink-deep)}
.waw-wrestler-stat__label{display:block;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}

/* "Latest {Name} News" list — theme news-item.php */
.waw-news-list{display:flex;flex-direction:column}
.waw-news-item{border-top:1px solid var(--line)}
.waw-news-list .waw-news-item:first-child{border-top:0}
.waw-news-item__link{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;padding:16px 2px;transition:background var(--tick)}
.waw-news-item__link:hover{background:var(--paper-soft)}
.waw-news-item__source-icon{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);padding:6px}
.waw-news-item__source-icon img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:filter var(--tick)}
.waw-news-item__link:hover .waw-news-item__source-icon img{filter:none}
.waw-news-item__abbr{font-family:var(--sans);font-weight:800;font-size:.78rem;color:var(--ink);letter-spacing:.02em}
.waw-news-item__body{min-width:0}
.waw-news-item__title{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.22;color:var(--ink);margin:0 0 5px;transition:color var(--tick)}
.waw-news-item__link:hover .waw-news-item__title{color:var(--pink-deep)}
.waw-news-item__excerpt{font-size:.84rem;line-height:1.45;color:var(--ink-soft);margin:0 0 6px}
.waw-news-item__meta{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.7rem;color:var(--ink-faint)}
.waw-news-item__source-name{font-weight:600}
.waw-news-item__source-name::after{content:"·";margin-left:9px;color:var(--line-strong)}
.waw-news-item__tag{align-self:center;font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-deep);background:rgba(255,10,138,.08);padding:4px 8px;border-radius:3px;white-space:nowrap;flex:none}
.waw-wrestler-no-stories{padding:20px;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--ink-faint);font-size:.9rem;text-align:center}
.waw-wrestler-no-stories p{margin:0}

/* "Latest From WAW" — theme sidebar-posts.php */
.waw-widget--recent-posts .widget-post-item{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.waw-widget--recent-posts .widget-post-item:first-of-type{border-top:0}
.waw-widget--recent-posts .widget-post-img{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-soft)}
.waw-widget--recent-posts .widget-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.waw-widget--recent-posts .widget-post-item:hover .widget-post-img img{transform:scale(1.05)}
.waw-widget--recent-posts .widget-post-info{min-width:0}
.waw-widget--recent-posts .widget-post-title{font-family:var(--serif);font-weight:600;font-size:.9rem;line-height:1.2;color:var(--ink);margin:0 0 4px;transition:color var(--tick)}
.waw-widget--recent-posts .widget-post-item:hover .widget-post-title{color:var(--pink-deep)}
.waw-widget--recent-posts .widget-post-time{font-family:var(--sans);font-size:.68rem;color:var(--ink-faint)}

/* ============================================================================
   ARCHIVE / CATEGORY / PROMOTION PAGES  (v2.5.0) — editorial
   Templates expose the section colour via --accent (promotion/category hue),
   used only for structural fills (bars, dots, badges, borders). Text accents
   stay AA-safe pink-deep, matching the rest of the site.
   ========================================================================== */
.waw-main--promo,.waw-main--category,.waw-main--archive{--accent:var(--pink)}
.waw-main--promo .waw-breadcrumb,.waw-main--category .waw-breadcrumb{margin:24px 0 16px}

/* ---- Masthead (shared across promo / category / archive) ---- */
.promo-banner,.cat-banner,.archive-banner{position:relative;margin:8px 0 6px;padding:0 0 22px;border-bottom:1px solid var(--ink)}
.promo-banner::after,.cat-banner::after,.archive-banner::after{content:"";position:absolute;left:0;bottom:-1px;width:60px;height:3px;background:var(--accent)}
.promo-banner-accent,.cat-banner-accent,.archive-accent-bar{display:none}
.promo-banner-inner,.cat-banner-inner,.archive-banner-inner{min-width:0}

.cat-eyebrow,.archive-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.cat-eyebrow::before,.archive-eyebrow::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--accent)}

/* category / archive titles are words → serif; promotion titles are acronyms → bold sans */
.cat-title,.archive-title{font-family:var(--serif)!important;font-weight:600!important;font-size:clamp(2rem,4vw,3rem)!important;line-height:1.04!important;letter-spacing:-.015em!important;color:var(--ink)!important;text-transform:none!important;margin:0!important}
.promo-title{font-family:var(--sans);font-weight:800;font-size:clamp(2.3rem,5vw,3.5rem);line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0;text-transform:uppercase}
.promo-count{font-family:var(--sans);font-size:.9rem;color:var(--ink-faint);margin:12px 0 0;font-weight:500}
.cat-desc,.archive-desc{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:12px 0 0;max-width:64ch}
.archive-author-header{display:flex;align-items:center;gap:16px}
.archive-author-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.archive-author-bio{font-family:var(--serif);color:var(--ink-soft);font-size:.95rem;margin-top:6px;max-width:60ch}

/* ---- Promotion overview card ---- */
.promo-overview-card{margin-top:22px;background:var(--paper-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:18px 22px}
.promo-overview-card .section-title{display:block;margin:0 0 10px;color:var(--pink-deep)}
.promo-overview-card p{margin:0;line-height:1.65;color:var(--ink-soft);font-size:.95rem}
.promo-overview-card .promo-overview-updated{margin-top:10px;font-size:.72rem;color:var(--ink-faint)}

/* ---- Top wrestlers pills ---- */
.waw-top-wrestlers{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.waw-top-wrestler-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:100px;background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);font-family:var(--sans);font-size:.84rem;font-weight:600;text-decoration:none;transition:all var(--tick)}
.waw-top-wrestler-pill:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.waw-top-wrestler-pill img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.waw-top-wrestler-pill .tw-count{font-weight:800;font-size:.78rem;color:var(--pink-deep);margin-left:1px}

/* ---- Category / promotion mini-hero ---- */
.cat-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin:20px 0 6px;background:#0d0d0f;isolation:isolate}
.cat-hero-link{display:block;position:relative}
.cat-hero-img{position:relative;aspect-ratio:16/9}
.cat-hero-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.cat-hero:hover .cat-hero-img img{transform:scale(1.03)}
.cat-hero-ph{position:absolute;inset:0}
.cat-hero-overlay{position:absolute!important;inset:0;background:linear-gradient(0deg,rgba(6,6,8,.93) 0%,rgba(6,6,8,.58) 44%,transparent 80%)!important}
.cat-hero-badge{position:absolute;top:16px;left:16px;z-index:2;color:#fff;font-family:var(--sans);font-weight:800;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:3px;clip-path:var(--clip-sm)}
.cat-hero-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,3vw,34px);color:#fff}
.cat-hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.8vw,2.15rem);line-height:1.08;letter-spacing:-.01em;margin:0;color:#fff;max-width:24ch;text-shadow:0 1px 16px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-hero-exc{margin:10px 0 0;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.82);max-width:60ch;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-hero-meta-row{display:flex;gap:14px;margin-top:12px}
.cat-hero-time,.cat-hero-src{font-family:var(--sans);font-size:.76rem;color:rgba(255,255,255,.72)}
.cat-hero-meta-row .cat-hero-time{margin-top:0}
.cat-hero-content>.cat-hero-time{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:.76rem;color:rgba(255,255,255,.72)}

/* ---- Archive grid + Power Rankings groups ---- */
.waw-news-grid--archive{margin-top:4px}
.pr-promo-group{margin-bottom:34px}
.pr-promo-group__header{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pr-promo-group__dot{width:11px;height:11px;border-radius:3px;flex:none}
.pr-promo-group__label{font-family:var(--sans);font-weight:800;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* ---- Plugin content+aside grid (Rivalry Spotlight single, etc.) ---- */
.waw-content-grid{display:grid;gap:clamp(30px,4vw,52px);align-items:start;min-width:0}
.waw-content-grid > *{min-width:0}
.waw-content-grid:has(> .waw-sidebar){grid-template-columns:minmax(0,1fr) 320px}
.waw-content-grid > .waw-sidebar{position:sticky;top:88px;align-self:start}
@media (max-width:980px){
  .waw-content-grid:has(> .waw-sidebar){grid-template-columns:1fr}
  .waw-content-grid > .waw-sidebar{position:static}
}
/* Generic plugin archive header (editorial fallback) */
.waw-archive-header{margin:8px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--ink);position:relative}
.waw-archive-header::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--pink)}
.waw-archive-header h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0}

/* ============================================================================
   EXCLUSIVE FEATURES & ORIGINALS — image-led feature band (v2.6.1)
   ----------------------------------------------------------------------------
   Rebuilt from the old icon-chip grid into editorial poster tiles on a cool
   dark-slate surface. Each tile leads with real artwork (author-set, or the
   latest post's image auto-pulled from that section, or a layered slate/neon
   fallback), then a kicker + title + pink CTA. Slate not pure black, so it
   reads premium rather than templated.
   ========================================================================== */
.waw-originals-band{
  position:relative;background:var(--slate);border-radius:calc(var(--radius) + 6px);
  overflow:hidden;margin:48px 0 8px;padding:clamp(26px,3.2vw,38px);
  border:1px solid var(--slate-line);isolation:isolate;
}
/* atmospheric depth — dual corner glow, sits under content */
.waw-originals-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 70% at 92% -14%,var(--slate-glow),transparent 58%),
    radial-gradient(70% 80% at -6% 120%,rgba(155,0,255,.10),transparent 55%);
}
/* v2.7.0 premium pass: corner texture, same asset/opacity as other
   featured sections in this pass. */
.waw-originals-band::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;opacity:.04;
  -webkit-mask-image:radial-gradient(55% 70% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(55% 70% at 100% 0%,#000 0%,transparent 70%);
}
.waw-originals-head{
  position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:0 0 24px;padding-bottom:16px;padding-top:3px;border-bottom:1px solid var(--slate-line);
}
/* v2.7.0 premium pass: same above-heading accent line as .section-header /
   .sidebar-title, scaled for this dark card's own top padding rather than
   adding new margin (the band already has generous outer padding). */
.waw-originals-head::before{content:"";position:absolute;left:0;top:-3px;width:48px;height:3px;background:var(--pink)}
.waw-originals-eyebrow{
  font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
.waw-originals-eyebrow b{color:var(--pink);font-weight:800}
.waw-originals-all{
  font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--night-faint);white-space:nowrap;transition:color var(--tick);
}
.waw-originals-all:hover{color:var(--pink)}

.waw-originals-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,26px);
}
/* poster tile */
.orig-card{
  display:flex;flex-direction:column;min-height:100%;overflow:hidden;
  background:var(--slate-2);border:1px solid var(--slate-line);border-radius:calc(var(--radius) + 2px);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);
  transition:transform var(--card-tick),border-color var(--card-tick),box-shadow var(--card-tick);
}
.orig-card:hover{transform:translateY(-4px);border-color:rgba(255,10,138,.45);box-shadow:0 26px 50px -30px rgba(0,0,0,.95),var(--glow-pink)}

/* media region — real image or layered fallback */
.orig-card-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--slate-3)}
.orig-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.orig-card:hover .orig-card-media img{transform:scale(1.05)}
/* legibility + brand wash over any photo */
.orig-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,17,22,0) 42%,rgba(14,17,22,.55) 100%),
             radial-gradient(120% 80% at 100% 0%,var(--slate-glow),transparent 60%);
}
/* fallback field when no image — layered slate + big ghost glyph, never a flat chip */
.orig-card-media--ph{display:grid;place-items:center;
  background:
    radial-gradient(90% 120% at 78% -10%,rgba(255,10,138,.22),transparent 55%),
    radial-gradient(80% 100% at 0% 120%,rgba(155,0,255,.16),transparent 55%),
    linear-gradient(150deg,var(--slate-3),var(--slate-2) 70%);
}
.orig-card-media--ph svg{width:44%;height:44%;color:#fff;opacity:.16}
.orig-card-kicker{
  position:absolute;top:12px;left:12px;z-index:2;font-family:var(--sans);font-weight:800;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(10,12,16,.6);border:1px solid var(--slate-line);backdrop-filter:blur(3px);
  padding:5px 9px;border-radius:100px;
}

.orig-card-body{display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;flex:1}
.orig-card-title{
  font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.14;
  letter-spacing:-.006em;color:#fff;margin:0;text-wrap:balance;
  transition:color var(--card-tick);
}
.orig-card:hover .orig-card-title{color:var(--pink)}
.orig-card-cta{
  align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--pink);padding:10px 16px;border-radius:100px;
  transition:background var(--card-tick),transform var(--card-tick),box-shadow var(--card-tick);
}
.orig-card:hover .orig-card-cta{background:var(--pink-deep);box-shadow:var(--glow-pink)}

/* ============================================================================
   TRENDING NOW — more prominent (v2.6.0)
   ----------------------------------------------------------------------------
   Larger serif rank numerals; the #1 spot becomes a featured row carrying a
   deterministic pink sparkline (built server-side from the hub, so no CLS and
   no external data). Rows 2-N stay compact. Promo tag keeps its brand colour.
   ========================================================================== */
.sidebar-trending .wh-trending-item::before{font-size:1.9rem;color:var(--pink);font-weight:600}
.wh-trend-name{font-size:.92rem}
.wh-trend-meta{font-size:.7rem}

/* featured #1 */
.wh-trending-item.is-featured{
  grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:16px 14px 16px 0;border-top:0;margin-bottom:2px;
  background:linear-gradient(90deg,rgba(255,10,138,.06),transparent 70%);
  border-radius:var(--radius);
}
.wh-trending-item.is-featured::before{font-size:2.7rem;line-height:.9;width:1.3ch}
.wh-trending-item.is-featured .wh-trend-name{font-size:1.06rem;font-weight:800}
.wh-trending-item.is-featured .wh-trend-info{gap:5px}
.wh-trend-spark{grid-column:2;margin-top:4px;width:100%;height:34px;display:block}
.wh-trend-spark svg{width:100%;height:100%;overflow:visible}
.wh-trend-spark .spark-line{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wh-trend-spark .spark-area{fill:url(#wawSparkFill);opacity:.9}
.wh-trend-spark .spark-dot{fill:var(--pink)}

/* ============================================================================
   SMARK BAND — full-width daily-puzzle promo above the footer (v2.6.0)
   ----------------------------------------------------------------------------
   Rendered by footer.php on every post/page/archive (skipped on the SMARK
   page itself). Pure CSS/SVG art — no image asset to go missing. Puzzle number
   and play URL come from the SMARK plugin helper with a graceful fallback.
   ========================================================================== */
.waw-smark-band{position:relative;background:var(--night);border-top:1px solid var(--night-line);overflow:hidden;isolation:isolate}
.waw-smark-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 130% at 8% 50%,rgba(255,10,138,.20),transparent 55%),
    radial-gradient(60% 130% at 96% 60%,rgba(155,0,255,.16),transparent 55%);
}
/* v2.7.0 premium pass: corner texture, same asset/opacity as every other
   promotional block in this pass. */
.waw-smark-band::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:40px 40px;background-position:top right;opacity:.04;
  -webkit-mask-image:radial-gradient(55% 80% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(55% 80% at 100% 0%,#000 0%,transparent 70%);
}
.waw-smark-inner{
  position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(26px,3.4vw,40px) var(--gutter);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,3vw,44px);
}
/* left — neon puzzle glyph */
.smark-glyph{flex:none;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);color:var(--pink);filter:drop-shadow(0 0 18px rgba(255,10,138,.55))}
.smark-glyph svg{width:100%;height:100%}
/* centre — copy + CTA */
.smark-copy{min-width:0}
.smark-kicker{font-family:var(--sans);font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin:0 0 4px}
.smark-wordmark{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4.6vw,3rem);letter-spacing:.02em;line-height:.95;color:#fff;margin:0}
.smark-tag{font-size:.92rem;color:var(--night-faint);margin:8px 0 16px}
.smark-tag b{color:#fff;font-weight:700}
.smark-play{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:800;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--pink);
  padding:13px 22px;border-radius:100px;transition:background var(--card-tick),transform var(--card-tick),box-shadow var(--card-tick);
}
.smark-play:hover{background:var(--pink-deep);transform:translateY(-1px);box-shadow:var(--glow-pink)}
/* right — guess-feedback card */
.smark-card{
  flex:none;width:clamp(220px,24vw,280px);background:rgba(10,10,12,.72);
  border:1px solid var(--night-line);border-radius:var(--radius);padding:12px;
  backdrop-filter:blur(3px);display:flex;flex-direction:column;gap:8px;
}
.smark-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:6px;background:rgba(255,255,255,.03);border:1px solid var(--night-line)}
.smark-row-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.smark-row-k{font-family:var(--sans);font-weight:800;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--night-faint)}
.smark-row-v{font-family:var(--sans);font-weight:700;font-size:.82rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smark-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:800}
.smark-mark.ok{background:#1f9d5a;color:#fff}
.smark-mark.q{background:rgba(255,255,255,.08);color:var(--night-faint);border:1px solid var(--night-line)}
.smark-mark svg{width:12px;height:12px}

/* ── Responsive (v2.6.10) ─────────────────────────────────────────────────*/
/* 3 cards now (Random Match Generator removed) — a 2-column mid-breakpoint
   would orphan the third card onto its own row, so this stays 3-across
   down to 700px before stacking to 1, rather than passing through 2. */
@media (max-width:700px){
  .waw-originals-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .waw-smark-inner{grid-template-columns:auto 1fr;grid-template-areas:"glyph copy" "card card";row-gap:22px}
  .smark-glyph{grid-area:glyph}.smark-copy{grid-area:copy}
  .smark-card{grid-area:card;width:100%}
}
@media (max-width:560px){
  .waw-smark-inner{grid-template-columns:1fr;grid-template-areas:"copy" "card";text-align:left}
  .smark-glyph{display:none}
}
