/* ==================================================================
   BOGSIDEN - "opslaget"
   Samme tema som resten af sitet: navy flade, hvid tekst, blå som
   eneste accent, SF Pro til display, system-mono til mikro-labels,
   blå prik efter titlen. Motion-grammatikken er ogsaa sitets egen:
   .hero-fade-in til indgangen, clip-path-afdaekning af titlen,
   is-visible paa scroll, guld-sheen og view()-drift paa omslaget.

   Det NYE her er kompositionen, ikke udtrykket:
     - bogen staar centreret som et opslag, ikke i en hoejre spalte
     - nedtaellingen er et baand langs bunden af skaermen
     - indholdet nedenunder er nummererede raekker, ikke broedtekst
     - et citat-baand og en fakta-stribe bryder rytmen paa vejen ned
   ================================================================== */
:root {
  --bp-ink:   #ffffff;
  --bp-soft:  rgba(255,255,255,0.64);
  --bp-dim:   rgba(255,255,255,0.5);
  --bp-rule:  rgba(255,255,255,0.14);
  --bp-rule-d: rgba(26,42,94,0.13);
  --bp-stage: 1240px;
}

body { background: var(--white); }

/* Sitets mikro-label, uaendret grammatik: mono, versaler, wide tracking. */
.bp-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}

/* -- OPSLAGET -----------------------------------------------------
   Tre raekker: labels i toppen, opslaget i midten, nedtaelling i bunden.
   Midten er centreret - det er dét greb der adskiller siden fra
   forsidens bog-sektion, hvor alt er venstrestillet. */
.bp-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* To raekker: opslaget og nedtaellingen. Labelraekken i toppen er ude -
     datoen staar i venstre mikro-spalte, og bogen skal have fladen. */
  grid-template-rows: 1fr auto;
  gap: clamp(1rem, 2.4vh, 1.8rem);
  background: var(--navy);
  color: var(--bp-ink);
  padding: calc(var(--nav-h) + clamp(0.9rem, 2.4vh, 1.8rem)) var(--pad-x) clamp(1rem, 2.4vh, 1.75rem);
  overflow: clip;
}

/* Opslaget er tre lag: wordmarket bagerst, bogen ovenpaa i midten, og
   to mikro-spalter der flankerer den. Wordmarket er sat saa stort at det
   skaeres af begge skaermkanter - bogen daekker kun midten, saa ordet kan
   stadig laeses. */
.bp-stage__core {
  position: relative;
  display: grid;
  justify-items: center;
  /* align-content, ikke align-items: med normal/stretch straekker auto-
     raekkerne sig ud i hele den ledige hoejde, og knappen blev skubbet
     ~90px vaek fra bogen. Nu beholder raekkerne deres egen hoejde, og
     blokken centreres som helhed. */
  align-content: center;
  width: 100%;
  max-width: var(--bp-stage);
  margin-inline: auto;
  gap: clamp(1.5rem, 3.4vh, 2.6rem);
}

.bp-hero {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

/* Wordmarket ligger bag bogens OEVERSTE halvdel, saa mikro-spalterne
   nedenunder aldrig kommer til at staa oven i bogstaverne. */
.bp-hero__type {
  position: absolute;
  /* 35% af opslagets hoejde: ordet ligger bag bogens oeverste tredjedel,
     og mikro-spalterne nedenunder rammer det aldrig - heller ikke paa
     lave vinduer, hvor bogen (og dermed opslaget) er lavere. */
  top: 35%;
  left: 50%;
  translate: -50% -50%;
  z-index: 0;
  margin: 0;
  font-family: var(--sf);
  /* Ordet fylder 8,98 x sin egen grad i bredden (maalt). 10.4vw giver
     derfor ca. 93% af vinduet - stort nok til at det skaerer helt ud i
     kanterne, men ikke saa stort at foerste og sidste bogstav klippes af. */
  font-size: clamp(2.6rem, min(10.4vw, 25vh), 13rem);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bp-ink);
  pointer-events: none;
  clip-path: inset(0 0 108% 0);
  transition: clip-path 1.1s var(--ease-out) 200ms;
}
.bp-stage.is-visible .bp-hero__type { clip-path: inset(0 0 -20% 0); }

.bp-hero__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
}

/* Mikro-spalterne staar i bogens nederste halvdel - derfor align-items:end
   paa raekken og bundjustering her. */
/* Spalterne flugter med bogens underkant - det holder dem laengst muligt
   vaek fra wordmarket og giver opslaget en fast bundlinje. */
.bp-side {
  display: grid;
  gap: clamp(0.9rem, 2.2vh, 1.5rem);
  margin: 0;
}
.bp-side--right { justify-items: end; text-align: right; }
.bp-side__item { border-top: 1px solid var(--bp-rule); padding-top: 0.7rem; }
.bp-side__key { color: var(--blue); }
/* Med ét punkt i hver spalte skal tallet selv baere den - graden er
   skruet op, saa "14. januar 2027" og "199 kr." laeses som noegletal og
   ikke som en fodnote. Labelen bliver paa mikro-skala: det er kontrasten
   mellem de to der goer det til sitets typografi. */
.bp-side__value {
  margin: 0.45rem 0 0;
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* -- Omslaget -----------------------------------------------------
   Samme behandling som paa forsiden: let rotation, sitets skygge,
   guld-sheen naar det kommer frem, og en rolig drift paa scroll. */
/* Indgangen ligger paa wrapperen, ikke paa figuren: .hero-fade-in saetter
   baade opacity:0 OG en animation, og scroll-driften nedenfor saetter sin
   egen animation paa figuren. Laa de samme sted, vandt driften - og
   omslaget blev staaende usynligt paa opacity:0. */
/* Perspektivet ligger paa wrapperen, saa figurens egen transform kan
   rotere i rummet uden at kaempe med indgangs-animationen ovenover. */
.bp-cover-wrap { display: flex; perspective: 1100px; }

.bp-cover {
  --rx: 0deg;   /* vip om x-aksen  - styret af markoerens y */
  --ry: 0deg;   /* vip om y-aksen  - styret af markoerens x */
  --lift: 0px;  /* loeft mod beskueren naar man er paa den */
  position: relative;
  margin: 0;
  display: flex;
  transform: rotate(-3deg) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  transform-style: preserve-3d;
  /* INGEN transition paa transform. Vaerdierne saettes hver frame af JS,
     og en overgang ovenpaa ville starte forfra ved hvert frame - det er
     dét der fik bogen til at glide sjusket efter markoeren. Udjaevningen
     ligger i stedet i JS, som et vaegtet gennemsnit mod maalet. */
  will-change: auto;
}
.bp-cover.is-tilting { will-change: transform; }
.bp-cover img {
  display: block;
  width: auto;
  height: min(50svh, 30vw);
  max-width: 100%;
  object-fit: contain;
  /* Kraftigere end paa forsiden med vilje: bogen skal loefte sig fri af
     wordmarket, den ligger oven paa. */
  filter: drop-shadow(0 40px 70px rgba(5,10,28,0.7)) drop-shadow(0 10px 24px rgba(5,10,28,0.5));
}

/* Folieglimtet fra forsiden: laget maskeres med omslagets egen
   alpha-kanal, saa glimtet kun loeber hen over bogen. */
.bp-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.58) 48%,
    rgba(255,255,255,0.14) 55%,
    rgba(255,255,255,0) 62%
  );
  background-size: 280% 100%;
  background-repeat: no-repeat;
  /* --sheen 0..1 skubber glimtet fra hoejre mod venstre. Det er den samme
     akse som indgangs-sweepet koerer paa, saa de to ser ens ud. */
  background-position: calc(175% - var(--sheen, 0) * 250%) 0;
  mix-blend-mode: screen;
  -webkit-mask-image: url("bog-omslag.webp");
          mask-image: url("bog-omslag.webp");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@keyframes bpSheen {
  from { background-position: 175% 0; }
  to   { background-position: -75% 0; }
}
/* :not(.is-swept) - ellers starter indgangs-sweepet forfra HVER gang
   .is-tilting fjernes, fordi animation-egenskaben saa gendannes. Det gav
   et gyldent glimt hen over bogen hver gang man flyttede markoeren vaek. */
.bp-stage.is-visible .bp-cover:not(.is-swept)::after { animation: bpSheen 1.6s var(--ease-out) 700ms 1 both; }
/* Naar markoeren overtager, skal keyframe-sweepet slippe background-position,
   ellers vinder animationen over variablen. */
.bp-cover.is-tilting::after { animation: none; }

/* -- Scroll: parallakse mellem ordet bagved og bogen foran --------
   Det er dét der goer "bagved" til noget man kan maerke: de to lag
   flytter sig forskelligt, mens plakaten ruller vaek. Timelinen er
   scroll() og ikke view(), fordi opslaget ligger OEVERST paa siden -
   med view() ville bogen allerede staa forskudt ved scroll 0.
   Browsere uden scroll-drevne animationer faar den statiske opstilling. */
.bp-cover-scroll { display: flex; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bp-cover-scroll {
      animation: bpCoverScroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    /* Dæmpet: bogen bærer allerede markoer-bevaegelsen, saa parallaksen
       skal kun vaere den lille forskel mod ordet bagved. */
    @keyframes bpCoverScroll {
      from { transform: translateY(0); }
      to   { transform: translateY(-32px); }
    }

    .bp-hero__type {
      animation: bpTypeScroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    /* translate-egenskaben staar for centreringen (-50%, -50%), saa
       transform er fri til at baere bevaegelsen. */
    @keyframes bpTypeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(3.5%); }
    }
  }
}

.bp-title__dot {
  display: inline-block;
  width: 0.1em;
  height: 0.1em;
  margin-left: 0.04em;
  border-radius: 50%;
  background: var(--blue);
  vertical-align: baseline;
}

.bp-stage__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.5;
  color: var(--bp-soft);
  text-wrap: pretty;
}

/* -- Knap: sitets egen pille ---------------------------------------- */
.bp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(47,111,224,0.35);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.bp-cta:hover {
  background: var(--blue-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(47,111,224,0.45);
}
.bp-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.bp-cta__price {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

/* -- Nedtaellingen som baand langs bunden -------------------------
   Paa forsiden staar den i en spalte. Her loeber den paa tvaers med
   streg over, saa den laeses som en status paa hele skaermen. */
.bp-ticker {
  display: flex;
  justify-content: center;
  max-width: var(--bp-stage);
  width: 100%;
  margin-inline: auto;
  padding-top: clamp(0.7rem, 1.8vh, 1.15rem);
  border-top: 1px solid var(--bp-rule);
}
.bp-ticker .countdown-block { margin: 0; padding: 0; border: 0; }
.bp-ticker .countdown {
  justify-content: center;
  gap: 0.5rem clamp(1.2rem, 3vw, 2.6rem);
  --book-ink: var(--bp-ink);
  --book-meta: var(--bp-dim);
}
.bp-ticker .countdown__value { font-size: clamp(1.15rem, 1.8vw, 1.6rem); }
.bp-ticker .countdown__label { font-size: 0.62rem; letter-spacing: 0.16em; }
.bp-ticker .countdown__released {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bp-dim);
}

.bp-wrap { max-width: var(--bp-stage); margin-inline: auto; }

/* -- CITAT-BAAND ---------------------------------------------------- */
/* -- OM BOGEN ------------------------------------------------------
   Mikro-label i venstre spalte, teksten i hoejre - sitets egen maade at
   maerke en sektion paa. Ligger paa samme lyse flade som citatet og
   adskilles fra det af en haarfin streg, saa de to laeses som ét lyst
   kapitel mellem de to navy flader frem for som to striber. */
.bp-about {
  background: var(--white);
  color: var(--navy);
  padding: clamp(4rem, 12vh, 7.5rem) var(--pad-x) 0;
}
.bp-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
}
.bp-about__key { color: var(--blue); }
.bp-about__body { max-width: 46ch; }

/* Foerste afsnit er et helt blurb-afsnit, ikke en overskrift. Sat i
   display-grad blev det seks linjer og en mur - her er det ét trin over
   broedteksten: navy blaek og lidt stoerre, men stadig til at laese. */
