@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500&family=Inter:wght@400;500&display=swap');
:root{--p:#f4efe6;--ink:#1b1a17;--a:#2f5d50;--m:#8a8378}
*{box-sizing:border-box;margin:0}body{background:var(--p);color:var(--ink);font:15px/1.6 Inter,sans-serif}a{color:inherit;text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 20px}.logo{font-family:Fraunces;font-size:22px;font-style:italic}
.menu{width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center}
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.hero h1{font-family:Fraunces;font-weight:300;font-size:clamp(40px,7vw,96px);line-height:1.02;letter-spacing:-.02em;max-width:900px}
.hero h1 i{color:var(--a)}
.hero p{color:var(--m);margin-top:18px;max-width:360px}
svg.draw path,svg.draw circle,svg.draw line{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:dr 3s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}.rm svg.draw *{animation:none;stroke-dashoffset:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}.pills a{border:1px solid var(--ink);border-radius:99px;padding:6px 14px;font-size:13px;transition:.25s}.pills a:hover{background:var(--ink);color:var(--p)}
.sec{padding:60px 20px}.sec h2{font-family:Fraunces;font-weight:300;font-size:34px;line-height:1.1;margin-bottom:24px}@media(min-width:900px){.sec{padding:100px 8vw}.sec h2{font-size:56px}}
.shelf{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 -20px;padding-inline:20px}
.book{flex:0 0 74%;scroll-snap-align:start;background:#fff;border-radius:18px;padding:18px;transition:transform .4s}.book:hover{transform:translateY(-6px) rotate(-.6deg)}
@media(min-width:900px){.book{flex:0 0 30%}}
.book .art{aspect-ratio:4/3;background:var(--c);border-radius:12px;display:grid;place-items:center;margin-bottom:14px}.book h3{font-family:Fraunces;font-weight:500;font-size:22px;line-height:1.15}.book small{color:var(--m)}
.big{font-family:Fraunces;font-weight:300;font-size:clamp(30px,5vw,64px);line-height:1.12;text-align:center;max-width:1000px;margin:auto}
.big span{color:var(--a);font-style:italic}
[data-r]{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.8,.2,1)}[data-r].in{opacity:1;transform:none}
footer{padding:40px 20px;text-align:center;color:var(--m);font-size:13px}
/* story */
.sh{text-align:center;padding:30px 20px 10px}.sh small{color:var(--a);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.sh h1{font-family:Fraunces;font-weight:300;font-size:clamp(40px,7vw,92px);line-height:1;margin:12px auto;max-width:900px}
.sh p{color:var(--m);max-width:420px;margin:auto}
.read{font-weight:300;max-width:620px;margin:auto;padding:20px;font-family:Fraunces;font-size:20px;line-height:1.65}.read p{margin-bottom:1.1em}
.read p:first-of-type::first-letter{font-size:4.2em;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--a)}
.ill{display:block;margin:30px auto;max-width:100%}
.note{font-family:Inter;font-size:14px;background:#fff;border-radius:14px;padding:14px 16px;margin:1.4em 0;border-left:3px solid var(--a)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px;margin:20px auto;padding:0 20px;font-size:13px}.facts div{background:#fff;border-radius:12px;padding:12px}.facts b{display:block;font-family:Fraunces;font-size:18px;font-weight:500}
.bub{position:sticky;bottom:18px;width:max-content;margin:20px auto;background:var(--ink);color:var(--p);border-radius:99px;padding:10px 18px;font-size:13px;display:flex;gap:14px;z-index:9;box-shadow:0 10px 30px #0003}