/* Patrick K. Crowley: shared site styles (used by every page) */

@font-face{font-family:"Anton";src:url("/fonts/anton-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/fonts/spectral-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url("/fonts/spectral-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --night:#0b0b0a;      /* page background, a touch above the cover's black */
  --cream:#f3e5cc;      /* the cover's title cream */
  --text:#d8cdb9;       /* body text, the cover's author-name cream */
  --muted:#8d8579;      /* small labels, footer */
  --accent:#b8262c;     /* buttons (matches the BookFunnel page) */
  --accent-lit:#cf3036;
  --rule:rgba(243,229,204,.14);
  --measure:58ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:1.125rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .18s ease}
a:hover{border-bottom-color:var(--cream)}
a:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:64rem;margin:0 auto;padding:0 1.6rem}

/* small spaced capitals, as used for the author name and subtitle on the covers */
.caps{
  font-family:"Spectral",Georgia,serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
}

/* ---------- masthead ---------- */

.masthead{padding:2.4rem 0 0}
.masthead-inner{
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;
  align-items:baseline;justify-content:space-between;
  padding-bottom:1.3rem;border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:"Spectral",Georgia,serif;font-weight:500;
  font-size:clamp(.8rem,2.2vw,.95rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--cream);margin:0;border-bottom:none;
}
.sitenav{display:flex;gap:1.6rem;font-size:.8rem}
.sitenav a{border-bottom:none;color:var(--muted)}
.sitenav a:hover{color:var(--cream)}

/* ---------- a book ---------- */

.book{
  display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,3.8rem);
  align-items:start;
  padding:clamp(3rem,7vw,5.5rem) 0;
}
.book + .book{border-top:1px solid var(--rule)}

.shelf{display:flex;flex-direction:column;gap:1.15rem}

.cover{
  box-shadow:0 0 0 1px rgba(243,229,204,.10),0 26px 60px -22px rgba(0,0,0,.95);
  animation:settle .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.book-title{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(3.2rem,8vw,4.8rem);
  line-height:.95;letter-spacing:.03em;text-transform:uppercase;
  color:var(--cream);margin:0;
}
.book-kind{font-size:clamp(.74rem,1.9vw,.84rem);color:var(--muted);margin:.85rem 0 0}

.book-blurb{max-width:var(--measure);margin:1.8rem 0 0}
.book-blurb p{margin:0 0 1.05rem}
.book-blurb p:last-child{margin-bottom:0}
.beat{font-weight:500;color:var(--cream);font-size:1.06em;line-height:1.5;margin-bottom:1.25rem}

.button{
  display:block;text-align:center;
  font-family:"Spectral",Georgia,serif;font-weight:500;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:var(--accent);
  padding:.95rem 1.5rem;border:none;border-radius:2px;
  transition:background .18s ease;cursor:pointer;
}
.button:hover{background:var(--accent-lit)}
.button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* ---------- prose blocks ---------- */

.block{padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--rule)}
.block-head{font-size:.84rem;color:var(--cream);margin:0 0 1.5rem}
.block p{max-width:var(--measure);margin:0 0 1.15rem}
.block p:last-child{margin-bottom:0}

.mail{font-size:clamp(1rem,3vw,1.2rem);color:var(--cream)}

.colophon{padding:2rem 0 3rem;border-top:1px solid var(--rule);font-size:.86rem;color:var(--muted)}
.colophon p{margin:0}

/* ---------- narrow screens ---------- */

