/* Fluid mid-range tuning */
@media (max-width: 1080px){
.split{
grid-template-columns:1fr;
gap:var(--s-4);
}

.section{
padding: var(--s-5) var(--s-3);
}

.hero{
padding:var(--s-5)var(--s-3);
}
}

/* Sidebar collapses into anoff-canvas drawer*/
@media(max-width: 768px){
.nav-toggle{
display: inline-flex;
}

.sidebar{
transform: translateX(-100%);
transition:transform0.28s var(--ease);
width:min(84vw,300px);
flex-basis: min(84vw,300px);
padding-top:76px;
}

.sidebar.is-open{
transform: translateX(0);
}

.nav-scrim.is-open{
display: block;
}

.main{
margin-left:0;
}

.hero{
padding: 96px var(--s-3)var(--s-5);
}

.section{
padding: var(--s-5)var(--s-3);
}

body{
font-size:16px;
}

.hero-lede,
.lede{
font-size:1.04rem;
}

.card p,
.rolep{
font-size:0.94rem;
}

.role{
flex-direction:column;
}

.filter-bar{
gap: 8px;
}

.chip{
font-size:0.85rem;
padding:7px14px;
}

.hero-stats{
grid-template-columns: repeat(2,1fr);
gap:var(--s-2);
}

.ascii{
font-size:0.6rem;
}
}

@media (max-width: 420px){
.hero-stats{
grid-template-columns:1fr;
}

.btn{
width:100%;
justify-content: center;
}
}

/* Motion &pointer preferences */
@media (prefers-reduced-motion: reduce){
html{
scroll-behavior:auto;
}

*{
animation-duration: 0.001ms!important;
transition-duration: 0.001ms !important;
}
}

@media(hover: hover) and(pointer:fine){
.cursor-dot{
display:block;
}
}

@media print{
.sidebar,
.nav-toggle,
.cursor-dot,
.filter-bar{
display: none !important;
}

.main{
margin-left:0;
}
}