/* Hannes Atelier — Hovedstilark
   Design: Arkitekturen (Variant C)
   Typografi: Anton til overskrifter, Atkinson Hyperlegible til brødtekst.
   Farver: Dynamisk lys baggrund baseret på det aktive værk. */

@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("assets/fonts/atkinson-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("assets/fonts/atkinson-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("assets/fonts/atkinson-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lys: #faf6f0;
  --lys-zone: #f4efe7;
  --blaek: #1a1613;
  --accent: #1a1613;
  --skift: 1.35s cubic-bezier(.22, 1, .36, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Værkets indgang. Bruges KUN af .ophæng (kunstzonens billede).
     Var 1.15s cubic-bezier(.22, 1, .36, 1) - men den kurve har y = 1 i begge
     kontrolpunkter, altså den skarpest mulige ease-out: halvdelen af
     bevægelsen var overstået efter 146 ms, tre fjerdedele efter 260 ms, og
     resten krøb over det sidste sekund. Målt. Det er et flik, ikke en
     glidning. Denne kurve har 50 % af bevægelsen ved 35 % af tiden og bløde
     ender i begge retninger, så værket glider ind i ét roligt træk. */
  --komme-ind: .85s cubic-bezier(.4, 0, .2, 1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  background-color: var(--lys);
  color-scheme: light;
  transition: background-color var(--skift);
}

html.scroll-snap {
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  font-family: "Atkinson", system-ui, -apple-system, sans-serif;
  color: var(--blaek);
  background-color: var(--lys);
  transition: background-color var(--skift), color var(--skift);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.hop {
  position: absolute;
  left: .8rem;
  top: -4rem;
  z-index: 60;
  background: var(--lys);
  color: var(--blaek);
  padding: .5rem .9rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--blaek);
  transition: top .2s ease;
}
.hop:focus {
  top: .8rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blaek);
  outline-offset: 3px;
}

/* Fast navigation */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(.7rem, 2vw, 1.1rem) clamp(.9rem, 3.2vw, 2.2rem);
  background: color-mix(in srgb, var(--lys) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--blaek) 8%, transparent);
  font-size: .95rem;
  transition: background-color var(--skift);
}

.maerke {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--blaek);
  text-decoration: none;
}
.maerke span {
  display: block;
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(.7rem, 1.8vw, 1.6rem);
}
.top nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}
.top nav a:hover,
.top nav a:focus-visible,
.top nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

@media (max-width: 40rem) {
  .top {
    font-size: .8rem;
    padding: .8rem .9rem;
  }
  .top nav {
    gap: .55rem;
  }
}

/* Åbningssektion (hero) */
.aabning {
  min-height: 100dvh;
  scroll-snap-align: start;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(4.8rem, 10vh, 6.5rem) clamp(.9rem, 3.2vw, 2.2rem) clamp(2rem, 5vh, 3rem);
  /* Samme header-rydning som .kunst-zone og .skilt-zone, og af samme grund:
     luften i toppen er i vh, men headeren er høj i PIXELS. Ved 768 px højde
     giver 10vh kun 77 px mod en header på ca. 82 px, så feltet indholdet
     centreres i starter oppe BAG nav'en - og zone-tag'et lagde sig 18 px fra
     headerens underkant. Heroen var den eneste zone der manglede rydningen.
     --top-h måles af faelles.js ved load, resize og når Anton er indlæst. */
  padding-top: max(clamp(4.8rem, 10vh, 6.5rem), calc(var(--top-h, 5.2rem) + .7rem));
  gap: clamp(1.4rem, 3.2vw, 2.6rem);
}
@media (min-width: 60rem) {
  .aabning {
    /* Tekst og foto står som ÉT centreret par: lige meget luft udenom
       begge og en styret afstand imellem. Før fyldte kolonnerne hele
       bredden (1.1fr/1fr): teksten klæbede til venstre kant, fotoet
       svømmede midt i sin egen kolonne, og midten blev et stort hvidt
       hul (Lucas' iagttagelse 8/9-2026 på bred skærm). */
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: clamp(3rem, 8vw, 10rem);
  }
  /* Auto-kolonner vokser med indholdet - loftet holder tekstsøjlen læsbar. */
  .entre-tekst {
    max-width: 34rem;
  }
}

