:root{--pz:#f06a4f}
html{scroll-padding-top:24px}
.modHero{position:relative;isolation:isolate;min-height:760px;padding:170px 8vw 90px;display:flex;align-items:end;overflow:hidden;color:#fffdf7}
.modHeroImage,.modHeroShade{position:absolute;inset:0;z-index:-2}
.modHeroImage{background:url("../../assets/games/project-zomboid.jpg") center/cover;transform:scale(1.025)}
.modHeroShade{z-index:-1;background:linear-gradient(90deg,rgba(10,10,9,.98) 0%,rgba(10,10,9,.83) 50%,rgba(10,10,9,.28) 100%),linear-gradient(0deg,rgba(10,10,9,.8),transparent 60%)}
.modHeroContent{max-width:1050px}
.modHeroContent .backButton{width:max-content;margin:0 0 34px;padding:12px 15px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.42);background:rgba(17,17,15,.62);color:#fffdf7;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px)}
.modHeroContent .backButton:hover,.modHeroContent .backButton:focus-visible{border-color:var(--pz);background:var(--pz);color:var(--ink)}
.modHeroContent .backButton span:first-child{font-size:17px}
.modHeroContent>p:first-of-type{margin:0;color:var(--pz);font-size:11px;font-weight:950;letter-spacing:.22em}
.modHero h1{margin:26px 0 34px;font-size:clamp(78px,10vw,150px);line-height:.9;letter-spacing:-.075em}
.modHero h1 em{color:var(--pz);font-style:normal}
.modHeroContent>p:nth-of-type(2){max-width:660px;margin:0 0 34px;color:#d0cbc1;font-size:18px;line-height:1.65}
.modHeroContent>a:not(.backButton){display:inline-flex;align-items:center;gap:38px;padding:18px 22px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.modHeroContent>a:not(.backButton) b{color:#ae503c;font-size:18px}
.modStats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--pz);color:var(--ink)}
.modStats>div{min-height:150px;padding:28px 4vw;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(17,17,15,.28)}
.modStats span{font-size:9px;font-weight:950;letter-spacing:.16em}
.modStats strong{font-size:clamp(34px,4vw,58px);line-height:.9;letter-spacing:-.045em}
.modMain{padding:105px 7vw 120px;background:var(--paper);color:var(--ink)}
.modIntro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,560px);gap:8vw;align-items:end;padding-bottom:45px;border-bottom:5px solid var(--ink)}
.modIntro .kicker{margin:0;color:#ae503c;font-size:10px;font-weight:950;letter-spacing:.2em}
.modIntro h2{max-width:850px;margin:16px 0 0;font-size:clamp(48px,7vw,98px);line-height:.92;letter-spacing:-.065em}
.modIntro>p{margin:0;color:#625e57;font-size:16px;line-height:1.7}
.modControls{margin:34px 0 22px;display:flex;align-items:end;justify-content:space-between;gap:28px}
.modControls label{width:min(100%,620px);display:grid;gap:9px}
.modControls label span{font-size:9px;font-weight:950;letter-spacing:.16em}
.modControls input{width:100%;height:58px;border:2px solid var(--ink);padding:0 18px;background:#faf7ef;color:var(--ink);font:inherit;font-size:16px;outline:none}
.modControls input:focus{box-shadow:5px 5px 0 var(--pz)}
.modControls>span{padding-bottom:15px;color:#69655e;font-size:13px;font-weight:850}
.categoryNav{display:flex;gap:8px;padding:0 0 34px;overflow-x:auto;scrollbar-width:thin}
.categoryNav a{flex:0 0 auto;border:1px solid #bcb6aa;padding:11px 13px;background:#e8e3d8;font-size:10px;font-weight:900}
.categoryNav a:hover,.categoryNav a:focus-visible{background:var(--ink);color:var(--paper)}
.modCategory{margin-top:42px;scroll-margin-top:26px}
.modCategoryHeader{display:grid;grid-template-columns:68px 1fr auto;gap:18px;align-items:end;padding-bottom:17px;border-bottom:4px solid var(--ink)}
.modCategoryHeader>span{color:#ae503c;font-size:35px;font-weight:950}
.modCategoryHeader h3{margin:0;font-size:clamp(25px,3vw,38px);letter-spacing:-.035em}
.modCategoryHeader small{color:#77736b;font-size:11px;font-weight:850}
.modGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid #c7c1b5}
.modCard{min-width:0;min-height:150px;padding:22px 24px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:15px;border-right:1px solid #c7c1b5;border-bottom:1px solid #c7c1b5;color:var(--ink);transition:background-color .18s,color .18s,transform .18s}
.modCard:hover,.modCard:focus-visible{position:relative;z-index:1;background:var(--ink);color:var(--paper);outline:0;transform:translateY(-2px)}
.modCard>span{color:#ae503c;font-size:10px;font-weight:950}
.modCard h4{margin:0 0 10px;font-size:18px;line-height:1.25}
.modCard p{margin:0;color:#68645c;font-size:14px;line-height:1.55}
.modCard:hover p,.modCard:focus-visible p{color:#cbc6bc}
.modCard b{align-self:start;color:#ae503c;font-size:19px}
.modCard:hover b,.modCard:focus-visible b{color:var(--pz)}
.modCard small{display:block;margin-top:15px;color:#ae503c;font-size:9px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.modCard:hover small,.modCard:focus-visible small{color:var(--pz)}
.modCard[hidden],.modCategory[hidden]{display:none}
.modLoading{padding:70px;border:2px dashed #bbb5a9;text-align:center;font-size:14px;font-weight:900}
@media(max-width:720px){.modHero{min-height:680px;padding:130px 6vw 70px}.modHero h1{font-size:20vw}.modHeroContent>p:nth-of-type(2){font-size:15px}.modHeroContent .backButton{margin-bottom:28px}.modStats{grid-template-columns:1fr}.modStats>div{min-height:105px;padding:23px 6vw;border-right:0;border-bottom:1px solid rgba(17,17,15,.28)}.modMain{padding:75px 5vw 85px}.modIntro{grid-template-columns:1fr;gap:24px}.modIntro h2{font-size:15vw}.modControls{align-items:stretch;flex-direction:column}.modControls>span{padding:0}.modGrid{grid-template-columns:1fr}.modCategoryHeader{grid-template-columns:45px 1fr}.modCategoryHeader small{grid-column:2}}
@media(max-width:460px){.modHero h1{font-size:21vw}.modHeroContent>a:not(.backButton){width:100%;justify-content:space-between}.modHeroContent .backButton{font-size:10px}.modCard{padding:19px 16px;grid-template-columns:34px minmax(0,1fr) auto}}