/* ==========================================================
   Vinni Yang – børnebogsforfatter
   Farver og skrifttyper samlet her, så de er lette at rette.
   ========================================================== */

:root {
  --blush: #FBE3D6;      /* sidebaggrund */
  --sol: #F6C945;        /* gul */
  --rosa: #EE9DB6;       /* lyserød */
  --blad: #8DB36B;       /* grøn (fra portrættets blade) */
  --blad-lys: #D5E8BF;
  --koral: #E4512F;      /* overskrifter, knapper */
  --koral-moerk: #B83A1D;
  --himmel: #2F64AB;     /* blå */
  --blaek: #2A201B;      /* tekst */
  --blaek-blod: #4A3C34;

  --serif: "Young Serif", Georgia, serif;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;

  --gutter: 1.25rem;
  --maks: 68rem;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blush);
  color: var(--blaek);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a { color: var(--himmel); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--koral-moerk); }
a:focus-visible, .knap:focus-visible {
  outline: 3px solid var(--himmel);
  outline-offset: 3px;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--koral);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 11vw, 4.75rem); }
h2 { font-size: clamp(2.1rem, 8vw, 3.4rem); }

p { margin: 0 0 1rem; max-width: 38rem; }

.etiket {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--himmel);
  margin-bottom: 0.9rem;
}

.stor {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  line-height: 1.3;
  color: var(--himmel);
}

.bagom {
  border-left: 4px solid var(--sol);
  padding-left: 1rem;
  color: var(--blaek-blod);
}

