/* nickijack.dk: Nickis sangbog. Plakatsort flade med grums, cremefarvet kridttekst og hot pink tusch til
   det aktuelle. Anton til overskrifter, Libre Franklin til tekst, Rock Salt til håndskrevne noter.
   Skrifterne ligger på siden selv (SIL OFL / Apache 2.0, licenserne ved siden af). */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/anton-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/libre-franklin-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/libre-franklin-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Franklin'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/libre-franklin-latin-wght-italic.woff2) format('woff2-variations'); }
@font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/rock-salt-latin-400-normal.woff2) format('woff2'); }

:root {
  /* Fladen og kridtet */
  --flade: #0D0B0A;
  --flade-2: #16120F;
  --flade-3: #221C18;
  --kridt: #EEE5D3;
  --kridt-2: #BFB39F;
  --kridt-3: #938876;
  --linje: rgba(238, 229, 211, 0.12);
  --linje-staerk: rgba(238, 229, 211, 0.3);
  /* Tuschen: --pink til tekst og knapper (5,4:1 på fladen), --pink-dyb er logoets spray (kun grafik) */
  --pink: #F2417F;
  --pink-lys: #FF6A9E;
  --pink-dyb: #C8285F;
  --pink-svag: rgba(242, 65, 127, 0.28);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --tekst: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --haand: 'Rock Salt', 'Segoe Print', 'Bradley Hand', cursive;

  --t-lille: 14px;
  --t-ui: 16px;
  --t-broed: 18px;
  --t-lead: clamp(20px, 0.9vw + 14px, 24px);

  --ramme: 1240px;
  --kant: clamp(16px, 5vw, 56px);
  --luft: clamp(72px, 10vw, 144px);
  --ud: cubic-bezier(0.16, 1, 0.3, 1);
  --top-hoejde: 84px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  scrollbar-color: var(--flade-3) var(--flade);
}

body {
  margin: 0;
  background: var(--flade) url(/assets/img/grums.webp) repeat;
  color: var(--kridt);
  font: 400 var(--t-broed)/1.6 var(--tekst);
  font-optical-sizing: auto;
  caret-color: var(--pink);
  overflow-x: clip;
}

::selection { background: var(--pink); color: var(--flade); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: var(--pink); }
a:hover { color: var(--pink-lys); }

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

h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skjult {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.spring-til {
  position: absolute; left: 16px; top: -80px; z-index: 50;
  background: var(--pink); color: var(--flade); font-weight: 700; padding: 12px 18px; text-decoration: none;
}
.spring-til:focus { top: 16px; }

.demo-bjaelke {
  position: relative; z-index: 30; margin: 0; padding: 8px var(--kant);
  background: var(--kridt); color: var(--flade); font-size: var(--t-lille); font-weight: 600; text-align: center;
}

.ramme { width: 100%; max-width: calc(var(--ramme) + 2 * var(--kant)); margin: 0 auto; padding: 0 var(--kant); }
.smal { max-width: calc(760px + 2 * var(--kant)); }

/* ---------- Typografi ---------- */
.display-1, .display-2, .display-3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; text-wrap: balance; color: var(--kridt);
}
.display-1 { font-size: clamp(52px, 7.2vw, 104px); line-height: 0.92; }
/* Slidt tryk som i logoets bogstaver: små huller, tættest i pletter (kridt.webp, billeder.py) */
.display-1, .display-2 {
  -webkit-mask-image: url(/assets/img/kridt.webp); mask-image: url(/assets/img/kridt.webp);
  -webkit-mask-size: 2.6em; mask-size: 2.6em;
}
.display-2 { font-size: clamp(40px, 5vw, 72px); line-height: 0.95; }
.display-3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--kridt); max-width: 36em; }
p { max-width: 36em; text-wrap: pretty; }

/* Håndskrevne noter i marginen: Rock Salt i pink tusch, skævt sat */
.note {
  font-family: var(--haand); font-size: clamp(15px, 0.5vw + 13px, 19px); line-height: 1.5;
  color: var(--pink); transform: rotate(-4deg); transform-origin: left center;
}

time, .tal { font-variant-numeric: tabular-nums; }

