/* ============================================================
   AD SLOTS (kept honest, styled quiet)
   ============================================================ */

.adslot {
  padding: 18px 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}
/* The box reserves the placement while its first-party HTML creative remains
   useful on its own. Adaptive renders commercial inventory in its own mapped
   container; no empty overlay sits above the house link. */
.adslot-box {
  width: 100%;
  max-width: 728px;
  height: 90px;
  background: var(--gray-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.house-creative {
  --house-bg: var(--paper);
  --house-fg: var(--ink);
  --house-cta-bg: var(--ink);
  --house-cta-fg: var(--paper);
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker brand"
    "title brand"
    "body brand"
    "action brand";
  align-content: center;
  gap: 7px clamp(18px, 3vw, 34px);
  padding: clamp(18px, 4vw, 38px);
  overflow: hidden;
  isolation: isolate;
  background: var(--house-bg);
  background-image: none;
  color: var(--house-fg);
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-property: opacity, visibility, filter;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.house-creative::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(36%, 270px);
  background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 15px);
  opacity: .055;
  pointer-events: none;
}
.house-creative--linked { cursor: pointer; }
.house-creative--linked:hover { filter: saturate(1.08) contrast(1.02); }
.house-creative--linked:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 4px currentColor;
}
.house-creative__kicker {
  grid-area: kicker;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: end;
  font: 900 10px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.house-creative__signal {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: currentColor;
}
.house-creative__title {
  grid-area: title;
  min-width: 0;
  font: 800 clamp(20px, 3.2vw, 42px)/.98 var(--font-display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.house-creative__body {
  grid-area: body;
  max-width: 620px;
  margin: 1px 0 0;
  font: 16px/1.35 var(--font-serif);
  text-wrap: pretty;
}
.house-creative__action {
  grid-area: action;
  width: fit-content;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 14px;
  background: var(--house-cta-bg);
  color: var(--house-cta-fg);
  font: 800 12px/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition-property: scale, background-color, color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.house-creative--linked:hover .house-creative__action {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}
.house-creative--linked:active .house-creative__action { scale: .96; }
.house-creative__brand {
  grid-area: brand;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: currentColor;
  opacity: .14;
  rotate: -7deg;
}
.house-creative__brand b {
  font: 900 clamp(72px, 13vw, 160px)/.68 var(--font-display);
  letter-spacing: -.12em;
}
.house-creative__brand small {
  margin-top: 8px;
  font: 900 9px/1 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.house-creative__tags {
  grid-area: action;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.house-creative__tags a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  padding: 0 13px;
  color: currentColor;
  background: transparent;
  background-image: none;
  font: 700 12px/1 var(--font-display);
  text-decoration: none;
  transition-property: background-color, color, scale;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.house-creative__tags a:hover { background: var(--house-cta-bg); color: var(--house-cta-fg); }
.house-creative__tags a:active { scale: .96; }

.house-creative--yellow { --house-bg: var(--y); }
.house-creative--violet { --house-bg: #ddd2f0; }
.house-creative--paper { --house-bg: #f4f1e9; }
.house-creative--black {
  --house-bg: var(--ink);
  --house-fg: var(--paper);
  --house-cta-bg: var(--y);
  --house-cta-fg: var(--ink);
}
.house-creative--blue { --house-bg: #cfe5f2; }
.house-creative--red { --house-bg: #efc6bc; }

.ads-cmp-inactive .house-creative,
.ads-consented.ads-adblocked .house-creative,
.adslot--unfilled .house-creative { opacity: 1; visibility: visible; pointer-events: auto; }

.adslot--rect .house-creative,
.adslot--half .house-creative,
.adslot--inarticle .house-creative,
.adslot--passback .house-creative {
  grid-template-columns: 1fr;
  grid-template-areas: "kicker" "title" "body" "action";
  align-content: start;
  gap: 8px;
  padding: 24px 20px;
}
.adslot--rect .house-creative__title,
.adslot--inarticle .house-creative__title,
.adslot--passback .house-creative__title { font-size: 29px; }
.adslot--rect .house-creative__body,
.adslot--inarticle .house-creative__body,
.adslot--passback .house-creative__body { font-size: 15px; }
.adslot--rect .house-creative__brand,
.adslot--half .house-creative__brand,
.adslot--inarticle .house-creative__brand,
.adslot--passback .house-creative__brand {
  position: absolute;
  right: 15px;
  bottom: 17px;
}
.adslot--rect .house-creative__brand b,
.adslot--inarticle .house-creative__brand b,
.adslot--passback .house-creative__brand b { font-size: 94px; }
.adslot--rect .house-creative { gap: 6px; padding: 18px; }
.adslot--rect .house-creative__title { font-size: 26px; }
.adslot--rect .house-creative__body { font-size: 14px; }
.adslot--rect .house-creative__action,
.adslot--rect .house-creative__tags { margin-top: 4px; }
.adslot--half .house-creative { align-content: center; }
.adslot--half .house-creative__title { font-size: 38px; }

.anchor-ad .house-creative,
.adslot:not([class*="adslot--"]) .house-creative {
  grid-template-columns: minmax(0, 1fr) auto 54px;
  grid-template-areas: "kicker action brand" "title action brand";
  align-content: center;
  gap: 3px 16px;
  padding: 8px 16px;
}
.anchor-ad .house-creative__kicker,
.adslot:not([class*="adslot--"]) .house-creative__kicker { font-size: 8px; }
.anchor-ad .house-creative__title,
.adslot:not([class*="adslot--"]) .house-creative__title {
  font-size: clamp(13px, 2.4vw, 17px);
  line-height: 1.05;
}
.anchor-ad .house-creative__body,
.adslot:not([class*="adslot--"]) .house-creative__body,
.anchor-ad .house-creative__tags,
.adslot:not([class*="adslot--"]) .house-creative__tags { display: none; }
.anchor-ad .house-creative__action,
.adslot:not([class*="adslot--"]) .house-creative__action {
  grid-area: action;
  align-self: center;
  margin-top: 0;
}
.anchor-ad .house-creative__brand b,
.adslot:not([class*="adslot--"]) .house-creative__brand b { font-size: 52px; }
.anchor-ad .house-creative__brand small,
.adslot:not([class*="adslot--"]) .house-creative__brand small { display: none; }

@media (max-width: 620px) {
  .adslot:not([class*="adslot--"]) .house-creative {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "kicker action" "title action";
    gap: 3px 10px;
    padding: 6px 12px;
  }
  .adslot:not([class*="adslot--"]) .house-creative__brand { display: none; }
  .adslot:not([class*="adslot--"]) .house-creative__action { width: 40px; padding: 0; }
  .adslot:not([class*="adslot--"]) .house-creative__action-label { display: none; }
}

/* Zone-state visibility. Proposed placements are dev-preview only. A blocked,
   failed or individually unfilled zone reveals its house card; an authoritative
   empty result without useful first-party content collapses the reservation. */
body.ads-debug [data-adaptive-placement="proposed"] { display: grid; }
.ads-enabled .adslot--unfilled { display: grid; }
.ads-enabled .adslot--filled .adslot-box { display: none; }
body .adslot.adslot--collapsed:not(.adslot--staff-preview) {
  display: none;
  min-height: 0;
  margin: 0;
  border: 0;
  padding-block: 0;
}

.adslot--opener .adslot-box { max-width: 970px; height: 313px; }
.adslot--header { padding-block: 24px; }
.adslot--header.adslot--opener { min-height: 361px; }
.adslot--rect { min-height: 349px; }
.adslot--header.adslot--rect { min-height: 361px; }
.adslot--rect .adslot-box { max-width: 300px; height: 313px; }
.adslot--half .adslot-box { max-width: 300px; height: 600px; }
.adslot--inarticle { min-height: 465px; }
.adslot--inarticle .adslot-box { max-width: 640px; height: 423px; }
.adslot--billboard { min-height: 499px; }
.adslot--billboard .adslot-box { max-width: 970px; height: 463px; }
.adslot--category { min-height: 459px; }
.adslot--category .adslot-box { max-width: 640px; height: 423px; }
.adslot--passback { min-height: 385px; }
.adslot--passback .adslot-box { max-width: 640px; height: 343px; }
.adslot--video .adslot-box { max-width: 640px; height: auto; aspect-ratio: 16 / 9; }

/* Adaptive Premium page-effect compatibility.
   A skin may reparent the desktop header zone, while an interstitial can fill
   independently after the header reports empty. Either observable page-level
   effect replaces the publisher header reservation. If a provider race leaves
   the skin zone in our origin, cap its document-height inline minimum so it
   cannot cover the article. */
body.ads-skin-active .adslot--header:not(.adslot--staff-preview),
body.ads-interstitial-active .adslot--header:not(.adslot--staff-preview) {
  display: none;
  min-height: 0;
  padding-block: 0;
}
.adslot--header .adaptive-origin > .skin-zone-style {
  position: relative !important;
  height: 250px !important;
  min-height: 0 !important;
  max-height: 250px !important;
  overflow: hidden;
}

/* Adaptive wraps sticky-capable leaderboard inventory in a runway whose inline
   min-height depends on when the script initializes. The header placement is
   fixed in our document flow, so keep only the creative and disclosure chrome;
   otherwise consent can add an arbitrary 100px+ layout shift. */
.adslot--header .am-sticky-container { min-height: 0 !important; }

/* Authenticated publisher preview. Keep every declared placement inspectable,
   including inventory disabled in the current runtime configuration. The
   marker is presentation-only and cannot intercept creative interaction. */
body .adslot.adslot--staff-preview {
  position: relative;
  display: grid;
  outline: 1px dashed color-mix(in srgb, var(--ink) 38%, transparent);
  outline-offset: -1px;
}
.adslot-staff-label {
  position: absolute;
  z-index: 20;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  max-width: calc(100% - 24px);
  translate: -50% -50%;
  padding: 7px 10px;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--y) 92%, var(--paper));
  color: var(--ink);
  box-shadow: 3px 3px 0 rgb(0 0 0 / .18);
  font: 800 10px/1.25 var(--font-display);
  letter-spacing: .035em;
  overflow-wrap: anywhere;
  text-align: center;
  pointer-events: none;
}
.article-body .adslot,
.feed > .adslot {
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
  padding: 20px 0;
  margin: 2.4em 0;
}
.feed > .adslot { margin: 0; border-bottom: 0; }
.adaptive-feed-origin > .adslot { margin: 0; border-bottom: 0; }

@media (max-width: 860px) {
  .adslot.only-desktop,
  .adaptive-origin.only-desktop { display: none; }
}
@media (min-width: 861px) {
  .adslot.only-mobile,
  .adaptive-origin.only-mobile { display: none; }
}
@media (min-width: 621px) {
  .only-phone { display: none; }
}
@media (max-width: 620px) {
  .masthead .brand { width: min(190px, calc(100vw - 120px)); }
  .adslot--header.adslot--opener { min-height: 298px; }
  .adslot--inarticle .adslot-box,
  .adslot--passback .adslot-box,
  .adslot--category .adslot-box { max-width: 300px; height: 313px; }
  .adslot--inarticle,
  .adslot--passback,
  .adslot--category { min-height: 355px; }
  .adslot--inarticle .house-creative,
  .adslot--passback .house-creative {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "body" "action";
    align-content: start;
    gap: 7px;
    padding: 22px 18px;
  }
  .adslot--inarticle .house-creative__title,
  .adslot--passback .house-creative__title { font-size: 29px; }
  .adslot--inarticle .house-creative__body,
  .adslot--passback .house-creative__body { font-size: 15px; }
  .adslot--inarticle .house-creative__brand,
  .adslot--passback .house-creative__brand {
    position: absolute;
    right: 14px;
    bottom: 14px;
  }
  .adslot--inarticle .house-creative__brand b,
  .adslot--passback .house-creative__brand b { font-size: 82px; }
}

/* bottom anchor (GAM out-of-page) — dismissible placeholder */
.anchor-ad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--paper);
  border-top: var(--rule);
  padding: 8px 0;
}
.anchor-ad .wrap { display: flex; align-items: center; gap: 10px; }
.anchor-ad .adslot-box { height: 74px; max-width: 728px; margin: 0 auto; flex: 1; }
.anchor-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  background: var(--paper);
  transition: background-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.anchor-close:hover { background: var(--y); }
.anchor-close:active { transform: scale(0.96); }
.anchor-close svg { width: 16px; height: 16px; }
body.has-anchor .footer-bottom .wrap { padding-bottom: 120px; }
@media (max-width: 620px) {
  .anchor-ad .adslot-box { height: 50px; gap: 1px; }
  .anchor-ad .house-creative {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "title action";
    gap: 8px;
    padding: 5px 7px;
  }
  .anchor-ad .house-creative__kicker,
  .anchor-ad .house-creative__brand,
  .anchor-ad .house-creative__action-label { display: none; }
  .anchor-ad .house-creative__title { font-size: 13px; }
  .anchor-ad .house-creative__action { width: 40px; padding: 0; }
}