/*
Theme Name: Before the Wave
Theme URI: https://marksmillie.co.uk
Author: Mark Smillie
Author URI: https://marksmillie.co.uk
Description: Single-page book landing page for "Before the Wave" by Mark Smillie. Every element on the homepage is editable from Appearance → Customize. Dark, editorial branding with an embedded trailer, Amazon reviews, and a single Amazon buy CTA.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: before-the-wave
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Source Serif 4', Georgia, serif; color: #dcd8d0; background: #0b0e12; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: #d4a574; text-decoration: none; }
a:hover { opacity: 0.85; }
.sans { font-family: 'Source Sans 3', sans-serif; }

.btw-btn {
  display: inline-block; padding: 20px 52px; background: #d4a574; color: #0b0e12;
  border-radius: 3px; font-family: 'Source Sans 3', sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.5px;
}

/* HERO */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b0e12 0%, #101721 60%, #0d1219 100%); }
.hero .glow1 { position: absolute; top: -30%; right: -15%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(58,90,120,0.25) 0%, transparent 65%); border-radius: 50%; }
.hero .glow2 { position: absolute; bottom: -40%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,165,116,0.06) 0%, transparent 70%); border-radius: 50%; }
.hero .wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 90px 40px 100px; display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
.hero .cover-persp { perspective: 1200px; }
.hero .cover { transform: rotateY(6deg); box-shadow: -30px 40px 80px rgba(0,0,0,0.7), 0 0 100px rgba(58,90,120,0.2); }
.hero h1 { font-size: 68px; font-weight: 700; line-height: 1.05; margin-bottom: 28px; color: #f5f2ec; letter-spacing: -2px; }
.hero .sub { font-size: 21px; color: #b0aca3; margin-bottom: 28px; line-height: 1.7; }
.hero .body { font-size: 18px; color: #a09c93; margin-bottom: 40px; line-height: 1.9; max-width: 540px; }
.hero .cta-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.hero .fineprint { font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: #7a766e; }

/* VIDEO */
.video { background: #0b0e12; padding: 90px 40px; border-top: 1px solid rgba(212,165,116,0.12); border-bottom: 1px solid rgba(212,165,116,0.12); }
.video .wrap { max-width: 900px; margin: 0 auto; text-align: center; }
.video .eyebrow { font-family: 'Source Sans 3', sans-serif; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #d4a574; margin-bottom: 32px; font-weight: 600; }
.video .frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
.video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* GENERIC LIGHT / DARK SECTIONS */
.sec { padding: 110px 40px; }
.sec-light { background: #f5f2ec; color: #1a1d22; }
.eyebrow-gold { font-family: 'Source Sans 3', sans-serif; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #d4a574; font-weight: 600; }
.eyebrow-bronze { font-family: 'Source Sans 3', sans-serif; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #a4763c; font-weight: 600; }

.truth .wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.truth h2 { font-size: 46px; font-weight: 700; line-height: 1.15; margin: 28px 0 40px; letter-spacing: -1px; color: #12151a; }
.truth p { font-size: 21px; color: #4a4d52; margin-bottom: 20px; line-height: 1.8; }
.truth p.bold { color: #12151a; font-weight: 600; margin-bottom: 0; }

.notbook { background: #0b0e12; border-bottom: 1px solid rgba(212,165,116,0.15); }
.notbook .wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.notbook h2 { font-size: 42px; font-weight: 400; line-height: 1.35; color: #f5f2ec; letter-spacing: -0.5px; }
.notbook h2 em { color: #d4a574; }
.notbook h2 .hl { color: #d4a574; font-weight: 700; }
.notbook p { font-size: 19px; color: #a09c93; margin-top: 40px; line-height: 1.9; }

.denial { position: relative; overflow: hidden; background: linear-gradient(180deg, #060809 0%, #0d1420 55%, #0b0e12 100%); }
.denial .glow { position: absolute; bottom: -50%; left: 20%; width: 900px; height: 700px; background: radial-gradient(ellipse, rgba(40,65,95,0.3) 0%, transparent 65%); }
.denial .wrap { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.denial h2 { font-size: 50px; font-weight: 700; line-height: 1.15; margin: 36px 0 48px; color: #f5f2ec; letter-spacing: -1.5px; }
.denial h2 .hl { color: #d4a574; }
.denial p { font-size: 19px; color: #a09c93; margin-bottom: 24px; line-height: 1.9; text-align: left; }
.denial p strong { color: #f5f2ec; }
.denial .close { font-size: 24px; color: #d4a574; line-height: 1.6; font-style: italic; text-align: center; }

.learn .wrap { max-width: 820px; margin: 0 auto; }
.learn .head { text-align: center; margin-bottom: 64px; }
.learn h2 { font-size: 44px; font-weight: 700; letter-spacing: -1px; color: #12151a; margin-top: 20px; }
.learn .row { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid #ddd8cc; align-items: baseline; }
.learn .num { font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 700; color: #a4763c; min-width: 28px; }
.learn .row p { font-size: 19px; color: #2a2d32; line-height: 1.7; }
.learn .foot { text-align: center; font-size: 18px; color: #4a4d52; margin-top: 56px; font-style: italic; line-height: 1.8; }

.author { background: linear-gradient(180deg, #0b0e12 0%, #101721 100%); }
.author .wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: start; }
.author h2 { font-size: 40px; font-weight: 700; line-height: 1.2; margin: 28px 0 36px; color: #f5f2ec; letter-spacing: -1px; }
.author p { font-size: 17px; color: #b0aca3; margin-bottom: 22px; line-height: 1.9; }
.author blockquote { border-left: 2px solid #d4a574; padding: 8px 0 8px 28px; margin: 36px 0; font-size: 21px; font-style: italic; color: #dcd8d0; line-height: 1.7; }
.author .quote-gold { font-size: 17px; color: #d4a574; line-height: 1.9; font-style: italic; }
.author .name { font-family: 'Source Sans 3', sans-serif; font-size: 15px; color: #f5f2ec; margin-top: 20px; font-weight: 600; }
.author .bio { font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: #7a766e; line-height: 1.7; }

.reviews { background: #0b0e12; border-bottom: 1px solid rgba(212,165,116,0.15); }
.reviews .wrap { max-width: 1100px; margin: 0 auto; }
.reviews .eyebrow-gold { display: block; margin-bottom: 60px; text-align: center; }
.reviews .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.reviews .card { padding: 40px 36px; background: rgba(245,242,236,0.03); border: 1px solid rgba(212,165,116,0.15); }
.reviews .card .mark { font-size: 30px; color: #d4a574; line-height: 1; margin-bottom: 20px; }
.reviews .card .text { font-size: 17px; color: #c8c4bb; margin-bottom: 28px; line-height: 1.8; font-style: italic; }
.reviews .card .author { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 700; color: #f5f2ec; background: none; }
.reviews .card .role { font-family: 'Source Sans 3', sans-serif; font-size: 13px; color: #7a766e; }

.bonus { background: linear-gradient(135deg, #14100a 0%, #1c1610 100%); border-bottom: 1px solid rgba(212,165,116,0.2); }
.bonus .wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.bonus h2 { font-size: 44px; font-weight: 700; margin: 24px 0 28px; color: #f5f2ec; letter-spacing: -1px; }
.bonus p { font-size: 18px; color: #b0aca3; margin-bottom: 20px; line-height: 1.9; }
.bonus .code { font-size: 22px; color: #d4a574; font-style: italic; margin-top: 20px; }

.finalcta { background: #0b0e12; padding: 110px 40px 90px; }
.finalcta .wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.finalcta h2 { font-size: 44px; font-weight: 700; margin-bottom: 32px; color: #f5f2ec; letter-spacing: -1px; line-height: 1.2; }
.finalcta p { font-size: 18px; color: #b0aca3; margin-bottom: 16px; line-height: 1.9; }
.finalcta .sig { font-family: 'Source Sans 3', sans-serif; font-size: 15px; color: #d4a574; margin-bottom: 56px; font-weight: 600; }
.finalcta .fineprint { font-family: 'Source Sans 3', sans-serif; font-size: 15px; color: #7a766e; font-style: italic; margin-top: 20px; }

.site-footer { background: #080a0d; border-top: 1px solid rgba(212,165,116,0.15); padding: 56px 40px; }
.site-footer .row { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; font-family: 'Source Sans 3', sans-serif; }
.site-footer .copy { color: #6a665e; font-size: 14px; }
.site-footer .links { display: flex; gap: 28px; font-size: 14px; }
.site-footer .links a { color: #a09c93; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  .hero .cover-persp { max-width: 300px; margin: 0 auto; }
  .author .wrap { grid-template-columns: 1fr; gap: 48px; }
  .reviews .grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
}