/* Home page (2026-10-26 redesign) [H: "come up with a new design … make it look fancy … a blog feed of the latest 3 blog
   posts like the old site did"]. Tokens and components come from style.css; this file only arranges the home page.
   AI accent art (images/accent/) is atmosphere only; every game image here is a real screenshot or blog banner. */

/* ── Hero: the wordmark over grunge, neon streaks bleeding in from the right ── */
.home-hero{overflow:hidden;isolation:isolate;padding:96px 0 120px;
  background:linear-gradient(180deg,rgba(11,16,24,.15) 0%,rgba(11,16,24,0) 50%,var(--pxg-bg) 100%),url('../images/bg.jpg') center/cover no-repeat;background-color:var(--pxg-bg)}
.home-hero::before{content:"";position:absolute;inset:0 0 0 30%;z-index:-1;pointer-events:none;
  background:url('../images/accent/hero-streaks.webp') right center/cover no-repeat;mix-blend-mode:screen;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.home-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 18% 45%,rgba(11,16,24,.72) 0%,rgba(11,16,24,0) 70%)}
.home-hero .pxg-hero-logo{width:min(560px,100%);filter:drop-shadow(0 10px 30px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(128,214,255,.12))}
.home-hero .pxg-h1{text-shadow:0 2px 18px rgba(0,0,0,.7)}
.home-hero-divider{margin-top:-40px;position:relative}

/* ── Portfolio ── */
.home-portfolio{padding-top:24px}
.home-feature{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:28px}
.home-feature>.pxg-card{padding:0;overflow:hidden}
.home-feature-text{display:flex;flex-direction:column;gap:6px;padding:20px 24px 24px}
.home-feature .pxg-card-title{font-size:26px}

/* Aether Story: one big screenshot, two smaller ones beside it. Pixel art stays crisp. */
.home-shots{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#000;aspect-ratio:16/6.4}
.home-shots img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated;transition:transform .4s ease}
.home-shot-main{grid-row:1/3}
a.pxg-card:hover .home-shots img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.home-shots img{transition:none}a.pxg-card:hover .home-shots img{transform:none}}

