/* Newsletter slide-out. Shared by both sites.

   It slides in from the right once a visitor has read enough of a page to
   have an opinion, asks what they actually paddle or camp, and takes an
   email. It never covers the page: no dark overlay, no scroll lock, no
   trapped focus. Someone who ignores it can keep reading.

   Rules it follows:
   - Shown ONCE. If they close it or sign up, it does not come back.
   - Never on a page that is already asking for an email.
   - Escape closes it, and the close button is the first thing a keyboard
     reaches inside it.
   - prefers-reduced-motion: it appears instead of sliding.

   Colours come from the shared brand variables; this file defines none. */

.so{
  position:fixed; right:0; bottom:0; z-index:60;
  width:min(380px, calc(100vw - 24px));
  max-height:min(86vh, 720px); overflow-y:auto;
  background:var(--ink2,#1E1710);
  border:1px solid var(--line,#33261A); border-right:0; border-bottom:0;
  border-radius:16px 0 0 0;
  box-shadow:-18px -10px 60px rgba(0,0,0,.6);
  padding:22px 22px 20px;
  transform:translateX(104%); transition:transform .42s cubic-bezier(.22,.8,.3,1);
}
.so.so-in{transform:translateX(0)}
.so[hidden]{display:none}

.so-x{
  position:absolute; top:10px; right:10px;
  background:none; border:0; color:var(--muted,#A08C68);
  font-size:26px; line-height:1; cursor:pointer; padding:2px 7px; border-radius:8px;
}
.so-x:hover{color:var(--cream,#F3E8D2); background:rgba(243,232,210,.08)}

.so h2{margin:0 6px 4px 0; font-size:19px; line-height:1.25; color:var(--cream,#F3E8D2)}
.so .so-sub{margin:0 0 14px; color:var(--tan,#CBB68C); font-size:13.5px; line-height:1.55}

.so-q{display:block; color:var(--ember2,#E8894A); font-size:10.5px; font-weight:800;
  letter-spacing:1.2px; text-transform:uppercase; margin:0 0 8px}
.so-opts{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:0 0 16px}
.so-opts label{display:flex; align-items:center; gap:8px; cursor:pointer;
  color:var(--cream,#F3E8D2); font-size:13.5px; line-height:1.3}
.so-opts input{width:16px; height:16px; flex:none; accent-color:var(--ember,#D2622A);
  cursor:pointer; margin:0}

.so-field{display:block; width:100%; background:rgba(12,10,6,.6);
  border:1px solid var(--line,#33261A); border-radius:10px; padding:12px 14px;
  color:var(--cream,#F3E8D2); font:inherit; font-size:15px; outline:none}
.so-field:focus{border-color:var(--ember,#D2622A)}
.so-field::placeholder{color:var(--muted,#A08C68)}

.so-go{display:block; width:100%; margin-top:10px; background:var(--ember,#D2622A);
  color:#1a1206; font-weight:800; font-size:15px; border:0; border-radius:10px;
  padding:13px 20px; cursor:pointer}
.so-go:hover{background:var(--ember2,#E8894A)}
.so-go[disabled]{opacity:.6; cursor:default}

.so-fine{margin:11px 0 0; color:var(--muted,#A08C68); font-size:11.5px; line-height:1.5}
.so-fine a{color:var(--tan,#CBB68C)}
.so-msg{margin:10px 0 0; font-size:13.5px; line-height:1.5}
.so-msg.ok{color:var(--cream,#F3E8D2)}
.so-msg.bad{color:var(--ember2,#E8894A)}
.so-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media(max-width:700px){
  .so{width:100%; border-radius:16px 16px 0 0; border-right:1px solid var(--line,#33261A);
      padding:18px 18px 16px; max-height:80vh}
  .so h2{font-size:17px}
  .so-field{font-size:16px}   /* 16px stops iOS zooming the page on focus */
  .so-opts{gap:4px 10px}
}
@media(prefers-reduced-motion:reduce){
  .so{transition:none}
}