/* ---------- Knapper og links ---------- */
.knapper { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 2px solid transparent; border-radius: 3px;
  font: 700 var(--t-ui)/1.2 var(--tekst); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, translate 0.25s var(--ud), box-shadow 0.25s var(--ud);
}
.knap svg { flex: none; }
.knap--pink { background: var(--pink); color: var(--flade); }
.knap--pink:hover { background: var(--pink-lys); color: var(--flade); }
.knap--kant { border-color: var(--linje-staerk); color: var(--kridt); background: transparent; }
.knap--kant:hover { border-color: var(--kridt); color: var(--kridt); }
.knap--stor { min-height: 56px; padding: 15px 28px; font-size: 17px; }
.knap:active { translate: 0 1px; }
.knap[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
@media (hover: hover) {
  .knap--pink:hover { translate: 0 -2px; box-shadow: 0 10px 24px -10px rgba(242, 65, 127, 0.6); }
}

.pil-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; font-size: var(--t-ui); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--kridt);
}
.pil-link svg { color: var(--pink); transition: translate 0.25s var(--ud); }
.pil-link:hover { color: var(--pink-lys); }
.pil-link:hover svg { translate: 4px 0; }
.pil-link--tilbage:hover svg { translate: -4px 0; }

/* ---------- Tuschcirklen (signaturen) ----------
   Tegnes om det aktuelle, første gang det står fremme (site.js sætter .tegnet). Uden script og ved
   »reducér bevægelse« står den tegnet. Strøget følger tegningens skalering, så det bliver bredt og
   smalt som en rigtig tusch. */
[data-cirkel] { position: relative; }
/* SVG'en fylder præcis elementet; stregen skaleres ud over kanten (--cx, --cy) inde i SVG'en, så den ikke
   tæller som overløb i layoutet */
.cirkel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; max-width: none; }
.cirkel path {
  fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  transform-box: view-box; transform-origin: 50% 50%; transform: scale(var(--cx, 1.32), var(--cy, 1.92));
  filter: url(#tusch);
}
.tusch { position: absolute; width: 0; height: 0; overflow: hidden; }
.js [data-cirkel] .cirkel path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js [data-cirkel].tegnet .cirkel path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(0.55, 0.05, 0.25, 1) 0.2s; }

/* ---------- Top ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--top-hoejde); padding: 12px var(--kant);
}
.demo-bjaelke + .top { top: 37px; }
.top__navn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; color: var(--kridt);
}
.top__lyn { width: auto; height: 34px; transform: rotate(8deg); }
.top > .top__navn { flex-shrink: 0; margin-right: auto; }   /* menuen, de sociale ikoner og menuknappen samles til højre */
.menu { display: flex; align-items: center; gap: 4px; }
.menu a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--kridt);
}
.menu a:hover { color: var(--pink-lys); }
.menu a[aria-current="page"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px;
  background: var(--pink); border-radius: 2px; transform: rotate(-1.5deg);
}
.menu .menu__book { margin-left: 12px; padding: 0 18px; border: 2px solid var(--pink); border-radius: 3px; color: var(--kridt); }
.menu .menu__book:hover { background: var(--pink); color: var(--flade); }
.menu .menu__book[aria-current="page"]::after { display: none; }
.menu .menu__book[aria-current="page"] { background: var(--pink); color: var(--flade); }
.top__menuknap {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 2px solid var(--linje-staerk); border-radius: 3px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--kridt);
}
/* De sociale medier (Nicki 08-10): ikoner i headeren, når der er plads; på telefonen i menuen */
.sociale { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.sociale a { display: inline-grid; place-items: center; width: 40px; height: 44px; color: var(--kridt); transition: color 0.2s; }
.sociale a:hover { color: var(--pink-lys); }
/* Menuen, Booking og de fire sociale ikoner kræver omkring 1020 px; derunder klappes menuen sammen */
@media (max-width: 1040px) {
  .menu { display: none; }
  .top__menuknap { display: inline-flex; }
}
@media (max-width: 520px) {
  .top__sociale { display: none; }
}

.mobilmenu {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 12px var(--kant) 32px;
  border: 0; background: var(--flade) url(/assets/img/grums.webp) repeat; color: var(--kridt);
}
.mobilmenu::backdrop { background: rgba(13, 11, 10, 0.8); }
.mobilmenu__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.mobilmenu nav { display: flex; flex-direction: column; margin-top: 28px; }
.mobilmenu nav a {
  padding: 10px 0; border-bottom: 1px solid var(--linje);
  font-family: var(--display); font-size: clamp(34px, 9vw, 48px); line-height: 1.1; text-transform: uppercase; text-decoration: none;
}
.mobilmenu nav a[aria-current="page"] { color: var(--pink); }
.mobilmenu__sociale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.mobilmenu__sociale a {
  display: grid; justify-items: center; gap: 6px; padding: 12px 6px;
  border: 2px solid var(--linje-staerk); border-radius: 3px;
  font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--kridt);
}
.mobilmenu__sociale a:hover { border-color: var(--kridt); }
.mobilmenu__sociale svg { width: 24px; height: 24px; }
.mobilmenu__bund { margin-top: 28px; font-weight: 600; }
.ikonknap {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--linje-staerk); border-radius: 3px; background: none; color: var(--kridt); cursor: pointer;
}
.ikonknap:hover { border-color: var(--kridt); }

