.content-hub-page main {
  padding-bottom: 28px;
}

.content-hub-hero__shell {
  min-height: auto;
  padding: 60px 56px;
}

.content-hub-hero__content {
  gap: 30px;
}

.content-hub-hero__intro {
  width: min(100%, 980px);
}

.content-hub-hero__text {
  max-width: 52ch;
}

.content-hub-chip-list,
.content-hub-tag-list,
.content-hub-source-links,
.content-hub-anchor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-hub-chip-list span,
.content-hub-source-links a,
.content-hub-anchor-list a,
.content-hub-tag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(12, 24, 44, 0.08);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.content-hub-source-links a,
.content-hub-anchor-list a {
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.content-hub-source-links a:hover,
.content-hub-anchor-list a:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(10, 99, 230, 0.16);
  box-shadow: 0 12px 22px rgba(14, 37, 69, 0.08);
}

.content-hub-stat-grid,
.content-hub-story-grid,
.content-hub-term-grid,
.content-hub-cluster-grid,
.content-hub-path-grid,
.content-hub-related-grid {
  display: grid;
  gap: 16px;
}

.content-hub-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-hub-story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-hub-term-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-hub-cluster-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-hub-path-grid,
.content-hub-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-hub-stat-card,
.content-hub-story-card,
.content-hub-term-card,
.content-hub-cluster-card,
.content-hub-path-card,
.content-hub-related-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(23, 104, 255, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95));
  border: 1px solid rgba(12, 24, 44, 0.06);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.content-hub-stat-card:hover,
.content-hub-story-card:hover,
.content-hub-term-card:hover,
.content-hub-cluster-card:hover,
.content-hub-path-card:hover,
.content-hub-related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(10, 99, 230, 0.14);
  box-shadow: 0 18px 36px rgba(14, 37, 69, 0.1);
}

.content-hub-stat-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 178px;
}

.content-hub-stat-card span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-hub-stat-card strong {
  display: block;
  color: var(--text);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.content-hub-stat-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.72;
}

.content-hub-story-card,
.content-hub-term-card,
.content-hub-cluster-card,
.content-hub-path-card,
.content-hub-related-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
}

.content-hub-story-card__meta,
.content-hub-term-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.content-hub-story-card__eyebrow,
.content-hub-term-card__letter,
.content-hub-cluster-card__eyebrow,
.content-hub-path-card__eyebrow,
.content-hub-related-card__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 99, 230, 0.08);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-hub-story-card__date,
.content-hub-term-card__source {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.content-hub-story-card h3,
.content-hub-term-card h3,
.content-hub-cluster-card h3,
.content-hub-path-card h3,
.content-hub-related-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: -0.04em;
}

.content-hub-story-card p,
.content-hub-term-card p,
.content-hub-cluster-card p,
.content-hub-path-card p,
.content-hub-related-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.75;
}

.content-hub-story-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  flex-wrap: wrap;
}

.content-hub-tag-list span {
  min-height: 32px;
  padding: 0 12px;
  background: rgba(10, 99, 230, 0.08);
  border-color: rgba(10, 99, 230, 0.08);
  color: var(--primary);
  font-size: 12px;
}

.content-hub-outline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.content-hub-outline li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.68;
}

.content-hub-outline li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1768ff, #69e3ff);
}

.content-hub-cluster-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-hub-metric-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 99, 230, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.content-hub-related-card__links {
  display: grid;
  gap: 10px;
}

.content-hub-related-card__links .card-link {
  justify-self: start;
}

.content-hub-section-note {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.72;
}

@media (max-width: 1180px) {
  .content-hub-stat-grid,
  .content-hub-path-grid,
  .content-hub-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-hub-cluster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .content-hub-hero__shell {
    padding: 42px 28px;
  }

  .content-hub-stat-grid,
  .content-hub-story-grid,
  .content-hub-term-grid,
  .content-hub-cluster-grid,
  .content-hub-path-grid,
  .content-hub-related-grid {
    grid-template-columns: 1fr;
  }

  .content-hub-story-card,
  .content-hub-term-card,
  .content-hub-cluster-card,
  .content-hub-path-card,
  .content-hub-related-card,
  .content-hub-stat-card {
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .content-hub-hero__shell {
    padding: 32px 20px;
  }

  .content-hub-story-card h3,
  .content-hub-term-card h3,
  .content-hub-cluster-card h3,
  .content-hub-path-card h3,
  .content-hub-related-card h3 {
    font-size: 22px;
  }

  .content-hub-chip-list span,
  .content-hub-source-links a,
  .content-hub-anchor-list a,
  .content-hub-tag-list span {
    min-height: 34px;
    font-size: 12px;
  }
}

.tag-replica-page {
  background: #f8f8f9;
}

/* .tag-replica-page .site-header__inner {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
} */

.tag-replica-page .site-shell,
.tag-detail-page .site-shell {
  overflow: visible;
}

.tag-replica-index {
  overflow: visible;
}

.tag-replica-hot {
  padding: 48px 0;
}

.tag-replica-hot .section-intro {
  display: grid;
  justify-content: start;
  gap: 10px;
}

.tag-replica-hot .section-intro p {
  max-width: none;
  white-space: nowrap;
  text-align: left;
}

.tag-replica-hero,
.tag-detail-hero {
  background:
    linear-gradient(180deg, rgba(245, 248, 255, 0.96), rgba(248, 248, 249, 1)),
    #f8f8f9;
  border-bottom: 1px solid rgba(12, 24, 44, 0.06);
}

.tag-detail-hero {
  background: transparent;
  border-bottom: 0;
}

.tag-replica-hero__inner,
.tag-detail-hero__inner {
  display: grid;
  gap: 24px;
  padding-top: 104px;
  padding-bottom: 58px;
}

.tag-replica-hero h1,
.tag-detail-title h1 {
  margin: 12px 0 14px;
  color: #1b2c50;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.tag-replica-hero p,
.tag-detail-title p {
  max-width: 780px;
  margin: 0;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.78;
}

.tag-replica-hero p {
  max-width: none;
  white-space: nowrap;
}

.tag-detail-title p span {
  color: var(--text);
  font-weight: 800;
}

.tag-replica-stats,
.tag-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-replica-stats span,
.tag-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(12, 24, 44, 0.08);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(14, 37, 69, 0.06);
}

.tag-replica-stats strong,
.tag-detail-meta strong {
  margin-right: 6px;
  color: #1b2c50;
  font-size: 20px;
}

.tag-replica-hot > .section-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tag-detail-page .section > .section-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tag-hot-grid,
.tag-detail-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.tag-hot-link,
.tag-detail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(12, 24, 44, 0.07);
  box-shadow: 0 14px 30px rgba(14, 37, 69, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tag-hot-link:hover,
.tag-detail-link:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 90, 255, 0.22);
  box-shadow: 0 18px 34px rgba(14, 37, 69, 0.1);
}

