/* ============================================================
   Cognuum — RESPONSIVE
   Three distinct compositions, not one layout squeezed down.
     Desktop (1200px+) : default rules in the component files.
     Tablet  (768–1199): single centered column, 2×2 framework.
     Mobile  (<768px)  : vertical manifesto, stacked rows.
   The constellation script keys its math off #glyph's computed
   `position` (absolute on desktop → contained block below).
   ============================================================ */

/* ===================== TABLET ===================== */
@media (max-width:1199px){
  html{ height:auto; }
  body{ height:auto; overflow-x:hidden; overflow-y:auto; }

  .stage{
    width:100%;
    height:auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:visible;
    padding-top:104px;
    padding-bottom:72px;
  }

  /* top bar stays fixed; just condense its padding on smaller screens */
  header{
    height:88px;
    padding:0 44px;
  }
  header.scrolled{ height:64px; }

  /* animation: contained block, centered, above the copy */
  #glyph{
    position:relative;
    inset:auto;
    order:2;
    width:min(560px,84vw);
    height:340px;
    margin:18px 0 2px;
  }
  .glyph-wrap{ display:none; }

  /* hero: centered editorial text column */
  .hero{
    position:static;
    transform:none;
    order:3;
    flex-direction:column;
    align-items:center;
    gap:0;
    width:100%;
    max-width:720px;
    padding:0 48px;
    text-align:center;
  }
  .copy{ max-width:660px; text-align:center; }
  .hero-ctas{ justify-content:center; }
  .copy::before{ display:none; }
  h1{ white-space:normal; font-size:58px; margin-bottom:24px; }
  .sub{ font-size:23px; }
  .sub br{ display:none; }
  .cta{ margin-top:30px; }

  /* framework: static, centered heading + 2×2 grid */
  .framework{
    position:static;
    order:4;
    left:auto; right:auto; bottom:auto;
    width:100%;
    max-width:720px;
    margin-top:72px;
    padding:0 48px;
  }
  .fw-heading{
    font-size:25px;
    white-space:normal;
    text-align:center;
    max-width:none;
    margin:0 auto 46px;
  }
  .fw-grid{
    grid-template-columns:repeat(2,1fr);
    gap:44px 56px;
    max-width:600px;
    margin:0 auto;
  }
  .fw-item{ max-width:none; }
  .fw-q{
    white-space:normal;
    font-size:31px;
    line-height:1.16;
    min-height:0;
    margin-bottom:16px;
  }
  .fw-q br{ display:none; }
}

/* ===================== MOBILE ===================== */
@media (max-width:767px){
  header{ height:72px; padding:0 26px; }
  header.scrolled{ height:58px; }
  .stage{ padding-top:84px; }
  .wordmark{ font-size:17px; letter-spacing:0.34em; }
  .nav-right{ gap:14px; }
  .icon-btn svg{ width:22px; height:22px; }

  /* the floating theme toggle sits in the bottom dock on mobile */
  #theme-toggle{ bottom:14px; right:20px; }
  /* only Request Access remains — keep it a compact text button */
  .nav-btn{ padding:9px 16px; font-size:12px; }
  .nav-btn .nb-txt{ display:inline; }
  .nav-btn .nb-ico{ display:none; }

  #glyph{
    order:2;
    width:min(440px,92vw);
    height:min(440px,92vw);
    margin:6px 0 0;
  }

  .hero{ padding:0 30px; max-width:520px; }
  h1{ font-size:40px; letter-spacing:-0.015em; margin-bottom:20px; }
  .sub{ font-size:19px; line-height:1.4; }
  .cta{ margin-top:26px; padding:13px 26px; font-size:14px; }

  .framework{
    padding:0 30px;
    margin-top:62px;
    max-width:520px;
  }
  .fw-heading{
    font-size:22px;
    line-height:1.45;
    margin:0 auto 40px;
  }
  .fw-grid{
    grid-template-columns:1fr;
    gap:38px;
    max-width:none;
    justify-items:center;
    text-align:center;
  }
  .fw-q{
    font-size:30px;
    line-height:1.18;
    margin-bottom:14px;
  }
  .fw-a{ font-size:12px; opacity:0.92; }
}