/* ==========================================================
   Verk & Virke – Innstikk
   Mobile first. Delte fonter ligger i /assets/fonts/,
   nye fonter for dette innstikket i /verk-og-virke/assets/fonts/.
   ========================================================== */

/* ---------- Fonter (delt) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../../assets/fonts/playfair-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../../assets/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../../assets/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../../assets/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../../assets/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Fonter (nye for dette innstikket) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "La Belle Aurore";
  src: url("../assets/fonts/la-belle-aurore-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f7f3ea;
  --paper-2: #f1ece0;
  --panel: #fbf8f1;
  --ink: #1d1712;
  --ink-soft: #3a3028;
  --muted: #6a5e50;
  --rule: #d6ccb9;
  --rule-strong: #b9ac95;
  --brown: #7b5a3e;
  --brown-dark: #5f4229;
  --night: #26221e;
  --sage: #5f6f5c;

  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --text: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --script: "La Belle Aurore", "Segoe Script", "Brush Script MT", cursive;

  --side-w: 14rem;
  --topbar-h: 3.5rem;
  --pad: 1.5rem;
  --wrap: 68rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; flex: none; }

:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Label (liten, bred sans med strek) ---------- */
.label {
  display: flex; align-items: center; gap: 0.9rem;
  white-space: nowrap;
  font-family: var(--sans); font-weight: 400;
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1;
}
.label::after { content: ""; flex: 1; max-width: 5.5rem; height: 1px; background: var(--rule-strong); }

/* ==========================================================
   Toppbar (mobil)
   ========================================================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); padding: 0 var(--pad);
  background: rgba(247, 243, 234, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.topbar__brand {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
}
.topbar__brand span {
  margin-left: 0.5rem; font-family: var(--sans); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.menu-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-right: -0.5rem; }
.menu-btn svg { width: 1.6rem; height: 1.6rem; grid-area: 1 / 1; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }

/* ==========================================================
   Sidemeny
   ========================================================== */
.sidebar {
  display: flex; flex-direction: column; gap: 1.6rem;
  padding: 1.6rem var(--pad) 2rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
/* mobil med JS: skjult panel under toppbaren */
.js .sidebar {
  display: none;
  position: fixed; z-index: 30;
  top: var(--topbar-h); left: 0; right: 0; bottom: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.js .sidebar.is-open { display: flex; }

.sidebar__brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule-strong);
}
.sidebar__mtn { width: 7rem; height: 2.9rem; color: var(--ink); }
.sidebar__name {
  margin-top: 0.7rem; font-family: var(--display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0.24em; text-transform: uppercase; padding-left: 0.24em;
}
.sidebar__sub {
  margin-top: 0.55rem; font-family: var(--display); font-size: 0.6rem;
  letter-spacing: 0.42em; text-transform: uppercase; padding-left: 0.42em; color: var(--ink-soft);
}

.nav { flex: 1; }
.nav__intro, .nav a { display: block; }
.nav__intro {
  padding: 0.45rem 0 0.65rem; font-size: 1.02rem; color: var(--ink);
}
.nav ol { display: grid; gap: 0.05rem; }
.nav li a {
  display: grid; grid-template-columns: 1.7rem 1fr; align-items: baseline;
  padding: 0.38rem 0; font-size: 1.02rem; line-height: 1.25; color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav__no { font-size: 0.78rem; color: var(--muted); font-variant-numeric: lining-nums; }
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active .nav__no { color: var(--brown); }
.nav li a.is-active .nav__t { box-shadow: inset 0 -1px 0 var(--brown); }

.sidebar__actions { display: grid; gap: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-strong); }

.btn {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 2.75rem; padding: 0.55rem 0.9rem;
  font-family: var(--text); font-size: 1rem; line-height: 1;
  border-radius: 3px; border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn .btn__arrow { width: 1.1rem; height: 0.6rem; margin-left: auto; }
.btn--dark { background: var(--night); color: #f4ede0; }
.btn--dark:hover { background: #000; }
.btn--line { border-color: var(--rule-strong); color: var(--ink-soft); }
.btn--line:hover { border-color: var(--ink); color: var(--ink); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 44rem;
  padding: 2.6rem var(--pad) 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  overflow: hidden;
  color: var(--ink);
}
.hero__bg {
  position: absolute; inset: -10% 0 0 0; z-index: -2;
  background: url("../assets/header.jpg") 22% center / cover no-repeat;
  will-change: transform;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 55% at 50% 22%, rgba(255, 252, 245, 0.7), rgba(255, 252, 245, 0) 78%),
    linear-gradient(to bottom, rgba(255, 252, 245, 0.25), rgba(255, 252, 245, 0) 45%);
}
.hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }

.hero__kicker, .hero__sub {
  display: flex; align-items: center; gap: 1.1rem; width: min(100%, 36rem);
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  line-height: 1;
}
.hero__kicker::before, .hero__kicker::after,
.hero__sub::before, .hero__sub::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: 0.75; }
.hero__kicker span, .hero__sub span { padding-left: 0.3em; white-space: nowrap; }

.hero__title {
  margin: 1.1rem 0 1.1rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.1rem, 13vw, 6.6rem); line-height: 1; letter-spacing: -0.02em;
}
.hero__sub { width: min(100%, 24rem); font-size: 1rem; letter-spacing: 0.5em; }
.hero__sub span { padding-left: 0.5em; }

