/* Public home page (Components/Pages/Home.razor): the hero (carousel, XP event, live line, address, server board),
   the player's own band or the getting-started steps, an open staff position, the ranking (XP podium beside this
   week's hours), the live band (when it fills up, the hardest achievements, the latest unlocks), the week's
   moderation and the closing band (Discord and donations). Everything hangs from .homepage-wrapper so nothing leaks
   into other pages. Tokens only. The hero and the live band are dark in both themes: their on-dark colours are set
   once (.hero-section, .home-live-band). Lists sit on the page: only the server board (on the photo) has a box. */

.homepage-wrapper {
    position: relative;
    padding-bottom: 4rem;
}

.homepage-wrapper .content-container {
    position: relative;
    z-index: 1;
}

/* ---------- Hero ---------- */

/* It goes up under the transparent top bar (the main content keeps the bar's height as padding). */
/* The dark surfaces of the page (the hero over its photo, the live band): text, lines and "live" on graphite. */
.homepage-wrapper :is(.hero-section, .home-live-band) {
    --hero-text: var(--pn-on-dark);
    --hero-soft: color-mix(in srgb, var(--pn-on-dark) 88%, transparent);
    --hero-muted: color-mix(in srgb, var(--pn-on-dark) 74%, transparent);
    --hero-line: color-mix(in srgb, var(--pn-on-dark) 14%, transparent);
    --hero-live: var(--pn-data-on-dark);
}

.homepage-wrapper .hero-section {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(92dvh, 860px);
    margin-top: calc(-1 * var(--pn-appbar-h));
    padding-top: var(--pn-appbar-h);
    overflow: hidden;
    isolation: isolate;
    background: var(--pn-ink);
    color: var(--hero-text);
}

/* ---------- Carousel (HomeHeroSlides + customjs/hero-slider.js) ---------- */

.homepage-wrapper .hero-slider {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

/* Only the current slide (and, during a change, the one leaving) is visible. The current one slowly pushes in. */
.homepage-wrapper .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-color: var(--pn-ink);
    transform: scale(1);
    transition: transform 0s linear 1s, filter .9s var(--pn-ease-out);
}

.homepage-wrapper .hero-slide.active {
    z-index: 1;
    opacity: 1;
    transform: scale(1.06);
    transition: transform 9s linear;
}

/* The photo itself fills its slide (the focus point chosen in /admin/home is its object-position). */
.homepage-wrapper .hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The one leaving stays under the new one and dims while the wipe crosses it. */
.homepage-wrapper .hero-slide.leaving {
    opacity: 1;
    filter: brightness(.55);
}

/* The new one comes in from the right edge with the brand's diagonal (the cut corner, drawn across the image). */
@keyframes pn-hero-wipe {
    from { clip-path: polygon(130% 0, 115% 0, 115% 100%, 115% 100%); }
    to { clip-path: polygon(0 0, 115% 0, 115% 100%, -15% 100%); }
}

.homepage-wrapper .hero-slide.entering { animation: pn-hero-wipe .9s var(--pn-ease-out) both; }

/* The photo drifts at a third of the scroll speed, where the browser ties animations to the scroll. */
@keyframes pn-hero-drift {
    to { transform: translateY(30%); }
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .homepage-wrapper .hero-slider {
            animation: pn-hero-drift linear both;
            animation-timeline: scroll(root);
            animation-range: 0 100vh;
        }
    }
}

/* Captions of the slides: above the indicators, one at a time. */
.homepage-wrapper .hero-captions {
    position: absolute;
    left: 24px;
    right: 220px;
    bottom: 22px;
    pointer-events: none;
}

.homepage-wrapper .hero-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    max-width: 640px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--pn-dur) var(--pn-ease-out), transform var(--pn-dur) var(--pn-ease-out);
}

.homepage-wrapper .hero-caption.active:not(:empty) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .35s;
}

.homepage-wrapper .hero-caption-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .875rem;
    color: var(--hero-soft);
}

.homepage-wrapper .hero-caption-title { font-weight: 600; color: var(--hero-text); }

.homepage-wrapper .hero-caption-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pn-brand-on-dark);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .hero-caption-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

.homepage-wrapper .hero-caption-link:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

