/* ==========================================================================
   Lisa V Green Inspires - free prayer guide landing page
   Palette sampled from the approved guide PDF and the month one master approval.
   Type: Cormorant Garamond (display, high contrast) + Jost (geometric UI).
   ========================================================================== */

:root{
  --deep:#0a241a;        /* darkest green, hero and dark bands */
  --forest:#123c2a;      /* heading green on cream */
  --gold:#c6a252;
  --gold-lt:#dcc287;
  --gold-dk:#8f6f31;
  --cream:#f7f4ee;
  --ink:#1b1c17;
  --body:#46514a;        /* body copy on cream */
  --body-dark:#a9bbae;   /* body copy on green */
  --rule:rgba(198,162,82,.30);
  --rule-lt:rgba(26,32,27,.14);

  --display:"Cormorant Garamond",Baskerville,Georgia,serif;
  --ui:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gut:clamp(22px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--ui);
  font-weight:300;
  font-size:17.5px;
  line-height:1.78;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--deep)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--forest);margin:0}

h2{
  font-size:clamp(2.35rem,5vw,3.9rem);
  font-weight:300;line-height:1.06;letter-spacing:-.015em;
}
h3{
  font-family:var(--display);font-size:1.55rem;font-weight:500;
  line-height:1.22;letter-spacing:-.005em;color:var(--forest);
}
.on-dark{color:var(--cream)}

/* small caps label with a leading hairline */
.eyebrow{
  font-family:var(--ui);font-size:.7rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dk);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:1rem;
}
.eyebrow::before{
  content:"";width:44px;height:1px;background:currentColor;opacity:.6;flex:none;
}
.eyebrow--gold{color:var(--gold)}

.lede{
  font-size:1.15rem;font-weight:300;max-width:56ch;margin:1.6rem 0 0;color:var(--body);
}
.lede--dark{color:var(--body-dark)}

/* outlined, not a filled marketing blob */
.badge{
  display:inline-block;background:none;color:var(--gold-lt);
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;
  padding:.72rem 1.5rem;border:1px solid var(--rule);border-radius:1px;
}

/* --------------------------------------------------------------------------
   Buttons: flat, near-square, wide tracking. No chunky shadows.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--ui);font-weight:400;
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  padding:1.35rem 3.1rem;border-radius:2px;text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn--gold{background:var(--gold);color:var(--deep)}
.btn--gold:hover{background:var(--gold-lt)}
.btn--ghost{background:none;color:var(--forest);border:1px solid var(--rule-lt)}
.btn--ghost:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--deep);overflow:hidden}

.hero__art{
  position:absolute;inset:0;z-index:0;
  background:url("assets/hero-art.jpg") left center / cover no-repeat;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    100deg,
    rgba(10,36,26,0) 22%,
    rgba(10,36,26,.52) 36%,
    rgba(10,36,26,.88) 47%,
    rgba(10,36,26,.95) 58%,
    rgba(10,36,26,.96) 100%);
}

.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:38px var(--gut) 64px;
  min-height:min(86vh,760px);
  display:flex;flex-direction:column;
}

.wordmark{
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin:0 0 auto;align-self:flex-start;
}

.hero__copy{width:min(100%,580px);margin-left:auto;padding-top:18px}

.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.7rem,5.4vw,4.35rem);
  line-height:1.03;letter-spacing:-.022em;color:var(--cream);
  margin:1.5rem 0 0;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}

.hero__sub{
  font-size:1.06rem;font-weight:300;color:var(--body-dark);
  margin:1.3rem 0 0;max-width:44ch;
}

/* --------------------------------------------------------------------------
   Opt-in: underline fields, no boxed inputs
   -------------------------------------------------------------------------- */
.optin{margin-top:2rem}
.optin input{
  width:100%;font-family:var(--ui);font-size:1rem;font-weight:300;
  color:var(--cream);background:transparent;
  border:0;border-bottom:1px solid rgba(198,162,82,.42);border-radius:0;
  padding:.95rem .2rem;margin-bottom:1.05rem;
  transition:border-color .25s ease,background .25s ease;
}
.optin input::placeholder{color:rgba(233,240,234,.5);letter-spacing:.04em}
.optin input:focus{
  outline:none;border-bottom-color:var(--gold);background:rgba(255,255,255,.05);
}
.optin input[aria-invalid="true"]{border-bottom-color:#d08a74}

.optin button{
  width:100%;cursor:pointer;font-family:var(--ui);
  font-size:.78rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--deep);background:var(--gold);border:0;border-radius:2px;
  padding:1.3rem 1rem;margin-top:.7rem;
  transition:background .3s ease;
}
.optin button:hover{background:var(--gold-lt)}
.optin button:disabled{opacity:.55;cursor:progress}

