/* ---------- Bla i babydagboken (flipbook) ----------
   Showcase of one finished book. Markup lives in index.html, behaviour in
   js/flipbook.js.

   Sizing: the book keeps a fixed aspect ratio, so a page is always 25:32 no
   matter the viewport — a spread on desktop, a single page below 860px of
   stage width (js/flipbook.js decides and sets .is-single). Everything inside
   a page is in em, and the em is a share of the page width (container query),
   so a page looks the same at 360px and 1440px, only smaller. */

.flipbook { position: relative; overflow: hidden; }

.flipbook__deco {
  position: absolute;
  right: -30px;
  bottom: 30px;
  width: 200px;
  opacity: 0.12;
  transform: rotate(18deg);
  pointer-events: none;
}

.flipbook__inner { max-width: 1060px; gap: 22px; position: relative; }
.flipbook__kicker { font-size: var(--text-kicker); }
.flipbook__lead { margin: 0; color: var(--text-secondary); font-size: 17px; max-width: 560px; text-align: center; }
.flipbook__note { margin: 0; color: var(--text-secondary); font-size: 15px; font-style: italic; text-align: center; }

/* The pages themselves live here, out of view; the book is built from clones.
   Their photos carry data-src rather than src, so nothing is fetched for this
   copy — flipbook.js hands the real URL to the clone, which loads lazily. */
.flipbook__source { display: none; }

.flipbook__stage { width: 100%; max-width: 1000px; margin: 14px auto 0; }

.flipbook__book {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 25 / 16;   /* two 25:32 pages side by side */
  perspective: 2800px;
  text-align: left;
  touch-action: pan-y;
}
.flipbook__book.is-single { max-width: 460px; aspect-ratio: 25 / 32; }
.flipbook__book:focus-visible { outline: 2px solid var(--sage); outline-offset: 6px; border-radius: 12px; }

/* ---------- Book mechanics ---------- */
.bd-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.33, .02, .16, 1);
}

.bd-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.33, .02, .16, 1);
}
.bd-leaf.is-flipped { transform: rotateY(-180deg); }
.bd-leaf.is-single { width: 100%; }
/* A single-page leaf pivots on the stage's own left edge, which is right for
   an ordinary turn (the leaf swings out of frame, revealing the next one
   underneath). The closing leaf's own back face IS the content to reveal —
   pivoting there would carry it off-frame too — so it turns on its own
   centre instead, keeping the same footprint as it flips face to back. */
.bd-leaf.is-closing { transform-origin: center center; }

.bd-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  background-color: var(--surface-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px 12px 12px 3px;
  transform: translateZ(0.6px);
}
/* Only the leaf on top of each pile casts a shadow. Every leaf casting one
   stacks a dozen identical shadows into a halo around the closed book. */
.bd-leaf.is-top > .bd-face {
  box-shadow: 0 18px 34px -24px rgba(62, 58, 51, 0.6), 0 2px 5px -3px rgba(62, 58, 51, 0.16);
}
.bd-face.is-back {
  transform: rotateY(180deg) translateZ(0.6px);
  border-radius: 12px 3px 3px 12px;
}
.bd-leaf.is-single .bd-face { border-radius: 12px; }
.bd-leaf.is-single .bd-face.is-back { background-color: #F5EFE1; }

/* Gutter shading. The spine sits at the face's own left edge on a front face
   and at its right edge on a back face (the back is mirrored by rotateY). */
.bd-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(62, 58, 51, 0.16), rgba(62, 58, 51, 0) 8%);
}
.bd-face.is-back::after { background: linear-gradient(to left, rgba(62, 58, 51, 0.16), rgba(62, 58, 51, 0) 8%); }
/* The two hard covers get a bound spine instead: dark board edge, the highlight
   along the hinge ridge, then the crease where the cover folds open. */
.bd-face.is-hard::after {
  background: linear-gradient(to right,
    rgba(62, 58, 51, 0.30) 0,
    rgba(62, 58, 51, 0.10) 2.2%,
    rgba(255, 255, 255, 0.32) 3.4%,
    rgba(62, 58, 51, 0.13) 4.6%,
    rgba(62, 58, 51, 0) 9%);
}
.bd-face.is-hard.is-back::after {
  background: linear-gradient(to left,
    rgba(62, 58, 51, 0.30) 0,
    rgba(62, 58, 51, 0.10) 2.2%,
    rgba(255, 255, 255, 0.32) 3.4%,
    rgba(62, 58, 51, 0.13) 4.6%,
    rgba(62, 58, 51, 0) 9%);
}
/* One page at a time has no gutter — but a cover still has a spine. */
.bd-leaf.is-single .bd-face::after { content: none; }
.bd-leaf.is-single .bd-face.is-hard::after { content: ""; }