/* ---------- Topbilledet ---------- */
.hero {
  position: relative; display: grid; min-height: max(620px, min(100svh, 64vw + 160px));
  background: var(--flade); isolation: isolate; overflow: clip;
}
.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Mørkt øverst til menuen, og fotoet løber ud i fladen forneden (i fotoets egen kasse, så overgangen
   også sidder rigtigt, når fotoet er kortere end toppen på telefonen) */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 11, 10, 0.72) 0, rgba(13, 11, 10, 0) 150px);
}
.hero__foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 11, 10, 0) 44%, rgba(13, 11, 10, 0.55) 66%, var(--flade) 97%);
}
.hero__indhold {
  display: grid; align-content: end; justify-items: center; gap: 20px;
  padding: calc(var(--top-hoejde) + 24px) var(--kant) clamp(28px, 5vh, 56px);
}
.hero__logo { width: clamp(236px, 64vw, 420px); margin: 0; }
.hero__bund { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Stående skærm: det høje portræt i sin egen højde øverst, og logoet begynder lige under hagen */
@media (max-aspect-ratio: 4/5) {
  .hero { min-height: 0; }
  .hero__foto { inset: 0 0 auto; aspect-ratio: 2 / 3; }
  .hero__indhold { padding-top: 72vw; }
  .hero__logo { width: min(58vw, 320px); }
}
/* Liggende skærm: fotoet fylder toppen, ansigtet står i de øverste ca. 40 %. Logoet, og under det
   knappen og teaseren side om side, holdes i den nederste del (bredden følger skærmens højde). */
@media (min-aspect-ratio: 4/5) {
  .hero__logo { width: clamp(220px, min(30vw, calc(56svh - 172px)), 420px); }
  .hero__bund { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px 48px; }
}

/* Logoet i lag: placeringen genereres af build.mjs fra billeder.py's manifest */
.logo { position: relative; display: block; width: 100%; }
.logo picture { display: contents; }
.logo img { position: absolute; max-width: none; height: auto; }

/* Teaseren: coveret sat skævt ind med stiplet kant (på vej), den håndskrevne note med tuschcirklen */
.teaser {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 22px; text-decoration: none; color: var(--kridt);
}
.teaser__cover {
  grid-row: 1 / 3; width: clamp(78px, 20vw, 112px); padding: 5px;
  outline: 2px dashed var(--pink); outline-offset: 3px; transform: rotate(-5deg);
  transition: transform 0.35s var(--ud);
}
.teaser--ude .teaser__cover { outline-style: solid; }
.teaser__note { align-self: end; font-size: clamp(18px, 1vw + 12px, 24px); white-space: nowrap; }
.teaser__note .cirkel { --cx: 1.22; }
.teaser__om {
  display: grid; align-self: start; margin-top: 8px; font-size: var(--t-lille); font-weight: 700; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--kridt-2); white-space: nowrap;
}
.teaser__dage { color: var(--kridt); }
.teaser:hover .teaser__cover { transform: rotate(-2deg) scale(1.04); }
.teaser:hover .teaser__om { color: var(--kridt); }

/* ---------- Sektioner ---------- */
.sektion { padding: var(--luft) 0 0; }
.sektion--top { padding-top: calc(var(--top-hoejde) + clamp(40px, 7vw, 96px)); }
.sektion--taet { padding-top: clamp(56px, 7vw, 96px); }
.sektionshoved {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.sektionshoved__tekst { color: var(--kridt-2); max-width: 34em; }
.sidehoved { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
.sidehoved .lead { color: var(--kridt-2); }

/* Sangbogens hæftelinjer: svage vandrette linjer og den lyserøde marginlinje */
.sektion--linjer { position: relative; }
.sektion--linjer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(238, 229, 211, 0.085) 39px 40px);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- Sangbogen ---------- */
.sangbog { position: relative; counter-reset: side; }
.sangbog::before {
  /* marginlinjen */
  content: ''; position: absolute; top: 0; bottom: 0; left: 132px; width: 2px;
  background: var(--pink-svag);
}
.side {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 260px) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(36px, 5vw, 60px) 0; border-top: 1px solid var(--linje);
}
.side:last-child { border-bottom: 1px solid var(--linje); }
.side__dato { display: grid; gap: 6px; padding-right: 18px; text-align: right; }
.side__nr { font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kridt-3); }
.side__dato time {
  display: inline-grid; justify-self: end; font-family: var(--display); font-size: clamp(34px, 3.4vw, 50px); line-height: 1; text-transform: uppercase; color: var(--kridt);
}
.side__dato .side__aar { font-family: var(--tekst); font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.12em; color: var(--kridt-3); margin-top: 6px; }
.side--aktuel .side__dato time { color: var(--pink); }
.side--aktuel .side__dato { gap: 20px; }
.side__ring { position: relative; display: inline-block; padding: 0 0.06em; }
.side__ring .cirkel { --cx: 1.34; --cy: 1.72; }
.side--aktuel .side__aar { margin-top: 18px; }

.cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--flade-3); }
/* Billedet fylder kassen præcis: <picture> får kassens højde, og overflow gør, at et cover, der er en
   anelse højere end bredt (Guinness Brothers er 4069 x 4096), ikke kan strække kassen */
.cover > picture, .andre__cover > picture, .opslag__billede > picture { display: block; width: 100%; height: 100%; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
/* Det, der er ude, står optrukket; det, der er på vej, stiplet. Det aktuelle i fuld farve, resten dæmpet. */
.side .cover { transition: filter 0.4s var(--ud), transform 0.4s var(--ud); }
.side--ude:not(.side--aktuel) .cover { filter: saturate(0.8) brightness(0.86); }
.side--paa-vej .cover { outline: 2px dashed var(--pink); outline-offset: 8px; }
.side:hover .cover, .side:focus-within .cover { filter: none; }
@media (hover: hover) { .side:hover .cover { transform: rotate(-1.5deg); } }
.cover--tom { display: grid; place-items: center; background: transparent; outline: 2px dashed var(--linje-staerk); outline-offset: -2px; }
.side--paa-vej .cover--tom { outline: 2px dashed var(--pink); outline-offset: 8px; }
.cover__tom { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; text-align: center; }
.cover__tom .note { transform: rotate(-8deg); }

.side__tekst { display: grid; gap: 14px; align-content: start; padding-top: 4px; }
.side__titel { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
.side__titel a { text-decoration: none; }
.side__titel a:hover { color: var(--pink-lys); }
/* Hele siden kan trykkes via titlen; knapperne ligger ovenpå */
.side__titel a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.side .knapper, .side .knap { position: relative; z-index: 1; }
.side__tilstand { font-size: var(--t-lille); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.side__tilstand--ude { color: var(--kridt); }
.side__tilstand--ude::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--kridt); vertical-align: 1px; }
.side__tilstand--paa-vej { color: var(--pink); }
.side__tilstand--paa-vej::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; border: 2px dashed var(--pink); vertical-align: 0; }
.side__om { color: var(--kridt-2); }
.side__tekst p:not([class]) { color: var(--kridt-2); max-width: 46ch; }
.side__note {
  position: absolute; z-index: 1; left: calc(132px + clamp(28px, 4vw, 56px) + min(260px, 22vw) - 60px); top: clamp(18px, 2.4vw, 30px);
  transform: rotate(-7deg); white-space: nowrap; pointer-events: none;
}
.side--aktuel .side__note { display: none; }

@media (max-width: 760px) {
  /* Telefonen: datoen på én linje, coveret ved siden af titel, tilstand og note, teksten og knappen under */
  .sangbog::before { display: none; }
  .side {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-areas: 'dato dato' 'cover titel' 'cover tilstand' 'cover note' 'tekst tekst' 'knap knap';
    grid-template-rows: auto auto auto 1fr auto auto; column-gap: 18px; row-gap: 10px;
  }
  .side__dato { grid-area: dato; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 14px; text-align: left; padding: 0 0 6px; }
  .side__dato time { justify-self: start; display: inline-flex; align-items: baseline; gap: 10px; }
  .side__dato .side__aar { margin-top: 0; }
  .side .cover { grid-area: cover; align-self: start; }
  .side__tekst { display: contents; }
  .side__titel { grid-area: titel; align-self: end; font-size: clamp(28px, 8vw, 34px); }
  .side__tilstand { grid-area: tilstand; }
  .side__note { grid-area: note; position: static; justify-self: start; align-self: start; margin-top: 6px; font-size: 15px; white-space: normal; }
  .side__tekst > p:not([class]) { grid-area: tekst; margin-top: 8px; }
  .side .knapper { grid-area: knap; }
  .side--aktuel .side__dato { column-gap: 30px; padding-bottom: 24px; }
  .side--aktuel .side__dato time { gap: 24px; }
  .side--aktuel .side__aar { margin-top: 0; }
  .side__ring .cirkel { --cx: 1.32; --cy: 1.82; }
}

