/* sangboken.com — the whole stylesheet. Served from /css/site.css with a content hash in the URL (see website.js). */
:root {
  color-scheme: light dark;
  --ink: #1c1c1c;
  --muted: #616161;
  --bg: #fdfdfb;
  --card: #ffffff;
  --line: rgba(0,0,0,0.10);
  --promo-bg: #eaf1fb;
  --promo-line: #cbdcf3;
  --accent: #1a5fb4;
  --deep: #27354f;
  --warm1: #fbf6ec;
  --warm2: #f4ede0;
  --warm-line: rgba(120, 90, 40, 0.16);
  --gold: #9a6b1f;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --blob1: rgba(120, 160, 255, 0.45);
  --blob2: rgba(190, 140, 255, 0.38);
  --blob3: rgba(90, 210, 190, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e6;
    --muted: #a8a8a8;
    --bg: #131313;
    --card: #1b1b1b;
    --line: rgba(255,255,255,0.14);
    --promo-bg: #172234;
    --promo-line: #24344c;
    --accent: #8ab4f8;
    --deep: #3a4d72;
    --warm1: #1f1b15;
    --warm2: #191611;
    --warm-line: rgba(230, 190, 120, 0.16);
    --gold: #e2b865;
    --glass: rgba(34, 34, 40, 0.55);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-hi: rgba(255, 255, 255, 0.10);
    --blob1: rgba(70, 110, 230, 0.40);
    --blob2: rgba(140, 80, 220, 0.34);
    --blob3: rgba(40, 160, 140, 0.30);
  }
}
* { box-sizing: border-box; }
/* Bannerets høyde. Et anslag som holder til skriptet har målt den ekte; er
   banneret lukket, er den null. */
/* Bannerets høyde. Et anslag som holder til skriptet har målt den ekte; er
   banneret lukket, er den null. */
