/*
Theme Name: Preme Sports
Theme URI: https://premefootball.com
Description: Custom Astra child theme for Preme Sports. ESPN-density meets Bleacher-Report social energy. Scarlet on charcoal, IG-graphic display type, per-team accent system. Built by Corestack Agency.
Author: Corestack Agency
Author URI: https://corestackagency.com
Template: astra
Version: 1.0.0
Text Domain: preme-sports
*/

/* ============================================================
   LOCAL FONTS (no Google CDN — speed + privacy, per client rule)
   ============================================================ */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
}

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  /* Core palette */
  --preme-charcoal:      #0B0D12;   /* page background */
  --preme-panel:         #06070A;   /* deeper panels */
  --preme-surface:       #14171F;   /* cards */
  --preme-surface-2:     #1B1F29;   /* raised cards / hover */
  --preme-scarlet:       #D7263D;   /* primary brand */
  --preme-scarlet-hi:    #F13B51;   /* hover/active */
  --preme-green:         #1FC24E;   /* logo accent — wins / up / live (semantic only) */
  --preme-green-dim:     #159A3C;

  /* Text */
  --preme-text:          #F4F5F8;   /* primary text (~0.95) */
  --preme-text-soft:     rgba(244,245,248,0.86);
  --preme-text-meta:     #8A91A0;   /* metadata only */
  --preme-hairline:      rgba(255,255,255,0.10);
  --preme-hairline-2:    rgba(255,255,255,0.06);

  /* Type */
  --preme-display: 'Anton', 'Arial Narrow', sans-serif;
  --preme-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --preme-oblique: -7deg;          /* IG-graphic forward slant for headlines */

  /* Rhythm */
  --preme-maxw:    1200px;
  --preme-gap:     clamp(16px, 3vw, 28px);
  --preme-radius:  4px;            /* sharp, sports-media, not bubbly */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--preme-charcoal);
  color: var(--preme-text);
  font-family: var(--preme-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--preme-text); }
a:hover { color: var(--preme-scarlet-hi); }

/* Display headlines — the "IG graphic became a website" north star */
.preme-display,
.entry-title,
.ast-single-post .entry-title,
h1.page-title,
.preme-hero__title {
  font-family: var(--preme-display);
  font-weight: 400;               /* Anton is single-weight */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 0.92;
  transform: skewX(var(--preme-oblique));
  transform-origin: left bottom;
}
/* Un-skew inner text so glyphs stay upright inside a skewed block where needed */
.preme-display > span { display: inline-block; transform: skewX(calc(-1 * var(--preme-oblique))); }

/* Eyebrow / section label — Barlow-condensed feel via letterspacing */
.preme-eyebrow {
  font-family: var(--preme-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 12px;
  color: var(--preme-scarlet);
}

/* Scarlet "tape bar" highlight behind a word (IG style) */
.preme-tape {
  background: var(--preme-scarlet);
  color: #fff;
  padding: 0 .28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============================================================
   PER-TEAM ACCENT SYSTEM
   Body gets .team-{slug}; --team-accent cascades into chips,
   category labels, hover rules on that team's pages.
   Default falls back to scarlet.
   ============================================================ */
:root { --team-accent: var(--preme-scarlet); }

.preme-cat-chip,
.preme-team-chip {
  display: inline-block;
  font-family: var(--preme-body);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--preme-radius);
  background: var(--team-accent);
  color: #fff;
}

.preme-cat-chip--ghost {
  background: transparent;
  color: var(--team-accent);
  box-shadow: inset 0 0 0 1.5px var(--team-accent);
}

/* ============================================================
   RESPONSIVE / A11Y FLOOR
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--preme-scarlet-hi); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.preme-wrap { max-width: var(--preme-maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
.preme-main { display: block; }
.preme-skip { position:absolute; left:-9999px; }
.preme-skip:focus { left:12px; top:12px; z-index:100; background:var(--preme-scarlet); color:#fff; padding:8px 14px; border-radius:var(--preme-radius); }

/* ============================================================
   HEADER
   ============================================================ */
.preme-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,13,18,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--preme-hairline);
}
.preme-header.is-scrolled { background: rgba(6,7,10,0.96); }
.preme-header__inner {
  max-width: var(--preme-maxw); margin: 0 auto;
  padding: 0 clamp(16px,4vw,32px);
  height: 64px; display: flex; align-items: center; gap: 24px;
}
.preme-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.preme-brand__mark { height: 34px; width: auto; display: block; }
.preme-brand__word { font-family: var(--preme-display); font-size: 22px; line-height: 1; color: var(--preme-text); transform: skewX(var(--preme-oblique)); text-transform: uppercase; letter-spacing: .5px; }
.preme-brand__word--accent { color: var(--preme-scarlet); margin-left: -2px; }
.preme-brand__word > span { display: inline-block; }

.preme-nav { margin-left: auto; }
.preme-nav__list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; align-items: center; }
.preme-nav__list a { text-decoration: none; color: var(--preme-text-soft); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; padding: 6px 0; position: relative; white-space: nowrap; }
.preme-nav__list a:hover { color: #fff; }
.preme-nav__list .current-menu-item > a,
.preme-nav__list a:hover::after { color: #fff; }
.preme-nav__list a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--preme-scarlet); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.preme-nav__list a:hover::after, .preme-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.preme-header__actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.preme-icon-btn { background: none; border: 0; color: var(--preme-text-soft); padding: 8px; cursor: pointer; display: grid; place-items: center; border-radius: var(--preme-radius); }
.preme-icon-btn:hover { color: #fff; background: var(--preme-surface-2); }
.preme-nav-toggle { display: none; }

.preme-search { max-height: 0; overflow: hidden; transition: max-height .2s ease; border-top: 0 solid var(--preme-hairline); }
body.preme-search-open .preme-search { max-height: 80px; border-top-width: 1px; }
.preme-search { display: flex; }
.preme-search form, .preme-search { }
.preme-search { padding: 0; }
body.preme-search-open .preme-search { padding: 12px clamp(16px,4vw,32px); }
.preme-search input { flex: 1; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text); padding: 12px 14px; border-radius: var(--preme-radius); font-size: 15px; }
.preme-search button { background: var(--preme-scarlet); color: #fff; border: 0; padding: 0 18px; margin-left: 8px; border-radius: var(--preme-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
.preme-hero { position: relative; min-height: clamp(440px, 60vh, 600px); display: flex; align-items: flex-end; background-image: var(--hero-img); background-size: cover; background-position: center 22%; }
/* ESPN-style: all hero text sits on a strong near-solid gradient band anchored to the bottom */
.preme-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(0deg, rgba(6,7,10,.99) 0%, rgba(6,7,10,.97) 30%, rgba(6,7,10,.85) 46%, rgba(6,7,10,.52) 64%, rgba(6,7,10,.14) 86%, rgba(6,7,10,0) 100%),
  linear-gradient(90deg, rgba(6,7,10,.92) 0%, rgba(6,7,10,.72) 28%, rgba(6,7,10,.34) 52%, rgba(6,7,10,.05) 76%, rgba(6,7,10,0) 90%),
  linear-gradient(rgba(6,7,10,.46), rgba(6,7,10,.46)); } /* uniform shade — keeps white text readable over ANY photo (WCAG scrim technique) */
.preme-hero__inner { position: relative; max-width: var(--preme-maxw); margin: 0 auto; width: 100%; padding: 0 clamp(16px,4vw,32px) clamp(28px,5vw,52px); }
.preme-hero__chip { margin-bottom: 12px; }
.preme-hero__title { font-size: clamp(36px, 6vw, 78px); margin: 12px 0 14px; max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.6); }
.preme-hero__title a { color: #fff; text-decoration: none; }
.preme-hero__dek { max-width: 34ch; color: #fff; font-weight: 500; font-size: clamp(15px,1.4vw,18px); line-height: 1.5; margin: 0 0 16px; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.85); }
.preme-hero__title { max-width: 12ch; }
.preme-hero__meta { color: rgba(255,255,255,.9); font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.preme-hero__meta .preme-dot { color: var(--preme-scarlet); opacity: 1; }
.preme-hero .preme-eyebrow { text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.preme-hero__meta, .preme-card__meta { color: var(--preme-text-meta); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.preme-eyebrow + .preme-hero__chip { margin-left: 0; }
.preme-hero .preme-eyebrow { display: block; margin-bottom: 6px; }
.preme-dot { opacity: .6; }

/* ============================================================
   SECTIONS
   ============================================================ */
.preme-section { padding: clamp(36px,6vw,64px) 0; }
.preme-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--preme-scarlet); padding-bottom: 10px; }
.preme-section__title { font-size: clamp(26px,3.4vw,40px); }
.preme-section__title > span { display: inline-block; }
.preme-section__more { color: var(--preme-text-meta); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.preme-section__more:hover { color: var(--preme-scarlet-hi); }

/* ============================================================
   ARTICLE GRID + CARDS
   ============================================================ */
.preme-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px,2vw,24px); }
.preme-card { display: flex; flex-direction: column; background: var(--preme-surface); border: 1px solid var(--preme-hairline-2); border-radius: var(--preme-radius); overflow: hidden; min-width: 0; transition: transform .18s ease, border-color .18s ease; }
.preme-card:hover { transform: translateY(-3px); border-color: var(--preme-hairline); }
.preme-card--lg { grid-column: span 3; }
.preme-card--md { grid-column: span 2; }
.preme-card--sm { grid-column: span 2; }
.preme-card__media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--preme-panel); }
/* Whole photo always shows (contain); a blurred copy of the same photo fills the box so no faces get cropped, any shape */
.preme-card__media.has-img::before { content: ""; position: absolute; inset: 0; background: var(--card-img) center/cover no-repeat; filter: blur(20px) brightness(.5) saturate(1.1); transform: scale(1.2); z-index: 0; }
.preme-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.preme-card:hover .preme-card__media img { transform: scale(1.03); }
.preme-card .preme-cat-chip { position: absolute; left: 10px; top: 10px; z-index: 2; }
.preme-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.preme-card__title { font-family: var(--preme-body); font-weight: 800; line-height: 1.18; margin: 0; letter-spacing: -.01em; }
.preme-card--lg .preme-card__title { font-size: 22px; }
.preme-card--md .preme-card__title { font-size: 17px; }
.preme-card__title a { color: var(--preme-text); text-decoration: none; }
.preme-card__title a:hover { color: var(--preme-scarlet-hi); }
.preme-card__excerpt { color: var(--preme-text-soft); font-size: 14px; line-height: 1.5; margin: 0; }
.preme-card__meta { margin-top: auto; }

/* ============================================================
   PICK'EM TEASER
   ============================================================ */