/* ---------- Nyheder: dagbogens sider ---------- */
.opslagsliste { display: grid; }
.opslag {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 200px) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px); align-items: start;
  padding: 28px 0; border-top: 1px solid var(--linje);
}
.opslag:last-child { border-bottom: 1px solid var(--linje); }
.opslag__dato {
  justify-self: end; padding-right: 18px; text-align: right;
  font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kridt-2);
}
.opslag__dato[data-cirkel] { color: var(--pink); }
.opslag__dato .cirkel { --cx: 1.24; --cy: 2.4; }
/* Kvadratisk som coverne i sangbogen, så titlen på et cover ikke skæres over (Rasmus 06-10). Et stående
   foto beskæres lidt over midten, hvor ansigterne sidder, som delingsbilledet i backenden. */
.opslag__billede { aspect-ratio: 1; overflow: hidden; background: var(--flade-3); }
.opslag__billede img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.5s var(--ud); }
.opslag__tekst { display: grid; gap: 10px; }
.opslag__titel { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; text-transform: uppercase; }
.opslag__titel a { text-decoration: none; }
.opslag__titel a::after { content: ''; position: absolute; inset: 0; }
.opslag:hover .opslag__titel a { color: var(--pink-lys); }
.opslag__tekst p { color: var(--kridt-2); }
@media (hover: hover) { .opslag:hover .opslag__billede img { transform: scale(1.04); } }
/* Forsiden: den nyeste stor */
.opslag--stor { grid-template-columns: 132px minmax(0, 1.15fr) minmax(0, 1fr); padding: 36px 0 44px; }
.opslag--stor .opslag__titel { font-size: clamp(34px, 3.8vw, 56px); }
.opslag--stor .opslag__tekst { align-self: center; gap: 16px; }
.opslag--stor .opslag__tekst p { font-size: var(--t-lead); color: var(--kridt); }
@media (max-width: 760px) {
  /* Telefonen: billedet til venstre, titlen og under den datoen (som stempel, ikke som etiket) */
  .opslag, .opslag--stor {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr); grid-template-areas: 'billede titel' 'billede dato' 'billede tekst';
    grid-template-rows: auto auto 1fr; row-gap: 8px;
  }
  .opslag__tekst { display: contents; }
  .opslag__titel { grid-area: titel; }
  .opslag__tekst p { grid-area: tekst; font-size: 16px; }
  .opslag__dato {
    grid-area: dato; justify-self: start; padding: 0; text-align: left;
    font-size: var(--t-lille); font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  }
  .opslag__dato[data-cirkel] { margin: 8px 0 4px 16px; }
  .opslag__dato .cirkel { --cx: 1.3; --cy: 2; }
  .opslag__billede { grid-area: billede; }
  .opslag--stor { grid-template-columns: 1fr; grid-template-areas: 'billede' 'titel' 'dato' 'tekst'; grid-template-rows: auto; }
  .opslag:not(.opslag--stor) .opslag__tekst p { display: none; }
}

