/*
Theme Name:   HYPE Child
Theme URI:    https://hype.com.ng
Description:  HYPE.com.ng — Child theme for Astra. Complete brand system v5: redesigned header, stunning homepage grid, immersive single post.
Author:       HYPE Editorial
Author URI:   https://hype.com.ng
Template:     astra
Version:      5.0.1
License:      GNU General Public License v2 or later
Text Domain:  hype-child
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --hype-black:    #06060a;
  --hype-dark:     #0e0e14;
  --hype-card:     #13131a;
  --hype-card2:    #18181f;
  --hype-border:   #242430;
  --hype-gold:     #C9A84C;
  --hype-gold2:    #e8c96a;
  --hype-gold-dim: rgba(201,168,76,0.12);
  --hype-red:      #E63946;
  --hype-white:    #ffffff;
  --hype-muted:    rgba(255,255,255,0.58);
  --hype-dim:      rgba(255,255,255,0.30);
  --font-display:  'Bebas Neue', sans-serif;
  --font-head:     'Oswald', sans-serif;
  --font-body:     'Barlow Condensed', sans-serif;
  --max-w:         940px;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE FONTS
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600;700&family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--hype-black) !important;
  color: var(--hype-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* NOTE: overflow-x must NOT be on body/html — it clips position:fixed ad rails */
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes hype-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes nav-underline-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

body { animation: fadeIn 0.35s ease; }

/* ═══════════════════════════════════════════════════════════════
   ASTRA OVERRIDES
═══════════════════════════════════════════════════════════════ */
#page, .site {
    background: var(--hype-black) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.ast-container { max-width: var(--max-w) !important; }
/* IMPORTANT: do not force body.home .ast-container to 100% width.
   The ad-rail JS (template-parts/hype-ad-rails.php findBox()) checks
   .ast-container BEFORE falling back to .hype-home, so if .ast-container
   is full-width here, the rails measure the wrong box and misalign from
   the visible 940px content column. Keeping .ast-container capped at the
   same 940px (--max-w) as .hype-home and the header means both the visual
   content and the rails agree on the same box, with no double-constraint
   since .hype-home's own max-width/padding then simply matches its parent. */
.site-content { padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single { margin: 0 !important; box-shadow: none !important; background: transparent !important; }
.entry-content { max-width: 100% !important; background: transparent !important; }

/* ── NUKE ALL ASTRA WHITE BACKGROUNDS ── */
#content, #main, .site-main, #primary, .content-area,
.ast-separate-container, .ast-separate-container #primary, .ast-separate-container #main,
.ast-grid-right-sidebar, .ast-grid-left-sidebar, .ast-container,
.ast-right-sidebar, .ast-left-sidebar, .sidebar-main,
.ast-page-builder-template, .hentry, .ast-article-single, .ast-article-post,
.page-content, .post-content, article, section { background: transparent !important; }
.elementor-section .elementor-container { max-width: var(--max-w) !important; }

/* Hide unwanted Astra elements */
.ast-archive-description, .page-header, .ast-page-title-bar, .entry-header .entry-title,
body.home .entry-title, body.home .page-title, .hentry .entry-header, .ast-hero-section-wrapper,
body.home h1.page-title, .post-type-archive .ast-archive-title { display: none !important; }
body.home .ast-container > .entry-header { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   BREAKING NEWS TICKER
═══════════════════════════════════════════════════════════════ */
.hype-ticker-bar {
  background: var(--hype-red);
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 100;
}
.hype-ticker-label {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hype-white);
  background: rgba(0,0,0,0.25);
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 8px;
}
.hype-ticker-label .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  animation: hype-pulse 1.4s ease-in-out infinite;
}
.hype-ticker-track { display: flex; align-items: center; overflow: hidden; flex: 1; height: 100%; }
.hype-ticker-inner {
  display: flex; white-space: nowrap;
  animation: ticker 45s linear infinite;
  will-change: transform;
}
.hype-ticker-inner:hover { animation-play-state: paused; }
.hype-ticker-item {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.92);
  padding: 0 36px;
  display: flex; align-items: center; gap: 10px;
}
.hype-ticker-item::before { content: '▸'; color: rgba(255,255,255,0.5); font-size: 8px; }
.hype-ticker-item a { color: inherit; text-decoration: none; transition: color 0.2s; }
.hype-ticker-item a:hover { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   HEADER — v5 REDESIGN (Clean, Structured, Premium)
═══════════════════════════════════════════════════════════════ */

/* Force Astra's default header completely out of the document flow.
   (Previously this used "all: unset !important; display: block !important;"
   which stripped Astra's styling but still rendered the masthead as an
   empty block — that's what caused the large empty gap above the HYPE
   logo. Astra's header must take up ZERO space, not just zero style.) */
#masthead, .site-header, .ast-primary-header-bar,
.ast-header-break-point #masthead {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Kill the space WordPress reserves above the page for the logged-in
   admin bar (body.admin-bar { margin-top:32px } by default, 46px on
   mobile). The admin bar becomes an overlay instead of pushing the
   header down — this is what caused the empty strip above "THURSDAY,
   JULY 23, 2026" for logged-in editors; visitors never saw it, but
   removing it makes the editor preview match the live site. */
html { margin-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; }
#wpadminbar { position: fixed !important; }
@media screen and (max-width: 782px) {
  body.admin-bar { margin-top: 0 !important; }
}

/* Kill Astra's sticky-header spacer. Astra reserves height for the
   header via a separate spacer element/inline style (not #masthead
   itself), so hiding #masthead alone leaves this gap behind for
   EVERY visitor, logged in or not — that's the empty strip above
   "THURSDAY, JULY 23, 2026" seen in incognito. Zero it everywhere. */
.ast-sticky-header-space,
#ast-sticky-header-active-gap,
.ast-header-break-point.ast-sticky-header-space {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html, body, #page, .site,
.ast-header-break-point #page,
body.ast-header-break-point {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Astra's "content top spacing" / container padding sometimes lands
   on .ast-container or .site-content directly rather than #page. */
.ast-container, .site-content, #content, #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Our custom header is injected via hype_custom_header() in functions.php */
.hype-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--hype-black);
  border-bottom: 1px solid var(--hype-border);
  transition: box-shadow 0.35s, background 0.35s;
}
.hype-header.scrolled {
  background: rgba(6,6,10,0.96);
  box-shadow: 0 4px 32px rgba(0,0,0,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Top strip: date + social */
.hype-header-topbar {
  border-bottom: 1px solid var(--hype-border);
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hype-header-topbar-date {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hype-dim);
}
.hype-header-topbar-social {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hype-header-topbar-social a {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hype-dim);
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.2s, background 0.2s;
}
.hype-header-topbar-social a:hover { color: var(--hype-gold); background: var(--hype-gold-dim); }
.hype-header-topbar-social svg { width: 11px; height: 11px; fill: currentColor; }

/* Main row: logo + nav + search */
.hype-header-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 16px;
}

/* Logo */
.hype-header-logo {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 6px;
  color: var(--hype-white);
  text-decoration: none;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 0;
  justify-self: start;
}
.hype-header-logo .accent { color: var(--hype-gold); }
.hype-header-logo:hover { opacity: 0.85; }
.hype-header-logo img {
  height: 32px; width: auto;
  max-width: 130px; display: block;
}

/* Primary nav — center */
.hype-header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}
.hype-header-nav a {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hype-muted);
  text-decoration: none;
  padding: 6px 9px;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.hype-header-nav a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 9px; right: 9px;
  height: 2px;
  background: var(--hype-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.hype-header-nav a:hover,
.hype-header-nav a.current { color: var(--hype-white); }
.hype-header-nav a:hover::after,
.hype-header-nav a.current::after { transform: scaleX(1); }

/* Right side actions */
.hype-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  flex-shrink: 0;
}
.hype-header-search-btn {
  background: transparent;
  border: 1px solid var(--hype-border);
  color: var(--hype-dim);
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  font-family: var(--font-head);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.hype-header-search-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
.hype-header-search-btn:hover { border-color: var(--hype-gold); color: var(--hype-gold); }

.hype-header-subscribe {
  font-family: var(--font-head);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--hype-gold);
  color: var(--hype-black);
  padding: 6px 12px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hype-header-subscribe:hover { background: var(--hype-gold2); transform: translateY(-1px); }
.hype-header-subscribe--mobile { display: none; }

/* Mobile hamburger */
.hype-header-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--hype-border);
  color: var(--hype-muted);
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.hype-header-burger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.hype-header-burger:hover { color: var(--hype-gold); border-color: var(--hype-gold); }

/* Mobile nav drawer */
.hype-mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--hype-dark);
  border-top: 1px solid var(--hype-border);
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1);
}
.hype-mobile-nav.open { max-height: 600px; padding: 6px 16px 14px; }
.hype-mobile-nav a {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--hype-muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--hype-border);
  text-decoration: none; transition: color 0.2s;
}
.hype-mobile-nav a:last-child { border-bottom: none; }
.hype-mobile-nav a:hover { color: var(--hype-gold); }
.hype-mobile-nav-divider {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--hype-dim);
  padding: 12px 0 4px; border-bottom: none;
}
.hype-mobile-nav-cat {
  font-size: 12px !important; letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.45) !important; padding: 8px 0 !important;
}
.hype-mobile-nav-subscribe {
  margin-top: 8px;
  background: var(--hype-gold) !important;
  color: var(--hype-black) !important;
  padding: 10px 16px !important;
  text-align: center; border: none !important;
  font-weight: 700 !important; letter-spacing: 2px !important;
}

