*{box-sizing:border-box}
:root{--ink:#272522;--muted:#746f68;--paper:#f7f4ee;--line:#d9d1c5}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);align-items:center;gap:7vw;padding:7vh 7vw}
.intro{max-width:580px}
.eyebrow{font:600 11px/1.4 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(54px,7vw,108px);font-weight:400;line-height:.83;letter-spacing:-.055em;margin:.35em 0 .08em}
.art{font:500 13px Arial,sans-serif;letter-spacing:.55em;margin:1.5rem 0}
.rule{width:54px;border-top:1px solid var(--ink);margin:2.5rem 0}
.lede{font-size:clamp(24px,2.2vw,34px);margin:0 0 1rem}
.copy{max-width:510px;color:var(--muted);font-size:17px;line-height:1.75}
nav{margin-top:2rem;font:600 12px Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
nav span{margin:0 12px;color:var(--muted)}
.feature{position:relative;display:flex;justify-content:center}
.feature img{position:relative;z-index:1;width:min(100%,680px);max-height:80vh;object-fit:contain;box-shadow:0 16px 40px rgba(47,40,32,.10)}
.books{padding:10vh 7vw 12vh;border-top:1px solid var(--line)}
.section-heading{max-width:690px;margin:0 auto 4.5rem;text-align:center}
h2{font-weight:400;font-size:clamp(38px,5vw,68px);margin:.25em 0}
.section-heading>p:last-child{color:var(--muted);font-size:17px;line-height:1.7}
.covers{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:7vw}
figure{margin:0;text-align:center}
figure img{width:100%;display:block;box-shadow:0 14px 34px rgba(47,40,32,.10)}
figcaption{padding-top:1.3rem;font-size:17px;line-height:1.55}
figcaption span{color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--line);padding:2rem 7vw;display:flex;justify-content:space-between;color:var(--muted);font:11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:800px){
 .hero{grid-template-columns:1fr;gap:4rem;padding-top:10vh}
 .feature{grid-row:2}
 .feature img{max-height:none}
 .covers{grid-template-columns:1fr;gap:4rem}
 footer{gap:1rem;flex-direction:column}
}