.hero__quote {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--ink);
  /* mobil: eget papirbånd nederst i hero */
  margin: auto calc(var(--pad) * -1) 0; width: calc(100% + var(--pad) * 2);
  padding: 1.8rem var(--pad) 2rem; background: var(--paper);
}
.hero__quote p {
  max-width: 15rem;
  font-family: var(--script); font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.25;
  transform: rotate(-4deg);
}
.hero__mtn { width: 5.5rem; height: 2.3rem; margin-top: 0.9rem; opacity: 0.85; }
.hero__qrule { width: 7rem; height: 1px; margin-top: 0.4rem; background: var(--ink); opacity: 0.7; }

/* ==========================================================
   Innhold
   ========================================================== */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* Introduksjon */
.intro { padding: 3rem 0 3.5rem; }
.intro__grid { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.intro h2 {
  margin-top: 1.6rem;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 8.5vw, 3.05rem); line-height: 1.06; letter-spacing: -0.025em;
}
.intro__body p {
  max-width: 32rem; font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft);
}

/* Hele albumet: liten rad med strømmeikoner under intro-teksten */
.album-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 1.5rem; }
.album-links__label {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); line-height: 1;
}
.album-links .streams { margin-left: -0.4rem; }
.album-links .stream { color: var(--brown); }
.album-links .stream:hover { color: var(--brown-dark); }

/* Plassholdere */
.ph {
  position: relative;
  display: grid; place-content: center; justify-items: center; gap: 0.3rem;
  width: 100%; aspect-ratio: var(--ratio, 16 / 9);
  padding: 1rem; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(120, 100, 70, 0.07) 0 12px, rgba(120, 100, 70, 0.0) 12px 24px),
    #ece5d4;
  border: 1px dashed var(--rule-strong);
  color: var(--muted);
}
.ph__label { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; }
.ph__file { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; opacity: 0.8; word-break: break-all; }
.ph__note { max-width: 24rem; margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.3; font-style: italic; }
.ph--sketch { background-color: transparent; background-image: none; }

.media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   Sang
   ========================================================== */
.song { padding: 3.5rem 0 4rem; border-top: 1px solid var(--rule); scroll-margin-top: var(--topbar-h); }
.js .song { scroll-margin-top: calc(var(--topbar-h) - 2.5rem); }
.intro { scroll-margin-top: calc(var(--topbar-h) + 0.5rem); }