.zone-tag {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  /* .64 er ikke et skøn. Se noten "Dæmpet tekst: .64 er bunden" nederst i
     filen - under den falder kontrasten under WCAG AA på værkernes kulører. */
  opacity: .64;
  border-bottom: 1px solid color-mix(in srgb, var(--blaek) 25%, transparent);
  padding-bottom: .45rem;
  width: fit-content;
}

.aabning h1 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3.4rem, 8.4vw, 6.8rem);
  line-height: 1.12;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  letter-spacing: -.02em;
}
.aabning h1 span {
  display: block;
}

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  max-width: 30rem;
  margin: 0 0 1.4rem;
  line-height: 1.42;
}
.ned {
  font-size: .95rem;
  opacity: .7;
  margin: 0;
}
.ned a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.entre-foto {
  margin: 0;
  width: 100%;
  max-width: 32rem;
  justify-self: center;
  /* Ingen overflow: hidden her. Den klippede billedets box-shadow af ved
     figurens kant, så der stod en svag lys kasse bag billedteksten. Billedet
     har ingen transform-animation, så der er intet at klippe. */
}
.entre-foto img {
  display: block;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  height: min(74dvh, 46rem);
  object-fit: contain;
  box-shadow: 0 20px 45px -15px color-mix(in srgb, var(--blaek) 22%, transparent);
}
@media (max-width: 59.99rem) {
  .entre-foto img {
    height: auto;
    max-height: 65dvh;
  }
}

/* Lave vinduer på brede skærme - først og fremmest den klassiske bærbare på
   1366x768. Header-rydningen ovenfor flytter indholdet fri af nav'en, men
   heroen fylder stadig hver eneste pixel: tekstsøjlen måler ca. 608 px og
   fotoet med billedtekst ca. 600 px, mod ca. 636 px tilgængelig plads. Med så
   lidt luft ser midten sammenklemt ud, uanset hvor pænt den er centreret.
   Begge søjler skal derfor ned, ikke kun den ene: skruer man kun overskriften
   ned, bliver fotoet det høje af de to, og heroen fylder præcis lige så meget.
   Kun HØJDEN er betinget - en telefon i portræt er over 800 px og røres ikke,
   og min-width holder telefoner i landskab (under 60rem) på deres eget layout.
   Denne blok skal ligge EFTER reglerne den ændrer: media queries hæver ikke
   specificiteten, så .entre-foto img ovenfor ville ellers vinde. */
@media (max-height: 800px) and (min-width: 60rem) {
  .aabning h1 { font-size: clamp(3.4rem, 6.4vw, 5.4rem); }
  .entre-foto img { height: min(64dvh, 46rem); }
}

.entre-foto figcaption,
.slut-foto figcaption,
.om-foto figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  opacity: .7;
}

/* =========================================================
   Arkitektonisk Gallerirum (Variant C — to-zonet split)
   ========================================================= */
.rum {
  min-height: 100dvh;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  padding: 0;
  overflow: hidden;
}

/* Zone 1: Kunstzonen (det store værk) */
.kunst-zone {
  background-color: var(--lys);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4.4rem, 8vh, 5.8rem) clamp(1rem, 3.5vw, 3rem);
  /* Toppen skal rydde den FASTE header, som er høj i px mens alt andet her er
     i dvh. Uden dette lagde nav-teksten sig oven på maleriet på alle vinduer
     under ca. 910 px høje. --top-h måles af faelles.js. */
  padding-top: max(clamp(4.4rem, 8vh, 5.8rem), calc(var(--top-h, 5.2rem) + .7rem));
  transition: background-color var(--skift);
}

.ophæng {
  margin: 0;
  max-width: 100%;
  opacity: .62;
  /* Hvilestanden er FORSKUDT ud mod kanten - ikke den endelige plads.
     Før stod værket på sin slutposition, og i det øjeblik rummet fik fokus
     startede en @keyframes med `from: translateX(--fra)`. Første frame af
     animationen flyttede altså værket 1,6 rem UD mod kanten, hvorefter det
     gled tilbage. Det var hoppet: et ryk mod kanten og en glidning hjem.
     Nu ligger forskydningen i hvilestanden, og fokus fjerner den. Så er der
     kun én bevægelse, og den går altid indad. */
  transform: translateX(var(--fra, 0px));
  transition: opacity var(--komme-ind), transform var(--komme-ind);
}
.rum-a { --fra: -1.6rem; }
.rum-b { --fra: 1.6rem; }
.rum.i-fokus .ophæng {
  opacity: 1;
  transform: none;
}

