/* ============================================================
   PASSIONE INTER 2026 — main.css
   Design tokens + all component styles
   ============================================================ */

:root {
  --inter-blue:        #205AEC;
  --inter-blue-dark:   #1A4AC4;
  --inter-gold:        #ECB220;
  --inter-gold-dark:   #C9971B;
  --near-black:        #0C0C0C;
  --dark-surface:      #1A1A1A;
  --dark-border:       #2A2A2A;
  --white:             #FFFFFF;
  --light-text:        #F0F0F0;
  --mid-light:         #B0B0B0;
  --mid-gray:          #808080;

  --primary:           #205AEC;
  --primary-hover:     #1A4AC4;
  --secondary:         #ECB220;
  --secondary-hover:   #C9971B;
  --text-primary:      #111111;
  --text-secondary:    #555555;
  --text-tertiary:     #999999;
  --text-on-primary:   #FFFFFF;
  --text-on-secondary: #111111;
  --bg-primary:        #FFFFFF;
  --bg-secondary:      #F5F5F5;
  --bg-elevated:       #EAEAEA;
  --border-default:    #DEDEDE;

  --font-base:   'Inter', system-ui, sans-serif;
  --font-titles: 'Roboto', sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 8px;
  --duration-fast: 150ms; --duration-normal: 300ms; --easing: ease-out;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--inter-blue) !important; font-family: var(--font-base); color: var(--text-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pi-adv-mobile { display: none; }
.pi-adv-desktop { display: block; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---- DARK SECTIONS ---- */
#header,
#header .header-top,
.textual-highlight,
.simple-slider,
#footer,
.newsletter-strip {
  --text-primary:   #F0F0F0;
  --text-secondary: #B0B0B0;
  --text-tertiary:  #808080;
  --bg-elevated:    #2A2A2A;
  --border-default: #2A2A2A;
}

/* ---- LAYOUT ---- */
.wrappage { background: var(--bg-primary) !important; max-width: 1280px !important; width: 100% !important; margin: 0 auto !important; box-shadow: 0 0 48px rgba(0,0,0,.3); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
.row { display: flex; flex-wrap: wrap; }
.col-8 { width: 66.66%; }
.col-4 { width: 33.33%; }
.col-12 { width: 100%; }
.page-wrap { max-width: 780px; margin: 0 auto; }
.col-6 { width: 50%; }
.col-3 { width: 25%; }

/* ---- ADV PLACEHOLDERS ---- */
.adv-placeholder {
  background: var(--bg-elevated); display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 11px; font-family: var(--font-base);
  border: 1px dashed var(--border-default); letter-spacing: .05em;
}

/* ============================================================
   HEADER
   ============================================================ */
#header { background: var(--near-black); border-bottom: 1px solid var(--border-default); }
#header .header-top { background: var(--near-black); }
#header .header-top .box { display: flex; flex-direction: row; align-items: stretch; }
#header .header-top .logo { display: flex; align-items: center; flex-shrink: 0; padding: var(--space-3) var(--space-4); }
#header .header-top .logo img { height: 40px; width: auto; }
#header .header-top .box-link {
  flex-grow: 1; display: flex; align-items: center; justify-content: flex-end;
  padding: var(--space-3) var(--space-5); border-right: 1px solid var(--border-default);
  gap: var(--space-5); font-size: 13px;
}
#header .header-top .box-link a { color: var(--text-secondary); font-weight: 500; transition: color var(--duration-fast) var(--easing); }
#header .header-top .box-link a:hover { color: var(--secondary); }
#header .box-right { display: flex; align-items: center; padding-left: var(--space-3); }
#header .social { display: flex; }
#header .social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #ecb220; transition: color var(--duration-fast) var(--easing); }
#header .social a:hover { color: #fff; }
#header .social a i { font-size: 16px; }

/* Navigation */
.header-nav { background: var(--near-black); border-top: 1px solid var(--border-default); }
.mega-menu { display: flex; align-items: center; }
ul#menu-main-menu { flex: 1; display: flex; justify-content: space-between; align-items: stretch; }
ul#menu-main-menu li { flex-grow: 1; text-align: center; position: relative; border-right: 1px solid var(--border-default); }
ul#menu-main-menu li:first-child { border-left: 1px solid var(--border-default); }
ul#menu-main-menu li a {
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--space-3);
  font: 600 11px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); position: relative; z-index: 1;
  transition: color var(--duration-fast) var(--easing);
}
ul#menu-main-menu li::before {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--primary);
  transition: width var(--duration-normal) var(--easing);
}
ul#menu-main-menu li:hover a { color: var(--light-text); }
ul#menu-main-menu li:hover::before { width: 100%; }
ul#menu-main-menu li.current-menu-item > a,
ul#menu-main-menu li.current a { color: var(--secondary); }
ul#menu-main-menu li.current-menu-item::before,
ul#menu-main-menu li.current::before { width: 100%; background: var(--secondary); }
ul#menu-main-menu li.menu-club-btn > a { background: var(--primary) !important; color: var(--text-on-primary) !important; font-weight: 700 !important; }
ul#menu-main-menu li.menu-club-btn > a:hover { background: var(--primary-hover) !important; }
ul#menu-main-menu .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 180px;
  background: var(--near-black); border: 1px solid var(--border-default);
  border-top: 2px solid var(--primary); z-index: 100; list-style: none;
  margin: 0; padding: 0;
}
ul#menu-main-menu .sub-menu li { flex-grow: unset; width: 100%; text-align: left; border-right: none; border-bottom: 1px solid var(--border-default); }
ul#menu-main-menu .sub-menu li:last-child { border-bottom: none; }
ul#menu-main-menu .sub-menu li a { justify-content: flex-start; height: 38px; padding: 0 var(--space-4); font-size: 11px; }
ul#menu-main-menu li:hover > .sub-menu { display: block; }
.menu-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 44px; color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
  border-left: 1px solid var(--border-default);
  transition: color var(--duration-fast) var(--easing);
}
.menu-search-btn:hover { color: var(--light-text); }

