/* Layout: a road you read top to bottom. Sunset hero with the cover, guardrail dividers between sections, the five stages as mile markers. */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --fg:#1b2230;
  --muted:#566173;
  --line:#d8dee8;
  --sky:#1d4f9a;
  --sky-soft:#e6eefa;
  --sunset:#e7a03a;
  --sunset-ink:#3a2405;
  --steel:#9aa6b6;
  --display:"Cormorant Garamond","EB Garamond",Garamond,"Times New Roman",serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1520;--surface:#162031;--fg:#e8edf4;--muted:#9ba7b9;--line:#29364a;
  --sky:#86aef0;--sky-soft:#1a2a44;--sunset:#f0b157;--sunset-ink:#2b1a02;--steel:#6e7c90;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1520;--surface:#162031;--fg:#e8edf4;--muted:#9ba7b9;--line:#29364a;
  --sky:#86aef0;--sky-soft:#1a2a44;--sunset:#f0b157;--sunset-ink:#2b1a02;--steel:#6e7c90;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
section{padding-block:clamp(56px,8vw,96px)}
:focus-visible{outline:3px solid var(--sunset);outline-offset:3px;border-radius:4px}

/* Buttons */
.buy{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.btn small{font-weight:500;opacity:.8}
.btn-primary{background:var(--sunset);color:var(--sunset-ink);box-shadow:0 6px 18px -8px rgba(231,160,58,.8)}
.btn-ghost{border:1.5px solid currentColor}
.btn:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* Hero: always dusk, both themes */
.hero{position:relative;color:#f4f6fb;background:#16233a;overflow:hidden;padding-block:clamp(40px,7vw,88px)}
.hero::before{content:"";position:absolute;inset:0;background:url("img/road.jpg") center 62%/cover no-repeat;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,26,48,.95) 0%,rgba(14,26,48,.82) 45%,rgba(14,26,48,.35) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero .eyebrow{color:#f3c27a}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:600;margin-top:14px}
.hero h1 em{font-style:italic;color:#f3c27a}
.hero .lede{margin-top:20px;max-width:34em;font-size:1.12rem;color:#d9e0ec}
.hero .buy{margin-top:30px}
.hero .btn-ghost{color:#f4f6fb}
.hero .note{margin-top:14px;font-size:.88rem;color:#aab6c8}
.cover{justify-self:center;width:min(100%,330px)}
.cover img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px;box-shadow:-2px 0 0 rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.75),0 10px 20px -10px rgba(0,0,0,.6);transform:rotate(1.5deg)}

/* Guardrail divider */
.rail{position:relative;height:30px;margin:0 auto;max-width:1080px}
.rail::before{content:"";position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));top:6px;height:9px;border-radius:5px;background:linear-gradient(180deg,var(--steel) 0%,var(--line) 45%,var(--steel) 100%)}
.rail::after{content:"";position:absolute;left:max(36px,env(safe-area-inset-left,0px));right:max(36px,env(safe-area-inset-right,0px));top:15px;height:15px;background:repeating-linear-gradient(90deg,var(--steel) 0 7px,transparent 7px 120px)}

/* Two fears */
.fears{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.fears h2{font-size:clamp(2rem,4vw,3rem)}
.fears .body{display:grid;gap:16px;color:var(--fg);max-width:36em}
.fears .body p:first-child{font-size:1.2rem}
.fears .scripture{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--sky);border-left:3px solid var(--sunset);padding-left:16px;margin-top:6px}
.fears .scripture cite{display:block;font-family:var(--body);font-style:normal;font-size:.85rem;color:var(--muted);margin-top:4px}

/* Stages as mile markers */
.stages-head{display:grid;gap:12px;max-width:40em}
.stages-head h2{font-size:clamp(2rem,4vw,3rem)}
.stages-head p{color:var(--muted)}
.road{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--sunset) 0 18px,transparent 18px 32px)}
.stage{position:relative;display:grid;gap:10px;align-content:start}
.marker{position:relative;z-index:1;width:52px;height:68px;border-radius:6px;background:var(--sky);color:var(--bg);display:grid;place-items:center;text-align:center;line-height:1;font-weight:700;box-shadow:0 0 0 4px var(--bg)}
.marker span{display:block;font-size:.58rem;letter-spacing:.12em}
.marker b{display:block;font-size:1.5rem;margin-top:2px;font-variant-numeric:tabular-nums}
.stage h3{font-size:1.55rem;margin-top:6px}
.stage .ages{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
.stage p{font-size:.98rem;color:var(--muted)}

/* Inside the book */
.inside{background:var(--surface);border-block:1px solid var(--line)}
.inside .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.inside h2{font-size:clamp(2rem,4vw,3rem)}
.inside .intro{margin-top:14px;color:var(--muted);max-width:30em}
.features{list-style:none;margin:0;padding:0;display:grid;gap:0}
.features li{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.features li:last-child{border-bottom:1px solid var(--line)}
.features b{font-family:var(--display);font-size:1.35rem;font-weight:600}
.features span{color:var(--muted)}

/* Sayings */
.sayings h2{font-size:clamp(2rem,4vw,3rem);max-width:16em}
.sayings .intro{margin-top:12px;color:var(--muted);max-width:38em}
.quotes{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.quotes li{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;line-height:1.3;padding:18px 0 18px 30px;border-top:1px solid var(--line);position:relative}
.quotes li::before{content:"\201C";position:absolute;left:0;top:10px;font-size:2.4rem;color:var(--sunset);line-height:1}

/* Authors */
.authors{background:var(--sky-soft)}
.authors .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start}
.authors figure{margin:0}
.authors img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;max-width:100%}
.authors figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
.authors h2{font-size:clamp(2rem,4vw,3rem)}
.authors .bio{display:grid;gap:14px;margin-top:16px;max-width:36em}

/* Closing */
.closing{text-align:left}
.closing .box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.closing img{width:150px;height:auto;border-radius:2px 6px 6px 2px;box-shadow:0 18px 36px -16px rgba(0,0,0,.5);max-width:100%}
.closing h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.closing p{color:var(--muted);margin-top:10px;max-width:34em}
.closing .buy{margin-top:22px}
.closing .btn-ghost{color:var(--sky)}

footer{border-top:1px solid var(--line);padding-block:28px;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--sky);text-underline-offset:3px}

@media (max-width:860px){
  .hero .wrap,.fears,.inside .grid,.authors .grid{grid-template-columns:minmax(0,1fr)}
  .cover{width:min(62%,260px);order:-1}
  .road{grid-template-columns:minmax(0,1fr);gap:26px}
  .road::before{left:25px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--sunset) 0 18px,transparent 18px 32px)}
  .stage{grid-template-columns:52px minmax(0,1fr);column-gap:18px}
  .stage .marker{grid-row:span 3}
  .stage h3{margin-top:0}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .authors figure{max-width:420px}
}
@media (max-width:520px){
  .closing .box{grid-template-columns:minmax(0,1fr)}
  .closing img{width:120px}
  .btn{width:100%;justify-content:center}
}

/* Contact + thanks pages */
.topbar{background:#16233a;color:#f4f6fb;padding-block:16px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.topbar .brand{font-family:var(--display);font-size:1.45rem;font-weight:600;text-decoration:none;letter-spacing:.02em}
.topbar nav{display:flex;gap:18px;font-size:.95rem}
.topbar nav a{text-decoration:none;color:#d9e0ec}
.topbar nav a:hover{color:#f3c27a}
.contact .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-top:12px}
.contact .intro{margin-top:16px;color:var(--muted);max-width:30em;display:grid;gap:12px}
.form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{font:inherit;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;width:100%}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start;border:0;cursor:pointer}
.form .fine{font-size:.85rem;color:var(--muted)}
.form .status{font-size:.92rem;color:var(--sky);font-weight:600}
.thanks{padding-block:clamp(72px,12vw,140px)}
.thanks h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.thanks p{margin-top:16px;color:var(--muted);max-width:34em}
.thanks .buy{margin-top:28px}
.thanks .btn-ghost{color:var(--sky)}
@media (max-width:860px){.contact .grid{grid-template-columns:minmax(0,1fr)}}