/* ============================================================
   SECTION TITLES ON AN UPRIGHT PHONE OR TABLET - one rule, every page
   ------------------------------------------------------------
   index.html, work.html, faq.html, contact.html. Linked LAST on
   each, after css/home-mobile.css on the index and after
   css/page-type.css on the inner pages, so it wins over their
   one-row phone rules at equal specificity. One file, so the index
   and the inner pages cannot drift apart again.

   The one-row phone title (css/home-mobile.css, css/pages.css,
   css/work-table.css) spreads three words edge to edge, and with a
   long word in the middle - PROJECT, YOU'LL - they ran into each
   other. So on an upright screen every title is set the way the
   index hero sets its last line: the first two words together on
   the left, the third stepped down onto its own line hard right, as
   IMPACT / BY DESIGN.

     THE STUDIO     OUR FULL       OUR FEATURED   WHAT CLIENTS
         ITSELF   CAPABILITIES           WORK           SAY?

     OUR INSPIRATION   THE PROJECT   WHO YOU'LL   ASK US     ONE BY
                FILE         BRIEF      TALK TO  ANYTHING       ONE

   AND AT THE HERO'S NUMBERS, not near them. The size is the hero's
   own phone formula (css/home-mobile.css, the .ap --f), the leading
   is its 0.8, and the step between the lines is its row pitch: the
   1.25rem grid gap plus the 0.12em the hero's words carry as top
   padding - 56px at 390px wide, the same as IMPACT to BY DESIGN.
   The tracking is the inner pages' -0.045em (css/page-type.css).

   Measured at 390px: the longest first line, OUR INSPIRATION, ends
   26px inside the right gutter.

   Landscape keeps the single row. The 404 is not linked: it breaks
   after its FIRST word and has its own grid in css/page-type.css.
   ============================================================ */

@media (max-width: 1000px) and (orientation: portrait) {
  .page .sw-section-title.sw-featured-title {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.25em;
    row-gap: calc(1.25rem + 0.12em);
    font-size: min(calc((100vw - 2.5rem) / 8.95), 12svh);
    line-height: 0.8;
    letter-spacing: -0.045em;
  }

  .page .sw-section-title.sw-featured-title .sw-ft-word--c {
    flex-basis: 100%;
    text-align: right;
  }

  /* .sw-ft-break-first: the break comes after the FIRST word
     instead - it holds the top line alone at the left, and the
     other two step down together hard right:

       WHAT              OUR
       CLIENTS SAY?      INSPIRATION FILE

     The first word takes the whole top line; margin-left: auto on
     the middle word pushes the pair to the right edge of the second. */
  .page .sw-section-title.sw-featured-title.sw-ft-break-first .sw-ft-word--a {
    flex-basis: 100%;
  }

  .page .sw-section-title.sw-featured-title.sw-ft-break-first .sw-ft-word--b {
    margin-left: auto;
  }

  .page .sw-section-title.sw-featured-title.sw-ft-break-first .sw-ft-word--c {
    flex-basis: auto;
  }
}