/* Category strip beneath main header */
.hype-header-catstrip-outer {
  border-top: 1px solid var(--hype-border);
  background: var(--hype-dark);
}
.hype-header-catstrip {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 0;
}
.hype-header-catstrip::-webkit-scrollbar { display: none; }
.hype-header-catstrip a {
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--hype-dim);
  padding: 7px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.hype-header-catstrip a:hover,
.hype-header-catstrip a.active {
  color: var(--hype-gold);
  border-bottom-color: var(--hype-gold);
}

/* Override native Astra header — forcefully hide it */
#masthead { display: none !important; }

@media (max-width: 960px) {
  .hype-header-nav { display: none; }
  .hype-header-burger { display: flex; }
  .hype-header-subscribe { display: none; }
  .hype-header-subscribe--mobile { display: flex !important; font-size: 10px !important; padding: 5px 10px !important; letter-spacing: 1.5px !important; }
  .hype-header-main { grid-template-columns: 1fr auto; padding: 0 16px; gap: 8px; }
  .hype-header-actions { gap: 4px; }
  .hype-header-topbar { padding: 0 16px; }
  .hype-header-catstrip { padding: 0 16px; }
}
@media (max-width: 480px) {
  /* Compact BREAKING ticker on mobile */
  .hype-ticker-bar { height: 24px; }
  .hype-ticker-label { font-size: 7.5px; letter-spacing: 2px; padding: 0 10px; gap: 5px; }
  .hype-ticker-label .dot { width: 5px; height: 5px; }
  .hype-ticker-item { font-size: 11px; padding: 0 22px; gap: 6px; }
  .hype-header-logo { font-size: 28px; letter-spacing: 4px; }
  .hype-header-main { min-height: 44px; }
  .hype-header-topbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE FEATURED IMAGE FIXES
═══════════════════════════════════════════════════════════════ */
body.home .elementor-posts-container .elementor-post__thumbnail,
body.home .elementor-posts-container .elementor-post__thumbnail__link,
body.home .e-loop-item .elementor-post__thumbnail,
body.home .elementor-loop-container .elementor-post__thumbnail {
  display: block !important; overflow: hidden !important; width: 100% !important;
}
body.home .elementor-posts-container .elementor-post__thumbnail img,
body.home .elementor-posts-container .elementor-post__thumbnail__link img,
body.home .e-loop-item .elementor-post__thumbnail img,
body.home .elementor-loop-container .elementor-post__thumbnail img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; opacity: 1 !important; visibility: visible !important;
  transition: transform 0.5s var(--ease-out) !important;
}
body.home .elementor-posts-container .elementor-post:hover .elementor-post__thumbnail img,
body.home .e-loop-item:hover .elementor-post__thumbnail img { transform: scale(1.05) !important; }
body.home .ast-article-post .post-thumbnail, body.home .post-thumbnail, body.home .wp-post-image,
body.home figure.post-thumbnail { display: block !important; overflow: hidden !important; margin: 0 !important; }
body.home .ast-article-post .post-thumbnail img, body.home .post-thumbnail img, body.home img.wp-post-image {
  display: block !important; width: 100% !important; height: auto !important;
  object-fit: cover !important; opacity: 1 !important; visibility: visible !important;
}
body.home .lazyload, body.home .lazyloading { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE CARD STYLES (Elementor override)
═══════════════════════════════════════════════════════════════ */
body.home .elementor-post {
  background: var(--hype-card) !important;
  border: 1px solid var(--hype-border) !important;
  overflow: hidden !important;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s !important;
}
body.home .elementor-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.15) !important;
  border-color: rgba(201,168,76,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE POST — v5 REDESIGN (Immersive, Editorial)
═══════════════════════════════════════════════════════════════ */
body.single-post,
body.single-post .site-content,
body.single-post .ast-container { background: var(--hype-black) !important; }

/* Prevent Astra injecting white on inner wrappers */
.ast-separate-container .site-main,
.ast-separate-container .content-area { background: var(--hype-black) !important; }

/* Reading progress */
#hype-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--hype-gold), var(--hype-gold2), var(--hype-red));
  width: 0%; z-index: 99999; pointer-events: none;
  box-shadow: 0 0 10px rgba(201,168,76,0.5);
}

/* Full-bleed hero */
.hype-single-hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  max-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hype-single-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 4s ease;
}
.hype-single-hero:hover .hype-single-hero-img { transform: scale(1.015); }
.hype-single-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,6,10,0.1) 0%,
    rgba(6,6,10,0.3) 40%,
    rgba(6,6,10,0.85) 75%,
    var(--hype-black) 100%
  );
}
.hype-single-hero-content {
  position: relative; z-index: 2;
  padding: 24px 32px 32px;
  max-width: 860px;
  width: 100%;
  animation: fadeSlideUp 0.6s var(--ease-out) both;
}
.hype-single-hero-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  background: var(--hype-gold); color: var(--hype-black);
  padding: 5px 14px; text-decoration: none;
  margin-bottom: 12px; transition: background 0.2s;
}
.hype-single-hero-cat:hover { background: var(--hype-gold2); }
.hype-single-hero-title {
  font-family: var(--font-head) !important;
  font-size: clamp(20px, 3vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-transform: uppercase !important;
  color: var(--hype-white) !important;
  margin: 0 0 14px !important;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hype-single-hero-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.65);
}
.hype-single-hero-author {
  display: flex; align-items: center; gap: 8px;
  color: var(--hype-white); text-decoration: none;
  font-weight: 600; transition: color 0.2s;
}
.hype-single-hero-author:hover { color: var(--hype-gold); }
.hype-single-hero-author img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.3);
}
.hype-single-sep { opacity: 0.3; }

