/* Subscribe form — one shared treatment for every newsletter form on the site.
   2026-09-29, variant B (Joe's pick): the form itself becomes a recessed track holding the field and the button.
   The button has a top-lit gradient, a sheen that sweeps across on hover and a deeper press. While sending,
   the label gives way to a spinner. When done, the button shrinks into a gold circle, a check draws in, and
   the thank-you line appears inside the track (states driven by /assets/cta.js).
   The six decisions: 48px tall / 24px sides · 17px semibold sentence-case label · label ≥4.5:1, edges ≥3:1 ·
   light from above, shadow falls down · radius = height ÷ 2, one icon 10px from the label · feedback in 100ms,
   done in 300. Loaded after each page's inline styles, so these rules win at equal specificity. */

:root{ --cta-navy:#303259; --cta-edge:#8f8a93; --cta-gold:#B98F53; --cta-gold-hi:#d9b886; }

/* ——— the track ——— */
form.subform,
form[name^="notify"]{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;
  min-height:58px;padding:4px 4px 4px 20px;border-radius:29px;
  border:1px solid var(--cta-edge);
  background:linear-gradient(180deg,#ebe4d8 0%,#f7f2ea 100%);
  box-shadow:inset 0 2px 4px rgba(20,21,48,.18),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.8);
  transition:border-color 100ms ease-out,box-shadow 100ms ease-out;
}
form.subform:focus-within,
form[name^="notify"]:focus-within{border-color:var(--cta-navy);
  box-shadow:inset 0 2px 4px rgba(20,21,48,.18),0 0 0 3px rgba(48,50,89,.16);}
form.subform input[type=email],
form[name^="notify"] input[type=email]{
  flex:1;width:0;min-width:0;min-height:48px;margin:0;padding:0;
  border:none;border-radius:0;background:transparent;box-shadow:none;outline:none;
}
form.subform input[type=email]:focus,
form[name^="notify"] input[type=email]:focus{outline:none;}
.cta-msg{flex:1;min-width:0;padding:6px 0;font-family:var(--text,'Newsreader',Georgia,serif);font-style:italic;
  font-size:.95rem;line-height:1.3;color:var(--cta-navy);animation:cta-fadeup 300ms ease-out;}
@keyframes cta-fadeup{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ——— the button ——— */
form.subform button[type=submit],
form[name^="notify"] button[type=submit]{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  flex:none;width:auto;height:48px;margin:0;padding:0 24px;border:none;border-radius:24px;
  color:#fff;cursor:pointer;white-space:nowrap;
  font-family:var(--util,'Hanken Grotesk',system-ui,sans-serif);
  font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1;
  background:linear-gradient(180deg,#50538f 0%,#34365f 52%,#26284a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.22),0 1px 2px rgba(20,21,48,.32),0 6px 14px -4px rgba(20,21,48,.5);
  transition:transform 100ms ease-out,box-shadow 100ms ease-out,filter 100ms ease-out,color 100ms ease-out,
             width 300ms cubic-bezier(.3,.7,.3,1),padding 300ms cubic-bezier(.3,.7,.3,1);
  -webkit-tap-highlight-color:transparent;
}
/* sheen: a band of light that sweeps across on hover */
form.subform button[type=submit]::before,
form[name^="notify"] button[type=submit]::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-130%);
}
form.subform button[type=submit]:hover::before,
form[name^="notify"] button[type=submit]:hover::before{transform:translateX(130%);transition:transform 300ms ease-out;}
/* the one icon: an arrow, 10px from the label, that leans forward on hover */
form.subform button[type=submit]::after,
form[name^="notify"] button[type=submit]::after{
  content:"";width:16px;height:16px;flex:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform 100ms ease-out,opacity 100ms ease-out;
}
form.subform button[type=submit]:hover,
form[name^="notify"] button[type=submit]:hover{
  transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.22),0 2px 3px rgba(20,21,48,.3),0 10px 20px -6px rgba(20,21,48,.55);
}
form.subform button[type=submit]:hover::after,
form[name^="notify"] button[type=submit]:hover::after{transform:translateX(3px);}
form.subform button[type=submit]:active,
form[name^="notify"] button[type=submit]:active{
  transform:translateY(1px) scale(.98);filter:brightness(.96);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.32),0 0 0 rgba(20,21,48,0);
}
form.subform button[type=submit]:focus-visible,
form[name^="notify"] button[type=submit]:focus-visible{outline:2px solid var(--cta-navy);outline-offset:3px;}

/* sending: the label fades and a spinner takes its place */
form.subform button.is-busy,
form[name^="notify"] button.is-busy,
form.subform button.is-done,
form[name^="notify"] button.is-done{pointer-events:none;color:transparent;}
form.subform button.is-busy::after,
form[name^="notify"] button.is-busy::after{
  position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  -webkit-mask:none;mask:none;background:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:cta-spin 600ms linear infinite;
}
@keyframes cta-spin{to{transform:rotate(360deg);}}

/* done: the button shrinks into a gold circle and a check draws in */
form.subform button.is-done,
form[name^="notify"] button.is-done{padding:0;gap:0;background:linear-gradient(180deg,var(--cta-gold-hi) 0%,var(--cta-gold) 100%);}
form.subform button.is-done::after,
form[name^="notify"] button.is-done::after{
  position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/contain no-repeat;
  clip-path:inset(0 100% 0 0);animation:cta-draw 300ms 150ms ease-out forwards;
}
@keyframes cta-draw{to{clip-path:inset(0 0 0 0);}}

/* no-script fallback: if cta.js never runs, the page's own thank-you line still opens with a check */
.subform ~ .thanks::before,form[name^="notify"] ~ .thanks::before{content:"\2713";display:inline-block;margin-right:10px;
  font-style:normal;font-family:var(--util,system-ui,sans-serif);font-weight:700;color:var(--cta-gold);}

/* sticky pill: same label, a thumb-sized target */
.subpill{min-height:44px;padding:0 18px 0 15px;font-size:.84rem;letter-spacing:0;
  transition:opacity .3s ease,transform .3s ease,background 100ms ease-out;}

@media (max-width:640px){
  form.subform,form[name^="notify"]{padding-left:16px;}
  form.subform button[type=submit],form[name^="notify"] button[type=submit]{padding:0 18px;}
  .subpill{min-height:44px;font-size:.8rem;padding:0 16px 0 13px;}
}
@media (prefers-reduced-motion:reduce){
  form.subform button[type=submit],form[name^="notify"] button[type=submit],
  form.subform button[type=submit]::after,form[name^="notify"] button[type=submit]::after{transition:none;}
  form.subform button[type=submit]:hover,form[name^="notify"] button[type=submit]:hover{transform:none;}
  form.subform button[type=submit]:hover::before,form[name^="notify"] button[type=submit]:hover::before{transition:none;transform:translateX(-130%);}
  form.subform button.is-done::after,form[name^="notify"] button.is-done::after{animation:none;clip-path:none;}
  .cta-msg{animation:none;}
}