/* ==========================================================================
   TRÆSMEDEN — Hans Henning Pedersen
   Ét stylesheet til hele hjemmesiden, dansk som engelsk.

   Motivet er "samlingen": den revne i træet, som holdes sammen af indlagte
   sommerfuglenøgler — taget fra værket "Form med nøgler". Den går igen som
   overgang mellem alle sektioner.

   Filerne:  index.html (dansk) · en/index.html (engelsk)
             assets/style.css · assets/app.js · assets/img/
   ========================================================================== */

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

body, h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


/* --- Tokens -------------------------------------------------------------- */

:root {
  --void:      #100d0a;   /* næsten sort, varm */
  --bark:      #191410;   /* en anelse lysere */
  --cream:     #efe6d8;
  --cream-dim: #a08f79;
  --ember:     #c8823c;   /* varm eg — accent */
  --ember-dim: #8a5a2b;
  --seam-line: rgba(239, 230, 216, 0.16);

  --light:     #f0e9dc;   /* det lyse "udstillingsrum" */
  --light-ink: #241d17;
  --light-dim: #6f6152;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --page: 78rem;
  --gut:  clamp(1.25rem, 4vw, 3.5rem);
}


/* --- Grundtypografi ------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; }

/* Små etiketter — sans, spærret, versaler */
.label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember);
}

.wrap { width: min(100% - (var(--gut) * 2), var(--page)); margin-inline: auto; }
.narrow { max-width: 42rem; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }


/* --- Årringe: meget svag baggrundstekstur --------------------------------- */

.rings { position: relative; }

.rings::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 15% 40%,
      transparent 0 26px, rgba(239, 230, 216, 0.022) 26px 27px);
  mask-image: radial-gradient(ellipse at 15% 40%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 15% 40%, #000 0%, transparent 68%);
}


/* --- Toplinje: læsefremdrift som en åre ---------------------------------- */

.grain {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--ember-dim), var(--ember));
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 60;
}


/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gut);
  transition: background-color 500ms var(--ease), backdrop-filter 500ms var(--ease);
}

.nav.is-stuck {
  background: rgba(16, 13, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav__mark {
  font-size: 1.15rem; letter-spacing: 0.02em; text-decoration: none;
  line-height: 1;
}
.nav__mark small {
  display: block; margin-top: 0.35rem;
  font-family: var(--sans); font-size: 0.6rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-dim);
}

.nav__links {
  display: flex; gap: clamp(1rem, 2.5vw, 2.25rem);
  font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.nav__links a { text-decoration: none; color: var(--cream-dim); transition: color 300ms; }
.nav__links a:hover { color: var(--cream); }

/* Sprogskifter DA | EN */
.nav__lang {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--cream-dim);
}

.nav__lang a { color: var(--cream-dim); text-decoration: none; transition: color 300ms; }
.nav__lang a:hover { color: var(--ember); }
.nav__lang [aria-current] { color: var(--cream); }
.nav__lang .sep { color: rgba(239, 230, 216, 0.25); }

/* På telefon falder menuen ned på egen linje og kan svirpes vandret,
   i stedet for at forsvinde bag en burgerknap. Sprogskifteren bliver
   oppe ved navnet. */
@media (max-width: 46rem) {
  .nav { flex-wrap: wrap; padding-block: 0.8rem; }

  .nav__mark  { order: 1; }
  .nav__lang  { order: 2; }
  .nav__links { order: 3; }

  .nav__links {
    width: 100%;
    margin-top: 0.65rem;
    gap: 1.15rem;
    font-size: 0.68rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }
}


/* --- SAMLINGEN: revnen med sommerfuglenøgler ------------------------------ */
/* Motivet er taget direkte fra værket "Form med nøgler": en revne i træet,
   der er lukket med indlagte nøgler i kontrasttræ.                          */

.seam {
  position: relative;
  height: 46px;
  margin-block: clamp(3rem, 8vw, 7rem);
}

.seam__crack { display: block; width: 100%; height: 46px; }

.seam__crack path {
  fill: none;
  stroke: var(--seam-line);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

/* Selve nøglen: bred foroven og forneden, smal på midten */
.seam__key {
  position: absolute;
  top: 50%; left: var(--x);
  width: 17px; height: 34px;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background: linear-gradient(155deg, var(--ember) 0%, var(--ember-dim) 55%, #6b451f 100%);
  clip-path: polygon(0 0, 100% 0, 68% 50%, 100% 100%, 0 100%, 32% 50%);
  opacity: 0.92;
}

/* Variant til det lyse afsnit */
.seam--light .seam__crack path { stroke: rgba(36, 29, 23, 0.22); }
.seam--light .seam__key {
  background: linear-gradient(155deg, #a9702f 0%, #7d4f22 60%, #5c3817 100%);
}


/* --- Forsidebillede ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: drift 26s var(--ease) forwards;
}

@keyframes drift {
  from { transform: scale(1.14); }
  to   { transform: scale(1.0); }
}

/* Mørkt slør, så typografien altid kan læses oven på fotoet */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--void) 2%, rgba(16,13,10,0.55) 38%, rgba(16,13,10,0.15) 70%),
    linear-gradient(to right, rgba(16,13,10,0.75), transparent 62%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: min(100% - (var(--gut) * 2), var(--page));
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}

.hero__title {
  font-size: clamp(3.2rem, 12.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin-block: 1.4rem 1.6rem;
}

.hero__title em {
  display: block;
  font-style: italic;
  font-size: 0.42em;
  letter-spacing: -0.02em;
  color: var(--cream-dim);
  margin-top: 0.5rem;
}

.hero__lede {
  max-width: 30rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: rgba(239, 230, 216, 0.86);
}

.hero__cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.6rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-dim);
}

.hero__cue span {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(var(--ember), transparent);
  animation: fall 2.4s var(--ease) infinite;
}

@keyframes fall {
  0%   { transform: scaleY(0); transform-origin: 0 0; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: 0 0; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: 0 100%; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: 0 100%; opacity: 0; }
}


/* --- Statement ----------------------------------------------------------- */

.statement { padding-block: clamp(1rem, 4vw, 3rem); }

.statement p {
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 3.1rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.statement p + p { margin-top: 1.5rem; }

.statement .dim { color: var(--cream-dim); }
.statement .em  { font-style: italic; color: var(--ember); }

.statement__sig {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-dim);
}


/* --- Fuldbredde-billeder med parallakse ---------------------------------- */

.band {
  position: relative;
  height: clamp(60vh, 78vh, 46rem);
  overflow: hidden;
}

.band__img {
  position: absolute; inset: -18% 0;
  width: 100%; height: 136%;
  object-fit: cover;
  will-change: transform;
}

.band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,13,10,0.9), rgba(16,13,10,0.1) 60%);
}

