@charset "utf-8";
/* CSS Document */

 /* ===== Flip booklet — copy the <style>, the .flipbook markup and the <script> into your site ===== */
  .flipbook {
    --fb-bg: #2c3038;
    --fb-btn: #ED1400;
    --fb-btn-hover: #545454;
    --fb-btn-text: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--fb-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    -webkit-user-select: none;
  }
  .flipbook:fullscreen { height: 100%; }
  .flipbook.fb-pseudo-fs { position: fixed; inset: 0; z-index: 99999; width: 100vw; height: 100dvh; }

  /* The stage is exactly the shape of two A4 pages side by side, so the book fills the full width */
  .fb-stage {
    flex: none;
    width: 100%;
    aspect-ratio: 1.4142 / 1;          /* 2 × A4 width  :  1 × A4 height */
    max-height: calc(100vh - 64px);    /* never taller than the screen */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2600px;
    touch-action: pan-y;
    box-sizing: border-box;
    padding: 20px;                     /* small margin so the page shadow isn't cut off */
    overflow: hidden;
  }
  .flipbook:fullscreen .fb-stage,
  .flipbook.fb-pseudo-fs .fb-stage { flex: 1; min-height: 0; aspect-ratio: auto; max-height: none; }

  .fb-book {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.5,.1,.2,1);
  }
  .fb-sheet {
    position: absolute;
    top: 0; left: 50%;
    width: 50%; height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.5,.1,.2,1);
  }
  .fb-sheet.flipped { transform: rotateY(-180deg); }

  .fb-face {
    position: absolute; inset: 0;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,.25);
  }
  .fb-face.back { transform: rotateY(180deg); }
  .fb-pages { display: none; }
  .fb-face img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; pointer-events: none; -webkit-user-drag: none;
  }
  /* soft shading near the spine */
  .fb-face::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; }
  .fb-face.front::after { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.14), transparent); }
  .fb-face.back::after  { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.14), transparent); }

  /* ---- controls ---- */
  .fb-controls {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 10px 12px; background: #2c3038;
  }
  .fb-btn {
    appearance: none; border: 0; cursor: pointer;
    background: var(--fb-btn); color: var(--fb-btn-text);
    padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, transform .1s, opacity .15s;
  }
  .fb-btn:hover:not(:disabled) { background: var(--fb-btn-hover); }
  .fb-btn:active:not(:disabled) { transform: scale(.96); }
  .fb-btn:disabled { opacity: .35; cursor: default; }
  .fb-btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
  .fb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .fb-status { color: #FFF; font-size: 14px; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
  .fb-fs { margin-left: 8px; }

  @media (max-width: 520px) {
    .fb-btn .lbl { display: none; }
    .fb-btn { padding: 10px 14px; }
    .fb-status { min-width: 80px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fb-book, .fb-sheet { transition-duration: .01s; }
  }
 a.fb-btn { text-decoration: none; }
.fb-home { margin-left: 8px; }
a.fb-btn { text-decoration: none; }
.fb-home { margin-left: 8px; }
/* ---- single-page view (mobile) ---- */
.fb-single {
  display: none;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  overflow: hidden;
}
.fb-single img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.flipbook.fb-single-mode .fb-book   { display: none; }
.flipbook.fb-single-mode .fb-single { display: block; }

/* the stage becomes one portrait A4 page instead of two side by side */
.flipbook.fb-single-mode:not(:fullscreen):not(.fb-pseudo-fs) .fb-stage {
  aspect-ratio: 1 / 1.4142;
  max-height: calc(100dvh - 64px);
  padding: 8px;
}