/* ---------- Koncerter (listen kommer fra backenden) ---------- */
.jobliste { display: grid; border-top: 1px solid var(--linje); }
.job {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--linje);
}
.job__dato { display: grid; font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; text-transform: uppercase; }
.job__dato span { font-family: var(--tekst); font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.1em; color: var(--kridt-2); }
.job__sted { display: grid; gap: 2px; }
.job__sted strong { font-size: 20px; font-weight: 700; }
.job__sted span { color: var(--kridt-2); }
/* Alle koncerter her er Nicki Jack PowerPop: navnet siger ikke noget nyt */
.job__band { display: none; }
@media (max-width: 600px) { .job { grid-template-columns: 1fr; } }
.tom { display: grid; gap: 12px; justify-items: start; max-width: none; color: var(--kridt-2); padding: 28px 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.tom--stor { display: grid; gap: 14px; padding: 40px clamp(20px, 4vw, 48px); border: 2px dashed var(--linje-staerk); }
.tom--stor .note { justify-self: start; }

/* ---------- Om (forsiden) ---------- */
.om-kort__ramme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.om-kort__billede { position: relative; }
.om-kort__billede picture { transform: rotate(-2deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.om-kort__tekst { display: grid; gap: 24px; justify-items: start; }
.citat { display: grid; gap: 22px; padding-left: 0; }
.citat blockquote { font-size: clamp(19px, 0.8vw + 14px, 23px); line-height: 1.5; font-style: italic; color: var(--kridt); }
.citat blockquote p + p { margin-top: 0.8em; }
.citat blockquote p:first-child::before { content: '»'; color: var(--pink); margin-right: 2px; }
.citat blockquote p:last-child::after { content: '«'; color: var(--pink); margin-left: 2px; }
.citat figcaption { justify-self: start; }
@media (max-width: 800px) { .om-kort__ramme { grid-template-columns: 1fr; } .om-kort__billede { max-width: 420px; } }

/* ---------- Booking ---------- */
.booking {
  position: relative; margin-top: var(--luft); padding: clamp(56px, 8vw, 112px) 0;
  background: var(--flade-2); border-top: 1px solid var(--linje); overflow: clip;
}
.booking__ramme { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.booking__tekst { display: grid; gap: 18px; }
.booking__tekst p { color: var(--kridt-2); font-size: var(--t-lead); }
.booking__kontakt { display: grid; gap: 4px; justify-items: start; }
.booking__kontakt .knap { margin-bottom: 10px; }
.booking__note { margin-bottom: 4px; }
.booking__linje { font-weight: 700; font-size: 19px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.booking__linje:hover { color: var(--pink-lys); text-decoration: underline; }
@media (max-width: 800px) { .booking__ramme { grid-template-columns: 1fr; } }

/* ---------- Sidefod ---------- */
.bund { padding: clamp(56px, 7vw, 88px) 0 28px; border-top: 1px solid var(--linje); }
.booking + .bund { border-top: 0; }
.bund__raekke { display: grid; grid-template-columns: auto 1fr auto; gap: 32px 56px; align-items: start; }
.bund__logo { display: block; width: 150px; }
.bund__menu { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.bund__menu a, .bund__kontakt a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--kridt);
}
.bund__menu a:hover, .bund__kontakt a:hover { color: var(--pink-lys); text-decoration: underline; }
.bund__kontakt { display: grid; justify-items: end; }
.bund__linje {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--linje); font-size: var(--t-lille); color: var(--kridt-2);
}
.bund__linje a { display: inline-flex; align-items: center; min-height: 32px; color: var(--kridt); }
@media (max-width: 800px) {
  .bund__raekke { grid-template-columns: 1fr; }
  .bund__kontakt { justify-items: start; }
}

/* ---------- Musik: singlens side ---------- */
.single__ramme {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: 'cover tekst' 'under tekst' 'andre andre'; grid-template-rows: auto 1fr auto;
  gap: 0 clamp(36px, 6vw, 96px); align-items: start;
}
.single__cover { grid-area: cover; }
.single__tekst { grid-area: tekst; }
.single__under { grid-area: under; display: grid; gap: 24px; padding-top: 64px; }
.single__andre { grid-area: andre; margin-top: clamp(48px, 6vw, 80px); }
.single__cover { position: relative; }
.single__cover .cover { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95); }
.single__cover .cover--tom { box-shadow: none; }
.single__note { position: absolute; right: -8px; bottom: -40px; font-size: clamp(18px, 1vw + 12px, 24px); transform: rotate(-6deg); white-space: nowrap; }
.single__note .cirkel { --cx: 1.28; --cy: 1.84; }
.single__tekst { display: grid; gap: 22px; justify-items: start; }
.single__meta { color: var(--kridt-2); margin-top: -8px; }
.single__tilstand { font-size: var(--t-ui); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.single__tilstand--ude { color: var(--kridt); }
.single__tilstand--paa-vej { color: var(--pink); }
.single__tekst .lead { color: var(--kridt-2); }
.kreditering { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 32px; width: 100%; padding: 20px 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.kreditering dt { font-size: var(--t-lille); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kridt-3); }
.kreditering dd { margin: 4px 0 0; font-weight: 600; }
.single__nyheder { display: grid; gap: 12px; }
.single__nyheder li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 6px 0; }
.single__nyheder a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.single__nyheder time { font-size: var(--t-lille); color: var(--kridt-2); }
.single__andre { display: grid; gap: 20px; width: 100%; padding-top: 28px; border-top: 1px solid var(--linje); }
.andre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.andre a { display: grid; gap: 8px; text-decoration: none; }
.andre__cover { display: block; aspect-ratio: 1; overflow: hidden; background: var(--flade-3); }
.andre__cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.86); transition: filter 0.3s var(--ud); }
.andre a:hover .andre__cover img, .andre a:focus-visible .andre__cover img { filter: none; }
.andre__kort--paa-vej .andre__cover { outline: 2px dashed var(--pink); outline-offset: -2px; }
.andre__kort--paa-vej .andre__cover img { filter: none; }
.andre__tom { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; text-align: center; background: var(--flade); }
.andre__tom .note { font-size: 14px; transform: rotate(-8deg); }
.andre__titel { font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px); line-height: 1; text-transform: uppercase; color: var(--kridt); }
.andre a:hover .andre__titel { color: var(--pink-lys); }
.andre__tilstand { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kridt-2); }
.andre__kort--paa-vej .andre__tilstand { color: var(--pink); }
@media (max-width: 800px) {
  .single__ramme { grid-template-columns: 1fr; grid-template-areas: 'cover' 'tekst' 'under' 'andre'; grid-template-rows: auto; }
  .single__under { padding-top: 32px; }
  .single__cover { max-width: 460px; }
  .single__note { right: 12px; bottom: -34px; }
  .single__note .cirkel { --cx: 1.16; }
  .single__tekst { padding-top: 20px; }
}