:root { --promo-h: 3.2rem; }
:root[data-banner="hidden"] { --promo-h: 0px; }
html { scroll-padding-top: calc(var(--promo-h) + 0.6rem); }
body {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0; padding-top: var(--promo-h);
  line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
.page { max-width: 46em; margin: 0 auto; padding: 0 1.2em 4em; }

/* Toppen: navnet til venstre, vanlige tekstlenker, og «Sanger» som eneste
   knapp helt til høyre. Én rolig linje, også på mobil — ingen faner. */
header.site {
  display: flex; align-items: center; gap: 1.4em;
  margin: 1.6em 0 2.8em; padding-bottom: 1em; border-bottom: 1px solid var(--line);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
header.site .brand {
  display: inline-flex; align-items: center; gap: 0.5em; margin-right: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em; font-weight: 600; text-decoration: none; color: inherit;
}
header.site .brand img { width: 1.7em; height: 1.7em; border-radius: 0.42em; }
header.site nav { display: flex; gap: 1.3em; font-size: 0.93em; }
header.site nav a {
  color: var(--muted); text-decoration: none; padding: 0.2em 0;
  border-bottom: 1.5px solid transparent;
}
header.site nav a:hover { color: var(--ink); }
header.site nav a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; }
.songs-btn {
  display: inline-flex; align-items: center; gap: 0.4em; flex: none;
  padding: 0.48em 0.95em; border-radius: 8px; font-size: 0.92em; font-weight: 600;
  background: var(--deep); color: #fff; text-decoration: none;
  transition: opacity 150ms ease;
}
.songs-btn:hover { opacity: 0.9; }
.songs-btn svg { width: 1em; height: 1em; }
@media (max-width: 34em) {
  header.site { gap: 0.95em; }
  header.site .brand span { display: none; }
  header.site nav { gap: 0.95em; font-size: 0.88em; }
  .songs-btn { padding: 0.42em 0.75em; font-size: 0.88em; }
}
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1 { font-size: 1.9em; line-height: 1.2; margin: 0 0 0.4em; }
h2 { font-size: 1.1em; margin: 2em 0 0.4em; }
p { margin: 0.5em 0; }
ul { margin: 0.5em 0; padding-left: 1.3em; }
li { margin: 0.35em 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.lead { color: var(--muted); margin: 0 0 1.8em; }
.doc-date { color: var(--muted); font-style: italic; margin-bottom: 1.4em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.hero { display: flex; gap: 1.3em; align-items: center; margin-bottom: 0.4em; }
.hero img { width: 92px; height: 92px; border-radius: 21px; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.hero h1 { margin: 0; }
.lede { font-size: 1.12em; margin: 0.9em 0 1.5em; }

.stores { display: flex; flex-wrap: wrap; gap: 0.7em; margin: 0 0 0.6em; }
.store {
  display: inline-block; text-decoration: none; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95em; padding: 0.62em 1.15em; border-radius: 11px;
  background: var(--deep); color: #fff; border: 1px solid transparent;
}
.store:hover { opacity: 0.92; }
/* Android er ikke lansert: grå, stiplet, ikke en lenke, med et rødt kryss
   (Robin, 2026-09-24: «den ser ikke grå ut så jeg tror egt selv at den kunne
   trykkes på»). */
.store.soon {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: transparent; color: var(--muted); border: 1px dashed var(--line);
  cursor: not-allowed; user-select: none;
}
.store.soon:hover { opacity: 1; }
.store.soon small { font-size: 0.85em; }
.x-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  background: #c62828; color: #fff; font: 700 0.72em/1 system-ui, -apple-system, sans-serif;
}

.features {
  list-style: none; padding: 0; margin: 1.8em 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.88em;
}
.features li { margin: 0; padding: 0.35em 0.8em; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

.shots { display: flex; gap: 1em; margin: 2.4em 0 0.6em; }
.shots figure { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; }
.shots a { display: block; text-decoration: none; }
/* Et overlegg uten skript: lenken peker på overleggets id, og :target gjør
   det synlig. Skriptet bruker klassen, så adressen ikke endres. */
.lightbox {
  display: none; position: fixed; inset: var(--promo-h) 0 0 0; z-index: 20;
  align-items: center; justify-content: center; overflow: hidden;
  padding: 3rem 1rem; background: rgba(0, 0, 0, 0.82);
}
.lightbox:target, .lightbox.is-open { display: flex; }
.lightbox .backdrop { position: absolute; inset: 0; }
.lightbox img {
  position: relative; min-width: 0; min-height: 0;
  max-width: min(100%, 26em); max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox .close {
  position: absolute; top: 0.4rem; right: 0.7rem;
  font: inherit; font-size: 2.2rem; line-height: 1; color: #fff;
  text-decoration: none; padding: 0.2em 0.4em;
}
.lightbox .close:focus-visible { outline: 2px solid #fff; border-radius: 8px; }
.shots img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); cursor: zoom-in;
}
.shots a:focus-visible img { outline: 2px solid var(--accent); outline-offset: 2px; }
.shots figcaption { font-size: 0.82em; color: var(--muted); margin-top: 0.5em; }
@media (max-width: 30em) {
  .shots { gap: 0.45em; }
  .hero img { width: 72px; height: 72px; border-radius: 17px; }
  h1 { font-size: 1.6em; }
}

/* Takk. Et varmt kort, navnene i vanlig tekst, uten logoer: en logo i en
   boks ser ut som en annonse, ikke som en takk. */
.thanks {
  margin: 3.4em 0 0; padding: 1.9em 1.6em 1.6em; border-radius: 22px;
  background: linear-gradient(165deg, var(--warm1), var(--warm2));
  border: 1px solid var(--warm-line);
}
.thanks h2 { margin: 0 0 0.2em; font-size: 1.35em; }
.thanks .thanks-lead { color: var(--muted); margin: 0 0 1.3em; }
.thanks blockquote { margin: 0 0 1.5em; font-style: italic; font-size: 1.05em; }
.thanks blockquote cite { display: block; margin-top: 0.3em; font-style: normal; font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.thanks dl { margin: 0; display: grid; gap: 1.1em; }
.thanks dt { display: flex; align-items: center; gap: 0.55em; font-weight: 600; font-size: 1.08em; }
.thanks dt .curl { width: 1.5em; height: 0.85em; flex: none; color: var(--gold); }
.thanks dd { margin: 0.15em 0 0 2.05em; color: var(--muted); }
.thanks .thanks-close { margin: 1.5em 0 0; font-size: 0.92em; color: var(--muted); }

/* The song index. */
.filter {
  position: sticky; top: var(--promo-h); z-index: 15;
  display: flex; flex-wrap: wrap; gap: 0.5em;
  margin: 1.4em 0 0.6em; padding: 0.7em 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.filter input {
  flex: 1 1 14em; min-width: 0; font: inherit; font-size: 0.95em;
  padding: 0.5em 0.7em; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink);
}
.filter button {
  font: inherit; font-size: 0.95em; padding: 0.5em 1.1em; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--deep); color: #fff;
}
.filter a { align-self: center; font-size: 0.9em; }
.songbook { margin-top: 2.2em; }
.songbook h2 { margin-bottom: 0.1em; }
.songbook .meta { color: var(--muted); font-size: 0.9em; margin: 0 0 0.8em; }
table.songs { width: 100%; border-collapse: collapse; font-size: 0.95em; }
table.songs th { text-align: left; font-size: 0.8em; text-transform: uppercase;
                 letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
                 padding: 0 0.6em 0.4em 0; border-bottom: 1px solid var(--line); }
table.songs td { padding: 0.3em 0.6em 0.3em 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.songs td:first-child { width: 3.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
table.songs td a { display: block; }
table.songs small { display: block; color: var(--muted); font-size: 0.82em; }

/* Sanger uten tekst her står i lista, men grå, med en liten merkelapp. */
table.songs tr.off a { color: var(--muted); text-decoration: none; }
table.songs tr.off a:hover { text-decoration: underline; }
table.songs td:nth-child(3) { width: 9em; text-align: right; white-space: nowrap; }
.tag {
  display: inline-block; padding: 0.08em 0.55em; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted); text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.74em;
}
table.songs td a.tag { display: inline-block; }
a.tag { color: var(--accent); }
a.tag:hover { border-color: var(--accent); }
.legend { font-size: 0.9em; }
@media (max-width: 30em) {
  table.songs td:nth-child(3) { width: 1%; padding-left: 0.4em; }
  .tag { font-size: 0.7em; padding: 0.08em 0.4em; }
}
/* Bøkene. */
.books-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.books-head h1 { margin: 0; }
.books { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 0.8em; }
.books li { margin: 0; }
.book-card {
  display: flex; align-items: center; gap: 1em; padding: 1em 1.1em;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  color: inherit; text-decoration: none;
}
a.book-card:hover { border-color: var(--accent); }
.book-card.upcoming { opacity: 0.6; cursor: not-allowed; }
.book-badge {
  display: grid; place-items: center; flex: none; width: 3.1em; height: 3.1em; border-radius: 12px;
  background: var(--deep); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: 0.02em;
}
.book-card.upcoming .book-badge { background: var(--muted); }
.book-badge.all { background: transparent; color: var(--ink); border: 1px solid var(--line); font-size: 0.85em; }
.book-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.book-text strong { font-size: 1.1em; }
.book-sub { color: var(--muted); }
.book-meta { font-size: 0.85em; color: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; margin-top: 0.2em; }
.book-go { font-size: 1.6em; color: var(--muted); line-height: 1; }
.book-subtitle { margin: -0.2em 0 0.3em; color: var(--muted); }
.crumbs { font-size: 0.88em; margin: 0 0 0.8em; }
.letters {
  display: flex; flex-wrap: wrap; gap: 0.25em; margin: 0.4em 0 0.8em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.9em;
}
.letters a {
  display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 0.3em;
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink);
}
.letters a:hover { border-color: var(--accent); color: var(--accent); }
.letter-group h2 { margin-top: 1.6em; }
.letter-group thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.status {
  padding: 1em 1.2em; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); margin: 1.4em 0;
}
.status p { margin: 0 0 0.6em; }
.status p:last-child { margin-bottom: 0; }
.chorus { font-style: italic; }
.app-note { margin-top: 2.2em; font-size: 0.92em; color: var(--muted); }

/* Butikkbanneret. Det står øverst på hver side til noen lukker det, og
   valget varer resten av besøket. Full bredde, så det ikke ser ut som en
   del av teksten. */
/* Ikke klebrig. Et banner som henger igjen over teksten dekker nettopp det
   folk kom for å se — her lå det over skjermbildene. Det står øverst, blir
   sett, og ruller vekk som resten av siden. */
.promo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.6em;
  /* Innholdet i banneret står på linje med tekstspalten under. Prosent av
     body, ikke vw: vw teller med rullefeltet og gir et par piksler vannrett
     rulling på skrivebordet. */
  padding: 0.6em calc(max(0px, (100% - 46em) / 2) + 1.2em);
  background: var(--promo-bg); border-bottom: 1px solid var(--promo-line);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.95em;
  line-height: 1.25;
}
:root[data-banner="hidden"] .promo { display: none; }
.promo-icon { width: 2.2em; height: 2.2em; border-radius: 0.5em; flex: none; }
.promo-name { font-weight: 700; }
.promo-lead { color: var(--muted); }
.promo-buttons { display: flex; align-items: center; gap: 0.8em; margin-left: auto; }
/* Runde, uten tekst: to merker folk kjenner igjen uten å lese noe.
   Egen klasse, ikke gjenbruk av store-klassen: det navnet tilhører de store
   knappene på forsiden, og deres padding gjorde sirklene til ovaler. */
.promo-btn {
  display: grid; place-items: center; width: 2.5em; height: 2.5em;
  border-radius: 50%; flex: none; border: 0;
  background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
a.promo-btn:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24); }
/* Android er ikke lansert: grått merke og et lite rødt kryss, ikke klikkbart. */
.promo-btn.soon { position: relative; box-shadow: none; cursor: not-allowed; }
.promo-btn.soon .mark { filter: grayscale(1); opacity: 0.45; }
.promo-btn.soon::after {
  content: "\2715"; position: absolute; right: -0.2em; bottom: -0.2em;
  display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%;
  background: #c62828; color: #fff; font: 700 0.6em/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 0 0 2px var(--promo-bg);
}
.promo .mark { width: 1.5em; height: 1.5em; }
.promo-close {
  border: 0; background: none; cursor: pointer; flex: none;
  font: inherit; font-size: 1.6em; line-height: 1; padding: 0 0.1em;
  color: var(--muted);
}
.promo-close:hover { color: var(--ink); }
.promo-close:focus-visible, .promo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 32em) {
  .promo { gap: 0.45em; font-size: 0.88em; }
  .promo-lead { display: none; }
  .promo-btn { width: 2.3em; height: 2.3em; }
  .promo-buttons { gap: 0.6em; }
}

