/* Gabriel Zavala, Author
   Type: Cinzel (caps, echoes the logo) / Cormorant Garamond (display) / Crimson Pro (text)
   Color: charcoal, cream and bone (black-and-white palette); logo navy on light pages */
:root{
  --night:#131211;     /* warm charcoal, hero + dark sections */
  --night-2:#1C1A18;
  --navy:#04224A;      /* logo navy */
  --cream:#FDF8F3;     /* logo cream */
  --parchment:#EFE6D8; /* Recluse cover paper */
  --rule:#D9CDBB;
  --ink:#16130F;
  --stone:#6B6259;
  --rust:#5E5850;      /* stone accent on light pages */
  --rust-lt:#CDBFA8;   /* bone accent on dark pages */
  --moon:#CFC9C0;
  --caps:"Cinzel", "Trajan Pro", Georgia, serif;
  --display:"Cormorant Garamond", Garamond, Georgia, serif;
  --text:"Crimson Pro", Georgia, serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 20px/1.6 var(--text);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid #8F887F;outline-offset:4px}
.wrap{width:min(1280px,100% - 56px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
p+p{margin-top:.9em}
em{font-style:italic}

/* ---------- shared type ---------- */
.caps{font:500 13px/1.4 var(--caps);letter-spacing:.32em;text-transform:uppercase}
.h-xl{font:500 clamp(54px,8vw,128px)/.95 var(--display);letter-spacing:-.01em}
.h-l{font:500 clamp(40px,5vw,72px)/1 var(--display)}
.h-m{font:500 clamp(28px,2.6vw,38px)/1.1 var(--display)}

/* ---------- buttons: square, Cinzel caps, like the logo ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  font:600 13px var(--caps);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn.fill{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn.fill:hover{background:#fff;border-color:#fff}
.btn.line:hover{background:var(--cream);color:var(--night);border-color:var(--cream)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn.navy:hover{background:#0A3772}
.btn.navy-line{color:var(--navy)}
.btn.navy-line:hover{background:var(--navy);color:var(--cream)}

/* ---------- header ---------- */
.top{position:relative;z-index:30;border-bottom:1px solid var(--rule);background:var(--cream)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo img{height:46px;width:auto}
.menu{display:flex;gap:40px;list-style:none;align-items:center}
.menu a{font:500 13px var(--caps);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:12px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:.26em;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
/* header over dark pages */
.on-dark .top{position:absolute;inset:0 0 auto;background:transparent;border-color:rgba(253,248,243,.12);color:var(--cream)}
.on-dark .logo img{filter:brightness(0) invert(.96)}
@media (max-width:720px){.menu{gap:22px}.menu a{letter-spacing:.18em;font-size:12px}.top .wrap{height:72px}.logo img{height:38px}}

/* ---------- HOME: full-screen hero ---------- */
.hero{position:relative;min-height:100svh;background:radial-gradient(120% 90% at 50% 45%,#2A2724 0%,var(--night) 62%);color:var(--cream);overflow:hidden;display:flex;align-items:center}
.web{position:absolute;left:50%;top:50%;width:min(1400px,170vw);transform:translate(-50%,-50%);pointer-events:none;opacity:.22;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
.web path{fill:none;stroke:var(--rust-lt);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1;animation:spin 2.6s var(--ease) .2s forwards}
.web .ring path{stroke-width:.55;animation-delay:.9s}
@keyframes spin{to{stroke-dashoffset:0}}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr minmax(320px,440px) 1fr;gap:56px;align-items:center;padding:140px 0 130px}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.center .book{width:min(300px,62vw);filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));animation:lift 1.1s var(--ease) .1s both}
@keyframes lift{from{opacity:0;transform:translateY(40px)}}
.offer-line{margin-top:34px;color:var(--moon)}
.offer-title{font:500 clamp(26px,2.4vw,34px)/1.15 var(--display);color:var(--cream);margin:10px 0 0}
.magnet{display:flex;width:100%;max-width:440px;margin-top:22px;border:1px solid rgba(253,248,243,.35)}
.magnet input{flex:1;min-width:0;min-height:54px;padding:0 18px;border:0;background:rgba(19,18,17,.6);color:var(--cream);font:400 18px var(--text)}
.magnet input::placeholder{color:#9A938A}
.magnet .btn{border:0;min-height:54px}
.note{font-size:15px;color:#9A938A;margin-top:12px;min-height:1.4em}
.note.err{color:#E8D9C0;text-decoration:underline}
.quotes-side{display:grid;gap:56px}
.quotes-side.l{text-align:right}
.q blockquote{font:italic 400 clamp(22px,1.8vw,28px)/1.3 var(--display);color:var(--cream)}
.q blockquote em{font-style:normal}
.q figcaption{margin-top:12px;color:var(--rust-lt)}
.q.lead blockquote{font-size:clamp(26px,2.2vw,34px)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:#8F887F;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue span{width:1px;height:38px;background:linear-gradient(var(--rust-lt),transparent)}
@media (prefers-reduced-motion:reduce){.web path{animation:none;stroke-dashoffset:0}.center .book{animation:none}}

/* ---------- HOME: coming soon over the mountain ---------- */
.soon{position:relative;min-height:88vh;display:flex;align-items:center;color:var(--cream);background:var(--night);overflow:hidden;isolation:isolate}
.soon .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 70%}
.soon::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(19,18,17,.72) 0%,rgba(19,18,17,.35) 45%,rgba(19,18,17,0) 75%)}
.soon .bg,.redacted-hero .bg{filter:brightness(1.35) contrast(1.05)}
.soon .inner{max-width:620px;padding:120px 0}
.soon .caps{color:var(--rust-lt)}
.redact{display:inline-block;margin:22px 0 30px;padding:.06em .28em .12em;background:#000;color:var(--cream);box-shadow:0 0 0 1px rgba(253,248,243,.18)}
.soon .caps{display:block;margin-bottom:22px}
.soon .teaser{font:italic 400 clamp(22px,2vw,28px)/1.45 var(--display);color:#E9E4DC}
.soon .btn{margin-top:40px}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--moon);padding:88px 0 40px;border-top:1px solid rgba(253,248,243,.08)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;align-items:start}
.foot .lockup{width:min(330px,100%);filter:brightness(0) invert(.94)}
.foot h4{color:var(--cream);margin-bottom:18px}
.foot ul{list-style:none;display:grid;gap:10px;font-size:18px}
.foot ul a{text-decoration:none;overflow-wrap:anywhere}
.foot ul a:hover{color:var(--cream)}
.fine{margin-top:64px;padding-top:24px;border-top:1px solid rgba(253,248,243,.1);font-size:15px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- ABOUT page ---------- */
.about-hero{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:end;padding:88px 0 96px}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--parchment)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portrait::after{content:"";position:absolute;inset:14px;border:1px solid rgba(253,248,243,.45);pointer-events:none}
.about-hero .caps{color:var(--rust)}
.about-hero h1{color:var(--navy);margin:18px 0 32px}
.about-hero .intro{font:italic 400 clamp(24px,2.2vw,30px)/1.4 var(--display);color:var(--ink);max-width:34ch}
.bio{display:grid;grid-template-columns:5fr 7fr;gap:80px;padding:0 0 110px}
.bio .label{color:var(--stone)}
.bio p{max-width:38rem}
.ledger{border-top:1px solid var(--ink)}
.ledger li{list-style:none;display:grid;grid-template-columns:110px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ledger .yr{font:500 14px var(--caps);letter-spacing:.2em;color:var(--rust);padding-top:5px}
.ledger .w{font:500 24px/1.25 var(--display);color:var(--navy)}
.ledger .m{display:block;color:var(--stone);font-size:17px}
.band{background:var(--night);color:var(--cream);padding:100px 0}
.band-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.band .caps{color:var(--rust-lt)}
.band h2{margin:16px 0 18px}
.band p{color:#CFC9C0;max-width:34rem}
.band .mail{margin-top:18px;font-size:17px;color:#CFC9C0}
.band .magnet{max-width:none;margin-top:0}

/* ---------- BOOK pages ---------- */
.crumb{padding:28px 0 0;color:var(--stone)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--rust)}
.detail{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:96px;align-items:start;padding:44px 0 110px}
.detail .book{position:sticky;top:40px;filter:drop-shadow(0 34px 40px rgba(22,19,15,.28))}
.detail .caps{color:var(--rust)}
.detail h1{color:var(--navy);margin:14px 0 10px}
.detail .hook{font:italic 400 clamp(26px,2.6vw,36px)/1.25 var(--display);margin-bottom:30px}
.detail .copy p{max-width:38rem}
.beat{font:italic 500 28px/1.3 var(--display);color:var(--navy);margin:1em 0}
.buy{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 32px;margin-top:40px;padding:24px 0;border-block:1px solid var(--rule);max-width:38rem;font-size:18px}
.facts dt{font:500 12px/2 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
details{margin-top:26px;max-width:38rem;font-size:18px}
summary{cursor:pointer;font:500 13px var(--caps);letter-spacing:.22em;text-transform:uppercase}
details p{margin-top:10px;color:var(--stone)}
.praise{background:var(--night);color:var(--cream);padding:110px 0}
.praise .caps{color:var(--rust-lt)}
.praise .big{font:italic 400 clamp(32px,3.8vw,54px)/1.2 var(--display);max-width:28ch;margin:22px 0 14px}
.praise .big em{font-style:normal}
.praise .who{color:#8F887F}
.praise-list{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:64px;border-top:1px solid rgba(253,248,243,.14)}
.praise-list figure{padding:28px 24px 0 0;border-right:1px solid rgba(253,248,243,.08);padding-left:24px}
.praise-list figure:first-child{padding-left:0}
.praise-list figure:last-child{border-right:0}
.praise-list blockquote{font:italic 400 22px/1.3 var(--display)}
.praise-list figcaption{margin-top:12px;font-size:15px;color:#8F887F}

/* dark book page ([REDACTED]) */
.redacted-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--cream);background:var(--night);isolation:isolate;overflow:hidden}
.redacted-hero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 70%}
.redacted-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(19,18,17,.9) 6%,rgba(19,18,17,.3) 50%,rgba(19,18,17,0))}
.redacted-hero .inner{padding:0 0 110px;max-width:760px}
.redacted-hero .caps{color:var(--rust-lt)}
.redacted-hero .teaser{font:italic 400 clamp(24px,2.3vw,32px)/1.45 var(--display);color:#E9E4DC}
.redacted-hero .rest{margin-top:22px;color:#BDB6AC;max-width:40rem}
.redacted-hero .magnet{margin-top:36px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr 1fr;padding-top:120px}
  .center{grid-column:1/-1;order:-1}
  .quotes-side.l{text-align:left}
  .praise-list{grid-template-columns:repeat(3,1fr)}
  .praise-list figure:nth-child(4){padding-left:0}
}
@media (max-width:860px){
  .about-hero,.bio,.band-grid,.detail,.foot-grid{grid-template-columns:1fr;gap:44px}
  .detail .book{position:relative;top:0;max-width:280px}
  .portrait{max-width:420px}
  .foot-grid > :first-child{grid-column:auto}
}
@media (max-width:640px){
  body{font-size:18px}
  .wrap{width:min(1280px,100% - 40px)}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:110px}
  .quotes-side{gap:32px}
  .q.lead blockquote,.q blockquote{font-size:22px}
  .magnet{flex-direction:column;border:0;gap:10px}
  .magnet input{border:1px solid rgba(253,248,243,.35)}
  .soon .inner{padding:96px 0}
  .soon::before{background:linear-gradient(0deg,rgba(19,18,17,.95) 10%,rgba(19,18,17,.6) 70%,rgba(19,18,17,.4))}
  .praise-list{grid-template-columns:1fr}
  .praise-list figure{padding-left:0;border-right:0;border-bottom:1px solid rgba(253,248,243,.08);padding-bottom:24px}
  .ledger li{grid-template-columns:1fr;gap:4px}
}

/* ---------- book pages on dark (match home) ---------- */
.book-page{background:var(--night);color:var(--cream)}
.book-top{background:radial-gradient(90% 70% at 25% 30%,#2A2724 0%,var(--night) 65%);padding-top:84px}
.book-page .crumb{color:#8F887F}
.book-page .crumb a:hover{color:var(--cream)}
.book-page .detail .caps{color:var(--rust-lt)}
.book-page .detail h1{color:var(--cream)}
.book-page .detail .hook{color:#EAE3D8}
.book-page .detail .copy p:not(.caps):not(.hook):not(.beat){color:#CFC9C0}
.book-page .beat{color:var(--rust-lt)}
.book-page .detail .book{filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.book-page .facts{border-color:rgba(253,248,243,.14);color:#E6E0D6}
.book-page .facts dt{color:#8F887F}
.book-page summary{color:var(--cream)}
.book-page details p{color:#A9A299}
.book-page .praise{background:var(--night-2);border-top:1px solid rgba(253,248,243,.08)}
.book-page .praise-list figcaption{color:#8F887F}
.notify{margin-top:36px;max-width:520px}
.notify .magnet{max-width:none}
.vista{position:relative;height:62vh;min-height:360px;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;color:var(--rust-lt)}
.vista .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:brightness(1.35) contrast(1.05)}
.vista::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night) 0%,rgba(19,18,17,0) 35%,rgba(19,18,17,.5) 100%)}
.vista .wrap{padding-bottom:40px}

/* ---------- about page on dark (match home) ---------- */
.about-page{background:var(--night);color:var(--cream)}
.about-page main > .wrap{padding-top:84px}
.about-page main{background:radial-gradient(80% 50% at 20% 10%,#2A2724 0%,var(--night) 60%)}
.about-page .about-hero .caps{color:var(--rust-lt)}
.about-page .about-hero h1{color:var(--cream)}
.about-page .about-hero .intro{color:#EAE3D8}
.about-page .portrait{background:var(--night-2)}
.about-page .bio .label{color:#8F887F}
.about-page .bio p{color:#CFC9C0}
.about-page .ledger{border-color:rgba(253,248,243,.4)}
.about-page .ledger li{border-color:rgba(253,248,243,.12)}
.about-page .ledger .yr{color:var(--rust-lt)}
.about-page .ledger .w{color:var(--cream)}
.about-page .ledger .m{color:#A9A299}
.about-page .band{background:var(--night-2);border-top:1px solid rgba(253,248,243,.08)}
.about-page .band .btn.line:hover{background:var(--cream);color:var(--night)}

/* ---------- contact form ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:rgba(253,248,243,.03);border:1px solid rgba(253,248,243,.14);padding:32px}
.contact .field{display:flex;flex-direction:column;gap:8px}
.contact .field.full{grid-column:1/-1}
.contact label{color:#8F887F;font-size:12px}
.contact input,.contact textarea{width:100%;padding:14px 16px;border:1px solid rgba(253,248,243,.25);background:rgba(19,18,17,.6);color:var(--cream);font:400 18px var(--text);border-radius:0}
.contact textarea{resize:vertical;min-height:140px}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--rust-lt)}
.contact .btn{grid-column:1/-1;justify-self:start}
.band-grid{align-items:start}
.band .mail a{color:var(--cream)}

/* ---------- press page ---------- */
.press-hero{padding:170px 0 64px;max-width:760px}
.press-hero .caps{color:var(--rust-lt)}
.press-hero h1{margin:16px 0 22px;color:var(--cream)}
.press-hero .intro{font:italic 400 clamp(24px,2.2vw,30px)/1.4 var(--display);color:#EAE3D8}
.press-hero.thanks{padding-bottom:140px}
.press-hero.thanks .btn{margin-top:36px}
.clips{list-style:none;border-top:1px solid rgba(253,248,243,.4);margin-bottom:110px}
.clip{display:grid;grid-template-columns:260px 1fr;column-gap:56px;padding:40px 0;border-bottom:1px solid rgba(253,248,243,.12)}
.clip .outlet{grid-row:1/span 3;color:var(--rust-lt);display:flex;flex-direction:column;gap:8px}
.clip .outlet span{color:#8F887F;letter-spacing:.2em}
.clip h2 a{text-decoration:none;color:var(--cream)}
.clip h2 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.clip p:not(.caps){color:#CFC9C0;max-width:40rem;margin-top:12px}
.clip .read{display:inline-block;margin-top:20px;color:var(--cream);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;justify-self:start}
@media (max-width:860px){.clip{grid-template-columns:1fr}.clip .outlet{grid-row:auto;flex-direction:row;gap:16px;margin-bottom:10px}.press-hero{padding-top:130px}}
@media (max-width:640px){.contact{grid-template-columns:1fr;padding:22px}.menu{gap:16px}.menu a{letter-spacing:.12em;font-size:11px}}
.thanks-body{margin-top:18px;color:#CFC9C0;max-width:36rem}
.press-hero.thanks .buy{margin-top:36px}
.press-hero.thanks .btn{margin-top:0}

/* stacked hero (tablet/phone): center the web on the book, not the whole section */
@media (max-width:1080px){
  .web{top:calc(120px + min(300px,62vw) * .833);width:min(1100px,190vw)}
}