:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000000;color:#e7e5e0;--pw:350px;--ph:496px}*{box-sizing:border-box}body{margin:0;background:#000000}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,.stage:focus-visible{outline:2px solid #e2d4b9;outline-offset:5px}button:disabled{opacity:.23;cursor:default}.viewer{height:100svh;min-height:440px;display:grid;grid-template-rows:88px minmax(0,1fr) 140px;max-width:1600px;margin:auto;padding:0 40px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}.brand{font-family:Georgia,serif;font-size:23px;letter-spacing:4px}.brand span{display:block;font-family:Arial,sans-serif;font-size:9px;letter-spacing:3.5px;margin-top:9px;color:#aeb0b2}.edition{font-size:10px;letter-spacing:2px;color:#bfc1c4}.edition span{margin-left:25px;color:#7f8387}.stage{position:relative;display:flex;align-items:center;justify-content:center;perspective:2200px;touch-action:pan-y;cursor:grab;user-select:none;isolation:isolate}.stage:active{cursor:grabbing}.book{width:calc(var(--pw)*2);height:var(--ph);position:relative;flex-shrink:0;transform-style:preserve-3d;will-change:transform}.sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#e0ded8;overflow:hidden;box-shadow:1px 1px 0 #8d8b86,2px 2px 0 #d5d1c8,3px 3px 1px #777672,8px 18px 28px #0007}.face img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.front{transform:translateZ(.3px)}.back{transform:rotateY(180deg) translateZ(.3px)}.face:after{content:"";position:absolute;inset:0;pointer-events:none}.front:after{background:linear-gradient(90deg,#0004,transparent 4%,transparent 92%,#ffffff0b),linear-gradient(100deg,transparent 20%,rgb(255 255 255 / var(--shine,0)) 55%,transparent 85%)}.back:after{background:linear-gradient(270deg,#0005,transparent 5%,transparent 98%,#ffffff13),linear-gradient(80deg,transparent 20%,rgb(255 255 255 / var(--shine,0)) 55%,transparent 85%)}footer{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px}.hint{font-size:11px;letter-spacing:1.2px;color:#a4a6a8}nav{display:flex;align-items:center;gap:28px}.arrow{height:44px;width:44px;border-radius:50%;font-size:22px;border:1px solid #a5a8aa50;background:linear-gradient(135deg,#bfc3c631,#55595d14 45%,#c2c6ca22);box-shadow:inset 0 1px 0 #ffffff25,0 4px 12px #0002}.arrow:hover:not(:disabled){border-color:#dadcde;background-color:#ffffff10}.position{min-width:120px;text-align:center;font-size:12px;letter-spacing:1px}.dots{display:flex;justify-content:center;gap:10px;margin-top:9px}.dots button{height:5px;width:19px;padding:0;border:0;border-radius:3px;background:#61656a}.dots button[aria-current=true]{background:linear-gradient(90deg,#999da2,#f0efeb,#b6b9be)}.utilities{position:absolute;right:0;bottom:35px;display:flex;gap:14px}.utilities button{border:0;background:none;padding:9px 0;color:#bbbfc1;font-size:11px}.utilities button:hover{color:white}dialog{border:1px solid #71767a;padding:0;background:#202225;width:96vw;max-width:1600px;height:94svh;color:#eee}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.readerbar{position:sticky;top:0;background:#202225f5;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;z-index:1}.readerbar button{background:none;border:1px solid #888;padding:10px 15px}#readerPages{padding:20px;display:flex;flex-direction:column;align-items:center;gap:24px}#readerPages img{width:100%;max-width:1100px;height:auto}#error{position:fixed;bottom:0;background:#501e1e;padding:12px;z-index:10}body:fullscreen{background-color:#000000}@media(max-width:700px){.viewer{padding:0 16px;grid-template-rows:76px minmax(0,1fr) 162px}.brand{font-size:17px;letter-spacing:2.5px}.brand span{font-size:8px;letter-spacing:2px}.edition{font-size:8px;letter-spacing:1px}.edition span{display:none}.utilities{position:static;gap:25px}.hint{font-size:10px;letter-spacing:.4px}footer{gap:17px}nav{gap:24px}.readerbar{padding:10px;letter-spacing:1px}#readerPages{padding:5px}}@media(max-height:520px) and (min-width:701px){.viewer{min-height:330px;grid-template-rows:55px minmax(0,1fr) 92px}.hint{display:none}.utilities{bottom:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
html,body{overflow-x:hidden}
/* Refined fit: preserve the original light and materials, give the artwork priority. */
.viewer{height:100dvh;min-height:0;max-width:none;padding:0 22px;grid-template-rows:66px minmax(0,1fr) 88px}
header{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}.brand{font-size:25px}.brand span{margin-top:5px;font-size:8px;letter-spacing:2px}.edition{justify-self:end}
#detail{background:linear-gradient(135deg,#c5c9cd18,#ffffff05);border:1px solid #a5a8aa50;border-radius:25px;color:#e0e1e2;padding:11px 18px;font-size:12px;letter-spacing:.6px;white-space:nowrap}#detail:hover{border-color:#dadcde;background-color:#ffffff10}
footer{gap:9px}.utilities{bottom:20px}.hint{font-size:10px}.stage{min-height:0}
#reader{position:fixed;inset:0;margin:auto;width:98vw;max-width:none;height:98dvh;max-height:98dvh;overscroll-behavior:contain}
#readerPages{padding:12px;gap:18px}.reader-page{position:relative;width:100%;max-width:1440px;flex-shrink:0}.reader-page img{display:block;width:100%;max-width:none!important;height:auto}
.contact-hit{position:absolute;top:83%;height:7%;z-index:5;display:block;background:transparent;border:0;border-radius:4px;padding:0;cursor:pointer;touch-action:manipulation;color:inherit}.contact-hit:hover,.contact-hit:focus-visible{background:#ffffff14;outline:1px solid #efefea99;outline-offset:1px}
#contactTip{position:fixed;z-index:100;max-width:calc(100vw - 16px);padding:10px 13px;border:1px solid #a5a8aa70;border-radius:6px;background:#222528f5;box-shadow:0 5px 20px #0006;color:#f1f1ef;font:12px/1.4 Arial,sans-serif;pointer-events:none}
.copy-status{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:101;max-width:94vw;width:max-content;background:#222528f5;border:1px solid #a5a8aa70;border-radius:6px;padding:12px 18px;font-size:13px;opacity:0;pointer-events:none}.copy-status.shown{opacity:1}
@media(max-width:700px){.viewer{padding:0 10px;grid-template-rows:64px minmax(0,1fr) 94px}.brand{font-size:23px;letter-spacing:2.5px}.brand span{font-size:7px;letter-spacing:1px}.edition{font-size:7px;letter-spacing:.4px}#detail{padding:10px 11px;font-size:11px;letter-spacing:0}header{gap:6px}.utilities{position:absolute;bottom:7px;right:0}.utilities button{font-size:9px}.hint{font-size:9px;letter-spacing:0}footer{justify-content:flex-start;padding-top:8px;gap:8px}.arrow{width:40px;height:40px}.readerbar{padding:8px;font-size:8px}#readerPages{padding:3px;gap:10px}#reader{width:100vw;height:100dvh;max-height:100dvh}.reader-page{max-width:none}}
@media(max-width:370px){.edition{display:none}header{grid-template-columns:1fr auto 1fr}#detail{grid-column:2}.brand span{font-size:6px}}
@media(max-height:500px){.viewer{grid-template-rows:48px minmax(0,1fr) 58px}.hint{display:none}footer{justify-content:center;padding-top:0}.brand{font-size:19px}.brand span{font-size:6px;margin-top:2px}#detail{padding:7px 12px}.utilities{bottom:12px}.arrow{width:36px;height:36px}}

/* Keep the existing vertical position; mirror Full screen to the left. */
.utilities{left:0;right:auto}

/* Keep the grid track within the iframe, including narrow mobile screens. */
.viewer{grid-template-columns:minmax(0,1fr)}
.viewer>header,.viewer>.stage,.viewer>footer{min-width:0}

/* Compact reader toolbar; the host website already supplies the brand. */
.viewer{grid-template-rows:44px minmax(0,1fr) 88px}
header{display:flex;justify-content:center;border-bottom:0;gap:0}
#detail{padding:7px 13px;font-size:11px;letter-spacing:0}
@media(max-width:700px){.viewer{grid-template-rows:40px minmax(0,1fr) 94px}}
@media(max-height:500px){.viewer{grid-template-rows:36px minmax(0,1fr) 58px}}

/* Leave the free-plan hosting badge below, clear of the brochure controls. */
@media(max-width:700px){.viewer{padding-bottom:56px}}

/* ===============================================================
   QM / DARK LUXURY BACKGROUND — 30 OCT 2026
   Pure #000000 canvas matching the Squarespace header. A soft,
   luminous pearl-white spotlight is centred behind the brochure.
   No changes to flipbook pages, shadows, navigation or interactions.
   =============================================================== */
html, body { background-color: #000000; }
body, body:fullscreen {
  background-image:
    radial-gradient(
      ellipse 41% 68% at 50% 49%,
      rgba(255,255,255,.78) 0%,
      rgba(248,249,252,.51) 20%,
      rgba(222,228,239,.25) 43%,
      rgba(154,166,183,.09) 65%,
      rgba(154,166,183,0) 89%
    );
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
@media (max-width: 700px) {
  body, body:fullscreen {
    background-image: radial-gradient(
      ellipse 76% 48% at 50% 49%,
      rgba(255,255,255,.69) 0%,
      rgba(245,247,251,.40) 24%,
      rgba(216,224,236,.18) 47%,
      rgba(154,166,183,.06) 70%,
      rgba(154,166,183,0) 95%
    );
  }
}

/* ===============================================================
   QM / IMMERSIVE VIEWING MODES — 30 OCT 2026
   Preserve the exact pearl-white radial of the standard flipbook.
   Full screen and Read in detail both sit on solid #000000, with
   no translucent grey layer or Squarespace background bleeding in.
   =============================================================== */

/* Full screen uses the document root as its fullscreen element. */
:root:fullscreen,
:root:-webkit-full-screen {
  background-color: #000000 !important;
}
:root:fullscreen body,
:root:-webkit-full-screen body {
  background-color: #000000 !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The detail reader is an edge-to-edge opaque canvas, not a grey
   translucent pop-up. It uses the identical radial stops and position
   as the cover view, without changing the image assets. */
#reader {
  position: fixed;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  background-color: #000000;
  background-image: radial-gradient(
    ellipse 41% 68% at 50% 49%,
    rgba(255,255,255,.78) 0%,
    rgba(248,249,252,.51) 20%,
    rgba(222,228,239,.25) 43%,
    rgba(154,166,183,.09) 65%,
    rgba(154,166,183,0) 89%
  );
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #eeeeee;
}

/* Keep even the outside of a modal pure black: no see-through veil. */
#reader::backdrop {
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* An opaque toolbar avoids the original #202225f5 grey overlay. */
#reader .readerbar {
  background: #000000;
  border-bottom: 1px solid rgba(220,225,233,.18);
  color: #eeeeee;
}

@media (max-width: 700px) {
  #reader {
    background-image: radial-gradient(
      ellipse 76% 48% at 50% 49%,
      rgba(255,255,255,.69) 0%,
      rgba(245,247,251,.40) 24%,
      rgba(216,224,236,.18) 47%,
      rgba(154,166,183,.06) 70%,
      rgba(154,166,183,0) 95%
    );
  }
}


/* ==============================================================
   QM — EDGE-TO-EDGE IMMERSIVE LUXURY VIEWER (31 OCT 2026)
   Netlify brochure ONLY; does not modify Squarespace header.
   Large book, left Apple-inspired smoked glass controls,
   restrained page arrows, pure-black background and a fully
   visible radial halo that fades to black before the top edge.
   ============================================================== */
:root { background: #000000; }
html, body { margin: 0; background-color: #000000 !important; }
body, body:fullscreen {
  background-image: radial-gradient(
    ellipse 46% 48% at 54% 51%,
    rgba(255,255,255,.78) 0%,
    rgba(248,249,252,.51) 20%,
    rgba(222,228,239,.25) 43%,
    rgba(154,166,183,.09) 65%,
    rgba(154,166,183,0) 89%
  ) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.viewer {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 6px clamp(12px, 2vw, 30px) 7px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) 46px;
  isolation: isolate;
}
.sr-only {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}
.stage {
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  margin-left: clamp(190px, 17vw, 245px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}
.book {
  filter: drop-shadow(0 10px 13px rgba(0,0,0,.4));
}
.action-rail {
  position: absolute;
  left: clamp(14px,2vw,32px);
  top: 30%;
  z-index: 5;
  width: clamp(172px,15vw,210px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.glass-action {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 0 15px;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(240,243,247,.30);
  color: rgba(250,250,250,.97);
  background: linear-gradient(128deg,
    rgba(245,248,251,.19) 0%,
    rgba(127,134,144,.105) 23%,
    rgba(20,21,25,.66) 55%,
    rgba(209,218,231,.13) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.37),
    inset 0 -1px 0 rgba(255,255,255,.065),
    0 10px 30px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.30);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  font: 500 12px/1.1 Arial,Helvetica,sans-serif;
  letter-spacing: .1px;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.glass-action::after {
  content: '';
  position: absolute;
  inset: 3px 7px auto 7px;
  height: 27%;
  border-radius: inherit;
  background: linear-gradient(to bottom,rgba(255,255,255,.09),transparent);
  pointer-events: none;
}
.glass-action:hover:not(:disabled) {
  border-color: rgba(255,255,255,.55);
  background-color: rgba(255,255,255,.07);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px rgba(0,0,0,.45);
}
.glass-action:active:not(:disabled) { transform: translateY(0); }
.glass-action[hidden] { display: none !important; }
.action-icon { width: 18px; height: 18px; flex: none; opacity: .96; }
.action-chevron { width: 15px; height: 15px; margin-left:auto; flex:none; opacity:.7; }
.glass-label { flex: 1; text-align: left; }
.book-controls {
  grid-row: 2;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  position: relative;
  z-index: 3;
}
.book-controls nav { display:flex; align-items:center; gap:18px; }
.book-controls .arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius:50%;
  border: 1px solid rgba(229,233,239,.20);
  background: rgba(23,25,29,.28);
  color: rgba(233,234,237,.79);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.book-controls .arrow svg { width: 18px; height:18px; }
.book-controls .arrow:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(242,245,248,.42);
  background: rgba(112,116,125,.2);
}
.book-controls .arrow:disabled { opacity: .25; }
.book-controls .position { font-size: 10px; min-width: 112px; letter-spacing: .5px; color: #b9babe; }
.book-controls .dots { gap:8px; margin-top:7px; }
.book-controls .dots button { width:16px; height:4px; background:#55575e; }
.book-controls .dots button[aria-current=true] { background:#dedfe3; }

/* A shorter viewing window: keep buttons clear of the book. */
@media (max-height: 520px) and (min-width: 981px) {
  .action-rail { top: 22%; }
  .glass-action { height:46px; }
  .book-controls { height:38px; }
  .viewer { grid-template-rows:minmax(0,1fr) 38px; }
}

/* Tablet and mobile: controls form a compact row above the book,
   rather than overlapping its pages. */
@media (max-width: 980px) {
  body,body:fullscreen {
    background-image: radial-gradient(
      ellipse 76% 43% at 50% 51%,
      rgba(255,255,255,.69) 0%,
      rgba(245,247,251,.40) 24%,
      rgba(216,224,236,.18) 47%,
      rgba(154,166,183,.06) 70%,
      rgba(154,166,183,0) 95%
    ) !important;
  }
  .viewer {
    grid-template-rows: 58px minmax(0,1fr) 45px;
    padding: 4px 12px 7px;
  }
  .action-rail {
    position: relative;
    grid-row:1;
    top:auto;
    left:auto;
    width: 100%;
    max-width: 440px;
    justify-self: center;
    align-self: center;
    flex-direction: row;
    justify-content: center;
    gap: 9px;
  }
  .glass-action { height: 39px; min-width:0; flex:1; padding:0 12px; gap:7px; font-size:11px; }
  .action-icon { width:15px; height:15px; }
  .action-chevron { width:13px; height:13px; }
  .stage { grid-row:2; margin-left:0; }
  .book-controls { grid-row:3; height:45px; }
}
@media(max-width: 420px) {
  .viewer { grid-template-rows: 53px minmax(0,1fr) 44px; padding:2px 8px 57px; }
  .glass-action { height:37px; padding:0 10px; gap:6px; font-size:10px; }
  .action-rail { gap:7px; }
  .action-chevron { width:12px; height:12px; }
  .book-controls { height:44px; }
  .book-controls nav { gap:11px; }
  .book-controls .arrow { width:30px; height:30px; }
  .book-controls .position { min-width:100px; }
}
@media(max-height:430px) and (max-width:980px) {
  .viewer { grid-template-rows: 45px minmax(0,1fr) 36px; padding-bottom: 2px; }
  .glass-action { height:34px; }
  .book-controls { height:36px; }
  .book-controls .arrow { width:28px; height:28px; }
}
@media(prefers-reduced-motion:reduce) {
  .glass-action,.book-controls .arrow { transition:none; }
}

/* Final refinement: a complete light halo, gently fading to pure black
   before it approaches the Squarespace header. This affects Netlify only. */
@media (min-width: 981px) {
  body, body:fullscreen {
    background-image: radial-gradient(
      ellipse 65% 56% at 58% 53%,
      rgba(255,255,255,.78) 0%,
      rgba(248,249,252,.51) 20%,
      rgba(222,228,239,.25) 43%,
      rgba(154,166,183,.09) 65%,
      rgba(154,166,183,0) 89%
    ) !important;
  }
  .viewer { grid-template-rows: 22px minmax(0,1fr) 50px; }
  .stage { grid-row: 2; }
  .book-controls { grid-row: 3; height: 50px; }
}

/* Both left-hand actions share exactly the same smoked liquid-glass finish. */
#detail.glass-action,
#fullscreen.glass-action {
  display: flex;
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 0 15px;
  gap: 10px;
  border: 1px solid rgba(240,243,247,.30);
  border-radius: 999px;
  color: rgba(250,250,250,.97);
  background: linear-gradient(128deg,
    rgba(245,248,251,.19) 0%,
    rgba(127,134,144,.105) 23%,
    rgba(20,21,25,.66) 55%,
    rgba(209,218,231,.13) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.37),
              inset 0 -1px 0 rgba(255,255,255,.065),
              0 10px 30px rgba(0,0,0,.35);
  font: 500 12px/1.1 Arial,Helvetica,sans-serif;
  letter-spacing: .1px;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
#detail.glass-action:hover,
#fullscreen.glass-action:hover {
  border-color: rgba(255,255,255,.55);
  background-color: rgba(255,255,255,.07);
}
@media (max-width: 980px) {
  #detail.glass-action,
  #fullscreen.glass-action {
    height: 39px;
    padding: 0 12px;
    gap: 7px;
    font-size: 11px;
  }
}
@media (max-width: 420px) {
  #detail.glass-action,
  #fullscreen.glass-action {
    height: 37px;
    padding: 0 10px;
    gap: 6px;
    font-size: 10px;
  }
}
@media (max-height: 430px) and (max-width: 980px) {
  #detail.glass-action,
  #fullscreen.glass-action { height: 34px; }
}


/* ===============================================================
   QM — CENTRED DIFFUSED PEARL GLOW / MAXIMUM BOOK AREA
   Zero changes to Squarespace site/header. Left controls are overlays,
   not a grid column. Every screen centres the actual brochure.
   =============================================================== */
html, body, body:fullscreen { background-color: #000 !important; }
body, body:fullscreen { background-image: none !important; }
.viewer {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  padding: 0 12px 0;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) 39px;
  background: #000 !important;
}
/* The glow is atmospheric, not a circle: a broad, low-contrast wash
   that loses its edge naturally into the absolute black canvas. */
.viewer::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 52%;
  width: min(155svh, 106vw, 1380px);
  height: min(110svh, 94vw, 960px);
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: radial-gradient(ellipse at center,
    rgba(252,253,255,.65) 0%,
    rgba(243,246,252,.48) 16%,
    rgba(220,227,239,.27) 36%,
    rgba(173,186,206,.12) 56%,
    rgba(113,126,147,.035) 73%,
    rgba(113,126,147,0) 94%);
  filter: blur(52px);
  pointer-events: none;
}
.stage {
  grid-row: 1;
  grid-column: 1;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  align-self: stretch;
  justify-self: stretch;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.book-controls {
  grid-row: 2;
  grid-column: 1;
  height: 39px;
  padding: 0;
  justify-content: center;
  align-items: center;
}
/* Left-side frosted glass rail is deliberately outside layout flow. */
.action-rail {
  position: absolute;
  grid-row: auto;
  left: clamp(12px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
/* Slightly quieter arrows than the glass actions. */
.book-controls .arrow { width: 29px; height: 29px; border-color:rgba(229,233,239,.16); background:rgba(22,24,29,.20); }
.book-controls .arrow svg { width:16px; height:16px; }
.book-controls nav { gap: 14px; }
/* Read in detail matches the soft pearlescent atmosphere. */
#reader {
  background: #000 !important;
  isolation: isolate;
}
#reader::before {
  content: '';
  position: fixed;
  left: 50%;
  top: 52%;
  width: min(155svh, 106vw, 1380px);
  height: min(110svh, 94vw, 960px);
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: radial-gradient(ellipse at center,
    rgba(252,253,255,.65) 0%,
    rgba(243,246,252,.48) 16%,
    rgba(220,227,239,.27) 36%,
    rgba(173,186,206,.12) 56%,
    rgba(113,126,147,.035) 73%,
    rgba(113,126,147,0) 94%);
  filter: blur(52px);
  pointer-events: none;
  z-index: 0;
}
#reader .readerbar, #reader #readerPages { position:relative; z-index:1; }
#reader .readerbar { position:sticky; }
@media (max-width: 1180px) {
  .viewer { grid-template-rows: 56px minmax(0,1fr) 38px; padding: 2px 10px 0; }
  .viewer::before, #reader::before { width: min(126svh, 108vw, 1150px); height: min(104svh, 108vw, 850px); top: 52%; filter: blur(40px); }
  .action-rail {
    position:relative;
    grid-row:1;
    grid-column:1;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    max-width:450px;
    justify-self:center;
    align-self:center;
    flex-direction:row;
  }
  .stage { grid-row:2; grid-column:1; margin:0 !important; }
  .book-controls { grid-row:3; height:38px; }
}
@media (max-width:420px) {
  .viewer { grid-template-rows: 49px minmax(0,1fr) 37px; padding: 1px 7px 2px; }
  .action-rail { width:100%; }
  .viewer::before,#reader::before { width:min(150svh, 150vw, 800px); height:min(100svh, 170vw, 750px); top:51%; filter:blur(32px); }
  .book-controls { height:37px; }
}
@media (max-height:450px) and (min-width:1181px) {
  .viewer { grid-template-rows: minmax(0,1fr) 34px; }
  .book-controls { height:34px; }
  .glass-action { height:43px !important; }
}
/* Static, low-contrast lighting is maintained for reduced-motion users. */


/* QM — scroll belongs to the Squarespace page, not this embedded viewer.
   The existing stage already fits the book inside its own viewport.
   Keep the reader dialog scrollable when explicitly opened.
   Do not restrict scroll chaining: wheel/touch should reach the host page. */
html, body {
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* QM RESPONSIVE REFINEMENT — tablet controls remain lateral;
   only phone-width layouts place Read in detail above the book. */
@media (min-width: 701px) and (max-width: 1180px) {
  .viewer {
    grid-template-rows: minmax(0, 1fr) 39px !important;
    padding: 0 10px !important;
  }
  .stage {
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 !important;
  }
  .book-controls { grid-row: 2 !important; }
  .action-rail {
    position: absolute !important;
    left: clamp(8px, 1.4vw, 20px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    grid-row: auto !important;
    width: clamp(112px, 15vw, 174px) !important;
    max-width: none !important;
    flex-direction: column !important;
    justify-self: auto !important;
    gap: 9px !important;
  }
  #detail.glass-action, #fullscreen.glass-action {
    height: 43px !important;
    padding: 0 9px !important;
    gap: 6px !important;
    font-size: clamp(9px, 1.15vw, 11px) !important;
  }
  .action-chevron { width: 12px !important; flex-shrink: 0; }
  .action-icon { width: 16px !important; flex-shrink: 0; }
}
@media (max-width: 700px) {
  .viewer {
    grid-template-rows: 51px minmax(0, 1fr) 37px !important;
    padding: 1px 7px 2px !important;
  }
  .action-rail {
    position: relative !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    flex-direction: row !important;
    align-self: center !important;
  }
  #detail.glass-action {
    height: 40px !important;
    width: 100% !important;
    font-size: 12px !important;
  }
  #fullscreen.glass-action { display: none !important; }
  .stage { grid-row: 2 !important; grid-column: 1 !important; }
  .book-controls { grid-row: 3 !important; height: 37px !important; }
}

/* QM adaptive dock: tablet and crowded desktop fullscreen only.
   Reserve REAL space for the glass buttons rather than overlaying the book.
   Phone and ordinary desktop retain their approved composition. */
@media (min-width:701px) {
  .viewer.rail-docked .stage {
    padding-left: clamp(148px, 17vw, 198px) !important;
    padding-right: 8px !important;
  }
  .viewer.rail-docked .action-rail {
    left: clamp(8px, 1.2vw, 20px) !important;
    width: clamp(116px, 14vw, 164px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    flex-direction: column !important;
    gap: 9px !important;
  }
  .viewer.rail-docked .action-rail .glass-action {
    width:100% !important;
    min-width:0 !important;
    font-size: clamp(10px, 1vw, 12px) !important;
    padding: 0 10px !important;
  }
}

/* Fullscreen-only controls: hide the glass rail entirely and reveal
   a compact independent exit control. No changes outside fullscreen. */
.qm-fullscreen-exit {
  display:none;
  position:fixed;
  z-index:9999;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.29);
  border-radius:999px;
  background:rgba(24,26,30,.76);
  color:#f4f4f4;
  font-size:11px;
  letter-spacing:.03em;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12);
}
.qm-fullscreen-exit[hidden] {display:none!important}
html:fullscreen .viewer .action-rail,
html:-webkit-full-screen .viewer .action-rail {display:none!important}
html:fullscreen .viewer.rail-docked .stage,
html:-webkit-full-screen .viewer.rail-docked .stage {
  padding-left:0!important;
  padding-right:0!important;
}
html:fullscreen .qm-fullscreen-exit:not([hidden]),
html:-webkit-full-screen .qm-fullscreen-exit:not([hidden]) {display:flex!important}

/* Navigation follows the usable book center, including tablet side dock.
   The script measures the stage after responsive padding is applied. */
.book-controls nav {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
}

/* Overlap-aware mid-width layout, including laptop windows above 1180px.
   Give controls a real left lane rather than placing them over the spread. */
@media (min-width:701px) {
  .viewer.rail-docked .stage {
    margin-left:0 !important;
    padding-left:clamp(146px, 17vw, 218px) !important;
    padding-right:4px !important;
  }
  .viewer.rail-docked .action-rail {
    position:absolute !important;
    left:clamp(8px, 1.2vw, 20px) !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:clamp(116px, 14vw, 174px) !important;
  }
}

/* FINAL CENTER FIX: book stays centered at every width. Controls remain
   on the left; JavaScript limits two-page spread width when necessary. */
@media (min-width:701px) {
  .viewer .stage, .viewer.rail-docked .stage {
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    justify-content:center!important;
  }
}