.tag-hot-link strong,
.tag-detail-link strong {
  display: -webkit-box;
  flex: 1 1 auto;
  overflow: hidden;
  color: #1b2c50;
  font-size: 18px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tag-hot-link span {
  flex: 0 0 auto;
  color: #708199;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.tag-detail-link span {
  display: -webkit-box;
  flex: 0 0 auto;
  max-height: calc(1.6em * 4);
  overflow: hidden;
  color: #8892af;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.tag-hot-link span {
  color: #8892af;
  font-size: 14px;
  font-weight: 400;
}

.tag-index-layout {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.tag-anchor-panel {
  position: sticky;
  top: calc(var(--header-height, 96px) + 18px);
  align-self: start;
  max-height: calc(100svh - var(--header-height, 96px) - 36px);
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(12, 24, 44, 0.07);
  box-shadow: 0 12px 26px rgba(14, 37, 69, 0.06);
  overscroll-behavior: contain;
}

.tag-anchor-panel__title {
  margin-bottom: 10px;
  color: #1b2c50;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.08em;
}

.tag-anchor-grid {
  display: grid;
  grid-template-columns: repeat(2, 28px);
  justify-content: center;
  gap: 4px;
}

.tag-anchor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #8892af;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tag-anchor-link:hover {
  color: #2d5aff;
  background: rgba(45, 90, 255, 0.06);
  transform: translateY(-1px);
}

.tag-anchor-link:focus-visible,
.tag-anchor-link.is-active {
  color: #2d5aff;
  background: rgba(45, 90, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(45, 90, 255, 0.26), 0 8px 18px rgba(45, 90, 255, 0.14);
  outline: none;
}

.tag-index-section:target h2 {
  color: #2d5aff;
}

.tag-index-section:target .tag-index-section__line {
  background: linear-gradient(90deg, rgba(45, 90, 255, 0.3), rgba(45, 90, 255, 0.08));
}

.tag-index-list {
  display: grid;
  gap: 40px;
}

.tag-index-section {
  scroll-margin-top: 124px;
}

.tag-index-section h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: #333;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0;
}

.tag-index-section__line {
  height: 1px;
  flex: 1;
  background: #ebebeb;
}

.tag-index-grid,
.tag-related-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 20px;
}

.tag-index-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(12, 24, 44, 0.07);
  box-shadow: 0 14px 30px rgba(14, 37, 69, 0.06);
  color: #1b2c50;
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.tag-index-link:hover {
  color: #1b2c50;
  transform: translateY(-2px);
  border-color: rgba(45, 90, 255, 0.22);
  box-shadow: 0 18px 34px rgba(14, 37, 69, 0.1);
}

.tag-index-link__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-index-link__count {
  flex-shrink: 0;
}

.tag-index-link__new {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(45, 90, 255, 0.08);
  color: #2d5aff;
  font-size: 10px;
  font-weight: 900;
}

.tag-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #8892af;
  font-size: 14px;
  font-weight: 800;
}

.tag-detail-breadcrumb a {
  color: #1b2c50;
}

.tag-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .tag-hot-grid,
  .tag-detail-link-grid,
  .tag-index-grid,
  .tag-related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tag-replica-hero__inner,
  .tag-detail-hero__inner {
    padding-top: 82px;
    padding-bottom: 38px;
  }

  .tag-index-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tag-anchor-panel {
    position: sticky;
    top: calc(var(--header-height, 82px) + 12px);
    z-index: 8;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.94);
  }

  .tag-anchor-grid {
    grid-template-columns: repeat(13, 1fr);
  }

  .tag-anchor-link {
    width: 100%;
  }

  .tag-index-section h2 {
    margin-bottom: 12px;
    font-size: 24px;
  }

  .tag-index-grid,
  .tag-related-list,
  .tag-hot-grid,
  .tag-detail-link-grid {
    grid-template-columns: 1fr;
  }

  .tag-index-list {
    gap: 26px;
  }
}
