/* ============================================================
   COSMOS UNVEILED — responsive.css
   Mobile-first overrides for ≤960px (tablet) and ≤640px (phone)
   Loaded LAST so it overrides style.css and article.css.
============================================================ */

/* ── Hamburger toggle (hidden on desktop) ────────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--parchment, #F7F3EA);
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}

/* ── Tablet (≤960px) ─────────────────────────────────────── */
@media (max-width: 960px) {
  .container,
  .container--article {
    padding: 0 1.5rem;
  }

  /* Article body + sidebar stack vertically */
  .article-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  .article-sidebar {
    position: static !important;
    top: auto;
  }

  /* Footer becomes 2 cols, brand spans full width */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Hero image less tall */
  .article-cover img {
    height: 380px;
  }
  .article-cover-caption {
    padding: 0 1.5rem 1.5rem;
  }
  .article-header {
    padding: 3rem 0 2rem;
  }

  /* Articles archive page (articles.html uses inline classes) */
  .article-featured {
    grid-template-columns: 1fr !important;
  }
  .articles-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px;
  }

  /* Home page card-stack & related-grid already adapt */
}

/* ── Phone (≤640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  .container,
  .container--article {
    padding: 0 1rem;
  }

  /* ───── Navbar: hamburger ──────────────────────────────── */
  .navbar .container {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: flex;
  }
  .navbar.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .navbar.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .navbar.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(13, 20, 33, 0.98);
    border-top: 1px solid rgba(196, 146, 47, 0.18);
    padding: 0.5rem 0 1rem;
    margin: 0;
    align-items: stretch !important;
  }
  .navbar.nav-open .nav-links {
    display: flex;
  }
  .nav-links a {
    height: auto !important;
    padding: 1rem 1.25rem !important;
    width: 100%;
    border-bottom: 1px solid rgba(196, 146, 47, 0.06);
    font-size: 0.78rem !important;
  }
  .nav-links a::after { display: none !important; }
  .nav-links a.nav-cta {
    margin: 0.75rem 1.25rem 0 !important;
    padding: 0.95rem 1.25rem !important;
    height: auto !important;
    text-align: center;
    justify-content: center;
    border-bottom: 0;
    border-radius: 0;
  }

  /* ───── Article hero ──────────────────────────────────── */
  .article-cover img {
    height: 240px;
  }
  .article-cover-caption {
    padding: 0 1rem 1.25rem;
    font-size: 0.62rem;
  }
  .article-header {
    padding: 2rem 0 1.5rem;
  }
  .article-deck {
    font-size: 1rem;
    line-height: 1.7;
    padding-left: 1rem;
  }
  .article-byline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .article-byline-right {
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.68rem;
  }

  /* ───── Article body ──────────────────────────────────── */
  .article-main {
    padding: 2.5rem 0 4rem;
  }
  .article-body h2 {
    font-size: 1.4rem;
    margin: 2.25rem 0 1rem;
  }
  .article-body h3 {
    font-size: 1.1rem;
  }
  .article-body p {
    font-size: 1rem;
    line-height: 1.8;
  }

  /* Pullquote: bleed slightly into the gutter for visual emphasis */
  .pullquote {
    margin: 2rem -0.5rem;
    padding: 1.25rem 1.25rem;
  }
  .pullquote p {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* FAQ */
  .faq-item h3 { font-size: 1rem; }
  .faq-item p { font-size: 0.95rem; }

  /* Sources */
  .sources-list li,
  .article-sources li { font-size: 0.85rem; }

  /* Sidebar callouts (now stacked, just smaller) */
  .callout-number { font-size: 1.75rem; }

  /* ───── Newsletter form: stacked ──────────────────────── */
  .newsletter {
    padding: 4rem 0;
  }
  .newsletter-form {
    flex-direction: column;
    border: 0;
    gap: 0.75rem;
    max-width: 100%;
  }
  .newsletter-input {
    width: 100%;
    text-align: center;
    border: 1px solid rgba(196, 146, 47, 0.38);
  }
  .newsletter-btn {
    width: 100%;
    padding: 1rem;
    min-height: 48px;
  }

  /* ───── Related grid (1 col on phone) ─────────────────── */
  .related-grid {
    grid-template-columns: 1fr !important;
  }
  .related {
    padding: 3.5rem 0;
  }
  .section-header { margin-bottom: 1.75rem; }

  /* ───── Articles archive (1 col grid) ─────────────────── */
  .articles-grid {
    grid-template-columns: 1fr !important;
  }

  /* ───── Footer (1 col) ────────────────────────────────── */
  .footer {
    padding: 3rem 0 2rem;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  .footer-legal { font-size: 0.65rem; }

  /* ───── Buttons: bigger touch targets ─────────────────── */
  .btn-primary {
    min-height: 44px;
    padding: 0.95rem 1.4rem;
  }

  /* ───── Page hero on archive (articles.html) ──────────── */
  .page-hero,
  .article-hero {
    text-align: left;
  }
}

/* ============================================================
   Static pages (About / Contact / Privacy / Terms / Newsletter)
   All use content-wrap with 3rem padding and 2-col grids that
   crowd in mobile. Force single-column + reduced padding.
============================================================ */
@media (max-width: 960px) {
  /* Content wrap of About, Contact, etc. */
  .content-wrap {
    padding: 4rem 1.5rem 6rem !important;
  }
  .page-hero {
    padding: 7rem 1.5rem 4rem !important;
    min-height: auto !important;
  }
  .page-title {
    font-size: clamp(2.4rem, 7vw, 4rem) !important;
  }

  /* About — stack mission-grid and pub-strip */
  .mission-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 4rem !important;
  }
  .pub-strip {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.5rem !important;
    margin-bottom: 4rem !important;
  }

  /* About — 3-column pillars become 1 column */
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
  .pillar {
    padding: 1.75rem 1.5rem !important;
  }

  /* Contact — stack info + form */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Privacy & Terms — stack TOC sidebar */
  .legal-wrap {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 4rem 1.5rem 6rem !important;
  }
  /* TOC <aside class="toc"> is position:sticky on desktop — kill that on
     mobile so it stops floating over the body text as the reader scrolls. */
  .toc {
    position: static !important;
    top: auto !important;
  }

  /* Masthead — process grid stays 2x2 but breathes */
  .process-steps {
    grid-template-columns: 1fr 1fr !important;
  }
  .desk-card {
    padding: 2rem 1.75rem !important;
  }
  .links-out .link-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .4rem !important;
  }

  /* Standards & Corrections — already narrow enough, just trim padding */
  .body-p, .rule-list li, .callout {
    font-size: .98rem !important;
  }
}

