:root {
  --bg: #fffaf3;
  --text: #000000;
  --ink: #212126;
  --accent-teal: #5cc7db;
  --font-script: 'Caveat', cursive;
  --font-serif: 'EB Garamond', serif;
  --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
}

img { max-width: none; }

main { display: block; }

.stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 768;
  overflow: visible;
}

/* ---------- 1. Hero ---------- */
.hero-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(15.97vw, 230px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--accent-teal);
}

.hero-name {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: min(5vw, 72px);
  text-align: center;
  white-space: nowrap;
}

.linkedin-badge {
  position: absolute;
  left: min(92.08vw, 1326px);
  top: min(47.99vw, 691px);
  width: min(1.94vw, 28px);
  height: min(1.67vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: min(0.9vw, 13px);
  text-decoration: none;
  border-radius: 3px;
}

/* ---------- 2. Profil ---------- */
.profil-text {
  position: absolute;
  left: min(7.92vw, 114px);
  top: min(2.5vw, 36px);
  width: min(32.08vw, 462px);
}

.profil-text h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(2.5vw, 36px);
  margin: 0 0 min(1.4vw, 20px);
}

.profil-text p {
  font-family: var(--font-serif);
  font-size: min(1.8vw, 26px);
  line-height: 1.3;
  text-align: justify;
  margin: 0 0 min(1vw, 14px);
}

.profil-text ul {
  margin: 0 0 min(1vw, 14px);
  padding-left: 1.2em;
  font-size: min(1.8vw, 26px);
  line-height: 1.05;
}

.profil-text li { margin-bottom: 0; }

.profil-text .programs { margin-top: min(1.4vw, 20px); text-align: left; }

.profil-photo {
  position: absolute;
  right: min(15.7vw, 226px);
  bottom: min(11vw, 158px);
  width: min(26.4vw, 380px);
}

.profil-glow {
  position: absolute;
  inset: -20% -35%;
  background:
    radial-gradient(circle at 65% 30%, rgba(226, 219, 84, 0.7), transparent 55%),
    radial-gradient(circle at 30% 65%, rgba(140, 214, 120, 0.65), transparent 55%);
  filter: blur(40px);
}

.profil-portrait-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 3. Magasinets omslag ---------- */
.magasin-cover-stage { overflow: visible; }

.magasin-cover-heading {
  position: absolute;
  left: 50%;
  top: min(2vw, 29px);
  transform: translateX(-50%) rotate(-5deg);
  margin: 0;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: min(3.6vw, 52px);
  text-align: center;
  white-space: nowrap;
}

.magasin-cover-img {
  position: absolute;
  left: min(33.68vw, 485px);
  top: min(10.76vw, 155px);
  width: min(32.64vw, 470px);
  height: min(39.44vw, 568px);
  object-fit: contain;
  transform: rotate(-6deg);
}

/* ---------- 4. Magasinets innehåll ---------- */
.magasin-content-stage { overflow: visible; }

.magasin-left {
  position: absolute;
  left: min(12.71vw, 183px);
  top: min(2vw, 29px);
  width: min(26.81vw, 386px);
}

.magasin-left-heading {
  display: flex;
  align-items: center;
  gap: min(0.8vw, 12px);
  margin-bottom: min(1vw, 14px);
}

.magasin-left-heading h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(3.05vw, 44px);
  margin: 0;
}

.kau-logo { width: min(6.39vw, 92px); height: min(6.39vw, 92px); object-fit: contain; }

.magasin-left p {
  font-family: var(--font-serif);
  font-size: min(1.5vw, 21px);
  line-height: 1.3;
  text-align: justify;
  margin: 0 0 min(1.2vw, 17px);
}

.bingo-wrap {
  position: relative;
}

.bingo-img {
  display: block;
  width: 100%;
  height: auto;
}

.magasin-left .vertical-credit {
  position: absolute;
  right: min(-1.6vw, -23px);
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-serif);
  font-size: min(0.85vw, 12px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  white-space: nowrap;
}

.magasin-right {
  position: absolute;
  left: min(53.89vw, 776px);
  top: min(2vw, 29px);
  width: min(32.5vw, 468px);
}

