/* Empty groundwork may fit a narrow viewport. A future live 320px Google unit
   must instead be suppressed below 320px; an ad creative may never be scaled. */
.reserved-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; container: ad / inline-size; }
.reserved-ad-heading, .sponsor-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.reserved-ad-heading { width: min(728px, 100%); }
.reserved-ad-heading > span, .sponsor-heading > span { text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.reserved-ad-heading a, .sponsor-heading a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-weight: 600; }
.reserved-ad-box { width: min(728px, 100%); height: 90px; border-radius: var(--radius-ad); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ad-note { font-size: 12px; color: var(--muted); text-align: center; }
.sponsor-slot { display: flex; flex-direction: column; gap: 8px; width: 300px; }
.workspace-support .sponsor-slot { justify-self: center; }
.sponsor-heading { width: 100%; }
.sponsor-frame { display: block; width: 100%; height: 250px; border: 0; border-radius: var(--radius-ad); background: var(--surface-sunken); }
.directory-ad:not(:has([data-ad-slot])), .help-ad:not(:has([data-ad-slot])), .about-ad:not(:has([data-ad-slot])) { display: none; }
@container ad (max-width: 760px) {
  .reserved-ad-box { width: min(320px, 100%); height: 100px; }
  .reserved-ad-heading { width: min(320px, 100%); }
}