/* Original studio illustrations. The game-card reveal stays in home.css. */
.sky{ background:#101417; }
.sky__painting,
.community__painting{ position:absolute; inset:0; display:block; }
.sky__painting img,
.community__painting img{ display:block; width:100%; height:100%; object-fit:cover; }
.sky__painting img{ object-position:70% 60%; }
.sky::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgb(8 11 14 / .18), transparent 58%),
    linear-gradient(0deg, var(--ink-1), transparent 13%);
}

.ident--painted{ background:#111619; }
.ident__painting{ display:block; width:100%; height:100%; object-fit:cover; }
.ident--painted .ident__cap{
  padding-top:24px;
  color:#cbc9bd;
  background:linear-gradient(0deg, rgb(17 22 25 / .85), transparent);
}
.tenets__art{ grid-row:span 2; width:48px; height:48px; object-fit:contain; }
.tenets li{ column-gap:12px; }
.letter__art{ display:block; width:56px; height:56px; object-fit:contain; margin-bottom:16px; }

.community__frame{ background:#11171b; }
.community__art{ background:#11171b; }
.community__painting img{ object-position:center 44%; }
.community__shade{
  background:linear-gradient(0deg, rgb(8 12 16 / .75), rgb(8 12 16 / .12) 58%, transparent 80%);
}
.community__inner{ padding-top:clamp(220px,22vw,350px); }
.letter{ background:rgb(10 15 20 / .88); }

@media (max-width:899.98px){
  .sky{ height:clamp(740px,100svh,960px); }
  .sky__painting img{ object-position:center bottom; }
  .sky::after{
    background:linear-gradient(0deg, var(--ink-1), transparent 16%),
      linear-gradient(180deg, rgb(8 11 14 / .12), transparent 65%);
  }
  .intro{ justify-content:flex-start; min-height:0; padding-bottom:72px; }
  .intro .gamecard{ margin-top:clamp(220px,32svh,300px); }

  /* Keep the gathering above the copy, with the portrait's quiet ground
     behind it. The form can grow without stretching the illustration. */
  .community__art{ inset:0 0 auto; height:auto; aspect-ratio:2 / 3; }
  .community__painting img{ object-position:center top; }
  .community__shade{
    background:linear-gradient(180deg, transparent 160px, rgb(17 23 27 / .12) 300px, #11171b 640px);
  }
  .community__inner{ padding:clamp(290px,63vw,470px) 20px 20px; }
}

@media (prefers-reduced-motion:reduce){
  .sky{ animation:none; }
  .community__frame{ scale:1; }
}