/* ==========================================================================
   THE PRIME — HTML5 Flipbook
   Self-contained viewer styles. No external dependencies.
   ========================================================================== */

:root{
  --fb-bg:#0d2b2b;
  --fb-bg-2:#08201f;
  --fb-accent:#c9a961;
  --fb-text:#f2efe9;
  --fb-text-dim:rgba(242,239,233,.62);
  --fb-ui:rgba(255,255,255,.10);
  --fb-ui-hover:rgba(255,255,255,.20);
  --fb-shadow:0 18px 50px rgba(0,0,0,.55);
  --fb-bar-h:64px;      /* tall enough for 44px controls with breathing room */
  --fb-ease:cubic-bezier(.4,0,.2,1);
}

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

html,body{height:100%}
body.fb-body{
  margin:0;
  background:radial-gradient(120% 100% at 50% 0%,var(--fb-bg) 0%,var(--fb-bg-2) 100%);
  color:var(--fb-text);
  font:400 14px/1.5 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}

/* ---------- shell ---------- */
.fb{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.fb__stage{
  position:relative; flex:1 1 auto; min-height:0;
  padding:24px 68px 12px;       /* clears the side arrows; read back by fitBook() */
  overflow:hidden;              /* keeps the thumbnail drawer off-stage when closed */
}
@media (max-width:900px){ .fb__stage{ padding:12px } }

/* ---------- the book ---------- */
/* page-flip drives the book's height from its width alone (it uses a
   padding-bottom aspect box) and forces width:100% inline on its own element,
   so the only way to make the book respect the available HEIGHT is to set the
   width of a wrapper around it. fitBook() in flipbook.js does that. */
.fb__fit{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}
.fb__fit .fb__book{ touch-action:pan-y }

/* page-flip's own required styles (vendored so no extra file is needed) */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);-ms-touch-action:pan-y;touch-action:pan-y}
.stf__wrapper{position:relative;display:block;box-sizing:border-box;-webkit-perspective:2000px;perspective:2000px}
.stf__wrapper canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;box-sizing:border-box;overflow:hidden;perspective:2000px;left:0;top:0;width:100%;height:100%}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0;width:100%;height:100%}

/* a single leaf */
.fb-page{
  background:#fff;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.fb-page img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .35s var(--fb-ease);
  pointer-events:none;
}
.fb-page img.is-loaded{opacity:1}
/* placeholder shimmer while a page loads */
.fb-page::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#eceae5 20%,#f6f4f0 40%,#eceae5 60%);
  background-size:220% 100%;
  animation:fb-shimmer 1.4s linear infinite;
  transition:opacity .35s var(--fb-ease);
  pointer-events:none;
}
.fb-page.is-ready::after{opacity:0}
@keyframes fb-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){ .fb-page::after{animation:none} }

/* gutter shading so a reassembled spread reads as one sheet */
.fb-page--left::before,.fb-page--right::before{
  content:""; position:absolute; top:0; bottom:0; width:34px; z-index:2;
  pointer-events:none;
}
.fb-page--left::before{ right:0;  background:linear-gradient(to right,transparent,rgba(0,0,0,.16)) }
.fb-page--right::before{ left:0;  background:linear-gradient(to left, transparent,rgba(0,0,0,.16)) }
.fb.is-portrait .fb-page--left::before,
.fb.is-portrait .fb-page--right::before{ display:none }

/* ---------- side arrows ---------- */
.fb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fb-ui); border:0; cursor:pointer; color:var(--fb-text);
  transition:background .2s var(--fb-ease),opacity .2s var(--fb-ease);
  z-index:5; backdrop-filter:blur(6px);
  touch-action:manipulation;
}
/* The tappable area runs past the visible circle, so a near miss still lands. */
.fb__nav::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.fb__nav:hover{background:var(--fb-ui-hover)}
.fb__nav[disabled]{opacity:.25;cursor:default}
.fb__nav--prev{left:12px}
.fb__nav--next{right:12px}
.fb__nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* On a phone the toolbar cannot hold six 44px controls plus the page box with
   any real gap between them — next and thumbs ended up 10px apart, which is
   exactly how you tap the wrong one. Page turning moves out to the big side
   arrows instead, which frees the bar and gives the most-used action the
   largest target on screen. */
@media (max-width:900px){
  .fb__nav{ width:48px; height:48px }
  .fb__nav--prev{ left:6px }
  .fb__nav--next{ right:6px }
}
@media (max-width:700px){
  .fb__bar [data-act="prev"], .fb__bar [data-act="next"]{ display:none }
}

