/* ==========================================================================
   exe.cute v3 — 02 · The studio (the develop)

   The sentence about cutting through noise arrives out of noise. Composition
   is v2's manifesto block (css/styles.css:302-321) retuned to a 1.4 viewport
   budget; the word-opacity scrub it used is replaced by the page's one
   gesture — .develop, driven per word from js/ui/studio.js.

   Deliberately NOT carried over from v2: `background: linear-gradient(...)`.
   In v3 the field is hidden by the dot screen (js/ui/screen.js ramps --scr
   0 -> 1 across the first 60vh of this section), not by a gradient over it.
   ========================================================================== */

.studio {
  position: relative;
  /* THE ENTRANCE IS 30vh, NOT 58vh ANY MORE. The 58vh was v2's read-out rhythm, and it is what
     the reader flagged: measured at 1440x900, the run from the hero's last content to
     "01 — the studio" was the hero's own bottom band PLUS 522px of studio padding — close to a
     full viewport of bare field between two sections. 30vh keeps a beat and nothing more.

     WHY THE CHOREOGRAPHY SURVIVES THE CUT — both timings are MEASURED, not authored:
       · js/ui/studio.js derives its develop window from the paragraph's measured box
         (windowedProgress()); ENTER_AT 1.00 starts the first word as the paragraph crosses the
         fold, so with a shorter entrance the sentence simply starts resolving earlier — it now
         develops INTO the junction instead of after it, which is what fills the void.
       · SETTLE_AT 0.26 lands the last word when the paragraph top is 0.26vh from the viewport
         top; the approach pins a full viewport of hold later, so the solid sentence still reads
         before the pins take over.
     The tail keeps 26vh for that hold. min-height is a floor for short viewports only.
     Every value is clamped: raw vh scaled without bound (925px of entrance air at 2560x1440). */
  min-height: min(115vh, 1150px);
  padding: min(30vh, 300px) var(--gutter) min(26vh, 260px);
}

/* MOBILE: same tightening. The floor is one viewport — at 390x844 a taller floor exceeded its
   own content by ~250px of dead field after the sentence (measured studioH 1013 against ~800 of
   content). The tail is 38vh so the solid sentence still holds before the approach pins on a
   tall phone. */
@media (max-width: 900px) {
  .studio {
    min-height: min(100vh, 860px);
    padding: min(20vh, 220px) var(--gutter) min(38vh, 360px);
  }
}

.studio .section__meta {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.studio__text {
  max-width: 22ch;
  font-size: clamp(1.75rem, 4.2vw, 4.1rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   One word = one develop region. js/ui/studio.js splits the paragraph in
   init(), moves .develop off the <p> and onto these spans, and staggers their
   --dev-r so the resolve sweeps through the sentence in reading order.
   -------------------------------------------------------------------------- */
.studio__w {
  display: inline-block;
  /* The mask painting area is the border box. At line-height 1.18 that box is
     shorter than the glyphs, so ascenders and descenders ("through",
     "high-impact") would be cut off. Vertical padding grows the box; the equal
     negative margin cancels it again for line-box height, so the paragraph
     sets exactly as it would without the split. */
  padding: 0.26em 0;
  margin: -0.26em 0;
  /* Each word's mask tile is phased back onto the paragraph's own origin
     (--mx/--my, written once per layout by studio.js), so the sentence
     resolves out of ONE continuous 4px matrix rather than eighteen
     independently-aligned grids. */
  -webkit-mask-position: var(--mx, 0px) var(--my, 0px);
  mask-position: var(--mx, 0px) var(--my, 0px);
}

/* Reduced motion: base.css already neutralises .develop (mask off, opacity 1),
   so the whole sentence is simply present. Nothing else here moves. */