{
margin:0;
padding:0;
height:100%;
background:
radial-gradient(ellipse at 50% 0%, #24405f 0%, var(--navy) 45%, var(--navy-deep) 100%);
font-family: 'Iowan Old Style','Palatino Linotype', Georgia, 'Times New Roman', serif;
color: var(--paper);
overflow:hidden;
}

.stage{
position:relative;
width:100%;
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap: 14px;
padding: 16px 10px;
}

.stage::before{
content:"";
position:absolute;
inset:0;
background: repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
pointer-events:none;
}

.masthead{ text-align:center; z-index: 2; }
.masthead .eyebrow{
font-family: Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--gold);
margin: 0 0 2px 0;
}
.masthead h1{
margin: 0;
font-size: clamp(18px, 3vw, 26px);
font-weight: 600;
color: var(--paper);
}

.book-wrap{
position:relative;
perspective: 3000px;
perspective-origin: 50% 50%;
z-index: 2;
}

.book-shadow{
position:absolute;
left: 8%;
right: 8%;
bottom: -20px;
height: 30px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
filter: blur(2px);
z-index: 0;
transition: left 0.85s ease, right 0.85s ease;
}

.book-mask{
position: relative;
overflow: hidden;
transition: width 0.85s cubic-bezier(.4,.15,.2,1);
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 8px 10px 26px rgba(0,0,0,0.35);
}

.book-inner{
position: relative;
transform-style: preserve-3d;
transition: transform 0.85s cubic-bezier(.4,.15,.2,1);
}

.gutter-shadow{
position:absolute;
top:0; bottom:0; left:50%;
width: 26px;
margin-left: -13px;
background: linear-gradient(90deg, rgba(0,0,0,0.16), rgba(0,0,0,0) 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.16));
z-index: 600;
pointer-events:none;
}

.leaf{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 0.85s cubic-bezier(.4,.15,.2,1);
cursor: pointer;
}

.leaf .face{
position:absolute;
inset:0;
backface-visibility: hidden;
overflow:hidden;
background: var(--paper);
}

.leaf .face img{
width:100%;
height:100%;
display:block;
object-fit: cover;
}

.leaf .face.back{
transform: rotateY(180deg);
}
.leaf .face.back::after{
content:"";
position:absolute;
inset:0;
background: repeating-linear-gradient(180deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px);
}

.leaf.flipped{ transform: rotateY(-180deg); }

.edge-stack{
position:absolute;
top: 2%; bottom: 2%;
width: 8px;
background: repeating-linear-gradient(180deg, #e8e3d6 0 2px, #cfc9b8 2px 3px);
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease;
}
.edge-stack.right{ right: -6px; border-radius: 0 3px 3px 0; box-shadow: 2px 0 6px rgba(0,0,0,0.3); }
.edge-stack.left{ left: -6px; border-radius: 3px 0 0 3px; box-shadow: -2px 0 6px rgba(0,0,0,0.3); }
.edge-stack.show{ opacity: 1; }

.nav-zone{
position:absolute;
top:0; bottom:0;
width: 50%;
z-index: 900;
cursor: pointer;
}
.nav-zone.left{ left:0; }
.nav-zone.right{ right:0; }

.controls{ display:flex; align-items:center; gap: 18px; z-index: 2; }
.ctrl-btn{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.25);
color: var(--paper);
width: 38px; height: 38px;
border-radius: 50%;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition: background 0.2s ease, transform 0.15s ease;
font-size: 16px;
user-select:none;
}
.ctrl-btn:hover{ background: rgba(255,255,255,0.18); }
.ctrl-btn:active{ transform: scale(0.92); }
.ctrl-btn.disabled{ opacity: 0.28; cursor:default; pointer-events:none; }

.page-indicator{
font-variant-numeric: tabular-nums;
font-size: 14px;
letter-spacing: 0.02em;
color: rgba(253,252,248,0.85);
min-width: 120px;
text-align:center;
}

.hint{
font-size: 11.5px;
color: rgba(253,252,248,0.45);
z-index: 2;
}

@media (max-width: 480px){
.masthead h1{ font-size: 16px; }
.masthead .eyebrow{ font-size: 11px; }
.hint{ display:none; }
}