/* ---------------------------------------------------------------------------
   Skrifter hostet lokalt, IKKE hentet fra Google.
   Grunden er ikke haastighed, men persondata: et opslag mod fonts.gstatic.com
   sender den besoegendes IP-adresse til Google ved hvert sidevisning. En tysk
   domstol fandt i 2022, at netop det er en overfoersel uden samtykke, og siden
   henvender sig til tyske laesere. Dertil siger husets cookie- og
   persondatapolitik, at der ikke deles oplysninger med tredjeparter; med
   Google Fonts passede det ikke.
   Naar skrifterne ligger her, er der INGEN tredjeparter paa siden overhovedet.
   Det er derfor ogsaa grunden til, at der ikke er brug for et cookiebanner.

   Filerne er subset til latin, latin-ext og almindelig tegnsaetning, saa danske
   og tyske tegn er med. Begge familier er OFL-licenseret; licensfilerne ligger
   ved siden af og SKAL foelge med, hvis fonts-mappen flyttes.
   EB Garamond er en VARIABEL font (wght 400 til 800), saa én fil daekker baade
   400 og 500. Derfor kun fire filer i alt.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-italic-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* PAPIRET ER BOGENS EGET, aendret 12. august. Den gamle vaerdi #e4e5e0 var
     en neutral graa; denne er cremet og ligger taet paa ALTO CREAM 100 g,
     som Totem valgte i tilbud 2026/0484 og altsaa det ark, boegerne faktisk
     trykkes paa. Skaermen faar dermed samme farve som papiret i haanden.
     Blaekket er samtidig gjort en anelse varmere, saa det ikke staar blaaligt
     paa et cremet ark. */
  --blaek: #16140f;
  --papir: #ece4d2;
  --papir-lys: #f5efe2;
  --papir-dyb: #ddd3bd;
  --grafit: #776e5d;
  --streg: #cdc3ac;
  --karmin: #8c2231;

  /* Skygger i papirets egen toning, ikke i sort. En sort skygge paa et varmt
     papir bliver graa og daarlig; disse er blaeksfarvede og gennemsigtige. */
  --skygge-lav: 0 1px 2px rgba(22, 20, 15, 0.07), 0 2px 8px rgba(22, 20, 15, 0.05);
  --skygge-hoej: 0 2px 4px rgba(22, 20, 15, 0.09), 0 14px 30px rgba(23, 60, 107, 0.16);

  /* Seriebaandet i bunden af omslaget. Trykfarven er CMYK 100/70/20/25 (se
     omslag.latex, \definecolor{baand}); dette er den naermeste RGB. De to kan
     aldrig blive helt ens, men vaerdien skal staa ÉT sted her, saa de ikke
     driver fra hinanden, naar den ene aendres.
     Hoejden er 6 mm af bogens 185 mm, altsaa 3,243 procent. Angivet i procent
     og ikke i rem, saa den foelger med af sig selv, naar reolen skaleres ned
     paa smaa skaerme. */
  --baand: #173c6b;
  --baand-h: 3.243%;

  --maal: 68rem;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  font-feature-settings: "liga" 1, "onum" 1;
}

a { color: var(--blaek); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--karmin); }

/* SERIEBAANDET SOM SIDENS RYTME (12. august). Baandet fandtes i forvejen paa
   omslaget og paa bogryggen; her deler det siden i afsnit. Det er sidens
   eneste rene grafiske greb, og det pynter ikke: det er den samme streg, som
   staar trykt paa boegerne, brugt til at holde sammen paa dem.
   Farven kommer fra --baand og findes altsaa fortsat kun ét sted, sammen med
   noten om, at CMYK-vaerdien i omslag.latex skal foelges ad. */
.baand {
  height: 10px;
  background: var(--baand);
  width: 100%;
}

/* Bevaegelse: indhold toner op, naar det ruller ind i billedet. Ren CSS via
   animation-timeline, saa der ikke skal JavaScript til. Browsere uden stoette
   viser alt fuldt synligt fra start, hvilket er den rigtige fallback:
   bevaegelsen er pynt, indholdet er ikke. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bog, .brod, .lydproeve {
      animation: toneop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes toneop {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.ramme {
  max-width: var(--maal);
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* Etiketter og teknisk sats */
.etiket {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafit);
  margin: 0 0 1.25rem;
}

/* Hoved */
.hoved {
  border-bottom: 1px solid var(--streg);
}

