/* ============ TOKENS ============ */
:root{
  --bg:#ffffff;
  --fg:#231f1c;
  --ink:#1a1714;
  --muted-ink:#6b6660;
  --muted:#f6f4f2;
  --border:rgba(35,31,28,.15);
  --border-soft:rgba(35,31,28,.10);
  --primary:#E4573D;
  --primary-fg:#ffffff;
  --secondary:#5472D2;
  --accent:#75D69C;
  --noir:#1d1816;
  --noir-fg:#f1ece6;
  --font-display:"Libre Baskerville", Georgia, serif;
  --font-sans:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none; font-weight: 600 !important;}
button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;margin:0;line-height:1.1;font-weight: 400 !important}
p{margin:0}

/* ============ LAYOUT ============ */
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:1.5rem}
@media(min-width:768px){.container{padding-inline:2.5rem}}

.eyebrow{font-family:var(--font-sans);font-weight:700;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}
.eyebrow-accent{color:var(--accent)}

/* ============ BUTTONS ============ */
.btn{display:inline-block;padding:1rem 1.75rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:#c94a32}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--noir)}
.btn-lg{padding:1.25rem 2.5rem;letter-spacing:.2em}

/* ============ NAV ============ */
.nav{position:absolute;top:0;left:0;right:0;z-index:30}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:1.5rem}
.brand{font-family:var(--font-display);font-size:1.125rem;color:#fff;letter-spacing:-.01em}
.brand span{font-style:italic;font-weight:400}
.nav-links{display:none;align-items:center;gap:2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.8)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:#fff}
@media(min-width:768px){.nav-links{display:flex}}
.nav-cta{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;border:1px solid rgba(255,255,255,.4);color:#fff;padding:.5rem 1rem;transition:background-color .2s,color .2s}
.nav-cta:hover{background:#fff;color:var(--noir)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:var(--noir);color:var(--noir-fg);min-height:100vh}
.hero-backdrop{position:absolute;inset:0;opacity:.6;background:
  radial-gradient(80% 60% at 70% 40%, rgba(228,87,61,.35), transparent 60%),
  radial-gradient(60% 50% at 20% 80%, rgba(84,114,210,.35), transparent 60%);}
.hero-scanlines{position:absolute;inset:0;opacity:.07;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px)}
.hero-grid{position:relative;display:grid;gap:3rem;align-items:center;padding-top:9rem;padding-bottom:6rem;min-height:100vh}
@media(min-width:1024px){.hero-grid{grid-template-columns:7fr 5fr;gap:3rem}}

.eyebrow-row{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}
.eyebrow-rule{display:block;height:1px;width:2.5rem;background:var(--primary)}
.hero-title{font-family:var(--font-display);color:#fff;font-size:clamp(3rem,8vw,7rem);line-height:.95;letter-spacing:-.02em}
.hero-title em{font-style:italic;color:var(--primary)}
.hero-lede{margin-top:2rem;max-width:36rem;font-size:1.125rem;line-height:1.65;color:rgba(255,255,255,.75)}
.hero-lede .hl{color:#fff}
.hero-ctas{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-stats{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:28rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.hero-stats .stat{font-family:var(--font-display);color:#fff;font-size:1.5rem;text-transform:none;letter-spacing:-.01em;margin-bottom:.25rem}

.hero-cover{position:relative}
.cover-wrap{position:relative;max-width:24rem;margin-inline:auto}
.cover-glow{position:absolute;inset:-1.5rem;background:rgba(228,87,61,.2);filter:blur(60px)}
.cover-wrap img{position:relative;width:100%;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}

/* ============ AUTHOR ============ */
.author{padding-block:7rem;background:var(--bg)}
@media(min-width:768px){.author{padding-block:10rem}}
.author-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.author-grid{grid-template-columns:5fr 7fr;gap:5rem}}
.frame{position:relative}
.corner{position:absolute;width:6rem;height:6rem}
.corner-tl{top:-1rem;left:-1rem;border-left:1px solid var(--primary);border-top:1px solid var(--primary)}
.corner-br{bottom:-1rem;right:-1rem;border-right:1px solid var(--secondary);border-bottom:1px solid var(--secondary)}
.frame img{position:relative;width:100%;filter:grayscale(20%)}
.author-text h2{margin-top:1rem;font-size:clamp(2rem,3.6vw,3rem);line-height:1.1}
.prose{margin-top:2rem;display:flex;flex-direction:column;gap:1.25rem;color:var(--muted-ink);line-height:1.7}
.meta-row{margin-top:2.5rem;display:flex;align-items:center;gap:1.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-ink)}
.meta-rule{display:block;height:1px;width:3rem;background:rgba(35,31,28,.2)}

/* ============ BOOK ============ */
.book{padding-block:7rem;background:var(--muted)}
@media(min-width:768px){.book{padding-block:10rem}}
.book-intro{max-width:48rem}
.book-intro h2{margin-top:1rem;font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.05}
.book-intro h2 em{font-style:italic}
.book-intro .lede{margin-top:1.5rem;font-size:1.125rem;color:var(--muted-ink);line-height:1.65}

.beats{margin-top:5rem;display:grid;gap:3rem 4rem}
@media(min-width:768px){.beats{grid-template-columns:1fr 1fr}}
.beat{border-top:1px solid rgba(35,31,28,.15);padding-top:1.5rem}
.beat-head{display:flex;align-items:baseline;gap:1.5rem}
.beat-num{font-family:var(--font-display);font-style:italic;color:var(--primary);font-size:1.875rem}
.beat h3{font-size:1.5rem}
.beat p{margin-top:1rem;color:var(--muted-ink);line-height:1.65}

.pull-quote{margin-top:6rem;text-align:center}
.pull-quote p{font-family:var(--font-display);font-style:italic;color:var(--ink);font-size:clamp(1.75rem,4vw,3rem);line-height:1.2;max-width:48rem;margin-inline:auto}

/* ============ THEMES ============ */
.themes{padding-block:7rem;background:var(--noir);color:var(--noir-fg)}
@media(min-width:768px){.themes{padding-block:9rem}}
.themes-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:4rem}
.themes-head h2{margin-top:1rem;color:#fff;font-size:clamp(2rem,3.6vw,3rem)}
.themes-head p{max-width:28rem;color:rgba(255,255,255,.6)}
.themes-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.1)}
@media(min-width:640px){.themes-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.themes-grid{grid-template-columns:repeat(4,1fr)}}
.theme{background:var(--noir);padding:2rem;transition:background-color .5s}
.theme-num{font-size:.72rem;letter-spacing:.3em;color:rgba(255,255,255,.4);transition:color .5s}
.theme h3{margin-top:1.5rem;color:#fff;font-size:1.5rem}
.theme p{margin-top:1rem;color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.65;transition:color .5s}
.theme:hover{background:var(--primary)}
.theme:hover .theme-num{color:rgba(255,255,255,.7)}
.theme:hover p{color:rgba(255,255,255,.85)}

/* ============ TESTIMONIALS ============ */
.testimonials{padding-block:7rem;background:var(--bg)}
@media(min-width:768px){.testimonials{padding-block:9rem}}
.t-head{max-width:36rem}
.t-head h2{margin-top:1rem;font-size:clamp(2rem,3.6vw,3rem)}
.quotes{margin-top:4rem;display:grid;gap:2.5rem}
@media(min-width:768px){.quotes{grid-template-columns:1fr 1fr}}
.quotes figure{margin:0;border-left:2px solid var(--primary);padding:.5rem 0 .5rem 2rem}
.quotes blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.35;color:var(--ink)}
.quotes figcaption{margin-top:1.5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted-ink)}
.quotes figcaption span{color:var(--ink)}

/* ============ PREORDER ============ */
.preorder{padding-block:7rem;background:var(--muted)}
@media(min-width:768px){.preorder{padding-block:9rem}}
.preorder-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.preorder-grid{grid-template-columns:5fr 7fr}}
.preorder-cover img{width:100%;max-width:24rem;margin-inline:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.preorder-text h2{margin-top:1rem;font-size:clamp(2rem,3.6vw,3rem);line-height:1.05}
.preorder-text h2 em.primary{font-style:italic;color:var(--primary)}
.preorder-text .lede{margin-top:1.5rem;color:var(--muted-ink);line-height:1.65;max-width:36rem}
.preorder-form{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem;max-width:36rem}
@media(min-width:640px){.preorder-form{flex-direction:row}}
.preorder-form input{flex:1;background:var(--bg);border:1px solid rgba(35,31,28,.2);padding:1rem 1.25rem;font-size:.9rem;font-family:inherit;color:inherit}
.preorder-form input:focus{outline:none;border-color:var(--primary)}
.preorder-form button{background:var(--ink);color:#fff;padding:1rem 1.75rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;transition:background-color .25s}
.preorder-form button:hover{background:var(--primary)}
.retailers{margin-top:2.5rem}
.retailers-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted-ink);margin-bottom:1rem}
.retailers-row{display:flex;flex-wrap:wrap;gap:.75rem}
.retailers-row a{border:1px solid rgba(35,31,28,.2);padding:.75rem 1.25rem;font-size:.9rem;transition:border-color .2s,color .2s}
.retailers-row a:hover{border-color:var(--primary);color:var(--primary)}

/* ============ FINAL CTA ============ */
.final-cta{position:relative;overflow:hidden;background:var(--noir);color:#fff;padding-block:8rem}
@media(min-width:768px){.final-cta{padding-block:11rem}}
.cta-glow{position:absolute;inset:0;opacity:.3;background:radial-gradient(50% 50% at 50% 50%, rgba(228,87,61,.6), transparent 70%)}
.cta-inner{position:relative;text-align:center}
.cta-inner h2{font-family:var(--font-display);color:#fff;font-size:clamp(2.5rem,7vw,6rem);line-height:.95}
.cta-inner h2 em{font-style:italic;color:var(--primary)}
.cta-inner .btn{margin-top:3rem}
.cta-inner .btn-primary:hover{background:#fff;color:var(--noir)}

/* ============ FOOTER ============ */
.footer{background:var(--bg);border-top:1px solid var(--border-soft);padding-block:3.5rem}
.footer-grid{display:grid;gap:2rem;align-items:flex-start}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.brand-foot{font-family:var(--font-display);font-size:1.25rem;color:var(--ink)}
.footer p{margin-top:.75rem;font-size:.9rem;color:var(--muted-ink);max-width:20rem}
.foot-nav,.foot-social{display:flex;gap:2rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted-ink)}
@media(min-width:768px){.foot-nav{justify-content:center}.foot-social{justify-content:flex-end}}
.foot-nav a:hover,.foot-social a:hover{color:var(--primary)}
.foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.72rem;color:var(--muted-ink)}

/* ============ ANIMATIONS ============ */
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-up{animation:fade-up .9s ease-out both}
@media (prefers-reduced-motion: reduce){.fade-up{animation:none}html{scroll-behavior:auto}}