/* Fore-edge: the pages still stacked on either side, peeking out past the
   leaf on top. JS sets the width from how many leaves are left on that side. */
.bd-block {
  position: absolute;
  top: 7px;
  bottom: 7px;
  z-index: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to right, #E8DFC9 0 1px, #FBF6E9 1px 3px);
  box-shadow: 0 10px 20px -16px rgba(62, 58, 51, 0.55);
  transition: width 0.5s ease, opacity 0.5s ease, right 0.5s ease, left 0.5s ease;
}
.bd-block--right { right: 0; border-radius: 0 7px 7px 0; }
.bd-block--left { left: 0; border-radius: 7px 0 0 7px; }
/* One page at a time is always fully covered by the leaf on show, so this
   stack never shows at rest — it only exists to peek from the spread's other
   half. The closing leaf turns on its own centre (see .bd-leaf.is-closing),
   which briefly foreshortens it on both sides as it rotates, exposing this
   otherwise-hidden stack. Simplest fix: it has no job here, so it's off. */
.flipbook__book.is-single .bd-block { display: none; }

/* ---------- Corner curl (flip hint) ----------
   A small fold peeling off the bottom-right corner of the page on show, to
   say the page can be turned. It lives on the stage rather than inside a
   leaf, so it rides the same translateX as the pages and never joins the
   leaves' 3D stack — translateZ lifts it in front of the top face.

   --curl-p drives everything: 0 flat, 1 fully peeled. Hover sets it to 1, a
   drag sets it to how far the drag has come, and go() drops it back to 0. */
.bd-curl {
  --curl-p: 0;
  --curl-w: 7.5%;                /* of the stage; a page is half of that */
  --curl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --curl-in: 0.34s;
  --curl-out: 0.24s;
  --curl-shadow: 0.34;
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--curl-w);
  aspect-ratio: 1;
  z-index: 5;
  transform: translateZ(2px);
  pointer-events: none;
  overflow: hidden;
  border-bottom-right-radius: 12px;
}
.flipbook__book.is-single .bd-curl { --curl-w: 15%; }
.bd-curl.is-off { display: none; }

/* The fold grows out of the corner rather than fading in. */
.bd-curl__inner {
  position: absolute;
  inset: 0;
  transform: scale(var(--curl-p));
  transform-origin: 100% 100%;
  transition: transform var(--curl-in) var(--curl-ease);
}
.bd-curl.is-dragging .bd-curl__inner { transition: none; }
.bd-curl.is-releasing .bd-curl__inner { transition: transform var(--curl-out) ease-in; }

/* What the lifted corner uncovers — the next page, sitting in the shadow of
   the flap. Darkest right under the crease, opening up toward the edge. */
.bd-curl__under {
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(315deg,
      rgba(62, 58, 51, 0.05) 0%,
      rgba(62, 58, 51, 0.22) 40%,
      rgba(62, 58, 51, calc(var(--curl-shadow) * 1.7)) 78%,
      rgba(62, 58, 51, calc(var(--curl-shadow) * 2.1)) 100%),
    linear-gradient(#E6DCC6, #E6DCC6);
}

/* The flap: the back of the sheet, folded over the diagonal. Two things stop
   it reading as a flat mirrored triangle — the crease bows outward past the
   diagonal (the 58% 58% vertex), so the paper looks bent rather than creased
   flat, and the gradient runs dull at the free tip to bright along the fold,
   which is where light would catch a bend. */
.bd-curl__flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 54% 54%, 0 100%);
  background: linear-gradient(135deg,
    #CFC5AC 0%,
    #DED4BD 20%,
    #EBE2CD 46%,
    #F6F0E1 70%,
    #FDFAF1 90%,
    #FFFEF9 100%);
  filter:
    drop-shadow(-1px -1px 1px rgba(62, 58, 51, 0.28))
    drop-shadow(-4px -4px 9px rgba(62, 58, 51, calc(var(--curl-shadow) * 1.1)));
}