/* ---------- Sang-header: tekst oppå bildet ---------- */
.song__hero {
  --cream: #f6efe2;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 0 calc(var(--pad) * -1) 2rem;
  container-type: inline-size;
}
.media--hero { grid-area: 1 / 1; position: relative; margin: 0; background: #2a2118; }
.media--hero img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--focus, 50%) 50%;
  filter: saturate(0.9) brightness(0.88);
}
/* Filter: jevn varm mørkning + kraftig gradient nedenfra, så lys tekst alltid holder kontrast */
.media--hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(17, 11, 6, 0.92) 0%, rgba(17, 11, 6, 0.78) 34%, rgba(17, 11, 6, 0.46) 66%, rgba(17, 11, 6, 0.22) 100%),
    rgba(42, 30, 18, 0.2);
}

.song__main {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 1;
  padding: 0 var(--pad) 1.4rem; color: var(--cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 22px rgba(0, 0, 0, 0.28);
}
.song__main .label { color: var(--cream); }
.song__main .label::after { background: rgba(246, 239, 226, 0.55); }
.song__main h2 {
  margin-top: 0.7rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
  color: #fbf6ec;
}
.song__line {
  margin-top: 0.6rem; max-width: 30rem;
  font-style: italic; font-size: 1.15rem; line-height: 1.3; color: rgba(246, 239, 226, 0.95);
}
.song__place {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.95rem;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.2; color: rgba(246, 239, 226, 0.9);
}
.song__place svg { width: 0.95rem; height: 0.95rem; }

/* Mobil: Periode + lytt-ikoner som bildetekst under bildet */
.song__aside {
  grid-area: 2 / 1; display: grid; gap: 0.35rem;
  padding: 1.1rem var(--pad) 0;
}
.song__period { display: grid; gap: 0.3rem; }
.song__period-label {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); line-height: 1.2;
}
.song__period-text { font-style: italic; font-size: 1.02rem; line-height: 1.4; color: var(--ink-soft); }

/* Strømmeknapper – subtile */
.streams { display: flex; align-items: center; gap: 0.15rem; margin-left: -0.5rem; }
.stream {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  color: var(--muted); transition: color 0.15s ease, transform 0.15s ease;
}
.stream svg { width: 1.35rem; height: 1.35rem; }
.stream:hover { color: var(--brown); transform: translateY(-1px); }

/* Fakta + fortelling */
.song__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 3rem; }
.facts { padding-top: 1.1rem; border-top: 2px solid var(--ink); align-self: start; }
.facts dl { margin-top: 1.3rem; display: grid; gap: 1.15rem; }
.facts dt {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  letter-spacing: 0; color: var(--ink);
}
.fact__ico { width: 1.45rem; height: 1.45rem; color: var(--sage); }
.facts dd {
  margin-top: 0.25rem; padding-left: 2.15rem;
  font-size: 1.02rem; line-height: 1.42; color: var(--ink-soft);
}

.prose { max-width: 37rem; }
.prose p { margin-bottom: 1em; font-size: 1.24rem; line-height: 1.62; color: var(--ink); }
.prose .lede { font-size: 1.45rem; line-height: 1.45; color: var(--ink); }
.media--story { position: relative; overflow: hidden; margin: 1.8rem 0 2rem; background: #3a2d1f; }
.media--story img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- «Gammelt trykk»: dempede farger, varm tone, mørk kant ----------
   Ligger i CSS, ikke i bildefilene, så originalene er urørt og filteret kan justeres her. */
.media--story img, .lightbox img.is-aged {
  filter: sepia(0.26) saturate(0.74) contrast(0.93) brightness(0.98);
}
.media--story::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 105% at 50% 48%, rgba(0, 0, 0, 0) 52%, rgba(46, 30, 14, 0.42) 100%),
    linear-gradient(rgba(171, 132, 84, 0.16), rgba(171, 132, 84, 0.16));
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(52, 34, 16, 0.38);
}
/* fin kornstruktur, som papir/film */
.media--story::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.22; mix-blend-mode: multiply;
}
.prose .media--story { max-width: none; }

/* Objekt */
.object {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 1.5rem;
  background: var(--panel); border: 1px solid var(--rule);
}
.media--object { position: relative; margin: 0; }
.media--object img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  box-shadow: 0 4px 14px rgba(58, 40, 22, 0.2), 0 1px 2px rgba(58, 40, 22, 0.18);
}
.media--object figcaption {
  margin-top: 0.55rem;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  line-height: 1.2; color: var(--muted);
}
.object__text h3 {
  margin: 1rem 0 0.8rem;
  font-family: var(--display); font-weight: 500; font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.01em;
}
.object__text p { margin-bottom: 0.8em; font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); }
.object__text p:last-of-type { margin-bottom: 0; }