/* ============================================================
   MASTHEAD ADV
   ============================================================ */
.masthead-block {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: var(--space-5) 0;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-default);
}

/* ============================================================
   VIDEO CAROUSEL
   ============================================================ */
.carosello-video { width: 100%; }
.simple-slider { background: var(--near-black); position: relative; overflow: hidden; border-bottom: 1px solid var(--border-default); padding: var(--space-5) 0; }
.litesuite-scroller { overflow: hidden; }
.litesuite-slides {
  display: flex; overflow-x: scroll; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 4rem; gap: var(--space-4); align-items: flex-start;
}
.litesuite-slides::-webkit-scrollbar { display: none; }
.litesuite-slide { flex-shrink: 0; width: 30%; scroll-snap-align: start; }
.litesuite-slide-content { display: flex; flex-direction: column; background: transparent; border: none; transition: opacity var(--duration-fast) var(--easing); }
.litesuite-slide-content:hover { opacity: .75; }
.litesuite-slide-content img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; margin-bottom: var(--space-3); }
.litesuite-slide-content p.article-title { padding: 0; font: 600 13px/1.4em var(--font-base); color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-2); }
.litesuite-slide-content .publish-info { padding: 0; }
.litesuite-slide-content .publish-info span { display: block; font: 400 11px/1.4em var(--font-base); color: var(--text-tertiary); }
.litesuite-slide-content .publish-info span.author { color: var(--secondary); font-weight: 600; }
.litesuite-slide__prev,
.litesuite-slide__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(0,0,0,.75); border: 2px solid rgba(255,255,255,.5);
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 18px; z-index: 10; cursor: pointer;
  transition: background var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}
.litesuite-slide__prev { left: .6rem; }
.litesuite-slide__next { right: .6rem; }
.litesuite-slide__prev:hover, .litesuite-slide__next:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ============================================================
   ADV BLOCK
   ============================================================ */
.adv-block { display: flex; align-items: center; justify-content: center; padding: var(--space-6) 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-5); position: relative; }
.section-header::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background: var(--primary); }
.section-header h2 { font: 700 13px/1em var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }

/* ============================================================
   IN PRIMO PIANO
   ============================================================ */
.home-evidence { padding: var(--space-5) var(--space-5) var(--space-6); }
.primo-piano-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-4); align-items: start; }
.primo-piano-hero { display: flex; flex-direction: column; }
.primo-piano-hero a.hero-img-link img { width: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--bg-secondary); transition: opacity var(--duration-fast) var(--easing); }
.primo-piano-hero a.hero-img-link:hover img { opacity: .9; }
.primo-piano-hero .text { padding: var(--space-4) 0 0; }
.primo-piano-hero .cat-label { display: inline-block; font: 700 10px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-2); }
.primo-piano-hero .meta { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.primo-piano-hero h3 a { font: 700 26px/1.2em var(--font-base); color: var(--text-primary); transition: color var(--duration-fast) var(--easing); }
.primo-piano-hero h3 a:hover { color: var(--primary); }
.primo-piano-hero .description { font: 400 14px/1.6em var(--font-base); color: var(--text-secondary); margin-top: var(--space-3); }
.primo-piano-stack { display: flex; flex-direction: column; gap: 0; }
.stack-item { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); align-items: flex-start; }
.stack-item:first-child { padding-top: 0; }
.stack-item:last-child { border-bottom: none; padding-bottom: 0; }
.stack-item img { width: 110px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-secondary); transition: opacity var(--duration-fast) var(--easing); }
.stack-item:hover img { opacity: .85; }
.stack-item .text { flex: 1; }
.stack-item .cat-label { display: block; font: 700 9px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-1); }
.stack-item h3 a { font: 600 15px/1.3em var(--font-titles); color: #000; transition: color var(--duration-fast) var(--easing); }
.stack-item h3 a:hover { color: var(--primary); }
.stack-item .meta { font: 400 10px/1em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-2); }

/* ============================================================
   CATEGORY NEWS GRID
   ============================================================ */
