:root{--navy:#10295c;--gold:#b98a2e;--gold-l:#e6c97a;--cream:#f7f3ea;--ink:#1d2433}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:var(--navy);text-decoration:none}
h1,h2,h3{color:var(--navy);line-height:1.2}
header{background:#fff;border-bottom:3px solid var(--gold);padding:8px 5%;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px;color:var(--navy)}
.brand img{height:54px;width:auto}
.brand span{font-size:1.35rem;font-weight:bold;letter-spacing:.5px}
.brand small{display:block;font-size:.7rem;letter-spacing:3px;color:var(--gold);font-weight:normal}
nav a{margin-left:22px;font-size:1rem;color:var(--navy)}nav a:hover{color:var(--gold)}
.cartlink{background:var(--navy);color:#fff!important;padding:7px 14px;border-radius:20px}
main{max-width:1100px;margin:24px auto;padding:0 5%}
.wide{max-width:none;margin:0;padding:0}
.hero{background:linear-gradient(135deg,#fff 55%,var(--cream));padding:60px 5%}
.hero-in{max-width:1100px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.eyebrow{color:var(--gold);letter-spacing:4px;text-transform:uppercase;font-size:.85rem}
.hero h1{font-size:clamp(2rem,4.5vw,3.3rem);margin:10px 0 16px}
.hero p{font-size:1.15rem;max-width:520px}
.hero img{width:100%;max-width:460px;justify-self:center}
.btns{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
button,.btn{background:var(--navy);color:#fff;border:2px solid var(--navy);padding:11px 24px;border-radius:30px;cursor:pointer;font-size:1rem;font-family:inherit;display:inline-block;transition:.2s}
button:hover,.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.ghost{background:transparent;color:var(--navy)}.btn.ghost:hover{color:#fff}
.strip{background:var(--navy);color:#fff;padding:26px 5%}
.strip div{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.strip b{color:var(--gold-l);display:block;font-size:1.1rem}
section.pad{padding:60px 5%}.alt{background:var(--cream)}
.inner{max-width:1100px;margin:auto}
.title{text-align:center;margin-bottom:34px}.title h2{font-size:2rem;margin:6px 0}
.title:after{content:"";display:block;width:70px;height:3px;background:var(--gold);margin:12px auto 0}
.search{max-width:420px;margin:0 auto 30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px}
.card{background:#fff;border:1px solid #e8e1d2;border-radius:10px;padding:14px;transition:.25s;text-align:center}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(16,41,92,.15)}
.card h3{font-size:1.05rem;margin:12px 0 4px}.card .by{font-size:.9rem;color:#6b7280}
.card img,.cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;background:#e5ded5}
.cover.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--gold-l);font-weight:bold;background:linear-gradient(160deg,var(--navy),#1d4390);border:3px double var(--gold)}
.price{font-weight:bold;color:var(--gold)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about img{width:100%;max-width:300px;justify-self:center}
footer{background:var(--navy);color:#cfd6e6;padding:40px 5% 20px;margin-top:0}
footer .inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer h4{color:var(--gold-l);margin:0 0 10px}footer a{color:#cfd6e6;display:block}footer a:hover{color:var(--gold-l)}
footer .copy{text-align:center;border-top:1px solid #2c4580;margin-top:26px;padding-top:14px;font-size:.85rem}
input,textarea{width:100%;padding:10px;margin:4px 0 12px;border:1px solid #cfc7b5;border-radius:6px;font:inherit}
table{width:100%;border-collapse:collapse;background:#fff}td,th{padding:8px;border-bottom:1px solid #eee;text-align:left}
.flash{background:#fff3cd;border-left:4px solid var(--gold);padding:10px 14px;border-radius:5px;margin-bottom:12px}
.detail{display:grid;grid-template-columns:260px 1fr;gap:30px}
@media(max-width:760px){.hero-in,.about,.detail,footer .inner,.strip div{grid-template-columns:1fr}
.hero{padding:36px 5%}.brand span{font-size:1.05rem}nav a{margin-left:12px}}

.toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 22px;border-radius:30px;border:2px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;animation:toast 6s forwards}
.toast a{color:var(--gold-l);margin-left:10px;text-decoration:underline}
@keyframes toast{0%{opacity:0;top:60px}8%{opacity:1;top:84px}85%{opacity:1}100%{opacity:0;visibility:hidden}}
.page-hero{background:linear-gradient(135deg,#fff 40%,var(--cream));padding:56px 5%;text-align:center;border-bottom:1px solid #e8e1d2}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:8px 0}
.page-hero p{max-width:640px;margin:10px auto 0;font-size:1.1rem}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.box{background:#fff;border:1px solid #e8e1d2;border-top:4px solid var(--gold);border-radius:10px;padding:24px;text-align:center}
.box h3{margin:8px 0}.box .ico{font-size:2rem}
.quote{font-size:1.6rem;font-style:italic;color:var(--gold);text-align:center;margin:0 auto;max-width:720px}
.prose{max-width:760px;margin:auto}.prose p{font-size:1.1rem}
.founder{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:16px;border-top:2px solid var(--gold)}
.founder img{height:60px}.founder b{display:block;color:var(--navy);font-size:1.15rem}.founder span{color:var(--gold)}
.cta{background:var(--navy);color:#fff;text-align:center;padding:50px 5%}
.cta h2{color:#fff}.cta .btn{background:var(--gold);border-color:var(--gold)}.cta .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.wa{background:#1f9d55;border-color:#1f9d55}
@media(max-width:760px){.cols3,.cols2{grid-template-columns:1fr}}
header{flex-wrap:wrap;gap:8px}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}nav a{margin-left:0!important}
nav a.addbook{border:2px solid var(--gold);padding:4px 12px;border-radius:20px;color:var(--gold)}
nav a.addbook:hover{background:var(--gold);color:#fff}
.authbox{max-width:480px;margin:20px auto}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}
.role{border:2px solid #e0d8c8;border-radius:10px;padding:12px;cursor:pointer;display:block}
.role input{width:auto;margin:0 6px 0 0}.role span{display:block;font-size:.85rem;color:#6b7280}
.role:has(input:checked){border-color:var(--gold);background:var(--cream)}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);display:block}
.avatar.ph{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold-l);font-size:2.6rem}
.authorhead{display:flex;gap:26px;align-items:center;margin-bottom:30px}
.bio{white-space:pre-line}
.badge{padding:2px 10px;border-radius:12px;font-size:.8rem;color:#fff}
.badge.pending{background:#c98a00}.badge.approved{background:#1f9d55}.badge.rejected{background:#b3261e}
.actions form{display:inline}
.card .avatar{margin:0 auto 6px}
@media(max-width:760px){.authorhead{flex-direction:column;text-align:center}.roles{grid-template-columns:1fr}}
.founder img{width:auto;max-width:none;height:60px}
.note{background:var(--cream);border-left:4px solid var(--gold);padding:12px 16px;border-radius:6px;margin:14px 0;max-width:760px}
.bignum{font-size:1.6rem;font-weight:bold;color:var(--navy);margin:6px 0}
.badge.hidden{background:#6b7280}.badge.ready{background:#10295c}
.prose h2{margin-top:30px}
.copy a{color:#cfd6e6;display:inline}
@media(max-width:760px){table{display:block;overflow-x:auto;white-space:nowrap}}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;margin:10px 0 24px;padding:8px;background:var(--cream);border-radius:8px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
.bar .fill{background:var(--gold);border-radius:4px 4px 0 0;min-height:3px}
.bar small{font-size:.65rem;color:#6b7280;margin-top:4px}
.lang{font-size:.85rem;border:1px solid #e0d8c8;border-radius:16px;padding:3px 10px;white-space:nowrap}
.lang a{margin:0 3px!important;font-size:.85rem}.lang a.on{font-weight:bold;color:var(--gold)}.lang span{color:#bbb}
.mapbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:2px solid var(--gold);background:#e5ded5}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:760px){.mapbox{aspect-ratio:4/3}}

/* ===== motion & 3D ===== */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.rise{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 40%,var(--cream) 100%)}
.hero .gold{color:var(--gold)}
.hero-text{position:relative;z-index:2}
.btn,button{transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover,button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,41,92,.25)}

.stage{position:relative;height:clamp(310px,40vw,470px);perspective:1100px;--bw:clamp(128px,15vw,184px)}
.stage>*{pointer-events:none}.stage .scene{pointer-events:auto}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.42;animation:drift 16s ease-in-out infinite alternate}
.blob.b1{width:46%;height:46%;left:4%;top:6%;background:var(--gold-l)}
.blob.b2{width:42%;height:42%;right:2%;bottom:2%;background:#7f9cd8;animation-delay:-8s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,10%) scale(1.18)}}
.sun{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;max-width:520px;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(230,201,122,.75) 0%,rgba(230,201,122,.28) 38%,transparent 66%);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.85}}
.rays{position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;max-width:580px;border-radius:50%;
 background:repeating-conic-gradient(rgba(185,138,46,.30) 0 4deg,transparent 4deg 14deg);
 -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 66%);mask-image:radial-gradient(circle,#000 8%,transparent 66%);
 animation:spin 70s linear infinite}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.spark{position:absolute;width:var(--sz,7px);height:var(--sz,7px);background:var(--gold);opacity:0;
 clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1.15) rotate(45deg)}}

.scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.sway{position:absolute;inset:0;transform-style:preserve-3d;animation:sway 11s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateY(-18deg)}to{transform:rotateY(18deg)}}
.slot{position:absolute;left:50%;top:50%;transform-style:preserve-3d;--k:1;--wpx:calc(var(--bw) * var(--k));--hpx:calc(var(--wpx) * 1.45);--d:calc(var(--wpx) * .2);
 width:var(--wpx);height:var(--hpx)}
.slot.s0{transform:translate3d(-50%,-50%,50px)}
.slot.s1{--k:.8;transform:translate3d(calc(-50% - var(--bw) * 1.02),-44%,-80px) rotateY(26deg)}
.slot.s2{--k:.8;transform:translate3d(calc(-50% + var(--bw) * 1.02),-56%,-80px) rotateY(-26deg)}
.book3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:floaty 5.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(8px) rotateZ(-1.2deg)}50%{transform:translateY(-14px) rotateZ(1.2deg)}}
.face{position:absolute;backface-visibility:hidden;overflow:hidden}
.front{inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:3px 7px 7px 3px;background:var(--navy);box-shadow:inset 7px 0 9px -5px rgba(0,0,0,.45)}
.front>img{width:100%;height:100%;object-fit:cover;display:block}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 47%,transparent 60%);transform:translateX(-130%);animation:shine 6.5s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.ph3{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;text-align:center;
 background:linear-gradient(160deg,var(--navy),#1d4390);border:3px double var(--gold);color:var(--gold-l);font-weight:bold;font-size:.8rem;line-height:1.25}
.ph3 img{width:62%;height:auto}
.back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:var(--navy);border-radius:7px 3px 3px 7px}
.spine{top:0;height:100%;width:var(--d);left:calc(50% - var(--d) / 2);transform:rotateY(-90deg) translateZ(calc(var(--wpx) / 2));
 background:linear-gradient(90deg,#0b1d42,var(--navy));border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);display:flex;align-items:center;justify-content:center}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--gold-l);font-size:.72rem;letter-spacing:1px;max-height:88%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pages{top:3px;height:calc(100% - 6px);width:var(--d);left:calc(50% - var(--d) / 2);transform:rotateY(90deg) translateZ(calc(var(--wpx) / 2));
 background:repeating-linear-gradient(90deg,#fffaf0 0 2px,#e8dfc8 2px 3px)}
.top{left:3px;width:calc(100% - 6px);height:var(--d);top:calc(50% - var(--d) / 2);transform:rotateX(90deg) translateZ(calc(var(--hpx) / 2));background:repeating-linear-gradient(0deg,#fffaf0 0 2px,#e8dfc8 2px 3px)}
.bottom{left:3px;width:calc(100% - 6px);height:var(--d);top:calc(50% - var(--d) / 2);transform:rotateX(-90deg) translateZ(calc(var(--hpx) / 2));background:#d8cfb8}
.floor{position:absolute;left:50%;bottom:5%;width:56%;height:28px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(16,41,92,.38),transparent 70%);animation:shadow 5.5s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1.05);opacity:.9}50%{transform:translateX(-50%) scale(.82);opacity:.55}}
.stage.paused *{animation-play-state:paused!important}

.card .tilt{transition:transform .25s ease-out,box-shadow .25s;transform-style:preserve-3d;border-radius:6px;position:relative;overflow:hidden}
.card .tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
 background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 55%)}
.card .tilt:hover{box-shadow:0 16px 30px rgba(16,41,92,.28)}.card .tilt:hover::after{opacity:1}
.card:hover{transform:none}
@media(max-width:760px){.stage{height:300px;--bw:clamp(104px,29vw,140px)}.blob{display:none}.rays{animation-duration:120s}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise,.js .reveal{opacity:1!important;transform:none!important}.spark{opacity:.6}}

/* ===== compact header on phones & tablets ===== */
html{scroll-padding-top:90px}
.menu-toggle,.mright{display:none}
@media(max-width:1020px){
 header{padding:6px 4%;flex-wrap:wrap}
 .brand img{height:42px}.brand span{font-size:1.1rem}.brand small{font-size:.6rem;letter-spacing:2px}
 .mright{display:flex;align-items:center;gap:10px;margin-left:auto}
 .mcart{background:var(--navy);color:#fff;padding:6px 14px;border-radius:18px;font-size:.9rem}
 .burger{font-size:1.7rem;line-height:1;padding:4px 8px;cursor:pointer;color:var(--navy);user-select:none}
 header nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:10px 2px 14px;border-top:1px solid #eee;margin-top:6px}
 .menu-toggle:checked ~ nav{display:flex}
 header nav .cartlink{display:none}
 header nav a{font-size:1.05rem}
}
.show-all .reveal{opacity:1!important;transform:none!important}