/* Relatert objekt / affiliate */
.aff {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1rem;
  margin-top: 0.4rem; padding: 0.8rem 1rem 0.8rem 0.8rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.aff__thumb {
  flex: none; width: 3.6rem; height: 3.6rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 230, 190, 0.35), rgba(255, 230, 190, 0) 60%),
    linear-gradient(145deg, #9a6d46, #5f4229);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.aff__thumb img { width: 100%; height: 100%; object-fit: cover; }
.aff__body { flex: 1; min-width: 0; display: grid; gap: 0.35rem; }
.aff__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; line-height: 1; }
.aff__label {
  font-family: var(--sans); font-weight: 500; font-size: 0.6rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
}
.aff__tag {
  padding: 0.22rem 0.4rem 0.2rem;
  font-family: var(--sans); font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 2px;
}
.aff__title {
  font-size: 1.18rem; line-height: 1.25; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.aff__arrow { flex: none; width: 1.4rem; height: 0.75rem; color: var(--ink-soft); transition: transform 0.2s ease, color 0.2s ease; }
.aff:hover { border-color: var(--rule-strong); background: #ece6d7; }
.aff:hover .aff__title { color: var(--brown-dark); text-decoration-color: var(--brown); }
.aff:hover .aff__arrow { transform: translateX(4px); color: var(--brown-dark); }

/* Hvorfor denne sangen */
.why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-top: 2.5rem; padding: 1.75rem 1.5rem; background: var(--paper-2); }
.why__text { min-width: 0; }
.why__text .label { margin-bottom: 1.1rem; }
.why__text p { margin-bottom: 0.9em; max-width: 38rem; font-size: 1.18rem; line-height: 1.58; color: var(--ink-soft); }
.why__text p:last-child { margin-bottom: 0; }

/* Avslutningsmerke: et lite ikon mellom to streker, som en vignett i en gammel bok */
.song__end {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin: 3.2rem auto 0; max-width: 24rem; color: var(--brown);
}
.song__end-rule { flex: 1; height: 1px; background: var(--rule-strong); }
.song__end-mark {
  display: grid; place-items: center; flex: none;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule);
}
.song__end-icon { width: 1.7rem; height: 1.7rem; }

/* Rolig innkomst én gang når merket kommer til syne */
.js .song__end .song__end-rule { transform: scaleX(0); transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.js .song__end .song__end-rule--l { transform-origin: 100% 50%; }
.js .song__end .song__end-rule--r { transform-origin: 0 50%; }
.js .song__end .song__end-mark { opacity: 0; transform: scale(0.88); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .song__end.is-in .song__end-rule { transform: scaleX(1); }
.js .song__end.is-in .song__end-mark { opacity: 1; transform: none; }

/* Kilder */
.sources { margin-top: 2.5rem; }
.sources ul { margin-top: 1rem; display: grid; gap: 0.5rem; }
.sources li { font-size: 0.98rem; line-height: 1.4; }
.sources a {
  color: var(--ink-soft);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.sources a:hover { color: var(--brown-dark); text-decoration-color: var(--brown); }
.sources__note { margin-top: 1rem; max-width: 40rem; font-size: 0.92rem; line-height: 1.45; font-style: italic; color: var(--muted); }

/* ---------- Gårdsbildet i intro: sterkere vintage-uttrykk enn fortellingsbildene ---------- */
.photo-aged {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  position: relative; overflow: hidden; width: 100%; max-width: 27rem; margin: 0;
  background: #4a3a28;
  box-shadow: 0 6px 20px rgba(58, 40, 22, 0.28), 0 1px 3px rgba(58, 40, 22, 0.2);
}
.photo-aged img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  /* dempede farger, varm tone, løftede svarte toner og svært lett uskarphet */
  filter: sepia(0.42) saturate(0.58) contrast(0.86) brightness(1.04) blur(0.45px);
}
.photo-aged::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 118% 108% at 50% 48%, rgba(0, 0, 0, 0) 48%, rgba(52, 34, 16, 0.5) 100%),
    linear-gradient(rgba(176, 138, 88, 0.2), rgba(176, 138, 88, 0.2));
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(52, 34, 16, 0.42);
}
.photo-aged::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); opacity: 0.3; mix-blend-mode: multiply;
}

