:root{--paper:#f6f2ea;--ink:#211f1c;--red:#a63a35;--night:#242321;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#1d1c1a}
body{font-family:Arial,sans-serif;color:#f7f2e8;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.10),transparent 36%),linear-gradient(160deg,#34322f 0%,#1d1c1a 100%);background-attachment:fixed}
button,a{font:inherit}
.shell{width:min(1180px,100%);min-height:100vh;margin:auto;padding:1.3rem 1rem 1.15rem;display:flex;flex-direction:column}
.heading{text-align:center;margin-bottom:.85rem}
.kicker{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.68}
h1{font:700 clamp(1.55rem,3vw,2.35rem)/1.1 Georgia,serif;margin:.38rem 0 .28rem}
.red-rule{width:48px;height:2px;background:var(--red);margin:.8rem auto 0}
.viewer{flex:1;min-height:0;display:grid;place-items:center;touch-action:pan-x pan-y pinch-zoom}
.slide{width:100%;display:flex;justify-content:center;align-items:center;gap:.55rem;min-height:0}
.page{display:block;max-height:calc(100vh - 220px);max-width:min(570px,100%);width:auto;height:auto;object-fit:contain;border-radius:1px;box-shadow:0 14px 42px rgba(0,0,0,.42);background:#fff;touch-action:pan-x pan-y pinch-zoom}
.cover-stack{width:min(570px,100%);display:flex;flex-direction:column;align-items:stretch;gap:.8rem}
.cover-stack .page{max-width:100%;align-self:center}
.buy{display:flex;align-items:center;justify-content:center;min-height:3.15rem;padding:.75rem 1rem;background:var(--red);border:1px solid #b94a43;color:#fff;text-decoration:none;font-weight:700;border-radius:2px;animation:orderPulse 2.15s ease-in-out infinite}
.buy:hover,.buy:focus-visible{background:#b54840;animation-play-state:paused;outline:2px solid #fff;outline-offset:2px}
@keyframes orderPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(166,58,53,.18)}50%{transform:scale(1.025);box-shadow:0 0 0 9px rgba(166,58,53,0)}}
.controls{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:.65rem;align-items:center;margin-top:.85rem}
.controls button{min-height:2.7rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#f7f2e8;border-radius:2px;padding:.55rem .9rem;cursor:pointer}
.controls button:hover:not(:disabled),.controls button:focus-visible{border-color:#b14a43;color:#fff;outline:none}
.controls button:disabled{opacity:.35;cursor:default}
.position{text-align:center;font-size:.78rem;line-height:1.4;letter-spacing:.05em;color:rgba(255,255,255,.66)}
footer{text-align:center;color:rgba(255,255,255,.42);font-size:.7rem;line-height:1.3;margin-top:.85rem}
@media(max-width:640px){
  .shell{padding:.65rem .55rem .9rem}
  h1{font-size:1.5rem}.kicker{font-size:.64rem}
  .heading{margin-bottom:.55rem}.red-rule{margin-top:.55rem}
  .slide{gap:.18rem}
  .page{max-width:100%;max-height:calc(100vh - 205px);box-shadow:0 8px 22px rgba(0,0,0,.38)}
  .controls{grid-template-columns:.8fr 1.55fr .8fr;gap:.35rem;margin-top:.6rem}
  .controls button{padding:.45rem .35rem}
  .controls>button span{display:none}
  footer{margin-top:.55rem}
}
@media(prefers-reduced-motion:reduce){.buy{animation:none}}