/* Fallback header (no featured image) */
.hype-article-header {
  max-width: 820px; margin: 0 auto;
  padding: 48px 32px 32px;
  animation: fadeSlideUp 0.5s var(--ease-out) both;
}
.hype-article-cat-wrap { margin-bottom: 16px; }
.hype-article-cat {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  background: var(--hype-gold); color: var(--hype-black);
  padding: 5px 14px; text-decoration: none; display: inline-block;
  transition: background 0.2s;
}
.hype-article-cat:hover { background: var(--hype-gold2); }
.hype-article-title {
  font-family: var(--font-head) !important;
  font-size: clamp(26px, 4.5vw, 46px) !important;
  font-weight: 700 !important; line-height: 1.1 !important;
  text-transform: uppercase !important; color: var(--hype-white) !important;
  margin: 0 0 20px !important; letter-spacing: 0.5px;
}
.hype-article-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--hype-border); border-bottom: 1px solid var(--hype-border);
  font-family: var(--font-body); font-size: 13px; color: var(--hype-muted);
}
.hype-article-author {
  display: flex; align-items: center; gap: 10px;
  color: var(--hype-white); text-decoration: none;
  font-weight: 600; font-size: 13px; transition: color 0.2s;
}
.hype-article-author:hover { color: var(--hype-gold); }
.author-micro-avatar { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover !important; }
.hype-article-sep { color: var(--hype-border); }
.hype-article-date, .hype-article-read { color: var(--hype-dim); }

/* Article body */
.hype-article-body {
  max-width: 680px; margin: 0 auto;
  padding: 36px 32px 48px;
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.9;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.85);
  animation: fadeSlideUp 0.5s var(--ease-out) both 0.15s;
}
.hype-article-body p { margin-bottom: 28px; }
.hype-article-body h2 {
  font-family: var(--font-head); font-size: 26px; font-weight: 700;
  text-transform: uppercase; color: var(--hype-white);
  margin: 44px 0 18px; padding-top: 28px;
  border-top: 3px solid var(--hype-gold); letter-spacing: 0.5px;
}
.hype-article-body h3 {
  font-family: var(--font-head); font-size: 21px; font-weight: 700;
  text-transform: uppercase; color: var(--hype-white); margin: 36px 0 16px;
}
.hype-article-body a { color: var(--hype-gold); text-decoration: underline; transition: color 0.2s; }
.hype-article-body a:hover { color: var(--hype-gold2); }
.hype-article-body blockquote {
  border-left: 4px solid var(--hype-gold); background: var(--hype-dark);
  padding: 22px 28px; margin: 36px 0; font-style: italic;
  font-size: 20px; color: var(--hype-white); border-radius: 0 4px 4px 0;
}
.hype-article-body img { width: 100%; height: auto; margin: 32px 0; display: block; }
.hype-article-body ul, .hype-article-body ol { padding-left: 24px; margin-bottom: 28px; }
.hype-article-body li { margin-bottom: 14px; font-size: 18px; line-height: 1.75; }

/* Tags */
.hype-article-tags {
  max-width: 680px; margin: 0 auto; padding: 0 32px 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tags-label {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--hype-dim);
}

/* Share — round icon buttons */
.hype-share {
  max-width: 680px; margin: 0 auto; padding: 28px 32px;
  border-top: 1px solid var(--hype-border);
  text-align: center;
}
/* Inline share sits directly under meta — no border, left-aligned, compact */
.hype-share--inline {
  max-width: 860px; margin: 0; padding: 16px 0 0;
  border-top: none; text-align: left;
}
.hype-share-label {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 16px;
}
/* Inline share inside fallback header needs left padding to match */
.hype-article-header .hype-share--inline { padding: 14px 0 0; }
.hype-share-btns {
  display: flex; gap: 14px; align-items: center; flex-wrap: nowrap;
}
.hype-share--inline .hype-share-btns { justify-content: flex-start; }
.hype-share--bottom  .hype-share-btns { justify-content: center; }
.hype-share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--hype-border);
  background: transparent; color: var(--hype-muted);
  transition: all 0.25s var(--ease-out);
  flex-shrink: 0;
}
.hype-share-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.hype-share-btn.twitter:hover   { background: #000; border-color: #000; color: #fff; }
.hype-share-btn.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: #d6249f; color: #fff; }
.hype-share-btn.whatsapp:hover  { background: #25D366; border-color: #25D366; color: #fff; }
.hype-share-btn.facebook:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.hype-share-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* Author box */
.hype-author-box {
  max-width: 680px; margin: 0 auto; padding: 28px 32px;
  border-top: 1px solid var(--hype-border); border-bottom: 1px solid var(--hype-border);
  display: flex; align-items: flex-start; gap: 20px; background: var(--hype-dark);
}
.author-box-avatar { flex-shrink: 0; }
.author-box-img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--hype-border); }
.author-box-label {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--hype-gold); margin-bottom: 4px;
}
.author-box-name {
  font-family: var(--font-head); font-size: 18px; font-weight: 700; text-transform: uppercase;
  color: var(--hype-white); text-decoration: none; display: block; margin-bottom: 8px; transition: color 0.2s;
}
.author-box-name:hover { color: var(--hype-gold); }
.author-box-bio { font-family: var(--font-body); font-size: 14px; color: var(--hype-muted); line-height: 1.6; margin-bottom: 10px; }
.author-box-more {
  font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--hype-gold); text-decoration: none; transition: color 0.2s;
}
.author-box-more:hover { color: var(--hype-gold2); }

/* Related posts */
.hype-related {
  background: var(--hype-dark); padding: 48px 32px 56px;
  margin-top: 0; border-top: 1px solid var(--hype-border);
}
.hype-related-head {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 32px; max-width: 1100px; margin-left: auto; margin-right: auto;
}
.hype-related-head .label {
  background: var(--hype-gold); color: var(--hype-black);
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; padding: 7px 18px; flex-shrink: 0;
}
.hype-related-head .line { flex: 1; height: 1px; background: var(--hype-border); }
.hype-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.hype-related-card {
  background: var(--hype-card); overflow: hidden; text-decoration: none;
  display: block; border: 1px solid var(--hype-border);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.hype-related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.5); border-color: rgba(201,168,76,0.2); }
.hype-related-card img { width: 100%; height: 165px; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.hype-related-card:hover img { transform: scale(1.06); }
.hype-related-card .rc-body { padding: 14px 16px; }
.hype-related-card .rc-cat {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--hype-gold);
  display: block; margin-bottom: 7px;
}
.hype-related-card .rc-cat a { color: inherit; text-decoration: none; }
.hype-related-card h4 {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  text-transform: uppercase; line-height: 1.25; color: var(--hype-white); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hype-related-card .rc-meta { font-size: 12px; color: var(--hype-dim); font-family: var(--font-body); }

/* Comments */
.hype-comments-wrap { max-width: 680px; margin: 0 auto; padding: 0 32px 40px; }
.comments-area { border-top: 1px solid var(--hype-border); padding-top: 32px; }
.comment-respond { background: var(--hype-dark) !important; padding: 28px !important; border: 1px solid var(--hype-border) !important; }
.comment-form input, .comment-form textarea {
  background: var(--hype-black) !important; border: 1px solid var(--hype-border) !important;
  color: var(--hype-white) !important; font-family: var(--font-body) !important;
  font-size: 15px !important; padding: 10px 14px !important; outline: none !important; transition: border-color 0.2s !important;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--hype-gold) !important; }