@media (prefers-reduced-motion: reduce) {
  .bd-curl__inner { transition: none; }
}

/* Shadow cast across the leaf while it is turning. */
.bd-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.15s cubic-bezier(.33, .02, .16, 1);
  background: linear-gradient(to left, rgba(62, 58, 51, 0.16), rgba(62, 58, 51, 0) 42%);
}
.bd-leaf.is-turning .bd-shade { opacity: 1; }

/* Click targets over each half of the book. */
.bd-zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 60;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.bd-zone--prev { left: 0; }
.bd-zone--next { right: 0; }

/* ---------- A page ---------- */
.bd-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-card);
  /* 1em ≈ 16px on a 500px-wide page, and scales with the page from there. */
  font-size: clamp(14px, 3.2cqw, 17px);
  line-height: 1.6;
}
.bd-page--cover { background: #FBF2DA; }
.bd-page--tinted { background: var(--surface-card-tinted); }

.bd-page__body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2.2em 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.bd-page__body--centered { align-items: center; justify-content: center; text-align: center; }

.bd-page__label {
  font-size: 0.69em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bd-page__label--sage { color: var(--sage-deep); }

.bd-page__title { margin: 0; font-size: 1.56em; font-weight: 500; line-height: 1.25; }
.bd-page__caption { font-family: var(--font-script); font-size: 1.38em; line-height: 1.4; color: var(--text-primary); }
.bd-page__meta { font-size: 0.82em; font-style: italic; color: var(--text-muted); }
.bd-page__note { margin: 0; color: var(--text-secondary); font-size: 0.94em; }
.bd-page__rule { width: 2.9em; height: 1px; background: #D8D1C0; }
.bd-page__subtitle { font-size: 1.19em; font-weight: 500; }
.bd-page__deco { position: absolute; right: 0.6em; bottom: 0.5em; width: 7.5em; opacity: 0.13; pointer-events: none; }

/* Photo frames. flex:1 + min-height:0 lets a photo take the leftover height. */
.bd-photo { flex: 1; min-height: 0; border-radius: 0.75em; overflow: hidden; }
.bd-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Some photos need to show in full rather than crop to fill the frame. */
.bd-photo--contain { background: var(--surface-card); }
.bd-photo--contain img { object-fit: contain; }
/* An oversized top radius clamps to a perfect semicircle at whatever width
   the frame renders at, giving the top of the photo a rounded arch. */
.bd-photo--arch { border-radius: 999px 999px 0.75em 0.75em; }

/* A square photo, centred in whatever height the page has left over. */
.bd-frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bd-frame__square { aspect-ratio: 1 / 1; max-width: 100%; max-height: 100%; border-radius: 1em; overflow: hidden; }
.bd-frame__square img { width: 100%; height: 100%; object-fit: cover; }

.bd-pair { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 0.75em; }
/* Page 4: one big photo left, two stacked on the right, each with a "add photo" chip. */
.bd-swap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.62em; }
.bd-swap .bd-photo { position: relative; border-radius: 0.62em; }
.bd-swap__hero { grid-row: 1 / 3; }
.bd-swap__small img { object-position: 78% 50%; }
.bd-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7em;
  border: 1.5px dashed var(--border-dashed); border-radius: 0.9em;
  background: var(--surface-card); color: var(--text-muted);
  font-style: italic; font-size: 1.05em; text-align: center;
}
.bd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.62em; }
.bd-grid .bd-photo { border-radius: 0.62em; }

/* Photo spread (pages 10–11): frames only, no type. Tighter page padding than
   a text page so the grid gets the room. */
.bd-page__body--photos { padding: 1.63em 1.5em; gap: 0; }

.bd-grid6 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 0.75em;
}

.bd-mosaic {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  grid-template-rows: 1.35fr 1fr 1fr;
  gap: 0.75em;
}
.bd-mosaic__hero { grid-column: 1; grid-row: 1 / span 2; padding: 0.38em; }
.bd-mosaic__small { grid-column: 2; grid-row: 1; }
.bd-mosaic__tall { grid-column: 2; grid-row: 2 / span 2; }
.bd-mosaic__wide { grid-column: 1; grid-row: 3; }

/* The polaroid treatment without the caption strip. */
.bd-snap {
  min-height: 0;
  background: var(--surface-polaroid);
  padding: 0.31em;
  border-radius: 0.31em;
  box-shadow: var(--shadow-card);
}
.bd-snap img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.13em; }

