:root { color-scheme: light; --ink:#4b4138; --paper:#fffdf7; --accent:#8b4e35; --duration:680ms; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
body { color:var(--ink); background:radial-gradient(ellipse at 50% 40%, #f6f1e7 0%, #e9e2d7 75%); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; -webkit-tap-highlight-color:transparent; }
.workspace { height:100dvh; height:100svh; display:flex; flex-direction:column; align-items:center; padding:12px 16px 10px; gap:10px; }
.heading { text-align:center; flex:none; }
.eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:#85766a; }
h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(22px,2.7vw,32px); font-weight:400; margin:8px 0 0; }
.reader { flex:1; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.notebook { position:relative; flex:0 1 auto; min-height:0; width:min(1200px,calc((100svh - 150px) * 1.414)); aspect-ratio:1.414; max-width:calc(100vw - 44px); perspective:1800px; touch-action:none; user-select:none; cursor:grab; filter:drop-shadow(0 17px 20px #5b422329); outline:none; }
.notebook:active { cursor:grabbing; }
.notebook:focus-visible { outline:2px solid var(--accent); outline-offset:10px; }
.binding { position:absolute; top:-5px; bottom:-5px; left:-13px; width:calc(100% + 20px); border-radius:5px 11px 11px 5px; background:linear-gradient(90deg,#5c3b2d 0%,#825b43 2%,#a57856 3%,#997052 100%); box-shadow:inset 0 0 0 1px #0002; }
.paper-stack { position:absolute; inset:3px -4px -4px 1px; border-radius:2px 7px 7px 2px; background:repeating-linear-gradient(0deg,#e1d8c9 0px,#f9f4e9 1px,#f9f4e9 3px); border:1px solid #d5caba; }
.sheet { position:absolute; inset:0; background:linear-gradient(90deg,#ddd2be 0%,#f4eddd 1%,var(--paper) 6%,#fffdf7 95%,#faf6eb 100%); border-radius:2px 5px 5px 2px; box-shadow:inset 0 0 0 1px #81664a12; }
.sheet::after { content:""; position:absolute; top:0; bottom:0; left:15px; width:1px; background:#9d816619; }
.page-number { position:absolute; bottom:24px; left:0; width:100%; text-align:center; font-family:Georgia,"Times New Roman",serif; font-size:20px; color:#897361; }
.turning-sheet { position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d; z-index:3; }
.turning-sheet[hidden] { display:none; }
.face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.back { transform:rotateY(180deg); background:linear-gradient(90deg,#f5efdf,var(--paper) 90%,#ded2bd); }
.turning-sheet.forward { animation:forward var(--duration) cubic-bezier(.35,.02,.25,1) both; }
.turning-sheet.backward { animation:backward var(--duration) cubic-bezier(.35,.02,.25,1) both; }
@keyframes forward { 0% {transform:rotateY(0deg);} 50% {filter:brightness(.92); } 100% {transform:rotateY(-180deg);} }
@keyframes backward { 0% {transform:rotateY(-180deg);} 50% {filter:brightness(.92); } 100% {transform:rotateY(0deg);} }
.navigation { display:flex; align-items:center; justify-content:center; gap:30px; flex:none; }
.arrow { width:44px; height:44px; padding:11px; border:1px solid #8b735733; border-radius:50%; background:#fff9; color:var(--ink); cursor:pointer; transition:background .15s,opacity .15s; }
.arrow:hover:not(:disabled) { background:#fffdf7; }
.arrow:disabled { opacity:.28; cursor:default; }
.arrow:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.arrow svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.position { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:70px; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.dots { display:flex; gap:7px; }
.dots i { width:4px; height:4px; border-radius:50%; background:#b9ab9c; }
.dots i.active { background:var(--accent); }
.hint { margin:0; font-size:11px; color:#8a7d71; flex:none; }
.mobile-hint { display:none; }
footer { font-size:9px; letter-spacing:.1em; color:#9b8d7e; flex:none; }
@media (max-width:600px) and (orientation:portrait) { .workspace { padding:max(18px,env(safe-area-inset-top)) 22px max(12px,env(safe-area-inset-bottom)); gap:18px; } .eyebrow { font-size:8px; letter-spacing:.15em; } h1 { font-size:24px; } .reader { gap:16px; } .notebook { flex:1; width:100%; max-width:calc(100vw - 58px); aspect-ratio:auto; } .page-number { bottom:22px; font-size:22px; } .desktop-hint { display:none; } .mobile-hint { display:inline; } .navigation { gap:32px; } }
@media (max-height:500px) { .workspace { padding:10px 20px; gap:8px; } .heading .eyebrow, footer, .hint { display:none; } h1 { font-size:20px; margin:0; } .reader { gap:9px; } .navigation .arrow { width:36px; height:36px; padding:8px; } .page-number { bottom:12px; } }
@media (prefers-reduced-motion:reduce) { :root { --duration:1ms; } .arrow { transition:none; } }

/* The book retains its turned leaves on the left of the spine. */
.notebook.open { transform:none; }
.notebook.open .binding { left:-100%; width:calc(200% + 7px); }
.leaves { position:absolute; inset:0; transform-style:preserve-3d; }
.turning-sheet.flipped { transform:rotateY(-180deg); }
.back { border-radius:5px 2px 2px 5px; }
.notebook.open::after { content:""; position:absolute; z-index:9; left:-2px; top:0; bottom:0; width:5px; pointer-events:none; background:linear-gradient(90deg,#59452c22,#fff5,#59452c33); }
@media (max-width:600px) and (orientation:portrait) {
  .notebook.open { width:100%; transform:none; }
  .notebook.open .binding { left:-13px; width:calc(100% + 20px); }
  .back .page-number { display:none; }
  .reader { gap:16px; }
}

/* On a landscape phone, unused horizontal space must not reveal a full spread. */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) {
  .notebook { clip-path:inset(-12px -12px -12px -28px); }
  .notebook.open .binding { left:-13px; width:calc(100% + 20px); }
}

.cover, .cover-back { background:linear-gradient(100deg,#4b3025,#664333 48%,#56372a); color:#f5e8d2; box-shadow:inset 0 0 0 1px #d4b28c33; }
.cover::after { background:#f6dfb014; }
.cover-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:38px; padding:24px; text-align:center; }
.cover-title span { white-space:nowrap; }
.cover-title { display:flex; flex-direction:column; gap:16px; margin:0; font-size:clamp(25px,4.2vw,56px); color:#f5e8d2; }
.cover-title span:first-child { font-family:system-ui,sans-serif; font-size:clamp(10px,1.2vw,15px); letter-spacing:.24em; font-weight:400; }
.cover-email { width:min(300px,90%); text-align:left; }
.cover-email label { display:block; margin-bottom:9px; font-size:11px; letter-spacing:.08em; color:#e0c8b1; }
.cover-email input { width:100%; border:1px solid #d6b79666; border-radius:4px; background:#fff9ef0c; padding:13px 15px; color:#fff4e3; font:inherit; font-size:16px; user-select:text; touch-action:manipulation; }
.cover-email input::placeholder { color:#d9c2ac; }
.cover-email input:focus { outline:2px solid #d6b796; outline-offset:3px; }
.page-content { position:absolute; inset:0; padding:clamp(28px,5vw,68px); }
.page-content h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,3vw,38px); font-weight:400; margin:0; }
@media (max-width:600px) and (orientation:portrait) { .cover-content { gap:38px; padding:20px; } .cover-title { font-size:clamp(22px,7vw,28px); gap:16px; } .cover-title span:first-child { font-size:10px; letter-spacing:.17em; } }
@media (max-height:500px) and (orientation:landscape) { .cover-content { gap:20px; padding:16px; } .cover-title { font-size:clamp(16px,calc((100svh - 150px) * .08),24px); gap:8px; } .cover-title span:first-child { font-size:9px; } .cover-email input { padding:9px 12px; } .cover-email label { margin-bottom:5px; } }