:root{--ink:#070504;--panel:#100c0a;--ivory:#f4ecde;--dim:#a99f93;--copper:#d68c60;--line:#3a2a20}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--ivory);font:400 1.18rem/1.7 "Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60rem 40rem at 80% 10%,#2a120633,transparent 70%),radial-gradient(50rem 40rem at 10% 90%,#1e0c0433,transparent 70%)}
a{color:inherit}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.08}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.eyebrow{font:600 .78rem/1 "Cormorant Garamond",serif;letter-spacing:.42em;text-transform:uppercase;color:var(--copper)}
.rule{width:9rem;height:1px;background:var(--copper);opacity:.7;margin:1.6rem 0}
.muted{color:var(--dim)}
em{font-style:italic}

/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:1.6rem 0}
nav .mark{font:italic 500 1.3rem "Cormorant Garamond",serif;text-decoration:none}
nav ul{display:flex;gap:1.6rem;list-style:none;padding:0}
nav ul a{text-decoration:none;color:var(--dim);font-size:1rem;letter-spacing:.08em}
nav ul a:hover{color:var(--ivory)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;padding:4rem 0 6rem}
.hero h1{font-size:clamp(3.2rem,8vw,6rem);margin:1.2rem 0 .4rem}
.hero .by{font:italic 500 1.7rem "Cormorant Garamond",serif}
.hero p.lede{font-size:1.35rem;max-width:30rem;margin-top:1.2rem}
.cover{width:100%;height:auto;max-width:24rem;justify-self:end;box-shadow:0 2.5rem 5rem #000,0 0 6rem #7a2e0a40;border-radius:2px}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.btn{display:inline-block;padding:.85rem 1.6rem;border:1px solid var(--copper);color:var(--ivory);text-decoration:none;font:600 .95rem/1 "Cormorant Garamond",serif;letter-spacing:.18em;text-transform:uppercase;transition:.25s}
.btn:hover,.btn.solid{background:var(--copper);color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--ivory)}

/* listen */
.listen{display:flex;align-items:center;gap:1rem;margin-top:2rem;color:var(--dim)}
.play{width:3.2rem;height:3.2rem;border-radius:50%;border:1px solid var(--copper);background:none;color:var(--copper);cursor:pointer;font-size:1rem}
.play:hover{background:var(--copper);color:var(--ink)}

/* sections */
section{padding:5rem 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(2rem,4vw,2.8rem);margin:.8rem 0 1.4rem}
.quote{font:italic 500 clamp(1.6rem,3.4vw,2.4rem)/1.4 "Cormorant Garamond",serif;max-width:46rem;margin:0 auto;text-align:center}
.quote cite{display:block;margin-top:1.4rem;font-style:normal;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}

/* editions */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.ed{background:var(--panel);border:1px solid var(--line);padding:2.4rem;display:flex;flex-direction:column}
.ed.feature{border-color:var(--copper)}
.ed h3{font-size:1.7rem}
.ed .price{font:700 2.6rem "Playfair Display",serif;color:var(--copper);margin:.6rem 0 .2rem}
.ed ul{padding-left:1.1rem;margin:1.2rem 0 2rem;flex:1}
.ed li{margin:.35rem 0}
.ed .btn{text-align:center}

/* poems */
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.parts h3{font-size:1.15rem;color:var(--copper);margin-bottom:.8rem}
.parts ol{padding-left:1.4rem;color:var(--dim)}
.parts li{margin:.2rem 0}

/* video */
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* shelf (home) */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:2.4rem}
.book{text-decoration:none;display:block}
.book img{width:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:0 1.6rem 3rem #000;transition:transform .35s}
.book:hover img{transform:translateY(-.4rem)}
.book h3{font-size:1.35rem;margin-top:1.2rem}
.book span{color:var(--dim);font-size:1rem}
.book.soon{pointer-events:none}
.book.soon div{aspect-ratio:2/3;border:1px dashed var(--line);display:grid;place-items:center;color:var(--dim);font-style:italic}

footer{border-top:1px solid var(--line);padding:3rem 0;text-align:center;color:var(--dim);font-size:1rem}
footer a{margin:0 .8rem;text-decoration:none}
footer a:hover{color:var(--ivory)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:3rem;padding-top:2rem;text-align:center}
  .hero .rule{margin:1.6rem auto}.hero p.lede{margin:1.2rem auto 0}
  .btns,.listen{justify-content:center}
  .cover{justify-self:center;max-width:17rem;order:-1}
  .editions{grid-template-columns:1fr}
  .parts{grid-template-columns:1fr 1fr}
  nav ul{gap:1rem}
}
@media (max-width:480px){.parts{grid-template-columns:1fr}nav ul li:nth-child(n+3){display:none}}