/* Indicators (the active one fills during the interval: it is the clock of the carousel) and the pause button. */
.homepage-wrapper .hero-section { --hero-interval: 7s; }

.homepage-wrapper .hero-controls {
    position: absolute;
    right: 24px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.homepage-wrapper .slider-indicators { display: flex; gap: 6px; }

.homepage-wrapper .indicator {
    position: relative;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

/* The visible bar is 3px; the button stays 24px tall so it is easy to hit. */
.homepage-wrapper .indicator::before,
.homepage-wrapper .indicator-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 3px;
    border-radius: var(--pn-radius-sm);
}

.homepage-wrapper .indicator::before {
    content: "";
    background: color-mix(in srgb, var(--pn-on-dark) 32%, transparent);
    transition: background-color var(--pn-dur-fast) ease;
}

.homepage-wrapper .indicator-fill {
    background: var(--hero-text);
    transform: scaleX(0);
    transform-origin: left center;
}

.homepage-wrapper .indicator.active .indicator-fill { transform: scaleX(1); }

@keyframes pn-hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.homepage-wrapper .hero-section[data-ready]:not([data-static]) .indicator.active .indicator-fill {
    animation: pn-hero-progress var(--hero-interval) linear both;
}

.homepage-wrapper .hero-section:is([data-hold], [data-focus], [data-paused], [data-hidden]) .indicator-fill {
    animation-play-state: paused !important;
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .indicator:hover::before { background: color-mix(in srgb, var(--pn-on-dark) 60%, transparent); }
}

.homepage-wrapper :is(.indicator, .hero-pause):focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
    border-radius: var(--pn-radius-md);
}

.homepage-wrapper .hero-pause {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--pn-on-dark) 25%, transparent);
    border-radius: 50%;
    background: rgba(var(--pn-ink-rgb), .6);
    color: var(--hero-text);
    cursor: pointer;
    transition: background-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.homepage-wrapper .hero-pause:active { transform: scale(.94); }
.homepage-wrapper .hero-pause .hero-play-icon,
.homepage-wrapper .hero-pause[aria-pressed="true"] .hero-pause-icon { display: none; }
.homepage-wrapper .hero-pause[aria-pressed="true"] .hero-play-icon { display: block; }

/* On touch screens the controls take a full fingertip; the visible bar stays 3px. */
@media (pointer: coarse) {
    .homepage-wrapper .indicator { width: 44px; height: 44px; }
    .homepage-wrapper .indicator::before,
    .homepage-wrapper .indicator-fill { left: 6px; right: 6px; top: 20px; }
    .homepage-wrapper .slider-indicators { gap: 0; }
    .homepage-wrapper .hero-pause { width: 44px; height: 44px; }
}

/* Without autoplay (reduced motion) the pause button means nothing. */
.homepage-wrapper .hero-section[data-static] .hero-pause { display: none; }

/* ---------- Hero entrance: the title is unmasked from below, then the rest rises in, once ---------- */

@keyframes pn-hero-title {
    from { clip-path: inset(100% -5% -20% -5%); transform: translateY(.3em); }
    to { clip-path: inset(-20% -5% -20% -5%); transform: none; }
}

@keyframes pn-hero-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.homepage-wrapper .hero-title { animation: pn-hero-title .8s var(--pn-ease-out) .1s backwards; }

.homepage-wrapper .hero-enter {
    animation: pn-hero-in .5s var(--pn-ease-out) backwards;
    animation-delay: calc(.35s + var(--i, 0) * 70ms);
}

/* ---------- The running XP event: the hero's one glowing moment ---------- */

.homepage-wrapper .hero-event {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
    padding: 6px 14px 6px 10px;
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-primary);
    box-shadow: var(--pn-glow);
    font-size: .875rem;
    color: var(--mud-palette-primary-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: transform var(--pn-dur-press) var(--pn-ease-out);
}

.homepage-wrapper .hero-event strong { font-weight: 700; }
.homepage-wrapper .hero-event:active { transform: scale(.97); }

.homepage-wrapper .hero-event:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 3px;
}

