.home-page { overflow: clip; }
.home-page .section { position: relative; }
.home-hero { position: relative; padding: var(--space-8) 0 var(--space-11); }
.home-hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 38rem; }
.home-hero__editorial { grid-column: 1 / span 6; align-self: center; min-width: 0; padding: var(--space-8) clamp(1.5rem, 4vw, 4rem) var(--space-9) 0; }
.home-hero__eyebrow { display: inline-flex; margin-bottom: var(--space-3); border-radius: var(--radius-small); background: var(--gradient-pop); color: var(--color-surface); padding: var(--space-2) var(--space-3); font-size: var(--text-small); font-weight: 700; }
.home-hero h1 { max-width: 33.75rem; }
.home-hero h1 span, .home-genres h2 span { color: var(--color-action); }
.home-hero__lead { max-width: 33.75rem; font-size: var(--text-lead); line-height: var(--leading-lead); }
.home-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.home-hero__actions > * { min-width: 0; }
.home-hero__helper { max-width: 31rem; margin-top: var(--space-3); margin-bottom: 0; color: var(--color-muted); font-size: var(--text-small); }
.home-hero__media { grid-column: 7 / span 6; grid-row: 1; min-width: 0; overflow: hidden; border-radius: 0 var(--radius-hero) var(--radius-hero) 0; background: var(--color-ink); clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.home-hero__record { position: absolute; z-index: 2; bottom: -2rem; left: 39%; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); width: min(25.5rem, 40%); min-width: 0; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-panel); box-shadow: var(--shadow-elevated); background: var(--color-surface); padding: var(--space-4); }
.home-hero__score { display: flex; min-width: 0; flex-direction: column; justify-content: center; border-right: var(--border-default); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.home-hero__score strong { font-family: var(--font-heading); font-size: 3rem; line-height: 1; }
.home-hero__score span { color: var(--color-muted); font-size: var(--text-meta); font-weight: 700; }
.home-hero__record-copy { min-width: 0; }
.home-hero__record-copy h2 { margin-top: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-component); }
.home-hero__record-copy p { margin-bottom: var(--space-3); font-size: var(--text-small); line-height: var(--leading-small); }
.home-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-hero__mini { position: absolute; z-index: 1; width: 7.5rem; aspect-ratio: 1; border: 2px solid var(--color-cyan); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(25,200,216,.76), rgba(233,30,131,.5)), var(--color-canvas-deep); transform: rotate(8deg); }
.home-hero__mini--one { right: 42%; top: 8%; }
.home-hero__mini--two { right: 34%; top: 21%; width: 7rem; border-color: var(--color-yellow); transform: rotate(-11deg); }
.home-dispatch__panel { border: var(--border-default); border-radius: var(--radius-panel); background: var(--color-surface); padding: var(--space-6); }
.home-dispatch__heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.home-dispatch__heading > * { min-width: 0; }
.home-dispatch__intro { max-width: 32.5rem; }
.home-dispatch__intro h2::after { display: block; width: 3rem; height: .1875rem; margin-top: var(--space-3); background: var(--color-action); content: ""; }
.home-dispatch__content { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); }
.home-dispatch__lead, .home-dispatch__rail { min-width: 0; }
.home-dispatch__lead-copy h3 { font-size: var(--text-component); }
.home-dispatch__rail { display: flex; flex-direction: column; gap: 0; }
.home-dispatch__row { min-width: 0; border-bottom: var(--border-default); padding: var(--space-4) 0; }
.home-dispatch__row:first-child { padding-top: 0; }
.home-dispatch__row:last-child { border-bottom: 0; padding-bottom: 0; }
.home-dispatch__row h3 { margin-bottom: var(--space-2); font-size: 1.125rem; }
.home-dispatch__row p:not(.meta) { margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.home-reviews__heading { max-width: 35rem; }
.home-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-review-card { min-width: 0; }
.home-review-card__body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.home-review-card__body > * { min-width: 0; margin: 0; }
.home-review-card__body h3 { font-size: var(--text-component); }
.home-review-card__body > p:not(.meta) { font-size: var(--text-small); line-height: var(--leading-small); }
.home-reviews__note { max-width: 42.5rem; margin-top: var(--space-5); margin-bottom: 0; color: var(--color-muted); font-size: var(--text-small); }
.home-guides__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.home-guides__intro { grid-column: 1 / span 5; min-width: 0; align-self: start; }
.home-guides__intro p:not(.eyebrow) { max-width: 32rem; }
.home-guides__space { grid-column: 6; min-width: 0; }
.home-guides__grid { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.home-guide-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-5); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.home-guide-card > * { min-width: 0; margin: 0; }
.home-guide-card__top { display: flex; width: 100%; min-width: 0; align-items: center; gap: var(--space-2); }
.home-guide-card__top > * { min-width: 0; }
.home-guide-card__top span { display: inline-grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: var(--radius-small); background: var(--color-cyan); color: var(--color-ink); font-family: var(--font-heading); font-weight: 800; }
.home-guide-card h3 { font-size: 1.25rem; }
.home-guide-card p:not(.meta) { font-size: var(--text-small); line-height: var(--leading-small); }
.home-guides__note { grid-column: 7 / span 6; max-width: 42rem; margin: 0; color: var(--color-muted); font-size: var(--text-small); }
.home-guides__splash { top: 20%; left: 37%; }
.home-patches__panel { position: relative; border: var(--border-default); border-radius: var(--radius-panel); background: var(--color-surface); padding: var(--space-6); overflow: hidden; }
.home-patches__panel::before { position: absolute; inset: 0 auto 0 0; width: .375rem; background: var(--gradient-pop); content: ""; }
.home-patches__intro { max-width: 37.5rem; }
.home-patches__rows { margin-top: var(--space-6); }
.home-patch-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-4); min-width: 0; border-bottom: var(--border-default); padding: var(--space-5) 0; }
.home-patch-row:first-child { border-top: var(--border-default); }
.home-patch-row > * { min-width: 0; }
.home-patch-row__version { display: flex; flex-direction: column; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.home-patch-row__version time { color: var(--color-muted); font-size: var(--text-small); }
.home-patch-row__story h3 { margin-bottom: var(--space-2); font-size: var(--text-component); }
.home-patch-row__story p { margin-bottom: 0; color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.home-patch-row__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.home-genres__heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.home-genres__heading > * { min-width: 0; }
.home-genres__heading > div { max-width: 31.25rem; }
.home-genres__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(11rem, 1fr)); gap: var(--space-4); }
.home-genre-card { position: relative; display: block; min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-surface); text-decoration: none; }
.home-genre-card:hover { color: var(--color-surface); }
.home-genre-card--featured { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.home-genre-card:nth-child(2) { grid-column: 7 / span 3; grid-row: 1; }
.home-genre-card:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; }
.home-genre-card:nth-child(4) { grid-column: 7 / span 6; grid-row: 2; }
.home-genre-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-fast); }
.home-genre-card:nth-child(2) img { object-position: 72% 45%; }
.home-genre-card:nth-child(3) img { object-position: 38% 58%; }
.home-genre-card:nth-child(4) img { object-position: 58% 22%; }
.home-genre-card__overlay { position: absolute; inset: 35% 0 0; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: end; gap: var(--space-2); background: linear-gradient(transparent, rgba(36,17,63,.9)); padding: var(--space-4); }
.home-genre-card__overlay > * { min-width: 0; }
.home-genre-card__overlay strong { font-family: var(--font-heading); font-size: 1.25rem; line-height: var(--leading-heading); }
.home-genre-card--featured .home-genre-card__overlay strong { font-size: var(--text-component); }
.home-genre-card__overlay small { color: var(--color-surface); font-size: var(--text-meta); line-height: var(--leading-meta); }
.home-feature__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); min-width: 0; border: var(--border-default); border-radius: var(--radius-panel); background: var(--color-surface); padding: var(--space-6); }
.home-feature__panel > * { min-width: 0; }
.home-feature__image { width: 100%; aspect-ratio: 16 / 9; align-self: center; }
.home-feature__copy { align-self: center; max-width: 37.5rem; }
.home-feature__copy h3 { font-size: var(--text-section); }
.home-feature__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.home-feature__links > * { min-width: 0; border-top: var(--border-default); padding-top: var(--space-4); }
.home-feature__links h3 { font-size: var(--text-component); }
.home-feature__links p:not(.eyebrow) { color: var(--color-muted); font-size: var(--text-small); }
.home-feature__all { display: inline-block; margin-top: var(--space-4); }
.home-picks__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
.home-picks__layout > * { min-width: 0; }
.home-picks__intro { max-width: 31.25rem; }
.home-picks__list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.home-pick-card { display: grid; grid-template-columns: .375rem minmax(0, 1fr) 2.75rem; min-width: 0; align-items: start; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-4); }
.home-pick-card > * { min-width: 0; }
.home-pick-card__marker { min-height: 100%; border-radius: var(--radius-small); background: var(--color-action); }
.home-pick-card__marker--cyan { background: var(--color-cyan); }
.home-pick-card__marker--yellow { background: var(--color-yellow); }
.home-pick-card h3 { margin-bottom: var(--space-2); font-size: var(--text-component); }
.home-pick-card p:not(.eyebrow) { margin-bottom: 0; color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.home-pick-card__arrow { display: grid; width: 2.75rem; min-height: 2.75rem; place-items: center; border: var(--border-default); border-radius: var(--radius-small); font-weight: 700; text-decoration: none; }
.home-community__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); border: var(--border-default); border-radius: var(--radius-panel); background: var(--color-surface); padding: var(--space-6); }
.home-community__panel > * { min-width: 0; }
.home-community__intro { position: relative; max-width: 32.5rem; }
.home-community__spark { display: inline-grid; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-3); place-items: center; border-radius: 50% 50% 45% 55%; background: var(--color-cyan); color: var(--color-ink); font-size: 1.5rem; }
.home-community__content { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-community__empty { min-width: 0; border-left: .25rem solid var(--color-cyan); background: var(--color-canvas); padding: var(--space-5); }
.home-community__empty h3 { font-size: var(--text-component); }
.home-community__empty p { max-width: 42rem; }
.home-route { padding-top: calc(var(--section-space) + var(--space-4)); }
.home-route__panel { position: relative; z-index: 1; width: min(100%, 62.5rem); margin-inline: auto; border: var(--border-default); border-radius: var(--radius-panel); background: var(--color-surface); padding: var(--space-7); text-align: center; }
.home-route__copy { max-width: 32.5rem; margin-inline: auto; }
.home-route__actions { display: flex; justify-content: center; gap: var(--space-2); }
.home-route__actions > * { min-width: 0; }
.home-route__splash { right: 10%; bottom: 10%; }
@media (hover: hover) and (pointer: fine) { .home-guide-card:hover { border-color: var(--color-action); box-shadow: var(--shadow-elevated); transform: translateY(-2px); } .home-genre-card:hover img { transform: scale(1.02); } }
@media (max-width: 63.9375rem) { .home-hero { padding-top: var(--space-6); } .home-hero__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 0; gap: 0; } .home-hero__editorial { grid-column: 1 / -1; padding: var(--space-5) 0 var(--space-6); } .home-hero__media { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 3; border-radius: var(--radius-hero); clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%); } .home-hero__record { position: relative; grid-column: 2 / span 6; grid-row: 3; bottom: auto; left: auto; width: 100%; margin-top: calc(var(--space-6) * -1); } .home-hero__mini--one { right: 8%; top: 42%; } .home-hero__mini--two { display: none; } .home-dispatch__content { grid-template-columns: minmax(0, 1fr); } .home-dispatch__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .home-dispatch__row { border-top: var(--border-default); border-bottom: 0; padding: var(--space-4) 0 0; } .home-dispatch__row:first-child { padding-top: var(--space-4); } .home-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-guides__layout { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-guides__intro { grid-column: 1 / -1; } .home-guides__space { display: none; } .home-guides__grid { grid-column: 1 / -1; } .home-guides__note { grid-column: 1 / -1; } .home-patch-row { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr); } .home-patch-row__action { grid-column: 2; flex-direction: row; align-items: center; } .home-genres__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto; } .home-genre-card--featured { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 7; } .home-genre-card:nth-child(2), .home-genre-card:nth-child(3) { grid-row: 2; grid-column: span 4; aspect-ratio: 4 / 3; } .home-genre-card:nth-child(4) { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 16 / 7; } .home-picks__layout, .home-community__panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 56.25rem) { .home-feature__panel { grid-template-columns: minmax(0, 1fr); } .home-feature__copy { max-width: 37.5rem; } }
@media (max-width: 44.9375rem) { .home-dispatch__panel, .home-patches__panel, .home-feature__panel, .home-community__panel { padding: var(--space-5); } .home-dispatch__heading, .home-genres__heading { align-items: flex-start; flex-direction: column; } .home-dispatch__rail { grid-template-columns: minmax(0, 1fr); } .home-dispatch__row, .home-dispatch__row:first-child { padding: var(--space-4) 0; border-bottom: var(--border-default); } .home-dispatch__row:last-child { border-bottom: 0; } .home-route__actions { flex-direction: column; } .home-route__actions > * { width: 100%; } }
@media (max-width: 39.9375rem) { .home-hero { padding-bottom: var(--space-8); } .home-hero__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-hero__editorial { padding-top: var(--space-3); } .home-hero h1 { font-size: clamp(2.375rem, 10vw, 2.625rem); } .home-hero__actions { flex-direction: column; } .home-hero__actions > * { width: 100%; } .home-hero__record { grid-column: 1 / -1; grid-template-columns: 5.25rem minmax(0, 1fr); margin-top: calc(var(--space-5) * -1); } .home-hero__mini--one { width: 5.25rem; right: 4%; top: 48%; } .home-dispatch__content, .home-reviews__grid, .home-guides__grid, .home-feature__links { grid-template-columns: minmax(0, 1fr); } .home-reviews__grid { gap: var(--space-4); } .home-guides__layout { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-guide-card { padding: var(--space-4); } .home-patch-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .home-patch-row__action { grid-column: 1; flex-direction: column; align-items: flex-start; } .home-genres__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; } .home-genre-card--featured, .home-genre-card:nth-child(2), .home-genre-card:nth-child(3), .home-genre-card:nth-child(4) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; } .home-feature__panel { gap: var(--space-4); } .home-pick-card { grid-template-columns: .375rem minmax(0, 1fr); } .home-pick-card__arrow { grid-column: 2; justify-self: end; } .home-route__panel { padding: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .home-guide-card:hover, .home-genre-card:hover img { transform: none; } }