.hoved .ramme {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  flex-wrap: wrap;
}

.marke {
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.hoved nav {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  gap: 1.5rem;
}

/* Titelblad */
.titelblad {
  padding: 7rem 0 5rem;
  border-bottom: 1px solid var(--streg);
}

/* Overskriften er seriens PAASTAND, ikke en kategori. Serietitlen staar i
   etiketten ovenover, hvor den hoerer hjemme som én serie blandt flere;
   forlagets egen bredde staar i meta-beskrivelsen og i Forlaget-afsnittet.
   De to maa ikke bytte plads igen: kommer der en bog om noget andet, er det
   overskriften der skiftes ud, ikke forlagets beskrivelse. */
.titelblad h1 {
  font-size: clamp(2.4rem, 6.6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.03;
  margin: 0 0 1.75rem;
  max-width: 17ch;
  letter-spacing: -0.015em;
}

/* Det fremhaevede ord staar i seriebaandets blaa og i EB Garamonds egen
   kursiv, altsaa den variable italic-fil der allerede hentes. Koster ingen
   ekstra vaegt. */
.titelblad h1 em {
  font-style: italic;
  color: var(--baand);
}

.titelblad .daek {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  color: var(--grafit);
  max-width: 44ch;
  margin: 0 0 2.5rem;
}

.status {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--blaek);
  border-left: 2px solid var(--karmin);
  padding-left: 0.9rem;
  line-height: 1.7;
}

/* Reolen: signaturen */
.reol-sektion {
  padding: 5rem 0;
  border-bottom: 1px solid var(--streg);
}

/* MAALESTOKKEN BLIVER. Bredden paa hver ryg kommer fra rygbredde i metadata,
   og det er hele pointen: bind I er 6 mm og bind II er 13, og man kan SE
   forskellen. Et designudkast 12. august gav de tre bind lige stor plads, og
   netop det blev valgt fra. */
.reol {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  padding: 2.5rem 0 0;
  min-height: 26rem;
  position: relative;
}

/* Hylden. Foer stod ryggene paa ingenting, og derfor lignede de en raekke
   streger frem for boeger. */
.reol::after {
  content: "";
  position: absolute;
  left: -1.75rem;
  right: -1.75rem;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(180deg,
    var(--blaek) 0 1px, rgba(22, 20, 15, 0.18) 1px 2px, transparent 2px);
  pointer-events: none;
}

.ryg {
  position: relative;
  /* Let skygge langs kanterne, saa ryggen faar rundhed som en rigtig bog. */
  background: linear-gradient(90deg,
    rgba(22, 20, 15, 0.07) 0%, transparent 18%,
    transparent 82%, rgba(22, 20, 15, 0.05) 100%),
    var(--papir-lys);
  border: 1px solid var(--streg);
  border-bottom: 3px solid var(--blaek);
  height: 24.4rem; /* 185 mm i skala */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0;
  cursor: pointer;
  box-shadow: var(--skygge-lav);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 260ms ease, background 220ms ease;
  transform-origin: bottom center;
}

.ryg:hover,
.ryg:focus-visible,
.ryg[aria-expanded="true"] {
  transform: translateY(-1.6rem);
  background: var(--papir-lys);
  box-shadow: var(--skygge-hoej);
}

.ryg[aria-expanded="true"] { border-bottom-color: var(--karmin); }

/* Rygbredden kommer fra metadata og saettes som --bredde paa knappen */
.ryg { width: var(--bredde, 1rem); }

/* Seriebaandet paa ryggen. Paa den trykte bog loeber det ubrudt over bagside,
   ryg og forside; i reolen ses kun rygdelen, og den skal derfor staa i samme
   hoejde paa alle bind. */
.ryg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--baand-h);
  background: var(--baand);
  pointer-events: none;
}

.rygtekst {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--blaek);
}

.forkant {
  width: 9.2rem;              /* 115 mm forside */
  height: 24.4rem;
  margin-left: 1.6rem;
  border: 1px solid var(--streg);
  border-bottom: 3px solid var(--blaek);
  background: var(--papir-lys);
  padding: 1.4rem 1.2rem;
  display: none;
}

.reol-note {
  margin: 2.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--grafit);
  max-width: 46ch;
}

/* Bogkort */
/* Omslagene er sitets staerkeste billeder og har faaet mere plads, 14 til 17
   rem. Den billigste maade at goere en side mindre kedelig paa er at lade det
   bedste materiale fylde. */