/* Cover */
.bd-cover__brand { font-size: 0.69em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); }
.bd-cover__art { flex: 1; min-height: 0; width: 88%; object-fit: contain; mix-blend-mode: multiply; }
.bd-cover__name { font-family: var(--font-script); font-size: 3.1em; font-weight: 600; color: var(--sage-deeper); line-height: 1.22; }
.bd-cover__date { font-size: 0.94em; font-style: italic; color: var(--text-secondary); }

/* Title page */
/* Barnets navn er håndskriften i boken — en penselskrift, ikke versaler.
   Bokstavene henger sammen, så ingen letter-spacing her. */
.bd-title__name {
  font-family: 'Yellowtail', var(--font-script), cursive;
  font-size: 2.9em;
  font-weight: 400;
  line-height: 1.3;
  color: #3A352C;
}
.bd-title__facts { color: var(--text-secondary); font-size: 1em; line-height: 1.8; }

/* The three birth facts, as cards with a line icon each. */
.bd-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.88em;
  width: 100%;
  max-width: 20em;
  margin-top: 0.38em;
}
.bd-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.88em 0.38em;
  background: var(--surface-card-tinted);
  border: 1px solid var(--border-card);
  border-radius: 1em;
}
.bd-fact__icon { width: 1.88em; height: 1.88em; flex-shrink: 0; color: var(--sage); }
.bd-fact__value { font-size: 0.94em; color: var(--text-primary); }
/* Pinned to the bottom of the card so the three labels line up even when a
   value wraps to two lines. */
.bd-fact__label { margin-top: auto; font-size: 0.69em; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); }

/* Milestone list */
.bd-firsts { display: flex; flex-direction: column; gap: 0.75em; margin-top: 0.25em; }
.bd-firsts__row { display: flex; align-items: baseline; gap: 0.75em; border-bottom: 1px solid var(--border-card); padding-bottom: 0.62em; }
.bd-firsts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-firsts__dot { width: 0.5em; height: 0.5em; border-radius: 50%; flex-shrink: 0; }
.bd-firsts__what { font-size: 1em; flex: 1; }
.bd-firsts__when { font-size: 0.88em; font-style: italic; color: var(--text-muted); }

/* Polaroid */
.bd-polaroid {
  background: var(--surface-polaroid);
  padding: 0.62em 0.62em 0;
  border-radius: 0.38em;
  box-shadow: var(--shadow-card);
  transform: rotate(-1.5deg);
  width: 84%;
}
.bd-polaroid__frame { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.19em; }
.bd-polaroid__frame img { width: 100%; height: 100%; object-fit: cover; }
.bd-polaroid__caption { padding: 0.75em 0.25em 0.88em; text-align: center; font-family: var(--font-script); font-size: 1.31em; color: var(--text-primary); }

/* Letter */
.bd-letter { font-family: var(--font-script); font-size: 1.31em; line-height: 1.65; color: var(--text-primary); }
.bd-letter p { margin: 0 0 0.6em; }
.bd-letter p:last-child { margin-bottom: 0; }

/* Closing + back cover */
.bd-closing__year { font-family: var(--font-script); font-size: 2.4em; color: var(--sage-deeper); }
.bd-closing__text { margin: 0; color: var(--text-secondary); font-size: 1em; max-width: 19em; }
.bd-back__art { height: 26%; width: auto; object-fit: contain; }
.bd-back__wordmark { font-family: var(--font-script); font-size: 1.75em; font-weight: 600; color: var(--sage-deeper); }
.bd-back__tagline { font-size: 0.88em; font-style: italic; color: var(--text-secondary); }
.bd-back__domain { font-size: 0.69em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.62em; }

/* ---------- Controls ---------- */
.flipbook__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 26px; }

.flipbook__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: transparent;
  color: var(--sage-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.flipbook__nav:hover:not(:disabled) { background: var(--sage); color: var(--text-on-sage); }
.flipbook__nav:disabled { opacity: 0.35; cursor: default; }

.flipbook__counter { min-width: 130px; text-align: center; font-size: 15px; font-style: italic; color: var(--text-secondary); }

@media (max-width: 560px) {
  .flipbook__deco { display: none; }
  .flipbook__controls { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-stage, .bd-leaf, .bd-shade { transition: none; }
}