/* Homepage button hierarchy — wayfinding draft 2026-09-29.
   Primary   = Subscribe only (site/assets/cta.css, untouched; this file never selects the submit button).
   Secondary = .btn-2: the Subscribe pill's geometry and motion at a lower weight — outlined, 44px, no gradient, no sheen.
   Tertiary  = .btn-3: a navy text link carrying the same arrow.
   Shared with the primary: radius = height ÷ 2, sentence-case semibold label, one arrow 10px from the label,
   1px lift on hover, deeper press on active, 100ms feedback. */

:root{
  --btn-arrow: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");
}

/* ——— secondary: the outlined pill ——— */
.btn-2{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;
  border:1.5px solid var(--navy,#303259);border-radius:22px;background:transparent;
  color:var(--navy,#303259);font-family:var(--util,'Hanken Grotesk',system-ui,sans-serif);
  font-size:16px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;
  text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform 100ms ease-out,box-shadow 100ms ease-out,background 100ms ease-out;
}
.btn-2::after{
  content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--btn-arrow) center/contain no-repeat;mask:var(--btn-arrow) center/contain no-repeat;
  transition:transform 100ms ease-out;
}
.btn-2.ext::after{transform:rotate(-45deg);}
.btn-2:hover{
  transform:translateY(-1px);background:rgba(48,50,89,.06);
  box-shadow:0 2px 3px rgba(20,21,48,.12),0 8px 16px -8px rgba(20,21,48,.35);
}
.btn-2:hover::after{transform:translateX(3px);}
.btn-2.ext:hover::after{transform:rotate(-45deg) translate(2px,0);}
.btn-2:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(20,21,48,.16);}
.btn-2:focus-visible{outline:2px solid var(--navy,#303259);outline-offset:3px;}
/* on the night band */
.btn-2.on-night{border-color:#fef9f1;color:#fef9f1;}
.btn-2.on-night:hover{background:rgba(254,249,241,.1);}
.btn-2.on-night:focus-visible{outline-color:#fef9f1;}

/* ——— tertiary: text link + the same arrow ——— */
.btn-3{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:var(--navy,#303259);font-family:var(--util,'Hanken Grotesk',system-ui,sans-serif);
  font-size:15px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none;
  text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color 100ms ease-out;
}
.btn-3::after{
  content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:var(--btn-arrow) center/contain no-repeat;mask:var(--btn-arrow) center/contain no-repeat;
  transition:transform 100ms ease-out;
}
.btn-3:hover,a:hover .btn-3{text-decoration-color:var(--gold,#B98F53);}
.btn-3:hover::after,a:hover .btn-3::after{transform:translateX(3px);}
.btn-3:focus-visible{outline:2px solid var(--navy,#303259);outline-offset:3px;}
/* the masthead note keeps its own text arrow (markup untouched there): smaller type, no second arrow, navy on hover */
.form-note .latest.btn-3{font-size:.8rem;vertical-align:middle;border-bottom:0;padding-bottom:0;
  text-decoration-color:rgba(185,143,83,.55);}
.form-note .latest.btn-3::after{display:none;}
.form-note .latest.btn-3:hover{color:var(--navy,#303259);text-decoration-color:var(--navy,#303259);}

@media (prefers-reduced-motion:reduce){
  .btn-2,.btn-2::after,.btn-3,.btn-3::after{transition:none;}
  .btn-2:hover,.btn-2:active{transform:none;}
  .btn-2:hover::after,.btn-3:hover::after,a:hover .btn-3::after{transform:none;}
  .btn-2.ext:hover::after{transform:rotate(-45deg);}
}