/* ============================================================
   THE NARROWING — Lost Heritage · Kenneth Hunt
   Premium one-page author website stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
    --ink:        #141a26;
    --ink-2:      #1c2433;
    --ink-3:      #232d40;
    --paper:      #f4f1ea;
    --paper-2:    #ebe6da;
    --paper-3:    #e2dccc;
    --ember:      #e08a2e;
    --ember-2:    #c2571a;
    --ember-soft: #f2b56b;
    --text:       #2a3140;
    --muted:      #6f6a5e;
    --muted-l:    #a9a495;
    --line:       rgba(20,26,38,.12);
    --line-l:     rgba(244,241,234,.14);
    --shadow-lg:  0 40px 80px -24px rgba(20,26,38,.35);
    --shadow-md:  0 20px 45px -18px rgba(20,26,38,.28);
    --ease:       cubic-bezier(.22,.61,.36,1);
    --font-display:'Anton', 'Arial Narrow', sans-serif;
    --font-body:  'Jost', 'Segoe UI', sans-serif;
    --font-quote: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--font-body);
    font-weight:400;
    color:var(--text);
    background:var(--paper);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; }

.container{ width:min(1200px, 92%); margin-inline:auto; }
.section{ position:relative; padding:clamp(5rem, 9vw, 8.5rem) 0; }
.align-center{ text-align:center; }

::selection{ background:var(--ember); color:#fff; }

/* ---------- Typography ---------- */
.eyebrow{
    display:inline-flex; align-items:center; gap:.75rem;
    font-size:.8rem; font-weight:600; letter-spacing:.35em; text-transform:uppercase;
    color:var(--ember-2); margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:2.6rem; height:2px; background:var(--ember); }
.eyebrow--light{ color:var(--ember-soft); }
.eyebrow--dark{ color:var(--ink); }
.eyebrow--dark::before{ background:var(--ink); }

.section-title{
    font-family:var(--font-display);
    font-size:clamp(2.4rem, 5vw, 3.9rem);
    line-height:1.04;
    letter-spacing:.01em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:1.6rem;
}
.section-title em{
    font-family:var(--font-quote);
    font-style:italic;
    text-transform:none;
    font-size:.92em;
    color:var(--ember-2);
    letter-spacing:0;
}
.section-title--light{ color:var(--paper); }
.section-title--light em{ color:var(--ember-soft); }

.lead{ font-size:1.12rem; font-weight:500; color:var(--ink); margin-bottom:1.1rem; }
.lead strong, p strong{ color:var(--ember-2); font-weight:600; }

