/*
  Disrupt Games mobile contract.
  This file is loaded last by every page type so no article, game, or ordinary
  page can retain desktop navigation or desktop-scale type below 880px.
*/

@media (max-width: 880px) {
  .site-header .primary-nav { display: none !important; }
  .site-header .mobile-nav { display: block !important; position: relative; flex: 0 0 auto; }
  .site-header .mobile-nav > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--border, #d9e1df);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--ink, #172027);
    cursor: pointer;
    font: 800 14px/1 "Nunito Sans", ui-rounded, system-ui, sans-serif;
    list-style: none;
  }
  .site-header .mobile-nav > summary::-webkit-details-marker { display: none; }
  .site-header .mobile-nav:not([open]) > nav { display: none !important; }
  .site-header .mobile-nav[open] > nav {
    position: absolute;
    z-index: 100;
    top: calc(100% + 9px);
    right: 0;
    display: grid !important;
    width: min(17rem, calc(100vw - 32px));
    gap: 3px;
    padding: 9px;
    border: 1px solid var(--border, #d9e1df);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: 0 16px 34px rgba(23, 32, 39, .14);
  }
  .site-header .mobile-nav nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    border-radius: 8px;
    color: var(--ink, #172027);
    font: 800 14px/1.25 "Nunito Sans", ui-rounded, system-ui, sans-serif;
    text-decoration: none;
  }
  .site-header .mobile-nav nav a:hover,
  .site-header .mobile-nav nav a:focus-visible { background: #eef2ee; color: var(--purple, #6e44a6); }
  .site-header .mobile-nav nav a.button,
  .site-header .mobile-nav nav a.nav-action,
  .site-header .mobile-nav nav a.button-primary {
    justify-content: center;
    background: var(--purple, #6e44a6) !important;
    color: #fff !important;
  }
  .site-header .mobile-nav nav a.button:hover,
  .site-header .mobile-nav nav a.nav-action:hover,
  .site-header .mobile-nav nav a.button-primary:hover { background: #5e368f !important; color: #fff !important; }
}

@media (max-width: 600px) {
  /* A compact header and readable type scale—not a desktop hero squeezed narrow. */
  .site-header, .site-header .header-inner { min-height: 58px !important; }
  .site-header .brand { font-size: 16px !important; }
  .site-header .brand img { width: 26px !important; height: 26px !important; }

  .page-hero { padding-block: 30px 18px !important; }
  .page-hero .reading-rail h1,
  .page-hero h1,
  .catalog-hero h1 {
    font-size: clamp(2rem, 9.3vw, 2.55rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.045em !important;
  }
  .article-page .page-hero .lede { margin-top: 12px !important; font-size: 1rem !important; line-height: 1.55 !important; }
  .article-page .page-content { padding-top: 12px !important; }
  .hero { min-height: 0 !important; gap: 30px !important; padding-block: 38px 46px !important; }
  .hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.25rem) !important;
    line-height: 1 !important;
    letter-spacing: -.05em !important;
  }
  .hero-copy { margin-block: 16px 19px !important; font-size: 1rem !important; line-height: 1.55 !important; }
  .section-head { width: 100%; }
  .section-head > div { width: 100%; }
  .section-head .eyebrow {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: 8px;
    white-space: nowrap;
    font-size: clamp(.68rem, 3vw, .75rem);
    letter-spacing: .045em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .mobile-nav > summary { scroll-behavior: auto; }
}