/* Illustrated download article with the shared painted action menu. */
.public-info-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; gap:44px; align-items:start; padding-block:var(--content-gap) 64px; }
.public-info-page article { min-width:0; color:#0f1309; font:400 17px/1.55 var(--serif); }
.public-info-page .article-heading { position:relative; padding-bottom:10px; margin-bottom:18px; }
.public-info-page h1 { font:400 23px/1.3 var(--serif); }
.download-art {
  display:block; width:100%; max-width:720px; height:auto; margin:28px auto 24px;
  -webkit-mask:url('/public/images/download-paint-mask.svg') center / 100% 100% no-repeat;
  mask:url('/public/images/download-paint-mask.svg') center / 100% 100% no-repeat;
}
.download-divider { display:flex; align-items:center; gap:12px; width:300px; max-width:70%; margin:0 auto 28px; color:#a85d70; font-size:15px; }
.download-divider::before, .download-divider::after { content:""; height:1px; flex:1; background:currentColor; opacity:.55; }
.download-bottom { width:282px; max-width:100%; margin:26px auto 0; text-align:center; }
.public-info-sidebar { padding-top:35px; }
@media (prefers-reduced-motion:reduce) { .public-info-layout .play-button { transition:none; } }

/* The download flow fits small screens without changing other page layouts. */
@media (max-width:1219px) {
  html:has(.public-info-page) { min-width:0; }
  body:has(.public-info-page) {
    .container { width:calc(100% - 40px); }
    .header-inner { gap:16px; min-height:100px; }
    .navigation { display:none; position:absolute; inset:88px 20px auto; padding:16px 24px; background:#342e37; box-shadow:0 8px 18px #342e3733; }
    .navigation.open { display:flex; flex-wrap:wrap; gap:0 28px; }
    .navigation a, .navigation button { font-size:18px; padding-block:12px; }
    .menu-toggle { display:grid; align-content:center; gap:5px; width:44px; height:44px; flex-shrink:0; padding:10px; }
    .menu-toggle span { height:2px; width:24px; background:currentColor; }
    .language-switch button { font-size:15px; }
    .player-strip-inner { gap:24px; --community-width:220px; }
    .auth-actions:not([hidden]) { gap:14px; }
    .auth-actions .auth-button { font-size:16px; }
    .home-account:not([hidden]) { grid-template-columns:64px minmax(0,1fr); gap:12px; }
    .home-account-avatar { width:64px; height:64px; }
    .home-account-links { grid-column:1 / -1; display:flex; justify-content:center; }
    .home-account-links a, .home-account-links button { font-size:16px; }
    .player-strip-art { height:100%; }
    .footer-navigation { grid-template-columns:repeat(4,minmax(0,1fr)); width:calc(100% - 40px); gap:20px; }
  }
  .public-info-layout { grid-template-columns:minmax(0,1fr) 240px; gap:28px; }
}
@media (max-width:600px) {
  body:has(.public-info-page) {
    .container { width:calc(100% - 32px); }
    .header-inner { gap:6px; min-height:88px; }
    .logo { width:105px; height:64px; }
    .logo img { top:-27px; }
    .language-switch { gap:0; }
    .language-switch button { padding-inline:5px; font-size:14px; }
    .page-banner { height:140px; }
    .player-strip-inner { --community-width:130px; gap:16px; }
    .player-strip-art { width:100%; }
    .auth-actions:not([hidden]) { flex-direction:column; gap:0; }
    .auth-actions .auth-button { width:100%; min-height:52px; padding:8px; font-size:16px; }
    .player-community .play-button { min-height:62px; padding:10px; gap:6px; font-size:16px; }
    .player-community .discord-icon { width:20px; height:20px; flex-basis:20px; }
    .home-account:not([hidden]) { display:flex; flex-wrap:wrap; gap:8px; padding-block:8px; }
    .home-account-avatar { display:none; }
    .home-account-details { width:100%; }
    .player-characters summary { font-size:16px; }
    .home-account-links { flex-wrap:wrap; justify-content:start; gap:0; }
    .home-account-links a, .home-account-links button { min-height:36px; padding:4px 0; }
    .home-account-email, .home-account-id { font-size:13px; }
    .footer-navigation { grid-template-columns:repeat(2,minmax(0,1fr)); width:calc(100% - 32px); }
  }
  .public-info-layout { grid-template-columns:minmax(0,1fr); gap:20px; padding-bottom:40px; }
  .download-art { margin-block:24px; }
  .download-divider { margin-bottom:22px; }
  .public-info-sidebar { width:282px; max-width:100%; margin-inline:auto; padding-top:0; }
  .public-info-sidebar [data-modal="download"] { display:none; }
}