/* ==========================================================================
   KYLE LOFTUS STUDIOS — THE MOBILE LAYER
   ==========================================================================

   Why this file exists
   --------------------
   Mobile was never composed. It was the residue of nineteen rounds of
   breakpoint patches on a desktop layout: 84 @media blocks across five
   stylesheets at eight different breakpoints, 21 of them `max-width: 620px`
   in definitive.css alone, each written in a different round without
   knowing the others existed. That is why it read, in Giovani's words, like
   "Safari shrunk to semi fit the mobile view".

   What a real one looks like
   --------------------------
   Measured against framer.com on a 390x844 phone: 11 @media rules total,
   three breakpoints, and desktop rules scoped behind `min-width: 810px` so
   they never reach a phone at all. The composition is not a squeezed grid -
   it is a vertical stack of self-contained CARDS: media filling the top of
   the card, copy beneath it, one action at the bottom, a single consistent
   gutter, and generous air between cards. One column, always.

   The rules this file follows
   ---------------------------
   1. ONE breakpoint owns the phone: 720px. No new numbers.
   2. This file loads LAST, so it wins the cascade over the legacy patchwork
      underneath it without needing !important on every line. The old blocks
      should be pruned in a follow-up; nothing here depends on them.
   3. Every value comes from the scale below. No magic numbers in sections.
   4. Composition is decided per section - "what is this on a phone" - not by
      overriding whichever desktop property happened to be in the way.
   5. Type: display centred for the moments (hero, section headers, closing),
      body copy LEFT inside cards. Centred paragraphs past two lines are hard
      to read, and Framer's own mobile sets card copy left for that reason.
   ========================================================================== */