/* ---------- Nyhed ---------- */
.artikel__ramme { max-width: calc(880px + 2 * var(--kant)); display: grid; gap: 28px; }
.artikel__hoved { display: grid; gap: 18px; }
.artikel__dato { color: var(--kridt-2); }
.artikel__hoved .lead { color: var(--kridt); }
.artikel__billede { max-width: 720px; }
/* Stående fotos (selfies fra studiet) fylder ikke hele skærmen: højden styrer, bredden følger med */
.artikel__billede img { width: auto; max-width: 100%; max-height: min(640px, 80vh); }
.artikel__tekst { display: grid; gap: 22px; justify-items: start; max-width: 66ch; }
.artikel__tekst > p { color: var(--kridt-2); }
/* Et billede i teksten (fx skærmbilledet af Nikolaj Steens svar): klistret ind i sangbogen som et foto, let skævt */
.artikel__indsat { margin: 6px 0; max-width: min(100%, 400px); transform: rotate(-1.5deg); }
.artikel__indsat img { width: 100%; height: auto; border: 1px solid var(--linje-staerk); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.artikel__single { font-weight: 600; }

/* ---------- Om Nicki ---------- */
.om__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.om__billede img { width: 100%; }
.om__tekst { display: grid; gap: 22px; }
.om__tekst p:not(.lead) { color: var(--kridt-2); }
.citat--stor { max-width: 900px; margin: clamp(64px, 9vw, 128px) auto 0; }
.citat--stor blockquote { font-size: clamp(22px, 1.4vw + 14px, 30px); }
.om__galleri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(64px, 9vw, 128px); align-items: start; }
.om__galleri figure { display: grid; gap: 14px; }
.om__galleri figure:nth-child(1) { transform: rotate(-1.5deg); }
.om__galleri figure:nth-child(2) { transform: rotate(1deg); margin-top: 48px; }
.om__galleri figure:nth-child(3) { transform: rotate(-0.5deg); margin-top: 16px; }
.om__galleri img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.om__rb { margin-top: clamp(48px, 6vw, 80px); color: var(--kridt-2); }
.om__rb a { color: var(--kridt); font-weight: 700; }
@media (max-width: 800px) {
  .om__top { grid-template-columns: 1fr; }
  .om__galleri { grid-template-columns: 1fr 1fr; }
  .om__galleri figure:nth-child(2) { margin-top: 24px; }
  .om__galleri figure:nth-child(3) { display: none; }
}

