/* Shared geometry only. Each publisher retains its own colours, identity and rules. */
:root {
  --preview-control-height: 44px;
  --preview-gutter: clamp(12px, 3vw, 40px);
  --preview-panel-shadow: 6px 6px 0 rgba(16, 36, 58, .12);
}

.taca-sitebar, .cup-header { min-height: 64px; padding-block: 8px; }
.taca-sitebar { padding-inline: var(--preview-gutter); }
.taca-sitebar nav a, .cup-tabs button, .brand-preview summary,
.taca-button, .taca-review-filters button { min-height: var(--preview-control-height); }
.taca-sitebar nav a { display: inline-flex; align-items: center; }
.taca-brand-mark { width: 44px; height: 44px; flex-shrink: 0; }
.taca-main { padding-inline: var(--preview-gutter); }
.taca-hero {
  margin-inline: calc(var(--preview-gutter) * -1);
  padding: 20px var(--preview-gutter);
  border-bottom-width: 6px;
}
.taca-hero h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em; }
.taca-hero p { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 75ch; }
.taca-hero .taca-eyebrow { margin-top: 0; font-size: 13px; }
.taca-hero-meta { margin-top: 12px; }
.cup-hero { padding-block: 20px; }
.cup-hero h1 { font-size: clamp(34px, 3.5vw, 48px); letter-spacing: -.025em; }
.taca-panel, .cup-grid > .panel, .campaign-tools { box-shadow: var(--preview-panel-shadow); }
.campaign-tools { border-radius: 0; border-top: 4px solid var(--demo-ink); }
.taca-panel-header, .taca-panel-body { padding-inline: 16px; }
.taca-fixture, .cup-question { container-type: inline-size; container-name: preview-fixture; }
.taca-table, .rank-table, .leaderboard-table { font-variant-numeric: tabular-nums; }
.taca-brand, .cup-brand { text-decoration: none; }
.taca-brand:focus-visible, .cup-brand:focus-visible { outline: 3px solid var(--taca-gold, var(--yellow)); outline-offset: 3px; }

/* Choose by available card width, including presenter embeds, not by screen width. */
@container preview-fixture (min-width: 340px) {
  .taca-fixture-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taca-pick { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 6px; min-height: 72px; padding: 8px; font-size: 14px; }
  .taca-team-crest { width: 36px; height: 36px; }
  .taca-pick-state { width: 20px; height: 20px; }
  .cup-question[data-question-type="advancer"] .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container preview-fixture (min-width: 500px) {
  .cup-question[data-question-type="match_winner"] .options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .publisher-header__inner { flex-wrap: wrap; gap: 0 12px; }
  .publisher-brand { font-size: 13px; }
  .publisher-brand img { width: 36px; height: 36px; }
  .publisher-nav { max-width: 100%; flex-wrap: wrap; }
  .publisher-nav a { font-size: 12px; padding-inline: 6px; }
  .buyer-intro--campaign { padding-block: 16px; }
  .buyer-intro--campaign .campaign-grid { gap: 12px; }
  .buyer-intro--campaign .campaign-contact { margin-top: 12px; }
  .campaign-tools { padding: 8px 12px; }
  .campaign-share { margin-top: 4px; }
  .taca-sitebar { gap: 0; }
  .taca-sitebar nav:not(.knockout-nav) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; white-space: normal; font-size: 12px; }
  .taca-sitebar nav a { min-width: 0; justify-content: center; text-align: center; }
  .taca-hero { padding-block: 16px; }
  .taca-hero h1 { font-size: 34px; }
  .cup-hero { padding: 16px 12px; }
  .cup-hero h1 { font-size: 34px; }
}

@container taca-preview (max-width: 580px) {
  .taca-main { padding-inline: 12px; }
  .taca-hero { padding: 16px 12px; margin-inline: -12px; }
  .taca-hero h1 { font-size: 34px; }
  .taca-hero p { font-size: 16px; }
  .taca-sitebar { padding-inline: 12px; }
  .taca-sitebar nav:not(.knockout-nav) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; white-space: normal; font-size: 12px; }
  .taca-sitebar nav a { min-width: 0; justify-content: center; text-align: center; }
}
@container cup-preview (max-width: 720px) {
  .cup-hero { padding: 16px 12px; }
  .cup-hero h1 { font-size: 34px; }
}