/* ---------- Buttons ---------- */
.btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:1rem 2.2rem;
    font-weight:600; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase;
    border-radius:2px; overflow:hidden; isolation:isolate;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
    will-change:transform;
}
.btn::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(120deg, var(--ember-2), var(--ember) 55%, var(--ember-soft));
    transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn--ember{ background:linear-gradient(120deg, var(--ember-2), var(--ember)); color:#fff; box-shadow:0 14px 30px -10px rgba(194,87,26,.55); }
.btn--ember::after{ background:var(--ink); }
.btn--ink{ background:var(--ink); color:var(--paper); box-shadow:0 14px 30px -12px rgba(20,26,38,.5); }
.btn--ink::after{ background:linear-gradient(120deg, var(--ember-2), var(--ember)); }
.btn--ghost{ border:1px solid rgba(20,26,38,.35); color:var(--ink); background:transparent; }
.btn--ghost::after{ background:var(--ink); }
.btn--ghost:hover{ color:var(--paper); border-color:var(--ink); }
.btn--ghost.btn--dark{ border-color:rgba(244,241,234,.4); color:var(--paper); }
.btn--ghost.btn--dark::after{ background:var(--paper); }
.btn--ghost.btn--dark:hover{ color:var(--ink); }
/* light ghost — for dark hero background */
.btn--ghost.btn--light{ border-color:rgba(244,241,234,.55); color:#fff; }
.btn--ghost.btn--light::after{ background:var(--paper); }
.btn--ghost.btn--light:hover{ color:var(--ink); border-color:var(--paper); }
.btn--sm{ padding:.7rem 1.5rem; font-size:.8rem; }
.btn--lg{ padding:1.2rem 3rem; font-size:1rem; }
.btn--full{ width:100%; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(20,26,38,.45); }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:#fff; }
.btn--ghost.btn--dark:hover{ color:var(--ink); }
.btn .btn__arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(6px); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
    position:fixed; inset:0; z-index:1000;
    background:var(--ink);
    display:grid; place-items:center;
}
.preloader__inner{ text-align:center; position:relative; z-index:4; padding-bottom:2rem; }
.preloader__orbit{ position:relative; width:92px; height:92px; margin:0 auto 1.6rem; }
.preloader__earth{ width:52px; height:52px; position:absolute; inset:0; margin:auto; }
.preloader__ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(244,241,234,.15);
    border-top-color:var(--ember);
    animation:spin 1.2s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.preloader__title{
    font-family:var(--font-display);
    font-size:clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing:.28em; text-indent:.28em;
    color:var(--paper); text-transform:uppercase;
}
.preloader__sub{
    font-size:.78rem; letter-spacing:.4em; text-transform:uppercase;
    color:var(--muted-l); margin:.5rem 0 1.8rem;
}
.preloader__bar{
    width:min(280px, 60vw); height:2px; margin:0 auto;
    background:rgba(244,241,234,.12); overflow:hidden; border-radius:2px;
}
.preloader__bar span{ display:block; height:100%; width:0%; background:var(--ember); }
.preloader__count{
    margin-top:.8rem; font-size:.75rem; letter-spacing:.3em; color:var(--ember-soft);
}
.preloader__curtain{
    position:absolute; left:0; width:100%; height:50.5%; background:var(--ink); z-index:3;
}
.preloader__curtain--top{ top:0; }
.preloader__curtain--bottom{ bottom:0; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
    position:fixed; top:0; left:0; right:0; z-index:900;
    padding:1.4rem 0;
    transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
/* readable gradient scrim over light hero art (fades out once scrolled) */
.site-header::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(to bottom, rgba(14,19,31,.88) 0%, rgba(14,19,31,.55) 55%, rgba(14,19,31,0) 100%);
    opacity:1; transition:opacity .4s var(--ease);
    pointer-events:none;
}
.site-header__inner{ position:relative; display:flex; align-items:center; gap:2rem; }
.site-header.is-scrolled{
    padding:.8rem 0;
    background:rgba(20,26,38,.9);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 10px 30px -12px rgba(0,0,0,.4);
}
.site-header.is-scrolled::before{ opacity:0; }
/* keep header (and its hamburger/close button) above the mobile menu overlay */
body.menu-open .site-header{ z-index:960; }

.brand{ display:inline-flex; align-items:center; gap:.75rem; }
.brand__mark{ width:38px; height:38px; object-fit:contain; transition:transform .6s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(-14deg) scale(1.08); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
    font-family:var(--font-display); font-size:1.05rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--paper);
}
.brand__role{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ember-soft); }
.brand--light .brand__name{ color:var(--paper); }

.nav{ margin-left:auto; }
.nav__list{ display:flex; gap:2rem; }
.nav__link{
    position:relative; font-size:.86rem; font-weight:500; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(244,241,234,.75); padding:.4rem 0;
    transition:color .3s;
}
.nav__link::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
    background:var(--ember); transform:scaleX(0); transform-origin:right;
    transition:transform .4s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:#fff; }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
    display:none; flex-direction:column; gap:6px; padding:.5rem; z-index:960;
    margin-left:auto;
}
.nav-toggle span{
    width:26px; height:2px; background:#fff; border-radius:2px;
    transition:transform .35s var(--ease), opacity .3s;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:940; visibility:hidden; }
