/* Raven Bard mobile-only responsive overrides
   Desktop styles are intentionally untouched. */

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg { max-width: 100%; height: auto; }

  .site-header {
    min-height: 64px;
    padding: 10px 16px;
    align-items: center;
    flex-wrap: wrap;
  }

  .site-header .brand-name { font-size: .86rem; }
  .menu-button {
    display: inline-flex !important;
    min-height: 44px;
    min-width: 60px;
    align-items: center;
    justify-content: center;
  }

  .site-header nav,
  #nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0 6px;
    background: rgba(8,7,11,.98);
  }

  .site-header nav a,
  #nav a {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .site-header nav a.beta,
  #nav a.beta { display: flex; justify-content: space-between; align-items: center; }

  .hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 42px 20px 30px !important;
    display: block !important;
  }

  .hero-copy {
    position: relative !important;
    z-index: 5;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .hero h1 { font-size: clamp(3.2rem, 17vw, 5.6rem) !important; line-height: .92; }
  .hero .tagline { font-size: clamp(1rem, 5vw, 1.35rem); }
  .hero .intro { max-width: 36rem; font-size: .96rem; line-height: 1.65; }
  .hero .actions { width: 100% !important; align-items: stretch !important; }

  .hero-art {
    position: relative !important;
    inset: auto !important;
    width: min(420px, 94vw) !important;
    height: auto !important;
    margin: 18px auto 0 !important;
    pointer-events: none;
  }

  .hero-art img {
    position: relative !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 520px;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .hero-halo { inset: 10% 8% 0 !important; }

  .hero-tools-section-label { margin-top: 2px; }
  .hero-tools-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 520px;
    gap: 12px !important;
  }

  .hero-tools-row .hero-tools-card {
    min-height: 0 !important;
    padding: 15px 42px 15px 16px !important;
  }

  .hero-tools-row .hero-tools-title { font-size: .9rem !important; }
  .hero-tools-row .hero-tools-description {
    margin-left: 36px !important;
    max-width: none !important;
    font-size: .78rem !important;
  }

  .quick-links {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 1px;
  }

  .quick-links a {
    min-height: 118px;
    padding: 18px 14px;
  }

  .dashboard,
  .content-cards,
  .article-grid,
  .news-grid,
  .live-news-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard { padding-left: 16px; padding-right: 16px; }

  .illustrated-section,
  .editorial,
  .news-section,
  .community,
  .about,
  .suite {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-banner {
    height: auto !important;
    min-height: 520px;
    border-radius: 12px;
  }

  .section-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  .banner-copy,
  .banner-copy.align-right {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 30px 22px;
    margin-top: 250px;
    text-align: left;
    align-items: flex-start;
  }

  .editorial-heading {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  .editorial-bard {
    width: min(320px, 90vw) !important;
    height: auto !important;
    margin: 0 auto;
  }

  .news-section .section-header {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 12px;
  }

  .news-topic-row {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }

  .news-filter { min-height: 44px; }

  .news-feed-footer {
    align-items: stretch !important;
    flex-direction: column;
  }

  .community {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .community > img {
    width: min(360px, 92vw) !important;
    height: auto !important;
    margin: 0 auto;
  }

  .socials {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .socials a,
  .social-coming-soon {
    min-height: 48px;
  }

  .about {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 20px;
  }

  .about-bard {
    width: min(330px, 90vw) !important;
    height: auto !important;
    max-height: 420px;
    margin: auto !important;
  }

  .about .button { grid-column: auto !important; width: 100%; }

  .suite {
    grid-template-columns: auto 1fr !important;
    gap: 14px;
  }

  .suite .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .signature-footer { padding-left: 18px !important; padding-right: 18px !important; }
  .footer-links { gap: 10px 16px; }

  /* Archive pages */
  .archive-main { padding: 42px 16px !important; }
  .archive-hero { padding: 36px 22px !important; }
  .archive-hero h1 { font-size: clamp(2.35rem, 12vw, 4rem) !important; }
  .archive-controls {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .archive-controls input,
  .archive-controls select { width: 100% !important; min-height: 46px; }
  .archive-grid { grid-template-columns: 1fr !important; }

  /* Raven Bard history/story page */
  .story-main { padding: 34px 12px !important; }
  .story-page { padding: 30px 20px !important; }
  .story-page h1 { font-size: clamp(2.4rem, 12vw, 4.4rem) !important; }
  .story-sections { grid-template-columns: 1fr !important; }

  /* Public article page */
  .published-hero { padding: 58px 18px 34px !important; }
  .published-shell { padding: 24px 10px !important; }
  .published-page { padding: 28px 18px !important; }
  .published-page h1 { overflow-wrap: anywhere; }
  .published-page pre,
  .published-page code { max-width: 100%; overflow-x: auto; }
  .download-card { align-items: stretch !important; flex-direction: column !important; }
  .download-card a { text-align: center; min-height: 46px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }

  .site-header { padding: 9px 12px; }
  .site-header .brand-name { font-size: .78rem; letter-spacing: .1em; }

  .hero { padding: 34px 14px 24px !important; }
  .hero h1 { font-size: clamp(3rem, 20vw, 4.7rem) !important; }
  .hero .kicker { font-size: .6rem; letter-spacing: .14em; }

  .hero .button,
  .hero-tools-card { width: 100% !important; }

  .hero-art { width: min(330px, 94vw) !important; }

  .quick-links { grid-template-columns: 1fr !important; }
  .quick-links a { min-height: 94px; }

  .section-banner { min-height: 500px; }
  .banner-copy,
  .banner-copy.align-right {
    margin-top: 235px;
    padding: 26px 18px;
  }

  .socials { grid-template-columns: 1fr !important; }

  .suite {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .suite-sigil { margin: 0 auto; }

  .footer-emblem { width: min(250px, 76vw) !important; }

  .archive-card { min-height: 0 !important; }
  .archive-card-meta { flex-direction: column; gap: 4px; }

  .published-page { padding: 24px 15px !important; }
}


/* Mobile header/nav refinement v1.1 */
@media (max-width: 900px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 9px 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    background: rgba(7,8,11,.985) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .site-header .brand {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .site-header .brand-name {
    font-size: .78rem !important;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  .menu-button {
    flex: 0 0 auto;
    min-width: 58px;
    min-height: 44px;
    margin-left: 12px;
    position: relative;
    z-index: 1002;
  }

  /* This overrides the older tablet nav rule that was causing
     the menu links to spill over the hero artwork and title. */
  .site-header nav,
  #nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    margin: 0 !important;
    padding: 8px 14px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(7,8,11,.995) !important;
    border-top: 1px solid rgba(199,163,71,.18);
    border-bottom: 1px solid rgba(199,163,71,.35);
    box-shadow: 0 16px 28px rgba(0,0,0,.55);
    z-index: 1001 !important;
  }

  .site-header nav a,
  #nav a {
    min-height: 46px !important;
    padding: 13px 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: .76rem !important;
    line-height: 1.2;
    color: #f4efe5;
    opacity: 1 !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .site-header nav a:last-child,
  #nav a:last-child {
    border-bottom: 0;
  }

  .hero {
    padding-top: 34px !important;
  }

  .hero .kicker {
    margin-bottom: 10px !important;
  }

  .hero h1 {
    margin-top: 0 !important;
  }
}

@media (max-width: 520px) {
  .site-header {
    min-height: 58px !important;
  }

  .site-header nav,
  #nav {
    max-height: calc(100dvh - 58px);
  }

  .hero {
    padding-top: 28px !important;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 18vw, 4.45rem) !important;
    line-height: .9 !important;
  }

  .hero .tagline {
    margin-top: 20px !important;
  }
}


/* Mobile navigation final fix: menu expands the header instead of covering the hero */
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
  }

  .site-header .brand {
    flex: 1 1 auto !important;
  }

  #nav,
  .site-header nav {
    display: none !important;
    position: static !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px 0 0 !important;
    padding: 4px 0 8px !important;
    background: rgba(7,8,11,.995) !important;
    border-top: 1px solid rgba(199,163,71,.18);
    border-bottom: 0;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .site-header.mobile-nav-open #nav,
  .site-header.mobile-nav-open nav {
    display: flex !important;
  }

  .site-header.mobile-nav-open #nav a,
  .site-header.mobile-nav-open nav a {
    position: relative !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 13px 8px !important;
    opacity: 1 !important;
  }

  .site-header.mobile-nav-open #nav a:after,
  .site-header.mobile-nav-open nav a:after {
    display: none !important;
  }
}


/* FINAL mobile nav visibility lock */
@media (max-width: 900px) {
  .site-header:not(.mobile-nav-open) #nav,
  .site-header:not(.mobile-nav-open) nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .site-header.mobile-nav-open #nav,
  .site-header.mobile-nav-open nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 8px !important;
    margin: 8px 0 0 !important;
    pointer-events: auto !important;
  }
}


/* ROOT CAUSE FIX: the desktop stylesheet's mobile `nav` rule was also
   catching the FOOTER nav and absolutely positioning it over the hero.
   Keep footer navigation in the footer on phones. */
@media (max-width: 1100px) {
  .signature-footer .footer-links,
  footer .footer-links {
    display: flex !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 18px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .signature-footer .footer-links a,
  footer .footer-links a {
    display: inline-block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
  }
}

@media (max-width: 520px) {
  .signature-footer .footer-links,
  footer .footer-links {
    flex-direction: column !important;
    gap: 7px !important;
  }
}