/* Site-wide layout redesign — home / articles / stories / topics
   Matches products density. No theme-color changes. */

.pg-hero, .articles-page .pg-hero, .stories-listing-head {
  text-align: left !important; max-width: 100% !important;
  padding: 28px 0 20px !important; margin: 0 !important;
}
.pg-hero h1, .articles-page .pg-hero h1, .stories-listing-head h1 {
  font-size: clamp(1.75rem, 4vw, 2.35rem) !important;
  letter-spacing: -0.04em !important; line-height: 1.15 !important;
  max-width: 22ch !important; margin: 0 0 8px !important;
}
.pg-hero h1 span, .articles-page .pg-hero h1 span { color: var(--accent-text) !important; }
.pg-eyebrow, .stories-listing-head .eyebrow {
  margin: 0 0 10px !important; font: 600 0.72rem/1 system-ui, sans-serif !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important;
}
.pg-eyebrow::before, .pg-eyebrow::after { display: none !important; }
.pg-sub, .stories-listing-head .lead {
  max-width: 42rem !important; margin: 0 0 16px !important;
  font-size: 0.98rem !important; line-height: 1.55 !important; color: var(--muted) !important;
}
.pg-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pg-btn {
  display: inline-flex !important; align-items: center !important; min-height: 40px !important;
  padding: 0 16px !important; border-radius: 999px !important;
  font: 600 0.88rem/1 system-ui, sans-serif !important; text-decoration: none !important;
}
.pg-btn-primary { background: var(--accent) !important; color: #0a0a0a !important; border: 1px solid var(--accent) !important; }
.pg-btn-ghost { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }

/* Homepage */
.hm-hero { min-height: auto !important; text-align: left !important; border-bottom: 1px solid var(--line) !important; }
.hm-hero-inner { padding-block: clamp(2rem, 5vw, 3.2rem) !important; text-align: left !important; }
.hm-hero h1 { max-width: 18ch !important; margin-inline: 0 !important; font-size: clamp(2.1rem, 5.5vw, 3.4rem) !important; letter-spacing: -0.05em !important; }
.hm-sub { margin: 0.75rem 0 0 !important; margin-inline: 0 !important; max-width: 36rem !important; font-size: 1rem !important; }
.hm-actions { justify-content: flex-start !important; margin-top: 1.25rem !important; }
.hm-btn { min-height: 42px !important; padding: 0 16px !important; font-size: 0.9rem !important; }
.hm-btn-primary { background: var(--accent) !important; color: #0a0a0a !important; border-color: var(--accent) !important; }
.hm-roles { padding-block: 1rem 0.25rem !important; text-align: left !important; }
.hm-roles .wrap, .hm-role-chips { justify-content: flex-start !important; }
.hm-section { padding-block: clamp(1.6rem, 4vw, 2.4rem) !important; }
.hm-head { margin-bottom: 1rem !important; }
.hm-head h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem) !important; letter-spacing: -0.035em !important; }
.hm-head p { font-size: 0.92rem !important; margin-top: 4px !important; }

.hm-lead { border-radius: 14px !important; margin-bottom: 12px !important; box-shadow: none !important; background: var(--surface) !important; }
.hm-lead.has-cover { grid-template-columns: 220px minmax(0, 1fr) !important; }
.hm-lead-media { min-height: 0 !important; aspect-ratio: 16 / 10 !important; border-right: 1px solid var(--line) !important; }
.hm-lead-copy { padding: 16px 18px !important; gap: 6px !important; }
.hm-lead h3 { max-width: none !important; font-size: 1.15rem !important; letter-spacing: -0.03em !important; }
.hm-lead p { font-size: 0.88rem !important; }