.comment-form .submit {
  background: var(--hype-gold) !important; color: var(--hype-black) !important;
  font-family: var(--font-head) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  border: none !important; padding: 12px 28px !important; cursor: pointer !important; transition: all 0.2s !important;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY PAGE
═══════════════════════════════════════════════════════════════ */
body.category,
body.category .site-content,
body.category .site-main,
body.category #content,
body.category #main,
body.category #primary,
body.category .ast-container,
body.category .content-area,
body.archive,
body.archive .site-content,
body.archive .site-main,
body.archive #content,
body.archive #main,
body.archive #primary,
body.archive .ast-container,
body.tag,
body.tag .site-content,
body.tag .site-main,
body.tag #content,
body.tag #main,
body.tag .ast-container,
body.search,
body.search .site-content,
body.search .site-main,
body.search #content,
body.search #main,
body.search .ast-container { background: var(--hype-black) !important; color: var(--hype-white) !important; }
.hype-cat-hero {
  background: linear-gradient(135deg, #0d0d0e 0%, #14100a 100%);
  border-bottom: 3px solid var(--hype-gold);
  padding: 52px 40px 40px; position: relative; overflow: hidden;
}
.hype-cat-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.06) 0%, transparent 60%);
}
.hype-cat-hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; position: relative;
}
.hype-cat-icon { font-size: 52px; line-height: 1; }
.hype-cat-title {
  font-family: var(--font-display) !important;
  font-size: clamp(52px, 8vw, 100px) !important;
  letter-spacing: 6px !important; color: var(--hype-white) !important;
  line-height: 0.9 !important; text-transform: uppercase !important;
  margin: 0 !important; animation: fadeSlideUp 0.5s var(--ease-out) both;
}
.hype-cat-count { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.3); margin-top: 10px; }
.hype-cat-strip {
  display: flex; background: var(--hype-dark); border-bottom: 1px solid var(--hype-border);
  overflow-x: auto; scrollbar-width: none; padding: 0 40px;
}
.hype-cat-strip::-webkit-scrollbar { display: none; }
.hype-cat-strip a {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4);
  padding: 14px 18px; white-space: nowrap; border-bottom: 2px solid transparent;
  text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.hype-cat-strip a:hover, .hype-cat-strip a.active { color: var(--hype-gold); border-bottom-color: var(--hype-gold); }
body.category .ast-container { padding: 0 !important; max-width: 100% !important; }
body.category #primary { max-width: 100% !important; padding: 0 !important; }
body.category .ast-archive-description { display: none !important; }
body.category .ast-article-post {
  background: var(--hype-card) !important; border: 1px solid var(--hype-border) !important;
  margin: 0 !important; box-shadow: none !important; overflow: hidden !important;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s !important;
}
body.category .ast-article-post:hover {
  transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
  border-color: rgba(201,168,76,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE, 404, FOOTER (unchanged from v4 — already good)
═══════════════════════════════════════════════════════════════ */
.hype-archive-hero { background: linear-gradient(135deg, #0d0d0e 0%, #14100a 100%); border-bottom: 3px solid var(--hype-gold); padding: 52px 40px 40px; }
.hype-archive-hero.is-author { padding: 48px 40px; }
.hype-archive-hero-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.author-avatar { width: 96px !important; height: 96px !important; border-radius: 50% !important; object-fit: cover !important; border: 3px solid var(--hype-gold) !important; flex-shrink: 0 !important; }
.hype-arch-icon { font-size: 48px; line-height: 1; flex-shrink: 0; }
.hype-arch-eyebrow { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--hype-gold); margin-bottom: 6px; }
.hype-arch-hero-title { font-family: var(--font-display) !important; font-size: clamp(40px, 7vw, 80px) !important; letter-spacing: 4px !important; color: var(--hype-white) !important; line-height: 0.95 !important; text-transform: uppercase !important; margin: 0 0 10px !important; }
.hype-arch-bio { font-family: var(--font-body); font-size: 15px; color: var(--hype-muted); line-height: 1.6; max-width: 560px; margin: 0 0 10px; }
.hype-arch-count { font-family: var(--font-body); font-size: 13px; color: var(--hype-dim); }
.hype-arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.hype-arch-card { background: var(--hype-card); border: 1px solid var(--hype-border); overflow: hidden; transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s; }
.hype-arch-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.5); border-color: rgba(201,168,76,0.2); }
.arch-thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; }
.arch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.hype-arch-card:hover .arch-thumb img { transform: scale(1.05); }
.arch-cat { position: absolute; top: 12px; left: 12px; font-family: var(--font-head); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: var(--hype-gold); color: var(--hype-black); padding: 4px 8px; }
.arch-body { padding: 16px; }
.arch-title { font-family: var(--font-head) !important; font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; line-height: 1.25 !important; margin: 0 0 10px !important; }
.arch-title a { color: var(--hype-white) !important; text-decoration: none !important; transition: color 0.2s !important; }
.arch-title a:hover { color: var(--hype-gold) !important; }
.arch-meta { font-family: var(--font-body); font-size: 12px; color: var(--hype-dim); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.arch-excerpt { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hype-archive-wrap { max-width: var(--max-w); margin: 0 auto; padding: 40px 40px 60px; }
.hype-archive-main { width: 100%; }
.hype-pagination { display: flex; align-items: center; gap: 6px; padding: 16px 0 0; flex-wrap: wrap; }
.hype-pagination .page-numbers { font-family: var(--font-head) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: var(--hype-muted) !important; background: var(--hype-dark) !important; border: 1px solid var(--hype-border) !important; padding: 10px 18px !important; text-decoration: none !important; transition: all 0.2s !important; }
.hype-pagination .page-numbers.current, .hype-pagination .page-numbers:hover { background: var(--hype-gold) !important; color: var(--hype-black) !important; border-color: var(--hype-gold) !important; }

/* 404 */
body.error404 .site-content { background: var(--hype-black) !important; }
.hype-404 { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; animation: fadeSlideUp 0.5s var(--ease-out) both; }
.hype-404-num { font-family: var(--font-display); font-size: clamp(120px, 25vw, 240px); line-height: 0.85; color: var(--hype-border); letter-spacing: -8px; margin-bottom: 24px; position: relative; }
.hype-404-num::after { content: 'NOT FOUND'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 14px; letter-spacing: 6px; color: var(--hype-gold); font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.hype-404 h2 { font-family: var(--font-head) !important; font-size: clamp(20px, 4vw, 32px) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--hype-white) !important; margin: 32px 0 12px !important; }
.hype-404 p { font-family: var(--font-body); font-size: 16px; color: var(--hype-muted); max-width: 400px; margin: 0 auto 32px; line-height: 1.5; }
.hype-404-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hype-404-btn { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 12px 28px; text-decoration: none; transition: all 0.25s var(--ease-out); display: inline-block; }
.hype-404-btn.primary { background: var(--hype-gold); color: var(--hype-black); }
.hype-404-btn.primary:hover { background: var(--hype-gold2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,168,76,0.3); }
.hype-404-btn.secondary { border: 1px solid var(--hype-border); color: var(--hype-muted); }
.hype-404-btn.secondary:hover { border-color: var(--hype-gold); color: var(--hype-white); transform: translateY(-1px); }

/* Footer */
#colophon, .site-footer, .footer-widget-area, .ast-footer-copyright { display: none !important; }

/* ── FOOTER SHELL ── */
.hype-footer { background: var(--hype-dark); margin-top: 48px; }

/* ── STAY IN THE LOOP BANNER ── */
.hype-footer-newsletter { background: var(--hype-gold); }
.hype-footer-newsletter-inner { max-width: var(--max-w); margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hype-footer-newsletter-text strong { font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; color: var(--hype-black); display: block; line-height: 1.1; }
.hype-footer-newsletter-text span { font-family: var(--font-body); font-size: 13px; color: rgba(0,0,0,0.6); margin-top: 4px; display: block; }
.hype-footer-newsletter-btn { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: var(--hype-black); color: var(--hype-gold); padding: 12px 28px; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; flex-shrink: 0; }
.hype-footer-newsletter-btn:hover { opacity: 0.85; color: var(--hype-gold); }

/* ── NAV COLUMNS: EXPLORE · HYPE · FOLLOW ── */
.hype-footer-nav { border-top: 1px solid rgba(255,255,255,0.06); }
.hype-footer-nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 40px 40px 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hype-footer-nav-col { padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.06); margin-right: 40px; }
.hype-footer-nav-col:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hype-footer-nav-col h4 { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px; }
.hype-footer-nav-col ul { list-style: none; padding: 0; margin: 0; }
.hype-footer-nav-col ul li { margin-bottom: 11px; }
.hype-footer-nav-col ul li a { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.hype-footer-nav-col ul li a:hover { color: var(--hype-white); }

/* ── BOTTOM BAR ── */
.hype-footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 40px; max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-copyright { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.22); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-family: var(--font-head); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.22); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--hype-white); }

