/* Layout: én skærm, ingen scroll, minimalt. Én samlet kolonne midt på siden: foto, navn, tekst.
   Alt er målt i em på .side, og karrusel.js skalerer det, så det altid passer i højden. */
:root {
  --okker: #e8e2d6;       /* sidens flade: lys væg, med svag gradient på body */
  --umbra: #2a2019;       /* blæk */
  --sienna: #b9824a;      /* rå sienna, bag fotoene */
  --tekst: 'Sofia Sans', 'Helvetica Neue', Arial, sans-serif;
  --navn: 'Sofia Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--okker); color: var(--umbra); font-family: var(--tekst); line-height: 1.45;
  background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,0) 40%, rgba(42,32,25,.05)); }

.side {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 20px;
  font-size: 18px; /* sættes af karrusel.js */
}
.indhold { width: 100%; max-width: 30em; }

/* Karrusel: kun fotos, langsom overtoning */
.vindue {
  position: relative; overflow: hidden; background: var(--sienna);
  width: min(100%, 50vh); max-width: 100%; aspect-ratio: 16 / 9; margin-bottom: 2em;
}
.slide { position: absolute; inset: 0; opacity: 0; }
.slide.aktiv { opacity: 1; }

/* Skiftet: som en pære der skratter. Mørket lægges over, billedet byttes midt i, lyset skratter tilbage. */
.vindue::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--umbra); opacity: 0;
}
.vindue.skrat::after { animation: skrat 900ms steps(1, end) forwards; }
@keyframes skrat {
  0%   { opacity: 0; }
  6%   { opacity: .85; }
  10%  { opacity: .1; }
  16%  { opacity: .95; }
  20%  { opacity: .3; }
  27%  { opacity: 1; }
  52%  { opacity: 1; }
  57%  { opacity: .25; }
  61%  { opacity: .9; }
  66%  { opacity: 0; }
  71%  { opacity: .6; }
  75%  { opacity: 0; }
  86%  { opacity: .2; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}
.slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply;
}

.hoved { display: flex; flex-direction: column; align-items: flex-start; }
/* Placering og hældning pr. tekststykke kommer fra content.json (flyt() i index.php) */
[data-flyt] { transform-origin: 0 100%; }
.navn {
  transform-origin: 100% 100%;

  font-family: var(--navn); font-weight: 300;
  font-size: 2.5em; line-height: 1.05; letter-spacing: -.01em;
}
.etiket-stor {
  display: block; margin-top: 1em;
  font-size: .7em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--umbra);
}
.fokus {
  margin-top: .3em;
  font-size: 1.35em; font-weight: 300; line-height: 1.2;
  text-wrap: balance;
}
.fokus em { font-style: normal; }

.credits { margin-top: 2.2em; display: grid; gap: 1em; }
.credit { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 1em; }
.credit h2 {
  font-size: .7em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--umbra); padding-top: .35em;
}
.credit p { font-size: 1em; line-height: 1.5; }
.punkter { display: grid; gap: .05em; }
.credit .n { white-space: nowrap; }
.credit .hvad { color: var(--umbra); padding-left: .35em; }
.credit a { color: var(--umbra); text-decoration: none; }
.credit a:hover, .credit a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Smal skærm: etiketter over navnene */
@media (max-width: 560px) {
  .navn { margin-left: 1.25em; } /* navnet er rykket til venstre; på mobil stikker det kun lidt ud */
  .credit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credit h2 { padding-top: 0; }
  .credits { gap: .8em; }
}

@media (prefers-reduced-motion: reduce) {
  .vindue.skrat::after { animation: none; }
}