/* ThicketScript: a typographic mark, not a picture of a product we have not shown yet. */
.home-feature>.pxg-card+.pxg-card{padding:0 24px 24px;gap:6px}
.home-ts-mark{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 -24px 14px;aspect-ratio:16/9;max-height:220px;
  border-bottom:1px solid var(--pxg-border);font-family:var(--pxg-display);font-size:64px;color:var(--pxg-brand-text);
  background:radial-gradient(circle at 50% 55%,rgba(47,109,179,.35) 0%,rgba(11,16,24,0) 65%),linear-gradient(180deg,#0f1724,#0b1018);
  text-shadow:0 0 24px rgba(128,214,255,.45)}
.home-ts-dot{width:14px;height:14px;border-radius:3px;background:var(--pxg-accent);box-shadow:0 0 16px var(--pxg-accent)}

/* Thicket Creator Editors: a lit blueprint floor behind them; each card leads with its genre tag. */
.home-editors{position:relative;margin-top:44px;padding:4px 24px 28px;border-radius:var(--pxg-radius);border:1px solid var(--pxg-border);
  background:linear-gradient(180deg,rgba(11,16,24,.9) 0%,rgba(11,16,24,.55) 60%,rgba(11,16,24,.85) 100%),url('../images/accent/grid-texture.webp') center bottom/cover no-repeat;background-color:var(--pxg-bg)}
.home-editors .pxg-group-head{margin:24px 0 18px}
.home-editors .pxg-group-title{font-family:var(--pxg-display);font-size:22px;letter-spacing:.01em;text-transform:none;color:var(--pxg-text);font-weight:400}
.home-editors .pxg-card{border-top:3px solid var(--pxg-brand);background:linear-gradient(180deg,rgba(22,32,47,.96) 0%,rgba(18,26,38,.94) 60%,rgba(15,22,32,.94) 100%)}
.home-editors .pxg-card-title{font-size:18px}
.home-ed-tag{display:inline-block;padding:3px 9px;border-radius:6px;background:rgba(47,109,179,.22);color:var(--pxg-brand-text);letter-spacing:.12em}
/* Waystone is next to ship: it carries the accent. */
.home-editors .pxg-card:first-child{border-top-color:var(--pxg-accent);box-shadow:0 0 0 1px rgba(205,240,60,.12),0 18px 40px -26px rgba(205,240,60,.45),inset 0 1px 0 rgba(205,240,60,.12)}
.home-editors .pxg-card:first-child .home-ed-tag{background:rgba(205,240,60,.14);color:var(--pxg-accent)}
.home-editors .pxg-card:first-child .pxg-card-status{background:var(--pxg-accent);color:#0b1018;border-color:var(--pxg-accent)}

/* ── Latest from the blog ── */
.home-blog{padding-top:40px}
.home-blog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.home-blog-all{white-space:nowrap}
.home-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.home-posts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-post{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--pxg-radius);border:1px solid var(--pxg-border);
  background:linear-gradient(180deg,#16202f 0%,#121a26 60%,#0f1620 100%);box-shadow:inset 0 1px 0 rgba(128,166,214,.10);color:inherit;text-decoration:none!important;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.home-post:hover,.home-post:focus-visible{border-color:var(--pxg-border-strong);transform:translateY(-2px);box-shadow:0 18px 36px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(205,240,60,.18)}
@media (prefers-reduced-motion:reduce){.home-post{transition:none}.home-post:hover{transform:none}}
.home-post-banner{aspect-ratio:16/7;background-size:cover;background-repeat:no-repeat;background-color:#000;image-rendering:pixelated;border-bottom:1px solid var(--pxg-border)}
.home-post-text{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 22px 20px}
.home-post-date{font-family:var(--pxg-label);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pxg-accent)}
.home-post-title{margin:0;font-family:var(--pxg-display);font-weight:400;font-size:20px;line-height:1.3;color:var(--pxg-text)}
.home-post-desc{margin:0;font-size:15px;line-height:1.6;color:var(--pxg-text-2)}
.home-post-more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--pxg-brand-text)}
/* A single post reads as one wide feature rather than a lone card in a three-column grid. */
.home-posts-1{grid-template-columns:minmax(0,1fr)}
.home-posts-1 .home-post{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.home-posts-1 .home-post-banner{aspect-ratio:auto;min-height:240px;border-bottom:0;border-right:1px solid var(--pxg-border)}
.home-posts-1 .home-post-text{justify-content:center;padding:28px 32px}
.home-posts-1 .home-post-title{font-size:26px}

/* ── Community + Fund us ── */
.home-connect{padding-bottom:72px}
.home-connect-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}
.home-connect-card{display:flex;align-items:center;gap:20px;padding:26px 28px;color:inherit;text-decoration:none!important}
.home-community{transition:border-color .15s ease}
.home-community:hover{border-color:var(--pxg-border-strong)}
.home-community img{flex:none;width:56px;height:56px;filter:drop-shadow(0 4px 14px rgba(88,101,242,.35))}
.home-community .pxg-card-title{margin:2px 0 4px}
.home-fund{overflow:hidden;isolation:isolate}
.home-fund::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.55;
  background:linear-gradient(90deg,rgba(11,16,24,.9) 0%,rgba(11,16,24,.35) 100%),url('../images/accent/console-glow.webp') center/cover no-repeat}
.home-fund .pxg-band-inner{flex:1;padding:0;border:0;background:none}
.home-fund .pxg-band-inner p{color:var(--pxg-text);font-size:18px;max-width:46ch}
.home-fund .pxg-btn-accent{box-shadow:0 0 24px -4px rgba(205,240,60,.55)}

/* ── Tablet and phone ── */
@media (max-width:991px){
  .home-feature{grid-template-columns:minmax(0,1fr)}
  .home-ts-mark{aspect-ratio:auto;height:140px}
  .home-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-posts-1{grid-template-columns:minmax(0,1fr)}
  .home-connect-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .home-hero{padding:48px 0 80px}
  .home-hero::before{inset:0;opacity:.45;-webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 60%);mask-image:linear-gradient(200deg,#000 0%,transparent 60%)}
  .home-hero-divider{margin-top:-32px;height:40px}
  .home-shots{aspect-ratio:16/10}
  .home-editors{padding:4px 14px 18px;margin-left:-8px;margin-right:-8px}
  .home-posts,.home-posts-2{grid-template-columns:minmax(0,1fr)}
  .home-posts-1 .home-post{display:flex}
  .home-posts-1 .home-post-banner{aspect-ratio:16/7;min-height:0;border-right:0;border-bottom:1px solid var(--pxg-border)}
  .home-posts-1 .home-post-text{padding:18px 22px 20px}
  .home-posts-1 .home-post-title{font-size:21px}
  .home-connect-card{padding:22px 20px;gap:16px}
  .home-community img{width:44px;height:44px;align-self:flex-start}
  .home-fund .pxg-band-inner{flex-wrap:wrap}
  .home-fund .pxg-band-inner{gap:16px}
}