/* Scroll to top */
#hype-scroll-top { position: fixed; bottom: 28px; right: 20px; width: 44px; height: 44px; background: var(--hype-gold); color: var(--hype-black); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.35s var(--ease-out); z-index: 500; border: none; font-size: 18px; font-weight: bold; }
#hype-scroll-top.visible { opacity: 1; visibility: visible; box-shadow: 0 4px 16px rgba(201,168,76,0.4); }
#hype-scroll-top:hover { background: var(--hype-gold2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 24px rgba(201,168,76,0.5); }

/* Shared components */
.hype-btn-gold { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; background: var(--hype-gold); color: var(--hype-black); padding: 12px 32px; text-decoration: none; display: inline-block; transition: all 0.25s var(--ease-out); }
.hype-btn-gold:hover { background: var(--hype-gold2); color: var(--hype-black); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,168,76,0.3); }
.hype-pill { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); border: 1px solid var(--hype-border); padding: 5px 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.hype-pill:hover, .hype-pill.active { color: var(--hype-gold); border-color: var(--hype-gold); background: rgba(201,168,76,0.06); }
#secondary, .widget-area { background: transparent !important; }
.widget-title { font-family: var(--font-head) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--hype-gold) !important; border-bottom: 1px solid var(--hype-border) !important; padding-bottom: 10px !important; margin-bottom: 16px !important; }