.bog {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 3.5rem;
  padding: 4rem 0;
  border-top: 1px solid var(--streg);
  align-items: start;
}

.bog:first-of-type { border-top: 0; padding-top: 1rem; }

/* Omslag, med typografisk erstatning hvis filen mangler.
   Den haarde forskudte skygge er byttet ud med en bloed, saa omslaget loefter
   sig fra papiret i stedet for at ligge klistret paa det. Den lille rotation
   giver bogen fysisk tilstedevaerelse og rettes op, naar man peger paa den,
   saa billedet kan ses lige. */
.omslag-holder {
  position: relative;
  aspect-ratio: 115 / 185;
  background: var(--papir-lys);
  border: 1px solid var(--streg);
  box-shadow: var(--skygge-hoej);
  transform: rotate(-0.7deg);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bog:nth-of-type(even) .omslag-holder { transform: rotate(0.7deg); }

.bog:hover .omslag-holder,
.bog:focus-within .omslag-holder { transform: rotate(0deg) translateY(-0.4rem); }

@media (prefers-reduced-motion: reduce) {
  .omslag-holder,
  .bog:nth-of-type(even) .omslag-holder,
  .bog:hover .omslag-holder { transform: none; transition: none; }
}

/* Omslaget kan klikkes, og saa vises billedfilen i fuld stoerrelse (1358 x 2186
   px, altsaa langt stoerre end her). Linket fylder hele holderen, saa hele
   omslaget er klikbart og ikke kun en del af det. Zoom-markoeren er den eneste
   antydning; der staar bevidst ingen "klik her", da siden lever af at vaere
   tilbageholdende. SAMME FANE, ikke en ny: browserens tilbageknap foerer
   laeseren tilbage til samme sted paa en lang side, og en ny fane, der aabner
   uvarslet, er en tilgaengelighedsgene. */
.omslag-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.omslag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .bog er et to-kolonne-gitter, saa omslag og bagsidelink er pakket i .omslagblok
   i skabelonen. Uden den ville linket blive en tredje celle og vaelte layoutet.
   Linket til bagsiden staar under omslaget, saa det ikke ligger hen over
   billedet. Daempet og lille: det er en mulighed, ikke en opfordring. Vises
   kun, naar bagsidefilen findes. */
.bagsidelink {
  margin: 0.9rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.omslag-erstatning { display: none; }

/* Mangler omslagsbilledet, tegnes baandet paa den typografiske erstatning, saa
   den ikke skiller sig ud fra de rigtige omslag. Er billedet der, har det
   baandet i forvejen. */
.omslag-holder.mangler::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--baand-h);
  background: var(--baand);
  pointer-events: none;
}

.omslag-holder.mangler .omslag-erstatning {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.6rem 1.3rem;
  text-align: left;
}

.omslag-erstatning .serie {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafit);
  line-height: 1.6;
}

.omslag-erstatning .titel {
  font-size: 1.35rem;
  line-height: 1.25;
}

.omslag-erstatning .forfatter {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafit);
}

.bogtekst .nr {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafit);
  margin: 0 0 0.9rem;
}

.bogtekst h3 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

.bogtekst .undertitel {
  color: var(--grafit);
  font-style: italic;
  margin: 0 0 1.5rem;
}

.bogtekst p {
  margin: 0 0 1.1rem;
  max-width: 58ch;
}

.bogtekst .data {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--grafit);
  margin: 0;
}

/* Pris. Staar i bogens egen skrift og ikke i mono som datalinjen: prisen er
   en oplysning til laeseren, ikke en teknisk specifikation. Lydbogsprisen
   staar daempet ved siden af, fordi den trykte bog er hovedproduktet. */
.bogtekst .pris {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
  color: var(--blaek);
}

.bogtekst .pris-lyd {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--grafit);
  margin-left: 0.6rem;
  white-space: nowrap;
}

/* LÆSEPRØVE. Teksten hentes af byg-site.py fra det kanoniske manuskript, så
   den aldrig bliver til en anden version end bogens.
   Den er foldet sammen som standard: en side, hvor tre bøger hver viser tre
   afsnit, bliver til en mur. Læseren vælger selv, ligesom hun gør med
   lydprøven, og de to står derfor ved siden af hinanden.
   Typografien er bogens: smallere spalte end resten af siden, og indryk på
   afsnit efter det første, som i en trykt bog. Greb hentet fra Nis' udkast
   12. august. */