.mobile-menu__bg{
    position:absolute; inset:0; background:var(--ink);
    clip-path:circle(0% at calc(100% - 3rem) 3rem);
    transition:clip-path .65s var(--ease);
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu.is-open .mobile-menu__bg{ clip-path:circle(150% at calc(100% - 3rem) 3rem); }
.mobile-menu__close{
    position:absolute; top:1rem; right:1.2rem; z-index:3;
    font-size:2.6rem; line-height:1; color:var(--paper);
    padding:.4rem .8rem; border-radius:4px;
    transition:color .3s, transform .3s var(--ease);
}
.mobile-menu__close:hover{ color:var(--ember-soft); transform:rotate(90deg); }
.mobile-menu__nav{
    position:relative; z-index:2; height:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2.4rem;
    padding:2rem; opacity:0; transform:translateY(24px);
    transition:opacity .4s .25s, transform .4s .25s var(--ease);
}
.mobile-menu.is-open .mobile-menu__nav{ opacity:1; transform:none; }
.mobile-menu__link{
    display:flex; align-items:baseline; gap:1rem;
    font-family:var(--font-display); font-size:clamp(1.7rem, 7vw, 2.4rem);
    text-transform:uppercase; letter-spacing:.06em; color:var(--paper);
    transition:color .3s;
}
.mobile-menu__link em{
    font-family:var(--font-body); font-style:normal; font-size:.8rem;
    color:var(--ember); letter-spacing:.2em;
}
.mobile-menu__link:hover{ color:var(--ember-soft); }
.mobile-menu__astro{
    position:absolute; right:-40px; bottom:-30px; width:min(320px, 55vw); opacity:.12;
    pointer-events:none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    position:relative; min-height:100svh;
    display:flex; align-items:flex-end;
    overflow:hidden; background:var(--ink);
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg-img{
    width:100%; height:100%; object-fit:cover; object-position:center 68%;
    transform:scale(1.18); will-change:transform;
}
.hero__veil{
    position:absolute; inset:0;
    background:
        /* strong cinematic dark behind the text block (bottom-left) */
        linear-gradient(97deg, rgba(15,20,32,.82) 0%, rgba(15,20,32,.55) 34%, rgba(15,20,32,.18) 58%, rgba(15,20,32,0) 74%),
        /* deep base so the title pops off the light moon */
        linear-gradient(to top, rgba(15,20,32,.9) 0%, rgba(15,20,32,.45) 26%, rgba(15,20,32,.08) 48%, rgba(15,20,32,0) 64%),
        radial-gradient(120% 90% at 50% 110%, rgba(15,20,32,.55), transparent 60%);
}
.hero__earth{
    position:absolute; top:12%; right:7%; width:clamp(90px, 11vw, 170px);
    opacity:.95; filter:drop-shadow(0 24px 45px rgba(0,0,0,.45));
    will-change:transform;
}
.hero__astro{
    position:absolute; top:16%; left:4.5%; width:clamp(110px, 13vw, 210px);
    opacity:.95;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
    will-change:transform;
}
.hero__content{ position:relative; z-index:2; padding-bottom:clamp(6rem, 12vh, 9.5rem); }
.hero__kicker{
    font-size:.85rem; letter-spacing:.42em; text-transform:uppercase;
    color:rgba(255,250,240,.95); margin-bottom:1.2rem;
    text-shadow:0 2px 14px rgba(0,0,0,.6);
    opacity:0;
}
.hero__kicker span{ color:var(--ember-soft); font-weight:600; text-shadow:0 2px 14px rgba(0,0,0,.65); }
.hero__title{
    font-family:var(--font-display);
    font-size:clamp(3.4rem, 11vw, 8.6rem);
    line-height:.96; text-transform:uppercase; letter-spacing:.015em;
    color:#fff;
    text-shadow:
        0 4px 22px rgba(0,0,0,.55),
        0 2px 6px rgba(0,0,0,.4),
        0 30px 70px rgba(0,0,0,.45);
    margin-left:-.04em;
}
.hero__title .char{ display:inline-block; will-change:transform; }
.hero__sub{
    font-family:var(--font-body);
    font-size:clamp(.95rem, 2vw, 1.35rem); font-weight:500;
    letter-spacing:.65em; text-indent:.65em; text-transform:uppercase;
    color:var(--ember-soft); margin-top:1rem;
    text-shadow:0 2px 16px rgba(0,0,0,.65);
    opacity:0;
}
.hero__tagline{
    font-family:var(--font-quote); font-style:italic;
    font-size:clamp(1.05rem, 2vw, 1.35rem); color:rgba(255,250,240,.95);
    text-shadow:0 2px 12px rgba(0,0,0,.6);
    margin:1.4rem 0 2.2rem; max-width:34rem;
    opacity:0;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; opacity:0; }

.hero__scroll{
    position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:2;
}
.hero__scroll-track{
    width:24px; height:40px; border:1.5px solid rgba(244,241,234,.5); border-radius:20px;
    display:flex; justify-content:center; padding-top:7px;
}
.hero__scroll-dot{
    width:4px; height:8px; border-radius:4px; background:var(--ember-soft);
    animation:drip 1.8s var(--ease) infinite;
}
@keyframes drip{
    0%{ transform:translateY(0); opacity:1; }
    70%{ transform:translateY(14px); opacity:0; }
    100%{ transform:translateY(0); opacity:0; }
}
.hero__scroll-label{
    font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(244,241,234,.6);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
    background:var(--ink); color:var(--paper);
    border-block:1px solid rgba(244,241,234,.08);
    overflow:hidden; padding:1.1rem 0;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__group{ display:flex; align-items:center; flex-shrink:0; }
.marquee__group span{
    font-family:var(--font-display); font-size:1.05rem; letter-spacing:.22em;
    text-transform:uppercase; white-space:nowrap; padding:0 1.6rem; color:rgba(244,241,234,.9);
}
.marquee__group i{ color:var(--ember); font-style:normal; font-size:.7rem; }

/* ============================================================
   ABOUT THE BOOK
   ============================================================ */
.about-book{ background:var(--paper); overflow:hidden; }
.about-book__blob{
    position:absolute; top:-10%; left:-15%; width:55vw; height:55vw; max-width:780px; max-height:780px;
    background:radial-gradient(circle at 35% 40%, rgba(224,138,46,.16), rgba(224,138,46,0) 65%);
    filter:blur(10px); pointer-events:none;
}
.about-book__astro{
    position:absolute; right:-70px; bottom:6%; width:min(300px, 32vw);
    opacity:.6; pointer-events:none;
    filter:drop-shadow(0 24px 30px rgba(20,26,38,.18));
}
.about-book__grid{
    display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
    gap:clamp(3rem, 7vw, 6.5rem); align-items:center;
}

/* 3D flip book */
.book-col{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; perspective:1600px; }
.book-scene{ position:relative; width:min(340px, 78vw); transform-style:preserve-3d; will-change:transform; }
.book{
    position:relative; width:100%; aspect-ratio:2/3;
    transform-style:preserve-3d;
    transform:rotateY(-8deg);
    transition:transform .9s var(--ease);
}
.book__face{
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:3px 8px 8px 3px; overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.book__face img{ width:100%; height:100%; object-fit:cover; }
.book__face--back{ transform:rotateY(180deg); }
.book__pages{
    position:absolute; top:1.5%; bottom:1.5%; left:-2.2%; width:2.4%;
    transform:translateZ(-1px);
    background:repeating-linear-gradient(to right, #efece4 0 2px, #d9d4c6 2px 3px);
    border-radius:3px 0 0 3px;
    box-shadow:inset -4px 0 8px rgba(20,26,38,.25);
}
.book__shadow{
    width:70%; height:34px; margin:-14px auto 0;
    background:radial-gradient(50% 100% at 50% 0%, rgba(20,26,38,.4), transparent 70%);
    filter:blur(6px);
}

/* copy side */
.pull-quote{
    font-family:var(--font-quote); font-style:italic;
    font-size:clamp(1.25rem, 2.2vw, 1.55rem); line-height:1.5;
    color:var(--ink);
    border-left:3px solid var(--ember);
    padding:.4rem 0 .4rem 1.4rem;
    margin:1.8rem 0;
}
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 2.2rem; }
.chip{
    font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    padding:.5rem 1.1rem; border:1px solid var(--line); border-radius:100px;
    color:var(--muted); background:rgba(255,255,255,.5);
    transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--ember); color:var(--ember-2); transform:translateY(-2px); }

/* ============================================================
   ABOUT THE AUTHOR
   ============================================================ */
.about-author{ background:var(--paper-2); overflow:hidden; }
.about-author__earth{
    position:absolute; top:8%; right:-60px; width:min(230px, 24vw); opacity:.9; pointer-events:none;
}
.about-author__grid{
    display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6.5fr);
    gap:clamp(3rem, 7vw, 6.5rem); align-items:center;
}
.portrait-col{ position:relative; display:flex; justify-content:center; }
.portrait{
    position:relative; width:min(400px, 88%); aspect-ratio:3/3.9;
}
.portrait::before{
    content:""; position:absolute; inset:0; transform:translate(16px, 16px);
    border:2px solid var(--ember); border-radius:4px; z-index:0;
}
.portrait img{
    position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
    border-radius:4px; box-shadow:var(--shadow-lg); filter:saturate(1.02);
}
.portrait__badge{
    position:absolute; z-index:2; left:-1.4rem; bottom:2rem;
    background:var(--ink); color:var(--paper);
    font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    padding:.7rem 1.2rem; border-radius:2px; box-shadow:var(--shadow-md);
}
.portrait__astro{
    position:absolute; z-index:2; top:-3.4rem; right:-1.2rem; width:clamp(90px, 10vw, 140px);
    filter:drop-shadow(0 18px 24px rgba(20,26,38,.25));
    pointer-events:none;
}
.signature{
    font-family:var(--font-quote); font-style:italic; font-weight:600;
    font-size:clamp(2rem, 4vw, 2.8rem); color:var(--ink);
    margin:1.6rem 0 2rem;
    transform:rotate(-3deg); display:inline-block;
}
.about-author__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{
    position:relative; overflow:hidden; color:var(--paper);
    background:var(--ink);
}
.testimonials__bg{
    position:absolute; inset:-12% 0;
    background:url('../images/bg-space.jpg') center/cover no-repeat;
    opacity:.5; will-change:transform;
}
.testimonials::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(20,26,38,.92), rgba(20,26,38,.25) 30%, rgba(20,26,38,.25) 70%, rgba(20,26,38,.92));
    pointer-events:none;
}
.testimonials .container{ position:relative; z-index:2; }
.testimonials__grid{
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:1.8rem; margin-top:3.5rem;
}
.t-card{
    position:relative; padding:2.4rem 2.1rem;
    background:rgba(28,36,51,.55);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border:1px solid var(--line-l); border-radius:6px;
    transition:transform .45s var(--ease), border-color .45s, background .45s;
}
.t-card:hover{
    transform:translateY(-10px);
    border-color:rgba(224,138,46,.5);
    background:rgba(28,36,51,.75);
}
.t-card--featured{
    background:linear-gradient(160deg, rgba(194,87,26,.32), rgba(28,36,51,.6) 55%);
    border-color:rgba(242,181,107,.45);
}
.t-card__stars{ color:var(--ember-soft); letter-spacing:.35em; font-size:.95rem; margin-bottom:1.1rem; }
.t-card__quote{
    font-size:1.02rem; line-height:1.75; color:rgba(244,241,234,.92); margin-bottom:1.6rem;
}
.t-card__quote em{ color:var(--ember-soft); font-style:italic; }
.t-card__meta{ display:flex; align-items:center; gap:.9rem; }
.t-card__avatar{
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(244,241,234,.12); border:1px solid var(--line-l);
    font-weight:600; font-size:.85rem; letter-spacing:.05em;
}
.t-card__avatar--ember{ background:var(--ember-2); border-color:transparent; color:#fff; }
.t-card__meta strong{ display:block; font-size:.92rem; letter-spacing:.04em; }
.t-card__meta small{
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-l);
}
.testimonials__cta{
    text-align:center; margin-top:3rem; color:var(--muted-l); font-size:1rem;
}
.testimonials__cta a{ color:var(--ember-soft); font-weight:600; border-bottom:1px solid rgba(242,181,107,.4); transition:color .3s; }
.testimonials__cta a:hover{ color:#fff; }

/* ============================================================
   CTA BAND — Get the Book
   ============================================================ */
.cta-band{
    position:relative; overflow:hidden;
    background:linear-gradient(115deg, #7a3410, var(--ember-2) 45%, #9a4d16);
    padding:clamp(4.5rem, 8vw, 7rem) 0;
}
.cta-band__glow{
    position:absolute; inset:0;
    background:
        radial-gradient(60% 90% at 78% 20%, rgba(242,181,107,.35), transparent 60%),
        radial-gradient(50% 80% at 10% 90%, rgba(20,26,38,.5), transparent 65%);
}
.cta-band__inner{
    position:relative; z-index:2;
    width:min(1760px, 96%); margin-inline:auto;
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:clamp(2rem, 4vw, 5rem);
}
.cta-band__copy{
    text-align:center; justify-self:center; max-width:46rem;
}
.cta-band__book{
    border-radius:4px; will-change:transform;
    box-shadow:0 50px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}
.cta-band__book--front{
    width:clamp(210px, 21vw, 340px);
    justify-self:start; margin-left:clamp(0px, 2vw, 40px);
    transform:rotate(-6deg);
}
.cta-band__book--back{
    width:clamp(185px, 19vw, 305px);
    justify-self:end; margin-right:clamp(0px, 2vw, 40px);
    transform:rotate(6deg);
}
.cta-band .eyebrow{ color:var(--ember-soft); justify-content:center; }
.cta-band .eyebrow::before{ background:var(--ember-soft); }
.cta-band__text{ color:rgba(255,244,232,.88); max-width:34rem; margin:0 auto 2rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--paper); }
.contact__grid{
    display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
    gap:clamp(2.8rem, 6vw, 5.5rem);
    margin-top:3.2rem; align-items:start;
}
.contact__info h3{
    font-family:var(--font-display); font-size:1.35rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink); margin-bottom:1rem;
}
.contact__info > p{ color:var(--muted); margin-bottom:2rem; max-width:30rem; }
.contact__list{ display:flex; flex-direction:column; gap:1.3rem; margin-bottom:2.2rem; }
.contact__list li{ display:flex; align-items:center; gap:1.1rem; }
.contact__ico{
    flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center;
    background:var(--ink); color:var(--ember-soft); border-radius:4px; font-size:1.15rem;
}
.contact__list small{
    display:block; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.contact__list a{ font-weight:600; color:var(--ink); transition:color .3s; }
.contact__list a:hover{ color:var(--ember-2); }
.contact__social{ display:flex; gap:.8rem; }

.social-btn{
    width:42px; height:42px; display:grid; place-items:center;
    border:1px solid var(--line); border-radius:4px; color:var(--ink);
    transition:all .35s var(--ease);
}
.social-btn svg{ width:18px; height:18px; fill:currentColor; }
.social-btn:hover{ background:var(--ink); color:var(--ember-soft); border-color:var(--ink); transform:translateY(-3px); }

/* form */
.contact__form{
    background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:clamp(1.8rem, 4vw, 2.8rem);
    box-shadow:var(--shadow-md);
    display:flex; flex-direction:column; gap:1.5rem;
}
.field{ position:relative; }
.field input, .field textarea{
    width:100%; padding:1.15rem 1.1rem .8rem;
    font:inherit; color:var(--ink);
    background:var(--paper); border:1px solid transparent; border-bottom:2px solid var(--line);
    border-radius:6px 6px 0 0; outline:none; resize:vertical;
    transition:border-color .3s, background .3s;
}
.field input:focus, .field textarea:focus{
    border-bottom-color:var(--ember); background:#fff;
}
.field label{
    position:absolute; left:1.1rem; top:1rem;
    font-size:.92rem; color:var(--muted); pointer-events:none;
    transition:all .25s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
    top:.28rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-2);
}
.contact__form-note{ font-size:.78rem; color:var(--muted); text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    position:relative; overflow:hidden;
    background:var(--ink); color:rgba(244,241,234,.75);
    padding:clamp(4rem, 7vw, 6rem) 0 0;
}
.site-footer__grid{
    display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:clamp(2rem, 5vw, 4rem); padding-bottom:3.5rem;
}
.site-footer__blurb{ margin-top:1.4rem; font-size:.95rem; max-width:22rem; }
.site-footer__heading{
    font-family:var(--font-display); font-size:.95rem; letter-spacing:.24em;
    text-transform:uppercase; color:var(--paper); margin-bottom:1.3rem;
}
.site-footer__links li{ margin-bottom:.7rem; font-size:.95rem; }
.site-footer__links a{ transition:color .3s, padding-left .3s; }
.site-footer__links a:hover{ color:var(--ember-soft); padding-left:6px; }
.site-footer__social{ display:flex; gap:.7rem; margin-bottom:1.2rem; }
.site-footer__social .social-btn{ border-color:var(--line-l); color:rgba(244,241,234,.8); }
.site-footer__social .social-btn:hover{ background:var(--ember-2); color:#fff; border-color:var(--ember-2); }
.site-footer__note{ font-size:.85rem; color:var(--muted-l); }
.site-footer__note a{ color:var(--ember-soft); }
.site-footer__bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
    padding:1.6rem 0; border-top:1px solid var(--line-l);
    font-size:.82rem; color:var(--muted-l); position:relative; z-index:2;
}
.site-footer__tag{ letter-spacing:.24em; text-transform:uppercase; font-size:.7rem; }
.site-footer__earth{
    position:absolute; bottom:-70px; right:-50px; width:min(260px, 30vw); opacity:.14; pointer-events:none;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
    position:fixed; left:50%; bottom:2.2rem; z-index:1100;
    transform:translate(-50%, 140%);
    display:flex; align-items:center; gap:.8rem;
    background:var(--ink); color:var(--paper);
    padding:1rem 1.8rem; border-radius:6px; border-left:4px solid var(--ember);
    box-shadow:var(--shadow-lg);
    transition:transform .5s var(--ease);
}
.toast.is-visible{ transform:translate(-50%, 0); }
.toast__icon{
    display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
    background:var(--ember); color:#fff; font-size:.8rem;
}

