/* Full-page pixel world. Product previews remain the original pack artwork. */
:root{--paper:#0b2029;--ink:#edf6ee;--muted:#b2c4c4;--green:#b8dfb1;--line:#a5d0be30;--white:#102a32;--yellow:#efd296}
body{background:#0b2029;color:var(--ink);isolation:isolate}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:url('assets/pixel-world-v2.webp') center center/cover no-repeat;pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#071a2a66,transparent 70%),linear-gradient(0deg,#061b2ab8,transparent 80%);pointer-events:none}
header{background:#081e2880;border-color:#dcebd61c;backdrop-filter:blur(14px)}
.brand-mark i{background:#b8dfb1}.brand-mark i:nth-child(2){background:#efd296}.brand-dot{color:#efd296;margin-left:1px}
.nav-links a:hover,.pack-link:hover{color:#f3d696}.nav-shop{border-color:#b7d7c873;background:#08212a55}
.hero{padding-top:clamp(70px,12vh,160px);padding-bottom:30px;min-height:calc(100svh - 83px);display:flex;flex-direction:column;justify-content:space-between}
.hero-top{display:block;margin:0}.hero .eyebrow{color:#f3d696;letter-spacing:3px;font-size:11px;text-shadow:0 2px 12px #071823}
h1{font-size:clamp(60px,7vw,104px);line-height:1.02;letter-spacing:-4px;max-width:850px;color:#fff7e9;text-shadow:0 3px 35px #06182499}
h1 em{color:#d8e9c8}.hero-copy{margin-top:25px;max-width:390px}.hero-copy p{font-size:17px;color:#e0ebdf;text-shadow:0 2px 12px #051521}
.hero .text-link{display:inline-block;margin-top:5px;background:#f1d397;color:#122b2e;border:0;border-radius:3px;padding:13px 21px;font-weight:750;text-shadow:none}.hero .text-link:hover{background:#ffe2a5}
.hero-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px;letter-spacing:1px;color:#eef7e5;border-top:1px solid #d5e8ce45;padding-top:19px;margin-top:70px;text-shadow:0 2px 12px #061824}.hero-footer a{border-bottom:1px solid #bfd5b760;padding-bottom:3px}.hero-footer .scroll-cue{font-size:24px}
.catalog{padding-top:85px;padding-bottom:55px}.section-top h2,.section-top p,.section-top .eyebrow{ text-shadow:0 2px 15px #081a22}.section-top p{color:#d4e0da}.count{color:#d4e0da}.section-top .eyebrow{color:#efd296}
.catalog-controls{padding:14px;background:#071f2bd9;border:1px solid var(--line);border-radius:7px;backdrop-filter:blur(12px)}
.filters button{color:#d8e5de;border-color:#c5decc3b}.filters button[aria-pressed=true]{background:#d3e5c2;color:#142e31;border-color:#d3e5c2}.search{background:#e0eddf10;border-color:#bed8c53b;color:#edf6ee}.search::placeholder{color:#b4c9c7}
.pack{background:#0b242ee8;border-color:#a5d0be36;box-shadow:0 15px 35px #04131f35;backdrop-filter:blur(14px)}.pack-body .eyebrow{color:#d2dfac}.pack h3{color:#f3f5e9}.description{color:#baced0}.spec{color:#d0dcae}.pack-link{color:#f2d89e;border-color:#c6dbc52e}.visual{background:#102e37}.preview-label{background:#082631eb;color:#e4edcf}
.catalog>p{color:#c8d9d3!important;text-shadow:0 2px 10px #061822}.empty{color:#dfebe3;background:#0b242ee0;border:1px solid var(--line);border-radius:6px}
.sample{margin-top:18px;background:#0b292de8;border-color:#b9d8b64a;backdrop-filter:blur(16px);box-shadow:0 20px 60px #02121c33}.sample .eyebrow{color:#efd296}.sample-copy p{color:#bfd4cc}.btn{background:#d7e7bd;color:#173133}.btn:hover{background:#ecf4d4}.sample-links{border-color:#bed6ab33}.sample-links a{border-color:#b1c9b52e;color:#e7efd8}.sample-links small{color:#aec7be}
.about{padding:45px;border:1px solid #bdd8be30;background:#09232dd9;border-radius:7px;backdrop-filter:blur(14px);margin-bottom:35px;gap:60px}.about .eyebrow{color:#efd296}.about-copy{color:#cadcd3}.about-copy .text-link{color:#eee7c2;border-color:#c8ddb881}
.faq{padding:38px 45px 45px;margin-bottom:70px;border:1px solid #bdd8be30;border-radius:7px;background:#09232de0;backdrop-filter:blur(14px);gap:60px}.faq .eyebrow{color:#efd296}details{border-color:#b4cdb530}summary{color:#e2edde}details p{color:#b9ceca}
.closing{background:#071d2ae6;border-top:1px solid #b5d0b735;backdrop-filter:blur(12px)}.closing h2{color:#f1f0df}.closing a{background:#f1d397;color:#173133}footer{background:#071d2ae6;color:#b8cbc3}
dialog{background:#0e2934;color:#edf5e7;border-color:#a7c5b947;box-shadow:0 25px 100px #020b18aa}dialog::backdrop{background:#03101ad9}dialog img{background:#102e37}.modal-top button{background:#d3e5c2;color:#132e31}dialog p{color:#adc6c2}
@media(min-width:1500px){.hero{padding-top:12vh}.hero-copy{margin-top:30px}}
@media(max-width:900px){h1{font-size:76px}.hero{min-height:calc(100svh - 83px);padding-top:85px}.hero-copy{max-width:360px}.about,.faq{gap:35px;padding:35px}}
@media(max-width:620px){body:before{background-position:58% center}body:after{background:linear-gradient(90deg,#061b2b88,transparent),linear-gradient(0deg,#061b2aa3,transparent)}.hero{padding-top:72px;min-height:calc(100svh - 69px);padding-bottom:24px}.hero .eyebrow{font-size:9px;letter-spacing:1.8px}h1{font-size:clamp(45px,10.8vw,64px);letter-spacing:-2.5px;line-height:1.08}.hero-copy{max-width:290px;margin-top:22px}.hero-copy p{font-size:14px}.hero .text-link{font-size:12px;padding:12px 16px}.hero-footer{font-size:9px;letter-spacing:.4px;gap:15px;margin-top:70px}.hero-footer .scroll-cue{display:none}.catalog{padding-top:55px}.catalog-controls{padding:12px;gap:12px}.about,.faq{padding:27px;gap:17px}.about{margin-bottom:25px}.faq{margin-bottom:45px}.sample-copy{padding:28px}.sample-links{padding-left:28px;padding-right:28px}.section-top h2{text-shadow:0 2px 12px #071823}.count{font-size:10px}.closing .wrap{gap:23px}}

/* Keep shared sections centered and navigation readable on narrow screens. */
.sample{margin-left:auto;margin-right:auto}
.brand,.nav-shop{white-space:nowrap}
.skip{color:#122b2e;background:#fff}
@media(max-width:380px){.nav{gap:8px}.brand{font-size:17px;gap:6px;letter-spacing:-.5px}.brand-icon{width:26px;height:26px}.nav-shop{font-size:11px;padding:7px 8px}}

/* Show every cover in full; keep the preview control below the artwork. */
.visual{display:grid;grid-template-rows:minmax(0,1fr) 30px}
.visual img{object-fit:contain;min-width:0;min-height:0}
.visual:hover img{transform:none}
.preview-label{position:static;justify-self:end;align-self:center;margin:0 10px;padding:2px 8px}
.about-page{min-height:calc(100svh - 165px);padding:70px 0}
.about-page .about{margin-bottom:0}
.about-page h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2px;line-height:1.1;margin-bottom:16px}
.about-intro{font-size:20px;color:#d8e9c8;margin:0}
.about-return{margin:30px 0 0!important}
.about-nav[aria-current=page]{color:#f3d696}
@media(max-width:620px){
 html{scroll-padding-top:115px}
 .nav{display:grid;grid-template-columns:1fr auto;height:auto;min-height:68px;gap:8px;padding:12px 0}
 .brand{grid-row:1;grid-column:1}
 .nav-links{display:contents}
 .nav-links>a:first-child{display:block;grid-row:2;grid-column:1;justify-self:start}
 .nav-links .about-nav{display:block;grid-row:2;grid-column:2;justify-self:end}
 .nav-links .nav-shop{grid-row:1;grid-column:2;justify-self:end}
 .hero{min-height:calc(100svh - 105px)}
 .about-page{padding:35px 0;min-height:calc(100svh - 200px)}
}

/* Separate paid releases from free assets and clearly labeled samples. */
.catalog-jump{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.catalog-jump a{padding:9px 18px;background:#09232de8;border:1px solid #b9d8b64a;border-radius:5px;color:#f1d397;font-size:13px;font-weight:700}
.catalog-jump a:hover{background:#173b44}
.pack-body .eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pack-badge{border:1px solid #efd29666;color:#f1d397;white-space:nowrap;font-size:9px;letter-spacing:.5px;padding:2px 7px;border-radius:3px}
.free-badge{border-color:#b8dfb166;color:#d8e9c8}
.free-catalog{padding-top:20px;margin-bottom:45px}
.catalog-note{font-size:12px;color:var(--muted);margin-top:24px}

/* Distant scenery, mist and foreground lights move at separate scroll speeds. */
body:before{content:none}
.parallax-scene{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;contain:strict}
.scene-layer{position:absolute;left:0;right:0;background-repeat:no-repeat;will-change:transform}
.scene-world{top:-2vh;bottom:-24vh;background-image:url('assets/pixel-world-v2.webp');background-position:center;background-size:cover;transform:translate3d(0,0,0)}
.scene-mist{top:-10vh;bottom:-40vh;left:-10vw;right:-10vw;opacity:.32;background-image:radial-gradient(ellipse at 18% 58%,#b4d9d353,transparent 45%),radial-gradient(ellipse at 78% 80%,#d8e9c83b,transparent 40%);transform:translate3d(0,0,0)}
.scene-motes{top:-10vh;bottom:-60vh;opacity:.23;background-image:radial-gradient(circle,#f5dfaa 1px,transparent 2px),radial-gradient(circle,#d9f6dc 1px,transparent 2px);background-repeat:repeat;background-size:423px 367px,673px 541px;background-position:83px 173px,317px 91px;transform:translate3d(0,0,0)}
@media(max-width:620px){.scene-world{background-position:58% center}.scene-motes{opacity:.15}}
@media(prefers-reduced-motion:reduce){.scene-world{inset:0;transform:none;will-change:auto}.scene-mist,.scene-motes{display:none}}

/* Solid translucent panels avoid re-blurring moving scenery on every frame. */
header,.catalog-controls,.pack,.sample,.about,.faq,.closing{backdrop-filter:none;-webkit-backdrop-filter:none}
header{background:#081e28ed}
.catalog-controls{background:#071f2bf5}
.pack{background:#0b242ef5}
.about,.faq{background:#09232df5}
.sample{background:#0b292df5}
.closing{background:#071d2af5}