/* ---------- Back cover med klikkbar sporliste ---------- */
.cover { position: relative; width: 100%; max-width: 27rem; margin: 0; }
.cover img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  box-shadow: 0 6px 20px rgba(58, 40, 22, 0.28), 0 1px 3px rgba(58, 40, 22, 0.2);
}
.cover__tracks { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1 / 1; }
.cover__tracks a {
  position: absolute; left: 34.6%; width: 34.6%; top: var(--y); height: 3.44%;
  border-radius: 3px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.cover__tracks a:hover { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.cover__tracks a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255, 255, 255, 0.14); }
.cover figcaption {
  margin-top: 0.9rem; font-style: italic; font-size: 0.98rem; color: var(--muted);
}

/* ---------- Fremdriftslinje ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%; background: var(--brown);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Lightbox ---------- */
.media:not(.media--hero) img { cursor: zoom-in; }
.lightbox {
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0; background: transparent; color: #f4ede0;
}
.lightbox::backdrop { background: rgba(22, 16, 10, 0.93); }
.lightbox[open] { display: grid; place-items: center; }
.lb__fig { margin: 0; max-width: min(92vw, 80rem); display: grid; gap: 0.9rem; justify-items: center; }
.lb__fig img { max-width: 100%; max-height: 82vh; width: auto; height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); cursor: default; }
.lb__fig figcaption { max-width: 44rem; text-align: center; font-style: italic; font-size: 1.02rem; line-height: 1.4; color: #d9cfbc; }
.lb__btn {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem;
  color: #f4ede0; border-radius: 50%; transition: background-color 0.2s ease;
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.12); }
.lb__btn svg { width: 1.5rem; height: 1.5rem; }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev, .lb__next { top: 50%; margin-top: -1.5rem; }
.lb__prev { left: 0.75rem; transform: scaleX(-1); }
.lb__next { right: 0.75rem; }
.lb__prev svg, .lb__next svg { width: 1.6rem; height: 0.9rem; }
.lightbox:focus-visible, .lb__btn:focus-visible { outline: 2px solid #f4ede0; outline-offset: 2px; }

/* ---------- Footer ---------- */
.foot {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 2.5rem var(--pad) 3rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft);
}
.foot a:hover { color: var(--brown-dark); }
.foot__sep { width: 1px; height: 0.9rem; background: var(--rule-strong); }

/* ==========================================================
   ≥ 40rem
   ========================================================== */
@media (min-width: 40rem) {
  :root { --pad: 2.25rem; }
  .hero { min-height: 46rem; }
  .object { grid-template-columns: minmax(0, 17rem) 1fr; gap: 2rem; align-items: center; padding: 1.75rem; }
  .why { padding: 2.25rem 2rem; }
  .media--hero img { aspect-ratio: 2 / 1; }
  .song__main { padding-bottom: 1.8rem; }
  .song__main h2 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
  .song__line { font-size: 1.3rem; }
}

/* ==========================================================
   ≥ 64rem – desktop: fast sidemeny
   ========================================================== */