.band__quote {
  position: absolute; inset: auto 0 0 0;
  padding: 0 var(--gut) clamp(2.5rem, 7vw, 5rem);
}

.band__quote blockquote {
  width: min(100%, var(--page)); margin-inline: auto;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  line-height: 1.18; letter-spacing: -0.025em;
  font-style: italic;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}

.band--tall { height: clamp(70vh, 92vh, 54rem); }


/* --- VÆRKER: lyst udstillingsrum midt i mørket ---------------------------- */

.gallery {
  background: var(--light);
  color: var(--light-ink);
  padding-block: clamp(4rem, 10vw, 8rem);
}

.gallery .label { color: var(--ember-dim); }

.gallery__head {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.gallery__head h2 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  margin-top: 0.7rem;
}

.gallery__head p {
  max-width: 24rem; color: var(--light-dim);
  font-size: 0.98rem; line-height: 1.6;
}

/* Asymmetrisk net — værkerne har bevidst forskellig vægt */
.grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 2rem);
  grid-template-columns: repeat(6, 1fr);
  align-items: start;   /* hver flise beholder sin egen højde */
}

.tile { grid-column: span 6; }

@media (min-width: 48rem) {
  .tile        { grid-column: span 3; }
  .tile--wide  { grid-column: span 4; }
  .tile--slim  { grid-column: span 2; }
  .tile--half  { grid-column: span 3; }
  .tile--full  { grid-column: span 6; }
}

.tile button {
  display: block; width: 100%; text-align: left;
}

/* Den hvide "plade": værkfotoerne er taget på hvid bund, så pladen og
   fotoet flyder sammen til ét oplyst felt. */
.tile__frame {
  position: relative;
  overflow: hidden;
  background: #fff;
  aspect-ratio: var(--ar, 4 / 5);
  box-shadow: 0 1px 2px rgba(36,29,23,0.06), 0 18px 40px -24px rgba(36,29,23,0.35);
}

.tile__frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 900ms var(--ease);
}

.tile:hover .tile__frame img,
.tile button:focus-visible .tile__frame img { transform: scale(1.045); }

