/* ──────────────────────────────────────────────────────────────────────────
   The Covenant Husband — SHARED stylesheet (single source of truth)
   ----------------------------------------------------------------------------
   One stylesheet for /, /hope, /rock (and future doorways). Edit the design
   system HERE only — never re-inline page CSS, or the pages will drift.

   Design system:
     - Navy / silver / gold palette (unchanged from the original brand).
     - Georgia-first system serif (reliable cross-platform render).
     - One modular type scale + spacing rhythm, defined as variables.
   Selectors are namespaced by page-unique class names, so home-only
   (.rgrid/.faq), hope-only (ul.checks) and rock-only (.moves/.rockmark)
   rules can all live here without colliding.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  /* palette */
  --navy:#0B1022; --navy2:#111a33; --deep:#070b16;
  --cream:#F8F5EE; --ink:#e8eaf0; --muted:#a6aec1;
  --gold:#c9a35a; --gold2:#e7c987; --steel:#9aa3b8; --line:rgba(255,255,255,.1);
  --soft:#c7cdde;

  /* type */
  --serif:Georgia,"Palatino Linotype",Palatino,"Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fs-hero:clamp(30px,6.6vw,48px);
  --fs-h2:clamp(22px,4.6vw,30px);
  --fs-sub:clamp(17px,2.6vw,20px);
  --fs-h3:clamp(22px,4.2vw,29px);
  --fs-body:16.5px;

  /* rhythm */
  --space-section:clamp(30px,5.2vw,38px);
  --maxw:640px;
  --radius:16px;
  --gold-grad:linear-gradient(180deg,var(--gold2),var(--gold));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  background:radial-gradient(130% 90% at 50% -10%,#16203f 0%,var(--navy) 45%,var(--deep) 100%);
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap.wide{max-width:760px}
.sans{font-family:var(--sans)}
.center{text-align:center}

/* accessibility helpers */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* brand lockup — large centered seal + wordmark at the top of every page */
.brand-lockup{text-align:center;padding:30px 0 4px}
.brand-seal{display:block;width:auto;height:120px;margin:0 auto 14px}
.brand-lockup h1{margin-bottom:0}

/* hero */
header{text-align:center;padding:32px 0 8px}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
h1{font-size:var(--fs-hero);line-height:1.08;color:#fff;letter-spacing:-.01em;margin-bottom:16px}
h1 .hl{color:var(--gold2)}
/* demoted page hero heading on /hope and /rock (kept visually like the old h1) */
.page-title{font-size:var(--fs-hero);line-height:1.08;color:#fff;letter-spacing:-.01em;margin-bottom:16px}
.page-title .hl{color:var(--gold2)}
.sub{font-size:var(--fs-sub);color:var(--soft);max-width:540px;margin:0 auto 14px}
.pillars{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin:18px 0 4px}
/* subtle gold hairline that closes the hero */
.hr-gold{width:64px;height:1px;margin:20px auto 0;border:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ROCK letter tiles (rock) */
.rockmark{display:flex;gap:10px;justify-content:center;margin:22px 0 10px}
.rockmark span{font-family:var(--sans);font-weight:800;font-size:clamp(26px,7vw,38px);
  width:clamp(54px,15vw,72px);height:clamp(54px,15vw,72px);color:#fff;
  display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(201,163,90,.5);
  border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  box-shadow:inset 0 0 26px rgba(201,163,90,.10)}
.rockmark span b{color:var(--gold2);font-weight:800}
.rockwords{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin-bottom:6px}

/* opt-in card */
.card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;
  padding:30px 24px;margin:28px auto 8px;max-width:520px;backdrop-filter:blur(6px);text-align:center}
.card .check{font-size:32px;line-height:1;margin-bottom:10px}
.card h2{font-size:22px;color:#fff;margin-bottom:8px}
.card p.note{font-size:15px;color:var(--soft);margin-bottom:20px;max-width:420px;margin-left:auto;margin-right:auto}

/* form */
form{display:flex;flex-direction:column;gap:10px;text-align:left}
label.field{display:block}
input[type=email],input[type=text]{
  width:100%;padding:15px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);color:#fff;font-size:16px;font-family:var(--sans)}
input::placeholder{color:#8993a8}
input:focus{border-color:rgba(201,163,90,.6)}
button{
  cursor:pointer;border:0;border-radius:11px;padding:16px 18px;font-size:17px;font-weight:800;
  font-family:var(--sans);color:#1a1205;background:var(--gold-grad);
  box-shadow:0 10px 30px rgba(201,163,90,.28);transition:transform .12s ease,filter .12s ease}
button:hover{transform:translateY(-1px);filter:brightness(1.05)}
button:disabled{opacity:.6;cursor:default;transform:none}
.msg{display:none;font-size:15px;margin-top:14px;padding:12px 14px;border-radius:10px;text-align:left}
.msg.ok{display:block;background:rgba(120,190,140,.12);border:1px solid rgba(120,190,140,.35);color:#bfe6c8}
.msg.err{display:block;background:rgba(220,120,100,.12);border:1px solid rgba(220,120,100,.35);color:#f0c2b6}
.fine{font-size:12.5px;color:var(--muted);margin-top:14px}
.fine b{color:var(--soft)}

/* library (revealed after opt-in — shared markup across pages) */
#library{display:none;padding-top:34px}
#library.show{display:block}
.lib-head{text-align:center;margin-bottom:6px}
.lib-head .eyebrow{margin-bottom:10px}
.lib-head h2{font-size:var(--fs-h2);color:#fff;margin-bottom:8px}
.lib-head p{color:var(--soft);max-width:500px;margin:0 auto 6px;font-size:16px}
.guide-grid{display:grid;gap:14px;max-width:560px;margin:22px auto 0}
.guide-card{position:relative;display:block;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.guide-card:hover{transform:translateY(-2px);border-color:rgba(201,163,90,.5);background:rgba(255,255,255,.07)}
.guide-card.featured{border-color:rgba(201,163,90,.55);
  background:linear-gradient(180deg,rgba(201,163,90,.10),rgba(255,255,255,.04))}
.guide-card .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.guide-card .gnum{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
.guide-card .gnum .r{color:var(--gold)}
.badge{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#1a1205;background:var(--gold-grad);padding:4px 9px;border-radius:999px}
.guide-card h3{font-size:20px;color:#fff;margin-bottom:6px;line-height:1.25}
.guide-card p{font-size:14.5px;color:var(--soft);margin-bottom:12px}
.guide-card .open{font-family:var(--sans);font-size:14px;font-weight:800;color:var(--gold2)}
.lib-fine{font-size:12.5px;color:var(--muted);margin:20px auto 0;max-width:500px;text-align:center}
.lib-fine b{color:var(--soft)}
.coming{text-align:center;color:var(--steel);font-size:13px;font-family:var(--sans);
  letter-spacing:.08em;margin-top:18px}

/* sections */
section{padding:var(--space-section) 0;border-top:1px solid var(--line)}
section h3{font-size:var(--fs-h3);color:#fff;margin-bottom:14px;text-align:center}
.lead{color:var(--soft);text-align:center;max-width:560px;margin:0 auto 20px;font-size:var(--fs-body)}
.pillars-line{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);text-align:center;margin-top:18px}

/* checklist (home + hope) */
ul.checks{list-style:none;max-width:540px;margin:0 auto;display:grid;gap:13px}
ul.checks li{position:relative;padding-left:30px;color:#d4d9e6;font-size:var(--fs-body)}
ul.checks li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:3px;
  background:linear-gradient(135deg,var(--gold2),var(--gold))}

/* 3R cards (home) */
.rgrid{display:grid;gap:14px;max-width:600px;margin:0 auto}
.rcard{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.rcard .tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:6px}
.rcard b{color:#fff}

/* founder story (home) */
.story{max-width:600px;margin:0 auto;color:#cdd3e2;font-size:var(--fs-body)}
.story p{margin-bottom:14px}

/* FAQ (home) */
.faq{max-width:600px;margin:0 auto;display:grid;gap:14px}
.faq .q{color:#fff;font-weight:700;margin-bottom:4px}
.faq .a{color:var(--muted);font-size:15.5px}
.cta-again{margin-top:18px}

/* four moves (rock) */
.moves{display:grid;gap:13px;max-width:540px;margin:0 auto}
.move{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.move .badge-l{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:800;font-size:22px;color:#fff;border:1.5px solid var(--gold);
  border-radius:11px;background:linear-gradient(160deg,#16203f,var(--navy))}
.move .mtitle{font-size:18px;color:#fff;margin-bottom:3px}
.move .mtext{font-size:15px;color:var(--soft)}
.move .ex{display:block;margin-top:7px;font-style:italic;color:#aeb6ca;font-size:14px}

/* two hooks (rock) */
.hooks{display:grid;gap:14px;max-width:540px;margin:0 auto}
.hook{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.hook .tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px}
.hook h4{font-size:19px;color:#fff;margin-bottom:8px}
.hook p{font-size:15.5px;color:var(--soft)}

/* next-step card (hope + rock) */
.next{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;max-width:520px;margin:0 auto;text-align:center}
.next .tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:10px}
.next h4{font-size:20px;color:#fff;margin-bottom:10px}
.next p{color:#cdd3e2;font-size:16px;margin-bottom:10px}
.next .mailbox{font-size:13.5px;color:var(--muted);margin-top:6px}
.next .mailbox b{color:var(--soft)}

/* footer */
footer{padding:30px 0 50px;text-align:center;color:var(--steel);font-size:13px;border-top:1px solid var(--line)}
footer .disc{max-width:560px;margin:0 auto 14px;font-size:12.5px;line-height:1.6}