.category-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); grid-template-areas: "header header" "news-0 slot" "news-0 slot" "news-1 news-2" "news-3 news-4"; padding: 0 var(--space-5) var(--space-7); }
.category-news-grid .grid-header { grid-area: header; }
.category-news-grid .news-0 { grid-area: news-0; }
.category-news-grid .slot  { grid-area: slot; }
.category-news-grid .news-1 { grid-area: news-1; }
.category-news-grid .news-2 { grid-area: news-2; }
.category-news-grid .news-3 { grid-area: news-3; }
.category-news-grid .news-4 { grid-area: news-4; }
.news-0 .wrap-images img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.news-0 .text h3 { margin-top: var(--space-3); }
.news-0 .text h3 a { font: 700 16px/1.4em var(--font-base); color: var(--text-primary); transition: color var(--duration-fast) var(--easing); }
.news-0 .text h3 a:hover { color: var(--primary); }
.news-0 .text .description { font: 400 13px/1.5em var(--font-base); color: var(--text-secondary); margin-top: var(--space-2); }
.news-0 .tag .date { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-2); }
.news-small { display: flex; gap: var(--space-3); align-items: flex-start; }
.news-small .wrap-images { flex-shrink: 0; }
.news-small .wrap-images img { width: 100px; height: 67px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.news-small .text h3 a { font: 600 15px/1.3em var(--font-titles); color: #000; transition: color var(--duration-fast) var(--easing); }
.news-small .text h3 a:hover { color: var(--primary); }
.news-small .tag .date { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-1); }
.category-news-grid .slot { display: flex; align-items: flex-start; justify-content: center; padding-top: var(--space-2); }
.banner_300x250 { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   SIDEBAR
   ============================================================ */
#homeAside,
#articleAside { padding: var(--space-5); border-left: 1px solid var(--border-default); }
.widget-title { font: 700 11px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); padding: var(--space-3) 0; border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-4); position: relative; }
.widget-title::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background: var(--secondary); }
.post-item-min { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); align-items: flex-start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.post-item-min:last-child { border-bottom: none; }
.sidebar-img { flex-shrink: 0; }
.sidebar-img img { width: 90px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.post-item-min .text .cat { font: 700 9px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: var(--space-1); }
.post-item-min .text h3 { font-size: 14px !important; font-weight: 500 !important; line-height: 1.35em; font-family: var(--font-titles); }
.post-item-min .text h3 a { color: var(--text-primary); font-size: 14px !important; font-weight: 500 !important; transition: color var(--duration-fast) var(--easing); }
.post-item-min .text h3 a:hover { color: var(--primary); }
.post-item-min .text .item-meta { font: 400 10px/1em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-1); display: block; }

/* ============================================================
   YOUTUBE SECTION
   ============================================================ */
