:root{--night:#14161B;--panel:#1A1D23;--silver:#D6D0CD;--dove:#9E9898;--copper:#BC8C74;--copper-hi:#CFA28B;--rule:#272A31;
--display:"Cormorant Garamond",Garamond,"Times New Roman",serif;--text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);overflow-x:clip;scroll-behavior:smooth}
html.locked{overflow:hidden}
body{margin:0;background:var(--night);color:var(--silver);font:1rem/1.7 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--copper);text-decoration-thickness:1px;text-underline-offset:.2em}a:hover{color:var(--copper-hi)}
a:focus-visible,button:focus-visible{outline:1px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--panel);padding:.5rem 1rem}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
/* header */
header.site{position:absolute;top:0;left:0;right:0;z-index:3}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.mark{display:flex;align-items:center;gap:.55rem;font:500 1.25rem var(--display);letter-spacing:.02em;color:var(--silver);text-decoration:none}
.mark img{width:34px;height:34px}
nav a{color:var(--dove);text-decoration:none;margin-left:1.5rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}nav a:hover{color:var(--silver)}
/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(6rem,11vw,8.5rem) 0 clamp(3.5rem,7vw,5rem);text-align:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.7)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,22,27,.55),rgba(20,22,27,.2) 40%,var(--night))}
.hero-in{position:relative;z-index:1}
.hero h1{margin:0 auto 1.6rem;width:clamp(11rem,22vw,15rem)}
.hero h1 img{width:100%;height:auto}
.hook{font:italic 500 clamp(1.6rem,3.4vw,2.25rem)/1.2 var(--display);color:var(--silver);margin:0 auto .7rem}
.byline{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dove);margin:0}
/* sections */
section{padding:4.5rem 0;border-top:1px solid var(--rule)}
h2{font:500 clamp(1.9rem,4vw,2.5rem)/1.15 var(--display);margin:0 0 .9rem;color:var(--silver)}

.button{display:inline-block;text-decoration:none;cursor:pointer;background:var(--copper);color:#16181d;border:1px solid var(--copper);padding:.62rem 1.2rem;border-radius:1px;font:500 .88rem var(--text);letter-spacing:.02em}
.button:hover{background:var(--copper-hi);border-color:var(--copper-hi);color:#16181d}
.button.ghost{background:transparent;color:var(--silver);border-color:#4a4440}
.button.ghost:hover{border-color:var(--copper);color:var(--copper-hi)}
.button.sm{padding:.42rem .85rem;font-size:.8rem}
.featured{display:grid;grid-template-columns:minmax(12rem,17rem) 1fr;gap:clamp(2rem,5vw,3.75rem);align-items:center;border-top:0;padding-top:1rem}
.cover-lg{width:100%;height:auto;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin:0 0 .4rem}
.featured h2{font-size:clamp(2.2rem,4.5vw,3rem);margin-bottom:.5rem}
.lead{font:italic 1.35rem/1.35 var(--display);color:var(--silver);margin:0 0 1rem}
.featured p{max-width:34rem;margin:0 0 1rem}
.meta{color:var(--dove);font-size:.85rem}
.featured .stores{margin:.9rem 0 0}
.links{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.divider{width:min(240px,60%);height:auto;margin:0 auto 2.75rem;opacity:.75}
.note{color:var(--dove);margin:0 0 2.75rem;max-width:38rem}
.books{display:grid;gap:3rem 2.25rem;grid-template-columns:repeat(3,1fr)}
.book{display:flex;flex-direction:column}
.book .info{display:flex;flex-direction:column;flex:1}
.book .cover{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;box-shadow:0 12px 28px rgba(0,0,0,.45);margin-bottom:1.1rem}
.pos{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin:0 0 .15rem}
.book h3{font:500 1.5rem/1.15 var(--display);margin:0 0 .5rem}
.blurb{font-size:.92rem;color:#c3bdba;margin:0 0 1.1rem}
.book .links{margin-top:auto}
.prose{max-width:38rem}.prose p{margin:0 0 1rem}
footer{border-top:1px solid var(--rule);padding:2.25rem 0 3rem;color:var(--dove);font-size:.82rem}
footer p{margin:0 0 .5rem}
.age{display:inline-block;font-weight:600;color:var(--silver);margin-right:.5rem;letter-spacing:.05em}
/* age gate */
#agegate{position:fixed;inset:0;z-index:1000;background:rgba(14,15,19,.96);display:flex;align-items:center;justify-content:center;padding:1.5rem}
#agegate[hidden]{display:none}
#agegate .box{max-width:26rem;text-align:center;background:var(--panel);border:1px solid var(--rule);padding:2.25rem 1.75rem}
#agegate img{width:120px;height:auto;margin:0 auto}
#agegate h2{font-size:1.9rem;margin:1rem 0 .5rem}
#agegate p{color:var(--dove);margin:0 0 1.5rem;font-size:.95rem}
#agegate .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
@media (max-width:52rem){.books{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){
  nav a{margin-left:1rem;font-size:.74rem}
  .featured{grid-template-columns:1fr}.cover-lg{max-width:14rem;margin:0 auto}
  .books{grid-template-columns:1fr;gap:2.25rem}
  .book{display:grid;grid-template-columns:8rem 1fr;column-gap:1.1rem;align-items:start}
  .book .cover{margin:0}
  .book h3{font-size:1.3rem}
}
@media (max-width:30rem){.mark span{position:absolute;left:-999px}.mark img{width:30px;height:30px}nav a{margin-left:1.1rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.pos .price{color:var(--dove);letter-spacing:.08em}