:root{--navy:#071525;--navy-2:#0b2038;--navy-3:#102b48;--gold:#dfc17a;--gold-rich:#b68d42;--gold-dim:#a6874c;--ivory:#f8f0df;--ink:#322a22;--muted:#b3abb1;--ease:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Georgia,'Times New Roman',serif}body{background:var(--navy);color:#f5e9ce;overflow-x:hidden;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:focus-visible,.book-body:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button:disabled{opacity:.29;cursor:not-allowed}.ambient{inset:0;position:fixed;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 52% 26%,#1e3451 0%,#0c1a2e 38%,#06111e 74%);z-index:-2}.ambient span{position:absolute;display:block;border-radius:50%;filter:blur(50px);opacity:.18}.ambient span:nth-child(1){width:340px;height:300px;left:-120px;top:21%;background:#d8a750}.ambient span:nth-child(2){width:500px;height:300px;right:-170px;bottom:4%;background:#335f9b}.ambient span:nth-child(3){width:250px;height:200px;left:43%;top:-80px;background:#e5bc77}
.is-hidden{display:none!important}.welcome{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px 35px;gap:16px;text-align:center;position:relative}.welcome:before,.welcome:after{content:'';position:absolute;width:120px;height:120px;border:1px solid rgba(214,183,113,.14);pointer-events:none}.welcome:before{top:28px;left:28px;border-right:0;border-bottom:0}.welcome:after{bottom:28px;right:28px;border-left:0;border-top:0}.eyebrow{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.28em;font-weight:600;font-size:10px;color:var(--gold)}.welcome-heading p{font-size:13px;color:#bfb5a4;font-style:italic;margin:9px 0 0}.cover-click{background:none;border:0;padding:4px 14px 12px;perspective:1300px;position:relative;margin:6px auto 0}.cover-click:after{content:'';display:block;position:absolute;z-index:-1;left:10%;right:10%;bottom:-14px;height:27px;border-radius:50%;background:rgba(0,0,0,.85);filter:blur(21px)}.cover-3d{width:clamp(240px,29vw,335px);aspect-ratio:.716;position:relative;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.62,.04,.21,1),filter .6s;transform-origin:4% center;transform:rotateX(2deg) rotateY(-9deg) rotateZ(-1deg);filter:drop-shadow(18px 16px 12px #0008)}.cover-click:hover .cover-3d{transform:rotateX(1deg) rotateY(-3deg) rotateZ(0deg) translateY(-5px)}.cover-3d:after{content:"";position:absolute;inset:0;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(115deg,#08182b,#143453);border:8px solid #091629;box-shadow:inset 0 0 0 2px #b1945c,inset 0 0 0 24px #0b2038,inset 0 0 0 25px #b1945c}.cover-art{backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;inset:0;background:radial-gradient(ellipse at 83% 20%,rgba(55,83,110,.27),transparent 57%),repeating-linear-gradient(105deg,transparent 0px,rgba(255,255,255,.02) 1px,transparent 3px,transparent 7px),linear-gradient(110deg,#081b31,#173654 7%,#091a2e 17%,#102a46 62%,#0c1b2f);border:1px solid #736347;border-left:9px solid #071525;box-shadow:inset 0 0 0 5px #122d4b,inset 0 0 0 7px rgba(213,174,105,.62),inset 0 0 0 10px #071525,inset 0 0 0 11px rgba(211,170,96,.29),inset 12px 0 22px rgba(0,0,0,.52), 2px 2px 1px #e0cd9d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 35px;color:var(--gold);text-shadow:0 1px 0 #30280f,0 0 10px #d1a65a2e}.cover-thickness{position:absolute;inset:5px -12px -8px 8px;background:repeating-linear-gradient(to bottom,#e1c88f 0,#f5e6bc 1px,#c5b18a 2px);border:3px solid #c0a26e;border-radius:1px;transform:translateZ(-10px)}.cover-art:after{content:'';position:absolute;inset:18px;border:1px solid #c6a66452;pointer-events:none}.cover-mark{font-size:42px;line-height:1;margin-bottom:15px;font-weight:400}.cover-rule{width:65px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.cover-small{font-family:system-ui,sans-serif;letter-spacing:.3em;font-size:9px;margin:27px 0 8px}.cover-art h1{font-family:Georgia,serif;font-size:clamp(31px,3vw,42px);font-weight:normal;letter-spacing:.16em;margin:0 0 13px 5px}.cover-subtitle{font-family:system-ui,sans-serif;letter-spacing:.18em;line-height:1.9;font-size:9px;max-width:225px}.cover-diamond{font-size:10px;margin:14px 0}.cover-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);width:85%}.cover-date{font:10px/1.6 system-ui,sans-serif;letter-spacing:.17em;margin:24px 0 9px}.cover-signature{font-style:italic;font-size:17px;margin:0}.cover-ornament{position:absolute;font-size:13px}.top-left{top:32px;left:35px}.top-right{top:32px;right:30px}.bottom-left{bottom:32px;left:35px}.bottom-right{bottom:32px;right:30px}.primary-btn{border:1px solid #e8cf93;color:#1e2734;background:linear-gradient(180deg,#f5dfa5,#cbaa66);border-radius:50px;min-width:245px;padding:15px 22px;display:flex;justify-content:center;gap:20px;align-items:center;font:600 12px system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 8px 27px #0005;transition:transform .2s,filter .2s}.primary-btn:hover{filter:brightness(1.09);transform:translateY(-2px)}.cover-hint{color:#a2a9b7;font:11px system-ui,sans-serif;margin:0}.welcome.opening .cover-3d{transform:rotateY(-164deg) rotateZ(-3deg) translateX(-14px);filter:drop-shadow(-18px 12px 16px #0009)}.welcome.opening .welcome-heading,.welcome.opening .primary-btn,.welcome.opening .cover-hint{opacity:0;transition:opacity .3s}
.reader{min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:0 18px 14px;position:relative;animation:readerFade .75s both}@keyframes readerFade{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}.reader-topbar{max-width:1480px;margin:0 auto;width:100%;min-height:74px;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:8px 16px;border-bottom:1px solid #bfaa7552}.brand-lockup{display:flex;gap:12px;align-items:center;min-width:185px}.brand-symbol{font-size:27px;color:var(--gold)}.brand-name{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.15em;color:#eed9a8}.brand-name small{display:block;font-size:8px;letter-spacing:.18em;color:#a8b3c0}.topbar-chapter{font-size:14px;font-style:italic;color:#cbb88e}.topbar-actions{display:flex;gap:5px;align-items:center}.icon-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;min-width:38px;background:transparent;color:#ded3bd;border:1px solid #ccba8a25;border-radius:8px;font:500 12px system-ui,sans-serif;padding:8px 10px;transition:background .2s}.icon-btn:hover,.text-btn:hover{background:#ffffff13}.icon-btn>span:first-child{font-size:18px}.reading-space{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;gap:16px;padding:12px 0}.side-quote{writing-mode:vertical-rl;color:#b49a625c;font:600 10px system-ui,sans-serif;letter-spacing:.2em}.side-quote-left{transform:rotate(180deg)}.book-frame{width:min(1060px,92vw,calc((100dvh - 190px)*1.57));aspect-ratio:1.575;max-height:calc(100dvh - 184px);position:relative;flex-shrink:1;filter:drop-shadow(0 28px 36px #0008)}.book-frame:before{content:'';position:absolute;inset:-9px -11px -9px -11px;background:linear-gradient(130deg,#8b6b3e,#d7bc80,#886837,#bd9e5f);border-radius:5px;box-shadow:0 0 0 5px #071320,0 0 0 6px #705735;opacity:.8}.book-edge{position:absolute;inset:-3px -6px -5px;background:#f1ddaf;border-radius:2px;box-shadow:1px 4px 0 #b8a77f,0 7px 0 #756140}.book-body{position:relative;width:100%;height:100%;background:#eadac0;perspective:2000px;isolation:isolate;outline:none;touch-action:pan-y}.book-gutter{position:absolute;width:24px;left:50%;top:0;bottom:0;z-index:5;pointer-events:none;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(91,61,28,.26) 35%,rgba(255,255,255,.12) 49%,rgba(91,61,28,.30) 58%,transparent)}.base-page{position:absolute;top:0;bottom:0;width:50%;height:100%;background:var(--ivory);overflow:hidden}.page-left{left:0}.page-right{right:0}.page-sheet{position:relative;width:100%;height:100%;background:linear-gradient(98deg,rgba(236,215,175,.55),transparent 16%),repeating-linear-gradient(20deg,#0000 0px,#0000 6px,#73532105 7px,#0000 9px),radial-gradient(ellipse at 90% 4%,#fffaf0,#f8f0df 70%);display:flex;flex-direction:column;align-items:stretch;padding:clamp(20px,3.3vw,48px) clamp(22px,3.8vw,52px) clamp(20px,3.4vw,44px);color:var(--ink);overflow:hidden}.page-left>.page-sheet{box-shadow:inset -13px 0 16px -11px #5a483e52}.page-right>.page-sheet{box-shadow:inset 13px 0 16px -11px #5a483e52}.page-sheet:after{content:'';position:absolute;pointer-events:none;inset:16px;border:1px solid #a68b5f38}.page-sheet>.tiny-corner{position:absolute;right:25px;top:23px;color:#b5955f81;font-size:12px}.page-crest{font-size:18px;color:var(--gold-rich);text-align:center;margin:5px 0 6px}.page-kicker{font:600 9px/1.3 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.22em;color:#967b50;text-align:center;margin:0 0 8px}.page-rule{height:1px;background:linear-gradient(90deg,transparent,#cbb68b,transparent);width:70%;align-self:center;margin-bottom:16px}.page-heading{font-size:clamp(19px,2.4vw,29px);color:#6d512f;line-height:1.16;font-weight:normal;text-align:center;margin:0 0 17px}.page-content{flex:1;min-height:0;overflow:hidden;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:12px;font-size:clamp(14px,1.32vw,18px);line-height:1.57;letter-spacing:.003em}.page-content.is-scrollable{overflow-y:auto;justify-content:flex-start;scrollbar-color:#b39a67 transparent;scrollbar-width:thin;padding-right:4px}.page-content p{margin:0}.page-content strong{color:#705229;font-weight:700}.page-content em{color:#755d39}.page-content .hero-line{font-size:1.15em;color:#856024;text-align:center;line-height:1.4;font-style:italic}.page-content .salutation{text-align:center;font-size:1.4em;color:#6f4e23;line-height:1.4}.page-content .center{text-align:center}.page-content .signature{text-align:center;font-size:1.25em;font-style:italic;color:#876332}.page-content .blessing{text-align:center;font-style:italic}.page-content .strongline{text-align:center;font-size:1.06em}.page-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px;font:10px system-ui,sans-serif;letter-spacing:.12em;color:#a58a5a;min-height:16px}.page-foot .foot-rule{width:18px;height:1px;background:#ae9258}.page-intro .page-content{text-align:center}.page-intro .introlabel{font:10px system-ui,sans-serif;letter-spacing:.23em;color:#967349}.page-intro .introheart{font-size:48px;color:#c49c5b;margin:14px 0}.page-intro .intro-title{font-size:clamp(31px,3vw,45px);font-weight:normal;line-height:1.12;color:#725329;margin:2px 0 16px}.page-intro .intro-subtitle{font-size:18px;color:#8d744e;font-style:italic;line-height:1.5}.page-intro .intro-border{height:1px;background:#b79a67;width:64px;margin:18px auto}.page-intro .intro-from{font-style:italic;color:#9b7840;font-size:17px}.flip-leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:8;transform-style:preserve-3d;transform-origin:left center;will-change:transform;pointer-events:none}.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--ivory)}.flip-face.back{transform:rotateY(180deg)}.flip-face.front:after,.flip-face.back:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#35281918,transparent 24%,#44331e20 98%)}.book-body.flipping{pointer-events:none}.book-body.flipping .book-gutter{opacity:.6}.reader-bottom{width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:center;padding:0 6px}.page-controls{display:flex;align-items:center;justify-content:center;gap:26px;width:100%}.nav-arrow{background:linear-gradient(180deg,#243c57,#0c2037);color:#e8ca87;border:1px solid #bda16b70;border-radius:50%;width:44px;height:44px;flex:0 0 44px;font:24px Arial;box-shadow:0 3px 10px #0003;transition:background .2s,transform .2s}.nav-arrow:not(:disabled):hover{transform:translateY(-2px);background:#29496c}.reader-progress{width:min(400px,57vw);text-align:center}.page-count{display:block;font:600 12px/1.5 system-ui,sans-serif;letter-spacing:.18em;color:var(--gold)}.progress-track{height:2px;background:#ffffff29;margin:8px auto 7px;max-width:350px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--gold);transition:width .45s}.progress-caption{font:11px system-ui,sans-serif;color:#9cabc0}.utility-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.text-btn{background:none;border:1px solid #ffffff13;border-radius:6px;color:#d0c5b7;padding:8px 13px;font:500 11px system-ui,sans-serif}.text-btn span{color:var(--gold);font-size:14px;margin-right:5px}
.overlay[hidden]{display:none}.overlay{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end}.overlay-scrim{position:absolute;inset:0;background:#000b;backdrop-filter:blur(4px)}.chapters-panel{position:relative;width:min(420px,92vw);height:100%;overflow:auto;background:linear-gradient(160deg,#152e4b,#071827);border-left:1px solid #bea36b88;box-shadow:-13px 0 45px #0009;padding:30px 28px;animation:slideIn .32s var(--ease)}@keyframes slideIn{from{transform:translateX(50px);opacity:.5}to{transform:none;opacity:1}}.panel-top{display:flex;justify-content:space-between;align-items:start}.panel-top h2{font-weight:normal;font-size:35px;margin:9px 0}.panel-close{border:1px solid #c8b07988;background:transparent;color:var(--gold);border-radius:50%;font:28px sans-serif;width:40px;height:40px}.panel-intro{font-size:15px;font-style:italic;color:#c1b3a1;line-height:1.6;margin-bottom:26px}.chapter-link{display:flex;width:100%;align-items:center;text-align:left;gap:17px;padding:18px 9px;border:0;border-top:1px solid #dcc5932c;color:#ebdbba;background:transparent;transition:background .15s}.chapter-link:hover,.chapter-link.active{background:#ffffff0d}.chapter-index{color:#baa16d;font:12px system-ui,sans-serif}.chapter-info{display:flex;flex-direction:column;gap:4px}.chapter-title{font-size:17px}.chapter-range{color:#9faebc;font:11px system-ui,sans-serif}.panel-footer{padding:25px 0;color:#ad986e;font:11px system-ui,sans-serif}.toast{position:fixed;z-index:150;bottom:25px;left:50%;transform:translate(-50%,20px);background:#f4e5c4;color:#332820;border-radius:9px;font:13px/1.5 system-ui,sans-serif;padding:13px 20px;box-shadow:0 12px 35px #0008;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.print-only{display:none}
@media (max-width:900px){.side-quote{display:none}.reader{padding:0 8px 15px}.reader-topbar{padding:8px}.brand-lockup{min-width:0}.topbar-chapter{display:none}.book-frame{width:min(1050px,97vw,calc((100dvh - 193px)*1.575))}.page-sheet{padding:clamp(20px,3.6vw,40px)}.page-content{font-size:clamp(13px,1.7vw,16px)}}
@media (max-width:680px){.welcome{gap:15px;padding:17px 12px 27px}.cover-3d{width:min(70vw,310px,calc((100dvh - 210px)*.716))}.welcome:before{top:14px;left:12px}.welcome:after{bottom:14px;right:12px}.reader-topbar{min-height:62px}.brand-symbol{font-size:22px}.brand-name{font-size:10px}.hide-small{display:none}.icon-btn{min-width:37px;min-height:37px;padding:6px}.reading-space{padding:9px 0 15px}.book-frame{width:min(420px,95vw,calc((100dvh - 215px)*.738));aspect-ratio:.738;max-height:calc(100dvh - 210px)}.book-frame:before{inset:-6px -7px -6px -8px}.book-body{perspective:1400px}.base-page{width:100%;left:0;right:auto}.page-left{display:none}.page-right{right:auto;left:0}.book-gutter{display:none}.page-sheet{padding:clamp(25px,6vw,39px) clamp(25px,6vw,36px) clamp(24px,6vw,36px)}.page-sheet:after{inset:12px}.page-content{font-size:clamp(13px,3.65vw,15px);line-height:1.55;gap:11px}.page-heading{font-size:clamp(20px,5.3vw,28px)}.page-rule{margin-bottom:10px}.page-kicker{font-size:8px}.page-foot{font-size:9px;margin-top:10px}.page-intro .intro-title{font-size:36px}.flip-leaf{left:0;width:100%}.reader-bottom{gap:10px}.reader-progress{width:min(310px,58vw)}.page-controls{gap:14px}.nav-arrow{height:42px;width:42px;flex-basis:42px}.progress-caption{font-size:10px}.utility-actions{gap:5px}.text-btn{font-size:10px;padding:9px 12px}} 
@media (max-height:650px){.cover-3d{width:min(220px,42vw,calc((100dvh - 130px)*.716))}.welcome{gap:8px}.welcome-heading p{display:none}.cover-click{margin:0}.cover-small{margin-top:10px}.cover-date{margin:9px 0 5px}.reader-topbar{min-height:50px}.reader-bottom{gap:4px}.page-controls{gap:11px}.utility-actions .text-btn{padding:5px 10px}.reading-space{padding:6px 0}} 
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{@page{size:A5 portrait;margin:14mm}html,body{background:#fff!important;color:#000!important;overflow:visible!important}.ambient,.welcome,.reader,.overlay,.toast{display:none!important}.print-only{display:block!important}.print-cover{page-break-after:always;height:170mm;border:2px solid #b18d52;padding:38mm 12mm;text-align:center;color:#233851}.print-cover h1{font:normal 35pt Georgia,serif}.print-cover h2{font:normal 14pt Georgia,serif;color:#8d692e;letter-spacing:3px}.print-cover p{margin-top:30mm;font-style:italic}.print-page{break-after:page;page-break-after:always;min-height:170mm;padding:15mm 9mm;border:1px solid #d5be8e}.print-page:last-child{break-after:auto}.print-kicker{font:8pt system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#a18a61;text-align:center}.print-page h3{font:normal 18pt Georgia,serif;color:#816131;text-align:center;margin:9mm 0}.print-copy{font:12pt/1.65 Georgia,serif}.print-copy p{margin:0 0 6mm}.print-copy strong{color:#8b632d}.print-page-number{font:8pt system-ui,sans-serif;text-align:center;margin-top:9mm;color:#aa926a}}


/* Flexible paper mesh — each narrow face is an articulated piece of one leaf. */
.curl-mesh{position:absolute;inset:0;z-index:15;transform-style:preserve-3d;pointer-events:none;overflow:visible}
.curl-strip{position:absolute;top:0;left:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.curl-face{position:absolute;inset:0;overflow:hidden;background:var(--ivory);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat}
.curl-front{transform:translateZ(.6px)}
.curl-back{transform:rotateY(180deg) translateZ(.6px)}
.curl-page-snapshot{position:absolute;top:0;left:0;height:100%;pointer-events:none}
.curl-page-snapshot>.page-sheet{height:100%;}
.curl-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(64,42,15,.13),rgba(255,249,229,.15) 36%,rgba(43,30,14,.14) 100%);opacity:clamp(0,var(--shade),.35)}
.curl-back:after{background:linear-gradient(90deg,rgba(60,43,23,.11),rgba(255,245,206,.25) 70%,rgba(52,37,16,.22))}
.curl-ground-shadow{position:absolute;top:0;bottom:0;z-index:12;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(36,25,15,.60) 50%,transparent);filter:blur(14px)}
.book-body.turn-in-progress{touch-action:none;cursor:grabbing}
.book-body:not(.turn-in-progress){cursor:grab}
.corner-cue{position:absolute;z-index:6;right:0;bottom:0;width:34px;height:34px;pointer-events:none;filter:drop-shadow(-2px -2px 2px #4b321e40);background:linear-gradient(140deg,#dfc48e 0%,#fffae8 52%,#ab8552 93%);clip-path:polygon(100% 0,0 100%,100% 100%);opacity:.8;transition:opacity .2s}
.corner-cue.previous{left:0;right:auto;transform:scaleX(-1)}
.corner-cue[hidden],.book-body.turn-in-progress .corner-cue{display:none}
@media(max-width:680px){.corner-cue.previous{display:none}.curl-ground-shadow{filter:blur(7px)}}

.curl-measure{position:absolute;top:0;left:-200vw;display:flex;flex-direction:column;visibility:hidden;pointer-events:none;z-index:-1}
.curl-measure>.page-sheet{flex:0 0 100%;height:100%}
/* Keep the primary open action tappable above the cover's 3D hit area on short phones. */
.welcome>.primary-btn{position:relative;z-index:3}

/* V4 AUTHENTIC HARDCOVER
   A straight-on luxury bound volume: slim ivory page block, correct back-board
   overhang and a rounded leather spine. The original cover art is unchanged. */
.cover-click{
  display:block;
  width:max-content;
  max-width:100%;
  margin:6px auto 0;
  padding:5px 18px 15px 12px;
  position:relative;
  perspective:1600px;
  -webkit-tap-highlight-color:transparent;
}
.cover-click::after{
  left:12%;right:8%;bottom:-4px;height:29px;
  background:rgba(0,0,0,.76);
  filter:blur(20px);
  z-index:-1;
}
.cover-3d{
  transform:none;
  transform-origin:3% center;
  filter:drop-shadow(3px 13px 14px rgba(0,0,0,.57));
  will-change:transform;
}
.cover-click:hover .cover-3d{
  transform:translateY(-2px);
  filter:drop-shadow(4px 19px 18px rgba(0,0,0,.65));
}
/* Lower board: navy leather with a narrow, believable cover overhang. */
.cover-3d::before{
  content:"";
  position:absolute;
  inset:2px -14px -9px 3px;
  z-index:0;
  border-radius:4px 6px 6px 5px;
  background:linear-gradient(90deg,#071728 0%,#10263d 70%,#071626 100%);
  border:2px solid #061321;
  box-shadow:
    0 0 0 1px rgba(191,153,88,.50),
    3px 5px 0 rgba(1,8,18,.85),
    8px 16px 23px rgba(0,0,0,.48);
  transform:translateZ(-11px);
}
/* Paper block: slightly recessed INSIDE both front and back hard covers. */
.cover-thickness{
  position:absolute;
  inset:5px -11px -5px 8px;
  z-index:1;
  border:none;
  border-radius:0 2px 2px 1px;
  background:#e9dfc8;
  box-shadow:
    1px 1px 0 #c3ae86,
    inset -1px 0 2px rgba(109,79,38,.22),
    inset 0 -1px 2px rgba(109,79,38,.16);
  transform:translateZ(-5px);
}
/* Fine horizontal fibres on the right fore-edge, not metallic ridges. */
.cover-thickness::before{
  content:"";
  position:absolute;
  top:0;bottom:0;right:0;width:12px;
  background:
    linear-gradient(90deg,rgba(138,113,78,.14),transparent 22%,rgba(105,81,48,.18) 95%),
    repeating-linear-gradient(to bottom,#e8dfcb 0px,#f9f4e8 1px,#e0d6be 2px,#efe6d3 3px);
  box-shadow:inset 1px 0 1px rgba(94,71,41,.18);
  opacity:.98;
}
/* Subtle paper sheet edges on the tail, only 5px visible. */
.cover-thickness::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:6px;
  background:
    linear-gradient(180deg,rgba(137,113,74,.23),transparent 35%,rgba(100,80,53,.17)),
    repeating-linear-gradient(to right,#eee5d3 0px,#fbf5e7 1px,#ded3bc 2px,#f1e8d6 3px);
}
/* The raised front board, with subtle rounded corners instead of a flat panel. */
.cover-art{
  z-index:3;
  border-radius:6px 3px 3px 7px;
  border:1px solid #23384a;
  box-shadow:
    inset 0 0 0 5px #122d4b,
    inset 0 0 0 7px rgba(213,174,105,.62),
    inset 0 0 0 10px #071525,
    inset 0 0 0 11px rgba(211,170,96,.29),
    inset 15px 0 17px rgba(0,0,0,.36),
    1px 1px 0 rgba(195,161,101,.62),
    2px 3px 4px rgba(0,0,0,.32);
  transform:translateZ(2px);
}
/* Cylindrical leather spine with a joint/hinge separating it from the board. */
.cover-art::before{
  content:"";
  position:absolute;
  top:-1px;bottom:-1px;left:-4px;width:23px;
  z-index:3;
  border-radius:9px 2px 2px 10px;
  background:
    linear-gradient(90deg,#04101c 0%,#0a2036 13%,#1c3852 37%,#122b46 60%,#061627 81%,rgba(4,13,23,.82) 100%);
  border-left:1px solid rgba(188,153,94,.40);
  border-right:1px solid rgba(5,12,23,.76);
  box-shadow:
    inset 2px 0 3px rgba(0,0,0,.45),
    inset -2px 0 3px rgba(0,0,0,.5),
    2px 0 2px rgba(1,8,17,.23);
  pointer-events:none;
}
/* Back of the opening cover still renders as leather. */
.cover-3d::after{z-index:2;border-radius:5px}
.welcome.opening .cover-3d{
  transform:rotateY(-164deg);
  filter:drop-shadow(-13px 12px 15px rgba(0,0,0,.61));
}
@media(max-width:680px){
  .cover-click{padding:5px 17px 14px 11px;}
  .cover-3d::before{inset:2px -13px -8px 3px;}
  .cover-thickness{inset:5px -10px -5px 8px;}
  .cover-art::before{width:19px;left:-3px;}
}
@media(max-width:350px){
  .cover-click{padding:4px 16px 13px 10px;}
  .cover-3d::before{inset:2px -12px -8px 3px;}
  .cover-thickness{inset:4px -9px -4px 7px;}
  .cover-art::before{width:17px;left:-3px;}
}
/* Avoid over-small cover on short phones while retaining the Open button. */
@media(max-height:650px){
  .cover-3d{width:min(220px,70vw,calc((100dvh - 205px)*.716));}
}


/* V4.2 CONTINUOUS COVER OPENING: the real greeting is underneath the cover.
   The hinge stays within the book footprint instead of throwing the cover off screen. */
.cover-click{--cover-w:clamp(240px,29vw,335px);isolation:isolate}
.cover-3d{width:var(--cover-w);position:relative;z-index:2;
  transition:transform 880ms cubic-bezier(.48,.08,.52,.92),filter 880ms ease}
.opening-preview{
  position:absolute;top:5px;left:12px;width:var(--cover-w);aspect-ratio:.716;
  z-index:1;visibility:hidden;overflow:hidden;
  background:#f8f0df;box-shadow:5px 10px 22px rgba(0,0,0,.55),inset 8px 0 14px #65492b3a;
  border:5px solid #0c2338;border-radius:5px;
  text-align:left;pointer-events:none
}
.opening-preview>.page-sheet{height:100%;width:100%;padding:21px 18px 20px;
  transform:none;box-shadow:inset 10px 0 12px #5a483e27}
.opening-preview .page-crest{font-size:13px;margin:2px 0 3px}
.opening-preview .page-kicker{font-size:7px;letter-spacing:.13em;margin-bottom:3px}
.opening-preview .page-rule{margin-bottom:6px}
.opening-preview .page-heading{font-size:17px;margin:6px 0 10px}
.opening-preview .page-content{font-size:12px!important;line-height:1.5!important}
.opening-preview .page-content p{margin:0 0 10px}
.opening-preview .salutation{font-size:13px}
.opening-preview .page-foot{font-size:8px}
.welcome.opening .opening-preview{visibility:visible}
.welcome.opening .cover-3d{
  transform:rotateY(-91deg)!important;
  filter:drop-shadow(-4px 5px 4px rgba(0,0,0,.5))
}
.reader{animation:readerFadeV42 230ms both}
@keyframes readerFadeV42{from{opacity:.7}to{opacity:1}}
@media(max-width:680px){.opening-preview{left:11px}}
@media(max-width:350px){.opening-preview{top:4px;left:10px}}
@media(max-height:650px){.cover-click{--cover-w:min(220px,70vw,calc((100dvh - 205px)*.716))}}
@media(prefers-reduced-motion:reduce){
  .cover-3d{transition-duration:0ms!important}
  .reader{animation:none!important}
}


/* V4.4 EMOJI PRESENTATION: keep each intentional group together, legible and centered.
   The letters, words and emoji codepoints of the original message are unchanged. */
.emoji-run{
  display:inline-block;
  white-space:nowrap;
  word-break:keep-all;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
  line-height:1.25;
  vertical-align:-.09em;
}
.page-content .emoji-line{
  display:block;
  width:max-content;
  max-width:100%;
  margin:7px auto 2px;
  text-align:center;
  font-size:1.14em;
  line-height:1.35;
  vertical-align:baseline;
}
.page-content .salutation .emoji-line{font-size:1em;margin-top:8px;margin-bottom:3px}
.page-content .emoji-line-wedding{margin-top:12px;margin-bottom:4px;font-size:1.2em}
@media(max-width:350px){
  .page-content .emoji-line{font-size:1.03em}
  .page-content .salutation .emoji-line{font-size:.96em}
  .page-content .emoji-line-wedding{font-size:1.11em}
}
@media print{
  .print-copy .emoji-line{display:block;text-align:center;margin:4mm auto 2mm;font-size:1.18em;vertical-align:baseline}
  .print-copy .emoji-line-wedding{margin-top:5mm}
}

/* V4.5 original birthday song — elegant mini-player outside turnable pages. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.music-player{
  display:flex;align-items:center;gap:10px;
  min-height:47px;width:min(560px,96vw);max-width:100%;
  padding:5px 11px;border:1px solid rgba(218,183,113,.36);
  border-radius:12px;background:linear-gradient(120deg,rgba(34,55,76,.94),rgba(8,25,43,.94));
  box-shadow:0 5px 16px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.07);
}
.music-play-btn{
  display:grid;place-items:center;flex:0 0 34px;height:34px;
  background:linear-gradient(160deg,#f0d99c,#c5a15b);color:#17283d;
  border:1px solid #ecd79c;border-radius:50%;font:700 15px/1 sans-serif;
  box-shadow:0 2px 8px #0004;transition:transform .2s;
}
.music-play-btn:hover{transform:scale(1.06)}
.music-player.is-playing .music-play-btn{box-shadow:0 0 0 3px #cdaa5b20,0 2px 8px #0004}
.music-track-info{min-width:0;flex:1;text-align:left}
.music-track-title{color:#f1dfb7;font:600 11px/1.35 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.music-track-state{color:#a7c1c7;font:10px/1.4 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-volume-label{color:#e6c987;font:600 11px system-ui,sans-serif;white-space:nowrap}
.music-volume{width:105px;max-width:24vw;min-width:45px;height:22px;accent-color:#dfc17a;cursor:pointer;touch-action:pan-x}
/* Reserve space for the mini-player so it never covers or crops a reading page. */
.book-frame{width:min(1060px,92vw,calc((100dvh - 244px)*1.575));max-height:calc(100dvh - 240px)}
@media(max-width:900px){.book-frame{width:min(1050px,97vw,calc((100dvh - 250px)*1.575))}}
@media(max-width:680px){
  .book-frame{width:min(420px,95vw,calc((100dvh - 272px)*.738));max-height:calc(100dvh - 267px)}
  .music-player{gap:7px;min-height:44px;padding:4px 8px;border-radius:10px}
  .music-play-btn{flex-basis:32px;height:32px}
  .music-track-title{font-size:10px}
  .music-track-state{font-size:9px}
  .music-volume{width:75px;max-width:23vw;min-width:42px}
}
@media(max-width:350px){.music-player{gap:5px;padding:4px 6px}.music-volume{min-width:40px;width:44px}.music-volume-label{font-size:10px}}
@media(max-height:650px){.music-player{min-height:40px}.music-play-btn{height:30px;flex-basis:30px}.book-frame{max-height:calc(100dvh - 253px)}}


/* V4.6: First approved mock-up, used pixel-for-pixel as the interactive book cover.
   Keep the original geometric hardcover depth, hinge, and transition; replace only cover paint. */
.cover-3d{aspect-ratio:3 / 4}
.cover-art{
  display:block;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:5px;
  background:transparent;
  text-shadow:none;
  box-shadow:1px 2px 3px rgba(0,0,0,.55);
}
.cover-art::before,.cover-art::after{display:none!important}
.cover-art .approved-cover-image{
  display:block;
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:fill;
  border-radius:5px;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.opening-preview{aspect-ratio:3 / 4}
@media(max-width:680px){
  .cover-click{--cover-w:min(70vw,310px,calc((100dvh - 205px)*.75))}
}
@media(max-width:350px){
  .cover-click{--cover-w:min(70vw,300px,calc((100dvh - 205px)*.75))}
}
@media(max-height:650px){
  .cover-click{--cover-w:min(220px,70vw,calc((100dvh - 205px)*.75))}
}


/* Version 4.7: photo interludes (separate from the original letter text). */
.page-sheet.photo-sheet{padding:clamp(18px,2.8vw,34px) clamp(19px,3.2vw,39px) clamp(17px,2.7vw,30px)}
.photo-sheet .page-crest{font-size:15px;margin:0 0 2px}
.photo-sheet .page-kicker{font-size:8px;margin:0 0 5px;line-height:1.2}
.photo-sheet .page-rule{margin-bottom:5px}
.photo-sheet .page-heading{font-size:clamp(16px,2vw,23px);line-height:1.12;margin:1px 0 10px}
.photo-sheet .page-content{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;min-height:0;gap:0;overflow:hidden}
.photo-gallery{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);gap:9px}
.photo-gallery.layout-two-portrait{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.photo-gallery.layout-mixed{grid-template-rows:1fr 1fr}
.photo-card{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;background:#fffaf0;border:1px solid #c6a86c;padding:5px 5px 4px;box-shadow:0 2px 9px rgba(77,50,17,.14),inset 0 0 0 1px #f6e7ce;color:#7b5b30;border-radius:2px;cursor:zoom-in;overflow:hidden;transition:box-shadow .2s ease}
.photo-card:hover,.photo-card:focus-visible{box-shadow:0 2px 13px rgba(77,50,17,.28),inset 0 0 0 1px #f6e7ce;outline-color:#b99556}
.photo-card img{display:block;width:100%;min-width:0;min-height:0;height:100%;flex:1 1 auto;object-fit:contain;object-position:center;background:#f6f0e5;pointer-events:none}
.photo-card .photo-caption{flex:0 0 auto;font:italic clamp(10px,.95vw,13px)/1.25 Georgia,serif;color:#765735;text-align:center;letter-spacing:.01em;padding:2px 0}
.photo-zoom-icon{position:absolute;top:8px;right:9px;background:rgba(10,24,41,.75);color:#f0d69b;font:17px/1 sans-serif;padding:3px 5px;border-radius:3px;pointer-events:none}
.photo-gallery.layout-two-portrait .photo-zoom-icon{top:6px;right:6px;font-size:13px;padding:2px 4px}
.photo-gallery.layout-two-portrait .photo-card img{height:auto;max-height:calc(100% - 30px);flex:0 1 auto}
.photo-gallery.layout-two-portrait .photo-caption{font-size:clamp(9px,.8vw,11px)}
.photo-lightbox[hidden]{display:none!important}
.photo-lightbox{position:fixed;inset:0;z-index:6000;background:rgba(2,9,18,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,3vw,35px);gap:12px;overscroll-behavior:contain}
.photo-lightbox img{max-width:min(1100px,96vw);width:auto;height:auto;max-height:calc(100dvh - 126px);object-fit:contain;border:2px solid #c4a46c;box-shadow:0 15px 60px #0009}
.photo-lightbox .lightbox-caption{color:#e5cc93;font:italic 18px/1.4 Georgia,serif;text-align:center}
.photo-close{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));background:#1b3048;border:1px solid #bfa16c;color:#f3da9a;border-radius:50%;width:44px;height:44px;font:32px/1 Arial;cursor:pointer}
@media(max-width:680px){
  .page-sheet.photo-sheet{padding:17px 16px 21px}
  .photo-sheet .page-crest{margin:0;font-size:12px}
  .photo-sheet .page-kicker{font-size:7px;margin-bottom:4px}
  .photo-sheet .page-rule{margin-bottom:3px}
  .photo-sheet .page-heading{font-size:clamp(15px,4vw,20px);margin:2px 0 8px}
  .photo-card{padding:4px 4px 2px}
  .photo-card .photo-caption{font-size:11px}
  .photo-gallery.layout-two-portrait .photo-caption{font-size:9px}
  .photo-gallery{gap:7px}
  .photo-zoom-icon{top:5px;right:5px}
  .photo-lightbox img{max-height:calc(100dvh - 106px)}
}
@media(max-width:350px){
  .photo-sheet .page-heading{font-size:15px;margin-bottom:4px}
  .photo-sheet .page-crest{display:none}
  .photo-sheet .page-kicker{margin:0 0 3px}
  .photo-sheet .page-rule{margin-bottom:2px}
  .photo-card .photo-caption{font-size:10px}
  .photo-gallery.layout-two-portrait .photo-caption{font-size:8px}
}
@media print{
  .photo-lightbox{display:none!important}
  .print-photo-gallery{display:flex;flex-direction:column;gap:5mm;height:125mm}
  .print-photo-card{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:2mm;border:1px solid #c9aa6e}
  .print-photo-card img{width:100%;height:90%;min-height:0;max-height:100%;object-fit:contain}
  .print-photo-card figcaption{text-align:center;color:#755b39;font:italic 9pt Georgia,serif}
}


/* VERSION 5.0 — CHAMPAGNE-GOLD PHOTO MOUNTS
   Frames tightly follow the *original* photo aspect ratio; captions are set
   apart on ivory rather than enclosed in oversized rectangular cards.
   Using 100cqw / 100cqh lets the photo fill the available page slot without
   stretching, distorting, or cropping a single pixel of the source image. */
.photo-gallery{gap:clamp(7px,1.05vw,13px)}
.photo-card{
  container-type:size;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;height:100%;min-width:0;min-height:0;
  padding:0 3px 0;margin:0;overflow:visible;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  color:#775c36;gap:clamp(5px,.7vw,9px);transition:none;
}
.photo-card:hover,.photo-card:focus-visible{box-shadow:none;outline-offset:1px}
.photo-card .photo-mount{
  position:relative;display:block;flex:0 0 auto;overflow:hidden;
  width:min(calc(100cqw - 16px),var(--photo-fit-width));
  max-width:calc(100cqw - 16px);
  max-height:calc(100cqh - 35px);
  aspect-ratio:var(--photo-ratio);
  background:#f7e8cd;
  border:1px solid #bba16c;
  outline:1px solid #decba1;
  outline-offset:2px;
  box-shadow:0 0 0 4px #f5ecd9, 0 0 0 5px rgba(142,108,57,.55),
             0 5px 11px rgba(54,37,15,.14);
}
.photo-card .photo-mount img,
.photo-gallery.layout-two-portrait .photo-card .photo-mount img{
  display:block;width:100%;height:100%;max-height:none;max-width:none;
  min-width:0;min-height:0;flex:none;object-fit:contain;object-position:center;
  background:transparent;pointer-events:none;
}
.photo-card .photo-caption,
.photo-gallery.layout-two-portrait .photo-caption{
  flex:0 0 auto;max-width:95cqw;overflow-wrap:break-word;
  color:#806342;font:italic clamp(10px,.9vw,13px)/1.25 Georgia,serif;
  text-align:center;letter-spacing:.008em;padding:0;
}
.photo-gallery.layout-two-portrait .photo-caption{font-size:clamp(10px,.78vw,12px)}
.photo-zoom-icon{display:none!important}
.photo-card:focus-visible .photo-mount,
.photo-card:hover .photo-mount{box-shadow:0 0 0 4px #f5ecd9,0 0 0 5px #a88749,0 8px 16px rgba(54,37,15,.20)}
@media(max-width:680px){
  .photo-card{gap:6px;padding:0 2px}
  .photo-card .photo-mount{
    width:min(calc(100cqw - 13px),var(--photo-fit-width));
    max-width:calc(100cqw - 13px);max-height:calc(100cqh - 35px);
  }
  .photo-card .photo-caption,.photo-gallery.layout-two-portrait .photo-caption{font-size:10px}
}
@media(max-width:350px){
  .photo-card .photo-caption,.photo-gallery.layout-two-portrait .photo-caption{font-size:9.5px}
  .photo-card .photo-mount{
    width:min(calc(100cqw - 11px),var(--photo-fit-width));
    max-width:calc(100cqw - 11px);max-height:calc(100cqh - 35px);
  }
}
@media print{
  /* The interactive mounts are hidden in print; existing photo print rules remain unchanged. */
  .photo-card .photo-mount{outline:none;box-shadow:none}
}