/* ===== Banner slots (see inc/ads.php) ===== */
.ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline:auto;max-width:100%;line-height:0}
.ad__link{display:block;position:relative;max-width:100%}
.ad img{max-width:100%;height:auto;border-radius:var(--r-card);display:block;box-shadow:none}
.ad__tag{position:static;font:700 10.5px/1 var(--ff-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);background:none;padding:0 0 6px;pointer-events:none}
.band--dark .ad__tag,.band--blue .ad__tag,.adpop .ad__tag{color:rgba(255,255,255,.55)}
.ad--billboard,.ad--leaderboard,.ad--inline{padding:10px 0 6px}
.ad--show-bottom img{border-radius:var(--r-md)}
.ad--half{position:sticky;top:96px;margin-bottom:8px}
.vfeed-ad{aspect-ratio:9/16}
.vfeed-ad .ad--feed,.vfeed-ad .ad__link,.vfeed-ad picture{height:100%;width:100%}
.vfeed-ad .ad--feed img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.vcard-v--ad .ad__tag{left:auto;right:10px;top:10px}
.ad--anchor,.ad--skyscraper,.ad--popup{margin:0}
/* side skyscrapers (≥1640px): fade away over full-bleed bands and the footer (modules/ads.js) */
.sky{display:none;position:fixed;top:200px;z-index:20;transition:opacity .35s;pointer-events:auto}
.sky.is-away{opacity:0;pointer-events:none}
.sky--l{left:calc(50% - 640px - 176px)}.sky--r{right:calc(50% - 640px - 176px)}
@media (min-width:1640px){.sky{display:block}}
/* mobile anchor */
.anchor-ad{display:none;position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:45;background:#fff;border-top:1px solid var(--c-line);padding:4px 0;justify-content:center;box-shadow:0 -6px 18px rgba(30,32,93,.08)}
.anchor-ad .ad img{border-radius:var(--r-xs)}
.anchor-ad__close{position:absolute;right:6px;top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-text);font:700 14px/1 var(--ff-ui);display:grid;place-items:center;padding:0}
.anchor-ad__close::before{content:"";position:absolute;inset:-8px}  /* 44px hit area on a 28px button */
.anchor-ad__close svg{width:14px;height:14px}
@media (max-width:991.98px){.anchor-ad:not([hidden]){display:flex}}
/* tablets have no tab bar (the drawer replaces it), so the strip sits on the screen edge */
@media (min-width:768px) and (max-width:991.98px){.anchor-ad{bottom:0;padding-bottom:calc(4px + env(safe-area-inset-bottom))}}
/* one thing above the tab bar at a time: a floating player wins over the anchor banner */
body:has(.player.is-docked) .anchor-ad{display:none}
/* ===== popup / interstitial — a branded frame around the advertiser's creative (DECISIONS #121) ===== */
.adpop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));overscroll-behavior:contain;
  background:radial-gradient(60% 50% at 50% 40%,rgba(65,69,197,.55),transparent 70%),rgba(30,32,93,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:adpop-in .3s ease-out}
