/* aboutme.css: "Om mig" (Nora, 11 Nov). Same look as the start screen: yellow, "Hej!" top left where the
   start text begins (Figma: x 48, ink top 137.5 of a 1440 × 900 frame), and the photo in the same place
   (right 152, bottom 81 of the first screen, 257 × 422). u = the same scale as the start screen. */
.aboutme-page { background: var(--yellow); }
.me-hero { --u: calc(min(100vw, 160vh) / 1440); position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--yellow); color: var(--black); box-sizing: border-box;
  padding: calc(var(--u) * 122) 0 calc(var(--u) * 96) calc(var(--u) * 48); }
.me-text { max-width: calc(var(--u) * 900); }
.me-hi { margin: 0 0 calc(var(--u) * 14); font: 600 calc(var(--u) * 48)/1.3 var(--font-heading); }
.me-text p { margin: 0 0 calc(var(--u) * 16); font: 400 calc(var(--u) * 21)/1.5 var(--font-body); }
.me-text .me-lead { font-weight: 600; font-size: calc(var(--u) * 24); line-height: 1.45; }
.me-contact-title { margin: calc(var(--u) * 36) 0 calc(var(--u) * 12); font: 700 calc(var(--u) * 21)/1.3 var(--font-heading); }
.me-contact { list-style: none; margin: 0; padding: 0; font: 400 calc(var(--u) * 21)/1.6 var(--font-body); }
.me-contact li { display: flex; gap: calc(var(--u) * 16); }
.me-contact li span { min-width: calc(var(--u) * 110); font-weight: 600; }
.me-contact a { color: var(--black); }
.me-photo { position: absolute; margin: 0; right: calc(var(--u) * 152); top: calc(var(--u) * 397);   /* 900 − 81 − 422 */
  width: calc(var(--u) * 257); height: calc(var(--u) * 422); }
.me-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
  .me-hero { padding: calc(64px + 28px) 20px 48px; }
  .me-text { max-width: none; }
  .me-hi { font-size: 22px; margin-bottom: 10px; }
  .me-text p { font-size: 16px; margin-bottom: 12px; }
  .me-text .me-lead { font-size: 17px; }
  .me-contact-title { font-size: 17px; margin-top: 28px; }
  .me-contact { font-size: 16px; }
  .me-contact li span { min-width: 80px; }
  /* photo after the text, right-aligned, like the start screen on mobile */
  .me-photo { position: static; width: 62.9%; max-width: 220px; height: auto; margin: 32px 0 0 auto; }
  .me-photo img { height: auto; aspect-ratio: 900 / 1479; }
}