/* ==========================================================================
   Responsive headings

   Framer exports its type as a fixed pixel size per breakpoint, and it only
   does that for text that was given a *style preset* in the editor. The four
   project pages got one (framer-styles-preset-3bmclk), so their <h1> already
   steps 132 -> 96 -> 64px as the viewport narrows. The front page's name
   heading did not: it carries a literal `--framer-font-size:132px` in its
   style attribute with no breakpoint variants, so on a phone it rendered at
   132px inside a 358px column and "Marcus Mosveen" was cut off at the right
   edge (the hero clips rather than scrolls, so it read as missing letters
   rather than as an overflow).

   The fix mirrors Framer's own scale at Framer's own breakpoints — 132 /
   96 / 64 — but the phone step is fluid instead of fixed, because 64px is
   only safe down to about 360px wide and phones go narrower. `!important`
   is required on the front page: the 132px lives in an inline style
   attribute, which an ordinary author rule cannot outrank.

   Line height is left alone; every one of these headings is set in `em`
   (1em / 1.1em), so it follows the font size down on its own.
   ========================================================================== */

/* ---------- Front page: "Marcus Mosveen" ---------- */

/* Tablet — the size Framer gives the project pages' h1 at this breakpoint. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-q3zwha h1.framer-text {
    --framer-font-size: 96px !important;
  }
}

/* Phone. 15vw keeps the longer of the two words ("Mosveen", the widest thing
   the hero has to fit) inside the 16px gutters at every width from 320px up,
   and the clamp stops it growing past the 64px Framer uses here once the
   viewport is wide enough that it would fit anyway. */
@media (max-width: 809.98px) {
  .framer-q3zwha h1.framer-text {
    --framer-font-size: clamp(38px, 15vw, 64px) !important;
  }
}

/* ---------- Project pages: "Telenor", "UXCUP - Bekk", ... ---------- */

/* These already drop to 64px below 810px via their preset. That fits a
   one-word title but not "UXCUP - Bekk" or "Mosveen Design", which wrap and
   — in the UXCUP case — leave the hyphen hanging alone at the end of the
   first line. The same fluid rule used above sizes them to the viewport so
   the wrap happens between words instead. `!important` again: the preset's
   own selector carries three classes (.framer-euoJP
   .framer-styles-preset-3bmclk:not(.rich-text-wrapper)) and outranks this
   one on specificity no matter which file loads last. */
@media (max-width: 809.98px) {
  .framer-jwvwtv h1.framer-text {
    --framer-font-size: clamp(38px, 13.5vw, 64px) !important;
  }
}

/* ---------- Wrapping ----------

   A heading that has to wrap should split into even lines instead of
   dropping one word onto a line of its own. `balance` is scoped to the two
   page titles and to the "Om meg" heading (whose natural break fell between
   "Marcus" and "Mosveen Ingebretsen", splitting a name across lines) rather
   than applied to headings generally — several headings on the front page,
   the experience entries among them, sit in shrink-to-fit boxes, and
   balancing one of those makes the browser narrow the box and wrap text
   that had been fitting on a single line. "Sommerjobb, avd. Farvann" broke
   in two that way. The three below all sit in full-width boxes, where
   balance only chooses between wraps that were going to happen anyway. */
.framer-q3zwha h1.framer-text,
.framer-jwvwtv h1.framer-text,
.framer-g36kaq h4.framer-text {
  text-wrap: balance;
}