/* Soul & Sage Almanac newsletter signup: pop-up, side tab, footer row */
:root{
  --nl-linen:#F6F1E8; --nl-moss-deep:#4A5545; --nl-terra:#C97A4A; --nl-terra-deep:#A85F35; --nl-gold:#D7B46A;
  --nl-display:'Marcellus',Georgia,serif; --nl-body:'Outfit',system-ui,sans-serif;
}
.nl-hide{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* checkbox */
.nl-check{display:flex;gap:11px;align-items:flex-start;font:300 13.5px/1.5 var(--nl-body);cursor:pointer;text-align:left}
.nl-check input{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;border:1.5px solid currentColor;border-radius:3px;display:grid;place-items:center;cursor:pointer;background:transparent}
.nl-check input:checked{background:var(--nl-terra);border-color:var(--nl-terra)}
.nl-check input:checked::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.nl-check input:focus-visible,.nl-btn:focus-visible,.nl-x:focus-visible,.nl-tab:focus-visible,.nl-skip:focus-visible,.nl-go:focus-visible{outline:2px solid var(--nl-gold);outline-offset:3px}
.nl-err{display:none;font:400 13px/1.4 var(--nl-body);color:#F2C2A4;margin-top:4px}
.nl-failed .nl-err{display:block}

/* sent states */
.nl-done{display:none}
.nl-sent .nl-form,.nl-sent .nl-pre{display:none!important}
.nl-sent .nl-done{display:block}

/* ---------- pop-up ---------- */
.nl-scrim{position:fixed;inset:0;background:rgba(37,41,33,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.nl-scrim.open{opacity:1;visibility:visible}
.nl-pop{position:fixed;z-index:1001;left:50%;top:50%;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),visibility .5s;
  background:var(--nl-moss-deep);color:var(--nl-linen);border-radius:260px 260px 8px 8px;padding:64px 52px 40px;text-align:center;box-shadow:0 40px 90px rgba(20,24,18,.45)}
.nl-pop.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.nl-x{position:absolute;top:56px;right:22px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;opacity:.75;transition:opacity .2s,background .2s}
.nl-x:hover{opacity:1;background:rgba(244,239,228,.1)}
.nl-x svg{width:18px;height:18px}
.nl-sun{width:132px;height:132px;margin:0 auto 22px;display:block}
.nl-pop h2{font:400 clamp(28px,4vw,36px)/1.12 var(--nl-display);text-wrap:balance;color:var(--nl-linen);margin:0}
.nl-pop .nl-pre p{font:300 15.5px/1.65 var(--nl-body);color:rgba(246,241,232,.75);margin:14px auto 0;max-width:40ch}
.nl-pop .nl-form{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.nl-pop .nl-field{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(246,241,232,.4);border-radius:0;color:var(--nl-linen);text-align:center;font:400 17px/1.2 var(--nl-body);padding:14px 8px;outline:none;transition:border-color .2s}
.nl-pop .nl-field::placeholder{color:rgba(246,241,232,.5)}
.nl-pop .nl-field:focus{border-bottom-color:var(--nl-gold)}
.nl-pop .nl-check{color:rgba(246,241,232,.72);justify-content:center}
.nl-btn{font:500 13px/1 var(--nl-body);letter-spacing:.16em;text-transform:uppercase;padding:17px 22px;border:0;border-radius:999px;cursor:pointer;background:var(--nl-terra);color:#fff;transition:background .2s}
.nl-btn:hover{background:var(--nl-terra-deep)}
.nl-btn[disabled]{opacity:.7;cursor:wait}
.nl-skip{background:none;border:0;font:300 13px/1 var(--nl-body);color:rgba(246,241,232,.65);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center;padding:6px}
.nl-pop .nl-done h3{font:400 26px/1.2 var(--nl-display);margin:6px 0 10px;color:var(--nl-linen)}
.nl-pop .nl-done p{font:300 15px/1.6 var(--nl-body);color:rgba(246,241,232,.75);margin:0}

/* ---------- side tab ---------- */
.nl-tab{position:fixed;right:0;top:58%;z-index:900;transform:translate(110%,-50%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:8px;padding:16px 9px;border:0;border-radius:8px 0 0 8px;
  background:var(--nl-terra);color:#fff;font:500 10px/1 var(--nl-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:-4px 0 18px rgba(30,34,28,.16)}
.nl-tab:hover{background:var(--nl-terra-deep)}
.nl-tab svg{width:15px;height:15px}
body.nl-tab-on .nl-tab{transform:translate(0,-50%)}
body.nl-tab-on.nl-foot-in .nl-tab{transform:translate(110%,-50%)}

/* ---------- footer row ---------- */
.nl-foot{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;max-width:860px;margin:0 auto;padding:52px 0 44px}
.nl-foot .nl-intro{text-align:left;min-width:0}
.nl-foot h4{font:400 24px/1.2 var(--nl-display);color:var(--nl-linen);margin:0 0 6px;letter-spacing:0;text-transform:none}
.nl-foot .nl-lede{font:300 14.5px/1.6 var(--nl-body);color:rgba(244,239,228,.65);margin:0}
.nl-foot .nl-form{flex:0 1 380px;min-width:0}
.nl-foot .nl-row{display:flex;border-bottom:1.5px solid rgba(244,239,228,.35);transition:border-color .2s}
.nl-foot .nl-row:focus-within{border-bottom-color:var(--nl-gold)}
.nl-foot .nl-field{flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:var(--nl-linen);padding:12px 0;font:400 15px/1.2 var(--nl-body);outline:none}
.nl-foot .nl-field::placeholder{color:rgba(244,239,228,.5)}
.nl-foot .nl-go{background:none;border:0;color:var(--nl-gold);cursor:pointer;padding:0 4px;display:grid;place-items:center}
.nl-foot .nl-go svg{width:22px;height:22px}
.nl-foot .nl-check{margin-top:12px;font-size:12.5px;color:rgba(244,239,228,.6)}
.nl-foot .nl-done{flex:0 1 380px}
.nl-foot .nl-done h3{font:400 20px/1.3 var(--nl-display);color:var(--nl-linen);margin:0}
.nl-foot .nl-done p{font:300 13.5px/1.6 var(--nl-body);color:rgba(244,239,228,.62);margin:4px 0 0}

@media (max-width:760px){
  .nl-pop{padding:46px 26px 30px;border-radius:200px 200px 8px 8px}
  .nl-x{top:20px;right:14px}
  .nl-sun{width:100px;height:100px}
  .nl-foot{flex-direction:column;align-items:stretch;gap:20px;padding:40px 0 36px}
  .nl-foot .nl-form,.nl-foot .nl-done{flex-basis:auto}
}
@media (prefers-reduced-motion:reduce){.nl-pop,.nl-scrim,.nl-tab{transition:none}}