/* Tag/search pages */
.hype-tag-hero, .hype-search-hero { background: linear-gradient(180deg, #0d0d0e 0%, var(--hype-black) 100%); border-bottom: 3px solid var(--hype-gold); padding: 56px 40px 40px; }
.hype-tag-hero-inner, .hype-search-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.hype-tag-eyebrow, .hype-search-eyebrow { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--hype-gold); margin-bottom: 8px; }
.hype-tag-title, .hype-search-title { font-family: var(--font-display) !important; font-size: clamp(40px, 7vw, 80px) !important; letter-spacing: 4px !important; color: var(--hype-white) !important; line-height: 0.95 !important; text-transform: uppercase !important; margin: 0 !important; }
.hype-tag-count, .hype-search-count { font-family: var(--font-body); font-size: 14px; color: var(--hype-dim); margin-top: 10px; }

/* Focus states */
a:focus-visible, button:focus-visible { outline: 2px solid var(--hype-gold); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hype-single-hero { min-height: 260px; max-height: 340px; }
  .hype-single-hero-content { padding: 16px 20px 24px; }
  .hype-article-body { padding: 14px 20px 32px !important; font-size: 17px !important; line-height: 1.85 !important; letter-spacing: 0.15px !important; }
  .hype-article-header { padding: 24px 20px 20px; }
  .hype-share { padding: 20px 20px; }
  .hype-share--inline { padding: 12px 20px 0 !important; }
  .hype-article-header .hype-share--inline { padding: 10px 0 0 !important; }
  .hype-author-box { padding: 20px 20px; }
  .hype-article-tags { padding: 0 20px 20px; }
  .hype-related { padding: 32px 20px 40px; }
  .hype-related-grid { grid-template-columns: 1fr 1fr; }
  .hype-arch-grid { grid-template-columns: repeat(2, 1fr); }
  .hype-archive-wrap { padding: 24px 20px 40px; }
  .hype-archive-hero { padding: 36px 20px 32px; }
  .hype-cat-hero { padding: 32px 20px; }
  .hype-cat-strip { padding: 0 20px; }
  .hype-footer-newsletter-inner { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .hype-footer-nav-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 24px; }
  .hype-footer-nav-col { border-right: none; margin-right: 0; padding-right: 0; }
  .hype-footer-bottom { flex-direction: column; text-align: center; padding: 16px 20px; gap: 10px; }
}
@media (max-width: 480px) {
  .hype-related-grid { grid-template-columns: 1fr; }
  .hype-arch-grid { grid-template-columns: 1fr; }
  .hype-footer-nav-inner { grid-template-columns: 1fr; padding: 28px 20px; }
  .hype-cat-title { font-size: 52px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL: KILL ALL REMAINING ASTRA WHITE BACKGROUNDS
   Targets every possible wrapper Astra might inject
═══════════════════════════════════════════════════════════════ */
body {
  background: var(--hype-black) !important;
}
.ast-separate-container .site-main,
.ast-separate-container .content-area,
.ast-separate-container #main,
.ast-separate-container #primary,
.ast-separate-container article,
.ast-page-builder-template .site-main,
.ast-page-builder-template .content-area,
.ast-page-builder-template #main,
.ast-no-sidebar .site-main,
.ast-no-sidebar #main,
.ast-no-sidebar #primary,
.ast-no-sidebar article,
.ast-no-sidebar .content-area,
.ast-full-width-layout .site-main,
.ast-full-width-layout #main,
.ast-full-width-layout .content-area,
#page .site-content,
.hentry,
.page,
.single,
.post,
.error404 .site-main,
.ast-page-builder article.page { 
  background: transparent !important; 
}

/* ── Force dark on single post + category ─────── */
body.single .site-content,
body.single .site-main,
body.single #content,
body.single #main,
body.single #primary,
body.single .ast-container,
body.single .entry-content,
body.single .hentry,
body.single article,
body.single-post .site-content,
body.single-post .site-main,
body.single-post #content,
body.single-post #main,
body.single-post #primary,
body.single-post .ast-container,
body.single-post .entry-content,
body.single-post .hentry,
body.single-post article,
body.category .site-content,
body.category .site-main,
body.category #content,
body.category #main,
body.category #primary,
body.category .ast-container,
body.category .hentry,
body.category .entry-content,
body.tag .site-content,
body.tag .site-main,
body.tag #content,
body.tag #main,
body.tag .ast-container,
body.archive .site-content,
body.archive .site-main,
body.archive #content,
body.archive #main,
body.archive .ast-container,
body.search .site-content,
body.search .site-main,
body.search #content,
body.search #main,
body.search .ast-container,
body.page .site-content,
body.page .site-main,
body.page #content,
body.page #main,
body.page .ast-container {
  background: var(--hype-black) !important;
  color: var(--hype-white) !important;
}

/* ── Prevent white flash on Astra entry wrappers ── */
.ast-separate-container .ast-article-single .entry-content > *,
.ast-separate-container .ast-article-post .entry-content > * {
  background: transparent !important;
}

/* ── Fix Astra's default article padding/color ── */
.single-post .ast-article-single,
.single-post .entry-content,
.single-post .post-content {
  background: transparent !important;
  color: var(--hype-white) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Ensure category grid content is dark ──────── */
body.category .ast-article-post *,
body.category .entry-content,
body.category .entry-header,
body.category .entry-title a {
  background: transparent !important;
  color: var(--hype-white) !important;
}

/* ── Astra sidebar/widget area ── */
#secondary,
.widget-area,
.sidebar-main,
.ast-sidebar-layout-content {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE ENHANCEMENTS v5.1
   - Premium editorial feel: NYT x The Athletic x Complex Nigeria
═══════════════════════════════════════════════════════════════ */

/* Masthead datebar center logo hide on mobile (already in header) */
@media (max-width: 768px) {
  .hype-datebar-logo { display: none; }
}

/* Hero grid - golden accent line under the eyebrow */
.hype-hero-grid {
  border-top: 3px solid var(--hype-gold);
  padding-top: 24px;
}

/* Hero headline — add subtle text shadow for depth */
.hype-hero-headline {
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

/* Hero main image — gold accent bar on hover */
.hype-hero-main-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hype-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.hype-hero-main:hover .hype-hero-main-img::after { transform: scaleX(1); }

/* Secondary items — number badge */
.hype-hero-sec-item { position: relative; }

/* Section label — refined */
.hype-section-label { margin-top: 40px; }

/* News card — add left gold border on hover (editorial feel) */
.hype-news-card {
  border-left: 2px solid transparent;
  padding-left: 0;
  transition: border-color 0.2s, transform 0.3s var(--ease-out), opacity 0.2s;
}
.hype-news-card:hover { border-left-color: var(--hype-gold); padding-left: 10px; }
/* Except the featured first card */
.hype-latest-grid .hype-news-card:first-child:hover { padding-left: 0; border-left-color: transparent; }

/* Cards background on hover */
.hype-news-card:hover {
  background: rgba(201,168,76,0.03);
}

/* Sidebar section label spacing */
.hype-sidebar .hype-section-label { margin-top: 24px; }

/* Opinion card — quote mark bigger, bolder feel */
.hype-opinion-quote { opacity: 0.25; }
.hype-opinion-card:hover .hype-opinion-quote { opacity: 0.5; color: var(--hype-gold2); }

/* Trending strip — hover on items more pronounced */
.hype-trending-item:hover .hype-trending-num { 
  transform: scale(1.1); 
  display: inline-block; 
}

/* Filter bar — sticks below the site header properly */
.hype-filter-bar {
  top: var(--hype-header-height, 140px);
  border-radius: 0;
}

/* Category page: ensure posts use archive card layout */
body.category .ast-article-post {
  border: 1px solid var(--hype-border) !important;
  background: var(--hype-card) !important;
  overflow: hidden !important;
}
body.category .entry-title a {
  font-family: var(--font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--hype-white) !important;
  text-decoration: none !important;
}
body.category .entry-title a:hover { color: var(--hype-gold) !important; }
body.category .entry-meta,
body.category .entry-meta a,
body.category .posted-on,
body.category .byline,
body.category .cat-links a {
  color: var(--hype-dim) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
}
body.category .post-thumbnail img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Fix pagination on category/archive */
body.category .ast-pagination .page-numbers,
body.archive .ast-pagination .page-numbers,
body.category nav.navigation .page-numbers,
body.archive nav.navigation .page-numbers {
  background: var(--hype-dark) !important;
  color: var(--hype-muted) !important;
  border: 1px solid var(--hype-border) !important;
  font-family: var(--font-head) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  padding: 10px 18px !important;
  transition: all 0.2s !important;
}
body.category .ast-pagination .page-numbers.current,
body.archive .ast-pagination .page-numbers.current,
body.category .ast-pagination .page-numbers:hover,
body.archive .ast-pagination .page-numbers:hover,
body.category nav.navigation .page-numbers.current,
body.archive nav.navigation .page-numbers.current {
  background: var(--hype-gold) !important;
  color: var(--hype-black) !important;
  border-color: var(--hype-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY SHARE BAR — single posts
═══════════════════════════════════════════════════════════════ */
.hype-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8888;
  background: rgba(14,14,20,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hype-border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.hype-sticky-bar.visible { transform: translateY(0); }
.hype-sticky-bar-meta {
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--hype-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 40%;
}
.hype-sticky-bar-actions { display: flex; align-items: center; gap: 8px; }
.hype-sticky-bar-share {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hype-border); color: var(--hype-muted);
  text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.hype-sticky-bar-share svg { width: 15px; height: 15px; fill: currentColor; }
.hype-sticky-bar-share:hover { border-color: var(--hype-gold); color: var(--hype-gold); }
.hype-sticky-bar-progress {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  color: var(--hype-gold); letter-spacing: 1px; min-width: 36px; text-align: right;
}
@media (max-width: 480px) {
  .hype-sticky-bar { padding: 8px 16px; }
  .hype-sticky-bar-meta { display: none; }
}

/* News card title clamp */
.hype-news-card .hype-card-title,
.hype-news-card h2, .hype-news-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Widen single post layout ── */
body.single-post .hype-article-body {
  font-size: 18px !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE ENHANCEMENTS v5.1
   - Richer card hover states
   - Gold shimmer on section labels
   - Improved typography contrast
   - Breaking ticker accent
   - Better hero image treatment
═══════════════════════════════════════════════════════════════ */

/* Hero image: subtle gradient overlay for editorial depth */
.hype-hero-main-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(6,6,10,0.3) 70%,
    rgba(6,6,10,0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Masthead logo: gold shimmer on hover */
.hype-datebar-logo {
  background: linear-gradient(
    90deg,
    var(--hype-white) 30%,
    var(--hype-gold) 50%,
    var(--hype-white) 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position 0.6s ease;
}
.hype-datebar-logo:hover {
  background-position: right center;
  opacity: 1;
}
.hype-datebar-logo span {
  -webkit-text-fill-color: var(--hype-gold);
  background: none;
}

/* Section label: gold tab with stronger presence */
.hype-section-label .lbl {
  position: relative;
  letter-spacing: 5px;
}
.hype-section-label .lbl::before {
  content: '';
  position: absolute;
  left: -4px; top: 0; bottom: 0;
  width: 3px;
  background: var(--hype-gold2);
  opacity: 0.6;
}

/* News card: refined border accent on hover */
.hype-news-card {
  border-bottom-color: transparent;
  border-bottom-width: 2px;
  padding-bottom: 22px;
  position: relative;
}
.hype-news-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--hype-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.hype-news-card:hover::after { transform: scaleX(1); }
.hype-news-card:not(:hover) {
  border-bottom: 2px solid var(--hype-border);
}

/* Trending strip: number glow */
.hype-trending-num {
  text-shadow: 0 0 18px rgba(201,168,76,0.45);
}

/* Sidebar promo: animated border */
.hype-sidebar-promo {
  position: relative;
  overflow: hidden;
}
.hype-sidebar-promo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hype-gold), transparent);
  animation: gold-shimmer 3s linear infinite;
  background-size: 200% auto;
}

/* Filter bar: pill indicator */
.hype-filter-btn.active {
  position: relative;
}
.hype-filter-btn.active::before {
  content: '▸';
  margin-right: 4px;
  font-size: 8px;
}

/* Opinion card: quote mark treatment */
.hype-opinion-quote {
  letter-spacing: -4px;
}

/* NIGERIA'S PULSE bar: icon enhancement */
.hype-pulse-link-icon {
  font-size: 14px;
  opacity: 0.7;
}

/* Card meta: read time icon */
.hype-meta .rt::before {
  content: '⏱ ';
  font-size: 10px;
  opacity: 0.6;
}

/* Hero secondary items: refined left border on hover */
.hype-hero-sec-item {
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -14px;
  transition: border-color 0.25s;
}
.hype-hero-sec-item:hover {
  border-left-color: var(--hype-gold);
}

/* Homepage "load more" — animated arrow */
.hype-load-more a::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s;
}
.hype-load-more a:hover::after {
  transform: translateX(4px);
}

/* Promo band: responsive */
@media (max-width: 768px) {
  .hype-promo-band-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Category page body class: ensure clean dark background */
body.category,
body.category #page,
body.category #content,
body.category #main {
  background: var(--hype-black) !important;
}

/* Category page: hide Astra title elements */
body.category .entry-header,
body.category .ast-archive-description,
body.category .page-header,
body.category .ast-page-title-bar { display: none !important; }

/* Compact card hover state */
.hype-compact-card {
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: border-color 0.2s;
}
.hype-compact-card:hover { border-left-color: var(--hype-gold); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR ADS — v5 Ad System
   Bold, editorial, HYPE-branded ad blocks
═══════════════════════════════════════════════════════════════ */

/* Shared base */
.hype-ad-block {
    display: block;
    width: 160px;
    border-radius: 3px;
    overflow: hidden;
    font-family: var(--font-body);
    text-decoration: none;
    transition: transform 0.22s var(--ease-out), box-shadow 0.22s;
    position: relative;
    flex-shrink: 0;
}
.hype-ad-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

/* Shared gold CTA */
.hype-ad-cta-btn {
    display: block;
    background: var(--hype-gold);
    color: var(--hype-black);
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 8px;
    border-radius: 2px;
    transition: background 0.2s;
    margin-top: 6px;
}
.hype-ad-block:hover .hype-ad-cta-btn { background: var(--hype-gold2); }

/* ── AD: Place Your Ad ──────────────────────────────────── */
.hype-ad-place {
    background: #111113;
    border: 1px dashed #2e2e35;
    height: 160px;
}
.hype-ad-place__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 10px;
    gap: 5px;
}
.hype-ad-place__cross {
    width: 36px; height: 36px;
    position: relative;
    margin-bottom: 6px;
    border: 1px solid #333;
    border-radius: 4px;
    flex-shrink: 0;
}
.hype-ad-place__cross-h,
.hype-ad-place__cross-v {
    position: absolute;
    background: #444;
    border-radius: 1px;
}
.hype-ad-place__cross-h {
    width: 18px; height: 1px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.hype-ad-place__cross-v {
    width: 1px; height: 18px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.hype-ad-place__tag {
    font-family: var(--font-head);
    font-size: 8px;
    letter-spacing: 2.5px;
    color: #444;
    text-transform: uppercase;
}
.hype-ad-place__title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: #cccccc;
    line-height: 1.1;
    text-transform: uppercase;
}
.hype-ad-place__cta {
    font-family: var(--font-head);
    font-size: 9px;
    color: var(--hype-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hype-gold);
    padding-bottom: 1px;
    display: inline-block;
}

/* ── AD: Model of the Month ─────────────────────────────── */
.hype-ad-model {
    background: #0d0d10;
    border: 1px solid var(--hype-gold);
    display: flex;
    flex-direction: column;
    min-height: 240px;
}
.hype-ad-model__badge {
    background: var(--hype-gold);
    color: var(--hype-black);
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    flex-shrink: 0;
}
.hype-ad-model__visual {
    background: linear-gradient(160deg, #1a1208 0%, #0d0d10 60%);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px 8px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    gap: 6px;
}
.hype-ad-model__crown {
    font-size: 38px;
    line-height: 1;
    color: var(--hype-gold);
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.4));
}
.hype-ad-model__stars {
    font-size: 11px;
    color: var(--hype-gold);
    letter-spacing: 4px;
    opacity: 0.6;
}
.hype-ad-model__body {
    padding: 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hype-ad-model__eyebrow {
    font-family: var(--font-head);
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.hype-ad-model__title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--hype-white);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── AD: Live Poll ──────────────────────────────────────── */
.hype-ad-poll {
    background: var(--hype-red);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 3px;
    cursor: default;
}
.hype-ad-poll:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
.hype-ad-poll__header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
}
.hype-ad-poll__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: hype-pulse 1.4s ease-in-out infinite;
}
.hype-ad-poll__question {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
}
.hype-ad-poll__options { display: flex; flex-direction: column; gap: 2px; }
.hype-ad-poll__row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-top: 2px;
}
.hype-ad-poll__bar {
    background: rgba(255,255,255,0.2);
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
}
.hype-ad-poll__fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
}
.hype-ad-poll__cta {
    display: block;
    background: #fff;
    color: var(--hype-red);
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

/* ── AD: Models Feature Grid ───────────────────────────── */
.hype-ad-models-feature {
    background: #0d0d10;
    border: 1px solid var(--hype-gold);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 260px;
}
.hype-ad-models-feature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    flex: 1;
}
.hype-ad-model-thumb {
    position: relative;
    height: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hype-ad-model-thumb__avatar {
    font-family: var(--font-display);
    font-size: 42px;
    color: rgba(201,168,76,0.25);
    line-height: 1;
    pointer-events: none;
}
.hype-ad-model-thumb__name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 4px 5px 4px;
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    color: var(--hype-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
}
.hype-ad-models-feature__footer {
    background: var(--hype-gold);
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.hype-ad-models-feature__eyebrow {
    font-family: var(--font-head);
    font-size: 7px;
    color: rgba(0,0,0,0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hype-ad-models-feature__title {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 900;
    color: var(--hype-black);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.3px;
}
.hype-ad-models-feature__arrow {
    font-size: 20px;
    color: var(--hype-black);
    font-weight: 900;
}

/* ── AD: Premium Advertise ─────────────────────────────── */
.hype-ad-premium {
    background: #0d0d10;
    border: 1px solid #222228;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    gap: 5px;
    overflow: hidden;
}
.hype-ad-premium__watermark {
    position: absolute;
    font-family: var(--font-display);
    font-size: 110px;
    color: var(--hype-gold);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
}
.hype-ad-premium__tag {
    font-family: var(--font-head);
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--hype-gold);
    text-transform: uppercase;
    position: relative;
}
.hype-ad-premium__title {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.05;
    position: relative;
}
.hype-ad-premium__sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}

/* ── Right sidebar: full-width ads ─────────────────────── */
.hype-sidebar .hype-ad-block {
    width: 100%;
    margin-top: 18px;
}
.hype-sidebar .hype-ad-models-feature { min-height: 280px; }
.hype-sidebar .hype-ad-model-thumb { height: 120px; }
.hype-sidebar .hype-ad-premium { height: 160px; }

/* ═══════════════════════════════════════════════════════════════
   FIXED AD RAILS — Left & Right, outside content box
   Position is calculated by JS in footer to match actual box edges
═══════════════════════════════════════════════════════════════ */
.hype-ad-rail-left,
.hype-ad-rail-right {
    position: fixed;
    top: 160px;
    width: 150px;
    display: none; /* JS sets display:flex + opacity:1 when viewport is wide enough */
    flex-direction: column;
    gap: 10px;
    z-index: 90;
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* Rail ad card base */
.hype-rail-card {
    background: var(--hype-card);
    border: 1px solid var(--hype-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color 0.25s, transform 0.25s var(--ease-out);
    width: 150px;
    flex-shrink: 0;
}
.hype-rail-card:hover {
    border-color: var(--hype-gold);
    transform: translateY(-2px);
}
/* ── Card: Place Your Ad ────────────────────────────── */
.hype-rail-place {
    min-height: 160px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 12px;
    position: relative;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 6px,
        rgba(201,168,76,0.04) 6px,
        rgba(201,168,76,0.04) 12px
    ), var(--hype-card);
    border: 1px dashed rgba(201,168,76,0.35);
}
.hype-rail-place:hover { border-color: var(--hype-gold); border-style: solid; }
.hype-rail-place__icon {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.7;
}
.hype-rail-place__label {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hype-gold);
    margin-bottom: 6px;
}
.hype-rail-place__title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--hype-white);
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.hype-rail-place__cta {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--hype-gold);
    color: var(--hype-black);
    padding: 5px 12px;
    display: inline-block;
}
/* ── Card: Personality of the Week ─────────────────── */
.hype-rail-personality {
    min-height: 210px;
    position: relative;
    overflow: hidden;
}
.hype-rail-personality__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a0a2e 0%, #0e0e14 60%);
}
.hype-rail-personality__stars {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    color: var(--hype-gold);
    letter-spacing: 2px;
}
.hype-rail-personality__avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hype-gold) 0%, #8b5e00 100%);
    margin: 22px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--hype-black);
    border: 2px solid var(--hype-gold);
    box-shadow: 0 0 0 4px rgba(201,168,76,0.15);
    z-index: 1;
    flex-shrink: 0;
}
.hype-rail-personality__body {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10px 14px;
    flex: 1;
}
.hype-rail-personality__eyebrow {
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--hype-gold);
    margin-bottom: 4px;
}
.hype-rail-personality__name {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--hype-white);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 6px;
}
.hype-rail-personality__role {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--hype-dim);
    margin-bottom: 10px;
}
.hype-rail-personality__tag {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--hype-gold);
    color: var(--hype-black);
    padding: 4px 10px;
    display: inline-block;
}
/* ── Card: Events This Week ─────────────────────────── */
.hype-rail-events {
    padding: 0;
    overflow: hidden;
}
.hype-rail-events__header {
    background: var(--hype-red);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hype-rail-events__header-icon {
    font-size: 12px;
}
.hype-rail-events__header-label {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hype-white);
}
.hype-rail-event-item {
    border-bottom: 1px solid var(--hype-border);
    padding: 9px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.hype-rail-event-item:last-child { border-bottom: none; }
.hype-rail-event-date {
    background: var(--hype-gold);
    color: var(--hype-black);
    font-family: var(--font-display);
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.hype-rail-event-info { flex: 1; min-width: 0; }
.hype-rail-event-name {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hype-white);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hype-rail-event-venue {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--hype-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hype-rail-events__footer {
    padding: 8px 12px;
    text-align: center;
    border-top: 1px solid var(--hype-border);
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hype-gold);
    display: block;
    text-decoration: none;
    transition: background 0.2s;
}
.hype-rail-events__footer:hover { background: var(--hype-gold-dim); }
/* ── Card: Brand Spotlight ──────────────────────────── */
.hype-rail-brand {
    min-height: 150px;
    position: relative;
    overflow: hidden;
    padding: 14px 12px;
    background: linear-gradient(160deg, #0d1a0d 0%, #06060a 100%);
    border-color: rgba(201,168,76,0.2);
}
.hype-rail-brand__dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: hype-pulse 1.8s ease-in-out infinite;
}
.hype-rail-brand__label {
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(74,222,128,0.8);
    margin-bottom: 10px;
}
.hype-rail-brand__logo {
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 3px;
    color: var(--hype-white);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 6px;
}
.hype-rail-brand__tagline {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--hype-dim);
    line-height: 1.4;
    margin-bottom: 12px;
}
.hype-rail-brand__cta {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.4);
    padding: 5px 10px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}
