/* =====================================================================
   matchbookseries.com — shared stylesheet
   Cover-matched dark: warm blacks, book-paper text, the cover's crimson
   + matchhead yellow. Used by every page on the site.
   ===================================================================== */

:root{
  --ink:#0D0808;
  --smoke:#170F0E;
  --ash:#2E1B18;
  --paper:#EDE6DA;
  --dim:#A29088;
  --ember:#A8231A;      /* the cover's crimson — buttons, glow, selection */
  --ember-hot:#C8352A;  /* hover states + large display text */
  --match:#E8C62E;      /* the JONATHAN FINEGOLD yellow — accents, links */
  --match-hot:#F2D64A;  /* focus rings */
  --maxw:1060px;
  --readw:680px;        /* comfortable reading width for article pages */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ember);color:var(--paper)}
a{color:var(--match)}
a:hover{color:var(--match-hot)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Datelines (the book's chapter-header vernacular) ---------- */
.dateline{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--match);
}

/* ---------- Scene-break ornament from the book interior ---------- */
.scenebreak{
  text-align:center;
  color:var(--ash);
  font-family:"IBM Plex Mono",monospace;
  letter-spacing:.9em;
  padding-left:.9em;
  font-size:15px;
  user-select:none;
}

/* ============================== TOP BAR ============================== */
.topbar{border-bottom:1px solid var(--ash);background:var(--ink);position:relative;z-index:2}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{
  font-family:"Anton",sans-serif;
  font-size:20px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper);
  text-decoration:none;
}
.brand:hover{color:var(--paper)}
.brand span{color:var(--match)}
.topnav{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.topnav a{color:var(--dim);text-decoration:none}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--match)}

/* ============================== BUTTONS ============================== */
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border:1px solid var(--ember);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--paper)}
.btn-primary:hover{background:var(--ember-hot);border-color:var(--ember-hot);color:var(--paper);box-shadow:0 0 26px rgba(168,35,26,.45)}
.btn-ghost{color:var(--match);border-color:var(--match);background:transparent}
.btn-ghost:hover{background:rgba(232,198,46,.08)}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--match-hot);outline-offset:3px}

/* ============================== HERO ============================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ash)}
.hero::before{
  content:"";
  position:absolute;left:14%;top:18%;
  width:640px;height:640px;
  background:radial-gradient(circle,
    rgba(232,198,46,.10) 0%,
    rgba(168,35,26,.12) 34%,
    rgba(168,35,26,0) 68%);
  filter:blur(6px);
  animation:flicker 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flicker{
  0%,100%{opacity:.85;transform:scale(1)}
  38%{opacity:1;transform:scale(1.04)}
  55%{opacity:.78;transform:scale(.985)}
  72%{opacity:.96;transform:scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  html{scroll-behavior:auto}
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  gap:64px;
  align-items:center;
  padding:80px 0 72px;
}
.cover{
  justify-self:center;
  width:100%;max-width:340px;
  aspect-ratio:6/9;
  box-shadow:0 30px 60px rgba(0,0,0,.65),0 0 90px rgba(168,35,26,.20);
  border:1px solid rgba(237,230,218,.08);
}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-fallback{
  width:100%;height:100%;display:none;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,#1A1210 0%,#0D0808 70%);
  padding:14% 10%;text-align:center;
}
.cover-fallback .fl-title{font-family:"Anton",sans-serif;font-size:clamp(34px,4vw,46px);line-height:1.02;letter-spacing:.02em;text-transform:uppercase}
.cover-fallback .fl-flame{width:7px;height:7px;border-radius:50%;margin:0 auto;background:var(--match);box-shadow:0 0 18px 7px rgba(168,35,26,.55)}
.cover-fallback .fl-author{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

.hero-copy .dateline{margin-bottom:22px}
h1{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:clamp(34px,4.8vw,58px);
  line-height:1.08;
  letter-spacing:.02em;
  text-transform:uppercase;
  max-width:12.5em;
  margin-bottom:26px;
}
h1 b{font-weight:400;color:var(--match)}

/* rating + KU proof line under the hero headline */
.proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);
  margin-bottom:30px;
}
.proof .stars{color:var(--match);letter-spacing:.08em;font-size:15px}
.proof strong{color:var(--paper);font-weight:500}
.proof .sep{color:var(--ash)}
.ku-note{margin-top:14px;font-size:15px;color:var(--dim)}
.ku-note strong{color:var(--paper);font-weight:600}

/* ============================ SECTIONS ============================ */
section{padding:84px 0}
.section-head{margin-bottom:44px}
.section-head .dateline{margin-bottom:10px}
h2{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:clamp(30px,4vw,44px);
  letter-spacing:.02em;
  text-transform:uppercase;
}

