/* ===== Mobile overrides ============================================================
   Cargo-style mechanism. Loaded LAST, so source-order makes these rules win over base
   without needing !important. The body.mobile class is toggled by assets/js/mobile-class.js
   when the window is portrait-shaped (or a short landscape phone), same rule as live.

   Two-pronged scaling:
   1. html.mobile { font-size: --base-size × 0.61 } — --base-size is set per window size by
      mobile-class.js (≈5.74px at 420×900, matching live).
   2. .mobile X rules carry live's exact phone sizes as --font-size; like live, the rendered size is
      --font-size × --font-scale, where --font-scale is set by autofit.js (1 everywhere else).
*/

html.mobile { font-size: calc(var(--base-size) * var(--mobile-scale)); }

/* Stack columns on mobile, unless the set opts out like live's mobile-stack="false" */
.mobile .column-set:not([data-mobile-stack="false"]) { grid-template-columns: 1fr; }
.mobile .column-set:not([data-mobile-stack="false"]) > .column-unit { grid-column: 1 / -1; }

/* Live's exact phone sizes */
.mobile bodycopy,
.mobile .bodycopy { --font-size: 4.35rem; }
.mobile h1 { --font-size: 14rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .jhb { --font-size: 2.65rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .kjhg { --font-size: 1.85rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .tweed { --font-size: 3.4rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .tidbit { --font-size: 6rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .what-sweet-relief { --font-size: 6.8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .logo-mobile { --font-size: 8.6rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .pianist { --font-size: 3.05rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .email-address { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .kinks { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }

/* === Autofittable: --font-size feeds the calc() rule (only takes effect on [data-autofit])
   For non-autofit usages of these classes, they inherit normally from bodycopy. === */
.mobile .ps { --font-size: 4.35rem; }
.mobile .propriety-society { --font-size: 4.35rem; }
.mobile .about-me { --font-size: 4rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .essay-quote { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .go-mad-i-the-moment { --font-size: 2.25rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .if-its-legal { --font-size: 2.05rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .if-its-lrgal { --font-size: 3.05rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .book-me { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .red-button { --font-size: 6rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .yellow-button { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); color: #000; }
.mobile .button-1 { --font-size: 2.25rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-3 { --font-size: 2.25rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-11 { --font-size: 2.25rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-13 { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-1-1 { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-1-2 { --font-size: 5.6rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-11-1 { --font-size: 8rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-11-2 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-11-3 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-12-1 { --font-size: 14rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-4-1 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-4-2 { --font-size: 8.6rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-4-3 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-6-1 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-7 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .button-8 { --font-size: 4.35rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }
.mobile .giant-icon { --font-size: 20rem; font-size: calc(var(--font-scale, 1) * var(--font-size)); }

/* Pinned nav: live swaps in a separate phone nav (logo-mobile) with a 1-column spacer,
   a 6-column rabbit cell, and taller icon lines */
.mobile [id="Z1443344489"] .nav-cell > span { line-height: 1.65; }
.mobile [id="Z1443344489"] .nav-spacer { grid-column: span 1; }
.mobile [id="Z1443344489"] .nav-rabbit { grid-column: span 6; padding-left: 3.85em; } /* live pushes it right with a run of  s */

/* Autofit base sizes at mobile */
.mobile .rumi { --font-size: 4.5rem; }
.mobile .about-me-heading { --font-size: 10rem; }