/* ==========================================================================
   About section layout — the portrait beside the Om meg / Erfaring /
   Utdanning bento on the front page.

   Two things Framer's export gets wrong once the cards hold real content:

   1. The portrait is 1016px tall on desktop, which at 40% of the column
      makes it a 1:1.8 crop — taller than anything else on the page and the
      first thing the eye lands on.

   2. Erfaring is `height: 100%` of a grid row sized by the two cards
      beside it, and its six roles measured exactly 960px — 902 now that
      the "Erfaring" label above them has come off with the rest of the
      site's section labels, taking its own 34px and the column's 24px gap
      with it. In a 1024px box with 32px padding that left nothing over:
      the content filled the padding box to the pixel. Om meg and Utdanning are the same 32px
      cards but hold far less, so they carry 87–131px of slack above and
      below their content. Side by side, Erfaring reads as cramped even
      though all three are padded identically.

      The fix is height, not padding alone: the card sizes to its content
      and takes the 56px the phone breakpoint already reaches for (40px)
      and then some. Erfaring then runs past the bottom of the two cards
      beside it, which is deliberate — matching their bottom edge is what
      forced it flat in the first place.

   Only the ≥810px grid is touched. Below that the export already stacks
   the three cards at `height: min-content` with 40px of vertical padding,
   which is the same idea arrived at by a different route.
   ========================================================================== */