/* Forstørrelsesglas-mærke i hjørnet */
.tile__zoom {
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(36,29,23,0.72); color: #fff;
  font-size: 0.9rem; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.tile:hover .tile__zoom { opacity: 1; transform: none; }

.tile__cap {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-top: 0.9rem;
  font-family: var(--sans); font-size: 0.76rem;
  letter-spacing: 0.04em; color: var(--light-dim);
}

.tile__cap strong {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0; color: var(--light-ink);
}


/* --- PROCESSEN: fastlåst billede, tekst der ruller forbi ------------------ */

.process { padding-block: clamp(3rem, 8vw, 6rem); }

.process__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }

/* Spalten strækkes over hele rækkens højde (grid'ets standard). Det er
   præcis den plads, det klæbende billede indeni har at klæbe i — sætter
   man align-items:start her, falder sticky sammen og virker ikke. */
@media (min-width: 60rem) {
  .process__grid { grid-template-columns: 1fr 1fr; }
}

.process__col { position: relative; }

.process__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bark);
}

@media (min-width: 60rem) {
  .process__media { position: sticky; top: 14vh; aspect-ratio: 3 / 4; }
}

.process__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1100ms var(--ease), transform 1600ms var(--ease);
}

.process__media img.is-active { opacity: 1; transform: none; }

.process__steps { display: grid; }

.step {
  padding-block: clamp(2rem, 6vw, 4rem);
  border-top: 1px solid var(--seam-line);
  opacity: 0.32;
  transition: opacity 700ms var(--ease);
}

.step.is-active { opacity: 1; }

@media (min-width: 60rem) {
  .step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
}

.step__no {
  font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.28em; color: var(--ember);
  margin-bottom: 1rem;
}

.step h3 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem);
  margin-bottom: 1.1rem;
}

.step p { color: rgba(239,230,216,0.7); max-width: 34ch; }


/* --- FILM: to tv-besøg i værkstedet -------------------------------------- */
/* Kortene er blot links ud af huset. Stillbillederne ligger lokalt, så
   siden stadig ikke henter noget fra YouTube, før man selv klikker.        */

.films { padding-block: clamp(3rem, 8vw, 6rem); }

.films__head {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.films__head h2 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  margin-top: 0.7rem;
}

.films__head p {
  max-width: 26rem; color: var(--cream-dim);
  font-size: 0.98rem; line-height: 1.6;
}

.films__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

@media (min-width: 48rem) {
  .films__grid { grid-template-columns: 1fr 1fr; }
}

.film { display: block; text-decoration: none; }

.film__frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bark);
  border: 1px solid rgba(239, 230, 216, 0.1);
}

/* Stillbillederne kommer fra tv og er køligere end resten af siden.
   De dæmpes, indtil man peger på dem — så vågner de op. */
.film__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.8);
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}

.film:hover .film__frame img,
.film:focus-visible .film__frame img { transform: scale(1.04); filter: none; }

.film__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,13,10,0.7), rgba(16,13,10,0.04) 62%);
}

.film__play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(3.2rem, 6vw, 4.2rem); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 13, 10, 0.55);
  border: 1px solid rgba(239, 230, 216, 0.35);
  transform: translate(-50%, -50%);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease),
              transform 500ms var(--ease);
}

/* Trekanten — sat med kanter, så der ikke skal et ikon til */
.film__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 0.2em;
  border-left: 0.8rem solid var(--cream);
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  transition: border-left-color 400ms var(--ease);
}

.film:hover .film__play,
.film:focus-visible .film__play {
  background: var(--ember);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.07);
}

.film:hover .film__play::before,
.film:focus-visible .film__play::before { border-left-color: var(--void); }

.film__title {
  margin-top: 1.1rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  line-height: 1.25; letter-spacing: -0.02em;
  transition: color 400ms var(--ease);
}

.film:hover .film__title { color: var(--ember); }

.film__src {
  margin-top: 0.55rem;
  font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim);
}

.film__src .sep { color: rgba(239, 230, 216, 0.25); padding-inline: 0.45rem; }
.film__src .cue { color: var(--ember-dim); }


/* --- UDSTILLINGER: en lodret samling ------------------------------------- */

.cv { padding-block: clamp(3rem, 8vw, 6rem); }

.cv__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.cv__head h2 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  margin-top: 0.7rem;
}

/* Den lodrette revne, som listen hænger på */
.rail {
  --rail-pad: clamp(2rem, 5vw, 4rem);
  position: relative;
  padding-left: var(--rail-pad);
}

.rail::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--seam-line);
}

/* Nøgle på tværs af den lodrette revne — den samler årtierne */
.rail__key {
  position: absolute;
  left: calc(var(--rail-pad) * -1);
  top: 50%;
  width: 34px; height: 17px;
  transform: translate(-50%, -50%);
  background: linear-gradient(155deg, var(--ember) 0%, var(--ember-dim) 55%, #6b451f 100%);
  clip-path: polygon(0 0, 50% 32%, 100% 0, 100% 100%, 50% 68%, 0 100%);
  opacity: 0.9;
}

.era {
  position: relative;
  font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ember);
  padding-block: 2.5rem 1.25rem;
}