.hm-list .entries, .articles-page .entries, [data-discovery-entries] {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 14px !important;
  overflow: hidden !important; background: var(--surface) !important;
}
.entry, .hm-list .entry, .articles-page .entry, [data-discovery-entries] .entry {
  display: grid !important; grid-template-columns: 120px minmax(0, 1fr) auto !important;
  align-items: center !important; gap: 14px !important; margin: 0 !important;
  padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: var(--surface) !important; box-shadow: none !important; transform: none !important;
}
.entry:last-child, .hm-list .entry:last-child, .articles-page .entry:last-child { border-bottom: 0 !important; }
.entry:hover, .hm-list .entry:hover, .articles-page .entry:hover { background: var(--rank-soft) !important; transform: none !important; box-shadow: none !important; }
.entry.is-lead { grid-template-columns: 160px minmax(0, 1fr) auto !important; padding: 14px !important; }
.entry-media {
  width: 100% !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important;
  border-radius: 10px !important; overflow: hidden !important; border: 1px solid var(--line) !important; background: var(--surface-2) !important;
}
.entry-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.entry-body { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 0 !important; }
.entry-body .chip { align-self: flex-start !important; font-size: 0.68rem !important; padding: 2px 8px !important; border-radius: 6px !important; }
.entry-body h2, .entry-body h3 { margin: 0 !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; }
.entry-body h2 a, .entry-body h3 a { color: var(--ink) !important; text-decoration: none !important; }
.entry:hover .entry-body h2 a, .entry:hover .entry-body h3 a { color: var(--accent-text) !important; }
.entry-body p {
  margin: 0 !important; font-size: 0.84rem !important; color: var(--prose) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.entry-foot {
  display: flex !important; flex-direction: column !important; align-items: flex-end !important;
  gap: 2px !important; font-size: 0.72rem !important; color: var(--muted) !important; white-space: nowrap !important;
  padding: 0 !important; border: 0 !important;
}

.home-launches-grid {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 14px !important;
  overflow: hidden !important; background: var(--surface) !important;
}
.home-launch-card.launch-card, #launches-preview .launch-card {
  display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important; column-gap: 12px !important;
  padding: 12px 14px !important; margin: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--surface) !important; box-shadow: none !important;
}
#launches-preview .launch-card:last-child { border-bottom: 0 !important; }
#launches-preview .launch-card:hover { background: var(--rank-soft) !important; }
.home-launch-card .launch-icon-box, #launches-preview .launch-icon-box {
  grid-column: 1 !important; width: 48px !important; height: 48px !important; min-width: 48px !important;
  border-radius: 12px !important; border: 1px solid var(--line) !important; background: var(--surface-2) !important;
  display: grid !important; place-items: center !important; overflow: hidden !important;
}
.home-launch-card .launch-content, #launches-preview .launch-content { grid-column: 2 !important; min-width: 0 !important; }
.home-launch-card .launch-vote-box, #launches-preview .launch-vote-box { grid-column: 3 !important; }
#launches-preview .launch-badge {
  display: inline-flex !important; padding: 2px 8px !important; border-radius: 6px !important;
  background: var(--surface-2) !important; border: 1px solid var(--line) !important;
  font-size: 0.68rem !important; font-weight: 600 !important; color: var(--ink-soft) !important;
}

.hm-topics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
.hm-topic { min-height: 0 !important; padding: 14px !important; border-radius: 12px !important; box-shadow: none !important; }
.hm-topic:hover { transform: none !important; }
.hm-topic h3 { font-size: 1.02rem !important; }
.hm-topic p { font-size: 0.82rem !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

.hm-stories-grid, .story-cards-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important;
}
.story-card {
  border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden !important;
  background: var(--surface) !important; box-shadow: none !important; text-decoration: none !important;
}
.story-card:hover { background: var(--rank-soft) !important; transform: none !important; box-shadow: none !important; }
.story-card-media { aspect-ratio: 16 / 9 !important; background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important; }
.story-card-body { padding: 12px 14px 14px !important; }
.story-card-body h3 { font-size: 0.98rem !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 6px 0 !important; color: var(--ink) !important; }
.story-card-metrics { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 6px 0 !important; }
.story-metric {
  font-size: 0.72rem !important; padding: 3px 8px !important; border-radius: 6px !important;
  background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--ink-soft) !important;
}
.story-metric b { color: var(--accent-text) !important; }