@media (max-width: 720px) {
  :root {
    /* One gutter, one rhythm, one type scale for the whole phone. */
    --m-gutter: 1.15rem;
    --m-radius: 0.75rem;
    --m-card-gap: 1rem;
    --m-section-gap: clamp(4.25rem, 13vw, 6rem);
    --m-block-gap: 1.15rem;

    --m-display: clamp(2.5rem, 11.5vw, 3.5rem);
    --m-h2: clamp(2rem, 8.6vw, 2.75rem);
    --m-h3: 1.32rem;
    --m-body: 1.02rem;
    --m-label: 0.66rem;

    --m-leading-display: 1.02;
    --m-leading-body: 1.55;
  }

  /* ---- Page shell -------------------------------------------------------
     A single gutter for everything. Sections stop inventing their own
     horizontal padding, which is what made the left edge wander down the
     page from section to section. */
  .definitive-site main > section,
  .definitive-interior main > section {
    padding-right: var(--m-gutter);
    padding-left: var(--m-gutter);
  }

  .definitive-site main > section {
    padding-top: var(--m-section-gap);
    padding-bottom: var(--m-section-gap);
  }

  /* Full-bleed sections opt out by name - the hero, the galaxy and the
     closing wall are compositions, not columns. */
  .definitive-site #top,
  .definitive-site .def-galaxy,
  .definitive-site .def-film-roll,
  .definitive-site .def-close,
  .definitive-site .def-footer {
    padding-right: 0;
    padding-left: 0;
  }

  /* The galaxy's vertical padding goes too. Its star-field mask is anchored in
     vh against the chapter's own negative tuck, and 68px of section padding
     shifts the field relative to that tuck - which is what re-opens the hard
     seam under the hero between 621 and 720px. */
  .definitive-site .def-galaxy {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ---- Type -------------------------------------------------------------
     Set once here rather than per section, so a headline is the same size
     wherever it appears and the page has one voice. */
  .definitive-site h1,
  .definitive-interior h1 {
    font-size: var(--m-display);
    line-height: var(--m-leading-display);
    letter-spacing: -0.03em;
  }

  .definitive-site h2,
  .definitive-interior h2 {
    font-size: var(--m-h2);
    line-height: 1.06;
    letter-spacing: -0.026em;
  }

  .definitive-site h3,
  .definitive-interior h3 {
    font-size: var(--m-h3);
    line-height: 1.14;
  }

  .definitive-site p,
  .definitive-interior p {
    font-size: var(--m-body);
    line-height: var(--m-leading-body);
  }

  .definitive-site .def-kicker,
  .definitive-interior .lrn-kicker {
    font-size: var(--m-label);
    letter-spacing: 0.17em;
  }

  /* Section headers centre; that is the moment. Card copy does not. */
  .definitive-site .def-section-head,
  .definitive-site .def-work-head,
  .definitive-site .def-learn-intro,
  .definitive-site .def-about-copy,
  .definitive-site .def-close-copy,
  .definitive-interior .lrn-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .definitive-site .def-section-head > *,
  .definitive-site .def-work-head > *,
  .definitive-site .def-learn-intro > *,
  .definitive-site .def-about-copy > *,
  .definitive-site .def-close-copy > * {
    max-width: 22rem;
  }

  /* ---- The card -------------------------------------------------------
     The unit the whole phone layout is built from: media on top, copy
     under it, action last. Every stacked list on the site resolves to
     this shape so the page has one rhythm instead of six. */
  .definitive-site .campaign-card,
  .definitive-site .def-service-grid article,
  .definitive-site .def-learn-card,
  .definitive-interior .campaign-card,
  .definitive-interior .lrn-proof,
  .definitive-interior .lrn-tier {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(244, 241, 235, 0.1);
    border-radius: var(--m-radius);
    background: rgba(13, 15, 20, 0.66);
  }

  /* Media leads the card, at a shape that reads on a narrow screen. */
  .definitive-site .campaign-card > img,
  .definitive-site .campaign-card .campaign-media,
  .definitive-site .def-service-grid .def-service-media,
  .definitive-interior .campaign-card > img,
  .definitive-interior .campaign-card .campaign-media {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .definitive-site .campaign-card > div,
  .definitive-site .def-service-grid article > div,
  .definitive-interior .campaign-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem 1.15rem 1.25rem;
    text-align: left;
  }

  /* ---- Stacks -----------------------------------------------------------
     Any multi-column grid becomes one column with the card gap. Stated
     once, so a new grid inherits the phone layout for free. */
  .definitive-site .def-service-grid,
  .definitive-site .def-work-grid,
  .definitive-site .campaign-grid,
  .definitive-site .def-learn-grid,
  .definitive-interior .campaign-grid,
  .definitive-interior .lrn-list,
  .definitive-interior .lrn-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m-card-gap);
  }

  /* ---- Actions ----------------------------------------------------------
     Thumb-sized, full-width, and never two tiny links side by side. */
  .definitive-site .def-arrow-link,
  .definitive-site .def-service-cta,
  .definitive-interior .lrn-btn,
  .definitive-interior .lrn-actions > a {
    min-height: 3rem;
    align-items: center;
    font-size: 0.72rem;
  }

  .definitive-interior .lrn-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .definitive-interior .lrn-actions > a {
    display: flex;
    justify-content: center;
  }

  /* ---- Hero -------------------------------------------------------------
     Full screen, portrait media, copy in the lower third where a thumb
     already is, one action. */
  .definitive-site #top {
    min-height: 100svh;
  }

  .definitive-site .def-hero-copy {
    padding: 0 var(--m-gutter) calc(var(--m-gutter) * 2);
    text-align: center;
  }

  /* ---- Watch the work ---------------------------------------------------
     Full-bleed single film with its controls beneath it, clear of the
     poster, so the thumb never covers the thing it is choosing. */
  .definitive-site .def-film-stage {
    /* The stage fits the card. 4/5 of the screen was the old composition's
       box; with the 16:9 card centred inside it, the difference was ~158px of
       invisible air ABOVE the film - which is exactly the gap Giovani flagged
       between the logos and the rail. Card width is min(78vw, 27rem), so this
       is its 16:9 height plus 1rem of breathing room each side. */
    height: calc(min(78vw, 27rem) * 9 / 16 + 2rem);
    aspect-ratio: auto;
    margin-top: 0;
  }

  .definitive-site .def-film-controls {
    margin-top: var(--m-block-gap);
    gap: 1.5rem;
  }
  /* lab/loom-round (Giovani 8/28): the desktop wing arrows float mid-card
     on a phone - on touch the arrows come home to flank the caption. */
  body.definitive-site.is-lead .def-film-controls,
  body.definitive-site.is-lead .def-film-roll .def-film-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
  }
  body.definitive-site.is-lead .def-film-controls [data-film-prev],
  body.definitive-site.is-lead .def-film-controls [data-film-next],
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-prev],
  body.definitive-site.is-lead .def-film-roll .def-film-controls [data-film-next] {
    position: static;
    transform: none;
    left: auto;
    right: auto;
  }

  /* ---- Closing wall + footer -------------------------------------------
     One continuous field; the wall already rebuilt as a vertical scatter in
     round 16, so this only holds its gutter and its air. */
  .definitive-site .def-close-copy {
    padding: 0 var(--m-gutter);
  }

  .definitive-site .def-footer {
    padding-right: var(--m-gutter);
    padding-left: var(--m-gutter);
  }

  /* ---- Interior folds ---------------------------------------------------
     Same fold everywhere: kicker, headline, one line of subcopy, one
     action, centred, with the media behind it rather than beside it. */
  .definitive-interior .lrn-hero {
    min-height: 92svh;
    padding-right: var(--m-gutter);
    padding-left: var(--m-gutter);
  }

  .definitive-interior .lrn-hero .lrn-lede,
  .definitive-interior .lrn-hero h1 {
    max-width: 20rem;
  }

  .definitive-interior .lrn-split,
  .definitive-interior .lrn-plate-inner {
    display: flex;
    flex-direction: column;
    gap: var(--m-block-gap);
  }
}