/* Maleriet kan trykkes for at ses stort. zoom-in-markøren siger det på
   desktop; teksthintet siger det på touch, hvor der ingen hover er. */
.kan-forstoerres {
  cursor: zoom-in;
}
.kan-forstoerres:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.forstoer-hint {
  display: block;
  margin-top: .7rem;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .64;  /* AA-bunden, se noten nederst i filen */
  transition: opacity var(--skift);
}
.kan-forstoerres:hover .forstoer-hint,
.kan-forstoerres:focus-visible .forstoer-hint {
  opacity: .85;
}

.ophæng img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 82dvh var for højt: sammen med den centrerede placering betød det at
     maleriet kun havde 9dvh luft over sig, og headeren er 82 px. Nu trækkes
     headerens faktiske højde fra, så værket altid står helt frit under den.
     På høje skærme rammer 82dvh stadig først og intet ændrer sig. */
  max-height: min(82dvh, calc(100dvh - var(--top-h, 5.2rem) - 5rem));
  object-fit: contain;
  box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--blaek) 26%, transparent),
              0 0 0 1px color-mix(in srgb, var(--blaek) 10%, transparent);
}

/* =========================================================
   Stor visning (lightbox) - native <dialog>, bygget af faelles.js
   ========================================================= */
dialog.stor-visning {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
dialog.stor-visning::backdrop {
  background: color-mix(in srgb, var(--blaek) 90%, black);
}
.stor-figur {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: clamp(.8rem, 3vw, 2rem);
}
.stor-figur img {
  display: block;
  /* Kun max-* og auto: et <img> skaleres aldrig OP af max-width, så billedet
     vises højst i sin egen opløsning - de fire 1080-værker forbliver skarpe. */
  width: auto;
  height: auto;
  /* Lightboxen har ingen header at tage hensyn til, så den må bruge næsten
     hele skærmen - det er her gevinsten ligger, især på mobil hvor
     præsentationen kun er 42dvh høj. */
  max-width: 94vw;
  /* Plads til caption + gap + figurens padding, så intet klippes. */
  max-height: min(90dvh, calc(100dvh - 6.5rem));
  object-fit: contain;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .7);
}
.stor-tekst {
  color: #faf6f0;
  font-size: .95rem;
  letter-spacing: .04em;
  text-align: center;
}
.stor-luk {
  position: fixed;
  top: clamp(.6rem, 2vw, 1.3rem);
  right: clamp(.6rem, 2vw, 1.3rem);
  z-index: 2;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .95rem;
  color: #faf6f0;
  background: color-mix(in srgb, #faf6f0 14%, transparent);
  border: 1px solid color-mix(in srgb, #faf6f0 45%, transparent);
  padding: .5rem .9rem;
  cursor: pointer;
  transition: background-color var(--skift);
}
.stor-luk:hover,
.stor-luk:focus-visible {
  background: color-mix(in srgb, #faf6f0 28%, transparent);
}
body.stor-aaben {
  overflow: hidden; /* baggrunden må ikke scrolle bag lightboxen */
}
/* Baggrunden toner ind - værket selv flytter sig ikke (designregel 4).
   Slukket helt ved reduceret bevægelse. */
@media (prefers-reduced-motion: no-preference) {
  dialog.stor-visning[open],
  dialog.stor-visning[open]::backdrop {
    animation: stor-ind .3s ease both;
  }
}
@keyframes stor-ind {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Zone 2: Skiltningszonen (tekst, vandmærke og handling) */
.skilt-zone {
  background-color: var(--lys-zone);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.4rem, 8vh, 5.8rem) clamp(1.4rem, 3.8vw, 3.2rem);
  /* Samme header-rydning som kunstzonen, så de to zoner har samme øverste
     kant og teksten heller ikke havner under headeren. */
  padding-top: max(clamp(4.4rem, 8vh, 5.8rem), calc(var(--top-h, 5.2rem) + .7rem));
  transition: background-color var(--skift);
}

/* Monumentalt arkitektonisk værknummer */
.vandmaerke-nr {
  position: absolute;
  top: clamp(7.5rem, 15vh, 10rem);
  right: clamp(1.4rem, 3.5vw, 3.2rem);
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blaek);
  opacity: .09;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.skilt-indhold {
  position: relative;
  z-index: 2;
  max-width: 30rem;
}

.skilt-zone .rum-kode {
  font-family: "Anton", Impact, sans-serif;
  font-size: .88rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  opacity: .64;  /* AA-bunden, se noten nederst i filen */
}

.skilt-zone h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 .9rem;
  letter-spacing: -.015em;
}

.skilt-zone .fakta {
  margin: 0 0 .25rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 700;
  opacity: .82;
}

.skilt-zone .besk {
  margin: .9rem 0 1.2rem;
  font-size: clamp(.96rem, 1.4vw, 1.12rem);
  line-height: 1.44;
  opacity: .88;
}

/* display: table jf. AGENTS.md så knappen ikke lander oven i prisen */
.pris {
  display: table;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  margin: 1.1rem 0 1.35rem;
  line-height: 1;
}

/* Arkitektonisk rammeknap */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.6rem .8rem;
  background: transparent;
  color: var(--blaek);
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid var(--blaek);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.knap:hover,
.knap:focus-visible {
  background: var(--blaek);
  color: var(--lys-zone);
}

.naeste-ark {
  display: table;
  color: inherit;
  text-decoration: none;
  margin: 1.6rem 0 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .64;  /* AA-bunden, se noten nederst i filen */
  border-top: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
  padding-top: .4rem;
}
a.naeste-ark:hover,
a.naeste-ark:focus-visible {
  opacity: .9;
}

/* Desktop layout for rummene */
@media (min-width: 60rem) {
  .rum-a {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  }
  .rum-a .kunst-zone {
    order: 1;
  }
  .rum-a .skilt-zone {
    order: 2;
    border-left: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
  }

  .rum-b {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
  }
  .rum-b .skilt-zone {
    order: 1;
    border-right: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
  }
  .rum-b .kunst-zone {
    order: 2;
  }
}

/* Mobil-layout for rummene */
@media (max-width: 59.99rem) {
  .top {
    font-size: .8rem;
    padding: .65rem .9rem;
  }
  .top nav {
    gap: .55rem;
  }
  .rum {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding-top: 4.8rem;
    padding-bottom: 2rem;
  }
  .kunst-zone {
    padding: .8rem .9rem .6rem;
    min-height: 46dvh;
  }
  .rum-a, .rum-b { --fra: 0px; }
  .ophæng img { max-height: 42dvh; width: 100%; }

  .skilt-zone {
    border-top: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
    padding: 1.6rem 1.1rem 5rem;
  }
  .vandmaerke-nr {
    font-size: clamp(4.5rem, 18vw, 6.5rem);
    top: 1.2rem;
    right: 1.2rem;
    opacity: .08;
    line-height: .88;
  }
}

/* =========================================================
   Slutsektion / Atelier-kontakt
   ========================================================= */
.slut {
  min-height: 100dvh;
  scroll-snap-align: start;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(4.5rem, 9vh, 6.2rem) clamp(.9rem, 3.2vw, 2.2rem) clamp(2rem, 4vh, 2.8rem);
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
@media (min-width: 60rem) {
  .slut {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.slut-foto {
  margin: 0;
  width: 100%;
  max-height: 80dvh;
  justify-self: center;
  overflow: hidden;
}
.slut-foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76dvh;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: 0 20px 45px -15px color-mix(in srgb, var(--blaek) 22%, transparent);
  animation: foto-aandedrag 40s ease-in-out alternate infinite;
  transform-origin: 50% 58%;
}
@media (max-width: 59.99rem) {
  .slut-foto img {
    max-height: 42dvh;
  }
}

.slut-tekst h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: .94;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.slut-tekst p {
  margin: 0 0 .3rem;
  font-size: 1.12rem;
}
.slut-kontakt {
  margin-top: 1.4rem !important;
}
.slut-kontakt a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Hannes egen indgang til admin. Står permanent i foden på alle fire sider
   som et helt almindeligt link - hverken skjult bag en tryk-kombination
   eller mærket "login". Det skal se ud som en fodnote og ikke fange øjet,
   men det skal være til at finde hver gang. */
.stille-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: .64;  /* AA-bunden, se noten nederst i filen */
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
  transition: opacity var(--skift);
}
/* To stille links ved siden af hinanden i foden (Se åbningen igen · Indenfor). */
.stille-link + .stille-link {
  margin-left: 1.6rem;
}
.stille-link:hover,
.stille-link:focus-visible {
  opacity: 1;
}

/* Fast galleri-spor forneden */
.galleri-spor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(.7rem, 2vw, 1.2rem) clamp(.9rem, 3.2vw, 2.2rem);
  gap: 1.2rem;
}

.spor-linje {
  height: 2px;
  width: 8rem;
  background: color-mix(in srgb, var(--blaek) 20%, transparent);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.spor-fyld {
  height: 100%;
  width: 0%;
  background: var(--blaek);
  transition: width .7s var(--ease);
}

.taeller {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  opacity: .65;
  background-color: var(--lys);
  padding: .15rem 0 .15rem .45rem;
}

/* =========================================================
   Undersider: Om & Kontakt (Arkitektonisk layout)
   ========================================================= */
.side-container {
  padding-top: clamp(4.8rem, 10vh, 6.5rem);
  padding-bottom: 4rem;
  min-height: 100vh;
}

.side-hero {
  padding: 0 clamp(.9rem, 3.2vw, 2.2rem) clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
}

.side-hero h1 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  margin: .55rem 0 1rem;
  letter-spacing: -.02em;
  padding: .18em 0 .1em;
  overflow: visible;
}

.side-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(2rem, 5vh, 4rem) clamp(.9rem, 3.2vw, 2.2rem);
  gap: clamp(2rem, 4.5vw, 4rem);
}
@media (min-width: 60rem) {
  .side-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.prosa {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
}
.prosa p {
  margin: 0 0 1.25rem;
}

.arkitektur-boks {
  border: 1px solid color-mix(in srgb, var(--blaek) 20%, transparent);
  background: color-mix(in srgb, var(--lys) 82%, white);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--blaek) 12%, transparent);
}
.arkitektur-boks h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  line-height: 1;
}