.laeseproeve {
  margin: 1.75rem 0;
  border-top: 1px solid var(--streg);
  border-bottom: 1px solid var(--streg);
}

.laeseproeve > summary {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baand);
  cursor: pointer;
  padding: 0.95rem 0;
  list-style: none;
}

.laeseproeve > summary::-webkit-details-marker { display: none; }

/* Trekanten tegnes selv, så den kan følge skriften og dreje ved udfoldning. */
.laeseproeve > summary::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 0.7rem;
  transition: transform 200ms ease;
}

.laeseproeve[open] > summary::before { transform: rotate(90deg); }
.laeseproeve > summary:hover { color: var(--karmin); }

.proevetekst {
  max-width: 34em;
  padding: 0.5rem 0 1.75rem;
}

.proevetekst p { margin: 0 0 1.1rem; line-height: 1.75; }
.proevetekst p + p { text-indent: 1.4em; margin-top: -0.35rem; }

.proeve-hvorfra,
.proevetekst .proeve-hvorfra {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafit);
  margin: 0 0 1.25rem;
  text-indent: 0;
}

.proevetekst .proeve-mere {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--grafit);
  border-left: 2px solid var(--baand);
  padding-left: 0.9rem;
  text-indent: 0;
  margin: 1.75rem 0 0;
}

/* Lydprøve */
.lydproeve {
  margin: 2rem 0 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--papir-lys);
  border-left: 2px solid var(--karmin);
  max-width: 32rem;
}

.lydproeve .etiket { margin: 0 0 0.75rem; }

.lydproeve audio {
  width: 100%;
  max-width: 28rem;
  display: block;
}

.brod .fint {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--grafit);
  border-top: 1px solid var(--streg);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
}

/* Sektioner */
section { padding: 5rem 0; }
section.linje { border-bottom: 1px solid var(--streg); }

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1.75rem;
  max-width: 24ch;
}

.brod { max-width: 58ch; }
.brod p { margin: 0 0 1.25rem; }
.brod p:last-child { margin-bottom: 0; }

/* Skriv dig op */
.opskrivning {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.knap {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papir-lys);
  background: var(--blaek);
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--blaek);
  transition: background 180ms ease, color 180ms ease;
}

.knap:hover {
  background: var(--karmin);
  border-color: var(--karmin);
  color: #fff;
}

.opskrivning .fint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--grafit);
  max-width: 34ch;
  line-height: 1.7;
}

/* Fod */
.fod {
  border-top: 1px solid var(--streg);
  padding: 4rem 0 5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--grafit);
}

.fod .kolonner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem;
}

.fod h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--blaek);
  margin: 0 0 0.9rem;
}

.fod a { color: var(--grafit); text-decoration: none; }
.fod a:hover { color: var(--karmin); text-decoration: underline; }

.fod ul { list-style: none; margin: 0; padding: 0; }

.kolofon {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--streg);
  font-size: 0.72rem;
}

/* Juridiske sider */
.dokument { padding: 4.5rem 0 6rem; }
.dokument .brod { max-width: 68ch; }
.dokument h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  margin: 0 0 0.75rem;
}
.dokument h2 {
  font-size: 1.45rem;
  margin: 3rem 0 1rem;
  max-width: none;
}
.dokument h3 { font-size: 1.15rem; font-weight: 400; margin: 2rem 0 0.75rem; }
.dokument p, .dokument li { max-width: 68ch; }
.dokument ul { padding-left: 1.2rem; }
.dokument li { margin-bottom: 0.5rem; }
.dokument address {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.9;
  background: var(--papir-lys);
  border-left: 2px solid var(--streg);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  max-width: 40ch;
}
.dokument table {
  border-collapse: collapse;
  width: 100%;
  max-width: 60rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.dokument th, .dokument td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--streg);
  vertical-align: top;
}
.dokument th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--grafit);
}
.dato {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--grafit);
  margin: 0 0 3rem;
}

@media (max-width: 700px) {
  body { font-size: 1.08rem; }
  .titelblad { padding: 4rem 0 3.5rem; }
  .reol { min-height: 0; }
  .ryg { height: 17rem; width: calc(var(--bredde, 1rem) * 0.75); }
  .rygtekst { font-size: 0.7rem; }
  .bog { grid-template-columns: 1fr; gap: 2rem; padding: 2.75rem 0; }
  .omslag-holder { max-width: 11rem; }
  .bogtekst h3 { font-size: 1.75rem; }
  section { padding: 3.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}