/* Get Notified (/updates/), Donate (/donate/) and War Feather support (/apply/war-feather/).
   Loads after /css/bevp-shell.css and /css/readability.css and never restyles the shell. The form fields, checks and
   confirmations are the shell's own (.u-form, .u-field, .u-check, .u-done), on bone so the page never runs into the ink footer. */

.fm{background:var(--u-bone)}
.fm .u-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230E0D0B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}

.fm section{padding-block:var(--rd-section)}
.fm-kicker{margin-bottom:var(--u-s4)}
.fm-h1{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(52px,6vw,96px);line-height:.94;letter-spacing:.005em;text-wrap:balance}
.fm-h2{margin:0}
.fm-lead{margin-top:var(--u-s5);max-width:none}
.fm p{text-wrap:pretty}

/* The form sits in the left eight of twelve columns under the full-width intro */
.fm-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);margin-top:clamp(40px,5vw,72px)}
.fm-body > *{grid-column:1 / span 8}
.fm-body .u-form{grid-template-columns:1fr 1fr}
.fm-body .u-done h2{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.4vw,52px);line-height:1}
.fm-body .u-done p{font-size:var(--rd-lead);line-height:1.55;max-width:40em}
.fm-body .u-done .rd-actions{display:flex;flex-wrap:wrap;gap:var(--u-s3) var(--u-s4);margin-top:var(--u-s4)}
.fm-body .u-done .rd-actions .u-btn{margin-top:0}
.fm-failed{font-size:var(--rd-lead)}
.fm-failed a{text-decoration:underline;text-underline-offset:5px}

/* Choice buttons (donation amount and frequency) */
.fm-choice{border:0;margin:0;padding:0;min-width:0}
.fm-choice legend{padding:0;margin-bottom:var(--u-s3);font-family:var(--u-ff-label);font-size:var(--u-fs-label);letter-spacing:.1em;text-transform:uppercase}
.fm-options{display:flex;flex-wrap:wrap;gap:var(--u-s3)}
.fm-option{position:relative}
.fm-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fm-option span{display:inline-flex;align-items:center;justify-content:center;min-width:104px;min-height:var(--u-btn-h);padding:0 24px;border-radius:var(--u-radius);border:1.5px solid rgba(14,13,11,.4);background:rgba(255,255,255,.55);font-family:var(--u-ff-label);font-size:17px;letter-spacing:.06em;color:var(--u-ink)}
.fm-option input:checked + span{background:var(--u-ink);border-color:var(--u-ink);color:var(--u-bone)}
.fm-option input:focus-visible + span{outline:var(--u-focus);outline-offset:3px}
.fm-other{max-width:260px;margin-top:var(--u-s3)}

@media (max-width:899px){
  .fm-body > *{grid-column:1 / -1}
}
@media (max-width:699px){
  .fm-body .u-form{grid-template-columns:1fr}
  .fm-option span{min-width:88px;padding:0 18px}
}

/* Donate: program sections under the form */
.fm-band{background:var(--u-ink);color:var(--u-bone)}
.fm-band .fm-kicker,.fm-band p{color:var(--u-bone-soft)}
.fm-paper{background:var(--u-paper)}
.fm-h3{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1.02;text-wrap:balance}
.fm-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-gap);row-gap:var(--u-s8);align-items:start;margin-top:clamp(40px,5vw,72px)}
.fm-split p:not([class]){margin-top:var(--u-s4);font-size:var(--rd-body);line-height:1.6}
.fm-split .rd-actions,.fm-wide .rd-actions{margin-top:var(--u-s6)}
.fm-wide{margin-top:var(--u-s5)}
.fm-budget{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--u-s6);row-gap:var(--u-s4);margin:var(--u-s5) 0 0;font-size:clamp(17px,1.3vw,20px);line-height:1.35}
.fm-budget dt{color:var(--u-bone)}
.fm-budget dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--u-bone)}
.fm-budget .fm-total{margin-top:var(--u-s3);font-family:var(--u-ff-label);letter-spacing:.06em;text-transform:uppercase}
.fm-budget__note{margin-top:var(--u-s5);font-size:var(--rd-body);line-height:1.6}
.fm-tax{margin-top:var(--u-s4);font-size:var(--u-fs-small);color:var(--u-text-soft)}
.fm-summary{font-size:var(--rd-lead);line-height:1.5;min-height:1.5em}
@media (max-width:899px){
  .fm-split{grid-template-columns:minmax(0,1fr)}
}