/* ============================================================
   F That — Kevin Butler · KB13
   Shared stylesheet. Self-contained, no external requests.
   Palette + type locked per ~/kb13/brain/brand.md
   ============================================================ */

/* --- Local fonts (self-hosted; graceful fallback if the file
       is missing or the browser can't load it) --- */
@font-face {
  font-family: 'DM Serif Display';
  src: local('DM Serif Display'),
       url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: local('DM Serif Display Italic'),
       url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter'),
       url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:#0b0b0c;
  --bone:#f7f5f1;
  --white:#ffffff;
  --red:#e5322d;
  --gold:#c9a227;
  --goldlt:#e3c25e;
  --dim:#6c6a63;
  --line:#e4ddcf;
  --slate:#1c2230;
  /* graceful fallbacks baked into every stack */
  --serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;
  padding:10px 16px;font-weight:700;z-index:100;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* --- buttons + labels --- */
.btn{
  display:inline-block;background:var(--red);color:#fff;
  padding:16px 30px;border-radius:8px;font-weight:700;font-size:15px;
  letter-spacing:1.2px;text-transform:uppercase;border:none;cursor:pointer;
  font-family:var(--sans);
}
.btn:hover{opacity:.92}
.btn.ghost{background:transparent;border:2px solid var(--red);color:var(--red)}
.btn.gold{background:var(--gold);color:var(--ink)}
.lbl{
  font-family:var(--sans);font-size:12px;letter-spacing:3px;
  text-transform:uppercase;font-weight:700;color:var(--red);
}

/* --- photo placeholder slots (intentionally visible;
       these mark exactly where Kevin's real photos drop in) --- */
.photo{
  position:relative;
  background:
    repeating-linear-gradient(45deg,#14161c,#14161c 14px,#181b22 14px,#181b22 28px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px dashed #3a4152;
}
.photo .ph{
  font-family:var(--sans);color:#7b8398;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;text-align:center;padding:22px;line-height:1.9;font-weight:600;
}
.photo .ph b{color:var(--goldlt);display:block;font-size:13px;margin-bottom:6px;letter-spacing:2px}

/* --- nav --- */
nav{position:sticky;top:0;background:rgba(11,11,12,.96);z-index:20;backdrop-filter:saturate(120%) blur(2px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:13px 22px}
.mark{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:1px;font-size:15px;color:var(--bone)}
.mark .c{color:var(--red);font-size:22px}
.mark .sm{color:var(--goldlt);font-weight:600;letter-spacing:2px;font-size:11px;text-transform:uppercase}
nav .links{display:flex;align-items:center;gap:20px}
nav .links a{color:#cfc9bd;font-size:13px;font-weight:600;letter-spacing:.5px}
nav .links a:hover{color:var(--bone)}
nav .links a.active{color:var(--goldlt)}
nav .go{
  background:var(--red);color:#fff;padding:9px 16px;border-radius:6px;
  font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
@media(max-width:680px){
  /* stack: brand row on top, full link row beneath it — nothing hidden on mobile */
  nav .wrap{flex-direction:column;align-items:center;gap:9px;padding:11px 14px 10px}
  nav .links{flex-wrap:wrap;justify-content:center;gap:8px 14px;width:100%}
  nav .links a{font-size:12.5px;letter-spacing:.3px;padding:2px 0}
  nav .go{padding:7px 14px;font-size:11.5px;margin-left:2px}
}

/* --- hero --- */
.hero{background:var(--ink);color:var(--bone);display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero .copy{display:flex;flex-direction:column;justify-content:center;padding:64px 52px}
@media(max-width:860px){.hero .copy{padding:46px 26px}}
.hero .photo{min-height:560px}
@media(max-width:860px){.hero .photo{min-height:340px;order:-1}}
.hero .c{color:var(--red);font-size:34px;margin-bottom:14px}
.hero .kick{font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--goldlt);margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:60px;line-height:1.0;margin-bottom:20px}
@media(max-width:860px){.hero h1{font-size:44px}}
.hero .sub{color:#cfc9bd;font-size:19px;margin-bottom:14px;max-width:460px}
.hero .sub strong{color:var(--bone)}

/* --- countdown chip --- */
.countdown{
  display:inline-flex;align-items:baseline;gap:10px;margin:6px 0 26px;
  background:#15171d;border:1px solid #2a2f3a;border-radius:999px;padding:10px 18px;
}
.countdown .n{font-family:var(--serif);color:var(--red);font-size:26px;line-height:1}
.countdown .t{color:#cfc9bd;font-size:13px;letter-spacing:.5px}

/* --- inline signup form --- */
.cap{display:flex;gap:9px;flex-wrap:wrap;max-width:460px}
.cap input{flex:1;min-width:210px;padding:15px;border:1px solid #2a2f3a;border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.cap button{border:none;cursor:pointer}
.capfine{color:#8f897c;font-size:13px;margin-top:12px;max-width:460px}
.formnote{display:none;margin-top:12px;color:var(--goldlt);font-size:14px;max-width:460px;line-height:1.5}

/* --- confession band --- */
.confess{background:var(--bone);padding:66px 0;border-bottom:1px solid var(--line)}
.confess .wrap{max-width:760px}
.confess p{font-family:var(--serif);font-size:30px;line-height:1.28}
.confess p + p{margin-top:22px}
.confess em{color:var(--red);font-style:normal}
@media(max-width:680px){.confess p{font-size:23px}}

/* --- statement strip --- */
.statement{background:var(--ink);color:var(--bone);text-align:center;padding:64px 0}
.statement .big{font-family:var(--serif);font-size:38px;line-height:1.2;max-width:820px;margin:0 auto}
.statement .big em{color:var(--goldlt);font-style:normal}
@media(max-width:680px){.statement .big{font-size:27px}}

/* --- generic section --- */
section.band{padding:70px 0}
section.band.dark{background:var(--ink);color:var(--bone)}
section.band.slate{background:var(--slate);color:var(--bone)}
h2.head{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.08;margin:8px 0 18px}
@media(max-width:680px){h2.head{font-size:30px}}
.lead{font-size:19px;max-width:640px}
.dark .lead,.slate .lead{color:#cfc9bd}

/* --- four fronts grid --- */
.fronts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media(max-width:680px){.fronts{grid-template-columns:1fr}}
.front{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:10px;padding:26px 24px}
.dark .front,.slate .front{background:#15171d;border-color:#2a2f3a;border-left-color:var(--red)}
.front h3{font-family:var(--serif);font-weight:400;font-size:27px;margin-bottom:6px}
.front .n{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.dark .front .n,.slate .front .n{color:var(--goldlt)}
.front p{font-size:15.5px;color:var(--dim);margin-top:10px}
.dark .front p,.slate .front p{color:#b9bcc4}

/* --- split rows --- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .photo{min-height:320px}
.split .txt{display:flex;flex-direction:column;justify-content:center;padding:54px 48px}
@media(max-width:860px){.split .txt{padding:42px 26px}}
.split h2{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.1;margin:10px 0 14px}
.split p{color:var(--dim);font-size:17px;margin-bottom:20px;max-width:440px}
.split.dark{background:var(--ink);color:var(--bone)} .split.dark p{color:#cfc9bd}
.split.slate{background:var(--slate);color:var(--bone)} .split.slate p{color:#c3c9d4}
.split .more{font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--red)}
.split.dark .more,.split.slate .more{color:var(--goldlt)}

/* --- signup section (shared, used on home + signup page) --- */
.signup{background:var(--ink);color:var(--bone);padding:78px 0}
.signup .card{max-width:640px;margin:0 auto;text-align:center}
.signup h2{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.06;margin-bottom:16px}
@media(max-width:680px){.signup h2{font-size:32px}}
.signup .book{color:#cfc9bd;font-size:18px;margin-bottom:8px}
.signup .free{color:var(--goldlt);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;margin-bottom:26px}
.signup form{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:0 auto 12px;max-width:520px}
.signup input{flex:1;min-width:230px;padding:16px;border:none;border-radius:8px;font-size:16px;font-family:inherit}
.signup .fine{color:#8f897c;font-size:13px;line-height:1.6;max-width:480px;margin:10px auto 0}
.signup .formnote{color:var(--goldlt);margin:14px auto 0}

/* --- article / prose (about, climb) --- */
.prose{max-width:720px;margin:0 auto;padding:64px 22px}
.prose .lbl{margin-bottom:14px}
.prose h1{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.03;margin-bottom:18px}
@media(max-width:680px){.prose h1{font-size:38px}}
.prose h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:44px 0 14px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:30px 0 8px}
.prose p{margin-bottom:20px}
.prose p.big{font-family:var(--serif);font-size:26px;line-height:1.3;color:var(--ink)}
.prose blockquote{border-left:4px solid var(--gold);padding:4px 0 4px 22px;margin:26px 0;font-family:var(--serif);font-size:23px;line-height:1.35;color:var(--ink)}
.prose blockquote .cite{display:block;font-family:var(--sans);font-size:14px;color:var(--dim);margin-top:10px;letter-spacing:.5px}
.prose .red{color:var(--red)}
.prose hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.prose ul{margin:0 0 20px 0;padding-left:22px}
.prose li{margin-bottom:10px}

/* credibility row (about EEAT) */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
@media(max-width:680px){.creds{grid-template-columns:1fr}}
.cred{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px}
.cred .k{font-family:var(--serif);font-size:30px;color:var(--red);line-height:1}
.cred .v{font-size:14px;color:var(--dim);margin-top:6px}

/* --- footer --- */
footer{background:var(--ink);color:var(--bone);text-align:center;padding:56px 22px}
footer .c{color:var(--red);font-size:30px;margin-bottom:10px}
footer .jesus{font-family:var(--serif);font-size:22px;margin-bottom:16px}
footer .nav a{color:#cfc9bd;margin:0 10px;font-size:13px;font-weight:600}
footer .nav a:hover{color:var(--bone)}
footer .s{margin-top:16px}
footer .s a{color:var(--bone);margin:0 9px;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase}
footer .fine{color:#6b6f7a;font-size:12px;margin-top:18px;letter-spacing:.5px;line-height:1.7}

/* ============================================================
   IMAGE UPGRADE — real photos + cinematic composites (v2)
   ============================================================ */

/* Hero: Kevin cutout composited on a cinematic arena backdrop */
.hero{position:relative;overflow:hidden}
.hero .copy{position:relative;z-index:2}
.hero-photo{
  position:relative;min-height:620px;display:flex;align-items:flex-end;justify-content:center;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(229,50,45,.10), transparent 70%),
    linear-gradient(180deg,#101216 0%, #0b0b0c 100%),
    url('../assets/img/mat.jpg') center 20%/cover no-repeat;
}
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.35) 30%, rgba(11,11,12,.10) 55%, rgba(11,11,12,.65) 100%);
}
.hero-photo img{
  position:relative;z-index:1;max-height:640px;width:auto;object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.65));
}
@media(max-width:860px){
  .hero-photo{min-height:0;order:-1;padding-top:18px}
  .hero-photo img{max-height:400px}
}

/* the inline signup box needs breathing room + a max width */
.hero .copy iframe{margin:6px 0 4px}

/* Book cover in the signup section */
.signup .bookwrap{margin:0 auto 26px;max-width:320px}
.signup .bookwrap img{
  width:100%;height:auto;border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.25);
}

/* Section band with a cinematic image behind (the climb) */
.imgband{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;padding:88px 0}
.imgband::before{
  content:"";position:absolute;inset:0;
  background:url('../assets/img/climb.jpg') center/cover no-repeat;opacity:.30;
}
.imgband::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.55) 60%, rgba(11,11,12,.30) 100%);
}
.imgband .wrap{position:relative;z-index:1}

/* a warm face beside the confession */
.facequote{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;max-width:860px;margin:0 auto}
.facequote img{width:200px;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.15)}
@media(max-width:680px){.facequote{grid-template-columns:1fr;text-align:center}.facequote img{width:150px;margin:0 auto}}

/* CTA card — the primary email capture, unmistakable on the dark hero */
.ctacard{
  background:var(--bone);border-radius:16px;padding:22px 22px 16px;max-width:470px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid rgba(201,162,39,.45);margin:4px 0 0;
}
.ctacard .ctahead{font-family:var(--serif);color:var(--ink);font-size:23px;line-height:1.12;margin-bottom:12px}
.ctacard .ctahead .hot{color:var(--red)}
.ctacard .ctahead em{font-style:italic}
.ctacard iframe{width:100%;height:92px;border:0;background:transparent;display:block}
.ctacard .ctafine{color:#6c6a63;font-size:12.5px;margin-top:8px}

/* Native capture form (Netlify Forms) — the real, clickable email box */
.capform{display:flex;gap:9px;flex-wrap:wrap;align-items:stretch}
.capform input[type=email]{flex:1;min-width:210px;padding:15px 16px;border:1px solid #d8d2c4;border-radius:8px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.capform .btn{border:none;cursor:pointer;white-space:nowrap;padding:15px 22px}
.capform .hp{position:absolute!important;left:-9999px;height:0;overflow:hidden}

/* thank-you / download page */
.thanks{background:var(--bone);color:var(--ink);padding:70px 0 90px;text-align:center}
.thanks .c{color:var(--red);font-size:34px;margin-bottom:8px}
.thanks h1{font-family:var(--serif);font-weight:400;font-size:72px;line-height:1;margin:6px 0 14px}
.thanks .lead{max-width:620px;margin:0 auto 34px;font-size:19px;color:#4a463f}
.thanks .lead em{color:var(--red);font-style:normal}
.getbook{display:flex;gap:36px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:760px;margin:0 auto}
.getbook .bookart img{width:230px;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.25),0 0 0 1px rgba(201,162,39,.3)}
.getbook .getcta{text-align:left;max-width:340px}
.btn.big{font-size:16px;padding:18px 30px}
.thanks .getcta .fine{color:#6c6a63;font-size:14px;margin-top:14px;line-height:1.6}
.thanks .more{color:var(--red);font-weight:700}
@media(max-width:680px){.thanks h1{font-size:52px}.getbook .getcta{text-align:center}}

/* ============================================================
   HOMEPAGE v3 — bone-forward, art-led, the model
   ============================================================ */

/* Hero — warm god-ray backdrop, not black */
.hero2{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero2-bg{position:absolute;inset:0;background:url('../assets/img/rays.jpg') center/cover no-repeat}
.hero2-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.78) 44%,rgba(11,11,12,.18) 100%)}
.hero2-inner{position:relative;z-index:2;width:100%;padding:66px 22px}
.hero2-copy{max-width:560px;color:var(--bone)}
.hero2 .kick{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--goldlt);margin-bottom:16px}
.hero2 .kick .c{color:var(--red);font-size:20px}
.hero2 h1{font-family:var(--serif);font-weight:400;font-size:66px;line-height:1;margin-bottom:18px}
.hero2 .sub{color:#e7e2d8;font-size:18px;margin-bottom:14px;max-width:500px}
.hero2 .sub em{color:var(--bone);font-style:italic}
.hero2 .tagline{font-family:var(--serif);font-size:25px;color:var(--bone);margin-bottom:20px}
.hero2 .tagline strong{color:var(--goldlt);font-weight:400}
@media(max-width:680px){.hero2 h1{font-size:46px}.hero2-bg::after{background:linear-gradient(180deg,rgba(11,11,12,.85),rgba(11,11,12,.92))}}

/* Confession — bone, person-forward */
.confess2{background:var(--bone);padding:74px 0;border-bottom:1px solid var(--line)}
.cf-grid{display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:center;max-width:920px;margin:0 auto}
.cf-photo img{width:300px;border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.16)}
.cf-text p{font-family:var(--serif);font-size:26px;line-height:1.32;margin-bottom:16px}
.cf-text em{color:var(--red);font-style:normal}
.cf-text .cf-sign{font-family:var(--sans);font-size:14px;color:var(--dim);margin-top:6px}
@media(max-width:680px){.cf-grid{grid-template-columns:1fr;text-align:center}.cf-photo img{width:220px;margin:0 auto}.cf-text p{font-size:22px}}

/* The 9 F's */
.fnine{background:var(--bone);padding:74px 0}
.core4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:860px){.core4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.core4{grid-template-columns:1fr}}
.ff{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;padding:24px 20px}
.ff .n{font-family:var(--serif);font-size:20px;color:var(--gold)}
.ff h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:2px 0 8px}
.ff p{font-size:15px;color:var(--dim);line-height:1.55}
.hinge{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--ink);color:var(--bone);border-radius:14px;padding:26px 30px;margin:4px 0 24px}
.hinge .n{font-family:var(--serif);font-size:46px;color:var(--goldlt);line-height:1}
.hinge h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:4px}
.hinge p{color:#cfc9bd;font-size:15.5px;max-width:740px}
.rest4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.rest4{grid-template-columns:repeat(2,1fr)}}
.rf{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;font-family:var(--serif);font-size:22px;text-align:center}
.rf .n{color:var(--gold);font-size:13px;font-family:var(--sans);font-weight:700;display:block;letter-spacing:1px;margin-bottom:2px}
.restnote{text-align:center;color:var(--dim);font-size:15px;margin:16px auto 0;max-width:640px}

/* Counterfeit Reality — dark accent section */
.book{position:relative;background:var(--ink);color:var(--bone);padding:82px 0;overflow:hidden}
.book-bg{position:absolute;inset:0;background:url('../assets/img/counterfeit.jpg') center right/cover no-repeat;opacity:.30}
.book-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 34%,rgba(11,11,12,.42) 100%)}
.book-inner{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center}
@media(max-width:780px){.book-inner{grid-template-columns:1fr;text-align:center}}
.book-art img{width:280px;border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,39,.3)}
@media(max-width:780px){.book-art img{width:210px;margin:0 auto}}
.book h2{font-family:var(--serif);font-weight:400;font-size:48px;margin:6px 0 12px}
.book-lead{color:#cfc9bd;font-size:18px;max-width:520px;margin-bottom:22px}
.book-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
@media(max-width:780px){.book-cta{justify-content:center}}
.btn.ghostlt{background:transparent;border:2px solid var(--goldlt);color:var(--goldlt)}
.ctacard.dark{max-width:470px}
@media(max-width:780px){.ctacard.dark{margin:0 auto}}
.book-fine{color:#8f897c;font-size:13px;margin-top:16px;max-width:520px}

/* Value ladder */
.ladder{background:var(--bone);padding:72px 0}
.ladder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:680px){.ladder-grid{grid-template-columns:1fr}}
.rung{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center}
.rung .c{color:var(--red);font-size:26px}
.rung h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:6px 0 8px}
.rung p{color:var(--dim);font-size:15px;line-height:1.55}
.rung p em{color:var(--ink);font-style:italic}