.song-meta { color: var(--muted); margin: 0 0 1.6em; }
.song-meta span + span::before { content: " · "; }
.verse { white-space: normal; margin: 0 0 1.1em; }
.verse-note { color: var(--muted); font-size: 0.9em; margin: 1.8em 0 0.4em; }
.song-nav { margin-top: 2.4em; font-size: 0.92em; }
.song-nav a + a::before { content: " · "; color: var(--muted); }

.to-top {
  display: grid; place-items: center; flex: none;
  width: 2.45em; height: 2.45em; border-radius: 50%;
  text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  transition: opacity 160ms ease, border-color 160ms ease;
}
.to-top svg { width: 1.1em; height: 1.1em; }
.to-top:hover { border-color: var(--accent); }
:root[data-attop="1"] .to-top { opacity: 0; pointer-events: none; }
:root[data-hint="1"] .to-top svg { animation: bob 1.5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

/* Nytt: små innlegg, nyeste først. */
/* Nytt: hvert innlegg som et rolig kort. */
.posts { display: grid; gap: 1.1em; }
.post {
  padding: 1.3em 1.4em; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.post time { display: block; font-size: 0.8em; letter-spacing: 0.02em; color: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.post h2 { margin: 0.2em 0 0.5em; font-size: 1.2em; line-height: 1.3; }
.post h2 a { color: inherit; text-decoration: none; }
.post h2 a:hover { text-decoration: underline; }
.post-body p { margin: 0 0 0.8em; }
.post-body p:last-child { margin-bottom: 0; }
.post-image { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0.4em 0 0.9em; border: 1px solid var(--line); }
.post-single { border: 0; background: none; padding: 0; }
.post-single h1 { margin: 0.2em 0 0.6em; }
.post-single .post-body { font-size: 1.05em; }

/* Endringer. «Kommer snart» som små brikker, og siste versjon per plattform
   som glasskort over myke fargeflekker. */
.kicker {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.78em;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 2.4em 0 0.8em;
}
.soon-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.55em; }
.soon-list li {
  margin: 0; display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.45em 0.95em; border-radius: 999px;
  background: var(--card); border: 1px dashed var(--line);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.9em;
}
.soon-list svg { width: 1.05em; height: 1.05em; color: var(--accent); }
.stage {
  position: relative; display: grid; gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(15.5em, 1fr));
  padding: 1.1em; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, var(--blob1), transparent 52%),
    radial-gradient(circle at 88% 26%, var(--blob2), transparent 50%),
    radial-gradient(circle at 55% 105%, var(--blob3), transparent 58%),
    var(--card);
  border: 1px solid var(--line);
}
.glass {
  position: relative; padding: 1.15em 1.2em 1em; border-radius: 20px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px rgba(0, 0, 0, 0.08);
}
.glass-head { display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.7em; }
/* Appikonet med et glasslag over: en lys kant og et skjær ovenfra. */
.glass-icon { position: relative; width: 3.2em; height: 3.2em; flex: none; border-radius: 0.8em; overflow: hidden;
              box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.glass-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.glass-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), inset 0 -6px 10px rgba(0,0,0,0.10);
}
.glass-title { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.25; }
.glass-title strong { display: flex; align-items: center; gap: 0.35em; font-size: 1.02em; }
.glass-title strong svg { width: 1em; height: 1em; }
.glass-title span { display: block; font-size: 0.85em; color: var(--muted); }
.glass ul { margin: 0; padding-left: 1.1em; }
.glass li { margin: 0.25em 0; }
.glass .none { color: var(--muted); margin: 0; }
.glass.unavailable .glass-icon img { filter: grayscale(1); opacity: 0.5; }
.glass.unavailable .glass-title strong svg { filter: grayscale(1); opacity: 0.5; }
.glass.unavailable .glass-icon { overflow: visible; }
.glass.unavailable .glass-icon .x-badge { position: absolute; right: -0.35em; bottom: -0.35em; z-index: 1; font-size: 0.8em; box-shadow: 0 0 0 2px var(--card); }
.fix { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.72em; color: var(--muted);
       border: 1px solid var(--line); border-radius: 999px; padding: 0.05em 0.5em; margin-left: 0.35em; vertical-align: 0.1em; }
