:root{
  --gold:#d8ad4f;
  --cream:#fff8e9;
  --ink:#25150e;
  --bg:#120705;
  --wine:#3a0c0c;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 12%,#3b1b13 0,#160a07 52%,#090403 100%);font-family:Georgia,"Times New Roman",serif;color:var(--cream);overflow-x:hidden}
body{min-height:100svh}
.topbar{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 clamp(10px,3vw,34px);background:rgba(255,248,233,.97);color:var(--ink);border-bottom:1px solid rgba(216,173,79,.38);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.back,.contents{border:1px solid #d8c090;background:#fffaf0;color:#3d2418;border-radius:999px;padding:10px 16px;text-decoration:none;font:600 12px/1 Arial,sans-serif;cursor:pointer;transition:.18s ease}.back{justify-self:start}.contents{justify-self:end}.back:hover,.contents:hover{transform:translateY(-1px);border-color:#a77c2f}
.top-brand{justify-self:center;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;text-decoration:none;color:inherit;line-height:1}
.top-logo{display:block;width:46px;height:46px;flex:0 0 46px;object-fit:contain}
.top-wordmark{display:block;width:245px;max-width:38vw;height:48px;object-fit:contain}
.stage{min-height:calc(100svh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px clamp(62px,6vw,96px) 16px}
.book-shell{position:relative;width:min(1180px,88vw);max-height:calc(100svh - 118px);aspect-ratio:2380/1684}
.book{position:absolute;inset:0;background:#1a0b08;border:10px solid #24120d;border-radius:15px;box-shadow:0 30px 75px rgba(0,0,0,.58),0 0 0 1px rgba(216,173,79,.24) inset;overflow:hidden;contain:layout paint}
.loading{height:100%;display:grid;place-items:center;padding:24px;text-align:center;color:#e5c06c;font-size:30px}
.menu-spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#120705;transform:translateZ(0)}
.menu-spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.08),rgba(0,0,0,.42));box-shadow:0 0 24px rgba(0,0,0,.55);pointer-events:none;z-index:4}
.page-slot{position:relative;min-width:0;min-height:0;background:#111;overflow:hidden}.page-slot img{display:block;width:100%;height:100%;object-fit:contain;background:#111;user-select:none;-webkit-user-drag:none}.page-slot.blank{background:linear-gradient(135deg,#2a140f,#130806)}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:54px;height:92px;border:1px solid #9d772e;border-radius:16px;background:rgba(20,9,6,.93);color:var(--gold);font-size:38px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:.18s ease}.nav:hover:not(:disabled){transform:translateY(-50%) scale(1.04);background:#2c130d}.nav.prev{left:-68px}.nav.next{right:-68px}.nav:disabled{opacity:.2;cursor:default}
.book-meta{font:600 12px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#efc85f;text-align:center}.hint{margin:0;font:500 10px/1.2 Arial,sans-serif;color:#cbb290;text-align:center}
.flip-sheet{position:absolute;top:0;bottom:0;width:50%;z-index:12;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;pointer-events:none;background:#130806;box-shadow:0 0 34px rgba(0,0,0,.35)}.flip-sheet img{width:100%;height:100%;object-fit:contain;background:#111;display:block}.flip-forward{right:0;transform-origin:left center;animation:flipForward .52s cubic-bezier(.62,.02,.23,1) forwards}.flip-back{left:0;transform-origin:right center;animation:flipBack .52s cubic-bezier(.62,.02,.23,1) forwards}
@keyframes flipForward{from{transform:perspective(1600px) rotateY(0)}to{transform:perspective(1600px) rotateY(-180deg)}}
@keyframes flipBack{from{transform:perspective(1600px) rotateY(0)}to{transform:perspective(1600px) rotateY(180deg)}}

@media(max-width:900px) and (min-width:701px){.stage{padding-left:54px;padding-right:54px}.nav.prev{left:-48px}.nav.next{right:-48px}.top-logo{width:42px;height:42px;flex-basis:42px}.top-wordmark{width:218px;height:44px}}

@media(max-width:700px){
  .topbar{height:64px;padding:0 8px;gap:6px}.top-brand{gap:5px}.top-logo{width:34px;height:34px;flex-basis:34px}.top-wordmark{width:145px;max-width:43vw;height:36px}.back,.contents{padding:8px 10px;font-size:10px}
  .stage{min-height:calc(100svh - 64px);justify-content:flex-start;padding:6px 6px 10px;gap:4px}
  .book-shell{width:calc(100vw - 12px);max-width:none;height:min(calc(100svh - 101px),calc((100vw - 12px)*1684/1190));max-height:none;aspect-ratio:1190/1684}
  .book{border-width:4px;border-radius:9px}
  .menu-spread{display:block}.menu-spread::after{display:none}.page-slot{position:absolute;inset:0}.page-slot.desktop-second{display:none}
  .nav{display:none}.book-meta{font-size:9px}.hint{font-size:8px}.flip-sheet{width:100%}.flip-forward{right:0}.flip-back{left:0}
}

@media(prefers-reduced-motion:reduce){.flip-sheet{animation:none!important}.back,.contents,.nav{transition:none!important}}


/* Exact PDF item click zones: invisible on the printed artwork, but fully tappable. */
.item-hotspot-layer{position:absolute;inset:0;z-index:8;pointer-events:none}
.item-hotspot{position:absolute;left:4.5%;width:91%;margin:0;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:rgba(216,173,79,.16);touch-action:manipulation}
.item-hotspot:focus-visible{outline:2px solid rgba(239,200,95,.9);outline-offset:-2px;background:rgba(216,173,79,.08)}
@media(hover:hover) and (pointer:fine){.item-hotspot:hover{background:rgba(216,173,79,.07);box-shadow:inset 0 0 0 1px rgba(216,173,79,.20)}}

/* Direct section controls — one on each side of the centered brand */
.topbar{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
}

.topbar-side{
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}

.topbar-left{
  justify-self:stretch;
  justify-content:flex-start;
}

.topbar-right{
  justify-self:stretch;
  justify-content:flex-end;
}

.topbar-left .section-jump{
  margin-left:8px;
}

.section-jump{
  white-space:nowrap;
}

.section-jump.active{
  background:var(--wine);
  border-color:#b68a35;
  color:var(--cream);
  box-shadow:0 5px 16px rgba(58,12,12,.14);
}

.section-jump.active:hover{
  border-color:var(--gold);
  transform:none;
}

@media(max-width:700px){
  .topbar{
    height:68px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    padding:0 6px;
    gap:4px;
  }

  .topbar-side{
    gap:4px;
  }

  .topbar-left .section-jump{
    margin-left:2px;
  }

  .back{
    padding:7px 9px;
    font-size:10px;
  }

  .section-jump{
    padding:7px 9px;
    font-size:8.5px;
    line-height:1;
    min-width:0;
  }

  .topbar-right .section-jump{
    max-width:102px;
    white-space:normal;
    text-align:center;
  }

  .top-brand{
    gap:4px;
  }

  .top-logo{
    width:29px;
    height:29px;
    flex-basis:29px;
  }

  .top-wordmark{
    width:112px;
    max-width:34vw;
    height:31px;
  }

  .stage{
    min-height:calc(100svh - 68px);
  }

  .book-shell{
    height:min(calc(100svh - 105px),calc((100vw - 12px)*1684/1190));
  }
}