.magasin-right-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(1vw, 14px);
  margin-bottom: min(1.4vw, 20px);
}

.hemforstunden-img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.hemforstunden-img.tilt-left { transform: rotate(-3deg); }
.hemforstunden-img.tilt-right { transform: rotate(2deg); }

.stakvar-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: min(5.5vw, 80px);
  margin-bottom: min(1.2vw, 17px);
}

.photo-credit {
  font-family: var(--font-serif);
  font-size: min(1vw, 14px);
  margin: 0;
}

/* ---------- 5. Karlstads studenttidning ---------- */
.studenttidning-stage { overflow: visible; }

.studenttidning-text {
  position: absolute;
  left: 50%;
  top: min(2vw, 29px);
  transform: translateX(-50%);
  width: min(30vw, 432px);
  text-align: center;
}

.studenttidning-text h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(1.53vw, 22px);
  margin: 0 0 min(1vw, 14px);
  white-space: nowrap;
}

.studenttidning-text p {
  font-family: var(--font-serif);
  font-size: min(1.25vw, 18px);
  line-height: 1.35;
  text-align: left;
  margin: 0 auto min(0.8vw, 11px);
  width: min(17.5vw, 252px);
}

.studenttidning-cover {
  position: absolute;
  left: min(39.86vw, 574px);
  top: min(24.03vw, 346px);
  width: min(20.28vw, 292px);
  height: min(28.33vw, 408px);
  object-fit: contain;
}

/* ---------- 6. Instagram-karusell ---------- */
.carousel-stage { overflow: visible; }

.carousel-imgs { position: absolute; inset: 0; }

.carousel-imgs img {
  position: absolute;
  top: min(10.97vw, 158px);
  width: min(25.14vw, 362px);
  height: min(31.39vw, 452px);
  object-fit: cover;
}
.carousel-imgs img:nth-child(1) { left: min(12.29vw, 177px); }
.carousel-imgs img:nth-child(2) { left: min(37.43vw, 539px); }
.carousel-imgs img:nth-child(3) { left: min(62.57vw, 901px); }

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: min(43vw, 620px);
  text-align: center;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: min(1.05vw, 15px);
  margin: 0;
}

/* ---------- 7. NWT Bredband ---------- */
.nwt-stage { overflow: visible; }

