:root{
  --ink:#12100E; --ink-2:#1B1714; --gold:#C08A38; --gold-dim:#A2762F;
  --paper:#FDFAF4; --quiet:#A79C90; --line:rgba(192,138,56,.28);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--paper); font-family:var(--serif);
  line-height:1.62; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 60% at 50% 0%, #2A211A 0%, #12100E 62%);
  background-repeat:no-repeat;
}
.wrap{max-width:64rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem)}
.wrap.narrow{max-width:42rem}
header.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:56rem){header.hero{grid-template-columns:22rem minmax(0,1fr)}}
.cover{width:100%;max-width:22rem;margin:0 auto;display:block;border-radius:3px;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06)}
.cover.small{max-width:12rem}
.eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
h1{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.12;margin:0 0 .6rem;font-weight:600;letter-spacing:.01em}
h1.mid{font-size:clamp(1.7rem,4.5vw,2.4rem)}
.byline{color:var(--quiet);font-size:1.02rem;margin:0 0 1.4rem;font-style:italic}
.hook{font-size:clamp(1.15rem,2.6vw,1.42rem);margin:0 0 1.1rem}
.sub{color:#D8CFC2;margin:0 0 1.8rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.btn{display:inline-block;text-decoration:none;padding:.85rem 1.5rem;border-radius:2px;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.btn-primary{background:var(--gold);color:#17120C;font-weight:700}
.btn-primary:hover{background:#D79C46}
.btn-ghost{border:1px solid var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.ku{font-size:.86rem;color:var(--quiet);margin:.9rem 0 0}
hr.orn{border:0;margin:clamp(2.5rem,7vw,4.5rem) 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
section h2{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem}
.prose{max-width:44rem}
.prose p{margin:0 0 1.05rem}
.pull{font-size:clamp(1.2rem,3vw,1.6rem);font-style:italic;color:#EDE4D6;
  border-left:2px solid var(--gold-dim);padding-left:1.2rem;margin:2rem 0}
.files{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.4rem 0 0}
.file{display:block;text-decoration:none;color:var(--paper);border:1px solid var(--line);
  padding:1rem 1.1rem;border-radius:2px}
.file:hover{border-color:var(--gold);background:rgba(192,138,56,.06)}
.file strong{display:block;letter-spacing:.1em;font-size:.82rem;text-transform:uppercase;color:var(--gold)}
.file span{font-size:.88rem;color:var(--quiet)}
form{margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem;max-width:34rem}
input[type=email]{flex:1 1 16rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:2px;
  background:#1A1613;color:var(--paper);font-family:inherit;font-size:1rem}
input[type=email]:focus{outline:none;border-color:var(--gold)}
button[type=submit]{cursor:pointer;border:0;font-family:inherit}
.fine{font-size:.82rem;color:var(--quiet);margin:.9rem 0 0;max-width:34rem}
.warn{font-size:.86rem;color:var(--quiet);border:1px solid var(--line);padding:.9rem 1.1rem;
  border-radius:2px;margin:2rem 0 0;max-width:44rem}
.centre{text-align:center}
footer{color:var(--quiet);font-size:.84rem;margin:clamp(3rem,8vw,5rem) 0 0;
  border-top:1px solid var(--line);padding-top:1.6rem}
footer a{color:var(--quiet)}
a{color:var(--gold)}

.stores{font-size:.95rem;color:#D8CFC2;margin:1rem 0 0;max-width:44rem;border:1px solid var(--line);padding:.9rem 1.1rem;border-radius:2px}
.stores strong{color:var(--gold);display:block;margin-bottom:.3rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.stores a{white-space:nowrap}

/* Author section. The headshot has a light-grey studio backdrop, which would read as a floating
   grey square on this dark page, so it is masked to a circle with a thin gold ring -- the crop
   then looks deliberate rather than like an untrimmed photo. */
.author{display:grid;gap:clamp(1.2rem,3.5vw,2.2rem);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:44rem){.author{grid-template-columns:11rem minmax(0,1fr)}}
.author-photo{width:11rem;height:11rem;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto;border:1px solid var(--line);
  box-shadow:0 1rem 2rem rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05)}
.author-name{font-size:1.06rem;color:var(--paper);margin:0 0 .2rem;letter-spacing:.02em}
.author-role{font-size:.84rem;color:var(--quiet);font-style:italic;margin:0 0 1rem}