.optin__note{
  display:flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:300;letter-spacing:.02em;
  color:rgba(169,187,174,.85);margin:1.1rem 0 0;
}
.lock{
  width:11px;height:13px;flex:none;border:1px solid var(--gold);border-radius:1px;
  position:relative;margin-top:-3px;
}
.lock::before{
  content:"";position:absolute;left:1.5px;top:-6px;width:6px;height:6px;
  border:1px solid var(--gold);border-bottom:0;border-radius:4px 4px 0 0;
}

.optin__msg{margin:1rem 0 0;font-size:.88rem;font-weight:300;min-height:1px}
.optin__msg--err{color:#e3a893}

/* Honeypot. Off screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.thanks{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:2.4rem 0;margin-top:2.6rem;
}
.thanks h3{
  font-family:var(--display);font-weight:300;font-size:2rem;
  color:var(--cream);margin-bottom:.7rem;letter-spacing:-.01em;
}
.thanks p{color:var(--body-dark);margin:0;font-size:1rem;font-weight:300}

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{padding:clamp(88px,11vw,158px) 0}
.band--cream{background:var(--cream)}
.band--deep{background:var(--deep)}

/* ---------- pull quote ---------- */
.band--quote{
  background:var(--forest);padding:clamp(76px,10vw,126px) 0;text-align:center;
}
.band--quote blockquote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.75rem,3.9vw,2.85rem);line-height:1.3;letter-spacing:-.012em;
  color:var(--cream);margin:0 auto;max-width:28ch;
}
.band--quote .attrib{
  font-family:var(--ui);font-size:.66rem;font-weight:400;
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);margin:2.4rem 0 0;
}
.band--quote .attrib::before{
  content:"";display:block;width:36px;height:1px;background:var(--rule);
  margin:0 auto 1.6rem;
}

/* ---------- the twelve ---------- */
.twelve{
  list-style:none;margin:4.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2.5rem,5vw,5rem);
}
.twelve li{
  display:flex;gap:1.5rem;align-items:baseline;
  font-family:var(--display);font-size:1.42rem;font-weight:400;
  line-height:1.34;letter-spacing:-.005em;color:var(--forest);
  padding:1.5rem 0;border-bottom:1px solid var(--rule-lt);
}
.twelve li span{
  font-family:var(--display);font-size:1.05rem;font-weight:400;font-style:italic;
  color:var(--gold-dk);flex:none;width:1.6rem;
}
#the-twelve .center{margin-top:4.2rem}

/* ---------- inside every page ---------- */
.anatomy{
  display:grid;grid-template-columns:1fr .72fr;gap:clamp(3rem,7vw,6rem);
  align-items:start;margin-top:4.2rem;
}
.step{
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.4rem;
  padding:2rem 0;border-top:1px solid var(--rule);
}
.step:first-child{border-top:0;padding-top:0}
.step__n{
  grid-row:1 / span 2;
  font-family:var(--display);font-size:2.15rem;font-weight:300;font-style:italic;
  line-height:1;color:var(--gold);opacity:.9;
}
.step h3{color:var(--cream);margin-bottom:.5rem;font-weight:400}
.step p{color:var(--body-dark);margin:0;font-size:1rem;font-weight:300}

.anatomy__proof{margin:0}
.anatomy__proof img{
  border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.42);
  border:1px solid rgba(198,162,82,.2);
}
.anatomy__proof figcaption{
  font-size:.84rem;font-weight:300;color:rgba(169,187,174,.9);
  margin-top:1.4rem;text-align:center;letter-spacing:.02em;
}

/* ---------- letter from Lisa ---------- */
.letter{
  display:grid;grid-template-columns:.58fr 1fr;gap:clamp(3rem,7vw,6rem);
  align-items:start;
}
.letter__photo img{border-radius:2px;filter:saturate(.94)}
.letter__cred{
  font-family:var(--ui);font-size:.68rem;font-weight:400;line-height:2.1;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dk);
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule-lt);
}
.letter__body p{margin:0 0 1.35rem}
.letter__body h2{margin-bottom:2.2rem}
.letter__body .pull{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.7rem;line-height:1.36;letter-spacing:-.01em;color:var(--forest);
  padding:2rem 0;margin:2.4rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.letter__body .pull em{font-style:italic}
.sign{
  margin:2.4rem 0 0 !important;font-family:var(--display);
  font-style:italic;font-weight:400;font-size:1.3rem;color:var(--forest);
}
.sign--name{
  font-style:normal;font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dk);
  margin-top:.6rem !important;
}