details.version { border-bottom: 1px solid var(--line); padding: 0.55em 0; }
details.version summary { cursor: pointer; display: flex; gap: 0.6em; align-items: baseline; }
details.version summary span { color: var(--muted); font-size: 0.88em; }
details.version ul { margin: 0.5em 0 0.3em; }

.contact-card { padding: 1.2em 1.3em; border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin: 0 0 1.4em; }
.contact-card p { margin: 0.2em 0; }

footer { margin-top: 4em; padding-top: 1.1em; border-top: 1px solid var(--line);
         font-size: 0.85em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; justify-content: space-between; }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.3em 1em; }
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .songs-btn { transition: none; }
  .songs-btn:hover { transform: none; }
  .to-top { transition: none; }
  :root[data-hint="1"] .to-top svg { animation: none; }
}

/* Lange lister: nettleseren tegner bare det som er i nærheten av skjermen.
   Innholdet ligger likevel i dokumentet, så søk i siden, lenker til en
   bokstav og søkemotorer ser alt. */
.chunk { content-visibility: auto; contain-intrinsic-size: auto 2400px; }
.jump { display: flex; flex-wrap: wrap; gap: 0.25em; margin: 0.4em 0 0.8em; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.85em; }
.jump a { padding: 0.2em 0.55em; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.jump a:hover { border-color: var(--accent); color: var(--accent); }

/* Skriv ut-knappen på frie sanger. Skjult til skriptet har lastet. */
.print-btn {
  font: inherit; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.85em;
  padding: 0.35em 0.9em; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer; margin: 0 0 1.2em;
}
.print-btn:hover { border-color: var(--accent); }
.print-btn[hidden] { display: none; }

/* Utskrift: bare sangen. Tittel, forfatter og versene, i svart på hvitt,
   uten meny, banner, knapper eller bunntekst, og uten å dele et vers. */
@media print {
  :root { --promo-h: 0px; }
  html, body { background: #fff !important; color: #000 !important; }
  body { padding: 0; font-size: 12pt; line-height: 1.45; }
  .promo, header.site, footer, .song-nav, .app-note, .print-btn, .filter, .crumbs, .lightbox, .to-top { display: none !important; }
  .page { max-width: none; padding: 0; }
  main { margin: 0; }
  h1 { font-size: 20pt; margin: 0 0 0.2em; }
  .song-meta { color: #333; margin: 0 0 1em; font-size: 10.5pt; }
  .verse { break-inside: avoid; page-break-inside: avoid; margin: 0 0 0.9em; }
  .chorus { font-style: italic; }
  a { color: #000; text-decoration: none; }
  @page { margin: 1.6cm 1.8cm; }
}

/* 2026-10-04: forsiden uten bokser, språkvalg, språklister og den trykte boka. */
.lang-switch { display: flex; gap: 0.35em; align-items: center; font-size: 0.85em; color: var(--muted); flex: none; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 700; }
.lang-switch .short { display: none; }
@media (max-width: 34em) {
  header.site { flex-wrap: wrap; row-gap: 0.5em; }
  .lang-switch .long { display: none; }
  .lang-switch .short { display: inline; }
}
header.site nav a { color: var(--ink); opacity: 0.78; }
header.site nav a:hover, header.site nav a[aria-current="page"] { opacity: 1; }
.front { max-width: 34em; }
.front p, .calm-sec p { font-size: 1.06em; line-height: 1.7; }
.lead-big { font-size: 1.5em !important; line-height: 1.35 !important; font-weight: 600; margin: 0.4em 0 0.3em; }
.sub { color: var(--muted); margin-top: 0; }
.front .shots { margin: 2.2em 0; }
blockquote.verse { margin: 3em 0; font-size: 1.3em; line-height: 1.55; font-style: italic; border: 0; padding: 0; }
blockquote.verse cite { display: block; margin-top: 0.5em; font: normal 500 0.62em/1 system-ui, sans-serif; color: var(--gold); letter-spacing: 0.04em; }
.calm-sec { margin: 3.2em 0; }
.calm-sec.first { margin-top: 1.4em; }
.calm-sec h2 { font-size: 1.3em; margin: 0 0 0.6em; }
.button { display: inline-block; background: var(--accent); color: #fff; border-radius: 999px; padding: 0.6em 1.25em; font: 600 0.95em/1 system-ui, sans-serif; text-decoration: none; }
@media (prefers-color-scheme: dark) { .button { color: #0b1a30; } }
.link-more { font: 600 0.98em/1 system-ui, sans-serif; color: var(--accent); text-decoration: none; }
.calm-sec.book { display: flex; gap: 1.4em; align-items: flex-start; }
.calm-sec.book img { width: 7.5em; height: auto; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.25); flex: none; }
@media (max-width: 30em) { .calm-sec.book { flex-direction: column; } }
.plain-list { list-style: none; padding: 0; margin: 1.2em 0 1.6em; }
.plain-list li { border-bottom: 1px solid var(--line); }
.plain-list a { display: flex; align-items: center; gap: 0.9em; padding: 1em 0.2em; text-decoration: none; color: var(--ink); }
.plain-list .flag { font-size: 1.5em; }
.plain-list .name { font-size: 1.12em; font-weight: 600; }
.plain-list .count { margin-left: auto; color: var(--muted); font: 500 0.88em/1 system-ui, sans-serif; }
.plain-list a::after { content: "›"; color: var(--muted); margin-left: 0.6em; }
.note { color: var(--muted); font-size: 0.95em; }
h2.platform { font: 700 0.8em/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 1.6em 0 0.4em; }