/* Waypoint Ink — book detail pages */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Source Serif 4', Georgia, serif; -webkit-font-smoothing:antialiased; line-height:1.6;}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{margin:0; text-wrap:balance;}
p{margin:0;}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:24px;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;}

/* themes */
body.fic{--bg:#12141A; --raised:#1B1E27; --ink:#E8E6DE; --ink-soft:#A8A9A6; --line:#33363F; --page:#F4F0E6; --page-ink:#23211D; --btn-ink:#fff;}
body.kid{--bg:#E8EFF5; --raised:#FFFFFF; --ink:#1F2B36; --ink-soft:#526271; --line:#C9D6E2; --page:#FFFFFF; --page-ink:#2E2A22; --btn-ink:#fff; font-family:'Nunito', system-ui, sans-serif;}
body.static{--accent:#C4615B; --accent-soft:#B5544F;}
body.ley{--accent:#6FA3C4; --accent-soft:#4A7C9E;}
body.ash{--accent:#D4A64A; --accent-soft:#C79A3D;}
body.echo{--accent:#D97C5F; --accent-soft:#5C8A5C;}
body.peyton{--accent:#3F7EA6; --accent-soft:#C79A3D;}

/* header */
.site-header{position:relative; z-index:5; padding:18px 24px; border-bottom:1px solid var(--line);}
.sh-inner{max-width:1080px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.sh-brand{font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.15rem; text-decoration:none; color:var(--ink);}
.site-header nav{display:flex; gap:22px; flex-wrap:wrap; align-items:center;}
.site-header nav a{font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent;}
.site-header nav a:hover{color:var(--ink); border-color:var(--accent);}
.site-header nav a.sh-cta{color:#fff; background:#D97C5F; padding:8px 14px; border-radius:999px; border:0;}
@media (max-width:560px){ .sh-inner{justify-content:center;} .site-header nav{justify-content:center; gap:16px;} }

.crumb{padding-top:28px;}
.crumb a{text-decoration:none; color:var(--ink-soft);}
.crumb a:hover{color:var(--accent);}

/* hero */
.hero{padding-block:36px 72px; position:relative; overflow:hidden;}
body.fic .hero::before{content:""; position:absolute; inset:-20% -10% auto auto; width:70%; height:120%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent-soft) 30%, transparent), transparent); pointer-events:none;}
.hero-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; position:relative;}
@media (max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.cover{position:relative; border-radius:6px 14px 14px 6px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.04) inset; aspect-ratio:2/3; max-width:380px; width:100%; margin-inline:auto; background:var(--raised);}
.art-drop{margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:.92rem; line-height:1.5; color:var(--ink); background:color-mix(in srgb, var(--accent, #6FA3C4) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent, #6FA3C4) 45%, transparent); text-align:center;}
.art-drop a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.art-drop strong{color:var(--accent, #6FA3C4);}
.cover-note{max-width:380px; margin:14px auto 0; font-size:.85rem; line-height:1.5; font-style:italic; color:var(--ink-soft); text-align:center;}
.cover-note a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.cover.wide{aspect-ratio:3/2; max-width:none; border-radius:12px;}
.cover.wide::after{display:none;}
.cover-col:has(.cover.wide) .cover-note{max-width:none;}
.cover.square{aspect-ratio:1/1; border-radius:10px;}
.cover img, .cover svg{width:100%; height:100%; object-fit:cover;}
.cover::after{content:""; position:absolute; inset:0 auto 0 0; width:10px; background:linear-gradient(to right, rgba(0,0,0,.28), transparent);}
.cover.square::after{display:none;}
.hero .kicker{color:var(--accent); margin-bottom:14px; display:block;}
.hero h1{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:clamp(2.4rem, 5.6vw, 4rem); line-height:1.04; letter-spacing:-.01em;}
body.fic .hero h1{font-style:italic;}
body.kid .hero h1{font-family:'Baloo 2', 'Fraunces', Georgia, serif; font-weight:700;}
.hero .by{margin-top:12px; color:var(--ink-soft); font-size:1.05rem;}
.hero .by strong{color:var(--ink); font-weight:600;}
.hero .pitch{margin-top:24px; font-size:1.12rem; line-height:1.7; color:var(--ink); max-width:56ch;}
.hero .pitch + .pitch{margin-top:14px; color:var(--ink-soft); font-size:1.02rem;}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .2s ease, filter .2s ease, background .2s ease;}
.btn svg{width:14px; height:14px;}
.btn.primary{background:var(--accent); color:var(--btn-ink);}
.btn.primary:hover{transform:translateY(-2px); filter:brightness(1.07);}
.btn.ghost{border-color:var(--line); color:var(--ink);}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent);}

/* facts */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
@media (max-width:720px){ .facts{grid-template-columns:repeat(2, minmax(0,1fr));} }
.fact{padding:22px 20px; border-left:1px solid var(--line);}
.fact:first-child{border-left:0;}
@media (max-width:720px){ .fact:nth-child(3){border-left:0;} .fact:nth-child(n+3){border-top:1px solid var(--line);} }
.fact .mono{color:var(--ink-soft); display:block; margin-bottom:6px; font-size:10.5px;}
.fact .v{font-size:1rem; color:var(--ink);}

/* sections */
.section{padding-block:80px;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .mono{color:var(--accent); display:block; margin-bottom:10px;}
.section-head h2{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:clamp(1.8rem, 3.6vw, 2.5rem); line-height:1.15;}
body.kid .section-head h2{font-family:'Baloo 2', 'Fraunces', Georgia, serif; font-weight:700;}
.section-head p{margin-top:12px; color:var(--ink-soft);}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;}
@media (max-width:760px){ .gallery{grid-template-columns:1fr;} }
.gallery figure{margin:0; background:var(--raised); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.gallery figure .art{aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb, var(--accent-soft) 10%, var(--raised));}
.gallery figure .art img{width:100%; height:100%; object-fit:contain;}
.gallery figure .art svg{width:100%; height:100%;}
.gallery figcaption{padding:14px 16px 16px; font-size:.9rem; color:var(--ink-soft); line-height:1.5;}
.gallery figcaption strong{display:block; color:var(--ink); font-size:.98rem; margin-bottom:2px;}

/* letters (Echo's ABC look inside) */
.letters{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
@media (max-width:760px){ .letters{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:440px){ .letters{grid-template-columns:1fr;} }
.letter{background:var(--raised); border:1px solid var(--line); border-radius:16px; padding:22px 22px 24px; position:relative; overflow:hidden;}
.letter .big{font-family:'Baloo 2', sans-serif; font-weight:700; font-size:3.4rem; line-height:1; color:var(--c, var(--accent));}
.letter .is{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;}
.letter p{margin-top:10px; font-size:1.08rem; font-weight:600; line-height:1.45;}

/* teaser */
.teaser{background:color-mix(in srgb, var(--accent-soft) 6%, var(--bg));}
.page{background:var(--page); color:var(--page-ink); max-width:720px; margin-inline:auto; padding:64px clamp(24px, 7vw, 76px) 56px; border-radius:4px; box-shadow:0 40px 80px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04); position:relative;}
body.kid .page{border-radius:18px; box-shadow:0 30px 60px -36px rgba(80,60,20,.35), 0 0 0 1px var(--line);}
.page .ch{text-align:center; margin-bottom:34px;}
.page .ch .mono{color:#8A8378; display:block;}
.page .ch h3{font-family:'Fraunces', Georgia, serif; font-weight:500; font-style:italic; font-size:1.7rem; margin-top:8px;}
body.kid .page .ch h3{font-family:'Baloo 2', Georgia, serif; font-style:normal; font-weight:700;}
.page .prose p{font-family:'Source Serif 4', Georgia, serif; font-size:1.1rem; line-height:1.85; text-indent:1.6em; hyphens:auto;}
.page .prose p.first{text-indent:0;}
.page .prose p.first::first-letter{font-family:'Fraunces', Georgia, serif; float:left; font-size:3.6em; line-height:.86; padding:6px 10px 0 0; color:var(--accent-soft);}
.page .prose p.dialogue-start{margin-top:0;}
.page .prose .orn{text-align:center; letter-spacing:.6em; color:#A59E90; margin-block:22px; text-indent:0;}
.page .clip{position:relative; max-height:none;}
.page.collapsed .clip{max-height:560px; overflow:hidden;}
.page.collapsed .clip::after{content:""; position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(to bottom, transparent, var(--page));}
.page .more{display:flex; justify-content:center; margin-top:24px;}
.page .more button{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--page-ink); border:1px solid #CFC7B6; padding:11px 20px; border-radius:999px; cursor:pointer;}
.page .more button:hover{border-color:var(--accent-soft); color:var(--accent-soft);}
.page:not(.collapsed) .more{display:none;}
.page .fin{margin-top:30px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8A8378;}

/* cta band */
.cta-band{border:1px solid var(--line); background:var(--raised); border-radius:20px; padding:40px clamp(22px, 5vw, 48px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center;}
@media (max-width:760px){ .cta-band{grid-template-columns:1fr;} }
.cta-band h2{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.8rem; line-height:1.2;}
body.kid .cta-band h2{font-family:'Baloo 2', Georgia, serif; font-weight:700;}
.cta-band p{color:var(--ink-soft); margin-top:10px;}
.nl-row{display:flex; gap:8px;}
@media (max-width:420px){ .nl-row{flex-direction:column;} }
.nl-row input[type=email]{flex:1; min-width:0; padding:13px 16px; font:inherit; font-size:1rem; color:#1B1D22; background:#fff; border:1px solid var(--line); border-radius:999px;}
.nl-row input[type=email]:focus{outline:2px solid var(--accent); outline-offset:1px;}
.nl-row button{padding:13px 22px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); border:0; border-radius:999px; cursor:pointer;}
.nl-row button:disabled{opacity:.6;}
.nl-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.nl-status{min-height:1.4em; margin-top:10px; font-size:.9rem; color:var(--ink-soft);}
.nl-status.ok{color:#4F9A64;} .nl-status.err{color:#D0604F;}
.nl-privacy{font-size:.8rem; color:var(--ink-soft); opacity:.85; margin-top:4px;}

/* more books */
.more-books{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px;}
.mb{display:block; text-decoration:none; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--raised); transition:transform .2s ease, border-color .2s ease;}
.mb:hover{transform:translateY(-3px); border-color:var(--accent);}
.mb .mono{color:var(--ink-soft); font-size:10.5px;}
.mb h3{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.25rem; margin-top:6px;}
body.kid .mb h3{font-family:'Baloo 2', Georgia, serif; font-weight:700;}
.mb p{color:var(--ink-soft); font-size:.92rem; margin-top:6px;}

footer{border-top:1px solid var(--line); padding:40px 24px; text-align:center; color:var(--ink-soft); font-size:.85rem;}
footer .links{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;}
footer .links a{text-decoration:none;}
footer .links a:hover{color:var(--accent);}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }
.page .prose .orn ~ p.first::first-letter{float:none; font-size:inherit; line-height:inherit; padding:0; color:inherit; font-family:inherit;}