/* =========================================================================
   ArchiMass — responsive.css
   Mobile is a designed experience, not a squeezed desktop:
   · depth collapses to two planes instead of six
   · the sticky story becomes a vertical sequence of full-bleed chapters
   · film panels stack full-bleed with larger touch controls
   · Arena becomes a swipeable rail (see landing.css)
   ========================================================================= */

.hero__primary-actions{
  display:flex;
  gap:12px;
  align-items:center;
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width:1024px){
  :root{ --section-pad:clamp(70px,10vh,120px); }
  .grid-rule{ background-size:calc(100% / 6) 100%; }
}

/* ---- Portrait hero ----------------------------------------------------- */
@media (max-width:900px) and (orientation:portrait){
  .hero__canvas,
  .hero__vignette{
    bottom:auto;
    height:calc(100% - 180px);
  }
  .hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(112px,32%);
    column-gap:14px;
  }
  .hero__brandline{ grid-column:1 / -1; }
  .hero__title{
    grid-column:1;
    grid-row:2;
    align-self:center;
  }
  .hero__sub,
  .hero__bar{ grid-column:1 / -1; }
  .hero__bar{ margin-top:clamp(180px,24vh,280px); }
  .hero__actions{ display:contents; animation:none; opacity:1; }
  .hero__primary-actions{
    grid-column:2;
    grid-row:2;
    align-self:center;
    display:grid;
    gap:8px;
    width:min(100%,132px);
    margin-right:8px;
    opacity:0;
    animation:fadeUp .9s var(--ease) .6s forwards;
  }
  .hero__primary-actions .btn{
    width:100%;
    height:34px;
    padding:7px 9px;
    font-size:8px;
    line-height:1.25;
    letter-spacing:.11em;
    white-space:normal;
  }
}

/* ---- Phone -------------------------------------------------------------- */
@media (max-width:720px){
  :root{
    --gutter:18px;
    --section-pad:72px;
    --header-h:58px;
  }

  /* depth: keep only near/far, halve the travel */
  [data-depth="-3"],[data-depth="-2"]{ --depth-amp:-26px; }
  [data-depth="-1"]{ --depth-amp:-14px; }
  [data-depth="1"],[data-depth="2"],[data-depth="3"]{ --depth-amp:18px; }
  [data-tilt]{ transform:none; }
  .z-scene{ perspective:none; }
  .z-plane{ transform:none; }

  .hero{ min-height:120svh; }
  .hero__canvas{
    top:clamp(210px,27vh,250px);
    height:calc(100% - 440px);
  }
  .hero__vignette{ height:calc(100% - 280px); }
  .hero__bar{ margin-top:clamp(280px,40vh,390px); }
  .hero__title{ font-size:clamp(2.1rem,8.6vw,3rem); }
  .hero__sub{ font-size:.98rem; }
  .hero__scroll{ display:none; }

  /* story: stage is no longer pinned behind text — chapters own the screen */
  .story__stage{ position:sticky; height:58svh; top:var(--header-h); }
  .story__steps{ margin-top:-58svh; }
  .story__step{ min-height:100svh; align-items:flex-end; padding-bottom:6vh; }
  .story__card{ width:100%; background:color-mix(in srgb, var(--void) 88%, transparent); backdrop-filter:blur(10px); }
  .story__card h2{ font-size:1.42rem; }

  .agent__viewport{ min-height:260px; }
  .console__log{ padding:16px; }
  .console__msg .txt{ font-size:13.5px; }

  .options__stage{ aspect-ratio:4/3.4; }
  .options__tabs button{ min-width:132px; padding:13px 14px; }
  .options__readout{ top:12px; right:12px; }
  .options__readout .r{ font-size:10px; }

  .films__row{ padding-inline:0; width:100%; max-width:100%; }
  .films__row > *{ min-width:0; }

  /* Reveals come from below on phones. The horizontal variants would sit 28px
     off-screen until they animate in, which widens the document (and with it
     the fixed header) before the reader ever sees them. */
  [data-reveal="left"],[data-reveal="right"]{ transform:translate3d(0,22px,0); }
  .film{ border-left:0; border-right:0; }
  .film__btn{ width:42px; height:42px; }      /* touch targets */
  .film__ui{ opacity:1; transform:none; }      /* no hover on touch */
  .film__bar{ height:30px; }

  .stack__viz{ aspect-ratio:1/1; }
  .caps__model{ aspect-ratio:1/1; }
  .end h2{ font-size:2rem; }
  .chapter-no{ font-size:2.6rem; }
}

/* ---- Coarse pointer: never hide controls behind hover ------------------- */
@media (hover:none){
  .film__ui{ opacity:1; transform:none; }
  .cap__d{ max-height:130px; opacity:1; margin-top:8px; }
  .nav__panel{ display:none; }
}

/* ---- Short viewports ---------------------------------------------------- */
@media (max-height:640px) and (min-width:721px){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 56px) 56px; }
  .story__stage{ height:100svh; }
}

/* ---- Print (rare, but a spec sheet should print) ------------------------ */
@media print{
  .site-header,.film__ui,.hero__canvas,.end__canvas,canvas{ display:none !important; }
  body{ background:#fff; color:#000; }
}

@media(max-width:760px){
  .content-hero__inner>*,.content-grid>*,.contribute-panel>*,.pricing-access__grid>*,.gpu-access__layout>*,.plan-catalog__head>*,.project-hero__grid>*,.project-content__grid>*,.f-col{min-width:0}
  .f-col a,.site-footer__base p,.content-copy a,.project-content a,.system-status{overflow-wrap:anywhere}
  .modal__panel{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
  .system-actions,.end__actions{flex-wrap:wrap}
  .system-actions .btn,.end__actions .btn{max-width:100%;white-space:normal;text-align:center}
  .arena-catalog__controls{max-width:100%;flex-wrap:wrap}
  .arena-catalog__controls input,.arena-catalog__controls select{min-width:0;max-width:100%}
}
@media(max-width:540px){
  .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero__title{grid-column:1/-1;grid-row:auto}
  .hero__primary-actions{grid-column:1/-1;grid-row:auto;display:flex;flex-wrap:wrap;width:100%;margin:12px 0 0;gap:10px}
  .hero__primary-actions .btn{flex:1 1 160px;width:auto;min-height:44px;height:auto;padding:12px;font-size:10px;line-height:1.4}
  .end__actions .btn,.system-actions .btn{flex:1 1 180px}
}
@media(max-width:760px) and (pointer:coarse){
  .btn,.header__theme,.social-links .social-links__item,.product-launcher__close{min-height:44px}
  .social-links .social-links__item{width:44px;flex-basis:44px}
  .field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.system-form input,.system-form select,.system-form textarea{font-size:16px;max-width:100%;min-width:0}
}

@media(max-width:900px) and (pointer:coarse){.hero__primary-actions .btn{min-height:44px;height:auto;font-size:10px;padding:11px}}