/* Finances / Polaris teaser */
.finteaser{position:relative;background:var(--slate);color:var(--bone);padding:78px 0;overflow:hidden}
.fin-bg{position:absolute;inset:0;background:url('../assets/img/finance.jpg') center/cover no-repeat;opacity:.35}
.fin-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--slate) 36%,rgba(28,34,48,.4) 100%)}
.fin-inner{position:relative;z-index:1}
.fin-copy{max-width:560px}
.finteaser h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.05;margin:6px 0 14px}
.finteaser p{color:#c9ced8;font-size:17px;margin-bottom:14px;max-width:500px}
.fin-fence{color:#9aa0ac;font-size:13.5px;font-style:italic}
.finteaser .more{color:var(--goldlt);font-weight:700}
/* Faith — devotional cards */
.devos{background:var(--bone);padding:6px 0 56px}
.devos .wrap{max-width:820px;display:grid;gap:22px}
.devo{background:#fff;border:1px solid #e7e3da;border-radius:12px;padding:26px 28px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.devo-ref{font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px;color:var(--gold);margin:0}
.devo-ref span{color:var(--dim);font-weight:600}
.devo-verse{font-family:var(--serif);font-size:22px;line-height:1.34;color:var(--ink);border-left:3px solid var(--red);padding-left:18px;margin:14px 0 16px}
.devo p{color:#2c2a27;line-height:1.62;margin:0 0 10px}
.devo-sign{color:var(--gold);font-weight:700;font-style:italic;margin:12px 0 0}

/* Interior page hero (Finances/Fitness/Family) */
.pagehero{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;padding:82px 0}
.ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32}
.ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(11,11,12,.4) 100%)}
.pagehero .ph-inner{position:relative;z-index:1}
.pagehero .kick{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--goldlt);margin-bottom:14px}
.pagehero .kick .c{color:var(--red);font-size:20px}
.pagehero h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.02;margin-bottom:14px}
.pagehero .ph-sub{color:#e7e2d8;font-size:19px;max-width:560px}
@media(max-width:680px){.pagehero h1{font-size:40px}}

/* real portrait in split bands (About) */
.split-photo{background:linear-gradient(160deg,#20283a,#0b0b0c);display:flex;align-items:flex-end;justify-content:center;min-height:380px;overflow:hidden}
.split-photo img{max-height:410px;width:auto;filter:drop-shadow(0 22px 44px rgba(0,0,0,.45))}
@media(max-width:860px){.split-photo{min-height:300px}.split-photo img{max-height:320px}}

/* Hero two-column with the best photo on a real backdrop */
.hero2-inner{display:grid;grid-template-columns:1.06fr .94fr;gap:24px;align-items:end}
.hero2-photo{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:580px}
.hero2-photo::before{content:"";position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:560px;height:560px;background:radial-gradient(circle,rgba(11,11,12,.85) 32%,rgba(11,11,12,.45) 54%,transparent 70%);z-index:0}
.hero2-photo img{position:relative;z-index:1;max-height:600px;width:auto;filter:drop-shadow(0 26px 60px rgba(0,0,0,.7))}
@media(max-width:860px){.hero2-inner{grid-template-columns:1fr}.hero2-photo{min-height:0;order:2;margin-top:6px}.hero2-photo img{max-height:400px}.hero2-photo::before{width:360px;height:360px}}

/* Confession photo — real backdrop panel, no more floating on white */
.cf-photo{background:linear-gradient(160deg,#20283a,#0b0b0c);border-radius:16px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:360px;box-shadow:0 24px 50px rgba(0,0,0,.18)}
.cf-photo img{width:auto;max-width:100%;max-height:380px;filter:drop-shadow(0 16px 34px rgba(0,0,0,.4))}
@media(max-width:680px){.cf-photo{min-height:300px}.cf-photo img{max-height:300px}}

/* Polaris hook */
.fin-hook{color:var(--bone)!important;font-size:18px!important}
.fin-hook strong{color:var(--goldlt)}

/* Hero photo v2 — side element, layered behind text, contained (no long scroll) */
.hero2{min-height:500px}
.hero2-inner{display:block;padding:52px 22px;min-height:0}
.hero2-copy{position:relative;z-index:2;max-width:560px}
.hero2-photo{position:absolute;right:0;bottom:0;top:40px;width:46%;max-width:460px;min-height:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;margin:0}
.hero2-photo::before{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:86%;transform:none;background:radial-gradient(ellipse at 60% 100%,rgba(11,11,12,.72),transparent 66%);z-index:0}
.hero2-photo img{position:relative;z-index:1;max-height:100%;max-width:100%;height:auto;width:auto;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
@media(max-width:820px){.hero2-photo{display:none}}

/* HERO v3 — head at top, body beside the words, email bar along the bottom */
.hero3{position:relative;overflow:hidden;background:var(--ink);height:610px}
.hero3-bg{position:absolute;inset:0;background:url('../assets/img/rays.jpg') center/cover no-repeat;z-index:0}
.hero3-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.72) 46%,rgba(11,11,12,.18) 100%)}
.hero3-photo{position:absolute;top:54px;right:2%;height:calc(100% - 54px);width:auto;object-fit:contain;object-position:top center;z-index:1;filter:drop-shadow(0 10px 40px rgba(0,0,0,.55));pointer-events:none}
.hero3-copy{position:absolute;top:42px;left:0;right:0;z-index:2}
.hero3-copy .kick{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--goldlt);margin-bottom:14px}
.hero3-copy .kick .c{color:var(--red);font-size:20px}
.hero3-copy h1{font-family:var(--serif);font-weight:400;font-size:64px;line-height:1;color:var(--bone);margin-bottom:16px}
.hero3-copy .sub{color:#e7e2d8;font-size:18px;max-width:430px;margin-bottom:12px}
.hero3-copy .sub em{color:var(--bone);font-style:italic}
.hero3-copy .tagline{font-family:var(--serif);font-size:23px;color:var(--bone);max-width:460px}
.hero3-copy .tagline strong{color:var(--goldlt);font-weight:400}
.hero3-form{position:absolute;bottom:22px;left:0;right:0;z-index:3}
.hero3-card{background:var(--bone);border-radius:14px;padding:12px 18px 8px;max-width:540px;box-shadow:0 20px 50px rgba(0,0,0,.5);border:1px solid rgba(201,162,39,.45)}
.hero3-card .ctahead{font-family:var(--serif);color:var(--ink);font-size:19px;margin-bottom:6px}
.hero3-card .ctahead .hot{color:var(--red)}
.hero3-card .ctahead em{font-style:italic}
@media(max-width:820px){
  .hero3{height:auto}
  .hero3-photo{display:none}
  .hero3-copy{position:static;padding:40px 0 0}
  .hero3-copy h1{font-size:44px}
  .hero3-form{position:static;padding:18px 0 40px}
  .hero3-card{max-width:100%}
}

/* Two-book showcase (free + buy) */
.books{position:relative;background:var(--ink);color:var(--bone);padding:76px 0;overflow:hidden}
.books .book-bg{position:absolute;inset:0;background:url('../assets/img/counterfeit.jpg') center/cover no-repeat;opacity:.20}
.books .book-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.85),rgba(11,11,12,.78))}
.books-inner{position:relative;z-index:1}
.books-h{font-family:var(--serif);font-weight:400;font-size:40px;text-align:center;margin:6px 0 30px}
.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin:0 auto}
@media(max-width:760px){.books-grid{grid-template-columns:1fr}}
.bcard{background:#15171d;border:1px solid #2a2f3a;border-radius:14px;padding:28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bcard img{width:190px;border-radius:6px;box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,39,.25);margin-bottom:16px}
.btag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.btag.free{background:var(--gold);color:var(--ink)}
.btag.buy{background:var(--red);color:#fff}
.bcard h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:8px}
.bcard p{color:#c3bfb6;font-size:15px;line-height:1.55;margin-bottom:18px;flex:1}
.books-fine{text-align:center;color:#8f897c;font-size:13px;margin-top:20px}

/* HERO v3 FINAL — clean two-column, no overlap, photo head-up right */
.hero3{height:auto}
.hero3-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:end;min-height:480px}
@media(max-width:900px){.hero3-grid{grid-template-columns:minmax(0,1fr) 380px}}
.hero3-left{align-self:center;max-width:560px;padding:44px 0}
.hero3-left .kick{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--goldlt);margin-bottom:14px}
.hero3-left .kick .c{color:var(--red);font-size:20px}
.hero3-left h1{font-family:var(--serif);font-weight:400;font-size:60px;line-height:1;color:var(--bone);margin-bottom:16px}
.hero3-left .sub{color:#e7e2d8;font-size:18px;max-width:470px;margin-bottom:20px;line-height:1.5}
.hero3-left .sub em{color:var(--bone);font-style:italic}
.hero3-left .sub .gold{color:var(--goldlt);font-weight:700}
.hero3-card{background:var(--bone);border-radius:14px;padding:12px 18px 10px;max-width:440px;box-shadow:0 20px 50px rgba(0,0,0,.5);border:1px solid rgba(201,162,39,.45)}
.hero3-card .ctahead{font-family:var(--serif);color:var(--ink);font-size:18px;margin-bottom:6px;line-height:1.2}
.hero3-card .ctahead .hot{color:var(--red)}
.hero3-card .ctahead em{font-style:italic}
.hero3-right{align-self:end;display:flex;justify-content:flex-end;align-items:flex-end;overflow:hidden}
.hero3-right img{max-height:500px;height:auto;max-width:100%;width:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 14px 40px rgba(0,0,0,.55))}
@media(max-width:820px){
  .hero3-grid{grid-template-columns:1fr;min-height:0}
  .hero3-right{display:none}
  .hero3-left{padding:40px 0 36px}
  .hero3-left h1{font-size:44px}
}

/* Beehiiv v3 embed lives in dark cards (theme is transparent + light field + red button) */
.hero3-card,.formdark{background:rgba(11,11,12,.80);border:1px solid rgba(201,162,39,.45);border-radius:14px;padding:14px 18px 12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.hero3-card .ctahead,.formdark .ctahead{color:var(--bone)}
.hero3-card .ctahead .hot{color:var(--goldlt)}
.formdark{margin:36px auto 0;max-width:540px}

/* small secondary "buy paperback" link under a book card's primary button */
.bcard-alt{margin-top:10px;margin-bottom:0;font-size:13.5px}
.bcard-alt a{color:var(--goldlt);font-weight:600}
.bcard-alt a:hover{color:var(--bone)}

/* De-box the form: no gold border, no heavy card — form sits clean */
.hero3-card,.formdark{background:transparent;border:0;box-shadow:none;padding:6px 0 0}
.hero3-card{max-width:430px}
.formdark .ctahead,.hero3-card .ctahead{color:var(--bone)}

/* ============================================================
   PLAYGROUND — the free-resource page (playground.html).
   Cards are injected by js/playground.js from js/playground-data.js.
   ============================================================ */

/* filter bar */
.pg-controls{background:var(--bone);border-bottom:1px solid var(--line);padding:26px 0 22px}
.pg-controls .lbl{margin-bottom:12px}
.pg-pills{display:flex;flex-wrap:wrap;gap:8px}
.pg-pill{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.6px;
  background:var(--white);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;cursor:pointer;line-height:1;
}
.pg-pill:hover{border-color:var(--gold)}
.pg-pill .n{color:var(--dim);font-weight:600;margin-left:7px;font-size:12px}
.pg-pill[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pg-pill[aria-pressed="true"] .n{color:var(--goldlt)}
.pg-pill.core[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.pg-pill.core[aria-pressed="true"] .n{color:#ffd9d8}
.pg-count{color:var(--dim);font-size:13.5px;margin-top:14px}
@media(max-width:680px){
  .pg-controls{padding:22px 0 18px}
  .pg-pill{font-size:12.5px;padding:8px 13px}
  .pg-pill .n{margin-left:5px;font-size:11.5px}
  .pg-pills{gap:7px}
}
.pg-count b{color:var(--ink);font-weight:700}

/* card field — masonry via columns so short cards don't leave holes */
.pg{background:var(--bone);padding:34px 0 62px}
.pg .wrap{max-width:940px}
.pg-grid{column-count:2;column-gap:22px}
@media(max-width:760px){.pg-grid{column-count:1}}
.pg-card{
  display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;
  background:#fff;border:1px solid #e7e3da;border-radius:12px;
  padding:22px 24px 20px;margin:0 0 22px;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
@media(max-width:680px){.pg-card{padding:20px 19px 18px;margin-bottom:16px}}
.pg-card.is-hidden{display:none}

.pg-chip{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  padding:6px 10px;border-radius:4px;margin:0 0 12px;
  color:var(--gold);background:rgba(201,162,39,.11);
}
.pg-chip.core{color:var(--red);background:rgba(229,50,45,.09)}
.pg-title{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.14;margin:0 0 12px}
@media(max-width:680px){.pg-title{font-size:22px}}
.pg-body{position:relative}
.pg-body p{color:#2c2a27;font-size:16px;line-height:1.62;margin:0 0 12px}
.pg-body p:last-child{margin-bottom:0}
@media(max-width:680px){.pg-body p{font-size:15.5px}}
.pg-card.clamp .pg-body{max-height:13em;overflow:hidden}
.pg-card.clamp .pg-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4.6em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 88%);pointer-events:none;
}
.pg-card.open .pg-body{max-height:none}
.pg-card.open .pg-body::after{display:none}
.pg-more{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--red);background:none;border:none;
  padding:12px 0 0;cursor:pointer;
}
.pg-more:hover{color:var(--ink)}
.pg-src{color:var(--dim);font-size:12.5px;letter-spacing:.4px;margin:14px 0 0;
  border-top:1px solid #efece4;padding-top:11px}
.pg-empty{color:var(--dim);font-size:17px;padding:30px 0}
.pg-note{color:var(--dim);font-size:14px;line-height:1.6;max-width:620px;margin:26px 0 0}

/* ============================================================
   JOIN FORM — the native email capture (js/signup.js).
   Replaced the Beehiiv iframes 2026-08-24. Posts to the Netlify
   function /.netlify/functions/subscribe, which is the only thing
   that ever holds the Brevo API key.

   Every placement sits on a dark ground (.signup is ink, .hero3-card
   and .formdark are over dark photography), so the field is a light
   card and the button is brand red. It inherits the existing
   `.signup form` centring where that applies, so the look on the
   signup sections is unchanged from the embed it replaced.
   ============================================================ */
.joinform{display:flex;gap:9px;flex-wrap:wrap;align-items:stretch;max-width:520px;width:100%}
.joinform input[type=email]{
  /* 190px basis, not 230: the hero card is 430px wide and the button is 220,
     so a larger basis wraps the button onto its own line there and the hero
     stops matching the other seven placements. */
  flex:1 1 190px;min-width:0;padding:16px;border:1px solid rgba(201,162,39,.35);
  border-radius:8px;font-size:16px;font-family:var(--sans);line-height:1.2;
  background:var(--white);color:var(--ink);
}
.joinform input[type=email]::placeholder{color:#9a948a}
.joinform button[type=submit]{
  border:none;cursor:pointer;white-space:nowrap;padding:16px 26px;flex:0 0 auto;
}
.joinform button[type=submit][disabled]{opacity:.6;cursor:default}

/* Honeypot. Off-canvas rather than display:none — a bot that skips hidden
   fields still fills this one, which is the entire point. */
.joinform .hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Visually-hidden label. The field has a placeholder, but a placeholder is not
   a label and screen readers need the real thing. */
.joinform .vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Inline status line. Lives in the flex row on its own full-width line so the
   form never reflows when a message appears. */
.joinform .joinnote{
  flex:1 0 100%;margin:2px 0 0;font-size:14px;line-height:1.5;min-height:0;
  color:var(--goldlt);
}
.joinform .joinnote:empty{display:none}
.joinform .joinnote.ok{color:var(--goldlt);font-weight:600}
.joinform .joinnote.bad{color:#ff8a86}

/* Fine print under a form, on dark. */
.joinfine{color:#8f897c;font-size:12.5px;line-height:1.55;margin:10px 0 0;max-width:520px}
.signup .joinfine{margin-left:auto;margin-right:auto;text-align:center}

@media(max-width:520px){
  .joinform button[type=submit]{flex:1 1 100%}
}


/* Anchor landings — added 2026-08-25 after KB walked the funnel and found every CTA
   dropped him above or below the email field. The sticky header is ~64px, so an
   un-margined anchor puts the form's first line underneath it. */
#book-form{scroll-margin-top:96px}
#book{scroll-margin-top:80px}
.joinform input[type=email]:focus{outline:2px solid var(--gold);outline-offset:2px}