/* ---------- toolbar ---------- */
.fb__bar{
  flex:0 0 auto; height:var(--fb-bar-h);
  display:flex; align-items:center; gap:8px;
  padding:0 14px;
  background:rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  z-index:20;
}
.fb__btn{
  height:44px; min-width:44px; padding:0 12px;   /* 44px is the minimum
     reliable touch target; below it these were easy to miss or mis-hit */
  touch-action:manipulation;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:0; border-radius:8px;
  color:var(--fb-text); cursor:pointer; font:inherit;
  transition:background .18s var(--fb-ease),color .18s var(--fb-ease);
}
.fb__btn:hover:not([disabled]){background:var(--fb-ui)}
.fb__btn[disabled]{opacity:.3;cursor:default}
.fb__btn.is-active{background:var(--fb-ui);color:var(--fb-accent)}
.fb__btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fb__spacer{flex:1 1 auto}

.fb__counter{
  display:flex; align-items:center; gap:7px; margin:0 6px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  color:var(--fb-text-dim); white-space:nowrap;
}
.fb__counter input{
  width:56px; height:44px; text-align:center;   /* sits between prev and next,
     so it needs the same target size or it becomes the thing you hit by mistake */
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12);
  border-radius:6px; color:var(--fb-text); font:inherit;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.fb__counter input::-webkit-outer-spin-button,
.fb__counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fb__counter input:focus{outline:2px solid var(--fb-accent);outline-offset:1px}

.fb__brand{
  color:var(--fb-accent); letter-spacing:.16em; text-transform:uppercase;
  font-size:11px; font-weight:600; white-space:nowrap; padding-left:4px;
}
@media (max-width:700px){ .fb__brand{display:none} .fb__bar{padding:0 10px;gap:8px} }

/* ---------- thumbnails ---------- */
.fb__thumbs{
  position:absolute; left:0; right:0; bottom:0;
  max-height:min(46vh,320px);
  background:rgba(6,20,20,.94);
  border-top:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(14px);
  transform:translateY(101%);
  transition:transform .32s var(--fb-ease);
  z-index:15; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 16px 20px;
}
.fb.is-thumbs-open .fb__thumbs{transform:translateY(0)}
.fb__thumbs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:12px;
}
.fb__thumb{
  position:relative; padding:0; border:0; background:transparent;
  cursor:pointer; border-radius:3px; overflow:hidden;
  outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .18s var(--fb-ease),transform .18s var(--fb-ease);
}
.fb__thumb:hover{transform:translateY(-2px)}
.fb__thumb.is-current{outline-color:var(--fb-accent)}
.fb__thumb img{display:block;width:100%;aspect-ratio:var(--fb-page-ar,.875);object-fit:cover;background:#e9e6e0}
.fb__thumb span{
  display:block; padding:5px 0 0;
  font-size:11px; color:var(--fb-text-dim); font-variant-numeric:tabular-nums;
}
.fb__thumb.is-current span{color:var(--fb-accent)}

/* ---------- zoom overlay ---------- */
.fb__zoom{
  position:fixed; inset:0; z-index:50;   /* above the fold-out, which can open it */
  background:#041010;                    /* opaque, like the fold-out it sits over */
  display:none; place-items:center;
  overflow:hidden; touch-action:none; cursor:grab;
}
.fb__zoom.is-open{display:grid}
.fb__zoom.is-panning{cursor:grabbing}
.fb__zoom-canvas{
  display:flex; will-change:transform;
  transform-origin:0 0;
  box-shadow:var(--fb-shadow);
}
.fb__zoom-canvas img{display:block;height:auto;background:#fff}
.fb__zoom-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:var(--fb-ui); border:0; color:var(--fb-text); cursor:pointer;
  display:grid; place-items:center; touch-action:manipulation;
}
.fb__zoom-close:hover{background:var(--fb-ui-hover)}
.fb__zoom-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fb__zoom-hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  padding:7px 14px; border-radius:99px;
  background:rgba(0,0,0,.55); color:var(--fb-text-dim); font-size:12px;
  pointer-events:none; transition:opacity .4s var(--fb-ease);
}
.fb__zoom-tools{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; padding:4px;
  background:rgba(0,0,0,.5); border-radius:10px; backdrop-filter:blur(8px);
}

/* ---------- loading / error ---------- */
.fb__boot{
  position:absolute; inset:0; z-index:30;
  display:grid; place-content:center; justify-items:center; gap:18px;
  background:var(--fb-bg-2);
  transition:opacity .5s var(--fb-ease),visibility .5s var(--fb-ease);
}
.fb__boot.is-done{opacity:0;visibility:hidden}
.fb__boot-mark{
  color:var(--fb-accent); letter-spacing:.34em; text-transform:uppercase;
  font-size:12px; font-weight:600; text-indent:.34em;
}
.fb__boot-track{width:172px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
.fb__boot-fill{height:100%;width:0;background:var(--fb-accent);transition:width .3s var(--fb-ease)}
.fb__error{
  max-width:420px; text-align:center; line-height:1.6;
  color:var(--fb-text-dim); font-size:13px;
}
.fb__error strong{display:block;color:var(--fb-text);font-size:15px;margin-bottom:6px}

/* visually-hidden but screen-reader accessible */
.fb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--fb-accent);outline-offset:2px}