/* ---------- Top ---------- */
.top {
  max-width: var(--maks);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.logo {
  text-decoration: none;
  font-family: var(--serif);
  line-height: 0.95;
  text-align: center;
  display: inline-block;
}
.logo-for { display: block; font-size: 1.7rem; letter-spacing: 0.02em; }
.logo-efter { display: block; font-size: 2.6rem; letter-spacing: 0.06em; }
.logo span span:nth-child(5n+1) { color: var(--koral); }
.logo span span:nth-child(5n+2) { color: #D9739A; }
.logo span span:nth-child(5n+3) { color: #D9A21B; }
.logo span span:nth-child(5n+4) { color: #5E8F3E; }
.logo span span:nth-child(5n+5) { color: var(--himmel); }
.logo-efter span:nth-child(1) { color: var(--himmel); }
.logo-efter span:nth-child(2) { color: var(--koral); }
.logo-efter span:nth-child(3) { color: #D9739A; }
.logo-efter span:nth-child(4) { color: #5E8F3E; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
}
nav a {
  color: var(--koral-moerk);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  display: inline-block;
}
nav a:hover { text-decoration: underline; }

/* ---------- Sektioner ---------- */
section { padding: 4rem var(--gutter); }
.indhold { max-width: var(--maks); margin: 0 auto; }
.smal { max-width: 44rem; }
.to-spalter { display: grid; gap: 3rem; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maks);
  margin: 0 auto;
  padding-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}
.hero-intro { font-size: 1.2rem; }

.knapper { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.knap {
  display: inline-block;
  padding: 0.85rem 1.3rem;
  border: 2px solid var(--blaek);
  border-radius: 6px;
  background: #fff;
  color: var(--blaek);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--blaek);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knap:hover { color: var(--blaek); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--blaek); }
.knap:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blaek); }
.knap-fyldt { background: var(--sol); }

.hero-billede {
  position: relative;
  width: min(100%, 26rem);
  margin: 0 auto;
  aspect-ratio: 1;
}
.klat { position: absolute; }
.klat path { fill: currentColor; }
.klat-gul { color: var(--sol); inset: -6% -10% -4% -8%; width: 118%; height: 110%; }
.klat-rosa { color: var(--rosa); width: 38%; height: 38%; top: -8%; left: -6%; }
.portraet {
  position: relative;
  width: 86%;
  margin: 7% auto 0;
  clip-path: url(#klat-maske);
}
.pote { position: absolute; width: 2.2rem; height: 2.2rem; fill: var(--koral); }
.pote-1 { right: 2%; bottom: 4%; transform: rotate(18deg); }
.pote-2 { right: 13%; bottom: -6%; transform: rotate(32deg) scale(.8); opacity: .75; }

@media (prefers-reduced-motion: no-preference) {
  .klat-gul { animation: vug 14s ease-in-out infinite alternate; }
  .klat-rosa { animation: vug 10s ease-in-out infinite alternate-reverse; }
}
@keyframes vug {
  from { transform: rotate(-3deg) scale(1); }
  to   { transform: rotate(4deg) scale(1.03); }
}

/* ---------- Bogen ---------- */
.bogen { background: var(--sol); }
.bogen h2 { color: var(--blaek); }
.bogen .etiket, .bogen .stor { color: #1F4A85; }
.bogen .bagom { border-color: var(--koral); color: var(--blaek); }
.undertitel {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin-top: -0.4rem;
}
.fakta { font-weight: 700; font-size: 1rem; margin-bottom: 1.75rem; }
.status { font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }

.omslag-plads { position: relative; width: min(100%, 19rem); margin: 0 auto; }
.omslag {
  aspect-ratio: 3 / 4.2;
  background: var(--blad);
  border: 2px solid var(--blaek);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 8px 8px 0 var(--blaek);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transform: rotate(-3deg);
}
.omslag::before { /* bogryg */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: rgba(0,0,0,.14);
  z-index: 2;
}
.omslag-top { padding: 1.3rem 1.2rem 1rem 1.7rem; }
.omslag-pote { width: 3.4rem; height: 3.4rem; fill: var(--sol); margin: auto 0 4rem 1.7rem; transform: rotate(-14deg); }
.omslag-forfatter {
  position: absolute;
  left: 1.7rem;
  bottom: 1rem;
  background: var(--sol);
  border: 2px solid var(--blaek);
  padding: .2rem .55rem;
}
.omslag-note {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--blaek-blod);
}
.omslag-titel {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 .6rem;
  text-shadow: 2px 2px 0 var(--blaek);
}
.omslag-under { font-weight: 700; color: var(--blaek); margin: 0; font-size: 1rem; }
.omslag-forfatter {
  margin: 0;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--blaek);
}
.klistermaerke {
  position: absolute;
  bottom: -1.2rem;
  right: -0.8rem;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  background: var(--koral);
  color: #fff;
  border: 2px solid var(--blaek);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.15;
  padding: .5rem;
  transform: rotate(12deg);
  margin: 0;
}

.mini-pote { width: 1.3rem; height: 1.3rem; fill: currentColor; flex: none; }

/* ---------- Om ---------- */
.om-billede { position: relative; width: min(80%, 20rem); margin: 0 auto; aspect-ratio: 3 / 4; }
.klat-groen { color: var(--blad-lys); inset: -8% -12%; width: 124%; height: 116%; }
.portraet-lille {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 46% 54% 44% 56% / 38% 40% 60% 62%;
  border: 3px solid var(--blaek);
  transform: rotate(3deg);
}

/* ---------- Samarbejde ---------- */
.samarbejde { background: var(--blad-lys); }
.samarbejde h2 { color: #2F5A1D; }
.samarbejde .etiket { color: #2F5A1D; }
.maerker {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.maerker li {
  padding: .45rem .9rem;
  border: 2px solid var(--blaek);
  border-radius: 4px;
  font-weight: 700;
  background: #fff;
}
.maerker li:nth-child(1) { background: var(--sol); transform: rotate(-2deg); }
.maerker li:nth-child(2) { background: var(--rosa); transform: rotate(1.5deg); }
.maerker li:nth-child(3) { background: #fff; transform: rotate(-1deg); }
.maerker li:nth-child(4) { background: #A9C8EE; transform: rotate(2deg); }
.maerker li:nth-child(5) { background: var(--sol); transform: rotate(-1.5deg); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--koral); color: var(--blaek); }
.kontakt h2 { color: #fff; text-shadow: 3px 3px 0 var(--blaek); }
.kontakt .etiket { color: var(--blaek); }
.mail {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 7vw, 2.4rem);
  color: var(--blaek);
  word-break: break-all;
  margin: .5rem 0 1.75rem;
}
.mail:hover { color: #fff; }
.sociale { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.sociale a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border: 2px solid var(--blaek);
  border-radius: 6px;
  background: var(--blush);
  color: var(--blaek);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--blaek);
}
.sociale a:hover { background: #fff; }
.sociale svg { width: 1.4rem; height: 1.4rem; }

/* ---------- Bund ---------- */
.bund {
  background: var(--blaek);
  color: var(--blush);
  padding: 1.75rem var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
}
.bund p { margin: 0; }
.bund .mini-pote { fill: var(--sol); }

/* ---------- Større skærme ---------- */
@media (min-width: 56rem) {
  .top {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 2rem;
  }
  .logo { text-align: left; }
  nav ul { gap: 2rem; }

  section { padding: 6rem 2rem; }
  .hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 7rem;
  }
  .hero-billede { width: 100%; }
  .to-spalter { grid-template-columns: 1fr 1.3fr; gap: 5rem; }
  .om .to-spalter { grid-template-columns: 1.3fr 1fr; }
}