.book-copy{max-width:640px}
.book-copy p{margin-bottom:1.35em}
.book-copy p:last-child{margin-bottom:0}
.book-copy .signoff{color:var(--dim)}
.book-copy .signoff em{color:var(--paper)}

.pullquote{
  font-family:"Anton",sans-serif;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ember-hot);
  border-left:3px solid var(--ember);
  padding-left:26px;
  margin:2.2em 0;
  max-width:16em;
}

/* ============================ READER REVIEWS ========================= */
.quotes{background:var(--smoke);border-top:1px solid var(--ash);border-bottom:1px solid var(--ash)}
.rating-summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin:-20px 0 40px;
  color:var(--dim);
}
.rating-summary .big{font-family:"Anton",sans-serif;font-size:44px;line-height:1;color:var(--paper)}
.rating-summary .stars{color:var(--match);font-size:20px;letter-spacing:.08em}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote-card{
  border:1px solid var(--ash);
  padding:30px 28px;
  display:flex;flex-direction:column;gap:18px;
  background:var(--ink);
}
.quote-card .stars{color:var(--match);font-size:14px;letter-spacing:.1em}
.quote-card blockquote{font-size:18px;font-style:italic;line-height:1.55;flex:1}
.quote-card blockquote::before{content:"\201C";color:var(--match);margin-right:1px}
.quote-card blockquote::after{content:"\201D";color:var(--match);margin-left:1px}
.quote-card cite{
  font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.reviews-more{margin-top:36px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.reviews-more a{text-decoration:none}

/* ============================ "WHO IT'S FOR" ========================= */
.for-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px;max-width:860px}
.for-card{border-top:1px solid var(--ash);padding-top:18px}
.for-card h3{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--match);margin-bottom:8px}
.for-card h3 a{text-decoration:none}
.for-card p{color:var(--dim)}

/* ============================= SIGNUP ============================= */
.signup .inner{max-width:620px;margin:0 auto;text-align:center}
.signup h2{margin-bottom:14px}
.signup .sub{color:var(--dim);margin-bottom:36px}
.form-note{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--dim)}

/* ============================ ARTICLE PAGES ========================== */
.page-head{position:relative;overflow:hidden;border-bottom:1px solid var(--ash);padding:72px 0 56px}
.page-head .dateline{margin-bottom:16px}
.page-head h1{max-width:16em;margin-bottom:18px}
.page-head .dek{font-size:clamp(18px,2vw,21px);font-style:italic;color:var(--dim);max-width:36em}

.article{padding:64px 0 84px}
.article .prose{max-width:var(--readw)}
.prose h2{font-size:clamp(26px,3.2vw,34px);margin:2em 0 .6em}
.prose h3{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--match);margin:1.8em 0 .5em}
.prose p,.prose ul,.prose ol{margin-bottom:1.2em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}

/* placeholder block shown on stub pages until content is written */
.stub-note{
  border:1px dashed var(--ember);
  background:rgba(168,35,26,.06);
  padding:22px 24px;
  margin-bottom:36px;
  font-size:15px;
}
.stub-note .dateline{color:var(--ember-hot);margin-bottom:8px}
.stub-note ul{padding-left:1.2em;margin-top:8px;color:var(--dim)}

/* book callout used on recommendation pages */
.book-callout{
  display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;
  border:1px solid var(--ash);background:var(--smoke);
  padding:22px;margin:40px 0;
}
.book-callout img{width:100%;aspect-ratio:6/9;object-fit:cover;display:block;border:1px solid rgba(237,230,218,.08)}
.book-callout h3{margin-top:0}
.book-callout p{margin-bottom:14px;color:var(--dim)}

/* ============================= FOOTER ============================= */
footer{border-top:1px solid var(--ash);padding:40px 0 48px}
.foot-links{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:22px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.foot-links a{color:var(--dim);text-decoration:none}
.foot-links a:hover{color:var(--match)}
.foot-row{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.foot-row a{color:var(--dim);text-decoration:none}
.foot-row a:hover{color:var(--match)}

/* ============================ RESPONSIVE ========================== */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:48px;padding:56px 0 56px;text-align:center}
  .hero-copy .dateline{margin-bottom:16px}
  h1{margin-left:auto;margin-right:auto}
  .page-head h1{margin-left:0}
  .cta-row,.proof{justify-content:center}
  .hero::before{left:50%;transform:translateX(-50%)}
  .quote-grid,.for-grid{grid-template-columns:1fr}
  .pullquote{margin-left:auto;margin-right:auto}
  .book-callout{grid-template-columns:90px 1fr}
  section{padding:64px 0}
  .topbar .wrap{justify-content:center}
}