@media (max-width: 640px) {
  .content-wrap {
    padding: 3rem 1rem 5rem !important;
  }
  .page-hero {
    padding: 6rem 1rem 3.5rem !important;
  }
  .page-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .page-sub {
    font-size: .98rem !important;
  }

  /* About specific */
  .mission-large {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
  .pillars-grid {
    gap: 1px !important;
  }
  .pillar-num {
    font-size: 2rem !important;
  }

  /* Contact */
  .contact-grid {
    gap: 2rem !important;
  }

  /* Legal (privacy, terms) */
  .legal-wrap {
    padding: 3rem 1rem 5rem !important;
  }

  /* Masthead */
  .process-steps {
    grid-template-columns: 1fr !important;
  }
  .desk-card {
    padding: 1.75rem 1.25rem !important;
  }
  .desk-name {
    font-size: 1.5rem !important;
  }
}

/* ── Touch-only devices: enforce minimum tap targets ─────── */
@media (hover: none) {
  .btn-primary,
  .nav-cta,
  .newsletter-btn,
  .nav-links a {
    min-height: 44px;
  }
}

/* ============================================================
   Home refresh — Editorial Observatory mobile rules
   (uses !important defensively against the page's inline <style>)
============================================================ */
@media (max-width: 960px) {
  .latest-feature {
    padding: 5rem 0 4.5rem !important;
  }
  .latest-feature-eyebrow {
    margin-bottom: 2.5rem !important;
    font-size: 0.55rem !important;
  }
  .latest-feature-eyebrow::before,
  .latest-feature-eyebrow::after { width: 36px !important; }
  .latest-feature-inner {
    padding: 0 1.5rem !important;
    gap: 2.25rem !important;
  }
  .latest-feature-image {
    aspect-ratio: 16 / 10 !important;
  }

  .archive { padding: 4.5rem 0 !important; }
  .archive-inner { padding: 0 1.5rem !important; }
  .archive-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 2rem !important;
  }
  .archive-card-title { font-size: 1.18rem !important; }

  /* Topics: stay 2x2 horizontal entries, more breathing room */
  .topics { padding: 4.5rem 1.5rem !important; }
  .topic-cell {
    padding: 2rem 1.75rem !important;
    grid-template-columns: 48px 1fr !important;
    gap: 1.25rem !important;
  }
  .topic-mark { width: 38px !important; height: 38px !important; }
  .topic-name { font-size: 1.15rem !important; }

  /* About strip: stack quote above body */
  .about-strip { padding: 4rem 1.5rem !important; }
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    text-align: left !important;
  }
  .about-left .big-quote {
    font-size: clamp(2rem, 7vw, 3rem) !important;
    text-align: left !important;
  }

  /* Footer: stack columns */
  footer { padding: 2.25rem 1.5rem !important; }
  .footer-inner {
    flex-direction: column !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }
  .footer-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  .latest-feature {
    padding: 3.5rem 0 3.25rem !important;
  }
  .latest-feature-inner {
    padding: 0 1rem !important;
    gap: 1.75rem !important;
  }
  .latest-feature-eyebrow {
    margin-bottom: 1.75rem !important;
    gap: 0.75rem !important;
  }
  .latest-feature-eyebrow::before,
  .latest-feature-eyebrow::after { width: 24px !important; }
  .latest-feature-image {
    aspect-ratio: 4 / 3 !important;
  }
  .latest-feature-image::before,
  .latest-feature-image::after {
    width: 18px !important; height: 18px !important;
  }
  .latest-feature-image::before { top: 10px !important; left: 10px !important; }
  .latest-feature-image::after { bottom: 10px !important; right: 10px !important; }
  .latest-feature-title {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
  }
  .latest-feature-deck {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    padding-left: 1rem !important;
  }
  .latest-feature-byline {
    flex-wrap: wrap !important;
    font-size: 0.65rem !important;
    margin-bottom: 1.5rem !important;
    gap: 0.5rem !important;
  }

  .archive { padding: 3rem 0 !important; }
  .archive-inner { padding: 0 1rem !important; }
  .archive-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1.25rem !important;
  }
  .archive-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .archive-card-title { font-size: 1.18rem !important; }

  /* Topics: 1 column on phones — no horizontal scroll possible */
  .topics { padding: 3.5rem 1rem !important; }
  .topics-grid { grid-template-columns: 1fr !important; }
  .topic-cell {
    padding: 1.5rem 1.1rem !important;
    grid-template-columns: 38px 1fr !important;
    gap: 1rem !important;
  }
  .topic-mark { width: 32px !important; height: 32px !important; }
  .topic-name { font-size: 1.05rem !important; }
  .topic-desc { font-size: 0.8rem !important; line-height: 1.6 !important; }

  /* About strip on phones */
  .about-strip { padding: 3rem 1rem !important; }
  .about-grid { gap: 1.75rem !important; }
  .about-left .big-quote {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    color: rgba(196,146,47,0.30) !important;
  }
  .about-body { font-size: 0.98rem !important; line-height: 1.78 !important; }

  /* Footer on phones */
  footer { padding: 2rem 1rem !important; }
  .footer-nav { gap: 1rem 1.25rem !important; font-size: 0.7rem !important; }
  .footer-copy { font-size: 0.62rem !important; }

  /* Newsletter on phones (in case the inline section has its own layout) */
  .newsletter { padding: 4rem 1rem !important; }
  .nl-form, .newsletter-form {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .nl-input, .newsletter-input {
    width: 100% !important;
    text-align: center !important;
  }
  .nl-btn, .newsletter-btn {
    width: 100% !important;
  }
}