@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --bg:#141212; --ink:#f4efe8; --soft:#e3dbd1; --muted:#bfb4a8; --line:rgba(244,239,232,.14);
  --red:#c7313b; --blood:#7a1c22; --blood-hi:#94232b; --gold:#e8c9a6; --paper:#f4efe8; --paper-ink:#2a2421;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--soft);font-family:'EB Garamond',Georgia,serif;font-size:19px;line-height:1.6}
a{color:var(--gold)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}

.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.wordmark{font-family:'Playfair Display',Georgia,serif;font-size:20px;letter-spacing:.32em;color:var(--ink);text-decoration:none}
.top a.navlink{color:var(--muted);text-decoration:none;font-size:16px;letter-spacing:.08em}
.top a.navlink:hover{color:var(--ink)}

.eyebrow{margin:0 0 16px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--red)}
h1,h2{font-family:'Playfair Display',Georgia,serif;color:var(--ink)}

.hero{display:flex;gap:56px;align-items:center;padding:48px 0 30px}
.hero-cover{flex:0 0 300px}
.hero-cover img{box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
.hero-copy{flex:1;min-width:0}
.hero h1{margin:0 0 22px;font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-.01em}
.hero h1 em{font-weight:500;color:var(--gold)}
.lead{margin:0 0 22px;font-size:21px;line-height:1.5}
.tropes{margin:0 0 26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.06em;color:var(--muted)}
.tropes b{color:var(--red);font-weight:400;padding:0 8px}

.join{margin:10px 0 0;padding:28px 30px;border:1px solid var(--line);background:rgba(122,28,34,.10)}
.join h2{margin:0 0 6px;font-size:26px;font-weight:500}
.join p{margin:0 0 16px;font-size:17px;color:var(--muted)}
.join .fine{margin:12px 0 0;font-size:14px}
.join form{display:flex;gap:10px;flex-wrap:wrap}
.join input[type=email]{flex:1 1 240px;padding:14px 16px;font:inherit;font-size:17px;color:var(--ink);background:#1d1a19;border:1px solid rgba(244,239,232,.25)}
.btn{display:inline-block;padding:15px 30px;border:0;background:var(--blood);color:#fff;font:inherit;font-size:15px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--blood-hi)}
.pending{font-size:17px;color:var(--gold)}

.section{padding:70px 0 0}
.section h2{margin:0 0 30px;font-weight:500;font-size:34px;line-height:1.2;text-align:center}
.center{text-align:center}

.page{position:relative;background:var(--paper);color:var(--paper-ink);padding:44px 48px 40px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.page p{margin:0 0 16px}
.page .ch{margin:0 0 4px;font-family:'Playfair Display',Georgia,serif;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--blood);text-align:center}
.page .pov{margin:0 0 26px;font-style:italic;text-align:center;color:#6b625c}
.page .first{font-size:22px;font-style:italic;color:var(--blood)}

.cards{display:flex;gap:18px;flex-wrap:wrap;margin:56px 0 0}
.card{flex:1 1 200px;border:1px solid var(--line);padding:22px 20px;text-align:center}
.card b{display:block;margin:0 0 6px;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:22px;color:var(--ink)}
.card span{font-size:16px;line-height:1.45;color:var(--muted)}

.note{margin:44px 0 0;padding:20px 24px;border-left:3px solid var(--blood);background:rgba(122,28,34,.12);font-size:16px;line-height:1.6;color:#cfc5ba}
.note strong{color:var(--ink);font-weight:500}

.books{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:26px 0 8px}
.books a,.books div{display:block;width:130px;color:var(--muted);text-decoration:none;font-size:15px;text-align:center}
.books img{margin:0 0 10px;box-shadow:0 10px 28px rgba(0,0,0,.55)}

footer{margin:90px 0 0;padding:30px 0 40px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);text-align:center}
footer a{color:var(--muted)}

.prose h1{font-size:40px;margin:20px 0 24px}
.prose h2{font-size:24px;text-align:left;margin:36px 0 10px}
.prose p,.prose li{color:var(--soft)}

@media (max-width:760px){
  body{font-size:18px}
  .hero{flex-direction:column;align-items:stretch;gap:30px;text-align:center;padding-top:20px}
  .hero-cover{flex:none;width:62%;max-width:250px;margin:0 auto}
  .hero h1{font-size:34px}
  .lead{font-size:19px}
  .join{padding:22px 18px;text-align:left}
  .page{padding:30px 22px}
  .section h2{font-size:27px}
}