/* CV tidslinje */
.cv-liste {
  display: grid;
  gap: 1.2rem;
  margin-top: 1rem;
}
.cv-post {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--blaek) 20%, transparent);
  padding-bottom: .8rem;
}
.cv-post:last-child {
  border-bottom: none;
}
.cv-aar {
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  opacity: .75;
}
.cv-steder {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv-steder li {
  margin-bottom: .25rem;
  font-weight: 700;
}

.om-handlinger {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.knap-sekundaer {
  background: transparent;
  color: var(--blaek);
}
.knap-sekundaer:hover,
.knap-sekundaer:focus-visible {
  background: var(--blaek);
  color: var(--lys);
}

.om-portraet {
  margin: 0;
  max-width: 32rem;
  overflow: hidden;
}
.om-portraet img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 20px 45px -15px color-mix(in srgb, var(--blaek) 22%, transparent);
  animation: foto-aandedrag 38s ease-in-out alternate infinite;
  transform-origin: 50% 30%;
}

.om-foto {
  margin: 0;
  overflow: hidden;
}
.om-foto img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 20px 45px -15px color-mix(in srgb, var(--blaek) 22%, transparent);
  animation: foto-aandedrag 42s ease-in-out alternate infinite;
}

@media (max-width: 59.99rem) {
  .om-bio .om-portraet {
    order: -1;
  }
}

