:root{
  --paper:#f5efe4;
  --paper-2:#ede3d4;
  --ink:#201b18;
  --muted:#6f6258;
  --red:#a9352d;
  --line:#d3c3ae;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Libre Baskerville", Georgia, serif;
  line-height:1.65;
}
a{color:inherit}
.site-header{
  max-width:1180px;
  margin:0 auto;
  padding:20px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.brand{
  text-decoration:none;
}
.brand-logo{
  display:block;
  width:min(410px,46vw);
  line-height:0;
}
.brand-logo img{
  display:block;
  width:100%;
  height:auto;
  max-height:86px;
  object-fit:contain;
  object-position:left center;
}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{
  text-decoration:none;
  font-size:.92rem;
  border-bottom:1px solid transparent;
}
nav a:hover{border-color:var(--red)}
main{max-width:1180px;margin:0 auto;padding:0 32px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:72px;
  align-items:center;
  padding:58px 0 54px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.73rem;
  color:var(--red);
  font-weight:700;
}
h1,h2,h3{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:500;
  line-height:1.08;
  margin:.2em 0 .45em;
}
h1{font-size:clamp(3.6rem,7vw,6.4rem)}
h2{font-size:clamp(2.2rem,4.5vw,4.2rem)}
h3{font-size:1.5rem}
.hero-bio{
  max-width:680px;
  font-size:1.02rem;
}
.hero-bio p{margin:.55rem 0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.button{
  display:inline-block;
  padding:12px 18px;
  border:1px solid var(--ink);
  text-decoration:none;
  font-size:.88rem;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
}
.button.primary{background:var(--red);border-color:var(--red);color:#fffaf4}
.button.ghost:hover{background:var(--ink);color:var(--paper)}
.button.disabled{opacity:.45;cursor:not-allowed}
.author-portrait,
.book-art{
  margin:0;
  border:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(57,42,31,.08);
}
.author-portrait{
  width:min(100%,340px);
  aspect-ratio:4/5;
  justify-self:end;
  transform:rotate(-1deg);
  padding:10px;
  background:#fbf7ef;
}
.author-portrait img,
.book-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.author-portrait img{
  object-position:center top;
  border:1px solid rgba(32,27,24,.08);
}
.quote-band{
  margin:0 0 12px;
  padding:24px 34px 22px;
  border:1px solid var(--line);
  border-left:0;
  border-right:0;
  text-align:center;
  background:rgba(255,255,255,.16);
}
.quote-band blockquote{
  margin:0 auto 6px;
  max-width:920px;
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic;
  font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1.45;
}
.quote-band p{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.68rem;
}
.section{
  padding:86px 0;
  border-top:1px solid var(--line);
}
.section.alt{
  margin-left:-32px;
  margin-right:-32px;
  padding-left:32px;
  padding-right:32px;
  background:rgba(255,255,255,.18);
}
.section-heading{margin-bottom:46px}
.section-title-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:42px;
}
.section-title-row h2{
  margin:0;
  color:var(--red);
  font-size:clamp(2.3rem,4vw,3.8rem);
}
.section-rule{
  height:1px;
  flex:1;
  background:var(--line);
}
.book-listing{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(320px,1.1fr);
  grid-template-areas:
    "cover details"
    "cover spread";
  gap:28px 52px;
  align-items:start;
}
.book-art{position:relative}
.book-cover-photo{
  grid-area:cover;
  align-self:stretch;
}
.book-cover-photo img{
  aspect-ratio:4/5;
  object-position:center;
}
.book-details{
  grid-area:details;
  border-top:0;
  padding-top:0;
  max-width:520px;
}
.book-title{
  margin:0 0 .15em;
  color:var(--red);
  font-size:clamp(2rem,3.6vw,3.25rem);
}
.book-spread-photo{
  grid-area:spread;
  max-width:none;
  justify-self:stretch;
}
.book-spread-photo img{
  aspect-ratio:16/10;
  object-position:center;
}
.book-art figcaption{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.8rem;
  text-align:center;
}
.kicker{font-style:italic;font-size:1.08rem}
.purchase-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin:28px 0 10px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.purchase-label{color:var(--muted);font-size:.88rem}
.book-price{
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.8rem;
  font-weight:500;
}
.status{color:var(--red);font-weight:700}
.buy-button{
  width:100%;
  text-align:center;
  margin-top:6px;
}
.buy-button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.purchase-note{
  margin-top:14px;
  color:var(--muted);
  font-size:.78rem;
}
.posts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.post-card{
  border-top:2px solid var(--ink);
  padding:24px 0 6px;
}
.post-card a{color:var(--red);text-decoration:none}
.post-card h3{margin-bottom:.55rem}
.post-card p:not(.post-label){color:var(--muted);font-size:.94rem}
.post-label,.small-note{color:var(--muted);font-size:.82rem}
.newsletter{
  text-align:center;
  max-width:760px;
  margin:0 auto;
  padding:100px 0 120px;
  border-top:1px solid var(--line);
}
footer{
  border-top:1px solid var(--line);
  max-width:1180px;
  margin:0 auto;
  padding:28px 32px 42px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:.85rem;
}
@media(max-width:760px){
  .site-header{align-items:flex-start;gap:14px;flex-direction:column}
  .brand-logo{width:min(330px,88vw)}
  .brand-logo img{height:auto;max-height:72px}
  nav{gap:16px}
  main{padding:0 20px}
  .hero{grid-template-columns:1fr;gap:34px;padding:48px 0 70px}
  h1{font-size:clamp(3.1rem,18vw,5.2rem)}
  .author-portrait{
    width:min(82%,320px);
    justify-self:start;
  }
  .section{padding:72px 0}
  .section.alt{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .book-listing{
    grid-template-columns:1fr;
    grid-template-areas:
      "cover"
      "details"
      "spread";
    gap:36px;
  }
  .book-details{max-width:none}
  .book-spread-photo{max-width:none}
  .posts{grid-template-columns:1fr}
  footer{padding-left:20px;padding-right:20px}
}