.bp-about__lead {
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.6rem);
  font-size: clamp(1.12rem, 1.45vw, 1.35rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: pretty;
}
.bp-about__prose {
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Sidste linje er en opfordring, ikke broedtekst - den faar navy blaek og
   mere vaegt, saa afsnittet ikke ender i graa. */
.bp-about__kicker {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* -- CITAT: sidens lyse pause --
   Opslaget og afslutningen er begge navy. Uden en lys flade imellem
   loeb de sammen til én stor moerk masse, og citatet forsvandt i den.
   Her er rollerne byttet om: hvid flade, navy blaek, blaa mikro-label. */
.bp-quote {
  /* Egen flade frem for samme hvide som "Om bogen" ovenover: to lyse
     sektioner i praecis samme farve laeste som ét langt afsnit. #eef4ff er
     sitets egen lyseblaa (samme som badge'en paa kursuskortene), og
     stregen i toppen giver panelet en skarp kant. */
  background: #eef4ff;
  border-top: 1px solid rgba(47,111,224,0.2);
  color: var(--navy);
  padding: clamp(3rem, 8vh, 5rem) var(--pad-x) clamp(4rem, 12vh, 7.5rem);
}
.bp-quote__inner {
  max-width: var(--bp-stage);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.6rem);
  align-items: center;
}
.bp-quote__portrait {
  width: clamp(5rem, 8vw, 7.5rem);
  /* height:auto er ikke pynt: uden den vinder height-attributten paa
     <img> (981), og aspect-ratio bliver aldrig brugt - portraettet blev
     en 101x981 px strimmel. */
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  background: rgba(26,42,94,0.08);
}
.bp-quote__text {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.bp-quote__by { margin: 1.1rem 0 0; color: var(--blue); }

/* -- AFSLUTNING ----------------------------------------------------- */
.bp-close {
  background: var(--navy);
  color: var(--bp-ink);
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--pad-x);
  text-align: center;
}
.bp-close__title {
  font-family: var(--sf);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 clamp(1.5rem, 3vw, 2.2rem);
}
.bp-close .bp-label { color: var(--bp-dim); }

/* -- Indgang paa scroll -------------------------------------------
   Samme opskrift som forsidens bog-sektion: JS saetter is-visible,
   og uden JS staar alt synligt fra start i stedet for usynligt. */
[data-reveal] {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.18s var(--ease-out), translate 0.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 12ms);
}
[data-reveal].is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .bp-hero__type, .bp-stage.is-visible .bp-hero__type { clip-path: none; transition: none; }
  .bp-cover, .bp-cta { transition: none; }
  .bp-cover { transform: rotate(-3deg); }
}

/* -- RESPONSIV ------------------------------------------------------ */
@media (max-width: 820px) {
  .bp-stage { min-height: auto; padding-bottom: clamp(1.5rem, 4vh, 2.25rem); }
  .bp-cover img { height: auto; width: min(52vw, 230px); }
  /* Paa mobil er der ikke plads til tre spalter - info'en laegger sig under
     bogen som to kolonner, og wordmarket bliver to linjer i stedet for én. */
  .bp-hero__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "bog bog" "ven hoj";
    justify-items: center;
    align-items: start;
    row-gap: clamp(1.25rem, 3vh, 2rem);
  }
  .bp-cover-wrap { grid-area: bog; }
  .bp-side--left  { grid-area: ven; justify-items: start; }
  .bp-side--right { grid-area: hoj; }
  .bp-side { width: 100%; margin-bottom: 0; }
  /* Bagved virker kun naar der er plads paa siderne af bogen. Paa mobil
     daekker bogen naesten hele bredden, saa ordet ville ligge som stoej
     bag den - her staar det foran, over bogen, i fuld styrke. */
  .bp-hero { display: block; }
  .bp-hero__type {
    position: static;
    translate: none;
    white-space: normal;
    text-align: center;
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: 0.88;
    margin-bottom: clamp(1rem, 3vh, 1.6rem);
  }
  .bp-ticker .countdown { gap: 0.4rem 1.1rem; }
  .bp-about__grid { grid-template-columns: minmax(0, 1fr); }
  .bp-quote__inner { grid-template-columns: minmax(0, 1fr); }
  /* Paa telefon scroller man hurtigt med tommelfingeren, saa indgangene
     skal naesten ikke kunne ses - teksten skal bare vaere der. */
  [data-reveal] {
    translate: 0 0;
    transition: opacity 0.12s var(--ease-out);
    transition-delay: 0ms;
  }
  .bp-stage .hero-fade-in {
    animation-duration: 0.35s;
    animation-delay: calc(var(--delay, 0ms) * 0.3);
  }
  .bp-hero__type { transition: clip-path 0.5s var(--ease-out) 0ms; }
}

/* Timeren paa telefon: fire celler paa én centreret linje. Det faelles
   2x2-gitter fra style.css (under 440px) venstrestillede cellerne i hver
   kolonne, saa baandet ikke stod midt paa skaermen. */
@media (max-width: 440px) {
  .bp-ticker .countdown {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 clamp(0.7rem, 4vw, 1.1rem);
  }
  .bp-ticker .countdown__cell { justify-content: center; }
  .bp-ticker .countdown__released { text-align: center; }
}
@media (max-width: 360px) {
  .bp-ticker .countdown { gap: 0 0.55rem; }
  .bp-ticker .countdown__value { font-size: 1.05rem; }
  .bp-ticker .countdown__label { font-size: 0.56rem; letter-spacing: 0.08em; }
}