.era:first-child { padding-top: 0; }

.entry {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 0 1.25rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(239,230,216,0.07);
}

.entry__yr {
  font-family: var(--sans); font-size: 0.8rem;
  color: var(--cream-dim); padding-top: 0.3em;
  font-variant-numeric: tabular-nums;
}

.entry__pl { font-size: 1.02rem; line-height: 1.45; }
.entry__pl em { font-style: italic; color: var(--ember); }
.entry__pl span {
  display: block;
  font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.05em; color: var(--cream-dim);
  margin-top: 0.15rem;
}

/* Foldes ud med knappen nedenfor */
.cv__more { overflow: hidden; }
.cv__more[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: 2.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(239,230,216,0.22);
  font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream);
  transition: border-color 400ms, background-color 400ms, color 400ms;
}

.btn:hover { border-color: var(--ember); color: var(--ember); }


/* --- Samlinger ----------------------------------------------------------- */

.holdings {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--seam-line);
}

.holdings ul {
  display: grid; gap: 0.5rem 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin-top: 1.5rem;
  color: var(--cream-dim);
  font-size: 0.98rem;
}


/* --- Afslutning og fod --------------------------------------------------- */

.outro {
  position: relative;
  min-height: 88vh;
  display: grid; place-items: center;
  text-align: center;
  overflow: hidden;
}

.outro__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Beskærer opad, så der er luft over hovedet i alle skærmformater */
  object-position: 50% 18%;
}

.outro::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16,13,10,0.72);
}

.outro__in { position: relative; z-index: 2; padding: var(--gut); }

/* Kun den store afsluttende linje — ikke etiketten over den */
.outro__q {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.4rem);
  line-height: 1.05; letter-spacing: -0.035em; font-style: italic;
  margin-block: 1.5rem 1.25rem;
}

.outro__note {
  max-width: 30ch; margin-inline: auto;
  color: rgba(239, 230, 216, 0.72);
  font-size: 1.02rem; line-height: 1.6;
}

.outro__mail {
  display: inline-block; margin-top: 2rem;
  font-family: var(--sans); font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--ember); text-decoration: none;
  border-bottom: 1px solid rgba(200,130,60,0.45);
  padding-bottom: 0.35rem;
}

.outro__mail:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Adresse og telefon — egen linje under e-mailen */
.outro__details {
  display: block;
  width: fit-content;
  margin: 2.25rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(239, 230, 216, 0.14);
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
}

.outro__details a { color: var(--cream-dim); text-decoration: none; }
.outro__details a:hover { color: var(--ember); }

.outro__details .sep { color: rgba(239, 230, 216, 0.28); padding-inline: 0.5rem; }

@media (max-width: 34rem) {
  .outro__details .sep { display: block; height: 0; overflow: hidden; }
}

.foot {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  font-family: var(--sans); font-size: 0.75rem;
  color: var(--cream-dim);
}

.foot__in {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
}

.foot a { color: var(--cream-dim); text-decoration: none; }
.foot a:hover { color: var(--ember); }


/* --- Lysbord (klik på et værk) ------------------------------------------- */

.lb {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 8, 6, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 450ms;
}

.lb.is-open { opacity: 1; visibility: visible; }

.lb__fig { max-width: min(92vw, 68rem); }

.lb__fig img {
  max-height: 78vh; width: auto; margin-inline: auto;
  background: #fff;
  transform: scale(0.96);
  transition: transform 550ms var(--ease);
}

.lb.is-open .lb__fig img { transform: none; }

.lb__cap {
  margin-top: 1.25rem; text-align: center;
  font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--cream-dim);
}
.lb__cap strong {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 400; color: var(--cream); margin-bottom: 0.25rem;
}

.lb__x {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(239,230,216,0.2);
  font-size: 1.1rem;
}
.lb__x:hover { border-color: var(--ember); color: var(--ember); }


/* --- Indtoning ved scroll ------------------------------------------------ */

/* Skjules KUN når JavaScript er i gang (html får klassen .js øverst i
   dokumentet). Slår scriptet fejl, eller er det slået fra, står hele
   siden der bare med det samme i stedet for at være usynlig. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }


/* --- Reduceret bevægelse -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__media img { animation: none; transform: none; }
  .band__img { position: absolute; inset: 0; height: 100%; transform: none !important; }
  .process__media img { transform: none; }
}