.homepage-preview {
  --hp-ink: #16243a;
  --hp-muted: #526278;
  --hp-line: #dce4ef;
  --hdr-accent-snow: #2563eb;
  --hdr-accent-storm: #4f46e5;
  --hdr-accent-elections: #a855f7;
  --hdr-accent-econ: #22c55e;
  --hdr-accent-sports: #f59e0b;
  margin: 0;
  color: var(--hp-ink);
  background: #f7f9fd;
}

.homepage-preview .hdr-nav-wrap,
.homepage-preview .hp-shell {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 0;
}

.hp-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
}

.hp-section-head a, .hp-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
}

.hp-section { margin-block: 26px; }
.hp-section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  line-height: 1.2;
  font-weight: 820;
  letter-spacing: -.025em;
}

.hp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.hp-section-head h2 { margin: 0; }
.hp-metrics, .hp-directory, .hp-articles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hp-metrics:has(.snow:not([hidden])) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.hp-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.homepage-preview .hdr-card {
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.homepage-preview .storm { --topic: var(--hdr-accent-storm); --topic-ink: #4038ac; --topic-tint: #eeedff; }
.homepage-preview .elections { --topic: var(--hdr-accent-elections); --topic-ink: #7335a1; --topic-tint: #f6edff; }
.homepage-preview .econ { --topic: var(--hdr-accent-econ); --topic-ink: #16633b; --topic-tint: #e9f7ef; }
.homepage-preview .sports { --topic: var(--hdr-accent-sports); --topic-ink: #85520b; --topic-tint: #fff3dc; }
.homepage-preview .snow { --topic: var(--hdr-accent-snow); --topic-ink: #1949a0; --topic-tint: #e8f0ff; }

.hp-metrics .hp-metric, .hp-directory .hp-group {
  border-top: 3px solid var(--topic);
}
.hp-metric, .hp-articles .article-card { display: flex; flex-direction: column; }
.homepage-preview [hidden] { display: none !important; }

.hp-metric h3, .hp-group h3 {
  margin: 0 0 8px;
  color: var(--topic-ink);
  font-size: .95rem;
  line-height: 1.3;
  font-weight: 800;
}

.hp-value {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.035em;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.hp-sub, .hp-date, .hp-feed-status, .hp-articles .meta { color: var(--hp-muted); }
.hp-sub { margin: 4px 0 0; font-size: .875rem; }
.hp-date { margin: 4px 0 0; font-size: .75rem; }
.hp-date:empty, .hp-feed-status:empty { display: none; }

.hp-sub:empty { display: none; }
.hp-odds, .hp-meter { margin-top: auto; padding-top: 8px; }
.hp-odds:not([data-ready]) { display: none; }
.hp-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--topic) var(--pct, 0%), var(--topic-tint) var(--pct, 0%));
}
.hp-odds .hp-track {
  background: linear-gradient(to right, #1d4ed8 var(--dem-pct, 0%),
    var(--gap-color) var(--dem-pct, 0%) calc(100% - var(--rep-pct, 0%)),
    #dc2626 calc(100% - var(--rep-pct, 0%)));
}
#homepageCsiMeter .hp-track {
  background: linear-gradient(to right, var(--topic-tint) var(--start, 50%),
    var(--topic) var(--start, 50%) var(--end, 50%), var(--topic-tint) var(--end, 50%));
}
.hp-split {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.hp-articles h3 { margin: 6px 0 4px; font-size: 1.075rem; line-height: 1.35; font-weight: 750; }
.hp-articles .meta { display: none; }
.hp-articles .tag {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--topic-tint, #edf0f5);
  color: var(--topic-ink, #354359);
  font-size: .75rem;
  font-weight: 700;
}
.hp-articles .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--topic); }
.hp-feed-status { margin: 0 0 8px; font-size: .8rem; }

.hp-group ul { margin: 0; padding: 0; list-style: none; }
.hp-group li + li { border-top: 1px solid #edf0f5; }
.hp-group a { display: flex; align-items: center; min-height: 44px; font-size: .9rem; text-decoration: none; }

.homepage-preview :is(.hp-shell, .hdr-nav) :is(a, button):focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
.homepage-preview .hp-shell a:not(.hp-metric, .article-card):hover { text-decoration: underline; }
.homepage-preview .footer { padding-bottom: 16px; }
.homepage-preview .footer .footer-press img { max-width: 46vw; height: auto; max-height: 70px; }
.homepage-preview .footer .row { display: flex; justify-content: space-between; margin-inline: 0; }

.hp-skip {
  position: absolute;
  z-index: 10;
  top: 4px;
  left: 16px;
  padding: 10px 14px;
  background: #fff;
  transform: translateY(-150%);
}
.hp-skip:focus { transform: none; }

@media (max-width: 991px) {
  .hp-metrics, .hp-metrics:has(.snow:not([hidden])), .hp-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .hp-articles, .hp-directory { grid-template-columns: minmax(0, 1fr); }
  .hp-metrics .hp-metric { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-preview .hdr-card { transition: none; }
  .homepage-preview .hdr-card:hover { transform: none; }
}