/* --- Layout collapse ------------------------------------------------------
   TWO breakpoints, and they do different jobs.

   1024 is where the LAYOUT gives up its columns. The sticky two-column story
   needs roughly a thousand pixels before the narrative column stops reading as
   a gutter, and the closing block's CTA is `white-space: nowrap` and simply
   does not fit a 0.72fr column below that. A tablet in portrait gets the same
   single-column read a phone does, at tablet type sizes.

   767 is where the TYPOGRAPHY and the full-bleed films become phone-sized.
   That is a separate question from how many columns there are, which is why
   the two are not one block.

   !! The 1024 line is mirrored in scripts/story-clips.js, which re-decides
   which copy of a film is laid out when the breakpoint is crossed. Move one
   and you must move the other. !!
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .intro__grid { grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }
  .intro .display { max-width: 20ch; }
  .intro__aside { padding-bottom: 0; }

  /* Sticky stage is a desktop layout. Below this each beat carries its own
     image, and the column is capped to a readable measure so a tablet does not
     end up with a 700px-wide portrait photograph and a line of 90 characters. */
  .story__grid { display: block; }
  .stage { display: none; }

  .beats { padding-left: 0; border-left: 0; max-width: 44rem; }
  .beats__progress { display: none; }

  .beat {
    min-height: 0;
    opacity: 1;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--rule);
  }
  .beat:last-of-type { border-bottom: 0; margin-bottom: 0; }
  .beat p { max-width: none; }

  /* The three film beats carry their own copy of the clip here, because the
     sticky stage above is display:none. Only one of each pair is ever laid
     out, and the hidden one is never loaded. */
  .beat__figure {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 1.75rem;
  }
  .beat__figure--clip { position: relative; }

  /* The founders collapse for the same reason the story does: below this the
     copy column is too narrow to carry four paragraphs, and a portrait pinned
     above its own text is not a sticky read — it is a gap you scroll past. So
     the sticky comes off, the flip stops mattering, and each portrait becomes
     a plate at the top of its own bio.

     The picture is capped rather than left to fill the column: a 4:5 frame at
     the full 44rem measure is over 800px tall on a tablet, which pushes the
     name it belongs to off the screen entirely. */
  .founders__head h2 { max-width: 20ch; }
  .founder { display: block; max-width: 40rem; }
  /* Held to the same small band the desktop column uses — it must not grow
     just because the layout stacked. Left to fill a 40rem block this would be
     a 640x800 portrait sitting above its own caption. */
  .founder__portrait {
    position: static;
    max-width: 13rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
  }
  /* Capped with the founders it divides — left full-width it centres on the
     wrap instead of on the copy column, and the sprig sits visibly off-axis. */
  .founders__divider { max-width: 40rem; }

  /* Single column here too. In two columns the CTA — 22 tracked capitals that
     must not wrap — was wider than the 0.72fr aside it sat in, so it ran past
     the right edge and was cut off by the body's overflow. */
  .closing { grid-template-columns: 1fr; align-items: start; }
  .closing__aside { padding-bottom: 0; }
}

@media (max-width: 767px) {
  :root { --header-h: 66px; }
  body { font-size: 1rem; }

  .lockup--mark { font-size: 1.45rem; }
  .header .btn--quiet { font-size: 0.625rem; padding: 0.6rem 0.9rem; letter-spacing: 0.16em; }

  /* A 16:9 frame cover-cropped into a tall phone viewport keeps barely a
     quarter of its width, which slices the mandap off its axis and parks a
     column behind the wordmark. On mobile the film becomes a centred
     landscape plate instead, overscanned sideways so it still bleeds past
     both edges, and the vertical ramp below is retuned to bury the plate's
     own top and bottom edges inside the paper. Plate height and ramp stops
     move together — change one and you must change the other. */
  .reel__video {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: 150%;
    height: 62dvh;
    transform: translate(-50%, -50%);
  }
  .reel__scrim {
    background:
      radial-gradient(ellipse 62% 30% at 50% 49%,
        var(--paper-soft) 0%, var(--paper-fade) 84%),
      linear-gradient(90deg,
        var(--paper) 0%, var(--paper-fade) 16%,
        var(--paper-fade) 84%, var(--paper) 100%),
      linear-gradient(180deg,
        var(--paper) 21%, var(--paper-fade) 36%,
        var(--paper-fade) 64%, var(--paper) 79%),
      linear-gradient(var(--video-veil), var(--video-veil));
  }

  /* The pin still works, but two screens of held video is plenty on a phone. */
  .reel__step { height: 88dvh; }
  .reel__steps { margin-top: -100dvh; }
  .cap .lockup { font-size: clamp(3rem, 17vw, 4.6rem); }
  .cap__note { font-size: 1rem; }

  .intro { padding-block: 4rem; }

  /* Same problem the reel has on a phone, same answer. This film is 3:2 rather
     than the reel's 16:9 — squarer, so cover-cropping it into a tall viewport
     keeps even less of its width than the reel loses. The film becomes a
     centred landscape band, overscanned sideways so it still bleeds past both
     edges. Its top and bottom edges are hard and that is intentional — there
     is no gradient on this film anywhere.

     These two numbers are what size the phone's cut of the film: 150% of a
     ~390px viewport is ~590 CSS px, which is why assets/entrance-mobile.mp4 is
     1080x720 and not the 1620x1080 the desktop source is. Widen the band here
     and that encode should be revisited — see REBUILD-VIDEO.md. */
  .film { height: 260dvh; }
  .film__line { max-width: 16ch; }
  .film__video {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: 150%;
    height: 72dvh;
    transform: translate(-50%, -50%);
  }
  .story__head { margin-bottom: 3rem; }

  .founders { padding-block: 4rem; }
  .founders__head { margin-bottom: 3rem; }
  .founders__divider { margin-block: 3.5rem; }
  /* Smaller again on a phone, and deliberately not full-bleed: at 11rem it
     reads as a portrait set beside the name rather than a hero image the bio
     hangs off. */
  .founder__portrait { max-width: 11rem; }

  .clip__bar { right: 0.6rem; bottom: 0.6rem; }
  .clip__btn { padding: 0.5rem 0.7rem; letter-spacing: 0.14em; }

  /* 22 tracked capitals at desktop size need ~300px, which does not fit inside
     a 320px screen's gutters. Same words, tighter setting. */
  .btn--lg { padding: 1.05rem 1.5rem; font-size: 0.75rem; letter-spacing: 0.16em; }

  .footer__mark .lockup { font-size: 2.4rem; }
  .footer__meta { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* --- Touch targets --------------------------------------------------------
   Keyed to the pointer, not to the viewport: a touchscreen laptop at 1440px
   needs these as much as a phone does, and a mouse at 380px does not.

   The vertical padding on `.link` and the footer's anchors is on INLINE
   elements, so it enlarges the hit area without moving a single pixel of
   layout — the underline stays exactly where it was drawn.
   --------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .clip__btn { min-height: 44px; padding-inline: 1rem; }
  .header .btn--quiet { padding-block: 0.95rem; }
  .link { padding-top: 1.35rem; }
  .footer__meta a { padding-block: 0.75rem; }
  .lockup--mark { padding-block: 0.35rem; }
}