/* ============================================================
   REVEAL HELPERS (animated by GSAP)
   ============================================================ */
.reveal{ will-change:transform, opacity; }
[data-split] .word{ display:inline-block; overflow:hidden; vertical-align:top; }
[data-split] .char{ display:inline-block; will-change:transform; }

/* grain overlay for premium texture */
body::before{
    content:""; position:fixed; inset:0; z-index:1500; pointer-events:none;
    opacity:.05; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
    .about-book__grid, .about-author__grid{ gap:3rem; }
    .testimonials__grid{ grid-template-columns:1fr 1fr; }
    .t-card--featured{ grid-column:span 2; }
    .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
    .site-footer__grid .site-footer__col:last-child{ grid-column:1 / -1; }
}

@media (max-width: 920px){
    .nav, .header-cta{ display:none; }
    .nav-toggle{ display:flex; }

    .about-book__grid, .about-author__grid, .contact__grid{ grid-template-columns:1fr; }
    .about-book__grid{ gap:3.5rem; }
    .about-author__grid{ gap:4rem; }
    .about-author__copy{ order:-1; }
    .about-book__astro{ display:none; }

    .cta-band__inner{ grid-template-columns:1fr 1fr; gap:1.6rem 2rem; }
    .cta-band__copy{ grid-column:1 / -1; grid-row:1; }
    .cta-band__book--front{ justify-self:end; width:min(210px, 42vw); }
    .cta-band__book--back{ justify-self:start; width:min(190px, 38vw); }
}

@media (max-width: 640px){
    .testimonials__grid{ grid-template-columns:1fr; }
    .t-card--featured{ grid-column:auto; }
    .site-footer__grid{ grid-template-columns:1fr; gap:2.4rem; }

    .hero__earth{ display:none; }
    .hero__astro{ top:13%; left:3%; width:96px; opacity:.75; }
    .hero__scroll{ display:none; }
    /* vertically centered content — kills the big empty gap above the heading */
    .hero{ align-items:center; }
    .hero__content{ padding-bottom:0; padding-top:4.5rem; }

    .portrait__badge{ left:.8rem; bottom:.8rem; }
    .portrait__astro{ top:-2.2rem; right:0; }

    .book-scene{ width:min(300px, 84vw); }

    .hero__sub{ letter-spacing:.4em; text-indent:.4em; }
}

@media (max-width: 400px){
    .hero__title{ font-size:3rem; }
    .btn{ padding:.9rem 1.6rem; font-size:.85rem; }
}

/* large screens — breathe more */
@media (min-width: 1600px){
    .container{ width:min(1320px, 88%); }
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
        animation-duration:.001s !important;
        animation-iteration-count:1 !important;
        transition-duration:.001s !important;
    }
}