:root { color-scheme:light; --ink:#203a30; --muted:#788277; --paper:#fafbf7; --line:#dfe5d9; --lime:#c6ed92; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #709950; outline-offset:4px; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-80px; left:15px; z-index:200000; padding:12px; background:var(--ink); color:white; }
.skip-link:focus { top:10px; }
.site-header { height:94px; max-width:1280px; margin:auto; padding:0 48px; display:flex; align-items:center; gap:60px; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; text-decoration:none; font-size:24px; font-weight:750; letter-spacing:-1px; white-space:nowrap; }
.brand-symbol { background:var(--ink); color:var(--lime); border-radius:11px; width:36px; height:38px; display:grid; place-items:center; font:italic 23px Georgia,serif; margin-right:10px; }
.brand-dot { color:#83a75b; }
.site-header nav { display:flex; gap:32px; font-size:12px; height:100%; }
.site-header nav a { text-decoration:none; display:flex; align-items:center; border-bottom:2px solid transparent; color:#7a8478; }
.site-header nav a:hover,.site-header nav .nav-active { color:var(--ink); border-color:var(--ink); }
.header-note { margin-left:auto; font-size:11px; color:#8a9384; }
.library-main { max-width:1280px; padding:0 48px; margin:auto; }
.library-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:34px; padding:64px 0 60px; align-items:center; overflow:hidden; }
.eyebrow { text-transform:uppercase; font-size:10px; letter-spacing:2px; font-weight:650; color:#75866b; margin:0 0 17px; display:flex; align-items:center; gap:9px; }
.eyebrow > span { width:6px; height:6px; border-radius:50%; background:#87a766; }
.hero-copy h1 { font:400 clamp(42px,4.9vw,64px)/1.08 Georgia,"Times New Roman",serif; letter-spacing:-2.5px; margin:0; }
.hero-copy h1 em { color:#739353; font-weight:400; }
.hero-description { max-width:375px; font-size:14px; line-height:1.9; color:var(--muted); margin:22px 0 26px; }
.primary-link { display:inline-flex; align-items:center; gap:25px; padding:14px 20px; background:var(--ink); color:#f5f8ef; font-size:12px; font-weight:550; text-decoration:none; border-radius:9px; transition:background .15s,transform .15s; }
.primary-link:hover { background:#385542; transform:translateY(-2px); }
.primary-link span { font-size:19px; }
.hero-caption { display:flex; gap:8px; align-items:center; color:#929a89; font-size:10px; margin-top:18px; }
.hero-caption > span { font-size:20px; color:#9caa89; }
.hero-art { height:365px; position:relative; border-radius:50% 45% 48% 42%; background:radial-gradient(ellipse,#e9efdc 0%,#f1f4e9 55%,transparent 70%); }
.art-orbit { position:absolute; border:1px solid #dce4d1; border-radius:50%; inset:5% 3%; transform:rotate(-24deg); }
.orbit-two { inset:15% -1%; transform:rotate(24deg); border-style:dashed; }
.art-book { position:absolute; width:43%; height:77%; max-width:200px; border-radius:6px 13px 13px 6px; overflow:hidden; box-shadow:inset 5px 0 5px #0002,10px 20px 26px #2a422526; border-left:5px solid #ffffff50; background:#d0ddb1; }
.art-book-back { left:13%; top:4%; transform:rotate(-14deg); background:#c6d7b1; }
.art-book-front { left:44%; top:15%; transform:rotate(11deg); background:#eedbb1; }
.art-book img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.art-book-fallback { position:absolute; inset:0; display:flex; justify-content:center; flex-direction:column; padding:18px; font:26px/1.2 Georgia,serif; }
.art-spark { position:absolute; color:#91a775; font-size:37px; z-index:2; }
.spark-one { right:3%; top:4%; }
.spark-two { left:4%; bottom:18%; font-size:28px; color:#bd9a68; }
.art-note { position:absolute; right:1%; bottom:4%; font:italic 15px Georgia,serif; color:#899772; transform:rotate(-6deg); }
.art-note span { display:inline-block; font-size:25px; transform:rotate(-50deg); }
.art-tag { position:absolute; left:10%; bottom:16%; z-index:3; background:#fffefa; box-shadow:0 5px 20px #253d2320; border:1px solid #e4e8d7; border-radius:25px; padding:12px 17px; font-size:11px; transform:rotate(-5deg); }
.art-tag span { color:#71924f; padding-right:5px; }
.book-library { border-top:1px solid var(--line); padding-top:35px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-heading .eyebrow { font-size:9px; margin-bottom:10px; }
.section-heading h2 { font:400 32px/1.2 Georgia,serif; margin:0; letter-spacing:-.8px; }
.library-tools { display:flex; align-items:center; gap:16px; font-size:11px; color:#89927e; }
.quiet-button { border:1px solid var(--line); background:transparent; color:#67785c; border-radius:8px; padding:9px 12px; font-size:11px; }
.quiet-button:hover { background:#edf2e5; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.book-card { min-width:0; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:#fff; transition:box-shadow .2s,transform .2s; }
.book-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px #2438220d; }
.book-cover { width:100%; height:230px; position:relative; display:block; padding:0; overflow:hidden; border:0; background:linear-gradient(140deg,#dce6ce,#efdebc); text-align:left; }
.book-cover img { width:100%; height:100%; object-fit:contain; padding:18px; transition:transform .5s; }
.book-cover:hover img { transform:scale(1.035); }
.cover-label { position:absolute; top:15px; left:15px; background:#fffefaeb; border-radius:20px; padding:6px 10px; color:#586d47; font-size:9px; letter-spacing:.4px; }
.cover-open { position:absolute; bottom:14px; right:14px; width:31px; height:31px; border-radius:50%; background:#fffefa; color:#405835; display:grid; place-items:center; font-size:20px; }
.book-details { padding:20px; }
.book-byline { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#849077; font-size:9px; }
.book-reactions { white-space:nowrap; }
.book-details h3 { font:400 23px/1.2 Georgia,serif; letter-spacing:-.5px; margin:11px 0; overflow-wrap:anywhere; }
.book-description { font-size:12px; line-height:1.8; color:#86907c; margin:0 0 20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:65px; }
.book-card-bottom { display:flex; gap:10px; align-items:center; justify-content:space-between; border-top:1px solid #eef0e8; padding-top:16px; }
.book-edition { font-size:9px; color:#9aa18f; }
.book-customize { border:0; background:#eaf1e0; color:#486333; border-radius:7px; font-size:11px; padding:10px 12px; white-space:nowrap; }
.book-customize:hover { background:var(--lime); }
.book-customize span { padding-left:10px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:20px; font-size:12px; margin-top:25px; }
.pagination:empty { display:none; }
.pagination button { background:white; border:1px solid var(--line); border-radius:8px; padding:10px 14px; color:var(--ink); }
.library-message { grid-column:1/-1; text-align:center; padding:55px 20px; border:1px dashed #cbd7c1; border-radius:14px; }
.library-message h3 { font:26px Georgia,serif; margin:0 0 12px; }
.library-message p { font-size:13px; color:var(--muted); }
.book-skeleton { height:400px; border-radius:15px; background:linear-gradient(110deg,#edf0e6 30%,#f6f8ef 50%,#edf0e6 70%); background-size:250% 100%; animation:library-loading 1.5s infinite; }
.how-it-works { margin:64px 0; border:1px solid var(--line); border-radius:16px; background:#f0f3e9; padding:30px; display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; gap:30px; }
.how-intro .eyebrow { font-size:8px; letter-spacing:1.6px; margin-bottom:12px; }
.how-intro h2 { font:400 26px/1.2 Georgia,serif; margin:0; letter-spacing:-.5px; }
.how-step > span { color:#8da674; font:italic 19px Georgia,serif; }
.how-step h3 { font-size:12px; font-weight:600; margin:13px 0 8px; }
.how-step p { font-size:11px; color:#85917a; line-height:1.8; margin:0; max-width:165px; }
.site-footer { max-width:1184px; margin:auto; border-top:1px solid var(--line); padding:27px 0; display:flex; align-items:center; gap:30px; color:#919984; }
.site-footer .wordmark { color:var(--ink); font-size:21px; }
.site-footer > span { font-size:11px; }
.site-footer small { margin-left:auto; font-size:10px; }
.book-modal { position:fixed; inset:0; z-index:1000; display:flex; justify-content:center; align-items:center; padding:24px; background:#10291fb3; backdrop-filter:blur(10px); overflow:auto; }
@keyframes library-loading { to { background-position:-250% 0; } }
@media(min-width:1000px) { .book-grid:has(.book-card:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); } .book-grid:has(.book-card:nth-child(2):last-child) .book-cover { height:285px; } }
@media(max-width:1000px) { .site-header { gap:35px; padding:0 28px; } .header-note { display:none; } .library-main { padding:0 28px; } .library-hero { gap:12px; padding:45px 0; } .hero-art { height:300px; } .hero-copy h1 { font-size:48px; } .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .how-it-works { gap:22px; padding:24px; } .site-footer { margin:0 28px; } }
@media(max-width:650px) { .site-header { height:76px; padding:0 20px; gap:24px; justify-content:space-between; } .site-header nav { gap:18px; font-size:10px; } .wordmark { font-size:21px; } .brand-symbol { width:30px; height:32px; font-size:19px; margin-right:7px; } .library-main { padding:0 20px; } .library-hero { grid-template-columns:1fr; padding:34px 0; gap:20px; } .hero-copy h1 { font-size:48px; } .hero-description { font-size:13px; margin:18px 0 20px; } .eyebrow { font-size:8px; letter-spacing:1.5px; } .hero-art { height:290px; max-width:380px; width:100%; margin:auto; } .hero-caption { display:none; } .section-heading { align-items:flex-start; flex-direction:column; gap:16px; } .section-heading h2 { font-size:29px; } .library-tools { width:100%; justify-content:space-between; } .book-grid { grid-template-columns:1fr; gap:20px; } .book-cover { height:240px; } .book-description { min-height:0; } .how-it-works { margin:36px 0; grid-template-columns:1fr 1fr; padding:24px 20px; gap:26px; } .how-intro h2 { font-size:24px; } .site-footer { margin:0 20px; flex-wrap:wrap; gap:15px; } .site-footer > span { order:3; width:100%; font-size:10px; } .book-modal { padding:10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }