/* Aether Story landing page (/aetherstory/), 2026-10-26 redesign. Tokens come from style.css :root; real game art only. */

/* Hero: a real screenshot, darkened to the left so the copy reads. */
.as-hero{background:linear-gradient(90deg,var(--pxg-bg) 0%,rgba(11,16,24,.86) 42%,rgba(11,16,24,.5) 100%),linear-gradient(180deg,rgba(11,16,24,0) 60%,var(--pxg-bg) 100%),url('../images/screenshots/meadows.png') center/cover no-repeat;background-color:var(--pxg-bg);image-rendering:pixelated}
.as-logo{display:block;width:min(300px,70%);height:auto;margin:0 0 20px -6px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7));image-rendering:auto}
.as-hero .pxg-h1{max-width:640px}

/* About: copy beside a screenshot. */
.as-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.as-about-text p:not(.pxg-eyebrow){margin:16px 0 0;color:var(--pxg-text-2);font-size:17px;line-height:1.7;max-width:60ch}
.as-about-shot{margin:0;border-radius:var(--pxg-radius);overflow:hidden;border:1px solid var(--pxg-border);box-shadow:0 24px 48px -24px rgba(0,0,0,.9)}
.as-about-shot img{display:block;width:100%;height:auto;image-rendering:pixelated}
.as-monsters{display:flex;align-items:flex-end;gap:18px;margin-top:24px}
.as-monsters img{height:auto}

/* Features: six cards, three across. */
.as-features{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.as-features .pxg-card-art{aspect-ratio:2/1}
.as-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.as-gallery img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:8px;border:1px solid var(--pxg-border);image-rendering:pixelated}

/* Tools: four cards; one holds the character search form. */
.as-tools{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px}
.as-search{display:flex;gap:8px;margin-top:8px}
.as-search input{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--pxg-border-strong);font-size:15px}

/* Alpha players: a thank-you panel with account links. */
.as-alpha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:32px}
.as-alpha p:not(.pxg-eyebrow){margin:12px 0 0;max-width:60ch;color:var(--pxg-text-2)}
.as-alpha-notice strong{color:var(--pxg-accent)}
.as-alpha-actions{display:flex;flex-wrap:wrap;gap:12px}
.as-btn-ghost{border-color:var(--pxg-border-strong);color:var(--pxg-text)!important;background:transparent}
.as-btn-ghost:hover{border-color:var(--pxg-brand-text)}

@media (max-width:991px){
	.as-features,.as-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
	.as-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
	.as-hero{background:linear-gradient(180deg,rgba(11,16,24,.55) 0%,rgba(11,16,24,.9) 55%,var(--pxg-bg) 100%),url('../images/screenshots/meadows.png') center top/cover no-repeat;background-color:var(--pxg-bg)}
	.as-about{grid-template-columns:minmax(0,1fr);gap:28px}
	.as-features,.as-tools{grid-template-columns:minmax(0,1fr)}
	.as-alpha{padding:24px}
}