/* ---------- gatefold fold-out -------------------------------------------- */
/* Four spreads in this brochure are 3-panel gatefolds. The book shows their
   560mm core at normal page size; this is the flap that swings open. */

.fb__foldtab{
  position:absolute; z-index:6;
  display:inline-flex; align-items:center; gap:7px;
  min-height:42px; padding:0 16px; border:0; border-radius:7px; cursor:pointer;
  touch-action:manipulation;
  background:rgba(10,36,36,.88); color:var(--fb-accent);
  font:600 10px/1 inherit; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--fb-ease), visibility .3s var(--fb-ease);
}
.fb__foldtab.is-on{opacity:1;visibility:visible;pointer-events:auto}
.fb__foldtab svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb__foldtab-inner{display:inline-flex;align-items:center;gap:7px}
.fb__foldtab:hover .fb__foldtab-inner{transform:scale(1.04)}
.fb__foldtab-inner{transition:transform .2s var(--fb-ease)}

/* one gentle nudge outward, in the direction the flap will open */
@keyframes fb-nudge-r{0%,100%{transform:translateX(0)}35%{transform:translateX(6px)}70%{transform:translateX(0)}}
@keyframes fb-nudge-l{0%,100%{transform:translateX(0)}35%{transform:translateX(-6px)}70%{transform:translateX(0)}}
.fb__foldtab.is-hint .fb__foldtab-inner{animation:fb-nudge-r 1.15s var(--fb-ease) 2}
.fb__foldtab--left.is-hint .fb__foldtab-inner{animation-name:fb-nudge-l}
@media (prefers-reduced-motion:reduce){ .fb__foldtab.is-hint .fb__foldtab-inner{animation:none} }

/* Covers the STAGE, not the whole window. The book's side arrows sit at 50% of
   the stage; if this covered the toolbar too, its own arrows would sit at 50%
   of the viewport — 32px lower, half the bar height — and the arrows would jump
   down the moment a fold opened, right under the reader's cursor. Stopping
   above the bar also keeps the toolbar live while a fold-out is open. */
.fb__fold{
  position:fixed; inset:0 0 var(--fb-bar-h) 0; z-index:45;
  background:#041010;            /* opaque: the book behind must not ghost through */
  display:none; place-items:center;
  perspective:2600px;
  opacity:0; transition:opacity .3s var(--fb-ease);
}
.fb__fold.is-open{display:grid}
.fb__fold.is-shown{opacity:1}

.fb__fold-group{
  position:relative; display:flex; align-items:stretch;
  transform-style:preserve-3d;
  will-change:transform;
}
.fb__fold-group img{display:block;background:#fff}
.fb__fold-group{cursor:zoom-in;align-items:center}

/* the panels of a fold-out sit in a row and swing as one piece */
.fb__fold-flap{display:flex;align-items:center}

/* The flap hinges on the seam it shares with the core page. It starts edge-on
   and swings flat — a quarter turn, not the full 180 the paper makes, because
   there is no artwork for the back of the flap to show mid-sweep. */
.fb__fold-flap{
  transform-origin:left center;
  backface-visibility:hidden;
  box-shadow:-16px 0 34px rgba(0,0,0,.5);
}
.fb__fold--left .fb__fold-flap{
  transform-origin:right center;
  box-shadow:16px 0 34px rgba(0,0,0,.5);
}

/* Reading on through the fold-out, rather than dismissing it. These sit above
   the panels; the main side arrows are behind the overlay. */
.fb__fold-prev,.fb__fold-next{ position:absolute; z-index:3; display:grid }
.fb__fold-prev{ left:12px }        /* identical to .fb__nav--prev */
.fb__fold-next{ right:12px }
@media (max-width:900px){
  .fb__fold-prev,.fb__fold-next{ display:grid; width:48px; height:48px }
  .fb__fold-prev{ left:6px } .fb__fold-next{ right:6px }
}

.fb__fold-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:var(--fb-ui); border:0; color:var(--fb-text); cursor:pointer;
  display:grid; place-items:center; touch-action:manipulation;
}
.fb__fold-close:hover{background:var(--fb-ui-hover)}
.fb__fold-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.fb__fold-flip{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:none; align-items:center; gap:8px;
  min-height:44px; padding:0 18px; border:0; border-radius:8px; cursor:pointer;
  background:var(--fb-ui); color:var(--fb-text); touch-action:manipulation;
  font:600 11px/1 inherit; letter-spacing:.1em; text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.fb__fold--twosided .fb__fold-flip{display:inline-flex}
.fb__fold-flip:hover{background:var(--fb-ui-hover);color:var(--fb-accent)}
.fb__fold-flip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.fb__fold-cap{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:99px;
  background:rgba(0,0,0,.5); color:var(--fb-text-dim); font-size:12px;
  pointer-events:none; white-space:nowrap;
}
.fb__fold-cap b{color:var(--fb-accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10px}