/* Phone layout (portrait, up to 820px). The 1920x1080 frame stops scaling and
   every screen reflows into one scrolling column. Loaded after app.css. */

@media (max-width: 820px) and (orientation: portrait) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  #shell { position: relative; inset: auto; display: block; min-height: 100vh; }
  #stage { height: auto; min-height: 100vh; overflow: visible; }
  /* Plates, film and particles stay fixed behind the scrolling column. */
  #bg, #bgA, #bgB, #bgVideo, #bgVideoScrim, #gl, #px, #vignette, #grain, #topScrim, #sideScrim { position: fixed; }
  #sideScrim { display: none; }

  #frame {
    position: relative; width: 100%; height: auto; min-height: 100vh;
    transform: none; container-type: inline-size;
    --k: 1; --fx: 0px; --fy: 0px;
    --pad-x: 20px; --pad-t: 96px; --pad-b: 32px;
    display: flex; flex-direction: column;
  }
  #views { position: relative; inset: auto; flex: 1 1 auto; }
  .view { position: relative; inset: auto; min-height: calc(100vh - 0px); }
  .view.on { display: flex; flex-direction: column; }

  /* header */
  #chrome { position: fixed; inset: 0 0 auto 0; height: 72px; z-index: 9; pointer-events: none; }
  #chrome .bar.top { padding: 18px 20px; }
  .brand img { height: 22px; }
  .brand span { font-size: 9px; }
  .ai-mark { left: auto; right: 16px; top: 12px; width: 52px; height: 44px; }

  /* type */
  .d-xl, .fw-title, .prio-title, .id-title, .pr-name, .qtext, .case-title, .res-head, .done-title, .pos-name, .d-m, .d-l { font-size: 30px !important; line-height: 1.12 !important; }
  .qtext.long { font-size: 26px !important; }
  .lede, .fw-lede p, .prio-lede, .pr-blurb, .case-lead, .res-body, .done-body, .body, .arch-body { font-size: 16px !important; line-height: 1.55 !important; }
  .label, .pool-tag, .prio-eyebrow, .id-eyebrow, .ms-ends, .case-eyebrow, .done-eyebrow, .done-label, .res-eyebrow, .pr-verb, .prio-hint, .prio-tap, .hex-hint, .ts-eyebrow, #tileClose { font-size: 11px !important; letter-spacing: 0.12em !important; }
  .btn, .pn-arrow, .ff-back, .fw-skip { font-size: 12px !important; min-height: 54px !important; height: auto !important; padding: 0 22px !important; }
  .pn-prev, .pn-round, .pn-fwd { width: 54px !important; height: 54px !important; padding: 0 !important; }
  .pn-next { width: auto !important; }

  /* attract */
  #v-attract.on { justify-content: center; }
  .statement { width: 100%; }
  .attract-mark { width: 110px; height: auto; }

  /* framework */
  #v-intro.on { gap: 28px; }
  .fw-lede { width: 100%; }
  .fw-actions { gap: 22px; }

  /* explore: hexagon on top, pool copy below */
  #v-explore.on { padding-top: 96px; }
  #v-explore .copy-scrim { display: none; }
  .hex-box { display: block; position: relative; width: 100%; aspect-ratio: 752 / 651; overflow: visible; margin: 0 auto; }
  #hexWrap, .prio-hex {
    position: absolute; inset: auto; left: 0; top: 0; width: 1920px; height: 1080px;
    transform-origin: 0 0; transform: scale(var(--hexk, 0.5)) translate(-584px, -194px);
    opacity: 1; animation: none;
  }
  #stage[data-view='explore'][data-pool] #hexWrap { display: none; }
  .hex-hint { position: static; width: auto; height: 48px; margin: 12px auto 0; padding: 0 22px; font-size: 11px; }
  #stage[data-view='explore'][data-pool] .hex-hint { display: none; }
  #v-explore .col { position: static; width: 100%; padding: 24px 20px 0; }
  #stage[data-view='explore']:not([data-pool]) #v-explore .col { display: none; }
  .pool-read .foot { margin-top: 24px; }
  #v-explore .focus-foot, .pool-nav { position: static; margin: 24px 20px 0; display: flex; justify-content: center; }
  .pool-nav { gap: 12px; }
  .pool-dots i { width: 18px; }
  .pool-dots i.on { width: 32px; }

  /* priorities */
  #v-prio.on { display: flex; flex-direction: column; padding: 72px 0 32px; }
  .prio-copy { position: static; width: 100%; padding: 24px 20px 0; order: 2; }
  .prio-lede, .prio-list { width: 100%; }
  .prio-list { margin-top: 24px; min-height: 0; }
  .prio-list li span { font-size: 16px; }
  .prio-hex-box { order: 1; margin-top: 24px; }
  .prio-tap { position: static; width: auto; text-align: center; margin: 8px 0 0; order: 1; }
  .prio-go { margin-top: 20px; min-width: 0; width: 100%; }

  /* question */
  #v-diag .qcol { position: static; width: 100%; padding: 0; }
  .qcase-card { width: 100%; min-height: 0; padding: 18px 18px 16px 44px; margin-top: 24px; }
  .qcase-card .qcc-line { left: 22px; top: 20px; height: calc(100% - 40px); }
  .qcase-card .qcc-metric { font-size: 18px; }
  .qcase-card .qcc-title { font-size: 15px; }
  .qcase-card .qcc-read { font-size: 14px; }
  .ms-read { min-height: 0; }
  .ms-label { font-size: 16px !important; }
  .ms-detail { font-size: 14px !important; }
  .qactions { flex-wrap: wrap; gap: 12px; }
  .qnav { display: flex; gap: 12px; }
  .pn-gallery { width: 100% !important; order: 3; }

  /* case study page */
  #v-case.on { padding-top: 96px; }
  #v-case .case-photo, #v-case .case-scrim, #v-case .case-wash { position: fixed; inset: 0; }
  #v-case .case-photo { opacity: 0.35; }
  .case-stack { position: static; width: 100%; }
  .case-col, .case-rule, .case-outcome { width: 100% !important; margin-left: 0 !important; }
  .case-stats { flex-wrap: wrap; gap: 18px; }
  .case-foot { position: static; margin-top: 28px; display: flex; justify-content: flex-end; }

  /* case studies gallery */
  .cg-grid { display: flex; flex-direction: column; gap: 14px; }
  .cg-grid .tile { min-height: 0; }
  .cg-foot { margin-top: 24px; }

  /* identify */
  #v-identify { padding: var(--pad-t) 20px var(--pad-b) !important; }
  #v-identify .id-ask { position: static; }
  #v-identify .deliver-wrap { position: static; }
  .id-art { width: 220px; height: 150px; }
  .id-field { width: 100% !important; }
  .id-go { width: 100%; }

  /* results */
  #v-wrap.on { min-height: 100vh; }
  .beat { position: relative; inset: auto; padding-bottom: 0; }
  .beat.on { justify-content: flex-start; gap: 28px; }
  .beat-nav { position: static; margin-top: 12px; }
  .arch-wrap, .bench-wrap { width: 100%; }
  .pos-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pos-glyph { width: 120px; height: auto; }
  .pos-label { margin-bottom: 20px; }
  .pos-icon { width: 120px; height: auto; }
  #beat1 .arch-cols { display: flex; flex-direction: column; gap: 20px; }
  .arch-text { width: 100%; }
  .arch-stat { width: 100%; }
  .bench-row { grid-template-columns: 1fr; gap: 6px; }
  .res-left { position: static; width: 100%; }
  .res-row { flex-wrap: wrap; gap: 8px 14px; }
  .res-pools { white-space: normal; font-size: 16px; }
  .res-hex-box { display: block; position: relative; width: 100%; aspect-ratio: 600 / 690; margin: 8px auto 0; }
  .res-hex { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--ringk, 0.5)) translate(-660px, -180px); }

  /* done */
  .done-left, .done-report, .done-foot { position: static; width: 100%; }
  .done-report { margin-top: 24px; }
  .done-foot { margin-top: 24px; }

  /* case reader sheet */
  #tileSheet { position: fixed; }
  .ts-card { left: 0; top: 0; width: 100%; height: 100%; transform: none !important; padding: 90px 20px 30px; border-radius: 0; overflow: auto; }
  .ts-card .case-title { font-size: 28px; }
  .ts-card .case-col { width: 100%; }
}