@media (min-width: 64rem) {
  :root { --pad: 3rem; }
  .js .song, .song { scroll-margin-top: -2.5rem; }
  .intro { scroll-margin-top: 0; }

  .topbar { display: none; }
  .js .sidebar, .sidebar {
    display: flex; position: fixed; z-index: 20;
    top: 0; left: 0; bottom: 0; width: var(--side-w);
    padding: 1.9rem 1.35rem 1.5rem;
    border-bottom: 0; border-right: 1px solid var(--rule);
    overflow-y: auto;
  }
  .content { margin-left: var(--side-w); }

  .hero {
    min-height: clamp(34rem, 51vw, 50rem);
    padding: 3.4rem var(--pad) 4rem;
  }
  .hero__bg { background-position: center 62%; }
  .hero__kicker { font-size: 0.9rem; width: min(100%, 38rem); }
  .hero__quote {
    position: absolute; top: 3.2rem; right: 3rem; align-items: flex-end;
    margin: 0; width: auto; padding: 0; background: none;
  }
  .hero__quote p { text-align: right; transform: rotate(-9deg); transform-origin: right center; max-width: 17rem; }
  .hero__mtn { width: 8rem; height: 3.3rem; margin-top: 1.6rem; }
  .hero__qrule { width: 11rem; }

  .intro { padding: 3.5rem 0 4.5rem; }
  .intro__grid {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    grid-template-areas: "head body" "cover sketch";
    column-gap: 3.5rem; row-gap: 3rem;
  }
  .intro__head { grid-area: head; padding-right: 2.5rem; border-right: 1px solid var(--rule-strong); }
  .intro__body { grid-area: body; }
  .intro__cover { grid-area: cover; }
  .intro__sketch { grid-area: sketch; align-self: start; justify-self: start; }
  .intro__body p { font-size: 1.15rem; padding-top: 0.2rem; }

  .song { padding: 4.5rem 0 5rem; }
  .song__hero { margin: 0 0 2.6rem; }
  .media--hero img { aspect-ratio: 3 / 1; }

  .song__main {
    justify-self: start; max-width: 62cqi;
    padding: 0 0 2rem 2.25rem;
  }
  .song__main h2 { font-size: clamp(1.7rem, 5.3cqi, 3.5rem); }
  .song__line { font-size: clamp(1rem, 2.15cqi, 1.3rem); }
  .song__place { font-size: clamp(0.6rem, 1.1cqi, 0.7rem); }

  .song__aside {
    grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; z-index: 1;
    max-width: 31cqi; margin: 0 2.25rem 2rem 0; padding: 0 0 0 1.4rem;
    border-left: 1px solid rgba(246, 239, 226, 0.4);
    gap: 0.85rem; color: var(--cream);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 22px rgba(0, 0, 0, 0.28);
  }
  .song__period-label { color: rgba(246, 239, 226, 0.85); }
  .song__period-text { color: #fbf6ec; font-size: clamp(0.82rem, 1.6cqi, 1rem); line-height: 1.42; }
  .song__aside .streams { margin-left: -0.55rem; }
  .song__aside .stream { color: rgba(246, 239, 226, 0.8); }
  .song__aside .stream:hover { color: #fff; }

  .song__body {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-areas: "prose facts";
    column-gap: 3.5rem; padding-bottom: 3.5rem;
  }
  .prose { grid-area: prose; }
  .facts { grid-area: facts; position: sticky; top: 2rem; }
  .song__body > .facts { order: 2; }
  .song__body > .prose { order: 1; }

  .object { padding: 2rem; gap: 2.5rem; grid-template-columns: minmax(0, 20rem) 1fr; }
  .object__text h3 { font-size: 1.9rem; }
  .why { margin-top: 3rem; padding: 2.75rem 3rem; }
  .sources { margin-top: 3rem; }
}

@media (min-width: 90rem) {
  .hero { min-height: min(51vw, 52rem); }
}

/* ---------- Rolig åpning (én gang ved innlasting) ---------- */
@keyframes rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { scale: 1.07; } to { scale: 1; } }
@keyframes lbin  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__bg      { animation: settle 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero__kicker  { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
  .hero__title   { animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
  .hero__sub     { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both; }
  .hero__quote > * { animation: fade 1.4s ease 1.1s both; }
  .lightbox[open] { animation: lbin 0.25s ease both; }
}

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .js .song__end .song__end-rule { transform: none; }
  .js .song__end .song__end-mark { opacity: 1; transform: none; }
}

/* ---------- Print: enkel ---------- */
@media print {
  .sidebar, .topbar, .streams { display: none !important; }
  .content { margin-left: 0 !important; }
}