.yt-section { background: var(--bg-secondary); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding: var(--space-6) var(--space-5); }
.yt-section-inline { background: #0d1b2e; border: none; border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); }
.yt-section-inline .yt-compact-channel { color: #fff; }
.yt-section-inline .yt-compact-desc { color: rgba(255,255,255,.7); }
.yt-section-inline .yt-compact-stats { color: rgba(255,255,255,.55); }
.yt-section-inline .yt-compact-stats strong { color: #fff; }
.yt-section-inline .yt-stats-sep { color: rgba(255,255,255,.25); }
.yt-section-inline .yt-all-videos { color: rgba(255,255,255,.6); }
.yt-section-inline .yt-all-videos:hover { color: #fff; }
.yt-featured { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
.yt-compact { display: flex; align-items: center; gap: var(--space-6); }
.yt-facade-sm { flex-shrink: 0; width: 260px; }
.yt-compact-info { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.yt-compact-channel { display: flex; align-items: center; gap: var(--space-2); font: 800 20px/1em var(--font-titles); color: var(--text-primary); }
.yt-compact-channel .fa { color: #ff0000; font-size: 22px; }
.yt-compact-desc { font: 400 13px/1.6em var(--font-base); color: var(--text-secondary); max-width: 560px; }
.yt-compact-stats { display: flex; align-items: center; gap: var(--space-3); font: 400 12px/1em var(--font-base); color: var(--text-tertiary); }
.yt-compact-stats strong { color: var(--text-primary); font-weight: 700; }
.yt-stats-sep { color: var(--border-default); }
.yt-compact-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.yt-facade { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-normal) var(--easing), opacity var(--duration-fast) var(--easing); }
.yt-facade:hover img { transform: scale(1.02); opacity: .85; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border: none; border-radius: 50%; background: rgba(255,0,0,.9); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; transition: background var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); }
.yt-facade:hover .yt-play-btn { background: #ff0000; transform: translate(-50%, -50%) scale(1.1); }
.yt-play-btn svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.yt-info { display: flex; flex-direction: column; gap: var(--space-4); }
.yt-channel-badge { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 11px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase; color: #ff3333; }
.yt-channel-badge .fa { font-size: 20px; }
.yt-stats { display: flex; gap: var(--space-5); }
.yt-stat { display: flex; flex-direction: column; gap: 4px; }
.yt-stat strong { font: 700 22px/1em var(--font-base); color: var(--text-primary); }
.yt-stat span { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); }
.yt-video-title { font: 700 14px/1.4em var(--font-base); color: var(--text-primary); }
.yt-subscribe-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: #ff0000; color: #fff; font: 700 12px/1em var(--font-base); letter-spacing: .04em; text-transform: uppercase; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--easing); }
.yt-subscribe-btn:hover { background: #cc0000; }
.yt-all-videos { font: 600 12px/1em var(--font-base); color: var(--primary); transition: color var(--duration-fast) var(--easing); }
.yt-all-videos:hover { color: var(--secondary); }

/* ============================================================
   CLUB STRIP
   ============================================================ */
.club-strip { background: linear-gradient(135deg, var(--inter-blue-dark) 0%, var(--inter-blue) 60%, #4a72f0 100%); padding: var(--space-7) var(--space-5); position: relative; overflow: hidden; }
.club-strip::before { content: ''; position: absolute; top: -60px; right: -60px; width: 320px; height: 320px; background: rgba(255,255,255,.05); border-radius: 50%; }
.club-strip::after { content: ''; position: absolute; bottom: -80px; left: 10%; width: 200px; height: 200px; background: rgba(255,255,255,.04); border-radius: 50%; }
.club-strip-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-7); align-items: center; position: relative; z-index: 1; }
.club-strip-headline h2 { font: 800 26px/1.1em var(--font-base); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.club-strip-headline p { font: 400 14px/1.5em var(--font-base); color: rgba(255,255,255,.75); margin-top: var(--space-2); }
.club-plans { display: flex; gap: var(--space-5); align-items: center; justify-content: center; }
.club-plans-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.club-plans-label { font: 700 9px/1em var(--font-base); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 3px 10px; }
.club-plans-row { display: flex; gap: var(--space-3); }
.club-plans-sep { width: 1px; background: rgba(255,255,255,.15); align-self: stretch; margin: 0 var(--space-2); }
.club-free-month { display: inline-block; background: var(--secondary); color: #fff; font: 700 9px/1em var(--font-base); letter-spacing: .08em; text-transform: uppercase; border-radius: 20px; padding: 3px 8px; margin-left: 6px; vertical-align: middle; }
.club-plan { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-align: center; min-width: 110px; transition: background var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); }
.club-plan:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.club-plan.featured { background: rgba(255,255,255,.22); border-color: var(--inter-gold); }
.club-plan .plan-name { font: 700 10px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.club-plan.featured .plan-name { color: var(--inter-gold); }
.club-plan .plan-price { font: 800 24px/1em var(--font-base); color: #fff; margin: var(--space-2) 0 var(--space-1); }
.club-plan .plan-price small { font-size: .55em; font-weight: 400; }
.club-plan .plan-freq { font: 400 10px/1em var(--font-base); color: rgba(255,255,255,.6); }
.club-cta { text-align: center; }
.club-cta a { display: inline-block; background: var(--inter-gold); color: var(--near-black); font: 800 13px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); }
.club-cta a:hover { background: var(--inter-gold-dark); transform: translateY(-1px); }
.club-cta p { font: 400 11px/1.5em var(--font-base); color: rgba(255,255,255,.55); margin-top: var(--space-2); }

/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */
.newsletter-strip { background: var(--near-black); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); padding: var(--space-6) var(--space-5); }
.newsletter-inner { display: flex; align-items: center; gap: var(--space-6); }
.newsletter-icon { font-size: 38px; color: var(--secondary); flex-shrink: 0; }
.newsletter-copy { flex: 1; }
.newsletter-copy h3 { font: 700 18px/1.1em var(--font-base); color: var(--text-primary); text-transform: uppercase; letter-spacing: .04em; }
.newsletter-copy p { font: 400 13px/1.5em var(--font-base); color: var(--text-secondary); margin-top: var(--space-1); }
.newsletter-form-wrap { flex-shrink: 0; }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form input[type="email"] { padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font: 400 13px/1em var(--font-base); color: var(--text-primary); width: 240px; outline: none; transition: border-color var(--duration-fast) var(--easing); }
.newsletter-form input[type="email"]::placeholder { color: var(--text-tertiary); }
.newsletter-form input[type="email"]:focus { border-color: var(--primary); }
.newsletter-form button { background: var(--secondary); color: var(--text-on-secondary); font: 700 12px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--easing); }
.newsletter-form button:hover { background: var(--inter-gold-dark); }
.newsletter-link { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-2); display: block; }
.newsletter-link a { color: var(--primary); transition: color var(--duration-fast) var(--easing); }
.newsletter-link a:hover { color: var(--secondary); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { background: var(--near-black); border-top: 1px solid var(--dark-border); padding: var(--space-7) 0 0; }
#footer .footer-logo { margin-bottom: var(--space-4); }
#footer .footer-logo img { height: 36px; width: auto; }
#footer .spe-text p { font: 400 12px/1.7em var(--font-base); color: var(--mid-gray); }
#footer .spe-text p a { color: var(--secondary); }
#footer .footer-links ul { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
#footer .footer-links li a { font: 400 13px/1em var(--font-base); color: var(--mid-light); transition: color var(--duration-fast) var(--easing); }
#footer .footer-links li a:hover { color: var(--light-text); }
#footer .footer-legal p { font: 400 12px/1.6em var(--font-base); color: var(--mid-gray); padding-top: var(--space-2); }
#footer .footer-legal a { color: var(--secondary); }
.footer-bottom { margin-top: var(--space-6); border-top: 1px solid var(--dark-border); display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; }
.footer-bottom .copyright { font: 400 11px/1em var(--font-base); color: var(--mid-gray); letter-spacing: .05em; }
.footer-bottom .footer-menu-bottom ul { display: flex; gap: var(--space-5); }
.footer-bottom .footer-menu-bottom li a { font: 400 11px/1em var(--font-base); color: var(--mid-gray); transition: color var(--duration-fast) var(--easing); }
.footer-bottom .footer-menu-bottom li a:hover { color: var(--light-text); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.breadcrumb-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); padding: var(--space-3) 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font: 400 12px/1em var(--font-base); color: var(--text-tertiary); flex-wrap: nowrap; overflow: hidden; }
.breadcrumb a { color: var(--text-tertiary); transition: color var(--duration-fast) var(--easing); white-space: nowrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border-default); font-size: 10px; flex-shrink: 0; }
.breadcrumb > span { min-width: 0; }
.breadcrumb .current { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.article-wrap { padding: var(--space-6) var(--space-5) var(--space-7); }
.article-header { margin-bottom: var(--space-5); }
.article-cat-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.article-category { display: inline-block; font: 700 10px/1em var(--font-base); letter-spacing: .12em; text-transform: uppercase; color: var(--white); background: var(--primary); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
.article-date { font: 400 12px/1em var(--font-base); color: var(--text-tertiary); }
.article-title { font: 700 32px/1.15em var(--font-titles); color: #000; margin-bottom: var(--space-4); }
.article-subtitle { font: 400 19px/1.55em var(--font-base); color: var(--text-secondary); margin-bottom: var(--space-4); }
.article-meta { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.article-author-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-author-info { flex: 1; }
.article-author-info .author-name { font: 700 13px/1em var(--font-base); color: var(--text-primary); }
.article-author-info .author-role { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); margin-top: 3px; }

.author-init { border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; letter-spacing: -.02em; }
.author-init-sm { width: 40px; height: 40px; font-size: 14px; font-family: var(--font-base); }
.author-init-lg { width: 72px; height: 72px; font-size: 22px; font-family: var(--font-base); }

.article-hero { margin: var(--space-5) 0; }
.article-hero img { width: 100%; border-radius: var(--radius-sm); aspect-ratio: 16/9; object-fit: cover; background: var(--bg-secondary); }
.article-hero figcaption { font: 400 11px/1.5em var(--font-base); color: var(--text-tertiary); margin-top: var(--space-2); padding: 0 var(--space-1); }

/* Article body typography */
.article-body { font: 400 17px/1.75em var(--font-base); color: #222; }
.article-body p { margin-bottom: var(--space-5); }
.article-body h2 { font: 700 22px/1.3em var(--font-titles); color: #000; margin: var(--space-6) 0 var(--space-4); }
.article-body h3 { font: 700 18px/1.3em var(--font-titles); color: #000; margin: var(--space-5) 0 var(--space-3); }
.article-body strong { font-weight: 600; color: #000; }
.article-body ul, .article-body ol { padding-left: var(--space-5); margin-bottom: var(--space-5); }
.article-body li { margin-bottom: var(--space-2); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body blockquote { border-left: 4px solid var(--primary); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; background: var(--bg-secondary); font-style: italic; color: var(--text-secondary); }
.article-body a { color: var(--primary); border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--easing); }
.article-body a:hover { border-color: var(--primary); }
.article-body img { border-radius: var(--radius-sm); margin: var(--space-5) 0; }

.article-adv-inline { margin: var(--space-6) 0; display: flex; justify-content: center; padding: var(--space-4) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }

/* Google Discovery CTA */
.discovery-cta { display: flex; align-items: center; gap: var(--space-5); background: var(--bg-secondary); border: 1px solid var(--border-default); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; }
.discovery-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.discovery-icon svg { width: 40px; height: 40px; }
.discovery-copy { flex: 1; }
.discovery-copy strong { display: block; font: 700 14px/1em var(--font-titles); color: #000; margin-bottom: var(--space-2); }
.discovery-copy span { font: 400 12px/1.5em var(--font-base); color: var(--text-secondary); }
.discovery-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-2); background: #4285F4; color: #fff; font: 700 12px/1em var(--font-base); letter-spacing: .04em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border-radius: 20px; transition: background var(--duration-fast) var(--easing); white-space: nowrap; }
.discovery-btn:hover { background: #3367D6; }

/* Author bio */
.author-bio { display: flex; gap: var(--space-5); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; }
.author-bio-avatar { flex-shrink: 0; width: 72px; height: 72px; }
.author-bio-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.author-bio-text .bio-name { font: 700 16px/1em var(--font-titles); color: #000; margin-bottom: var(--space-2); }
.author-bio-text .bio-role { font: 600 10px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-3); }
.author-bio-text .bio-desc { font: 400 13px/1.6em var(--font-base); color: var(--text-secondary); }

/* In-article YouTube */
.in-article-yt { display: flex; gap: var(--space-4); align-items: center; background: var(--near-black); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-5) 0; --text-primary: #F0F0F0; --text-secondary: #B0B0B0; --border-default: #2A2A2A; }
.in-article-yt .yt-thumb { flex-shrink: 0; width: 200px; position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: #000; }
.in-article-yt .yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-fast) var(--easing); }
.in-article-yt .yt-thumb:hover img { opacity: .8; }
.in-article-yt .yt-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.yt-play-sm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,0,0,.9); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.yt-play-sm svg { width: 15px; height: 15px; fill: #fff; margin-left: 3px; }
.in-article-yt .yt-copy { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.in-article-yt .yt-badge { font: 700 10px/1em var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: #ff4444; display: flex; align-items: center; gap: 4px; }
.in-article-yt .yt-title { font: 700 14px/1.4em var(--font-titles); color: var(--text-primary); }
.in-article-yt .yt-sub-link { font: 600 11px/1em var(--font-base); color: #5985F0; transition: color var(--duration-fast) var(--easing); }
.in-article-yt .yt-sub-link:hover { color: var(--secondary); }

/* In-article Club */
.in-article-club { background: linear-gradient(135deg, var(--inter-blue-dark), var(--inter-blue)); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-3) 0 var(--space-6); display: flex; align-items: center; gap: var(--space-5); }
.in-article-club .club-text { flex: 1; }
.in-article-club .club-text strong { display: block; font: 700 15px/1em var(--font-titles); color: #fff; margin-bottom: 5px; }
.in-article-club .club-text span { font: 400 12px/1.4em var(--font-base); color: rgba(255,255,255,.75); }
.in-article-club .club-btn { flex-shrink: 0; display: inline-block; background: var(--inter-gold); color: var(--near-black); font: 800 12px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--easing); white-space: nowrap; }
.in-article-club .club-btn:hover { background: var(--inter-gold-dark); }

/* Article nav prev/next */
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); border-top: 2px solid var(--border-default); padding-top: var(--space-5); margin-top: var(--space-5); position: relative; }
.article-nav::after { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--primary); }
.nav-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--easing); }
.nav-item:hover { border-color: var(--primary); }
.nav-item .nav-dir { font: 700 9px/1em var(--font-base); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-2); }
.nav-item .nav-title { font: 700 14px/1.35em var(--font-titles); color: #000; }
.nav-item.next { text-align: right; }
.nav-item.next .nav-dir { justify-content: flex-end; }

/* WP the_content() alignment classes */
.alignleft  { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font: 400 11px/1.5em var(--font-base); color: var(--text-tertiary); margin-top: 4px; }

/* ============================================================
   CATEGORY ARCHIVE
   ============================================================ */
.cat-archive-header { background: var(--bg-secondary); border-bottom: 2px solid var(--border-default); padding: var(--space-5) 0; position: relative; }
.cat-archive-header::after { content: ""; position: absolute; bottom: -2px; left: var(--space-4); width: 48px; height: 2px; background: var(--primary); }
.cat-archive-title { font: 700 22px/1em var(--font-base); color: var(--text-primary); letter-spacing: .04em; text-transform: uppercase; }
.cat-archive-desc { font: 400 13px/1.5em var(--font-base); color: var(--text-secondary); margin-top: var(--space-2); }

.archive-list { padding: var(--space-5); }

.archive-item { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-default); align-items: flex-start; }
.archive-item:first-child { padding-top: 0; }
.archive-item-img { flex-shrink: 0; width: 260px; }
.archive-item-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-secondary); display: block; transition: opacity var(--duration-fast) var(--easing); }
.archive-item-img:hover img { opacity: .88; }
.archive-item-text { flex: 1; }
.archive-item-text .cat-label { display: inline-block; font: 700 10px/1em var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-2); }
.archive-item-text h2 a { font: 700 20px/1.25em var(--font-titles); color: #000; display: block; margin-bottom: var(--space-3); transition: color var(--duration-fast) var(--easing); }
.archive-item-text h2 a:hover { color: var(--primary); }
.archive-item-excerpt { font: 400 13px/1.6em var(--font-base); color: var(--text-secondary); margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.archive-item-meta { font: 400 11px/1em var(--font-base); color: var(--text-tertiary); }

/* Inserts */
.archive-insert { margin: var(--space-4) 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.archive-insert-adv { display: flex; justify-content: center; background: var(--bg-secondary); padding: var(--space-4); border-radius: var(--radius-sm); }
.archive-insert-yt { display: flex; gap: var(--space-4); align-items: center; background: var(--near-black); border-radius: var(--radius-md); padding: var(--space-4); --text-primary: #F0F0F0; --text-secondary: #B0B0B0; }
.archive-insert-yt .yt-facade { flex-shrink: 0; width: 180px; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: #000; position: relative; }
.archive-insert-yt .yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.archive-yt-copy { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.archive-yt-copy .yt-badge { font: 700 10px/1em var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: #ff4444; display: flex; align-items: center; gap: 4px; }
.archive-yt-copy p { font: 700 14px/1.4em var(--font-titles); color: var(--text-primary); }
.archive-insert-club { display: flex; align-items: center; gap: var(--space-5); background: linear-gradient(135deg, var(--inter-blue-dark), var(--inter-blue)); border-radius: var(--radius-md); padding: var(--space-5); }
.archive-insert-club .club-text { flex: 1; }
.archive-insert-club .club-text strong { display: block; font: 700 15px/1em var(--font-titles); color: #fff; margin-bottom: 5px; }
.archive-insert-club .club-text span { font: 400 12px/1.4em var(--font-base); color: rgba(255,255,255,.75); }
.archive-insert-club .club-btn { flex-shrink: 0; display: inline-block; background: var(--inter-gold); color: var(--near-black); font: 800 12px/1em var(--font-base); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--duration-fast) var(--easing); }
.archive-insert-club .club-btn:hover { background: var(--inter-gold-dark); }

/* Sidebar alias */
#archiveAside { padding: var(--space-5); border-left: 1px solid var(--border-default); }

/* Pagination */
.archive-pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); flex-wrap: wrap; }
.archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-3); font: 600 13px/1em var(--font-base); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); transition: all var(--duration-fast) var(--easing); }
.archive-pagination .page-numbers:hover { color: var(--primary); border-color: var(--primary); }
.archive-pagination .page-numbers.current { background: var(--primary); color: #fff; border-color: var(--primary); }
.archive-pagination .page-numbers.dots { border: none; color: var(--text-tertiary); }

/* Mobile archive */
@media (max-width: 767px) {
  .archive-item { flex-direction: column; }
  .archive-item-img { width: 100%; }
  .archive-insert-yt { flex-direction: column; }
  .archive-insert-yt .yt-facade { width: 100%; }
  .archive-insert-club { flex-direction: column; text-align: center; }
  #archiveAside { display: none; }
}

/* Hamburger — hidden on desktop */
#menu-toggle { display: none !important; }

/* ============================================================
   TABLET — max-width: 1023px
   ============================================================ */
@media (max-width: 1023px) {
  .col-8 { width: 60%; }
  .col-4 { width: 40%; }
  .primo-piano-grid { grid-template-columns: 1fr 280px; }
  .litesuite-slide { width: 40%; }
  #header .header-top .box-link { display: none; }
}

/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

  /* Mobile ads */
  .pi-adv-mobile { display: block; }
  .pi-adv-desktop { display: none; }
  .adv-placeholder { display: none; }

  /* Layout */
  .col-3, .col-4, .col-6, .col-8 { width: 100%; }
  .row { flex-direction: column; }

  /* Header top */
  #header .header-top .box-link { display: none; }
  #header .box-right { margin-left: auto; }
  #header .social a { width: 30px; height: 30px; }
  #header .social a i { font-size: 13px; }
  #header .header-top .logo img { height: 32px; }

  /* Hamburger — in header-top box-right */
  #menu-toggle {
    display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: none; border-left: 1px solid var(--border-default);
    color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
  }
  #menu-toggle i { font-size: 20px; }
  #menu-toggle[aria-expanded="true"] i::before { content: "\f00d"; }

  /* Hide social icons on mobile, show only first 2 */
  #header .social a:nth-child(n+3) { display: none; }

  /* Mobile nav — hidden until toggled */
  ul#menu-main-menu {
    display: none !important; flex-direction: column; width: 100%;
    position: absolute; top: 100%; left: 0; z-index: 200;
    background: var(--near-black); border-top: 1px solid var(--border-default);
    border-bottom: 2px solid var(--primary);
  }
  ul#menu-main-menu.is-open { display: flex !important; }
  ul#menu-main-menu li { flex-grow: unset; text-align: left; border-right: none; border-bottom: 1px solid var(--border-default); }
  ul#menu-main-menu li:first-child { border-left: none; }
  ul#menu-main-menu li a { justify-content: flex-start; padding: 0 var(--space-4); height: 48px; font-size: 13px; }
  ul#menu-main-menu li::before { display: none; }
  .header-nav { position: relative; }
  .mega-menu { flex-wrap: nowrap; justify-content: space-between; }
  .menu-search-btn { display: none; }

  /* Masthead */
  .masthead-block { min-height: 70px; padding: var(--space-3) 0; }

  /* Video carousel */
  .litesuite-slide { width: 76%; }
  .litesuite-slides { padding: 0 2rem; gap: var(--space-3); }
  .litesuite-slide__prev, .litesuite-slide__next { width: 2rem; height: 2rem; font-size: 14px; }

  /* Primo piano */
  .home-evidence { padding: var(--space-4); }
  .primo-piano-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .primo-piano-hero a.hero-img-link img { min-height: 180px; }
  .primo-piano-hero h3 a { font-size: 20px; line-height: 1.25em; }

  /* Category grid */
  .category-news-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "news-0" "news-1" "news-2" "news-3" "news-4";
    padding: 0 var(--space-4) var(--space-6);
  }
  .category-news-grid .slot { display: none; }

  /* Sidebar — hidden on mobile */
  #homeAside, #articleAside { display: none; }

  /* YT section */
  .yt-section { padding: var(--space-5) var(--space-4); }
  .yt-featured { grid-template-columns: 1fr; gap: var(--space-4); }
  .yt-compact { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .yt-facade-sm { width: 100%; }

  /* Club strip */
  .club-strip { padding: var(--space-5) var(--space-4); }
  .club-strip-inner { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
  .club-plans { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
  .club-plans-sep { display: none; }
  .club-plan { min-width: 90px; }

  /* Newsletter */
  .newsletter-strip { padding: var(--space-5) var(--space-4); }
  .newsletter-inner { flex-direction: column; gap: var(--space-4); text-align: center; }
  .newsletter-icon { display: none; }
  .newsletter-form-wrap { width: 100%; }
  .newsletter-form { flex-direction: column; gap: var(--space-2); }
  .newsletter-form input[type="email"] { width: 100%; }
  .newsletter-form button { width: 100%; padding: var(--space-3) var(--space-4); }

  /* Footer */
  #footer .container > .row { gap: var(--space-5); padding-bottom: var(--space-5); }
  #footer [style*="padding-left:32px"], #footer [style*="padding-left: 32px"] { padding-left: 0 !important; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; padding: var(--space-4) 0; }

  /* Article */
  .article-wrap { padding: var(--space-4) var(--space-3); }
  .article-title { font-size: 24px; line-height: 1.2em; }
  .article-subtitle { font-size: 16px; line-height: 1.5em; }
  .article-body { font-size: 16px; line-height: 1.7em; }
  .discovery-cta { flex-direction: column; text-align: center; }
  .discovery-btn { align-self: center; }
  .in-article-yt { flex-direction: column; }
  .in-article-yt .yt-thumb { width: 100%; }
  .in-article-club { flex-direction: column; text-align: center; }
  .article-nav { grid-template-columns: 1fr; }
  .author-bio { flex-direction: column; align-items: center; text-align: center; }
  .ps-widget--article_end { flex-direction: column; text-align: center; }
  .ps-widget--article_end .ps-widget-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   PREFERRED SOURCES CTA
   ============================================================ */

/* Base pill button (header + modal + widget CTA) */
.ps-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1a73e8; color: #fff; border: none;
  border-radius: 6px; padding: 9px 16px;
  font: 700 12px/1em var(--font-base); text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}
.ps-btn:hover { background: #1557b0; color: #fff; box-shadow: 0 2px 8px rgba(26,115,232,.4); }
.ps-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Header variant */
.ps-btn--header { padding: 5px 10px; font-size: 11px; border-radius: 4px; }
.ps-btn--header .ps-btn-label { display: none; }

/* Widget card — article_end */
.ps-widget--article_end {
  display: flex; align-items: center; gap: var(--space-4);
  background: linear-gradient(135deg, #0d1b2e 0%, #1a3a5c 100%);
  border: 1px solid rgba(26,115,232,.4); border-radius: var(--radius-md);
  padding: var(--space-5); margin: var(--space-5) 0;
}
.ps-widget--article_end .ps-widget-glogo { flex-shrink: 0; }
.ps-widget--article_end .ps-widget-body { flex: 1; }
.ps-widget--article_end .ps-widget-body strong { display: block; font: 700 15px/1.3em var(--font-base); color: #fff; margin-bottom: 4px; }
.ps-widget--article_end .ps-widget-body span { font: 400 13px/1.5em var(--font-base); color: rgba(255,255,255,.7); }
.ps-widget--article_end .ps-widget-cta { flex-shrink: 0; }

/* Widget card — sidebar */
.ps-widget--sidebar {
  display: flex; align-items: center; gap: var(--space-3);
  background: linear-gradient(135deg, #0d1b2e 0%, #1a3a5c 100%);
  border: 1px solid rgba(26,115,232,.4); border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-4) 0;
}
.ps-widget--sidebar .ps-widget-body { flex: 1; }
.ps-widget--sidebar .ps-widget-body strong { display: block; font: 700 12px/1.3em var(--font-base); color: #fff; margin-bottom: 3px; }
.ps-widget--sidebar .ps-widget-body span { font: 400 11px/1.4em var(--font-base); color: rgba(255,255,255,.65); }
.ps-widget--sidebar .ps-btn { font-size: 11px; padding: 7px 12px; }

/* Modal */
.ps-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.ps-modal[hidden] { display: none; }
.ps-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.ps-modal-inner {
  position: relative; background: #fff; border-radius: 12px;
  padding: var(--space-7) var(--space-6); max-width: 380px; width: calc(100% - 32px);
  text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.ps-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; font-size: 16px; color: #70757a; }
.ps-modal-close:hover { color: #202124; }
.ps-modal-inner h3 { font: 700 20px/1.3em var(--font-base); color: #202124; margin: 0; }
.ps-modal-inner p { font: 400 14px/1.6em var(--font-base); color: #5f6368; margin: 0; }
.ps-btn--modal { font-size: 14px; padding: 12px 22px; }
body.ps-modal-open { overflow: hidden; }