.om-hero,
.kontakt-hero {
  padding-top: clamp(5.6rem, 13vh, 7.4rem);
}
.om-hero .zone-tag,
.kontakt-hero .zone-tag {
  margin-bottom: 1.15rem;
}
.om-hero h1,
.kontakt-hero h1 {
  line-height: 1.12;
  margin-top: .15rem;
  padding: .22em 0 .14em;
  overflow: visible;
}

.kontaktform h2,
.kontakt-side h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  line-height: 1.08;
}
.kontakt-tlf {
  margin: 1.35rem 0 0;
}
.kontakt-tlf a {
  display: table;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  letter-spacing: -.02em;
  text-decoration: none;
  color: inherit;
  border-bottom: 3px solid currentColor;
  line-height: 1.12;
  padding: .08em 0 .04em;
}
.kontakt-tlf a:hover,
.kontakt-tlf a:focus-visible {
  opacity: .72;
}
.kontakt-adr {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  line-height: 1.45;
}
.kontakt-side .om-foto {
  margin-top: 1.8rem;
}
.kontakt-side .om-foto img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
}
.kontakt-vaerk {
  display: flex;
  gap: .9rem;
  align-items: flex-end;
  margin: 0 0 1.4rem;
  max-width: 22rem;
}
.kontakt-vaerk img {
  display: block;
  width: 6.8rem;
  height: auto;
  flex: 0 0 auto;
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--blaek) 28%, transparent);
}
.kontakt-vaerk figcaption {
  margin: 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  line-height: 1.08;
}