/* ---------- Kontakt ---------- */
.kontakt__ramme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.kontakt__info { display: grid; gap: 22px; }
.kontakt__info .lead { color: var(--kridt-2); }
.kontakt__linjer { display: grid; gap: 4px; }
.kontakt__linjer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 700; text-decoration: none; }
.kontakt__linjer a:hover { color: var(--pink-lys); text-decoration: underline; }
.formular { display: grid; gap: 22px; padding: clamp(24px, 4vw, 44px); background: var(--flade-2); border: 1px solid var(--linje); }
.formular__fejl:empty { display: none; }
.formular__fejl { padding: 14px 16px; border: 2px solid var(--pink); color: var(--kridt); font-weight: 600; }
.felter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.felt { display: grid; gap: 6px; align-content: start; }
.felt--hel { grid-column: 1 / -1; }
.felt__navn { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.felt input, .felt select, .felt textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--linje-staerk); border-radius: 3px;
  background: var(--flade); color: var(--kridt); font: 400 var(--t-broed)/1.4 var(--tekst);
  transition: border-color 0.2s;
}
.felt select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--kridt) 50%), linear-gradient(135deg, var(--kridt) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.felt textarea { resize: vertical; min-height: 140px; }
.felt input:hover, .felt select:hover, .felt textarea:hover { border-color: var(--kridt-2); }
.felt input:focus-visible, .felt select:focus-visible, .felt textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; border-color: var(--pink); }
.felt [aria-invalid="true"] { border-color: var(--pink); }
.felt input[type="date"] { color-scheme: dark; }
.felt__hjaelp { font-size: var(--t-lille); color: var(--kridt-2); }
.felt__fejl { font-size: var(--t-lille); font-weight: 700; color: var(--pink-lys); }
.felt__fejl:empty { display: none; }
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__samtykke { font-size: var(--t-lille); color: var(--kridt-2); }
.tak { display: grid; gap: 18px; justify-items: start; }
.tak:focus { outline: none; }
/* Tak for beskeden: dialogen efter formularen (site.js) med én vej videre, til forsiden */
.takboks {
  width: min(520px, calc(100% - 32px)); max-width: none; margin: auto; padding: clamp(28px, 6vw, 44px);
  border: 1px solid var(--linje-staerk); border-radius: 3px; background: var(--flade-2); color: var(--kridt);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.takboks::backdrop { background: rgba(13, 11, 10, 0.85); }
.takboks p { margin: 14px 0 28px; color: var(--kridt-2); overflow-wrap: break-word; }
@media (max-width: 860px) { .kontakt__ramme { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .felter { grid-template-columns: 1fr; } }

/* ---------- Reelen (videoer.py) ----------
   Under coveret i coverets fulde bredde og med coverets skygge, så de to står som en stak (Rasmus 10-10: en
   smal, skæv reel med billedtekst så kastet ind ud). Rammen er 4:5: stillbilledet fylder den, og ved tryk
   spiller den lodrette video midt i samme ramme, så intet flytter sig. */
.reel { position: relative; margin: 0; width: 100%; }
.reel__start, .reel video {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.reel__start { overflow: hidden; color: var(--flade); }
.reel__start > picture { display: block; width: 100%; height: 100%; }   /* ellers får billedet ikke rammens højde, og udsnittet virker ikke */
.reel__start:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.reel__start img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 0.5s var(--ud); }
.reel__start:hover img { transform: scale(1.03); }
.reel video { object-fit: contain; }
.reel__knap {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%; background: var(--pink); color: var(--flade);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); transition: background-color 0.2s; pointer-events: none;
}
.reel__knap svg { width: 26px; height: 26px; margin-left: 4px; }
.reel__start:hover .reel__knap { background: var(--pink-lys); }
.reel__tid {
  position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; background: rgba(13, 11, 10, 0.78);
  color: var(--kridt); font-size: var(--t-lille); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- Tekstsider ---------- */
.tekstside { max-width: calc(760px + 2 * var(--kant)); display: grid; gap: 18px; }
.tekstside h2 { margin-top: 24px; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.tekstside p { color: var(--kridt-2); }
.tekstside .lead { color: var(--kridt); }
.tekstside .dato { font-size: var(--t-lille); margin-top: 16px; }

/* Større trykflader på touchskærme */
@media (pointer: coarse) {
  .bund__linje a { min-height: 44px; }
}

/* Sideskift: siderne toner over i hinanden (kun hvor browseren kan, og ikke ved »reducér bevægelse») */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-cirkel] .cirkel path { stroke-dashoffset: 0; }
}

@media print {
  body { background: #fff; color: #000; }
  .top, .mobilmenu, .booking, .bund__menu, .spring-til, .hero__foto, .cirkel { display: none !important; }
  .hero { min-height: 0; }
  .hero::after { display: none; }
  .display-1, .display-2, .display-3, .side__titel, .opslag__titel { color: #000; }
  a { color: #000; }
}

/* Genereret af build.mjs: logoets lag */
.logo { aspect-ratio: 3886 / 3950; }
.logo__nicki { left: 1.647%; top: 4.253%; width: 60.499%; }
.logo__jack { left: 0%; top: 31.013%; width: 62.301%; }
.logo__powerpop { left: 2.599%; top: 62.709%; width: 43.901%; }
.logo__lyn { left: 55.533%; top: 0%; width: 44.467%; }