@media (min-width: 810px) {
  /* All three cards size to their own content and carry the same padding.
     Nothing stretches to meet anything else — the two on the left simply
     end where their content ends, and Erfaring, which holds six roles,
     runs longer.

     That needed the grid changed, not just the padding. Framer had
     Erfaring spanning both rows of a two-row grid, and a spanning item
     grows the rows it spans: Erfaring's height set the height of the rows
     Om meg and Utdanning sat in, so those two either stretched to fill
     space they had no content for, or stopped short and left a gap
     between them wider than every other seam in the section. Either way
     their inside air was decided by Erfaring rather than by their own
     padding. Om meg and Utdanning now share a column of their own
     (.about-stack), Erfaring is an ordinary grid item beside it, and the
     three no longer size each other. */
  .about-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: stretch;
    min-width: 0;
  }

  .framer-iuqqS .framer-1kup0mc,
  .framer-iuqqS .framer-1ri2xiu,
  .framer-iuqqS .framer-z4cpj0 {
    height: auto;
    padding: 56px 32px;
  }

  /* Both columns stretch to the grid row, so whichever side holds more
     decides the height and the other one grows to meet it. Seven entries
     under Erfaring against Om meg plus Utdanning's four puts that on the
     right, and the rule below hands the left column's slack to Om meg. If
     the balance ever tips the other way — Om meg's paragraphs wrap enough
     at some width to outrun Erfaring — the slack moves to the bottom of
     the Erfaring card instead and the last two rows stop lining up. That
     is a lost alignment, not a broken layout.

     Framer gives the card `place-content: center`, which in a stretched
     flex column splits the leftover height between the top and the bottom.
     That is what knocked the cards' first lines out of line with each
     other: Om meg sits on its own content, so it starts at the card's 56px
     of top padding, while Erfaring's first year row started 56px *plus*
     half the slack down — 24px lower at 1440, 63px at 1200, and moving
     with the viewport. It showed on the section labels that used to sit
     above each card; with those gone it shows on 2026 against "Hei, jeg er
     Marcus Mosveen Ingebretsen", which is a longer line to be off by a
     shifting amount.

     flex-start puts that row back on the padding edge, where Om meg's
     heading already is, and sends the whole leftover to the bottom
     instead. The columns still end level, because the card is still
     stretched. */
  .framer-iuqqS .framer-1ri2xiu {
    grid-row: auto;
    align-self: stretch;
    justify-content: flex-start;
  }

  .framer-iuqqS .framer-1kup0mc,
  .framer-iuqqS .framer-z4cpj0 {
    align-self: stretch;
  }

  /* Where the column's leftover height goes, and why it is Om meg's.

     Erfaring runs longer than Om meg and Utdanning stacked, so the left
     column has slack to place. Whichever box absorbs it ends up taller
     than its content; the question is only which one can do that without
     changing how it reads.

     Om meg can: it is a heading and two paragraphs, so extra height is
     just a roomier card. Utdanning cannot. Its entries are spaced by 40px
     hairlines, the same 40px Erfaring uses, and any slack given to that
     card has to widen those gaps — which would leave the two lists side
     by side at visibly different rhythms, four entries spread wide next
     to seven at their natural spacing.

     Putting the slack in Om meg keeps both lists on Framer's 40px and
     still lands Utdanning's bottom on Erfaring's, because the column
     stretches either way: Om meg + 16px + Utdanning fills the row no
     matter which of the two grew. Videregående stays level with
     Programmeringslærer, at matching spacing this time.

     flex-start because the card is `place-content: center` — centred, the
     new height would split above and below the content and carry Om meg's
     heading down off the line it shares with Erfaring's first year. The
     air belongs below the heading and the paragraph, and there is about
     58px more of it now than before the labels came off: the left column
     lost two of them and the right only one, and the difference lands
     wherever the slack does. Where it lands inside the card is the rule
     under this one. */
  .framer-iuqqS .framer-1kup0mc {
    flex-grow: 1;
    justify-content: flex-start;
  }

  /* The LinkedIn line sits in the middle of the card's leftover height
     rather than at the top of it.

     All of that slack used to fall under the line, which left it tucked
     against the paragraph above with an empty third of a card beneath —
     it read as the end of the text rather than as its own line. Splitting
     the slack puts as much air over it as under it, and the card's height
     does not change: the same leftover is being placed differently, not
     added to.

     Two auto margins on one flex item is what does it — free space goes to
     the autos, and two of them share it equally. For that to be the card's
     own leftover, the boxes between have to pass the height down: the
     card's "max width" wrapper and the text column inside it are both
     `flex: none` in the export, so they size to their content and the
     slack never reaches the line. flex-grow on each hands it through.

     The column's 20px row-gap has to go with it, or the gap would land
     above the line on top of its auto margin and the two sides would
     differ by exactly that 20px. It is reinstated as a margin between the
     children instead, which the last child then overrides — so the heading
     and the paragraph keep the spacing Framer gave them, and only the
     LinkedIn line is placed by the leftover.

     Scoped to Om meg. Utdanning and Erfaring size to their own content and
     have no leftover to place, and below 810px neither does this card. */
  .framer-iuqqS .framer-1tt03rz,
  .framer-iuqqS .framer-1dd8c65 {
    flex: 1 0 auto;
  }

  .framer-iuqqS .framer-1dd8c65 {
    row-gap: 0;
  }

  .framer-iuqqS .framer-1dd8c65 > * + * {
    margin-top: 20px;
  }

  .framer-iuqqS .framer-1dd8c65 > :last-child {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Below 810px the export stacks all three in one flex column, and the
   wrapper would put Utdanning above Erfaring — the reverse of how the
   page has always read on a phone. display:contents dissolves it so the
   three cards are siblings again, and the order properties restore
   experience before education. The export's own 40px of vertical padding
   applies down here; a phone wants less than 56. */
@media (max-width: 809.98px) {
  .about-stack {
    display: contents;
  }

  .framer-iuqqS .framer-1kup0mc {
    order: 1;
  }

  .framer-iuqqS .framer-1ri2xiu {
    order: 2;
  }

  .framer-iuqqS .framer-z4cpj0 {
    order: 3;
  }
}

/* The portrait's height is only set on the widest breakpoint — the tablet
   rule already lets the image find its own height, and phones pin it to
   320px.

   The source is square (2048x2048), so a square frame is the furthest the
   picture can be zoomed out: object-fit: cover has nothing left to crop
   when the box and the image agree on their proportions, and the whole
   photograph shows. aspect-ratio rather than a pixel height, because the
   column is 40% of a container that changes width — a fixed number would
   only be square at one viewport.

   The frame inside carries its own 1016px, which is why it needs the
   second rule: shortening the column alone left it hanging past the
   bottom, where the column's overflow clipped it — taking the rounded
   bottom corners and the 1px border with it and leaving the picture cut
   off square. */
@media (min-width: 1200px) {
  /* The portrait hangs while the cards scroll past it — the move the
     Oppsummering block at the top of the case studies makes, where the
     media panel is pinned and the text column travels beside it.

     Three things it rests on, none of them incidental:

     - .framer-evazc4 sets align-items:flex-start, so this column is not
       stretched to the section's height. A stretched item fills its area
       and has nothing left to travel in, and sticky quietly does nothing.
     - Every ancestor up to <body> computes overflow:visible. One
       overflow:hidden anywhere on that chain would clip the sticky item
       and, again, silently disable it. Checked, not assumed.
     - The section is 1234px against the portrait's 557px, so there are
       ~677px of travel; sticky is confined to its own containing block,
       so the picture lets go exactly where the section ends.

     The square moves off the column and onto the frame. It is still 100%
     of the column's width, so the picture lands on the same square, but
     the column now sizes to it rather than dictating it — which is what
     lets max-width work below. */
  .framer-iuqqS .framer-ab0y39 {
    height: auto;
    position: sticky;
    top: 48px;
    align-self: flex-start;
  }

  /* A sticky element taller than the window gets its bottom pinned out of
     sight for as long as it is stuck. The portrait is ~557px, so it needs
     a 605px viewport to clear 48px from the top — fine on a laptop, not on
     a short window. Capping the frame's width caps its height with it,
     since it is square, so on a short window the picture gets smaller
     rather than cropped or clipped. The case studies solve the same
     problem in pitch-sticky.js by measuring the element, which is needed
     for text of unknown height; a square sized by its own width does not
     need the measurement. */
  .framer-iuqqS .framer-1bl3jjc {
    height: auto;
    aspect-ratio: 1;
    max-width: calc(100vh - 96px);
  }
}

/* ==========================================================================
   Erfaring's rows, measured against Utdanning's.

   The two cards sit in equal grid columns and hold the same component —
   year, hairline, year, then role over employer — but Framer exported the
   two lists at different widths. Utdanning's row containers are
   `width: 100%` inside a `width: 100%` list, so each row takes the card's
   full inner width up to its own 316px cap and lands on 316. Erfaring's
   are a hard `width: 202px` inside a `width: min-content` list, so the
   whole list shrink-wraps to 202.

   Both lists centre their rows, so the 114px difference falls as 57px on
   each side: every year, every hairline and every role in Erfaring sits
   57px inboard of its counterpart in Utdanning. Four columns of text that
   should read as one table, offset by an amount that looks like a mistake
   rather than a margin.

   Giving Erfaring the same two values Utdanning already has lets its rows
   grow to the same 316px cap, and the four columns line up across the two
   cards. Nothing is stretched past what Framer already allowed — 316px is
   the cap it wrote for both lists; only Erfaring was kept from reaching it.

   Scoped through .framer-dvcxvs, the Erfaring list, so the row component
   keeps its exported width everywhere else it is used.
   ========================================================================== */

.framer-iuqqS .framer-dvcxvs {
  width: 100%;
}

.framer-iuqqS .framer-dvcxvs .framer-ihbhcl-container,
.framer-iuqqS .framer-dvcxvs .framer-9kusrr-container,
.framer-iuqqS .framer-dvcxvs .framer-k793ul-container,
.framer-iuqqS .framer-dvcxvs .framer-14jym6z-container,
.framer-iuqqS .framer-dvcxvs .framer-xn1b8v-container {
  width: 100%;
}