.om-steg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: end;
  padding: clamp(1.4rem, 4vh, 2.8rem) clamp(.9rem, 3.2vw, 2.2rem) clamp(2.2rem, 6vh, 4rem);
}
@media (min-width: 60rem) {
  .om-steg {
    grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 0.7fr);
  }
}

.om-steg-foto {
  margin: 0;
  overflow: hidden;
}
.om-steg-foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  object-position: 50% 40%;
}

.om-steg-ord {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem);
  line-height: .95;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -.015em;
  max-width: 14ch;
}

.om-baand {
  padding: clamp(1rem, 3vh, 2rem) 0 clamp(2.4rem, 6vh, 3.6rem);
  border-top: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
}
.om-baand h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
  line-height: .95;
  margin: 0 clamp(.9rem, 3.2vw, 2.2rem) .4rem;
}
.om-baand-lede {
  margin: 0 clamp(.9rem, 3.2vw, 2.2rem) 1.1rem;
  max-width: 32rem;
  opacity: .75;
}

.farvebaand {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding: .2rem 8vw 1.2rem clamp(.9rem, 3.2vw, 2.2rem);
  scroll-snap-type: x proximity;
  scrollbar-color: var(--blaek) transparent;
}
.farvebaand:focus-visible {
  outline: 2px solid var(--blaek);
  outline-offset: -6px;
}

.farve-klat {
  flex: 0 0 auto;
  width: min(42vw, 13.5rem);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}
.farve-klat:focus-visible {
  outline: 2px solid var(--blaek);
  outline-offset: 6px;
}
.farve-klat img {
  display: block;
  width: 100%;
  height: auto;
}
.farve-klat span {
  display: block;
  margin-top: .4rem;
  font-family: "Anton", Impact, sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.cv-aar {
  box-shadow: inset 4px 0 0 var(--klat, var(--blaek));
  padding-left: .5rem;
}

.om-cv-sektion {
  border-top: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.side-fod {
  min-height: auto;
  border-top: 1px solid color-mix(in srgb, var(--blaek) 16%, transparent);
  padding: 3rem clamp(.9rem, 3.2vw, 2.2rem);
}
.side-fod-indhold {
  max-width: 40rem;
}

/* Kontaktformular */
.form-gruppe {
  display: grid;
  gap: .35rem;
  margin-bottom: 1.2rem;
}
.form-gruppe label {
  font-family: "Anton", Impact, sans-serif;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
.form-input,
.form-textarea {
  width: 100%;
  padding: .75rem .9rem;
  font-family: inherit;
  font-size: 1.05rem;
  background: color-mix(in srgb, var(--lys) 38%, white);
  border: 1.5px solid color-mix(in srgb, var(--blaek) 35%, transparent);
  color: var(--blaek);
}
.form-textarea {
  min-height: 8rem;
  resize: vertical;
}
.form-note {
  font-size: .88rem;
  opacity: .75;
  margin: .4rem 0 1rem;
}

.notits-boks {
  margin: 0 0 1.2rem;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--lys) 60%, white);
  border-left: 3px solid var(--blaek);
  font-weight: 700;
  font-size: .95rem;
}

.form-status {
  margin-top: 1.2rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--lys) 60%, white);
  border: 1px solid var(--blaek);
  font-size: .95rem;
  line-height: 1.5;
}

