/* ============================================================================
   MGNTION — MOBILE
   Not the desktop layout reflowed. A separate composition.

   The desktop site is built on horizontal tension: type against whitespace,
   problem against philosophy, index against label. None of that exists on a
   phone. So on mobile the site becomes purely vertical and rhythmic — one
   idea per screen, bigger rules, fewer columns, shorter acts.
   ========================================================================= */

@media (max-width: 760px) {

  :root {
    --act-pad: clamp(4rem, 11vh, 7rem);
    --gut: 1.35rem;
    /* the phone reads closer to the eye — pull the display tracking back in */
    --script-track: -0.03em;
  }
  [data-lang='ar'] { --script-leading: 1.3; }

  /* atmosphere is quieter on a small, bright screen */
  .grain { opacity: .02; }
  .ambient { background: radial-gradient(140% 60% at 50% -6%, rgba(201,162,39,.05), transparent 60%); }

  /* ---- NAV ------------------------------------------------------------
     No hamburger. A phone reading a linear film does not need a site map —
     it needs the mark, the language, and a way to make contact.           */
  .nav { height: 56px; }
  .nav__links { display: none; }
  .nav__contact {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--f-mono); font-size: var(--t-xs);
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
    border: 1px solid var(--rule-gold); padding: .45rem .7rem;
  }

  /* ---- HERO -----------------------------------------------------------
     The role line is redundant with the sub on a narrow screen. Drop it,
     and let the claim take the space it frees.                            */
  .hero { padding-block: 5.5rem 2rem; }
  .hero__top .mono { display: none; }
  .hero__line { font-size: calc(min(var(--t-mega), calc(52svh / (var(--lines) * var(--script-leading)))) * var(--fit, 1)); }
  .hero__bottom { margin-top: 2rem; }
  .hero__sub { font-size: 1rem; max-width: 32ch; }

  /* ---- MANIFESTO ------------------------------------------------------- */
  .mani__big { max-width: none; }
  .mani__counter { font-size: 1.25rem; line-height: 1.42; margin-top: 2rem; }
  .mani__thesis { margin-top: 4.5rem; gap: 2rem; }
  .mani__t p { font-size: 1.2rem; line-height: 1.4; max-width: none; }

  /* ---- RANGE ----------------------------------------------------------
     Two columns collapse to a stacked entry: index + name on one line,
     descriptor beneath in mono. Reads like a contents page.               */
  .range__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .range__row {
    grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem;
    padding-block: 1.05rem;
  }
  .range__t { font-size: 1.35rem; }
  .range__d { grid-column: 2; text-align: var(--logical-start); font-size: var(--t-xs); opacity: .8; }
  /* no hover on a phone — give the row a permanent leading edge instead */
  .range__row::before { display: none; }
  .range__row { border-inline-start: 1px solid transparent; }

  /* ---- ACTS -----------------------------------------------------------
     Shorter gates and statements. On a phone the scroll cost of a full
     screen is much higher, so each act gives up about a third of its run. */
  .act[data-weight='3'] { --gate-h: 68svh; --stat-h: 56svh; }
  .act[data-weight='2'] { --gate-h: 58svh; --stat-h: 48svh; }
  .act[data-weight='1'] { --gate-h: 52svh; --stat-h: 42svh; }
  .act[data-weight='2'] .section,
  .act[data-weight='1'] .section { padding-block: calc(var(--act-pad) * .78); }

  .gate__meta { margin-bottom: 1rem; }
  .stat__t { max-width: none; font-size: calc(min(var(--stat-size, var(--t-hero)), calc(44svh / (var(--lines) * var(--script-leading)))) * var(--fit, 1)); }
  .arg { gap: 2.6rem; }
  .arg__body { font-size: 1.02rem; max-width: none; }
  .arg__pull { font-size: 1.5rem; margin-top: 2rem; max-width: none; }

  /* ---- REVEAL ---------------------------------------------------------- */
  .shots { gap: 3rem; }
  .shot__cap { grid-template-columns: 1.8rem 1fr; gap: .8rem; margin-top: .8rem; }
  .shot__cap p { font-size: .92rem; }
  .reveal__head { flex-wrap: wrap; gap: .4rem; }

  /* ---- ACTIONS --------------------------------------------------------
     Full-width stacked bars. The primary keeps the accent; the rest read
     as a list of what exists rather than buttons competing for a tap.     */
  .actions { flex-direction: column; }
  .action { min-width: 0; width: 100%; padding: 1.15rem 1.1rem; }
  .spec { gap: .4rem; }
  .spec li { font-size: .74rem; padding: .42rem .7rem; }

  /* ---- PLATES ---------------------------------------------------------- */
  .plate__stage { padding: 3rem 1rem 1rem; }

  /* the corridor needs less depth or it collapses into noise at 375px */
  .p-gallery { perspective: 420px; }
  .p-gallery__w--l { transform: rotateY(48deg); }
  .p-gallery__w--r { transform: rotateY(-48deg); }
  .p-gallery__end { left: 22%; right: 22%; }
  .p-keys { inset-inline-start: .7rem; bottom: .7rem; }
  .p-keys kbd { font-size: 8px; padding: .25rem .38rem; }

  .p-tl__wave { height: 48px; }
  .p-tl__wave i:nth-child(n+41) { display: none; }   /* thin the waveform */

  .p-vs { grid-template-columns: 1fr auto 1fr; gap: .6rem; }

  /* the vault drops its least load-bearing column rather than squeezing */
  .p-vault__row { grid-template-columns: 1fr auto auto; gap: .6rem; font-size: 9px; letter-spacing: .08em; }
  .p-vault__row > :nth-child(2) { display: none; }
  .p-vault__settle { font-size: 9px; letter-spacing: .1em; }

  /* labs stops being a diptych and becomes two stacked statements */
  .p-labs { grid-template-columns: 1fr; grid-template-rows: 1fr 1px 1fr; }
  .p-labs__side { padding: .8rem; gap: .5rem; }
  .p-labs__side span { font-size: .72rem; }
  .p-labs__egg { width: 40px; }

  .p-shop__t { font-size: 1.1rem; margin-bottom: .9rem; }

  /* ---- METHOD / AGENCIES / CLOSE --------------------------------------- */
  .method__step { padding: 1.4rem 1.2rem 2rem; }
  .method__d { font-size: .92rem; }
  .ag__body { font-size: 1.02rem; }
  .ag__p { padding: 1.4rem 1.2rem 2rem; }
  .close__sub { font-size: 1.15rem; }
  .close__cta { width: 100%; justify-content: space-between; }
  .close__mail { font-size: .92rem; }

  /* ---- FOOTER ---------------------------------------------------------- */
  .foot-b__top { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .foot-b__idx { grid-template-columns: 1fr; gap: .55rem; width: 100%; }
  .foot-b__bot { flex-direction: column; gap: .6rem; }
}

/* Very small phones — protect the claim from becoming unreadable. */
@media (max-width: 380px) {
  :root { --gut: 1.15rem; }
  .range__t { font-size: 1.2rem; }
  .gate__name { font-size: calc(clamp(2.1rem, 11vw, 3rem) * var(--fit, 1)); }
}

/* Landscape phones: height is the scarce axis, so the full-height sections
   stop trying to be full-height and just breathe normally. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero, .close { min-height: auto; padding-block: 5rem 3rem; }
  .gate { min-height: auto; padding-block: 4rem; }
  .stat { min-height: auto; padding-block: 4rem; }
  .hero__line { font-size: calc(min(var(--t-mega), 11vw) * var(--fit, 1)); }
}

/* Coarse pointers never get hover-dependent affordances. */
@media (hover: none) {
  .range__row:hover::before { transform: scaleX(0); }
  .action:hover::before { transform: scaleY(0); }
  .action:hover .action__t, .action:hover .action__x { color: inherit; }
  .action--primary .action__t { color: var(--acc-text); }
  .close__cta:hover::before { transform: scaleX(0); }
  .close__cta:hover span { color: var(--warm); }
}