/* One scrim: dark at the bottom and on the left where the text is, a little at the top for the bar. */
.homepage-wrapper .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(var(--pn-ink-rgb), .6) 0%, rgba(var(--pn-ink-rgb), .2) 30%, rgba(var(--pn-ink-rgb), .45) 60%, rgba(var(--pn-ink-rgb), .92) 100%),
        linear-gradient(90deg, rgba(var(--pn-ink-rgb), .7) 0%, transparent 70%);
}

/* The text on the left, the server board on the right; one column below md. */
.homepage-wrapper .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: end;
    gap: 32px 56px;
    width: 100%;
    max-width: var(--pn-page-max);
    margin: 0 auto;
    padding: 4rem 24px 6rem;
}

.homepage-wrapper .hero-main { max-width: 640px; }

.homepage-wrapper .hero-title {
    margin: 0 0 .75rem;
    font-family: var(--pn-font-display);
    font-size: clamp(2.75rem, 6.5vw, 4.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.homepage-wrapper .hero-subtitle {
    max-width: 52ch;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--hero-soft);
    text-wrap: pretty;
}

/* Who is playing now, or when it usually fills up: one sentence, not a row of boxes. */
.homepage-wrapper .hero-live {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.5rem 0 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hero-text);
}

.homepage-wrapper .hero-live .pn-live-dot { background: var(--hero-live); }
.homepage-wrapper .hero-live .mud-icon-root { color: var(--hero-muted); }

/* The running season (or the next one): a quiet link under the live line, a dot in the season's colour, no glow. */
.homepage-wrapper .hero-season {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: .5rem 0 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--hero-soft);
    text-decoration: none;
    text-wrap: pretty;
}

.homepage-wrapper .hero-season-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--pn-radius-sm);
    background: var(--season, var(--pn-brand-on-dark));
    transform: rotate(45deg);
}

.homepage-wrapper .hero-season .mud-icon-root {
    color: var(--hero-muted);
    transition: transform var(--pn-dur-press) var(--pn-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .hero-season:hover { color: var(--hero-text); }
    .homepage-wrapper .hero-season:hover .mud-icon-root { transform: translateX(3px); }
}

.homepage-wrapper .hero-season:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 3px;
}

.homepage-wrapper .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 2rem;
}

/* The page's main action: the address players type in the game, copied on click. */
.homepage-wrapper .hero-address {
    min-height: 52px;
    padding: 0 20px;
    border-radius: var(--pn-radius-md) !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.homepage-wrapper .hero-address .mud-button-label { gap: 10px; }

.homepage-wrapper .hero-address-value {
    overflow: hidden;
    font-family: var(--pn-font-mono);
    font-size: .95rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.homepage-wrapper .hero-address-label {
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    white-space: nowrap;
}

.homepage-wrapper .hero-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 2px;
    font-weight: 600;
    color: var(--hero-text);
    text-decoration: none;
}

.homepage-wrapper .hero-join .mud-icon-root { transition: transform var(--pn-dur) var(--pn-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .hero-join:hover { text-decoration: underline; text-underline-offset: 4px; }
    .homepage-wrapper .hero-join:hover .mud-icon-root { transform: translateX(3px); }
}

.homepage-wrapper .hero-join:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

/* ---------- Server board (HomeServerBoard) ---------- */

.homepage-wrapper .home-board {
    padding: 16px 20px 14px;
    border: 1px solid var(--hero-line);
    border-radius: var(--pn-radius);
    background: rgba(var(--pn-ink-rgb), .78);
    color: var(--hero-text);
}

.homepage-wrapper .home-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.homepage-wrapper .home-board-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.homepage-wrapper .home-board-count {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--hero-muted);
}

.homepage-wrapper .home-board-list {
    margin: 8px 0 4px;
    padding: 0;
    list-style: none;
}

.homepage-wrapper .home-board-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--hero-line);
}

.homepage-wrapper .home-board-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hero-muted);
}

.homepage-wrapper .home-board-dot.pn-live-dot { background: var(--hero-live); }
.homepage-wrapper .home-board-row.is-offline .home-board-dot { background: color-mix(in srgb, var(--pn-on-dark) 35%, transparent); }

.homepage-wrapper .home-board-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.homepage-wrapper .home-board-server {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.homepage-wrapper .home-board-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: .8rem;
    color: var(--hero-muted);
}