.preme-pickem-teaser { background: linear-gradient(120deg, var(--preme-scarlet) 0%, #9e1628 100%); }
.preme-pickem-teaser__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.preme-pickem-teaser .preme-eyebrow { color: rgba(255,255,255,.8); }
.preme-pickem-teaser__title { font-size: clamp(30px,4.6vw,56px); color: #fff; margin: 6px 0 10px; }
.preme-pickem-teaser p { color: rgba(255,255,255,.92); max-width: 46ch; margin: 0; font-size: 16px; }
.preme-btn { display: inline-block; background: #0B0D12; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 14px 24px; border-radius: var(--preme-radius); }
.preme-btn:hover { background: #000; color: #fff; }
.preme-btn--lg { padding: 16px 30px; font-size: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.preme-footer { background: var(--preme-panel); border-top: 1px solid var(--preme-hairline); margin-top: 20px; }
.preme-footer__inner { max-width: var(--preme-maxw); margin: 0 auto; padding: clamp(32px,5vw,52px) clamp(16px,4vw,32px); display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.preme-footer__tag { color: var(--preme-text-meta); margin: 12px 0 0; max-width: 40ch; }
.preme-footer__list { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.preme-footer__list a { color: var(--preme-text-soft); text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.preme-footer__list a:hover { color: var(--preme-scarlet-hi); }
.preme-footer__bar { border-top: 1px solid var(--preme-hairline-2); padding: 16px clamp(16px,4vw,32px); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: var(--preme-maxw); margin: 0 auto; color: var(--preme-text-meta); font-size: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .preme-card--lg { grid-column: span 3; }
  .preme-card--md { grid-column: span 3; }
}
/* Drawer chrome hidden on desktop */
.preme-nav__head, .preme-nav__close, .preme-nav-backdrop { display: none; }

@media (max-width: 880px) {
  /* backdrop-filter creates a containing block that traps position:fixed children —
     drop it on mobile so the drawer + backdrop can fill the whole viewport */
  .preme-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,13,18,.98); }
  .preme-header__actions { margin-left: auto; }
  .preme-nav-toggle { display: grid; }

  /* Slide-in drawer from the right */
  .preme-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(82vw, 340px);
    background: var(--preme-panel); border-left: 1px solid var(--preme-hairline);
    margin: 0; padding: 0; transform: translateX(105%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 60; display: flex; flex-direction: column; overflow-y: auto;
    box-shadow: -20px 0 50px rgba(0,0,0,.5);
  }
  body.preme-nav-open .preme-nav { transform: translateX(0); }

  .preme-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--preme-hairline); }
  .preme-nav__label { font-family: var(--preme-body); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: var(--preme-text-meta); }
  .preme-nav__close { display: grid; place-items: center; background: none; border: 0; color: var(--preme-text); padding: 6px; cursor: pointer; border-radius: var(--preme-radius); }
  .preme-nav__close:hover { color: var(--preme-scarlet-hi); background: var(--preme-surface-2); }

  .preme-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 20px; }
  .preme-nav__list li { width: 100%; border-bottom: 1px solid var(--preme-hairline-2); }
  .preme-nav__list a { display: block; padding: 15px 22px; font-size: 15px; letter-spacing: 1px; }
  .preme-nav__list a::after { display: none; }
  .preme-nav__list .current-menu-item > a { color: #fff; box-shadow: inset 3px 0 0 var(--preme-scarlet); }

  /* Backdrop */
  .preme-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(6,7,10,.6); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; z-index: 55; }
  body.preme-nav-open .preme-nav-backdrop { opacity: 1; visibility: visible; }
}
@media (max-width: 720px) {
  .preme-grid { grid-template-columns: repeat(2, 1fr); }
  .preme-card--lg, .preme-card--md, .preme-card--sm { grid-column: span 1; }
  .preme-brand__word { font-size: 18px; }
}
@media (max-width: 460px) {
  .preme-grid { grid-template-columns: 1fr; }
  .preme-card--lg, .preme-card--md, .preme-card--sm { grid-column: span 1; }
}

/* ============================================================
   MOTION LAYER
   ============================================================ */
/* Hero background slow ken-burns */
.preme-hero { overflow: hidden; }
.preme-hero::before {
  content: ""; position: absolute; inset: -4%;
  background-image: var(--hero-img); background-size: cover; background-position: center 30%;
  animation: preme-kenburns 22s ease-in-out infinite alternate;
  z-index: 0;
}
.preme-hero > * { position: relative; z-index: 1; }
@keyframes preme-kenburns { from { transform: scale(1.01) translateY(0); } to { transform: scale(1.06) translateY(-1%); } }

/* Hero content staggered load-in */
.preme-hero__inner > * { opacity: 0; transform: translateY(18px); animation: preme-riseIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.preme-hero__inner > *:nth-child(1) { animation-delay: .05s; }
.preme-hero__inner > *:nth-child(2) { animation-delay: .13s; }
.preme-hero__inner > *:nth-child(3) { animation-delay: .21s; }
.preme-hero__inner > *:nth-child(4) { animation-delay: .30s; }
.preme-hero__inner > *:nth-child(5) { animation-delay: .38s; }
@keyframes preme-riseIn { to { opacity: 1; transform: translateY(0); } }

/* Scroll-reveal — progressive enhancement: hidden ONLY when JS confirmed (.preme-js).
   Without JS (or if observer fails) content stays visible. */
.preme-reveal { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.preme-js .preme-reveal { opacity: 0; transform: translateY(26px); }
.preme-js .preme-reveal.is-in { opacity: 1; transform: none; }

/* Section title accent wipe on reveal */
.preme-section__head.preme-reveal { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .preme-hero::before { animation: none; }
  .preme-hero__inner > *, .preme-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   CONTRAST FIXES — force near-white lettering over dark,
   override Astra's inherited dark heading colors. Only true
   metadata stays dim.
   ============================================================ */
.preme-main h1, .preme-main h2, .preme-main h3, .preme-main h4,
.preme-section__title, .preme-hero__title, .preme-hero__title a,
.preme-card__title, .preme-card__title a { color: var(--preme-text); }
.preme-brand__word { color: var(--preme-text); }        /* keep brand base white */
.preme-brand__word--accent { color: var(--preme-scarlet); }  /* re-assert accent */
.preme-pickem-teaser__title, .preme-pickem-teaser__title span { color: #fff; }
.preme-section__more { color: #c4c9d4; }                 /* was too dim */
.preme-hero__dek, .preme-card__excerpt { color: var(--preme-text-soft); }
body, .preme-main, .preme-card__title, .preme-section__title {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}

/* Branded placeholder for posts with no featured image (no flat dark box) */
.preme-card__ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(215,38,61,.35), transparent 55%),
    linear-gradient(135deg, #14171F 0%, #0B0D12 100%);
}
.preme-card__ph::after {
  content: ""; position: absolute; inset: 0;
  background: url('assets/logo-mark.png') center/34px no-repeat;
  opacity: .16;
}

/* Sticky-shrink header (research move #3) */
.preme-header__inner { transition: height .22s cubic-bezier(.4,0,.2,1); }
.preme-header.is-scrolled .preme-header__inner { height: 54px; }
.preme-brand__mark, .preme-brand__word { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.preme-header.is-scrolled .preme-brand__mark { transform: scale(.85); }
.preme-header.is-scrolled .preme-brand__word { transform: skewX(var(--preme-oblique)) scale(.92); }

/* Byline legibility — was too gray */
.preme-card__meta { color: #9aa1b0; font-weight: 500; }
.preme-card__author { color: #c9cdd6; font-weight: 600; }

/* ============================================================
   WATCH / YOUTUBE SECTION
   ============================================================ */
/* Vertical Shorts shelf — matches his vertical clips; 9:16 cover crops out YouTube's black side-bars */
.preme-shorts { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px,1.4vw,18px); }
.preme-short { position: relative; display: block; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; text-decoration: none; background: #000 var(--vid) center/cover no-repeat; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.preme-short::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 50%, rgba(0,0,0,.9) 100%); }
.preme-short:hover { transform: translateY(-4px); }
.preme-short__play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(11,13,18,.5); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); color: #fff; display: grid; place-items: center; transition: transform .22s cubic-bezier(.4,0,.2,1), background .22s ease; }
.preme-short__play svg { margin-left: 2px; }
.preme-short:hover .preme-short__play { transform: translate(-50%,-50%) scale(1.12); background: var(--preme-scarlet); box-shadow: none; }
.preme-short__title { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; color: #fff; font-weight: 600; font-size: 13px; line-height: 1.28; text-transform: none; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
/* mobile: horizontal snap-scroll shelf */
@media (max-width: 1024px){ .preme-shorts { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(150px, 34%); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin: 0 calc(-1 * clamp(16px,4vw,32px)); padding-left: clamp(16px,4vw,32px); padding-right: clamp(16px,4vw,32px); }
  .preme-short { scroll-snap-align: start; } }
@media (max-width: 560px){ .preme-shorts { grid-auto-columns: 46%; } }

/* Hero byline — bright white (was too gray), high specificity to beat base meta color */
.preme-hero .preme-hero__meta,
.preme-hero .preme-hero__meta span,
.preme-hero .preme-hero__meta time { color: #fff; font-weight: 600; }
.preme-hero .preme-hero__meta .preme-dot { color: var(--preme-scarlet); }

/* "Read more" links replace bare ellipses */
.preme-card__more {
  align-self: flex-start; margin-top: 2px; color: var(--preme-scarlet-hi);
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none;
}
.preme-card__more span { display: inline-block; transition: transform .18s ease; }
.preme-card__more:hover { color: #fff; }
.preme-card__more:hover span { transform: translateX(3px); }

.preme-hero__more {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.preme-hero__more span { color: var(--preme-scarlet-hi); display: inline-block; transition: transform .18s ease; }
.preme-hero__more:hover { color: var(--preme-scarlet-hi); }
.preme-hero__more:hover span { transform: translateX(3px); }

/* YouTube-style channel bar above the Shorts shelf */
.preme-yt-channel { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.preme-yt-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--preme-hairline); background: var(--preme-surface-2); }
.preme-yt-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preme-yt-name { font-weight: 800; font-size: 18px; line-height: 1.1; color: var(--preme-text); letter-spacing: -.01em; }
.preme-yt-sub { font-size: 13px; color: var(--preme-text-meta); }
.preme-yt-sub .preme-dot { opacity: .6; }
.preme-yt-subscribe { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--preme-scarlet); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 999px; white-space: nowrap; transition: background .18s ease, transform .18s ease; }
.preme-yt-subscribe:hover { background: var(--preme-scarlet-hi); color: #fff; transform: translateY(-1px); }
@media (max-width: 520px){
  .preme-yt-name { font-size: 16px; }
  .preme-yt-subscribe { padding: 9px 16px; font-size: 13px; }
  .preme-yt-subscribe svg { display: none; }
}

/* ============================================================
   PICK'EM — "how it works" band (replaces the flat teaser)
   ============================================================ */
.preme-pickem { background: linear-gradient(120deg, var(--preme-scarlet) 0%, #9e1628 100%); position: relative; overflow: hidden; }
.preme-pickem::before { content: ""; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); font-family: var(--preme-display); }
.preme-pickem__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.preme-eyebrow--light { color: rgba(255,255,255,.85); }
.preme-pickem__title { font-size: clamp(30px,4.6vw,56px); color: #fff; margin: 6px 0 10px; }
.preme-pickem__lead { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.5; max-width: 48ch; margin: 0; }
.preme-pickem__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.preme-step { display: flex; gap: 14px; align-items: flex-start; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 18px 20px; }
.preme-step__n { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--preme-scarlet); font-family: var(--preme-display); font-size: 19px; display: grid; place-items: center; transform: skewX(var(--preme-oblique)); }
.preme-step__body strong { display: block; color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.preme-step__body span { display: block; color: rgba(255,255,255,.85); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 720px){ .preme-pickem__steps { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER — multi-column
   ============================================================ */
.preme-footer { background: var(--preme-panel); border-top: 1px solid var(--preme-hairline); margin-top: 0; }
.preme-footer__inner { max-width: var(--preme-maxw); margin: 0 auto; padding: clamp(40px,5vw,60px) clamp(16px,4vw,32px); display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.6fr; gap: clamp(24px,4vw,48px); }
.preme-footer__brandcol .preme-brand { margin-bottom: 14px; }
.preme-footer__tag { color: var(--preme-text-soft); margin: 0 0 14px; max-width: 34ch; font-size: 14px; line-height: 1.5; }
.preme-footer__cred { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: var(--preme-text-meta); margin-bottom: 18px; }
.preme-footer__creddot { width: 8px; height: 8px; border-radius: 50%; background: var(--preme-green); box-shadow: 0 0 8px var(--preme-green); }
.preme-footer__social { display: flex; gap: 10px; }
.preme-footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--preme-surface); color: var(--preme-text-soft); border: 1px solid var(--preme-hairline-2); transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; }
.preme-footer__social a:hover { background: var(--preme-scarlet); color: #fff; border-color: var(--preme-scarlet); transform: translateY(-2px); }
.preme-footer__h { font-family: var(--preme-body); text-transform: uppercase; letter-spacing: 1.4px; font-size: 12px; font-weight: 700; color: var(--preme-text-meta); margin: 0 0 15px; }
.preme-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.preme-footer__col a { color: var(--preme-text-soft); text-decoration: none; font-size: 14px; }
.preme-footer__col a:hover { color: var(--preme-scarlet-hi); }
.preme-footer__cta p { color: var(--preme-text-soft); font-size: 14px; line-height: 1.5; margin: 0 0 16px; max-width: 30ch; }
.preme-footer__discord { display: inline-flex; align-items: center; gap: 9px; background: var(--preme-green); color: #05140a; font-weight: 800; text-decoration: none; padding: 12px 18px; border-radius: 8px; font-size: 14px; transition: background .18s ease, transform .18s ease; }
.preme-footer__discord:hover { background: #29d95f; color: #05140a; transform: translateY(-2px); }
@media (max-width: 760px){ .preme-footer__inner { grid-template-columns: 1fr 1fr; } .preme-footer__brandcol { grid-column: span 2; } }
/* keep Sections + More side-by-side even on phones (fills the row, no dead space) */
@media (max-width: 460px){ .preme-news { max-width: 100%; } }

/* Footer newsletter + legal bar + colorful Corestack credit */
.preme-footer__newstxt { color: var(--preme-text-soft); font-size: 14px; line-height: 1.5; margin: 0 0 14px; max-width: 34ch; }
.preme-news { display: flex; gap: 8px; margin-bottom: 10px; max-width: 360px; }
.preme-news input { flex: 1; min-width: 0; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text); padding: 11px 13px; border-radius: var(--preme-radius); font-size: 14px; }
.preme-news input::placeholder { color: var(--preme-text-meta); }
.preme-news input:focus { outline: none; border-color: var(--preme-scarlet); }
.preme-news button { background: var(--preme-scarlet); color: #fff; border: 0; padding: 0 18px; border-radius: var(--preme-radius); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; white-space: nowrap; transition: background .18s ease; }
.preme-news button:hover { background: var(--preme-scarlet-hi); }
.preme-footer__newsnote { font-size: 12px; color: var(--preme-text-meta); }

.preme-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; }
.preme-footer__legal { display: flex; gap: 14px; align-items: center; }
.preme-footer__legal a { color: var(--preme-text-soft); text-decoration: none; font-size: 13px; font-weight: 600; }
.preme-footer__legal a:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--preme-text-meta); font-weight: 400; }
.preme-footer__legal a:hover { color: var(--preme-scarlet-hi); }
.preme-footer__cs { font-weight: 800; text-decoration: none; background: linear-gradient(90deg, #3ea8ff 0%, #8b5cff 50%, #f13b51 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.preme-footer__cs:hover { filter: brightness(1.18); }
@media (max-width: 760px){ .preme-footer__news { grid-column: span 2; } }
@media (max-width: 460px){ .preme-footer__news { grid-column: span 2; } }

/* ============================================================
   PAGE / PROSE — readable long-form content on dark
   ============================================================ */
.preme-wrap--narrow { max-width: 780px; }
.preme-page { padding: clamp(30px,5vw,54px) 0 clamp(48px,7vw,80px); }
.preme-page__head { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--preme-scarlet); }
.preme-page__title { font-size: clamp(30px,5vw,52px); color: var(--preme-text); }
.preme-page__meta { color: var(--preme-text-meta); font-size: 13px; margin: 12px 0 0; }

.preme-prose { color: var(--preme-text-soft); font-size: 16.5px; line-height: 1.75; }
.preme-prose > * + * { margin-top: 1.15em; }
.preme-prose p { color: var(--preme-text-soft); }
.preme-prose h2 { font-family: var(--preme-body); color: var(--preme-text); font-size: clamp(20px,2.4vw,26px); font-weight: 800; letter-spacing: -.01em; margin-top: 1.9em; line-height: 1.25; }
.preme-prose h3 { font-family: var(--preme-body); color: var(--preme-text); font-size: 18px; font-weight: 700; margin-top: 1.5em; }
.preme-prose a { color: var(--preme-scarlet-hi); text-decoration: underline; text-underline-offset: 2px; }
.preme-prose a:hover { color: #fff; }
.preme-prose ul, .preme-prose ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: .55em; }
.preme-prose li { color: var(--preme-text-soft); }
.preme-prose li::marker { color: var(--preme-scarlet); }
.preme-prose strong { color: var(--preme-text); font-weight: 700; }
.preme-prose em { color: var(--preme-text-meta); }
.preme-prose blockquote { border-left: 3px solid var(--preme-scarlet); padding: 4px 0 4px 18px; color: var(--preme-text-meta); font-style: italic; }
.preme-prose hr { border: 0; border-top: 1px solid var(--preme-hairline); margin: 2em 0; }
.preme-prose h2:first-child, .preme-prose h3:first-child { margin-top: 0; }

/* Force dark ground on all templates (Astra's container tried to paint pages light) */
body.preme { background: var(--preme-charcoal) !important; }
.preme-main { background: var(--preme-charcoal); min-height: 46vh; }

/* Social icons light up in each platform's brand color on hover */
.preme-footer__social a.soc--ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); border-color: transparent; color: #fff; }
.preme-footer__social a.soc--x:hover { background: #fff; border-color: #fff; color: #000; }
.preme-footer__social a.soc--fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.preme-footer__social a.soc--yt:hover { background: #FF0000; border-color: #FF0000; color: #fff; }

/* Bigger footer brand (fills the space above it) */
.preme-footer__brandcol .preme-brand { gap: 12px; margin-bottom: 16px; }
.preme-footer__brandcol .preme-brand__mark { height: 48px; }
.preme-footer__brandcol .preme-brand__word { font-size: 32px; }

/* ---------- SOCIAL band (IG + X follow cards; IG upgrades to live feed) ---------- */
.preme-social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,22px); }
.preme-social__card {
	display: flex; align-items: center; gap: 18px;
	padding: clamp(18px,2.4vw,26px);
	background: var(--preme-panel, #06070A);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 16px; text-decoration: none;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.preme-social__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.preme-social__icon { flex: none; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.07); transition: background .25s ease, color .25s ease, transform .25s ease; }
.preme-social__icon svg { width: 30px; height: 30px; }
/* Colorful by default (each platform's real brand look) */
.preme-social__card--ig .preme-social__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); color: #fff; }
.preme-social__card--x .preme-social__icon { background: #fff; color: #000; }
.preme-social__card:hover .preme-social__icon { transform: scale(1.05); }
.preme-social__body { flex: 1 1 auto; min-width: 0; }
.preme-social__plat { display: block; font-family: var(--preme-display); font-size: 23px; letter-spacing: .5px; color: #fff; line-height: 1; }
.preme-social__handle { display: block; color: var(--preme-scarlet-hi, #ff5268); font-weight: 700; font-size: 13px; margin: 5px 0 8px; }
.preme-social__desc { margin: 0; color: #c4c9d4; font-size: 14px; line-height: 1.45; }
.preme-social__cta { flex: none; align-self: center; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; white-space: nowrap; }
.preme-social__card--ig:hover { border-color: transparent; background: linear-gradient(120deg, rgba(214,36,159,.16), rgba(40,90,235,.10)); }
.preme-social__card--ig:hover .preme-social__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); }
.preme-social__card--x:hover { border-color: rgba(255,255,255,.55); }
.preme-social__card--x:hover .preme-social__icon { background: #fff; color: #000; }
.preme-social__card:hover .preme-social__handle { color: #fff; }
@media (max-width: 640px){
	.preme-social__grid { grid-template-columns: 1fr; }
	.preme-social__card { gap: 14px; }
	.preme-social__cta { align-self: flex-start; }
}

/* ============================================================
   ARTICLE (single.php) — ESPN 3-zone layout
   ============================================================ */
:root { --preme-measure: 680px; --preme-rail-w: 300px; --preme-share-w: 64px; --preme-art-gutter: 40px; --preme-sticky-top: 84px; }

.preme-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--preme-scarlet); transform: scaleX(0); transform-origin: left; z-index: 200; transition: transform .06s linear; }

/* Breaking strip */
.preme-breaking { background: var(--preme-panel); border-bottom: 1px solid var(--preme-hairline); }
.preme-breaking__inner { max-width: var(--preme-maxw); margin: 0 auto; padding: 10px clamp(16px,4vw,24px); display: flex; align-items: center; gap: 14px; }
.preme-breaking__tag { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--preme-scarlet); color: #fff; font-family: var(--preme-display); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; padding: 4px 10px; border-radius: 3px; }
.preme-breaking__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: preme-pulse 1.4s infinite; }
@keyframes preme-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.preme-breaking__viewport { flex: 1; overflow: hidden; min-width: 0; }
.preme-breaking__track { display: inline-flex; align-items: center; white-space: nowrap; animation: preme-marquee 38s linear infinite; will-change: transform; }
.preme-breaking__track > span { display: inline-flex; align-items: center; }
.preme-breaking:hover .preme-breaking__track { animation-play-state: paused; }
.preme-breaking__track a { color: var(--preme-text-soft); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; margin-right: 4px; }
.preme-breaking__track a:hover { color: var(--preme-scarlet-hi); }
.preme-breaking__sep { color: var(--preme-scarlet); font-size: 8px; margin: 0 14px; }
@keyframes preme-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .preme-breaking__dot { animation: none; } .preme-breaking__track { animation: none; } }

/* 3-zone grid */
.preme-art { padding: clamp(20px,3vw,32px) 0 clamp(48px,6vw,72px); }
.preme-art__grid { display: grid; grid-template-columns: var(--preme-share-w) minmax(0,1fr) var(--preme-rail-w); grid-template-areas: "share main rail"; column-gap: var(--preme-art-gutter); max-width: var(--preme-maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,24px); }
.preme-art__sharecol { grid-area: share; }
.preme-art__main { grid-area: main; min-width: 0; }
.preme-art__rail { grid-area: rail; }
.preme-art__read { max-width: var(--preme-measure); }

/* left share rail */
.preme-share-rail { position: sticky; top: var(--preme-sticky-top); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.preme-share-rail__label { font-family: var(--preme-display); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; color: var(--preme-text-meta); writing-mode: vertical-rl; margin-bottom: 4px; }
.preme-sbtn { box-sizing: border-box; padding: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--preme-hairline); color: var(--preme-text); cursor: pointer; transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease; text-decoration: none; }
.preme-sbtn:hover { transform: translateY(-2px); }
.preme-sbtn--x:hover { background:#fff; color:#000; border-color:#fff; }
.preme-sbtn--fb:hover { background:#1877F2; color:#fff; border-color:#1877F2; }
.preme-sbtn--ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); color:#fff; border-color: transparent; }
.preme-sbtn--copy:hover { background: var(--preme-scarlet); color:#fff; border-color: var(--preme-scarlet); }
.preme-sbtn--copy.is-copied { background: var(--preme-green); color:#fff; border-color: var(--preme-green); }
.preme-sbtn--native { display: none; }

/* inline mobile share bar (ESPN puts a simple Share row under the byline) */
.preme-art__mshare { display: none; align-items: center; gap: 8px; margin: 16px 0 0; padding: 13px 0; border-bottom: 1px solid var(--preme-hairline); }
.preme-art__mshare-label { font-family: var(--preme-display); text-transform: uppercase; letter-spacing: .5px; font-size: 15px; color: var(--preme-text); margin-right: 4px; }
.preme-art__mshare .preme-sbtn--native { display: grid; }

/* header */
.preme-art__crumb { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: var(--preme-text-meta); display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.preme-art__crumb a { color: var(--preme-scarlet-hi); text-decoration: none; }
.preme-art__crumb a:first-child { color: var(--preme-text-meta); }
.preme-art__crumb a:hover { color: #fff; }
.preme-art__title { font-size: clamp(30px,4.6vw,48px); color:#fff; margin:0; }
.preme-art__dek { font-size: clamp(17px,1.9vw,21px); line-height: 1.5; color: var(--preme-text-soft); margin: 16px 0 0; }
.preme-art__byline { display:flex; align-items:center; gap:12px; margin:20px 0 0; padding:16px 0; border-top:1px solid var(--preme-hairline); border-bottom:1px solid var(--preme-hairline); }
.preme-art__avatar { width:44px; height:44px; border-radius:50%; flex:none; }
.preme-art__author { color: var(--preme-text); font-weight:700; text-decoration:none; font-size:15px; display:block; }
.preme-art__author:hover { color: var(--preme-scarlet-hi); }
.preme-art__sub { color: var(--preme-text-meta); font-size:13px; }
.preme-art__sub .preme-dot { margin:0 6px; }

/* hero */
.preme-art__hero { margin: clamp(20px,3vw,28px) 0; }
.preme-art__hero img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; border-radius:10px; }
.preme-art__hero figcaption { font-size:13px; line-height:1.45; color: var(--preme-text-meta); margin-top:8px; padding-left:10px; border-left:2px solid var(--preme-scarlet); }

/* body prose (article overrides) */
.preme-art__body { font-size:18px; line-height:1.7; color: var(--preme-text); }
.preme-art__body p { color: var(--preme-text); margin:0 0 22px; }
.preme-art__body > p:first-of-type { font-size:1.1em; line-height:1.6; color:#fff; }
.preme-art__body h2 { font-family: var(--preme-display); text-transform:uppercase; letter-spacing:.5px; font-weight:400; color:#fff; font-size: clamp(24px,3vw,32px); line-height:1.05; margin:1.8em 0 .5em; padding-top:.6em; border-top:1px solid var(--preme-hairline); }
.preme-art__body h3 { font-family: var(--preme-body); font-weight:800; color:#fff; font-size: clamp(19px,2.2vw,22px); margin:1.5em 0 .4em; }
.preme-art__body figure { margin:1.8em 0; }
.preme-art__body img { border-radius:8px; height:auto; }
.preme-art__body figcaption { font-size:13px; line-height:1.45; color: var(--preme-text-meta); margin-top:8px; padding-left:10px; border-left:2px solid var(--preme-scarlet); }
.preme-art__body blockquote:not(.twitter-tweet) { font-weight:700; font-size: clamp(20px,2.4vw,24px); line-height:1.35; color:#fff; border-left:4px solid var(--preme-scarlet); padding:4px 0 4px 22px; margin:1.4em 0; }
.preme-art__body a { color: var(--preme-scarlet-hi); text-decoration: underline; text-underline-offset:2px; }
.preme-art__body a:hover { color:#fff; }
.preme-art__body ul, .preme-art__body ol { padding-left:1.35em; margin:1.2em 0; display:flex; flex-direction:column; gap:.5em; }
.preme-art__body li { color: var(--preme-text); }
.preme-art__body li::marker { color: var(--preme-scarlet); }
.preme-art__body .wp-block-table, .preme-art__body figure.wp-block-table { overflow-x:auto; }
.preme-art__body table { width:100%; border-collapse:collapse; font-size:15px; margin:1.6em 0; }
.preme-art__body thead th { background: var(--preme-surface-2); color:#fff; text-transform:uppercase; font-size:12px; letter-spacing:.5px; padding:10px 12px; text-align:left; }
.preme-art__body td { padding:10px 12px; border-bottom:1px solid var(--preme-hairline); }
.preme-art__body tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.preme-art__body iframe { max-width:100%; }
.preme-art__body .twitter-tweet, .preme-art__body .instagram-media { margin:1.6em auto !important; }

/* inline injected modules */
.preme-inline { margin: 1.4em 0; }
.preme-inline__kicker { display:block; font-family: var(--preme-display); text-transform:uppercase; letter-spacing:.5px; font-size:14px; color: var(--preme-text-meta); }
.preme-inline--related { float: right; width: 300px; max-width: 100%; margin: 6px 0 18px 22px; background: var(--preme-surface); border:1px solid var(--preme-hairline); border-radius:10px; padding:16px 18px; }
.preme-inline--related .preme-inline__kicker { color: var(--preme-scarlet-hi); }
.preme-inline--related ul { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.preme-inline--related a { color: var(--preme-text); font-weight:700; font-size:15px; line-height:1.3; text-decoration:none; }
.preme-inline--related a:hover { color: var(--preme-scarlet-hi); }
.preme-inline--pickem { clear:both; background: linear-gradient(120deg, rgba(31,194,78,.14), rgba(31,194,78,.04)); border:1px solid rgba(31,194,78,.4); border-radius:12px; padding:20px 22px; }
.preme-inline--pickem .preme-inline__kicker { color: var(--preme-green); }
.preme-inline__txt { margin:6px 0 14px; color: var(--preme-text-soft); font-size:16px; line-height:1.5; }

/* buttons */
.preme-btn { display:inline-flex; align-items:center; gap:8px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:13px; padding:11px 18px; border-radius:6px; text-decoration:none; background: var(--preme-scarlet); color:#fff; border:0; cursor:pointer; transition: background .18s ease, transform .18s ease; }
.preme-btn:hover { background: var(--preme-scarlet-hi); color:#fff; transform: translateY(-1px); }
.preme-btn--green { background: var(--preme-green); }
.preme-btn--green:hover { background: #24d659; }
.preme-btn--block { display:flex; justify-content:center; width:100%; }

/* video facade — small badge, never covers the frame */
.preme-pv { cursor:pointer; }
.preme-pv__thumb { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#04060a; }
.preme-pv__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease, opacity .3s ease; }
.preme-pv:hover .preme-pv__thumb img { transform: scale(1.04); opacity:.85; }
.preme-pv__badge { position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%; background: rgba(215,38,61,.94); box-shadow:0 4px 14px rgba(0,0,0,.45); transition: transform .15s ease, background .15s ease; }
.preme-pv__badge::after { content:""; position:absolute; inset:0; margin:auto; width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color: transparent transparent transparent #fff; transform: translateX(2px); }
.preme-pv:hover .preme-pv__badge { transform: scale(1.08); background: var(--preme-scarlet-hi); }
.preme-pv__title { font-weight:700; font-size:14px; line-height:1.35; color: var(--preme-text); margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.preme-pv--inline { margin: 1.8em 0; }
.preme-pv--inline .preme-pv__badge { width:64px; height:64px; }
.preme-pv--inline .preme-pv__badge::after { border-width:12px 0 12px 20px; }
.preme-pv-embed { margin: 1.8em 0; }

/* tags, foot, author */
.preme-art__tags { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
.preme-tag { font-size:13px; font-weight:600; color: var(--preme-text-soft); background: var(--preme-surface); border:1px solid var(--preme-hairline); padding:6px 12px; border-radius:999px; text-decoration:none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.preme-tag:hover { background: var(--preme-scarlet); color:#fff; border-color: var(--preme-scarlet); }
.preme-art__foot { display:flex; justify-content:flex-end; margin:22px 0 0; padding:16px 0; border-top:1px solid var(--preme-hairline); }
.preme-totop { background:none; border:0; color: var(--preme-text-meta); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:12px; cursor:pointer; }
.preme-totop:hover { color: var(--preme-scarlet-hi); }
.preme-author { display:flex; gap:18px; align-items:flex-start; background: var(--preme-surface); border:1px solid var(--preme-hairline); border-radius:12px; padding: clamp(18px,2.4vw,24px); margin:26px 0 0; }
.preme-author__avatar { width:64px; height:64px; border-radius:50%; flex:none; }
/* branded initials avatar (fallback when a writer has no photo yet) */
.preme-mono { display:inline-grid; place-items:center; border-radius:50%; background:var(--preme-scarlet); color:#fff; font-family:var(--preme-display); line-height:1; flex:none; letter-spacing:.5px; }
img.preme-avatar { border-radius:50%; object-fit:cover; }
.preme-author__body { display:flex; flex-direction:column; align-items:flex-start; }
.preme-author__eyebrow { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color: var(--preme-text-meta); font-weight:700; }
.preme-author__name { display:block; font-size:26px; color:#fff; text-decoration:none; margin:5px 0 12px; }
.preme-author__name:hover { color: var(--preme-scarlet-hi); }
.preme-author__bio { color: var(--preme-text-soft); font-size:15px; line-height:1.55; margin:0 0 12px; }
.preme-author__more { display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; text-decoration:none; background: var(--preme-surface-2); border:1px solid var(--preme-hairline); padding:8px 14px; border-radius:999px; transition: background .18s ease, border-color .18s ease; }
.preme-author__more:hover { background: var(--preme-scarlet); border-color: var(--preme-scarlet); color:#fff; }

/* bottom sections */
.preme-article__watch, .preme-related { margin: 40px 0 0; }
.preme-related .preme-grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px,2vw,22px); }
.preme-related .preme-grid > .preme-card { grid-column: auto; }
.preme-wn-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.preme-wn-rail::-webkit-scrollbar { height:0; }
.preme-wn-rail .preme-pv { scroll-snap-align:start; }
@media (min-width:760px){ .preme-wn-rail { grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:auto; overflow:visible; } }

/* RIGHT RAIL */
.preme-rail__sticky { position: sticky; top: var(--preme-sticky-top); display:flex; flex-direction:column; gap:18px; }
.preme-rail__card { background: var(--preme-surface); border:1px solid var(--preme-hairline); border-radius:12px; padding:18px; }
.preme-rail__card--pickem { background: linear-gradient(150deg, rgba(31,194,78,.16), rgba(31,194,78,.03)); border-color: rgba(31,194,78,.4); }
.preme-rail__kicker { display:block; font-family: var(--preme-body); text-transform:uppercase; letter-spacing:1px; font-size:11px; font-weight:800; color: var(--preme-green); }
.preme-rail__h { font-size:26px; color:#fff; margin:6px 0 8px; }
.preme-rail__card--pickem p { color: var(--preme-text-soft); font-size:14px; line-height:1.5; margin:0 0 14px; }
.preme-rail__title { display:flex; align-items:center; gap:9px; font-family: var(--preme-display); text-transform:uppercase; letter-spacing:.5px; font-size:19px; color:#fff; margin:0 0 14px; }
.preme-rail__tick { width:4px; height:18px; background: var(--preme-scarlet); border-radius:2px; }
.preme-rail__rank { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.preme-rail__rank li { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--preme-hairline-2); }
.preme-rail__rank li:first-child { border-top:0; padding-top:0; }
.preme-rail__num { font-family: var(--preme-display); font-size:20px; color: var(--preme-scarlet); line-height:1; flex:none; width:20px; }
.preme-rail__rank a { color: var(--preme-text-soft); text-decoration:none; font-size:14px; font-weight:600; line-height:1.35; }
.preme-rail__rank a:hover { color: var(--preme-scarlet-hi); }
.preme-rail__videos { display:flex; flex-direction:column; gap:14px; }
.preme-rail__more { display:inline-block; margin-top:14px; color: var(--preme-scarlet-hi); font-weight:700; font-size:13px; text-decoration:none; }
.preme-rail__more:hover { color:#fff; }
.preme-rail__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.preme-rail__list a { display:flex; gap:12px; align-items:center; text-decoration:none; }
.preme-rail__thumb { flex:none; width:74px; height:52px; border-radius:6px; background-size:cover; background-position:center; }
.preme-rail__ltitle { color: var(--preme-text-soft); font-size:14px; font-weight:600; line-height:1.3; }
.preme-rail__list a:hover .preme-rail__ltitle { color: var(--preme-scarlet-hi); }

/* responsive collapse */
@media (max-width: 900px){
  .preme-art__grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "main" "rail"; }
  .preme-art__sharecol { display: none; }        /* left rail hidden on mobile */
  .preme-art__read { max-width: none; }
  .preme-rail__sticky { position: static; }
  .preme-art__rail { margin-top: 36px; }
  .preme-art__mshare { display: flex; }           /* inline share under byline instead */
}
@media (max-width: 520px){
  .preme-related .preme-grid { grid-template-columns:1fr; }
  .preme-inline--related { float:none; width:auto; margin:1.4em 0; }
}

/* ============================================================
   ARCHIVE / CATEGORY / TAG / TEAM / AUTHOR pages
   ============================================================ */
.preme-archive__head { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--preme-scarlet); }
.preme-archive__title { font-size: clamp(32px,5.6vw,60px); color:#fff; margin: 6px 0 0; }
.preme-archive__desc { color: var(--preme-text-soft); font-size: 16px; line-height: 1.6; margin: 14px 0 0; max-width: 70ch; }
.preme-archive__empty { color: var(--preme-text-meta); font-size: 16px; padding: 30px 0; }

/* team page lights up in the team's accent */
.preme-archive--team .preme-archive__head { border-bottom-color: var(--team-accent, var(--preme-scarlet)); }
.preme-archive--team .preme-eyebrow { color: var(--team-accent, var(--preme-scarlet)); }
.preme-archive--team .preme-archive__head::before { content: ""; display: block; width: 64px; height: 6px; border-radius: 3px; background: var(--team-accent, var(--preme-scarlet)); margin-bottom: 14px; }

/* uniform archive grid (reset the homepage lg/md span system) */
.preme-grid--archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,28px); }
.preme-grid--archive > .preme-card { grid-column: auto; }
@media (max-width: 900px){ .preme-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .preme-grid--archive { grid-template-columns: 1fr; } }

/* pagination */
.preme-pagination { margin-top: clamp(30px,4vw,48px); }
.preme-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.preme-pagination a, .preme-pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--preme-radius); border: 1px solid var(--preme-hairline); background: var(--preme-surface); color: var(--preme-text-soft); text-decoration: none; font-weight: 700; font-size: 14px; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.preme-pagination a:hover { background: var(--preme-surface-2); color:#fff; }
.preme-pagination .current { background: var(--preme-scarlet); color:#fff; border-color: var(--preme-scarlet); }
.preme-pagination .dots { border-color: transparent; background: none; }

/* author profile hero */
.preme-author-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(20px,3vw,34px); margin-bottom: 34px; padding: clamp(24px,3.5vw,40px); background: linear-gradient(120deg, var(--preme-surface) 0%, var(--preme-panel) 100%); border: 1px solid var(--preme-hairline); border-radius: 16px; }
.preme-author-hero__glow { position: absolute; top: -45%; right: -8%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(215,38,61,.22), transparent 68%); pointer-events: none; }
.preme-author-hero__photo { position: relative; z-index: 1; flex: none; }
.preme-author-hero__img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--preme-scarlet); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.preme-author-hero .preme-mono { border: 3px solid rgba(255,255,255,.14); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.preme-author-hero__body { position: relative; z-index: 1; min-width: 0; }
.preme-author-hero .preme-archive__title { font-size: clamp(30px,4.6vw,52px); margin: 4px 0 0; }
.preme-author-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.preme-achip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--preme-hairline); color: var(--preme-text-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; }
.preme-achip svg { opacity: .85; }
.preme-achip--team { transition: border-color .16s ease, color .16s ease; }
.preme-achip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--preme-scarlet)); }
.preme-achip--team:hover { border-color: var(--tc, var(--preme-scarlet)); color: #fff; }
.preme-author-hero__bio { color: var(--preme-text-soft); font-size: 15px; line-height: 1.6; margin: 0 0 12px; max-width: 62ch; }
.preme-author-hero__count { color: var(--preme-text-meta); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 620px){ .preme-author-hero { flex-direction: column; align-items: flex-start; text-align: left; } .preme-author-hero__img { width: 112px; height: 112px; } }

/* Section filter chips (Latest/blog index) */
.preme-secnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.preme-secnav__chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--preme-hairline); background: var(--preme-surface); color: var(--preme-text-soft); text-decoration: none; font-weight: 700; font-size: 13px; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.preme-secnav__chip:hover { background: var(--preme-surface-2); color: #fff; }
.preme-secnav__chip.is-active { background: var(--preme-scarlet); color: #fff; border-color: var(--preme-scarlet); }

/* ============================================================
   TEAMS HUB
   ============================================================ */
.preme-teams__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,2.2vw,30px); }
.preme-teams__divname { font-family: var(--preme-display); text-transform: uppercase; letter-spacing: .5px; font-size: 16px; color: #fff; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--preme-hairline); }
.preme-teams__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.preme-team-card { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 8px; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.preme-team-card__bar { width: 4px; height: 24px; border-radius: 2px; background: var(--tc, var(--preme-scarlet)); flex: none; box-shadow: 0 0 0 1px var(--tc2, transparent) inset; }
.preme-team-card__name { flex: 1; color: var(--preme-text-soft); font-weight: 700; font-size: 14px; line-height: 1.2; }
.preme-team-card__arrow { color: var(--preme-text-meta); opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
.preme-team-card:hover { border-color: var(--tc, var(--preme-scarlet)); transform: translateX(3px); }
.preme-team-card:hover .preme-team-card__name { color: #fff; }
.preme-team-card:hover .preme-team-card__arrow { opacity: 1; transform: translateX(0); color: var(--tc, var(--preme-scarlet)); }
@media (max-width: 1024px){ .preme-teams__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .preme-teams__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION LEAD BLOCK + TEAM STRIP (richer section pages)
   ============================================================ */
.preme-lead { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(14px,1.8vw,20px); margin: 0 0 clamp(22px,3vw,30px); }
.preme-lead__main { position: relative; min-height: 380px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; background: var(--img, var(--preme-surface-2)) center/cover no-repeat; }
.preme-lead__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 100%); }
.preme-lead__body { position: relative; padding: clamp(18px,2.6vw,28px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.preme-lead__title { font-size: clamp(24px,3vw,40px); color: #fff; margin: 10px 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.preme-lead__meta { color: rgba(255,255,255,.85); font-size: 13px; }
.preme-lead__main:hover .preme-lead__title { color: #fff; }
.preme-lead__main:hover { filter: brightness(1.04); }
.preme-lead__side { display: flex; flex-direction: column; gap: 14px; }
.preme-lead__sec { flex: 1; display: flex; min-height: 120px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 10px; overflow: hidden; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.preme-lead__sec:hover { border-color: var(--preme-scarlet); transform: translateY(-2px); }
.preme-lead__secthumb { width: 40%; min-width: 110px; flex: none; background: var(--preme-surface-2) center/cover no-repeat; }
.preme-lead__sectxt { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.preme-lead__sectitle { color: var(--preme-text); font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.preme-lead__sec:hover .preme-lead__sectitle { color: #fff; }
@media (max-width: 760px){
	.preme-lead { grid-template-columns: 1fr; }
	.preme-lead__main { min-height: 260px; }
}

.preme-teamstrip { margin: 0 0 clamp(22px,3vw,30px); }
.preme-teamstrip__label { display: block; font-family: var(--preme-display); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; color: var(--preme-text-meta); margin: 0 0 10px; }
.preme-teamstrip__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.preme-teamstrip__row::-webkit-scrollbar { display: none; }
.preme-teamchip { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 13px; border-radius: 999px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text-soft); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; transition: border-color .16s ease, color .16s ease; }
.preme-teamchip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--preme-scarlet)); flex: none; }
.preme-teamchip:hover { border-color: var(--tc, var(--preme-scarlet)); color: #fff; }

/* Breadcrumb (archive + author pages — the way back) */
.preme-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--preme-text-meta); margin: 0 0 12px; }
.preme-crumb a { color: var(--preme-scarlet-hi); text-decoration: none; }
.preme-crumb a:first-child { color: var(--preme-text-meta); }
.preme-crumb a:hover { color: #fff; }
.preme-crumb__current { color: var(--preme-text-meta); }

/* Homepage section rows (leverage categorized content) */
.preme-homesec, .preme-hometeams { padding: clamp(26px,3.6vw,44px) 0; }
.preme-grid--home { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,1.8vw,22px); }
.preme-grid--home > .preme-card { grid-column: auto; }
@media (max-width: 1024px){ .preme-grid--home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .preme-grid--home { grid-template-columns: 1fr; } }

/* Homepage "team wall" (all 32 as color-topped tiles) */
.preme-teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.preme-teamtile { display: block; text-align: center; padding: 14px 10px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-top: 3px solid var(--tc, var(--preme-scarlet)); border-radius: 8px; color: var(--preme-text-soft); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.preme-teamtile:hover { background: var(--preme-surface-2); color: #fff; border-top-width: 4px; transform: translateY(-3px); }

/* Mobile: section rows stay single-column (uncrowded, "like it was"). Desktop is
   the dense 4-up. Only the team wall tightens to 3-up on phones. */
@media (max-width: 560px){
	.preme-teamgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ============================================================
   ABOUT page
   ============================================================ */
.preme-about__hero { position: relative; overflow: hidden; padding: clamp(40px,7vw,84px) 0 0; border-bottom: 1px solid var(--preme-hairline); background: radial-gradient(120% 90% at 80% -10%, rgba(215,38,61,.20) 0%, rgba(215,38,61,0) 55%), linear-gradient(160deg, var(--preme-surface) 0%, var(--preme-charcoal) 68%); }
.preme-about__tag { display: inline-block; transform: skewX(-9deg); background: var(--preme-scarlet); color: #fff; padding: 6px 14px 5px; border-radius: 3px; letter-spacing: 1.6px; }
.preme-about__tag > * { display: inline-block; transform: skewX(9deg); }
.preme-about__title { font-size: clamp(64px,15.5vw,200px); color: #fff; margin: 14px 0 0; line-height: .84; letter-spacing: -.01em; }
.preme-about__title--accent { color: var(--preme-scarlet); }
.preme-about__lead { font-size: clamp(18px,2.6vw,26px); color: var(--preme-text-soft); margin: 20px auto 4px; max-width: 44ch; text-align: center; }

/* Stat band — big Anton numbers, the sports-broadcast graphic feel */
.preme-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: clamp(28px,4vw,44px) 0 0; border-top: 1px solid var(--preme-hairline); }
.preme-stat { padding: clamp(20px,3vw,32px) 10px; text-align: center; border-right: 1px solid var(--preme-hairline); }
.preme-stat:last-child { border-right: 0; }
.preme-stat__num { font-size: clamp(38px,6vw,68px); line-height: .9; color: #fff; }
.preme-stat:nth-child(2) .preme-stat__num, .preme-stat:nth-child(4) .preme-stat__num { color: var(--preme-scarlet); }
.preme-stat__label { margin: 10px 0 0; color: var(--preme-text-soft); text-transform: uppercase; letter-spacing: 1px; font-size: clamp(10px,1.2vw,12px); font-weight: 700; }
@media (max-width: 640px){ .preme-stats { grid-template-columns: 1fr 1fr; } .preme-stat:nth-child(2){ border-right: 0; } .preme-stat:nth-child(1), .preme-stat:nth-child(2){ border-bottom: 1px solid var(--preme-hairline); } .preme-stat:nth-child(3){ grid-column: 1 / -1; border-right: 0; } }

/* Mission — editorial two-column, oversized opening line */
.preme-mission__grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px,5vw,64px); align-items: start; }
.preme-mission__aside { position: sticky; top: 96px; }
.preme-mission__aside .preme-eyebrow { display: block; }
.preme-mission__rule { display: block; width: 54px; height: 4px; background: var(--preme-scarlet); margin-top: 14px; }
.preme-mission__lead { font-family: var(--preme-display); font-size: clamp(26px,3.6vw,40px); line-height: 1.12; color: #fff; margin: 0 0 22px; letter-spacing: .2px; }
.preme-mission__body p { font-size: 18px; line-height: 1.75; color: var(--preme-text); margin: 0 0 18px; }
.preme-mission__body p:last-child { margin-bottom: 0; }
.preme-mission__body strong { color: var(--preme-scarlet-hi); }
@media (max-width: 720px){ .preme-mission__grid { grid-template-columns: 1fr; } .preme-mission__aside { position: static; } }

.preme-about__covers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px,1.8vw,20px); }
.preme-cover { position: relative; display: block; padding: clamp(22px,2.6vw,32px); background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 12px; text-decoration: none; overflow: hidden; transition: border-color .18s ease, transform .18s ease; }
.preme-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--preme-scarlet); transform: scaleY(0); transform-origin: top; transition: transform .22s ease; }
.preme-cover:hover { border-color: var(--preme-scarlet); transform: translateY(-3px); }
.preme-cover:hover::before { transform: scaleY(1); }
.preme-cover__idx { position: absolute; top: 14px; right: 18px; font-size: clamp(30px,4vw,48px); line-height: 1; color: rgba(255,255,255,.07); }
.preme-cover:hover .preme-cover__idx { color: rgba(215,38,61,.28); }
.preme-cover__name { display: block; font-size: clamp(22px,3vw,30px); color: #fff; position: relative; }
.preme-cover__desc { display: block; color: var(--preme-text-soft); font-size: 14px; line-height: 1.5; margin: 8px 0 0; max-width: 42ch; position: relative; }
.preme-cover__go { display: inline-block; margin-top: 16px; color: var(--preme-text-meta); font-size: 20px; transition: color .18s ease, transform .18s ease; }
.preme-cover:hover .preme-cover__go { color: var(--preme-scarlet); transform: translateX(3px); }
@media (max-width: 560px){ .preme-about__covers { grid-template-columns: 1fr; } }

/* Closing CTA band — scarlet, drives to Pick'em */
.preme-about__cta { background: linear-gradient(120deg, var(--preme-scarlet) 0%, #9e1628 100%); }
.preme-about__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px,4vw,48px); padding: clamp(38px,6vw,68px) 0; flex-wrap: wrap; }
.preme-about__cta .preme-eyebrow { color: rgba(255,255,255,.82); }
.preme-about__cta-title { font-size: clamp(34px,5.4vw,64px); color: #fff; line-height: .92; margin: 10px 0 0; }
.preme-about__cta-sub { color: rgba(255,255,255,.92); font-size: clamp(15px,2vw,18px); line-height: 1.55; margin: 14px 0 0; max-width: 46ch; }
.preme-about__cta-btn { background: #fff; color: #0B0D12; flex: none; }
.preme-about__cta-btn:hover { background: #0B0D12; color: #fff; }

.preme-writers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); gap: clamp(16px,2vw,24px); justify-content: center; }
.preme-writer { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px,3vw,34px) clamp(18px,2vw,24px); background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 14px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.preme-writer:hover { border-color: var(--preme-scarlet); transform: translateY(-4px); }
.preme-writer__photo { margin-bottom: 14px; }
.preme-writer__img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--preme-scarlet); }
.preme-writer .preme-mono { border: 2px solid rgba(255,255,255,.14); }
.preme-writer__name { font-size: 25px; color: #fff; }
.preme-writer__role { color: var(--preme-scarlet-hi); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; margin-top: 5px; }
.preme-writer__blurb { color: var(--preme-text-soft); font-size: 14px; line-height: 1.55; margin: 11px 0 14px; }
.preme-writer__link { color: var(--preme-text-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; margin-top: auto; }
.preme-writer:hover .preme-writer__link { color: var(--preme-scarlet-hi); }

/* ===========================================================================
   CONTACT (page-contact.php)
   =========================================================================== */
.preme-btn--primary { background: var(--preme-scarlet); }
.preme-btn--primary:hover { background: var(--preme-scarlet-hi); }

.preme-note { border-radius: var(--preme-radius); padding: 14px 18px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; border: 1px solid var(--preme-hairline); }
.preme-note--good { background: rgba(31,194,78,.10); border-color: rgba(31,194,78,.45); color: #cfeed7; }
.preme-note--good strong { color: var(--preme-green); }
.preme-note--bad { background: rgba(215,38,61,.10); border-color: rgba(215,38,61,.45); color: #f2c9cf; }

.preme-contact .preme-about__hero { padding-bottom: clamp(34px,5vw,60px); }
.preme-contact__grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: clamp(24px,4vw,56px); align-items: start; }

/* Form panel — gives the form real structure instead of floating on black */
.preme-contact__panel { position: relative; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 14px; padding: clamp(24px,3.4vw,40px); overflow: hidden; }
.preme-contact__panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--preme-scarlet); }
.preme-contact__panel-head { margin: 0 0 24px; }
.preme-contact__panel-title { font-size: clamp(26px,3.4vw,38px); color: #fff; line-height: 1; }
.preme-contact__panel-sub { margin: 12px 0 0; color: var(--preme-text-soft); font-size: 15px; line-height: 1.55; }

.preme-form { display: flex; flex-direction: column; gap: 18px; }
.preme-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.preme-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.preme-field { display: flex; flex-direction: column; gap: 8px; }
.preme-field > span { font-family: var(--preme-eyebrow, inherit); text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; font-weight: 700; color: var(--preme-text-soft); }
.preme-field input, .preme-field select, .preme-field textarea {
  width: 100%; background: var(--preme-surface); border: 1px solid var(--preme-hairline);
  color: #fff; caret-color: #fff; padding: 13px 15px; border-radius: var(--preme-radius);
  font-size: 15px; font-family: inherit; transition: border-color .16s ease, background .16s ease;
}
.preme-field textarea { resize: vertical; min-height: 150px; }
.preme-field input:focus, .preme-field select:focus, .preme-field textarea:focus {
  outline: none; border-color: var(--preme-scarlet); background: var(--preme-surface-2);
}
.preme-field input::placeholder, .preme-field textarea::placeholder { color: var(--preme-text-meta); }
/* Keep typed + autofilled text white on the dark forms (browser autofill was forcing dark text) */
.preme-field input:-webkit-autofill,
.preme-field input:-webkit-autofill:hover,
.preme-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px var(--preme-surface-2) inset !important;
  caret-color: #fff;
}
.preme-field select option { color: #111; }
.preme-form .preme-btn { align-self: flex-start; cursor: pointer; border: 0; }

.preme-contact__rail { display: flex; flex-direction: column; gap: 16px; }
.preme-contact__card { background: var(--preme-surface); border: 1px solid var(--preme-hairline-2); border-radius: var(--preme-radius); padding: 22px; }
.preme-contact__card .preme-eyebrow { display: block; margin-bottom: 10px; }
.preme-contact__email { display: inline-block; font-family: var(--preme-display); font-size: clamp(18px,2.4vw,24px); color: #fff; word-break: break-word; }
.preme-contact__email:hover { color: var(--preme-scarlet-hi); }
.preme-contact__note { margin: 10px 0 0; color: var(--preme-text-soft); font-size: 14px; line-height: 1.5; }
.preme-contact__card--tip { border-left: 3px solid var(--preme-scarlet); }
.preme-contact__social { display: flex; flex-direction: column; gap: 10px; }
.preme-social { display: block; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 12px 16px; border-radius: var(--preme-radius); border: 1px solid var(--preme-hairline); color: #fff; transition: transform .16s ease, filter .16s ease; }
.preme-social:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.preme-social--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); border-color: transparent; }
.preme-social--x { background: #000; }
.preme-social--yt { background: #FF0000; border-color: transparent; }

@media (max-width: 760px) {
  .preme-contact__grid { grid-template-columns: 1fr; }
  .preme-form__row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   SEARCH RESULTS + EMPTY STATE + 404
   =========================================================================== */
.preme-searchbar { display: flex; gap: 10px; margin: 22px 0 0; max-width: 560px; }
.preme-searchbar input { flex: 1; min-width: 0; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text); padding: 13px 16px; border-radius: var(--preme-radius); font-size: 15px; font-family: inherit; }
.preme-searchbar input:focus { outline: none; border-color: var(--preme-scarlet); background: var(--preme-surface-2); }
.preme-searchbar input::placeholder { color: var(--preme-text-meta); }
.preme-searchbar button { flex: none; background: var(--preme-scarlet); color: #fff; border: 0; padding: 0 22px; border-radius: var(--preme-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; cursor: pointer; transition: background .16s ease; }
.preme-searchbar button:hover { background: var(--preme-scarlet-hi); }

.preme-empty { padding: clamp(30px,5vw,60px) 0; max-width: 640px; }
.preme-empty__lead { font-family: var(--preme-display); font-size: clamp(24px,3.4vw,36px); color: #fff; margin: 0; }
.preme-empty__sub { color: var(--preme-text-soft); font-size: 16px; margin: 12px 0 20px; }
.preme-empty__links { display: flex; flex-wrap: wrap; gap: 10px; }
.preme-empty__links a { background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; transition: border-color .16s ease, color .16s ease; }
.preme-empty__links a:hover { border-color: var(--preme-scarlet); color: #fff; }

/* 404 — football-flavored */
.preme-404 { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 80% -10%, rgba(215,38,61,.20) 0%, rgba(215,38,61,0) 55%), linear-gradient(160deg, var(--preme-surface) 0%, var(--preme-charcoal) 70%); }
.preme-404__inner { padding: clamp(48px,9vw,110px) 0; text-align: center; }
.preme-404__code { font-size: clamp(90px,22vw,260px); line-height: .85; color: #fff; letter-spacing: -.02em; margin: 16px 0 0; }
.preme-404__ball { color: var(--preme-scarlet); }
.preme-404__title { font-size: clamp(34px,6vw,72px); color: #fff; line-height: .95; margin: 8px 0 0; }
.preme-404__sub { color: var(--preme-text-soft); font-size: clamp(16px,2vw,19px); line-height: 1.6; margin: 16px auto 0; max-width: 46ch; }
.preme-404__search { margin: 26px auto 0; }
.preme-404__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 0; }
.preme-404__pill { background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: var(--preme-text); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; transition: border-color .16s ease, color .16s ease; }
.preme-404__pill:hover { border-color: var(--preme-scarlet); color: #fff; }

/* ===========================================================================
   PREME PICK'EM
   =========================================================================== */
.preme-pickem__hero { padding-bottom: clamp(30px,4vw,50px); }

/* How it works */
.preme-pickem__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.5vw,28px); }
.preme-pickem__step { position: relative; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 14px; padding: clamp(24px,3vw,34px); overflow: hidden; }
.preme-pickem__stepnum { position: absolute; top: 6px; right: 14px; font-size: clamp(46px,6vw,74px); line-height: 1; color: rgba(255,255,255,.06); }
.preme-pickem__steph { font-size: clamp(20px,2.4vw,26px); color: #fff; margin: 0 0 10px; position: relative; }
.preme-pickem__step p { color: var(--preme-text-soft); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 760px){ .preme-pickem__steps { grid-template-columns: 1fr; } }

/* Join */
.preme-pickem__joingrid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items: start; }
@media (max-width: 820px){ .preme-pickem__joingrid { grid-template-columns: 1fr; } }

/* Signed-in status bar */
.preme-pickem__statusrow { padding-top: clamp(24px,3vw,34px); padding-bottom: 0; }
.preme-pickem__status { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-left: 4px solid var(--preme-scarlet); border-radius: 12px; padding: 18px 22px; }
.preme-pickem__hi { font-size: clamp(22px,3vw,30px); color: #fff; margin: 4px 0 0; line-height: 1; }
.preme-pickem__record { margin-left: auto; text-align: right; }
.preme-pickem__rec-num { display: block; font-size: clamp(26px,3.4vw,38px); color: var(--preme-green); line-height: 1; }
.preme-pickem__rec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--preme-text-meta); }
.preme-pickem__logout { flex: none; color: var(--preme-text-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.preme-pickem__logout:hover { color: var(--preme-scarlet-hi); }

/* The board */
.preme-pickem__games { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 6px; }
@media (max-width: 700px){ .preme-pickem__games { grid-template-columns: 1fr; } }
.pk-game { margin: 0; padding: 14px; border: 1px solid var(--preme-hairline-2); border-radius: 12px; background: var(--preme-panel); }
.pk-row { display: flex; align-items: stretch; gap: 10px; }
.pk-at { flex: none; align-self: center; color: var(--preme-text-meta); font-weight: 700; font-size: 13px; }
.pk-team { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px 8px; background: var(--preme-surface); border: 2px solid var(--preme-hairline); border-radius: 10px; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.pk-team input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-team:hover { border-color: var(--tc); }
.pk-team.is-picked, .pk-team:has(input:checked) { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 24%, var(--preme-surface)); box-shadow: inset 0 0 0 1px var(--tc); }
.pk-team__city { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--preme-text-soft); line-height: 1; }
.pk-team__nick { font-size: clamp(17px,2.2vw,24px); color: #fff; line-height: 1; }
.pk-team input:focus-visible + .pk-team__city { outline: 2px solid #fff; }
.pk-team:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.pk-meta { margin-top: 10px; text-align: center; }
.pk-status { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--preme-text-meta); }
.pk-status--locked { color: var(--preme-text-soft); }
/* locked */
.pk-game.is-locked .pk-team { cursor: default; opacity: .85; }
.pk-game.is-locked .pk-team:hover { border-color: var(--preme-hairline); }
.pk-game.is-locked .pk-team.is-picked { opacity: 1; }
/* graded — scoped to .is-graded so these outrank the :has(input:checked) picked color */
.pk-game.is-graded .pk-team.is-win { border-color: var(--preme-green); background: rgba(31,194,78,.16); box-shadow: inset 0 0 0 1px var(--preme-green); }
.pk-game.is-graded .pk-team.is-loss { border-color: var(--preme-scarlet); background: rgba(215,38,61,.14); box-shadow: inset 0 0 0 1px var(--preme-scarlet); }
.pk-badge { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; }
.pk-badge--win { background: var(--preme-green); color: #04120a; }

.preme-pickem__save { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.preme-pickem__save .preme-btn { cursor: pointer; border: 0; }
.preme-pickem__savenote { color: var(--preme-text-meta); font-size: 13px; }

/* Leaderboard */
.preme-lb { width: 100%; border-collapse: collapse; }
.preme-lb thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--preme-text-meta); font-weight: 700; padding: 0 14px 12px; border-bottom: 2px solid var(--preme-scarlet); }
.preme-lb thead th:first-child { width: 44px; }
.preme-lb tbody td { padding: 14px; border-bottom: 1px solid var(--preme-hairline-2); font-variant-numeric: tabular-nums; color: var(--preme-text); }
.preme-lb__rank { font-family: var(--preme-display); font-size: 18px; color: var(--preme-text-soft); }
.preme-lb tbody tr:nth-child(1) .preme-lb__rank { color: var(--preme-scarlet); }
.preme-lb__name { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.preme-lb__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.preme-lb__correct { font-family: var(--preme-display); font-size: 18px; color: #fff; }
.preme-lb tbody tr.is-me { background: rgba(215,38,61,.10); }
.preme-lb tbody tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--preme-scarlet); }

/* ===========================================================================
   PICK'EM — consumer-grade upgrade (account bar, week nav, consensus, stats)
   =========================================================================== */
.preme-pickem__accountrow { padding-top: clamp(22px,3vw,32px); padding-bottom: 0; }
.pk-account { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-left: 4px solid var(--preme-scarlet); border-radius: 12px; padding: 16px 20px; }
.pk-account__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pk-account__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--preme-scarlet); color: #fff; font-size: 22px; line-height: 1; }
.pk-account__avatar--ghost { background: var(--preme-surface-2); color: var(--preme-text-meta); border: 1px solid var(--preme-hairline); }
.pk-account__name { display: block; font-size: clamp(18px,2.2vw,23px); color: #fff; line-height: 1.05; }
.pk-account__meta { display: block; color: var(--preme-text-soft); font-size: 13px; margin-top: 3px; }
.pk-account__logout { flex: none; color: var(--preme-text-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; border: 1px solid var(--preme-hairline); border-radius: 999px; padding: 9px 16px; transition: border-color .15s, color .15s; }
.pk-account__logout:hover { color: #fff; border-color: var(--preme-scarlet); }
.pk-account__cta { display: flex; align-items: center; gap: 14px; flex: none; }
.pk-account__login { color: var(--preme-text-soft); font-weight: 700; font-size: 13px; }
.pk-account__login:hover { color: var(--preme-scarlet-hi); }

.pk-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 14px 0 0; border: 1px solid var(--preme-hairline); border-radius: 12px; overflow: hidden; }
.pk-stat { padding: 16px 12px; text-align: center; border-right: 1px solid var(--preme-hairline); }
.pk-stat:last-child { border-right: 0; }
.pk-stat__num { font-size: clamp(24px,3vw,34px); color: #fff; line-height: 1; }
.pk-stat:nth-child(1) .pk-stat__num { color: var(--preme-scarlet); }
.pk-stat dd { margin: 8px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--preme-text-meta); font-weight: 700; }
@media (max-width: 620px){ .pk-stats { grid-template-columns: 1fr 1fr; } .pk-stat:nth-child(2){ border-right: 0; } .pk-stat:nth-child(1),.pk-stat:nth-child(2){ border-bottom: 1px solid var(--preme-hairline); } }

/* Week selector */
.preme-pickem__weeksec { padding-top: clamp(24px,3vw,34px); }
.pk-weeknav { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--preme-hairline); }
.pk-weeknav__label { flex: none; }
.pk-weeknav__weeks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.pk-weeknav__wk { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 42px; padding: 7px 8px; border-radius: 8px; background: var(--preme-surface); border: 1px solid var(--preme-hairline-2); color: var(--preme-text-soft); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s, background .15s; }
.pk-weeknav__wk span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--preme-text-meta); font-weight: 700; }
.pk-weeknav__wk:hover { border-color: var(--preme-scarlet); color: #fff; }
.pk-weeknav__wk.is-active { background: var(--preme-scarlet); border-color: var(--preme-scarlet); color: #fff; }
.pk-weeknav__wk.is-active span { color: rgba(255,255,255,.85); }
.pk-weeknav__wk.is-now:not(.is-active) { border-color: var(--preme-green); }
.pk-weeknav__wk.is-now:not(.is-active) span { color: var(--preme-green); }

.pk-progress { color: var(--preme-text-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.pk-progress strong { color: var(--preme-scarlet-hi); }

/* Consensus bar */
.pk-consensus { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 12px 0 0; background: var(--preme-surface-2); }
.pk-consensus__seg { display: block; height: 100%; opacity: .85; }
.pk-consensus__pcts { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--preme-text-soft); font-variant-numeric: tabular-nums; }
.pk-consensus__label { text-transform: uppercase; letter-spacing: .8px; font-size: 9.5px; color: var(--preme-text-meta); font-weight: 700; }

.pk-badge--you { background: #fff; color: #0B0D12; }
.pk-team.is-static { cursor: default; }
.pk-team.is-static:hover { border-color: var(--preme-hairline); }
.pk-team.is-static.is-picked:hover { border-color: var(--tc); }

.pk-locknote { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 22px; background: var(--preme-surface); border: 1px dashed var(--preme-hairline); border-radius: 12px; padding: 20px 24px; }
.pk-locknote span { color: var(--preme-text); font-weight: 700; font-size: 16px; }

/* Tiebreaker */
.pk-tiebreak { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 16px; background: linear-gradient(120deg, rgba(215,38,61,.12), rgba(215,38,61,.03)); border: 1px solid rgba(215,38,61,.4); border-radius: 12px; padding: 20px 24px; }
.pk-tiebreak__info { min-width: 0; }
.pk-tiebreak__q { font-size: clamp(17px,2.2vw,21px); color: #fff; margin: 8px 0 4px; line-height: 1.25; }
.pk-tiebreak__q strong { color: var(--preme-scarlet-hi); }
.pk-tiebreak__note { color: var(--preme-text-soft); font-size: 13px; }
.pk-tiebreak__field { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pk-tiebreak__field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--preme-text-soft); }
.pk-tiebreak__input { width: 120px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: #fff; padding: 14px 16px; border-radius: var(--preme-radius); font-size: 22px; font-family: var(--preme-display); text-align: center; }
.pk-tiebreak__input:focus { outline: none; border-color: var(--preme-scarlet); background: var(--preme-surface-2); }

/* ===========================================================================
   MOBILE HERO — stack it (photo on top, text on solid dark below) so the dek,
   "read full story", and meta are always readable, never fighting the photo.
   =========================================================================== */
@media (max-width: 700px) {
  .preme-hero { display: block; min-height: 0; background-image: none; background: var(--preme-charcoal); }
  .preme-hero::before { display: none; }
  .preme-hero__scrim {
    position: relative; inset: auto; display: block; width: 100%;
    aspect-ratio: 16 / 11; background: var(--hero-img) center 20% / cover no-repeat;
  }
  .preme-hero__scrim::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
    background: linear-gradient(to bottom, rgba(11,13,18,0), var(--preme-charcoal));
  }
  .preme-hero__inner { background: var(--preme-charcoal); padding: 18px 18px 30px; }
  .preme-hero__title, .preme-hero__dek, .preme-hero__meta,
  .preme-hero .preme-eyebrow, .preme-hero__more { text-shadow: none; }
  .preme-hero__dek { color: var(--preme-text-soft); max-width: none; margin-bottom: 18px; }
  .preme-hero__title { margin-top: 8px; }
  .preme-hero__chip { position: relative; z-index: 2; }
}

/* Pick'em official-rules link (under the hero) */
.preme-pickem__rules { margin: 12px auto 0; text-align: center; }
.preme-pickem__rules a { color: var(--preme-text-meta); font-size: 13px; letter-spacing: .4px; }
.preme-pickem__rules a:hover { color: var(--preme-scarlet-hi); }

/* ===========================================================================
   HOMEPAGE v2 — hero + trending grid, sliders, explore scroller
   =========================================================================== */
.preme-herowrap { padding-top: clamp(20px,3vw,30px); }
.preme-herogrid { display: grid; grid-template-columns: minmax(0,2.15fr) minmax(0,1fr); gap: 22px; align-items: stretch; }

/* Boxed home hero (in the grid, not full-bleed) */
.preme-hero--home { min-height: 0; height: clamp(360px,42vw,500px); border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; }
.preme-hero--home .preme-hero__scrim { z-index: 1; }
.preme-hero__link { position: absolute; inset: 0; z-index: 1; }
.preme-hero--home .preme-hero__inner { position: relative; z-index: 2; width: 100%; max-width: none; padding: clamp(16px,2vw,26px); margin: 0; }
.preme-hero__box { background: rgba(6,7,10,.70); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 18px 22px; display: inline-block; max-width: 40ch; }
.preme-hero--home .preme-hero__title { font-size: clamp(26px,3.2vw,44px); margin: 10px 0 10px; text-shadow: none; }
.preme-hero--home .preme-hero__dek { color: var(--preme-text-soft); text-shadow: none; margin-bottom: 12px; max-width: none; }
.preme-hero--home .preme-hero__meta { position: relative; z-index: 3; }

/* Trending sidebar */
.preme-trending { background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; }
.preme-trending__head { font-family: var(--preme-display); text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: #fff; padding-bottom: 12px; border-bottom: 2px solid var(--preme-scarlet); display: flex; align-items: center; gap: 8px; }
.preme-trending__list { list-style: none; margin: 4px 0 0; padding: 0; }
.preme-trending__item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--preme-hairline-2); }
.preme-trending__item:last-child { border-bottom: 0; }
.preme-trending__num { flex: none; font-family: var(--preme-display); font-size: 22px; line-height: 1; color: var(--preme-scarlet); min-width: 22px; }
.preme-trending__item a { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.32; text-decoration: none; }
.preme-trending__item a:hover { color: var(--preme-scarlet-hi); }

/* Horizontal scroller (Latest + Explore) */
.preme-hscroll { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--preme-scarlet) transparent; }
.preme-hscroll::-webkit-scrollbar { height: 8px; }
.preme-hscroll::-webkit-scrollbar-track { background: var(--preme-surface); border-radius: 20px; }
.preme-hscroll::-webkit-scrollbar-thumb { background: var(--preme-scarlet); border-radius: 20px; }
.preme-hscroll > .preme-card { flex: 0 0 300px; scroll-snap-align: start; }

/* Explore cards (our pages + socials) */
.preme-explore__row { align-items: stretch; }
.preme-xcard { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 16px; padding: 22px 26px; background: var(--preme-surface); border: 1px solid var(--preme-hairline); border-radius: 12px; text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: transform .16s ease, border-color .16s ease, filter .16s ease; }
.preme-xcard:hover { transform: translateY(-3px); border-color: var(--preme-scarlet); }
.preme-xcard__label { font-size: 23px; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.preme-xcard__go { color: var(--preme-scarlet); font-size: 20px; }
.preme-xcard--pickem { background: linear-gradient(120deg, var(--preme-scarlet), #9e1628); border-color: transparent; }
.preme-xcard--pickem:hover { filter: brightness(1.08); border-color: transparent; }
.preme-xcard--pickem .preme-xcard__go { color: #fff; }
.preme-xcard--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); border-color: transparent; }
.preme-xcard--x { background: #000; }
.preme-xcard--yt { background: #FF0000; border-color: transparent; }
.preme-xcard--ig .preme-xcard__go, .preme-xcard--x .preme-xcard__go, .preme-xcard--yt .preme-xcard__go { color: rgba(255,255,255,.9); }

@media (max-width: 860px) {
	.preme-herogrid { grid-template-columns: 1fr; }
	.preme-hero--home { height: auto; }
}
/* Mobile hero box: __inner already solid, so drop the inner box chrome */
@media (max-width: 700px) {
	.preme-hero__box { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; max-width: none; }
	.preme-hscroll > .preme-card { flex: 0 0 78vw; }
	.preme-hero--home .preme-hero__title { font-size: clamp(24px,7vw,34px); }
	/* Home hero: stack it — full-width photo on top, text below (was flex row = tiny photo) */
	.preme-hero--home { display: block; height: auto; border-radius: 0; overflow: visible; }
	.preme-hero--home .preme-hero__scrim { aspect-ratio: 16 / 10; border-radius: 12px; }
	.preme-hero--home .preme-hero__inner { padding: 16px 0 2px; }
	.preme-hero--home .preme-hero__dek { margin-bottom: 14px; }
	/* Follow the Action: clean equal 2-col grid instead of a ragged horizontal scroll */
	.preme-explore__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; padding: 2px 0 0; }
	.preme-xcard { white-space: normal; justify-content: space-between; padding: 18px 16px; min-width: 0; }
	.preme-xcard__label { font-size: 16px; line-height: 1.15; }
	/* Pick'em band: inset from the screen edges + round it so it doesn't bleed too far out */
	.preme-pickem { margin-left: 14px; margin-right: 14px; border-radius: 16px; overflow: hidden; }
	.preme-pickem > .preme-wrap { padding-left: 18px; padding-right: 18px; }
}

/* Section search bar (NFL section etc.) */
.preme-secsearch { display: flex; gap: 10px; margin: 4px 0 30px; max-width: 540px; }
.preme-secsearch input { flex: 1; min-width: 0; background: var(--preme-surface); border: 1px solid var(--preme-hairline); color: #fff; padding: 12px 15px; border-radius: var(--preme-radius); font-size: 15px; }
.preme-secsearch input:focus { outline: none; border-color: var(--preme-scarlet); background: var(--preme-surface-2); }
.preme-secsearch input::placeholder { color: var(--preme-text-meta); }
.preme-secsearch button { flex: none; background: var(--preme-scarlet); color: #fff; border: 0; padding: 0 22px; border-radius: var(--preme-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; cursor: pointer; }
.preme-secsearch button:hover { background: var(--preme-scarlet-hi); }

/* Mobile: Latest becomes a condensed stacked list (small thumb + title), per client */
@media (max-width: 700px) {
  .preme-latest .preme-hscroll { flex-direction: column; overflow: visible; gap: 0; padding: 0; scroll-snap-type: none; }
  .preme-latest .preme-hscroll > .preme-card { flex: none !important; width: 100%; flex-direction: row; align-items: center; gap: 13px; background: transparent; border: 0; border-bottom: 1px solid var(--preme-hairline-2); border-radius: 0; padding: 13px 0; transform: none; }
  .preme-latest .preme-hscroll > .preme-card:hover { transform: none; }
  .preme-latest .preme-card__media { flex: 0 0 104px; width: 104px; height: 72px; aspect-ratio: auto; border-radius: 8px; }
  .preme-latest .preme-card__body { padding: 0; }
  .preme-latest .preme-card__excerpt, .preme-latest .preme-card__more, .preme-latest .preme-card__meta { display: none; }
  .preme-latest .preme-card__title { font-size: 15px; margin: 0; }
}