/* ---------- main opt-in ---------- */
.get__grid{
  display:grid;grid-template-columns:.8fr 1fr;gap:clamp(3rem,7vw,6.5rem);
  align-items:center;
}
.get__art{margin:0}
.get__art img{filter:drop-shadow(0 34px 60px rgba(0,0,0,.52))}
.get__copy h2{margin:2rem 0 0}
.get__copy .lede{margin-bottom:.5rem}

/* ---------- devotional ---------- */
.next{
  display:grid;grid-template-columns:1fr .58fr;gap:clamp(3rem,7vw,6rem);
  align-items:center;
}
.next__copy p{margin:0 0 1.35rem}
.next__copy h2{margin-bottom:2rem}
.next__note{
  font-family:var(--display);font-size:1.28rem;font-weight:400;line-height:1.5;
  color:var(--forest);padding:1.9rem 0;margin:2.2rem 0 2.6rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.next__note strong{font-weight:600;color:var(--gold-dk)}
.next__art{margin:0;text-align:center}
.next__art img{border-radius:2px;box-shadow:0 30px 64px rgba(18,60,42,.24);margin:0 auto}
.next__art figcaption{
  font-family:var(--display);font-size:1.12rem;font-weight:400;line-height:1.4;
  color:var(--forest);margin-top:1.5rem;
}
.next__art figcaption span{
  display:inline-block;margin-top:.7rem;
  font-family:var(--ui);font-size:.64rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dk);
}

/* ---------- footer ---------- */
.foot{background:var(--deep);padding:86px 0 72px;text-align:center}
.foot__mark{
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0 0 2.4rem;
}
.foot__nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem 2.6rem;
  padding-bottom:2.2rem;margin-bottom:2.2rem;
  border-bottom:1px solid rgba(198,162,82,.16);
}
.foot__nav a{
  color:var(--body-dark);text-decoration:none;font-size:.78rem;font-weight:300;
  letter-spacing:.16em;text-transform:uppercase;transition:color .25s ease;
}
.foot__nav a:hover{color:var(--gold)}
.foot__legal{
  font-size:.8rem;font-weight:300;color:rgba(169,187,174,.8);
  margin:0 auto;max-width:60ch;letter-spacing:.02em;
}
.foot__legal--fine{font-size:.74rem;margin-top:1.4rem;line-height:1.75;opacity:.85}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .anatomy,.letter,.get__grid,.next{grid-template-columns:1fr}
  .anatomy__proof{max-width:430px;margin:0 auto}
  .letter__photo{max-width:300px}
  .get__art{max-width:380px;margin:0 auto;order:2}
  .next__art{max-width:300px;margin:0 auto}
  .twelve{grid-template-columns:1fr;gap:0}
}

@media (max-width:760px){
  body{font-size:16.5px}

  .hero{background:var(--deep)}
  .hero__art{
    position:relative;inset:auto;height:clamp(410px,108vw,560px);
    background-image:url("assets/hero-art-mobile.jpg");
    background-position:center top;
  }
  .hero__scrim{
    inset:auto;position:absolute;top:0;left:0;right:0;
    height:clamp(410px,108vw,560px);
    background:linear-gradient(180deg,
      rgba(10,36,26,.40) 0%,rgba(10,36,26,0) 24%,
      rgba(10,36,26,.55) 76%,var(--deep) 100%);
  }
  .hero__inner{min-height:0;padding:0 var(--gut) 76px;display:block;position:static}
  .wordmark{
    position:absolute;top:28px;left:var(--gut);z-index:3;margin:0;
    font-size:.6rem;letter-spacing:.34em;
  }
  .hero__copy{width:100%;margin:0;padding-top:34px}
  .hero h1{font-size:clamp(2.35rem,9.2vw,3.1rem);margin-top:1.6rem}

  .band--quote blockquote{max-width:none}
  .twelve li{font-size:1.28rem;padding:1.25rem 0}
  .letter__body .pull{font-size:1.44rem}
  .btn{width:100%;text-align:center;padding:1.35rem 1rem;letter-spacing:.24em}
  .eyebrow::before{width:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}