/* Frame the original landscape and portrait masters at their native proportions. */
.hero {
  --masthead-height: clamp(62px,4.3vw,92px);
  overflow: clip; min-height: calc(100vh - var(--masthead-height));
  min-height: calc(100svh - var(--masthead-height)); padding: 0;
  background: #020c0e;
}
.hero::before, .hero::after {
  content: ""; position: absolute; inset: 0; height: auto; pointer-events: none;
}
.hero::before {
  z-index: -2; background: url("assets/hero-live-city.webp") 50% 62% / cover no-repeat;
}
.hero::after {
  z-index: -1; background: linear-gradient(90deg, #020b0df2 0%, #020b0dcf 16%, #020b0d82 32%, transparent 54%, transparent 78%, #01090c6b), linear-gradient(0deg,#01090d59,transparent 17%);
}
.hero-inner { position: relative; z-index: 3; padding-block: clamp(30px,5svh,70px); background: none; }
.floating-book, .book-mount {
  --tilt-x: 0deg; --tilt-y: 0deg;
  --cover-width: min(20vw,38.4svh,375px);
  position: absolute; z-index: 2; bottom: 18.7%; right: 7.15%;
  width: var(--cover-width); height: auto; aspect-ratio: 2/3;
  display: block; padding: 0; margin: 0;
  border: 0; background: transparent; color: #d4f4f4;
  perspective: 1100px; touch-action: manipulation;
}
.floating-book::before {
  content: ""; position: absolute; bottom: -4.6%; left: -8%; width: 117%; height: 5%;
  background: radial-gradient(ellipse, #000f 0, #001013db 34%, #112f326a 57%, transparent 73%);
  filter: blur(3px); transform: rotate(2deg); opacity: .8;
  animation: book-ground 9.4s ease-in-out infinite;
}
.floating-book-body {
  position: absolute; inset: 0; display: block; pointer-events: none;
  animation: book-drift 9.4s cubic-bezier(.45,.02,.55,.98) infinite;
  filter: drop-shadow(5px 8px 7px #0008);
}
.floating-book img {
  display: block; width: 100%; height: 100%;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .45s cubic-bezier(.18,.65,.3,1);
  transform-origin: 52% 52%;
  /* Trace the front board, headband, pages and back board of the supplied jacket. */
  clip-path: polygon(2.2% 6.6%, 2.8% 6.2%, 90.8% .65%, 91.3% .95%, 91.6% 2.28%, 94.95% 4.15%, 97.35% 3.96%, 98.95% 4.34%, 99.05% 95.1%, 96.3% 95.8%, 91.6% 98.4%, 91% 99.6%, 2.35% 94.6%);
}
.floating-book-label {
  position: absolute; display: block; z-index: 1; bottom: 7%; left: 50%;
  padding: .35em 1em; width: max-content; max-width: 100%;
  border: 1px solid #83d9dd88; border-radius: 2px; background: #031114e8;
  color: #e1f9fa; font: 400 clamp(10px,.9vw,14px)/1.5 var(--display);
  letter-spacing: .13em; text-transform: uppercase; transform: translate(-50%,4px);
  opacity: 0; transition: opacity .22s, transform .22s;
}
.floating-book:focus-visible .floating-book-label { opacity: 1; transform: translate(-50%,0); }
@media (hover:hover) {
  .floating-book:hover .floating-book-label { opacity: 1; transform: translate(-50%,0); }
}
@keyframes book-drift {
  0%, 100% { transform: translate3d(0,2px,0) rotate(-.16deg); }
  50% { transform: translate3d(1px,-3px,0) rotate(.16deg); }
}
@keyframes book-ground {
  0%, 100% { opacity: .81; transform: rotate(2deg) scaleX(.98); }
  50% { opacity: .71; transform: rotate(2deg) scaleX(1.015); }
}
.hero[data-motion="paused"] .floating-book-body,
.hero[data-motion="paused"] .floating-book::before,
.hero.book-offscreen .floating-book-body,
.hero.book-offscreen .floating-book::before { animation-play-state: paused; }
.hero[data-motion="paused"] .floating-book img { transform: none; }
@media(max-width:740px) {
  .hero { --masthead-height: 66px; }
}
@media(max-aspect-ratio:4/5) {
  .hero { align-items: start; }
  .hero::before { background-image: url("assets/hero-live-portrait.webp"); background-position: 50% 60%; }
  .hero::after {
    background: linear-gradient(115deg,#01080cc7 0%,#020c0e7d 30%,transparent 57%),linear-gradient(0deg,#010a0d59,transparent 29%);
  }
  .hero-inner { width: 100%; padding: clamp(22px,4.6svh,60px) 6.3vw 16px; }
  .hero .actions { gap: clamp(7px,2vw,18px); }
  .floating-book, .book-mount { --cover-width: min(24vw,162px); right: 4.7%; bottom: 16.6%; }
  .floating-book::before { filter: blur(2px); }
}
@media(max-width:740px) and (min-aspect-ratio:4/5) {
  .hero { align-items: center; }
  .hero-inner { width: 59%; padding: 22px 0 24px 5vw; }
  .hero h1 { font-size: clamp(33px,6vw,44px); }
  .hero .premise { font-size: 11px; }
  .hero .actions { gap: 7px; flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .floating-book-body,.floating-book::before { animation: none; }
  .floating-book img { transform:none; }
}
@media(max-width:370px) and (max-aspect-ratio:4/5) {
  .hero-inner { padding: 18px 5vw; }
  .hero h1 { font-size: clamp(32px,10.3vw,38px); }
  .hero .eyebrow { font-size: 10px; }
  .hero .premise { margin-top: 12px; font-size: 11px; }
  .hero .actions { flex-wrap: nowrap; gap: 6px; margin-top: 13px; }
  .hero .btn { font-size: 10px; letter-spacing: .09em; padding-inline: 10px; min-height: 40px; }
}
@media(max-height:540px) and (min-aspect-ratio:1/1) {
  .hero-inner { padding-block: 14px 43px; }
  .hero h1 { font-size: clamp(31px,4.15vw,48px); }
  .hero .eyebrow { font-size: 11px; margin-bottom: 7px; }
  .hero .premise { margin-top: 10px; font-size: 11px; line-height: 1.4; }
  .hero .premise::before { margin-bottom: 6px; }
  .hero .actions { margin-top: 13px; }
  .hero .btn { min-height: 36px; font-size: 11px; }
}
/* Both boards and the four exposed edges rotate as one physical volume. */
.book-mount {
  /* Thickness follows the cover in both width-limited and height-limited scenes. */
  --depth:calc(var(--cover-width) * .345);
  --board-z:calc(var(--depth) / 2);
  --board-edge:clamp(1px,.12vw,2px);
  perspective:none;
}
.book-mount > .floating-book {
  position:relative; inset:auto; width:100%; height:100%;
  perspective:calc(var(--cover-width) * 3.5); transform-style:preserve-3d;
}
.book-mount .floating-book-body {
  filter:none; transform-style:preserve-3d;
}
.volume {
  position:absolute; inset:0; display:block;
  transform-style:preserve-3d; transform-origin:50% 50%;
  transform:rotateX(0deg) rotateY(-21.5deg);
  transition:transform 1.4s cubic-bezier(.45,.04,.24,1);
}
.shows-back .volume { transform:rotateX(-4deg) rotateY(202deg) rotateZ(1deg); }
.volume > span { display:block; position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.volume-face { inset:0; background:#071416; box-shadow:0 0 0 1px #213336; }
.volume-front { transform:translateZ(var(--board-z)); background:transparent; box-shadow:none; }
.volume-back { transform:rotateY(180deg) translateZ(var(--board-z)); }
.book-mount .volume-face > img {
  display:block; width:100%; height:100%; object-fit:contain;
  clip-path:none; transform:none; transition:none;
}
.volume-back::after {
  content:""; position:absolute; inset:0; box-shadow:inset 1px 0 1px #acc9cc4d, inset -1px 0 1px #071010b3;
  background:linear-gradient(270deg,#070e1099,transparent 1.2%,#02060969 2.8%,#88afb12b 3.4%,transparent 4.5%);
}
.volume-pages,.volume-spine { top:0; height:100%; width:var(--depth); }
.volume-pages {
  left:100%; transform-origin:0 50%; transform:translateZ(var(--board-z)) rotateY(90deg);
  /* Front and fore edge carry adjacent surfaces of the original photographic jacket. */
  background: url("assets/cover-page-edge.webp") center / 100% 100% no-repeat;
}
.volume-spine {
  right:100%; transform-origin:100% 50%; transform:translateZ(var(--board-z)) rotateY(-90deg);
  background:
    linear-gradient(90deg,#030c0fd9,#06141713 15%,#96d3d517 40%,transparent 58%,#020a0d94 100%),
    #0b1e20 url("assets/cover-spine.webp") center / 100% 100% no-repeat;
  box-shadow:inset 1px 0 #8db8b978,inset -1px 0 #6a8a8c70;
}
.volume-head,.volume-foot {
  left:0; width:100%; height:var(--depth);
  background:
    linear-gradient(0deg,#1a3037 var(--board-edge),transparent 8% 92%,#172b33 calc(100% - var(--board-edge))),
    linear-gradient(90deg,#0d252b8c,transparent 15%,#60848919 80%,#20303149),
    repeating-linear-gradient(0deg,#697c7d 0 .8px,#abb6ab 1px 1.8px,#94a7a5 2px);
}
.volume-head { bottom:100%; transform-origin:50% 100%; transform:translateZ(var(--board-z)) rotateX(90deg); }
.volume-foot { top:100%; transform-origin:50% 0; transform:translateZ(var(--board-z)) rotateX(-90deg); }
.book-mount .floating-book-label {
  position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%);
}
.cover-tools {
  position:absolute; top:calc(100% + min(3%,15px)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; padding-top:clamp(8px,1.4vw,20px);
}
.cover-tools button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px;
  padding:6px 10px; border:0; background:#041217c9; color:#b7d4d7;
  font:400 10px/1.3 var(--display); letter-spacing:.13em; text-transform:uppercase;
}
.cover-tools button:first-child { border-radius:4px 0 0 4px; }
.cover-tools button:last-child { border-radius:0 4px 4px 0; }
.cover-tools button:hover,.cover-tools [aria-pressed=true] { color:#c9fcff; background:#0b252cdb; }
.cover-tools svg { width:17px; height:17px; }
.book-mount:focus-within { z-index:4; }
.cover-view {
  width:min(920px,94vw); height:min(960px,93vh); height:min(960px,93dvh);
  max-width:none; max-height:none; padding:0; overflow:hidden;
  color:#e1f1ee; border:1px solid #466165; background:#061013; box-shadow:0 20px 90px #000c;
}
.cover-view[open] { display:flex; flex-direction:column; }
.cover-view::backdrop { background:#000d; }
.cover-view header { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid #244347; }
.cover-view h2 { margin:0 auto 0 0; font:400 clamp(16px,2.2vw,23px)/1.2 var(--display); text-transform:uppercase; letter-spacing:.07em; }
.cover-view button { min-height:40px; border:1px solid #36575b; background:#0a1c20; color:#ceeeef; }
.cover-scale { font:400 12px/1.2 var(--body); padding:6px 10px; }
.cover-dismiss { min-width:40px; font:300 26px/1 Arial,sans-serif; }
.cover-pan { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.cover-pan img { display:block; width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.is-enlarged .cover-pan img { width:max(100%,1024px); height:auto; max-width:none; cursor:zoom-out; }
body:has(.cover-view[open]) { overflow:hidden; }
@media(max-width:740px) {
  .cover-tools { top:100%; padding-top:5px; }
  .cover-tools button { width:42px; height:40px; padding:5px; }
  .cover-tools span { display:none; }
  .cover-view { width:96vw; height:92dvh; }
  .cover-view header { gap:6px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .volume { transition:none; }
}
.hero[data-motion="paused"] .volume { transition:none; }