/* Softer typography, scoped to the homepage so editorial text stays unchanged. */
.home-page {
  --home-heading-ink: rgba(231, 226, 245, .78);
}

.home-page [data-home-section][hidden] { display: none !important; }

.home-page .section-head h2,
.home-page .community-leaderboard__head h2,
.home-page .community-activity__head h2 {
  color: var(--home-heading-ink);
  text-shadow: 0 2px 14px rgba(2, 3, 12, .42);
}

.home-page .hero-top .eyebrow {
  color: rgba(218, 195, 238, .8);
  text-shadow: 0 2px 10px rgba(2, 3, 12, .7);
}

.home-page .hero-top .subtitle {
  color: rgba(233, 226, 245, .78);
  text-shadow: 0 2px 12px rgba(2, 3, 12, .75);
}

.home-page .home-about h2 {
  color: rgba(226, 215, 242, .72);
  text-shadow: 0 2px 20px rgba(2, 3, 12, .3);
}

.home-page .home-about h3 {
  color: var(--home-heading-ink);
}

.home-page .section-feed-toggle:hover,
.home-page .section-feed-toggle:focus-visible {
  color: rgba(241, 234, 253, .92);
  background: rgba(195, 164, 236, .04);
  text-shadow: 0 2px 14px rgba(2, 3, 12, .42);
}

.home-page .section-head > span {
  background: linear-gradient(90deg, transparent, rgba(204, 192, 230, .29));
}

.home-page .section-head::after {
  background: linear-gradient(90deg, rgba(204, 192, 230, .29), transparent);
}

/* Keep controls inside the collapsible feed, with the existing card widths. */
.home-page .rail-arrow {
  display: grid;
  place-items: center;
  top: calc(50% - 5px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(208, 188, 245, .34);
  border-radius: 50%;
  color: rgba(237, 228, 255, .94);
  background: linear-gradient(145deg, rgba(33, 25, 49, .78), rgba(7, 11, 26, .86));
  box-shadow: 0 4px 18px rgba(1, 3, 12, .32), inset 0 1px 0 rgba(240, 225, 255, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0;
  text-shadow: none;
  touch-action: manipulation;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}

.home-page .rail-arrow.left { left: 4px; }
.home-page .rail-arrow.right { right: 4px; }
.home-page .rail-arrow[hidden] { display: none !important; }

.home-page .rail-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (hover: hover) {
  .home-page .rail-arrow:not(:disabled):hover {
    color: #e4f6ff;
    border-color: rgba(159, 220, 239, .7);
    background: linear-gradient(145deg, rgba(51, 36, 72, .9), rgba(13, 26, 42, .94));
  }
}

.home-page .rail-arrow:focus-visible {
  outline: 2px solid #9cdeed;
  outline-offset: -4px;
}

.home-page .rail-arrow:disabled {
  opacity: .24;
  cursor: default;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .rail-arrow { transition: none; }
}

@media (prefers-contrast: more) {
  .home-page .section-head h2,
  .home-page .community-leaderboard__head h2,
  .home-page .community-activity__head h2,
  .home-page .hero-top .eyebrow,
  .home-page .hero-top .subtitle,
  .home-page .home-about h2,
  .home-page .home-about h3 { color: #f1edfa; }
  .home-page .rail-arrow { border-color: #d6c9ef; }
}