.adpop[hidden]{display:none}
body.adpop-open{overflow:hidden}
.adpop__box{position:relative;width:min(100%,680px);max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 100px rgba(10,12,40,.55),0 0 0 1px rgba(255,255,255,.08);animation:adpop-box .5s cubic-bezier(.16,1,.3,1)}
/* the bar: mark, tick, kicker — the same three brand elements the section heads use */
.adpop__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;background:linear-gradient(90deg,var(--c-primary-dark),var(--c-primary));color:#fff}
.adpop__brand{display:inline-flex;align-items:center;gap:10px;min-width:0}
.adpop__brand img{width:30px;height:auto;display:block}
.adpop__tick{width:4px;height:22px;border-radius:2px;background:var(--c-live)}
.adpop__kick{font:700 11.5px/1 var(--ff-cond);letter-spacing:.14em;text-transform:uppercase;color:#DCDFEA}
.adpop__close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:#fff;font:700 13px/1 var(--ff-ui);cursor:pointer;transition:background .2s}
.adpop__close:hover,.adpop__close:focus-visible{background:rgba(255,255,255,.26)}
.adpop__close svg{width:32px;height:32px;padding:7px;border-radius:50%;background:#fff;color:var(--c-primary-dark)}
/* the creative: never clipped, never stretched, on a soft ice ground so a white creative still reads as an object */
.adpop__creative{display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,#F3F4F9,#E9EAF6);min-height:120px}
.adpop__creative .ad{max-width:100%;margin:0}
.adpop__creative .ad__tag{display:none} /* the bar already says it */
.adpop__creative img,.adpop__creative video{max-width:100%;max-height:calc(100dvh - 240px);width:auto;height:auto;object-fit:contain;border-radius:var(--r-md);box-shadow:0 18px 40px -18px rgba(30,32,93,.45)}
.adpop__creative .ad__video{width:min(600px,100%)}
.adpop__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--c-line);background:#fff}
.adpop__go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--c-primary);color:#fff;font:700 14px/1 var(--ff-ui);cursor:pointer;transition:background .2s,transform .15s}
.adpop__go:hover{background:var(--c-primary-dark);transform:translateY(-1px)}
.adpop__go svg{width:16px;height:16px}
.adpop__hint{font-size:12px;color:var(--c-muted)}
@keyframes adpop-in{from{opacity:0}to{opacity:1}}
@keyframes adpop-box{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.adpop,.adpop__box{animation:none}}
@media (max-width:575.98px){
  .adpop{padding:10px;align-items:end}
  .adpop__box{border-radius:var(--r-lg)}
  .adpop__bar{padding:10px 10px 10px 14px}
  .adpop__close span{display:none}
  .adpop__close{padding:0 4px}
  .adpop__creative{padding:12px}
  .adpop__creative img,.adpop__creative video{max-height:calc(100dvh - 200px)}
  .adpop__go{flex:1;justify-content:center}
}

/* ===== takeover — the site sits on a sheet over the advertiser's skin (DECISIONS #121) ===== */
.takeover{display:none}
@media (min-width:1400px){
  body:has(.takeover){--container:1200px;--gutter:56px}
  .takeover{display:block;position:fixed;inset:0;z-index:0}
  .takeover .ad,.takeover .ad__link,.takeover picture{position:absolute;inset:0;display:block;margin:0;max-width:none;line-height:0}
  .takeover img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
  .takeover .ad__tag{display:none}
  /* the label sits where the eye lands first: top-left, just under the header, in the same voice as every other ad tag */
  .takeover::before{content:attr(data-label);position:absolute;left:18px;top:calc(var(--band) + 138px);z-index:1;pointer-events:none;font:700 10.5px/1 var(--ff-cond);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(30,32,93,.45);padding:6px 9px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
  /* everything the page owns rises above the skin */
  body:has(.takeover) .utility,body:has(.takeover) .breaking{position:relative;z-index:2}
  /* .topbar is already sticky at z-index 1020, so it stays above the skin by itself */
  body:has(.takeover) #primary{position:relative;z-index:1;background:var(--c-bg);margin-top:var(--band);padding-block:12px 40px;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -12px 40px rgba(10,12,40,.28)}
  body:has(.takeover) #primary>.band--first,body:has(.takeover) #primary>.band:first-child{margin-top:12px}
  /* full-bleed bands stop at the sheet's edge instead of the screen's */
  body:has(.takeover) .band--bleed{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  body:has(.takeover) .site-footer{position:relative;z-index:1}
  body:has(.takeover) .sky{display:none}
  body:has(.takeover) .adpop{z-index:1100}
}

/* ===== welcome screen — full screen on arrival, then the page (DECISIONS #123) ===== */
.welcome{position:fixed;inset:0;z-index:1200;background:#0F1140;color:#fff;isolation:isolate;animation:adpop-in .3s ease-out}
.welcome[hidden]{display:none}
.welcome.is-leaving{opacity:0;transition:opacity .3s ease-in}
body.welcome-open{overflow:hidden}
.welcome__stage,.welcome__stage .ad,.welcome__stage .ad__link,.welcome__stage picture,.welcome__stage .ad__video{position:absolute;inset:0;margin:0;max-width:none;width:100%;height:100%;display:block;line-height:0}
.welcome__stage .ad__tag{display:none}
.welcome__stage img,.welcome__stage video{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.welcome__stage .ad__link{cursor:default}
.welcome__top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:linear-gradient(180deg,rgba(15,17,64,.6),transparent)}
.welcome__brand{display:inline-flex;align-items:center;gap:10px}
.welcome__brand img{width:34px;height:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.welcome__tick{width:4px;height:22px;border-radius:2px;background:var(--c-live)}
.welcome__kick{font:700 12px/1 var(--ff-cond);letter-spacing:.14em;text-transform:uppercase;color:#DCDFEA}
.welcome__hint{font-size:12.5px;color:rgba(220,223,234,.8)}
.welcome__bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 22px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(15,17,64,.65),transparent)}
.welcome__visit,.welcome__skip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:0;border-radius:var(--r-pill);font:700 14px/1 var(--ff-ui);cursor:pointer;color:#fff;text-decoration:none;transition:background .2s,transform .15s,opacity .2s}
.welcome__visit{background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.welcome__visit:hover{background:rgba(255,255,255,.28);color:#fff}
.welcome__skip{background:#fff;color:var(--c-primary-dark);padding-left:10px;font-variant-numeric:tabular-nums}
.welcome__skip:disabled{cursor:default;opacity:.92}
.welcome__skip:not(:disabled):hover{transform:translateY(-1px)}
.welcome__skip svg:not(.welcome__ring){width:16px;height:16px}
.welcome__ring{width:30px;height:30px;transform:rotate(-90deg)}
.welcome__ring circle{fill:none;stroke:rgba(30,32,93,.15);stroke-width:3}
.welcome__ring circle[data-welcome-ring]{stroke:var(--c-live);stroke-dasharray:97.4;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.welcome{animation:none}.welcome__ring circle[data-welcome-ring]{transition:none}}
@media (max-width:575.98px){
  .welcome__top{padding:14px 14px}
  .welcome__bottom{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  .welcome__visit{display:none}
  .welcome__skip{flex:1;justify-content:center}
}
.admin-bar .welcome__top{top:32px}
.welcome__visit,.welcome__skip{white-space:nowrap}
/* the ad desk looking at one place (?vp_ad_spot=key, editors only, DECISIONS #157): an empty place
   draws itself at its desktop size with its name; a booked one gets an orange outline */
.ad--spot{min-height:90px;border:2px dashed var(--c-accent);border-radius:var(--r-card);background:rgba(249,97,66,.06);padding:14px 18px;gap:6px;line-height:1.3;text-align:center}
.ad--spot .ad__tag{color:var(--c-accent)}
.ad__spot{font:600 14px/1.35 var(--ff-ui);color:var(--c-text)}
.band--dark .ad__spot,.band--blue .ad__spot{color:#fff}
.ad--spot-leaderboard{width:970px;max-width:100%;min-height:90px}
.ad--spot-billboard{width:970px;max-width:100%;min-height:250px}
.ad--spot-inline{width:728px;max-width:100%;min-height:90px}
.ad--spot-mpu{width:300px;min-height:250px}
.ad--spot-half{width:300px;min-height:600px}
.ad--spot-feed{width:100%;height:100%}
.ad.is-spot{outline:3px solid var(--c-accent);outline-offset:4px;border-radius:var(--r-card)}
@media (max-width:767.98px){.ad--spot-leaderboard,.ad--spot-inline{min-height:50px}.ad--spot-billboard{min-height:100px}}