.genre-page{max-width:var(--measure);margin:0 auto;padding:0 1.25rem 3rem}.genre-crumbs{margin:0 0 1.25rem;padding-top:1rem}.genre-crumbs ol{letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;gap:.35rem .5rem;margin:0;padding:0;font-size:.72rem;font-weight:700;list-style:none;display:flex}.genre-crumbs li:not(:last-child):after{content:"/";color:var(--text-3);margin-left:.5rem}.genre-crumbs a{color:var(--text-3);text-decoration:none}.genre-crumbs a:hover,.genre-crumbs [aria-current=page]{color:var(--accent)}.genre-hero{align-items:center;gap:1.75rem;margin-bottom:2.25rem;display:grid}@media (width>=56rem){.genre-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem}}.genre-eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .55rem;font-size:.72rem;font-weight:700}.genre-hero h1{font-family:var(--serif);letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(2rem,4vw,2.85rem);font-weight:600;line-height:1.1}.genre-lede{color:var(--text-2);max-width:42ch;margin:0 0 1rem;font-size:1.02rem}.genre-facet-pills{flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;display:flex}.genre-facet-pills a{border:1px solid var(--rule);border-radius:var(--radius-1);min-height:2.25rem;color:var(--ink);background:color-mix(in oklab, var(--card) 80%, transparent);align-items:center;padding:.4rem .85rem;font-size:.88rem;text-decoration:none;display:inline-flex}.genre-facet-pills a:hover{border-color:var(--accent);color:var(--accent)}.genre-trust{color:var(--text-2);margin:0 0 1.15rem;font-size:.9rem}.genre-trust strong{color:var(--accent);font-weight:700}.genre-hero-actions{flex-wrap:wrap;gap:.65rem;display:flex}.genre-play-cta{border-radius:var(--radius-1);background:var(--accent);min-height:44px;color:var(--on-accent);align-items:center;gap:.55rem;padding:.7rem 1.15rem;font-weight:700;text-decoration:none;display:inline-flex}.genre-play-cta:hover{filter:brightness(1.05);color:var(--on-accent)}.genre-play-icon{font-size:.75rem}.genre-save-cta{border:1px solid color-mix(in oklab, var(--accent) 70%, transparent);border-radius:var(--radius-1);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;background:0 0;padding:.7rem 1.15rem;font-weight:650}.genre-save-cta:hover,.genre-save-cta[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.genre-cover-fan{isolation:isolate;z-index:0;justify-content:center;align-items:flex-end;height:16rem;display:flex;position:relative;overflow:hidden}.genre-fan-item{border-radius:4px;width:8.5rem;margin-left:-4.25rem;position:absolute;bottom:0;left:50%;overflow:hidden;box-shadow:0 12px 28px #00000073}.genre-fan-item:first-child{z-index:1;transform:translate(-4.2rem)rotate(-8deg)scale(.94)}.genre-fan-item:nth-child(2){z-index:3;transform:translate(0)rotate(0)scale(1)}.genre-fan-item:nth-child(3){z-index:2;transform:translate(4.2rem)rotate(8deg)scale(.94)}.genre-fan-item img{aspect-ratio:2/3;object-fit:contain;background:var(--card);width:100%;height:auto;display:block}.genre-start-split{gap:1.5rem;margin-bottom:2.5rem;display:grid}@media (width>=56rem){.genre-start-split{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);align-items:start;gap:1.75rem}}.genre-classic{border:1px solid var(--rule);border-radius:var(--radius-1);background:var(--card);padding:1.15rem}.genre-classic-body{gap:1rem;display:grid}@media (width>=40rem){.genre-classic-body{grid-template-columns:7.5rem minmax(0,1fr);gap:1.25rem}}.genre-classic-cover{width:min(100%,7.5rem);display:block}.genre-classic-kicker{color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .35rem;font-size:.72rem;font-weight:700}.genre-classic-copy h3{font-family:var(--serif);margin:0 0 .35rem;font-size:1.35rem}.genre-classic-copy h3 a{color:inherit;text-decoration:none}.genre-classic-byline,.genre-classic-meta{color:var(--muted);margin:0 0 .55rem;font-size:.9rem}.genre-classic-byline a{color:inherit}.genre-classic-teaser{color:var(--text-2);margin:0 0 .85rem;font-size:.95rem;line-height:1.45}.genre-classic-actions{flex-wrap:wrap;align-items:center;gap:.85rem;display:flex}.genre-view-link{color:var(--accent);font-weight:650;text-decoration:none}.genre-view-link:hover{text-decoration:underline}.genre-explore{border:1px solid var(--rule);border-radius:var(--radius-1);background:color-mix(in oklab, var(--card) 70%, transparent);padding:1.15rem}.genre-explore h2{font-family:var(--serif);margin:0 0 .85rem;font-size:1.2rem}.genre-explore ul{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.genre-explore a{border-bottom:1px solid var(--rule);color:inherit;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.65rem .15rem;text-decoration:none;display:flex}.genre-explore li:last-child a{border-bottom:0}.genre-explore a:hover .genre-explore-label{color:var(--accent-hover)}.genre-explore-label{color:var(--accent);margin-bottom:.2rem;font-weight:700;display:block}.genre-explore-blurb{color:var(--text-3);font-size:.85rem;display:block}.genre-explore-meta{color:var(--text-3);flex-shrink:0;align-items:center;gap:.35rem;font-size:.85rem;display:inline-flex}.genre-popular{margin-bottom:2.5rem}.genre-popular-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.15rem;display:flex}.genre-popular-head h2{font-family:var(--serif);margin:0 0 .25rem;font-size:1.45rem}.genre-popular-sub{color:var(--text-3);margin:0;font-size:.92rem}.genre-popular-tools{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.genre-sort-label{color:var(--text-2);margin:0;font-size:.85rem;font-weight:650}.genre-view-toggle{border:1px solid var(--rule);border-radius:var(--radius-1);display:inline-flex;overflow:hidden}.genre-view-toggle button{min-height:36px;color:var(--text-3);font:inherit;cursor:pointer;background:0 0;border:0;padding:.35rem .7rem;font-size:.8rem;font-weight:650}.genre-view-toggle button.is-active{background:color-mix(in oklab, var(--accent) 18%, transparent);color:var(--accent)}.genre-poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem .85rem;margin:0;padding:0;list-style:none;display:grid}@media (width>=40rem){.genre-poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=56rem){.genre-poster-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}.genre-poster-grid.is-list{grid-template-columns:1fr}.genre-poster-card{flex-direction:column;gap:.35rem;display:flex}.genre-poster{color:inherit;flex-direction:column;gap:.35rem;text-decoration:none;display:flex}.genre-poster-author{color:var(--muted);font-size:.82rem;text-decoration:none}.genre-poster-author:hover{color:var(--accent)}.genre-poster-grid.is-list .genre-poster-card{grid-template-columns:4.5rem minmax(0,1fr);align-items:center;gap:.35rem 1rem;display:grid}.genre-poster-grid.is-list .genre-poster{display:contents}.genre-poster-grid.is-list .genre-poster-art{grid-row:1/span 3}.genre-poster-art{display:block;position:relative}.genre-poster-play{background:var(--accent);width:2rem;height:2rem;color:var(--on-accent);border-radius:999px;place-items:center;font-size:.7rem;display:grid;position:absolute;bottom:.45rem;right:.45rem;box-shadow:0 4px 12px #00000059}.genre-poster-title{font-size:.92rem;font-weight:650;line-height:1.25}.genre-poster-author,.genre-poster-meta{color:var(--muted);font-size:.82rem}.genre-see-all{text-align:center;margin:1.25rem 0 0}.genre-see-all a{color:var(--accent);font-weight:650;text-decoration:none}.genre-see-all a:hover{text-decoration:underline}.genre-seo{border-top:1px solid var(--rule);gap:1.75rem;padding-top:.5rem;display:grid}@media (width>=48rem){.genre-seo{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:2rem}}.genre-about h2,.genre-related h2{font-family:var(--serif);margin:0 0 .75rem;font-size:1.25rem}.genre-about p{color:var(--text-2);margin:0 0 .85rem;font-size:.95rem;line-height:1.5}.genre-related ul{gap:.45rem;margin:0;padding:0;list-style:none;display:grid}.genre-related a{border:1px solid var(--rule);border-radius:var(--radius-1);color:var(--ink);justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem .85rem;font-weight:650;text-decoration:none;display:flex}.genre-related a:hover{border-color:var(--accent);color:var(--accent)}