.homepage-wrapper .home-board .pn-mode-chip {
    font-size: .72rem;
    color: color-mix(in srgb, var(--pn-mode) 45%, var(--pn-on-dark));
}

.homepage-wrapper .home-board-row.is-offline .home-board-server { color: var(--hero-muted); }

.homepage-wrapper .home-board-players {
    font-variant-numeric: tabular-nums;
    color: var(--hero-muted);
    white-space: nowrap;
}

.homepage-wrapper .home-board-players strong {
    font-family: var(--pn-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--hero-text);
}

.homepage-wrapper .home-board-meter {
    grid-column: 2 / -1;
    height: 4px;
    background: var(--hero-line);
    --pn-meter-color: var(--hero-live);
}

.homepage-wrapper .home-board-empty .pn-empty { padding: 20px 0 12px; color: var(--hero-soft); }
.homepage-wrapper .home-board-empty .pn-empty :is(strong, .mud-icon-root) { color: var(--hero-text); }

.homepage-wrapper .home-board-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-weight: 600;
    color: var(--pn-brand-on-dark);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .home-board-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

.homepage-wrapper .home-board-link:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

/* ---------- Sections ---------- */

.homepage-wrapper .home-section { margin-top: 4rem; }
.homepage-wrapper .content-container > .home-section:first-child { margin-top: 3rem; }

.homepage-wrapper .home-section-title {
    margin: 0 0 1.25rem;
    font-family: var(--pn-font-display);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.homepage-wrapper .home-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 1.25rem;
}

.homepage-wrapper .home-section-head .home-section-title { margin: 0; }

.homepage-wrapper .home-note {
    margin: .75rem 0 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--pn-brand-text);
    text-decoration: none;
}

.homepage-wrapper .home-link .mud-icon-root { transition: transform var(--pn-dur) var(--pn-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .home-link:hover { text-decoration: underline; text-underline-offset: 4px; }
    .homepage-wrapper .home-link:hover .mud-icon-root { transform: translateX(3px); }
}

.homepage-wrapper :is(.home-link, .home-week a, .home-chip-link, .home-me-stat a):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

/* The initial of a player in a solid brand disc (dark mode: the light violet takes ink, like every fill). */
.homepage-wrapper .home-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
}

.homepage-wrapper .home-avatar--lg { width: 56px; height: 56px; font-size: 1.5rem; }

/* ---------- Getting started (a real sequence, so it is numbered) ---------- */

.homepage-wrapper .home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--pn-line);
    list-style: none;
}

.homepage-wrapper .home-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 32px 28px 0;
}

.homepage-wrapper .home-step + .home-step {
    padding-left: 32px;
    border-left: 1px solid var(--pn-line);
}

.homepage-wrapper .home-step-number {
    margin-bottom: 6px;
    font-family: var(--pn-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-brand-text);
    font-variant-numeric: tabular-nums;
}

.homepage-wrapper .home-step-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-step-text {
    max-width: 44ch;
    margin: 0 0 8px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-step .home-link { margin-top: auto; }

/* ---------- The player's own band (HomePlayerCard) ---------- */

.homepage-wrapper .home-me {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pn-line);
}

.homepage-wrapper .home-me-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.homepage-wrapper .home-me-head .home-section-title { margin: 0; }
.homepage-wrapper .home-me-head .home-note { margin-top: 2px; }

.homepage-wrapper .home-me-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.homepage-wrapper .home-me-stat {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 24px;
}

.homepage-wrapper .home-me-stat + .home-me-stat { border-left: 1px solid var(--pn-line); }

.homepage-wrapper .home-me-stat dt {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-me-stat dd {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-me-stat dd small {
    font-family: var(--pn-font-text);
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-me-stat dd a { color: var(--pn-brand-text); text-decoration: none; }

.homepage-wrapper .home-me-goal {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-me-goal--top { flex-direction: row; align-items: center; font-weight: 600; }
.homepage-wrapper .home-me-goal--top .mud-icon-root { color: var(--pn-brand-text); }

.homepage-wrapper .home-me-meter { height: 8px; }

.homepage-wrapper .home-me-links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.homepage-wrapper .home-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-surface);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .home-chip-link:hover { border-color: var(--mud-palette-primary); }
}

.homepage-wrapper .home-chip-link:active { transform: scale(.97); }

@media (pointer: coarse) {
    .homepage-wrapper .home-chip-link { min-height: 44px; }
}

/* ---------- Ranking: the XP podium beside this week's hours ---------- */

.homepage-wrapper .home-rank-grid--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px 56px;
    align-items: start;
}

.homepage-wrapper .home-rank .pn-podium { margin-bottom: 0; }
.homepage-wrapper .home-rank-more { margin-top: 1rem; }

.homepage-wrapper .home-week {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pn-line);
    list-style: none;
}