@media (max-width:46rem){
  .book{grid-template-columns:minmax(0,1fr)}
  .shelf{max-width:17rem}
  .sitenav{gap:1.2rem}
}
@media (max-width:30rem){
  body{font-size:1.07rem}
  .wrap{padding-left:1.15rem;padding-right:1.15rem}
  .shelf{max-width:100%}
  .masthead-inner{gap:.6rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- bonus and text pages ---------- */

.page-head{padding:clamp(3rem,7vw,5rem) 0 0;text-align:center}
.page-kind{font-size:clamp(.74rem,1.9vw,.84rem);color:var(--muted);margin:0 0 1rem}
.page-title{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(3rem,9vw,5rem);line-height:.95;letter-spacing:.03em;
  text-transform:uppercase;color:var(--cream);margin:0;
}
.spoiler{max-width:44ch;margin:2rem auto 0;font-style:italic;color:var(--muted);font-size:1rem}
.spoiler p{margin:0 0 .6rem}

.excerpt{max-width:36rem;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) 0 0}
.excerpt p{margin:0;text-indent:1.5em}
.excerpt p:first-child{text-indent:0}
.excerpt p:last-child{
  /* the last line fades, as if the page continues */
  -webkit-mask-image:linear-gradient(#000 45%,rgba(0,0,0,.55));
  mask-image:linear-gradient(#000 45%,rgba(0,0,0,.55));
}

.signup{
  max-width:36rem;margin:clamp(2.5rem,6vw,3.5rem) auto clamp(3rem,7vw,5rem);
  padding:clamp(1.6rem,4vw,2.4rem);
  border:1px solid var(--rule);background:#121211;
}
.signup-head{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(1.8rem,5vw,2.3rem);line-height:1.05;letter-spacing:.03em;
  text-transform:uppercase;color:var(--cream);margin:0 0 .8rem;
}
.signup p{margin:0 0 1rem}
.fine{font-size:.9rem;color:var(--muted)}
.fine a{color:inherit;font-weight:400;border-bottom-color:rgba(243,229,204,.18)}
.form-slot{border:1px dashed var(--muted);padding:1.5rem;text-align:center;color:var(--muted);margin:1.2rem 0}

.textpage{max-width:var(--measure);margin:0 auto;padding:clamp(3rem,7vw,5rem) 0}
.textpage h1{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(2.4rem,7vw,3.4rem);
  letter-spacing:.03em;text-transform:uppercase;color:var(--cream);margin:0 0 .5rem;line-height:1}
.textpage h2{font-size:.84rem;color:var(--cream);margin:2.4rem 0 .8rem}
.textpage p,.textpage li{margin:0 0 1rem}
.textpage ul{padding-left:1.2rem;margin:0 0 1rem}
.todo{background:#5a4a00;color:#fff3b0;padding:0 .25em;border-radius:2px;font-style:normal}

.colophon{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.colophon a{color:var(--muted);font-weight:400;border-bottom:none}
.colophon a:hover{color:var(--cream)}

/* ---------- MailerLite form, restyled to match the site ---------- */

#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper{background:transparent!important;border-radius:0!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper.embedForm{max-width:100%!important;width:100%!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-align-center{text-align:left!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody{padding:.4rem 0 0!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent{margin:0 0 1rem!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow{margin:0 0 .7rem!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item{margin:0!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input{
  background:#141413!important;color:var(--cream)!important;
  border:1px solid rgba(243,229,204,.28)!important;border-radius:2px!important;
  font-family:"Spectral",Georgia,serif!important;font-size:1.05rem!important;line-height:1.4!important;
  padding:.8rem .9rem!important;
}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus{
  outline:2px solid var(--accent-lit)!important;outline-offset:1px;border-color:transparent!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder{color:var(--muted)!important;opacity:1}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit{margin:0 0 1rem!important;float:none!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button{
  background:var(--accent)!important;color:var(--cream)!important;border-radius:2px!important;
  font-family:"Spectral",Georgia,serif!important;font-weight:500!important;
  font-size:.82rem!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  padding:.95rem 1.5rem!important;line-height:1.3!important;
}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover{background:var(--accent-lit)!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4{
  font-family:"Anton",Impact,sans-serif!important;font-size:1.6rem!important;letter-spacing:.03em!important;
  text-transform:uppercase!important;color:var(--cream)!important;margin:0 0 .5rem!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p{
  font-family:"Spectral",Georgia,serif!important;font-size:1.05rem!important;line-height:1.6!important;color:var(--text)!important}
#mlb2-48059208 .ml-error input{border-color:#e0575c!important}

/* success state: hide the intro line and make the message stand out */
.signup:has(.ml-form-successBody:not([style*="none"])) .signup-intro{display:none}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody{
  border-left:3px solid var(--accent)!important;background:rgba(243,229,204,.06)!important;
  padding:1.2rem 1.4rem!important;margin:.4rem 0 1.2rem!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent{margin:0!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4{font-size:2rem!important}
#mlb2-48059208.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p{color:var(--cream)!important;font-size:1.12rem!important}

/* ---------- page background: soft glow at the top + faint film grain ---------- */
html{background:radial-gradient(ellipse 90% 70% at 50% 0%,#1c1b18 0%,var(--night) 70%) fixed var(--night)}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.07}

/* ---------- success message fades in ---------- */
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#mlb2-48059208 .ml-form-successBody{animation:reveal .7s cubic-bezier(.2,.7,.3,1) both}

/* ---------- full bonus chapter page ---------- */
.download{max-width:24rem;margin:2.2rem auto 0;text-align:center}
.download p{margin:0 0 .9rem;font-size:1rem}
.download .fine{margin:.8rem 0 0}
.excerpt.full p:last-child{-webkit-mask-image:none;mask-image:none}
.chapter-end{max-width:36rem;margin:3rem auto clamp(3rem,7vw,5rem);padding-top:2rem;border-top:1px solid var(--rule);font-style:italic;color:var(--muted)}
.chapter-end p{margin:0 0 .6rem}
.chapter-end .sig{font-style:normal;font-weight:500;color:var(--text);letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}
.chapter-end .review{margin:2.2rem 0 0;font-style:normal;color:var(--text)}
.chapter-end .review .button{display:inline-block}
.chapter-end .review p{margin:0 0 1.1rem;font-size:1rem}
.excerpt p.scene-break{text-indent:0;text-align:center;margin:1.4rem 0;letter-spacing:.4em;color:var(--muted)}
.excerpt p.scene-break + p{text-indent:0}