/* =====================================================================
   PHONE LAYOUT -- loaded by index.html with
   media="not all and (min-width: 700px)", the same query index.html
   uses for photos-mobile.css, copied character for character. That
   string is the exact complement of photos-style.css's (min-width:
   700px) desktop rule, so the intro page and the photos section can
   never disagree about which side of the line a viewport is on.

   Kept small on purpose. introduction-style.css already handles layout
   at every width continuously -- .page's min() width and clamp()
   padding shrink smoothly from 816px down, and text wraps onto more
   rows instead of shrinking. Those stay the source of truth; anything
   added here is additive to them, never a replacement.

   Two things that do NOT belong here:
   - safe-area insets: a phone in landscape is wider than 700px (an
     iPhone 15 is 852px), so it never loads this file. The insets live
     in introduction-style.css instead.
   - input handling: CSS decides layout, pointer type decides input
     (see script.js) -- same split as the photos section.

   Rules here only ever win by loading later at equal-or-higher
   specificity -- no !important. Element rules are scoped and sizes are
   px for the same reasons as in introduction-style.css (see its
   "SHARING THE PAGE" note).
   ===================================================================== */

/* paragraphs up from the desktop's 14px to 15px on a phone -- the
   size of the photos section's Pinned Collections card labels
   (.pinned-card-label in photos-mobile.css), so text reads the same
   size across both sections on a phone */
:where(.intro-screen) p {
    font-size: 15px;
}

/* the letterhead lines scale up with the paragraphs, keeping the
   desktop's 24px : 14px heading-to-body ratio: 24 x 15/14 = 25.7px,
   rounded to a whole 26px (see the whole-pixel note on h1/h2 in
   introduction-style.css). h2's 6px pull-up scales to 6.4px, which
   rounds back to the desktop's own 6px, so it needs no override. */
:where(.intro-screen) h1,
:where(.intro-screen) h2 {
    font-size: 26px;
}