.homepage-wrapper .home-week > li { border-bottom: 1px solid var(--pn-line); }

.homepage-wrapper .home-week-star {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.homepage-wrapper .home-week-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.homepage-wrapper .home-week-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pn-brand-text);
}

.homepage-wrapper .home-week-name {
    overflow: hidden;
    font-family: var(--pn-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.homepage-wrapper .home-week-hours {
    font-family: var(--pn-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.homepage-wrapper .home-week-hours small {
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-week-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
}

.homepage-wrapper .home-week-pos {
    min-width: 1.5em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-week-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.homepage-wrapper .home-week-row-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper :is(.home-week-name, .home-week-row-name):hover { color: var(--pn-brand-text); }
}

/* ---------- Closing band: Discord and donations ---------- */

.homepage-wrapper .home-close {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding-top: 36px;
    border-top: 1px solid var(--pn-line);
}

.homepage-wrapper .home-close-part {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 48px;
}

.homepage-wrapper .home-close-part + .home-close-part {
    padding-left: 48px;
    border-left: 1px solid var(--pn-line);
}

.homepage-wrapper .home-close-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--pn-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-close-title .mud-icon-root { color: var(--mud-palette-text-secondary); }

.homepage-wrapper .home-close-text {
    max-width: 60ch;
    margin: 0 0 16px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-close-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.homepage-wrapper .home-close-facts li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-close-facts .mud-icon-root {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--mud-palette-success);
}

.homepage-wrapper .home-close-button {
    margin-top: auto;
    padding: .65rem 1.4rem;
    border-radius: var(--pn-radius-md) !important;
    text-transform: none;
}

/* Donating is a key moment: the only call to action of the page that glows. */
.homepage-wrapper .support-button { box-shadow: var(--pn-glow); }

/* ---------- Live touches ---------- */

/* A server's player count bumps when it changes (a new element each time: HomeServerBoard keys it on the value). */
.homepage-wrapper .home-board-now {
    display: inline-block;
    animation: pn-bump .45s var(--pn-ease-out);
}

/* The level in the middle of the player's ring. */
.homepage-wrapper .home-me-level {
    font-family: var(--pn-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.homepage-wrapper .home-me-head .pn-tier { margin-top: 4px; }

/* The heat map lights up in a diagonal sweep (--d = day + hour, ActivityHeatmap) the first time it is seen. */
@keyframes pn-heat-in {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: none; }
}

.pn-reveal-on .homepage-wrapper [data-reveal][data-revealed] .pn-heatmap-grid .pn-heatmap-cell {
    animation: pn-heat-in .45s var(--pn-ease-out) backwards;
    animation-delay: calc(var(--d, 0) * 16ms);
}

.homepage-wrapper .home-sub-title {
    margin: 0 0 12px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Open staff position (HomeOpenPosition) ---------- */

/* The position's own colour is data (staff-chosen, like a plan accent): it tints the strip and its icon only. */
.homepage-wrapper .home-position {
    --home-position-line: color-mix(in srgb, var(--home-accent) 45%, var(--pn-line));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    padding: 24px 28px;
    border: 1px solid var(--home-position-line);
    border-radius: var(--pn-radius);
    background: color-mix(in srgb, var(--home-accent) 9%, var(--mud-palette-surface));
}

.homepage-wrapper .home-position-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--pn-radius);
    background: color-mix(in srgb, var(--home-accent) 18%, transparent);
    color: color-mix(in srgb, var(--home-accent) 70%, var(--mud-palette-text-primary));
}

.homepage-wrapper .home-position-title {
    margin: 0 0 4px;
    font-family: var(--pn-font-display);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.homepage-wrapper .home-position-text {
    max-width: 70ch;
    margin: 0;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-position-text strong { color: var(--mud-palette-text-primary); font-weight: 600; }

.homepage-wrapper .home-position-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.homepage-wrapper .home-position-button {
    padding: .6rem 1.3rem;
    border-radius: var(--pn-radius-md) !important;
    text-transform: none;
}

/* ---------- The live band (Home.razor + HomeAchievements): the community, dark in both themes ---------- */

/* The page's second world after the hero: full width, Graphite Ink, no gradient. The tokens the pieces inside read
   (heat map, meters, links, notes) are pointed at their night values once here, so they all read on graphite. */
.homepage-wrapper .home-live-band {
    --mud-palette-text-primary: var(--pn-on-dark);
    --mud-palette-text-secondary: var(--hero-muted);
    --mud-palette-primary: var(--pn-brand-night);
    --mud-palette-primary-rgb: var(--pn-brand-night-rgb);
    --mud-palette-secondary: var(--pn-data-on-dark);
    --mud-palette-action-default-hover: color-mix(in srgb, var(--pn-on-dark) 12%, transparent);
    --pn-line: var(--hero-line);
    --pn-brand-text: var(--pn-brand-on-dark);
    --pn-brand-soft: rgba(var(--pn-brand-night-rgb), .18);
    --pn-data: var(--pn-data-on-dark);
    margin-top: 5rem;
    padding-block: 4.5rem;
    background: var(--pn-ink);
    color: var(--hero-text);
}

.homepage-wrapper .home-live-inner {
    max-width: var(--pn-page-max);
    margin: 0 auto;
    padding-inline: 24px;
}

.homepage-wrapper .home-live-band .home-section-title { margin-bottom: 2rem; }

/* When it fills up beside the hardest achievements; the latest unlocks run along the bottom of the band. */
.homepage-wrapper .home-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px 56px;
    align-items: start;
}

.homepage-wrapper .home-live-grid--when { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.homepage-wrapper .home-ach-recent { grid-column: 1 / -1; }

.homepage-wrapper .home-live-band .home-sub-title { color: var(--hero-soft); }

.homepage-wrapper .home-ach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.homepage-wrapper .home-ach-head .home-sub-title { margin: 0; }

/* Stops the ticker (customjs/shell.js toggles aria-pressed and the ticker's data-paused). */
.homepage-wrapper .home-ticker-pause {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pn-line);
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.homepage-wrapper .home-ticker-pause:active { transform: scale(.94); }

.homepage-wrapper .home-ticker-pause:focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .home-ticker-pause:hover { border-color: var(--mud-palette-primary); }
}

.homepage-wrapper .home-ticker-pause .home-ticker-play-icon,
.homepage-wrapper .home-ticker-pause[aria-pressed="true"] .home-ticker-pause-icon { display: none; }
.homepage-wrapper .home-ticker-pause[aria-pressed="true"] .home-ticker-play-icon { display: block; }

.homepage-wrapper .home-live-band :is(.home-ticker-text a, .home-link):focus-visible {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

.homepage-wrapper .home-ach-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pn-brand-soft);
    color: var(--pn-brand-text);
}

/* The ticker: two copies of the list side by side, the track slides by one copy and starts again. */
.homepage-wrapper .home-ticker {
    overflow: hidden;
    border-block: 1px solid var(--pn-line);
    /* Only the alpha of a mask counts: the ends fade out. */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.homepage-wrapper .home-ticker-track { display: flex; width: max-content; }

.homepage-wrapper .home-ticker-list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homepage-wrapper .home-ticker:not(.is-moving) .home-ticker-track,
.homepage-wrapper .home-ticker:not(.is-moving) .home-ticker-list { width: auto; flex-wrap: wrap; }

.homepage-wrapper .home-ticker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px 14px 0;
    white-space: nowrap;
}

.homepage-wrapper .home-ticker-text { display: flex; flex-direction: column; line-height: 1.3; }

.homepage-wrapper .home-ticker-text a,
.homepage-wrapper .home-ticker-text > span:first-child {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .homepage-wrapper .home-ticker-text a:hover { color: var(--pn-brand-text); }
}

.homepage-wrapper .home-ticker-ach { font-size: .875rem; color: var(--mud-palette-text-secondary); }

.homepage-wrapper .home-ticker-time {
    align-self: flex-end;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

@keyframes pn-ticker {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
    .homepage-wrapper .home-ticker.is-moving .home-ticker-track {
        animation: pn-ticker calc(var(--n, 10) * 3.2s) linear infinite;
    }

    .homepage-wrapper .home-ticker.is-moving:is(:hover, :focus-within, [data-paused]) .home-ticker-track {
        animation-play-state: paused;
    }
}

/* Without movement there is no loop: the copy and the pause button go and the list wraps. On a phone it never
   moves (a crawl you have to chase with a thumb), it is the latest few, one under the other. */
@media (prefers-reduced-motion: reduce) {
    .homepage-wrapper .home-ticker { mask-image: none; }
    .homepage-wrapper .home-ticker-track,
    .homepage-wrapper .home-ticker-list { width: auto; flex-wrap: wrap; }
    .homepage-wrapper .home-ticker-list[aria-hidden],
    .homepage-wrapper .home-ticker-pause { display: none; }
}

@media (max-width: 600px) {
    .homepage-wrapper .home-ticker { mask-image: none; }
    .homepage-wrapper .home-ticker .home-ticker-track { animation: none !important; }
    .homepage-wrapper .home-ticker-track,
    .homepage-wrapper .home-ticker-list { width: auto; flex-direction: column; }
    .homepage-wrapper .home-ticker-list[aria-hidden],
    .homepage-wrapper .home-ticker-pause { display: none; }
    .homepage-wrapper .home-ticker-item:nth-child(n + 7) { display: none; }
    .homepage-wrapper .home-ticker-item { padding: 12px 0; border-top: 1px solid var(--pn-line); white-space: normal; }
    .homepage-wrapper .home-ticker-item:first-child { border-top: 0; }
    .homepage-wrapper .home-ticker-time { align-self: center; margin-left: auto; }
}

.homepage-wrapper .home-rare {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pn-line);
    list-style: none;
}

.homepage-wrapper .home-rare-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pn-line);
}


.homepage-wrapper .home-rare-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.homepage-wrapper .home-rare-name { font-weight: 600; color: var(--mud-palette-text-primary); }
.homepage-wrapper .home-rare-text { font-size: .875rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }

.homepage-wrapper .home-rare-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-rare-meter {
    flex: 0 0 96px;
    height: 4px;
    --pn-meter-color: var(--pn-data);
}

/* ---------- Fair play this week (HomeFairPlay) ---------- */

.homepage-wrapper .home-fair { max-width: 980px; }

.homepage-wrapper .home-fair-sentence {
    max-width: 34ch;
    margin: 0;
    font-size: clamp(1.375rem, 2.8vw, 2.125rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.homepage-wrapper .home-fair-sentence strong {
    font-family: var(--pn-font-display);
    font-weight: 700;
    font-size: 1.15em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.homepage-wrapper .home-fair-split { margin-top: 24px; max-width: 640px; }

.homepage-wrapper .home-fair-bar {
    height: 10px;
    overflow: hidden;
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-lines-inputs);
}

.homepage-wrapper .home-fair-accepted {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--mud-palette-success);
    transform-origin: left center;
}

.pn-reveal-on .homepage-wrapper [data-reveal][data-revealed] .home-fair-accepted {
    animation: pn-fill .9s var(--pn-ease-out) .2s backwards;
}

.homepage-wrapper .home-fair-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.homepage-wrapper .home-fair-legend span { display: inline-flex; align-items: center; gap: 8px; }

.homepage-wrapper .home-fair-key {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-lines-inputs);
}

.homepage-wrapper .home-fair-key--accepted { background: var(--mud-palette-success); }

.homepage-wrapper .home-fair-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 24px 0 0;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 960px) {
    .homepage-wrapper .hero-section { min-height: 0; }
    .homepage-wrapper .hero-content { grid-template-columns: minmax(0, 1fr); padding: 4.5rem 24px 6.5rem; }

    .homepage-wrapper .home-section { margin-top: 3rem; }
    .homepage-wrapper .home-rank-grid--split { grid-template-columns: minmax(0, 1fr); }

    .homepage-wrapper .home-steps { grid-template-columns: minmax(0, 1fr); }

    .homepage-wrapper .home-step,
    .homepage-wrapper .home-step + .home-step {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 4px 12px;
        padding: 20px 0;
        border-left: 0;
    }

    .homepage-wrapper .home-step + .home-step { border-top: 1px solid var(--pn-line); }
    .homepage-wrapper .home-step-number { grid-row: span 3; margin: 0; font-size: 2rem; }
    .homepage-wrapper .home-step .home-link { margin-top: 4px; }

    .homepage-wrapper .home-me { grid-template-columns: minmax(0, 1fr); }
    .homepage-wrapper .home-me-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .homepage-wrapper .home-me-stat,
    .homepage-wrapper .home-me-stat + .home-me-stat { padding: 0; border-left: 0; }

    .homepage-wrapper .home-close { display: block; }

    .homepage-wrapper .home-live-band { margin-top: 3rem; padding-block: 3rem; }
    .homepage-wrapper .home-live-grid--when { grid-template-columns: minmax(0, 1fr); }

    .homepage-wrapper .home-position { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
    .homepage-wrapper .home-position-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }

    .homepage-wrapper .home-close-part,
    .homepage-wrapper .home-close-part + .home-close-part { padding: 0; border-left: 0; }

    .homepage-wrapper .home-close-part + .home-close-part {
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid var(--pn-line);
    }
}

@media (max-width: 600px) {
    .homepage-wrapper .hero-content { padding: 3.5rem 16px 7.5rem; }
    .homepage-wrapper .hero-captions { left: 16px; right: 16px; bottom: 58px; }
    .homepage-wrapper .hero-controls { right: 16px; bottom: 16px; }
    .homepage-wrapper .hero-actions { flex-direction: column; align-items: stretch; gap: 4px; }
    .homepage-wrapper .hero-address { width: 100%; }
    .homepage-wrapper .hero-join { justify-content: center; }
    .homepage-wrapper .home-board { padding: 14px 16px 10px; }
    .homepage-wrapper .home-week-hours { font-size: 1.4rem; }
    .homepage-wrapper .home-live-inner { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-wrapper :is(.home-link, .hero-join) .mud-icon-root { transition: none; transform: none !important; }
    .homepage-wrapper .home-chip-link:active { transform: none; }
    .homepage-wrapper :is(.hero-title, .hero-enter, .home-board-now, .pn-heatmap-cell, .home-fair-accepted) { animation: none !important; }
    .homepage-wrapper .home-ticker-pause:active { transform: none; }
    .homepage-wrapper .hero-slide,
    .homepage-wrapper .hero-slide.active { transform: none; transition: opacity .4s ease; }
    .homepage-wrapper .hero-slide.entering { animation: none; }
}

/* The streak of days played under the numbers (StreakSummary, styled in my-profile.css). */
.homepage-wrapper .home-me-streak {
    display: flex;
    margin-top: 14px;
}

/* This week's challenges, compact (the full list is /profile?tab=retos). */
.homepage-wrapper .home-me-challenges {
    margin-top: 14px;
}

.homepage-wrapper .home-me-challenges-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.homepage-wrapper .home-me-challenges-head > span:last-child {
    display: inline-flex;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.homepage-wrapper .home-me-challenges-head:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

.homepage-wrapper .home-me-challenges ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.homepage-wrapper .home-me-challenges li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 40%);
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.homepage-wrapper .home-me-challenge-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.homepage-wrapper .home-me-challenges li.is-done .home-me-challenge-name .mud-icon-root {
    color: var(--mud-palette-success);
}

.homepage-wrapper .home-me-challenges li.is-done .home-me-meter {
    --pn-meter-color: var(--mud-palette-success);
}

/* In dark mode the page itself is Graphite Ink: the band steps up to the raised surface with an edge line so it still
   reads as its own world. */
:is(.pn-dark, html[data-theme="dark"]) .homepage-wrapper .home-live-band {
    border-block: 1px solid var(--hero-line);
    background: var(--mud-palette-surface);
}

/* Right after the band the closing section needs no rule of its own: the band's edge already divides them. */
.homepage-wrapper .home-live-band + .content-container > .home-close:first-child {
    padding-top: 0;
    border-top: 0;
}