.hype-rail-card:hover .hype-rail-brand__cta {
    background: #4ade80;
    color: #06060a;
}
/* ── Card: Hot Take / Quote ─────────────────────────── */
.hype-rail-hottake {
    min-height: 140px;
    padding: 14px 12px;
    background: var(--hype-dark);
    border-left: 3px solid var(--hype-red);
    border-color: transparent;
    border-left-color: var(--hype-red);
}
.hype-rail-hottake:hover { border-color: var(--hype-red); }
.hype-rail-hottake__label {
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--hype-red);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hype-rail-hottake__label::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hype-red);
    animation: hype-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.hype-rail-hottake__quote-mark {
    font-family: var(--font-display);
    font-size: 48px;
    color: rgba(230,57,70,0.2);
    line-height: 0.5;
    margin-bottom: 6px;
    display: block;
}
.hype-rail-hottake__text {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hype-white);
    line-height: 1.3;
    margin-bottom: 10px;
}
.hype-rail-hottake__author {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--hype-dim);
}
/* ── Card: Newsletter mini ──────────────────────────── */
.hype-rail-newsletter {
    padding: 14px 12px;
    text-align: center;
    background: linear-gradient(160deg, #1a120a 0%, #06060a 100%);
}
.hype-rail-newsletter__icon { font-size: 24px; margin-bottom: 8px; }
.hype-rail-newsletter__title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hype-gold);
    line-height: 1;
    margin-bottom: 6px;
}
.hype-rail-newsletter__sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--hype-dim);
    line-height: 1.4;
    margin-bottom: 10px;
}
.hype-rail-newsletter__btn {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--hype-gold);
    color: var(--hype-black);
    padding: 6px 14px;
    display: inline-block;
    text-decoration: none;
    transition: background 0.2s;
}
.hype-rail-newsletter__btn:hover { background: var(--hype-gold2); color: var(--hype-black); }

/* ── Responsive grid overrides ──────────────────────────── */
@media (max-width: 1100px) {
    .hype-hero-grid    { grid-template-columns: 1fr 340px !important; }
    .hype-content-grid { grid-template-columns: 1fr 300px !important; }
}
@media (max-width: 768px) {
    .hype-hero-grid    { grid-template-columns: 1fr !important; }
    .hype-content-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TYPE SCALE — slight reduction for tighter containment
   Most of this theme's type uses fixed px values rather than rem,
   so a root font-size change alone won't reach them. `zoom` scales
   an element and everything in it (text, padding, gaps, images)
   uniformly by percentage, which is the safest way to nudge the
   whole page down slightly without hand-editing 130+ individual
   font-size rules and risking breakage. 97% ≈ a small, easy-to-miss
   reduction that buys back a bit of breathing room site-wide.
   (zoom is supported in all Chromium/Safari browsers; unsupported
   browsers simply render at 100%, which is a safe fallback.) */
#page, .site { zoom: 0.97; }