.nwt-heading {
  position: absolute;
  left: min(7.92vw, 114px);
  top: min(5.21vw, 75px);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(2.85vw, 41px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: min(0.9vw, 13px);
}

.nwt-heading em { font-style: italic; font-weight: 800; }

.nwt-arrow { width: min(4.9vw, 71px); height: min(4.17vw, 60px); }

.nwt-body {
  position: absolute;
  left: min(7.92vw, 114px);
  top: min(10.76vw, 155px);
  width: min(68.13vw, 981px);
  margin: 0;
  font-family: var(--font-serif);
  font-size: min(1.3vw, 19px);
  line-height: 1.4;
}

.nwt-poster {
  position: absolute;
  object-fit: cover;
  border-radius: 14px;
}
.nwt-poster-left {
  left: min(15.21vw, 219px);
  top: min(19.24vw, 277px);
  width: min(19.31vw, 278px);
  height: min(27.29vw, 393px);
}
.nwt-poster-mid {
  left: min(39.44vw, 568px);
  top: min(17.99vw, 259px);
  width: min(21.04vw, 303px);
  height: min(29.72vw, 428px);
}
.nwt-poster-right {
  left: min(65.49vw, 943px);
  top: min(19.24vw, 277px);
  width: min(19.31vw, 278px);
  height: min(27.29vw, 393px);
}

/* ---------- 8. TikTok / DRM-LND / Sellpy / Arken Zoo ---------- */
.collab-stage { overflow: visible; }

.collab-heading {
  position: absolute;
  left: min(10.9vw, 157px);
  top: min(7vw, 100px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: min(1vw, 14px);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(2.2vw, 32px);
  white-space: nowrap;
}

.drmlnd-logo { width: min(18.06vw, 260px); height: auto; }

.phone-frame {
  position: absolute;
  left: min(10.9vw, 157px);
  top: min(15.14vw, 218px);
  width: min(13.2vw, 190px);
  aspect-ratio: 190 / 388;
  background: #0b0b0b;
  border-radius: min(1.6vw, 23px);
  padding: min(0.55vw, 8px);
  cursor: pointer;
}

.phone-notch {
  position: absolute;
  left: 50%;
  top: min(0.55vw, 8px);
  transform: translateX(-50%);
  width: 34%;
  height: min(0.45vw, 6px);
  border-radius: 4px;
  background: #000;
  z-index: 2;
}

.phone-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: min(0.9vw, 13px);
  display: block;
  background: #111;
}

.phone-play-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(2.6vw, 38px);
  height: min(2.6vw, 38px);
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: #111;
  font-size: min(1vw, 14px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.phone-frame:hover .phone-play-toggle,
.phone-frame:focus-within .phone-play-toggle,
.phone-frame.is-paused .phone-play-toggle {
  opacity: 1;
}

.collab-text-col {
  position: absolute;
  left: min(28.68vw, 413px);
  top: min(15.14vw, 218px);
  width: min(19vw, 274px);
}

.collab-text-col p {
  font-family: var(--font-serif);
  font-size: min(1.5vw, 21px);
  line-height: 1.32;
  text-align: justify;
  margin: 0 0 min(1vw, 14px);
}

.mobilskal-img {
  position: absolute;
  left: min(56.04vw, 807px);
  top: min(5.21vw, 75px);
  width: min(13.68vw, 197px);
  height: min(26.74vw, 385px);
  object-fit: contain;
}

.butiksbild-img {
  position: absolute;
  left: min(72.36vw, 1042px);
  top: min(5.14vw, 74px);
  width: min(12.22vw, 176px);
  height: min(26.94vw, 388px);
  object-fit: cover;
  border-radius: 20px;
}

.sellpy-logo {
  position: absolute;
  left: min(51.04vw, 735px);
  top: min(34.44vw, 496px);
  width: min(11.88vw, 171px);
  height: auto;
  object-fit: contain;
}

.arkenzoo-logo {
  position: absolute;
  left: min(65.83vw, 948px);
  top: min(34.44vw, 496px);
  width: min(25.21vw, 363px);
  height: auto;
  object-fit: contain;
}

.collab-credit {
  position: absolute;
  left: min(51.04vw, 735px);
  top: min(40.07vw, 577px);
  width: min(39.93vw, 575px);
  margin: 0;
  font-family: var(--font-serif);
  font-size: min(1.5vw, 21px);
  line-height: 1.32;
  text-align: justify;
}

/* ---------- 9. Avslutning ---------- */
.outro-stage { overflow: visible; }

.outro-portrait {
  position: absolute;
  left: min(10.4vw, 150px);
  bottom: 0;
  width: min(24.3vw, 350px);
  height: auto;
}

.outro-heading {
  position: absolute;
  left: min(33.19vw, 478px);
  top: min(17.5vw, 252px);
  width: min(46.04vw, 663px);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: min(4.98vw, 71.75px);
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}

.outro-phone, .outro-email {
  position: absolute;
  top: min(48.4vw, 697px);
  font-family: var(--font-serif);
  font-size: min(3vw, 43px);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.outro-phone { left: min(35.35vw, 509px); }
.outro-email { left: min(53.33vw, 768px); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: min(3vw, 43px) min(7.92vw, 114px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: min(1vw, 14px);
  color: var(--text);
  opacity: 0.75;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal:not(.hero-stage) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.hero-stage) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================================
   Mobile: below this width the fixed-composition canvas becomes
   unreadable, so sections switch to a normal stacked document flow.
   ================================================================== */
@media (max-width: 760px) {
  .stage {
    aspect-ratio: auto;
    max-width: 100%;
    padding: 48px 24px;
  }

  .hero-stage { min-height: 60vh; padding: 24px; aspect-ratio: auto; }
  .hero-circle { width: 170px; }
  .hero-name { font-size: 11vw; white-space: normal; padding: 0 8px; }
  .linkedin-badge {
    left: auto; right: 24px; top: auto; bottom: 24px;
    width: 32px; height: 28px; font-size: 13px;
  }

  .profil-stage, .magasin-cover-stage, .magasin-content-stage,
  .studenttidning-stage, .carousel-stage, .nwt-stage,
  .collab-stage, .outro-stage {
    display: flex;
    flex-direction: column;
  }

  .profil-text,
  .magasin-cover-heading, .magasin-cover-img,
  .magasin-left, .magasin-right,
  .studenttidning-text, .studenttidning-cover,
  .carousel-imgs, .carousel-caption,
  .nwt-heading, .nwt-body, .nwt-poster,
  .collab-heading, .collab-text-col,
  .mobilskal-img, .butiksbild-img, .sellpy-logo, .arkenzoo-logo, .collab-credit,
  .outro-portrait, .outro-heading, .outro-phone, .outro-email {
    position: static;
    inset: auto;
    transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 20px;
  }

  /* These two keep position:relative on mobile so their absolutely-
     positioned children (glow / notch+button) stay anchored to them
     instead of escaping to the nearest ancestor and overflowing. */
  .profil-photo {
    position: relative;
    inset: auto;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 20px;
  }
  .phone-frame {
    position: relative;
    inset: auto;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 190 / 388;
    margin: 0 auto 20px;
    padding: 8px;
    border-radius: 20px;
  }

  .profil-text p, .profil-text ul, .magasin-left p,
  .collab-text-col p, .collab-credit,
  .studenttidning-text p, .nwt-body {
    font-size: 17px;
    text-align: left;
  }

  .profil-text h2, .studenttidning-text h2 { font-size: 26px; }
  .magasin-left-heading h3 { font-size: 28px; }
  .nwt-heading, .collab-heading { font-size: 24px; white-space: normal; }
  .outro-heading { font-size: 34px; }
  .outro-phone, .outro-email { font-size: 20px; display: block; }
  .photo-credit { font-size: 13px; }
  .carousel-caption { font-size: 14px; }
  .site-footer { font-size: 13px; }

  .magasin-cover-heading { font-size: 32px; white-space: normal; transform: rotate(-3deg); margin-bottom: 16px; }
  .magasin-cover-img { transform: rotate(-3deg); max-width: 280px; margin: 0 auto; }

  .studenttidning-text { text-align: center; }
  .studenttidning-text p { width: 100%; margin-left: auto; margin-right: auto; }
  .studenttidning-cover { max-width: 260px; margin: 0 auto; }

  .kau-logo { width: 56px; height: 56px; }
  .magasin-left .vertical-credit {
    position: static;
    height: auto;
    writing-mode: horizontal-tb;
    transform: none;
    display: block;
    font-size: 13px;
    margin-top: 8px;
  }

  .magasin-right-top { gap: 10px; }
  .hemforstunden-img.tilt-left, .hemforstunden-img.tilt-right { transform: none; }
  .stakvar-img { margin-top: 0; }

  .carousel-imgs {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .carousel-imgs img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 362 / 452;
  }
  .carousel-caption { position: static; font-size: 14px; margin-top: 12px; }

  .nwt-arrow { width: 40px; height: 34px; }
  .nwt-poster { position: static; width: 48%; height: auto; aspect-ratio: 278/393; display: inline-block; margin: 0 1% 12px; border-radius: 10px; }
  .nwt-poster-mid { width: 96%; aspect-ratio: 303/428; }

  .drmlnd-logo { width: 140px; }
  .phone-notch { top: 6px; height: 5px; }
  .phone-play-toggle { width: 44px; height: 44px; font-size: 16px; }
  .mobilskal-img, .butiksbild-img { display: inline-block; width: 47%; margin: 0 1.5% 12px; height: auto; aspect-ratio: 197/385; }
  .sellpy-logo, .arkenzoo-logo { display: inline-block; width: auto; height: 32px; margin: 0 12px 12px 0; }

  .outro-portrait { max-width: 220px; margin: 0 auto 20px; }

  .site-footer { flex-direction: column; text-align: center; }
}