.adresse-kort {
  margin-bottom: 2rem;
}

/* Gallerivæg — naturlig højde, række for række. Farven styres af JS via --lys. */
.galleri-vaeg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1.6rem clamp(1.1rem, 2.4vw, 2rem);
  align-items: start;
  padding: 1.2rem clamp(.9rem, 3.2vw, 2.2rem) 5rem;
}

.galleri-vaerk {
  display: block;
  color: inherit;
  text-decoration: none;
}
.galleri-vaerk:focus-visible {
  outline: 2px solid var(--blaek);
  outline-offset: 6px;
}

.galleri-vaerk figure {
  margin: 0;
}
.galleri-vaerk img {
  display: block;
  width: 100%;
  height: auto;
}

.galleri-skilt {
  margin-top: .55rem;
}
.galleri-skilt h2 {
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  margin: 0 0 .15rem;
  line-height: 1.05;
  font-weight: 400;
}
.galleri-skilt .fakta {
  margin: 0;
  font-size: .82rem;
  opacity: .7;
}
.galleri-skilt .pris {
  display: table;
  margin: .3rem 0 0;
  font-size: 1.05rem;
}
.galleri-skilt .fra-atelier,
.galleri-skilt .link-tekst {
  display: table;
  margin: .25rem 0 0;
  font-family: "Anton", Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
}

