:root { --ink:#f4f0e8; --dark:#080908; --gold:#b99a62; --line:rgba(185,154,98,.32); --muted:#989188; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; overflow:hidden; background:var(--dark); color:var(--ink); font-family:"Manrope",sans-serif; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.reader-header { height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 28px; border-bottom:1px solid var(--line); background:#080908; }
.reader-header img { width:165px; display:block; }
.reader-header > div { display:grid; justify-items:center; gap:3px; }
.reader-header strong { font-family:"Cormorant Garamond",Georgia,serif; font-size:22px; font-weight:400; }
.reader-header span,.reader-header a,.reader-header button { color:var(--muted); font-size:8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.reader-header nav { justify-self:end; display:flex; align-items:center; gap:20px; }
.reader-header button { border:0; background:none; padding:0; cursor:pointer; }
.reader-header a:hover,.reader-header button:hover { color:var(--gold); }
.reader-shell { height:calc(100% - 126px); position:relative; padding:20px 0; }
.reader-track { height:100%; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; }
.reader-track::-webkit-scrollbar { display:none; }
.spread { min-width:100%; height:100%; scroll-snap-align:center; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:center; align-items:center; gap:2px; padding:0 max(22px,calc((100vw - 1260px)/2)); }
.spread.single { grid-template-columns:minmax(0,1fr); padding-left:max(22px,calc((100vw - 630px)/2)); padding-right:max(22px,calc((100vw - 630px)/2)); }
.spread img { width:100%; height:100%; min-height:0; object-fit:contain; filter:drop-shadow(0 15px 24px rgba(0,0,0,.4)); }
.spread:not(.single) img:first-child { justify-self:end; object-position:right center; }
.spread:not(.single) img:last-child { justify-self:start; object-position:left center; }
.reader-controls { height:54px; display:grid; grid-template-columns:70px 1fr 70px; align-items:center; border-top:1px solid var(--line); background:#080908; }
.reader-controls button { height:100%; border:0; background:none; color:var(--gold); font-size:20px; cursor:pointer; }
.reader-controls button:disabled { color:#45443f; cursor:default; }
.reader-controls div { display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.reader-controls i { width:54px; height:1px; background:var(--line); }

@media(max-width:760px){
  .reader-header { grid-template-columns:1fr auto; height:64px; padding:0 16px; }
  .reader-header img { width:145px; }
  .reader-header > div { display:none; }
  .reader-header nav { gap:14px; }
  .reader-header nav a:first-child,.reader-header button { display:none; }
  .reader-shell { height:calc(100% - 116px); padding:12px 0; }
  .spread,.spread.single { grid-template-columns:1fr; padding:0 12px; }
  .reader-controls { height:52px; }
}