/* Articles */
.articles-page { padding-top: 8px !important; padding-bottom: 3rem !important; }
.topic-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }
.topic-pill {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 6px 12px !important; border-radius: 999px !important; border: 1px solid var(--line) !important;
  background: var(--surface) !important; color: var(--muted) !important;
  font: 600 0.8rem/1 system-ui, sans-serif !important; text-decoration: none !important;
}
.topic-pill.is-active, .topic-pill[aria-current="page"] {
  background: var(--accent) !important; color: #0a0a0a !important; border-color: var(--accent) !important;
}
.content-discovery, .story-explorer-tools {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 14px !important;
  margin: 0 0 16px !important; padding: 12px 14px !important;
  border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface) !important;
}
.discovery-search {
  flex: 1 1 220px !important; min-height: 40px !important; padding: 0 12px !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  background: var(--bg) !important; color: var(--ink) !important; font-size: 0.92rem !important;
}
.discovery-controls { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; font-size: 0.82rem !important; color: var(--muted) !important; }
.discovery-controls select {
  min-height: 36px !important; padding: 0 10px !important; border-radius: 8px !important;
  border: 1px solid var(--line) !important; background: var(--bg) !important; color: var(--ink) !important;
}

/* Stories */
.stories-listing-page { padding: 8px 0 3rem !important; }
.stories-listing-head {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 200px !important;
  gap: 20px !important; align-items: start !important; margin-bottom: 18px !important;
  padding-bottom: 18px !important; border-bottom: 1px solid var(--line) !important;
}
.stories-listing-stats {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 14px !important;
  background: var(--surface) !important; border-left: 3px solid var(--accent) !important;
}
.stories-listing-stat strong { display: block !important; font-size: 1.35rem !important; letter-spacing: -0.03em !important; color: var(--accent-text) !important; }
.stories-listing-stat span { font-size: 0.75rem !important; color: var(--muted) !important; }
.story-featured-wrap { margin: 0 0 18px !important; }
.story-featured {
  display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden !important;
  background: var(--surface) !important; text-decoration: none !important; box-shadow: none !important;
}
.story-featured:hover { background: var(--rank-soft) !important; }
.story-featured-media { min-height: 0 !important; aspect-ratio: 16 / 10 !important; background: var(--surface-2) !important; border-right: 1px solid var(--line) !important; }
.story-featured-body { padding: 18px !important; }
.story-featured-body h2 { font-size: 1.25rem !important; letter-spacing: -0.03em !important; margin: 8px 0 !important; color: var(--ink) !important; }
.stories-grid-head { margin: 8px 0 12px !important; }
.stories-grid-head h2 { font-size: 1.1rem !important; letter-spacing: -0.02em !important; margin: 0 !important; }

/* Topics */
.topic-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; margin: 8px 0 2rem !important; }
.topic-tile {
  display: flex !important; flex-direction: column !important; gap: 8px !important; min-height: 0 !important;
  padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
  background: var(--surface) !important; text-decoration: none !important; box-shadow: none !important;
}
.topic-tile:hover { background: var(--rank-soft) !important; border-color: var(--line-strong) !important; transform: none !important; box-shadow: none !important; }
.topic-tile-head { display: flex !important; align-items: center !important; gap: 8px !important; }
.topic-tile h3 { margin: 0 !important; font-size: 1rem !important; letter-spacing: -0.02em !important; color: var(--ink) !important; }
.topic-tile p {
  margin: 0 !important; font-size: 0.82rem !important; line-height: 1.4 !important; color: var(--prose) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.topic-tile .count { margin-top: auto !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--accent-text) !important; }

.page.page-wide, .articles-page.page-wide { max-width: 1080px !important; margin-inline: auto !important; }

@media (max-width: 960px) {
  .hm-lead.has-cover, .story-featured { grid-template-columns: 1fr !important; }
  .hm-lead-media, .story-featured-media { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .hm-topics, .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hm-stories-grid, .story-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stories-listing-head { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .entry, .hm-list .entry, .articles-page .entry, .entry.is-lead {
    grid-template-columns: 72px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px 12px !important;
  }
  .entry-foot { display: none !important; }
  .hm-topics, .topic-grid, .hm-stories-grid, .story-cards-grid { grid-template-columns: 1fr !important; }
  .hm-btn { width: auto !important; max-width: none !important; }
  .hm-actions { flex-direction: row !important; }
}