/* ============================================================
   SHELL. Loaded last on every page, on top of flex.css or site.css.
   1. brand guard: square corners, no drop shadows
   2. nav button
   3. shared footer (.sf)
   4. shared email signup (.su), driven by assets/signup.js
   Values come from brand-tokens.css.
   ============================================================ */

/* ---------- 1. brand guard ---------- */
.btn,.nav__btn,.chip,.card2,.card,.freebie__card,.faq__item,.snip__page,.dd__menu,.dd__menu a,
.shot img,.fan img,.footstrip__photos img,.drop__shelf,
.form--stack input,.form--row input,.form input{border-radius:0 !important}
.card2,.card,.freebie__card,.faq__item,.snip__page,.dd__menu,.shot img,.fan img,.footstrip__photos img{box-shadow:none !important}
.card2,.card,.freebie__card,.faq__item,.snip__page{border:1px solid var(--ink-12)}
.dd__menu{border:1px solid var(--ink) !important}

/* ---------- 2. nav ---------- */
.nav .nav__btn{
  display:inline-flex;align-items:center;justify-self:end;min-height:44px;
  padding:8px 18px !important;white-space:nowrap;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  background:var(--coral);color:var(--ink) !important;border:2px solid var(--coral) !important;
  transition:background .15s,color .15s,border-color .15s;
}
.nav .nav__btn:hover{background:var(--ink);border-color:var(--ink) !important;color:var(--cream) !important}
.nav--over .nav__btn:hover{background:var(--cream);border-color:var(--cream) !important;color:var(--ink) !important}
.nav .nav__btn:focus-visible{outline:3px solid var(--chartreuse);outline-offset:3px}
.nav__mark{display:inline-flex;align-items:center;min-height:44px}
.nav__links a[aria-current]{border-bottom-color:currentColor}
@media (max-width:760px){
  .nav .nav__btn{font-size:12px;letter-spacing:.05em;padding:8px 12px !important}
  .nav__links{gap:var(--s1) var(--s3) !important}
  .dd__menu a{min-height:44px;display:block}
}

/* ---------- 3. footer ---------- */
.sf{background:var(--ink);color:var(--cream);margin:0;padding:0}
.sf__in{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,104px) var(--gut) var(--s3)}
.sf__signup{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) clamp(40px,6vw,96px);align-items:end}
.sf__h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(44px,5.4vw,84px);line-height:.92;letter-spacing:-.015em;
  color:var(--cream);margin:0 0 var(--s2);max-width:12ch;
}
.sf__p{font-family:var(--body);font-size:18px;line-height:1.5;color:var(--cream-70);margin:0;max-width:40ch}
.sf__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s1) var(--s4);
  margin-top:clamp(48px,6vw,88px);padding-top:var(--s2);border-top:1px solid var(--cream-16);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.sf__bar p{margin:0;color:var(--cream-70);max-width:none}
.sf__bar a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.sf__bar a:hover{color:var(--coral)}
.sf__bar a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ---------- 4. signup ---------- */
.su{margin:0;max-width:560px;width:100%}
.su__label{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);margin:0 0 10px}
.su__row{display:flex;gap:0}
.su__input{
  flex:1;min-width:0;min-height:56px;font-family:var(--body);font-size:17px;line-height:1.2;
  padding:16px;border:2px solid var(--cream);border-right:0;border-radius:0 !important;
  background:var(--cream);color:var(--ink);-webkit-appearance:none;appearance:none;
}
.su__input::placeholder{color:var(--ink-66)}
.su__input:focus{outline:3px solid var(--chartreuse);outline-offset:2px}
.su__btn{
  flex:none;min-height:56px;padding:16px 24px;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--coral);color:var(--ink);border:2px solid var(--coral);border-radius:0;
  transition:background .15s,color .15s,border-color .15s;
}
.su__btn:hover{background:var(--cream);border-color:var(--cream)}
.su__btn:focus-visible{outline:3px solid var(--chartreuse);outline-offset:3px}
.su__btn[disabled]{opacity:.6;cursor:default}
.su__msg{font-family:var(--body);font-size:16px;font-weight:600;line-height:1.4;color:var(--cream);margin:14px 0 0;max-width:none}
.su__msg--error{color:var(--coral)}
.su__msg--done{font-size:20px;margin-top:0;color:var(--chartreuse)}
.su [hidden]{display:none !important}

@media (max-width:900px){
  .sf__signup{grid-template-columns:1fr;align-items:start}
}
@media (max-width:560px){
  .su__row{flex-direction:column;gap:12px}
  .su__input{border-right:2px solid var(--cream);width:100%}
  .su__btn{width:100%}
  .sf__bar{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.su__btn,.nav .nav__btn{transition:none}}

/* tap targets on phones */
@media (max-width:760px){
  .nav__links a{min-width:44px}
  .arrowlink,.ab-links .textlink{display:inline-flex;align-items:center;min-height:44px}
}