/* Newsletter popup — lifted from the live/8.5 site (self-contained, scoped to
   #newsletterOverlay so it can't clash with the site theme). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

#newsletterOverlay{
  /* Brand burgundy — follows the site's --bar (the logo burgundy) so the popup can't
     drift from the header again. */
  --nlp-cream:#F7F7F7; --nlp-paper:#FFFFFF; --nlp-forest:var(--bar); --nlp-forest-dark:color-mix(in srgb, var(--bar) 75%, #000);
  --nlp-rust:var(--bar); --nlp-brass:#FFFFFF; --nlp-ink:#2A241F; --nlp-ink-soft:#5B5347; --nlp-line:#DCD3BF;
  position:fixed; inset:0; background:rgba(24,20,15,0.55); display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s ease;
}
#newsletterOverlay.active{ opacity:1; pointer-events:auto; }
#newsletterOverlay .newsletter-modal{
  background:var(--nlp-paper); width:100%; max-width:860px; max-height:92vh; overflow-y:auto; border-radius:6px;
  display:grid; grid-template-columns:1fr 1fr; box-shadow:0 30px 70px rgba(0,0,0,0.35); position:relative;
  transform:translateY(14px) scale(.985); transition:transform .35s ease;
  font-family:'Source Sans 3', sans-serif; color:var(--nlp-ink);
}
#newsletterOverlay.active .newsletter-modal{ transform:translateY(0) scale(1); }
#newsletterOverlay .newsletter-close{
  position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.85); border:1px solid var(--nlp-line); color:var(--nlp-ink); font-size:18px;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5;
}
#newsletterOverlay .newsletter-close:hover{ background:#fff; }

#newsletterOverlay .newsletter-left{ background:var(--nlp-forest); color:var(--nlp-cream); display:flex; flex-direction:column; }
#newsletterOverlay .newsletter-left-content{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; justify-content:center; }
#newsletterOverlay .newsletter-kicker{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--nlp-brass); font-weight:600; margin-bottom:8px; }
#newsletterOverlay .newsletter-left-content h1{ font-family:'Fraunces', serif; font-weight:500; font-size:28px; line-height:1.15; margin:0 0 10px; color:var(--nlp-brass); }
#newsletterOverlay .newsletter-intro{ font-size:14.5px; line-height:1.55; color:#D9D2C2; margin:0 0 18px; }
#newsletterOverlay .newsletter-perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
#newsletterOverlay .newsletter-perks li{ font-size:13.5px; line-height:1.5; padding-left:20px; position:relative; color:#EDE8D9; }
/* tick, per the client's mockup (was an em-dash) */
#newsletterOverlay .newsletter-perks li::before{ content:"\2713"; position:absolute; left:0; top:-1px; color:var(--nlp-brass); font-size:13px; }

#newsletterOverlay .newsletter-content{ padding:30px 30px 26px; display:flex; flex-direction:column; justify-content:center; }
/* The gift is now a plain lead paragraph — the client's mockup dropped the
   bordered card and the cover thumbnail. */
#newsletterOverlay .gift-note{ margin:0 0 22px; font-size:13.5px; line-height:1.5; color:var(--nlp-ink-soft); }
#newsletterOverlay .gift-note strong{ color:var(--nlp-ink); }

#newsletterOverlay form{ display:flex; flex-direction:column; gap:14px; }
#newsletterOverlay .newsletter-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
#newsletterOverlay .newsletter-error{ color:#b4552d; font-size:12.5px; line-height:1.4; margin:-4px 0 0; min-height:1px; }
#newsletterOverlay .newsletter-done{ text-align:center; padding:16px 4px 6px; }
#newsletterOverlay .newsletter-done h3{ font-family:'Fraunces', serif; font-weight:500; font-size:21px; color:var(--nlp-forest); margin:0 0 8px; }
#newsletterOverlay .newsletter-done p{ font-size:14px; color:var(--nlp-ink-soft); margin:0; line-height:1.5; }
#newsletterOverlay .form-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--nlp-ink); }
#newsletterOverlay .form-group .form-control{ width:100%; padding:10px 12px; border:1px solid var(--nlp-line); border-radius:3px; background:#fff; font-family:'Source Sans 3', sans-serif; font-size:14px; color:var(--nlp-ink); }
#newsletterOverlay .form-group .form-control:focus{ outline:none; border-color:var(--nlp-forest); box-shadow:0 0 0 3px rgba(61,36,38,0.14); }
#newsletterOverlay .newsletter-submit{ margin-top:4px; background:var(--nlp-rust); color:#fff; border:1px solid var(--gold); padding:13px 18px; border-radius:3px; font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer; font-family:'Source Sans 3', sans-serif; }
#newsletterOverlay .newsletter-submit:hover{ background:#5a0000; }
/* The form opens empty, so the disabled state is what everyone sees first. At
   .5 it read as broken rather than waiting; .72 keeps it clearly inactive while
   still looking like the solid button in the client's mockup. */
#newsletterOverlay .newsletter-submit:disabled{ opacity:.72; cursor:not-allowed; }
#newsletterOverlay .newsletter-smallprint{ font-size:11.5px; color:var(--nlp-ink-soft); text-align:center; margin-top:12px; line-height:1.5; }

@media (max-width:680px){
  #newsletterOverlay .newsletter-modal{ grid-template-columns:1fr; }
  #newsletterOverlay .newsletter-left-content{ padding:20px 22px 22px; }
  #newsletterOverlay .newsletter-left-content h1{ font-size:23px; }
  #newsletterOverlay .newsletter-content{ padding:22px 22px 20px; }
}