/* Site pages only. Load after weapon-loadout.css and before launch.css. */
#site-content:focus { outline: none; }
#site-content .wardrobe-layout { align-items: start; }
#site-content .wardrobe-layout .skin-section { margin-top: 0; }
#site-content .wardrobe-layout .skin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#site-content .profile-stats { margin-top: 22px; padding: 0 20px; }
#site-content .profile-stats > summary { min-height: 48px; padding: 13px 0; cursor: pointer; font-weight: 750; }
#site-content .profile-stats-body { padding-bottom: 18px; }
#site-content .profile-stats .site-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#site-content .profile-stats summary:focus-visible,
#site-content .skin-grid button:focus-visible { outline: 3px solid #73957f; outline-offset: 3px; }
#site-content .wardrobe-medal-link { margin: 18px 0; }
#site-content .wardrobe-medal-link a { display: inline-flex; align-items: center; min-height: 44px; }
#site-content .campaign-current-copy { min-width: 0; }
#site-content .campaign-current h2 { margin: 7px 0 9px; font-size: 25px; line-height: 1.25; color: #684e3e; }
#site-content .campaign-current strong { font-size: 13px; line-height: 1.4; }
#site-content .campaign-current p { margin: 7px 0 0; }
#site-content .campaign-current .campaign-overview-actions { align-items: stretch; }

@media (max-width: 730px) {
  body.site-page .topbar { position: sticky; top: 0; z-index: 30; height: 60px; background: #f7f0e5; }
  body.site-page .topbar .build-tag { display: none; }
  body.site-page .site-nav { display: none; }
  body.site-page.menu-open .site-nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    position: fixed; top: 64px; left: 12px; right: 12px; z-index: 29;
    margin: 0; padding: 12px; gap: 10px;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff8e8; border: 2px solid #b69a80; border-radius: 18px;
    box-shadow: 0 8px 25px #60452c35;
  }
  body.site-page .site-nav a { min-width: 0; min-height: 48px; justify-content: flex-start; font-size: 12px; }
  body.site-page .site-nav a img { width: 28px; height: 28px; flex: none; }
  body.site-page #site-content { padding-top: 12px; }
  body.site-page .site-heading { margin: 0 0 16px; }
  body.site-page .site-heading h1 { margin: 6px 0; font-size: 26px; letter-spacing: -.02em; }
  body.site-page .site-heading p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
  #site-content:is([data-page="world"], [data-page="cat"]) > .site-heading p { display: none; }
  #site-content .campaign-current { padding: 16px; gap: 14px; margin-bottom: 20px; }
  #site-content .campaign-current h2 { font-size: 22px; }
  #site-content .campaign-current .campaign-overview-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  #site-content .campaign-current .site-primary { flex: 1 1 100%; min-height: 48px; font-size: 16px; }
  #site-content .campaign-current .secondary-btn { min-height: 44px; font-size: 12px; }
  #site-content .wardrobe-layout { margin-top: 0; gap: 12px; }
  #site-content .wardrobe-layout .profile-cat {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center;
    padding: 12px; column-gap: 14px; text-align: left;
  }
  #site-content .wardrobe-layout .profile-cat::before { display: none; }
  #site-content .wardrobe-layout .profile-cat .portrait {
    grid-row: 1 / span 2; width: 84px; height: 84px; margin: 0; transform: none;
  }
  #site-content .wardrobe-layout .profile-cat h2 {
    align-self: end; margin: 0; padding: 0; font-size: 21px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  #site-content .wardrobe-layout .profile-cat p { align-self: start; margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
  #site-content .skin-section { padding: 12px; }
  #site-content .skin-section h2 { margin: 0 0 10px; font-size: 18px; }
  #site-content .wardrobe-layout .skin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #site-content .skin-grid button { min-width: 0; min-height: 78px; padding: 6px 3px; }
  #site-content .skin-grid img { height: 52px; }
  #site-content .skin-grid span { margin-top: 3px; font-size: 9px; }
  #site-content .profile-stats { margin-top: 16px; padding: 0 14px; }
  #site-content .profile-stats .site-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}