@keyframes foto-aandedrag {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

.fejl-boks {
  margin: 2rem clamp(.9rem, 3.2vw, 2.2rem);
  padding: 1.1rem 1.2rem;
  max-width: 36rem;
  border: 2px solid var(--blaek);
  font-size: 1.05rem;
  line-height: 1.5;
}
.fejl-boks a {
  color: inherit;
  font-weight: 700;
}

/* Atelierets små ophold giver udstillingen en anden rytme. */
.entre-invitation { font-size: clamp(1.2rem, 2vw, 1.55rem); margin: 0 0 .8rem; font-weight: 700; }
.entre-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 1.8rem; }
.tekst-link { color: inherit; font-weight: 700; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.tekst-link:hover { text-decoration-thickness: 2px; }
.entre-note { font-size: .88rem; margin-top: 1.2rem; opacity: .72; }
.entre-foto figcaption { text-align: center; }
.entre-handlinger .knap span { transition: transform .2s ease; }
.entre-handlinger .knap:hover span { transform: translateY(3px); }
.atelier-ophold { background: #faf6f0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 6vw, 6rem); scroll-margin-top: 5rem; }
.ophold-foto { margin: 0; }
.ophold-foto img { display: block; width: 100%; height: auto; max-height: 42rem; object-fit: contain; }
.atelier-haand-der-maler .ophold-foto { max-width: 27rem; justify-self: center; }
.ophold-tekst { max-width: 32rem; }
.ophold-tekst h2 { font: 400 clamp(2.4rem, 4.6vw, 4.5rem)/1.12 "Anton", Impact, sans-serif; text-transform: uppercase; margin: 1rem 0 1.6rem; }
.ophold-tekst blockquote { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.4; margin: 0; }
.citat-navn { font-size: .9rem; margin: .75rem 0 1.7rem; }
.ophold-beskrivelse { line-height: 1.65; margin-bottom: 1.6rem; }
.atelier-atelier { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: #f4efe7; }
.atelier-atelier .ophold-foto { align-self: center; }
.atelier-ophold.er-synligt .ophold-tekst { animation: atelier-ind .75s ease-out both; }
@keyframes atelier-ind { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.slut-tekst { max-width: 36rem; }
.slut-tekst h2 { line-height: 1.12; }
.slut-handling { margin: 1.2rem 0 1.8rem; }
.slut-kontakt a { overflow-wrap: anywhere; }
@media (max-width: 59.99rem) {
  .aabning { padding-top: 6.5rem; }
  .atelier-ophold { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 4.5rem 1.2rem; }
  .atelier-haand-der-maler .ophold-foto { max-width: 22rem; }
  .ophold-foto img { max-height: 65dvh; }
  .ophold-tekst { max-width: 38rem; }
}

/* Reduceret bevægelse */
@media (prefers-reduced-motion: reduce) {
  html, body, .top, .kunst-zone, .skilt-zone, .entre-handlinger .knap span { transition: none; }
  .atelier-ophold.er-synligt .ophold-tekst { animation: none; }
  .entre-handlinger .knap:hover span { transform: none; }
  html {
    scroll-behavior: auto;
  }
  html.scroll-snap {
    scroll-snap-type: none;
  }
  body {
    transition: none;
  }
  .kunst-zone,
  .skilt-zone {
    transition: none;
  }
  .ophæng,
  .rum.i-fokus .ophæng {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .knap,
  .spor-fyld {
    transition: none;
  }
  .entre-foto img,
  .slut-foto img,
  .om-foto img,
  .om-portraet img {
    animation: none;
    transform: none;
  }
  .farvebaand {
    scroll-snap-type: none;
  }
}

/* Honningkrukke i kontaktformularen. Skal være usynlig for mennesker, men
   ikke display:none - nogle bots springer skjulte felter over. Derfor
   flyttes den ud af skærmen i stedet. */
.honning {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fejl i kontaktformularen skal ikke ligne en kvittering. */
.form-status.fejl {
  border-color: #b61b15;
  color: #7a120e;
}

/* =========================================================
   Dæmpet tekst: .64 er bunden
   =========================================================

   Fem klasser dæmper tekst med opacity - .zone-tag, .stille-link,
   .naeste-ark, .forstoer-hint og .skilt-zone .rum-kode. De stod på .45 til
   .6 og faldt alle under WCAG AA. En axe-gennemgang 10/9-2026 talte 64
   kontrastfejl på de fire sider; det var de samme fem klasser gentaget på
   hvert værkkort.

   Hvorfor netop .64: teksten er --blaek (#1a1613), men baggrunden er IKKE
   fast. Den tager værkets kulør (designbeslutning 2, lyshed 0,845), så
   kontrasten er dårligst på de mørkeste af dem. Målt mod alle de kulører
   axe faktisk stødte på - #faf6f0, #f4efe7, #eacec8, #f7d7ba, #f7d8ba,
   #f9e1c9 - er .64 den laveste værdi der holder 4,5:1 hele vejen rundt
   (værste tilfælde 4,59). Ved .60 falder #eacec8 til 4,09 og fejler.

   Sætter du en ny dæmpet tekst op, så start ved .64. Går du lavere, skal
   det være tekst der ikke skal kunne læses.

   OM .forstoer-hint: den staar rigtigt paa .64, men den arver en dæmpning.
   Den sidder i figure.ophæng, som har opacity .62 i HVILESTAND - vaerket er
   tonet ned indtil man scroller til det, og saa gaar .rum.i-fokus .ophæng
   til 1. Opacity ganges ned gennem undertraeet, saa hintet staar paa
   .62 x .64 = .40 (kontrast 2,5) saa laenge vaerket ikke er naaet frem, og
   paa .64 (kontrast 4,59) i det oejeblik man kigger paa det. Det er den
   sidste tilstand teksten laeses i. Reglen kan ikke opfyldes i begge: selv
   opacity 1 paa hintet giver kun .62 og 4,4 i hvilestanden. Valget er
   derfor at beholde indtoningen - den er en af de designbeslutninger
   kunden udpegede som noget der virker - og lade axe taelle de 13.

   UNDTAGET: .vandmaerke-nr (opacity .09, kontrast 1,2). Det er det store
   værknummer bag skiltezonen, og det er med vilje næsten usynligt. Det er
   ren dekoration i WCAG's forstand: det er aria-hidden, og præcis samme
   nummer står læsbart lige ved siden af i .rum-kode ("Rum 03 // 13"), som
   nu ER over grænsen. At hæve vandmærket til de .49 der skulle til, ville
   gøre et baggrundselement til sidens kraftigste. Lad det stå. */