/* ==========================================================================
   Adam Walker for Mayor of Qualicum Beach
   Hand-written CSS. No framework, no CDN, no build step.

   Old-device rules followed throughout:
   - flex containers space their children with margins, never `gap`
     (flex gap is broken in Safari < 14.1, which is a lot of iPads out there).
     Grid containers do use gap, with the legacy `grid-gap` alias alongside.
   - every clamp()/min() is preceded by a plain static value as a fallback.
   - `inset` is written out as top/right/bottom/left.
   - aspect-ratio boxes use the padding-top percentage technique, which works
     everywhere, and only upgrade to aspect-ratio where it is supported.
   ========================================================================== */

/* ---- fonts: self-hosted, so no third-party request blocks first paint ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/montserrat-var.woff2) format('woff2'),url(../fonts/montserrat-600.woff) format('woff')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/montserrat-var.woff2) format('woff2'),url(../fonts/montserrat-700.woff) format('woff')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/sourcesans3-var.woff2) format('woff2'),url(../fonts/sourcesans3-400.woff) format('woff')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/sourcesans3-var.woff2) format('woff2'),url(../fonts/sourcesans3-600.woff) format('woff')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/sourcesans3-var.woff2) format('woff2'),url(../fonts/sourcesans3-700.woff) format('woff')}

:root{
  --blue:#1E5AA6;--blue-dk:#17497f;--navy:#0D2341;--paper:#faf9f6;--sand:#efece4;
  --ink:#0D2341;--gray:#59636f;--line:#dbd8d0;--white:#fff;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#faf9f6;background:var(--paper);color:#0D2341;color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;border:0}
a{color:#1E5AA6;color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dk);text-decoration:underline}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button{font-family:inherit}

/* Visible keyboard focus. :focus is the base so old browsers still show it;
   :focus-visible narrows it to keyboard users where supported. */
a:focus,button:focus{outline:3px solid #1E5AA6;outline:3px solid var(--blue);outline-offset:2px}
.on-dark a:focus,.band-blue button:focus{outline-color:#fff}
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* Form fields show focus by thickening their own border only. An outline on
   top of that reads as two stacked borders. */
input:focus,select:focus,textarea:focus{outline:none}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:14px 20px;font-weight:700;z-index:200}
.skip:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.kicker{font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--blue)}
.kicker.on-dark{color:#9fbbdd}
.ic{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic.sm{width:20px;height:20px}
.pic{width:42px;height:42px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;color:var(--blue)}
.vh-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- brand lockup ---- */
.lockup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;flex:none}
.lockup>*+*{margin-left:11px}
.lockup:hover{text-decoration:none}
.lockup .nm{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:1;color:var(--navy);
  -webkit-transform:scaleX(.88);transform:scaleX(.88);-webkit-transform-origin:left;transform-origin:left;
  letter-spacing:-.3px;font-size:29px;white-space:nowrap;margin-right:-.82em}
.lockup .sep{width:1.5px;height:21px;background:var(--line);flex:none}
.lockup .rl{font-family:var(--sans);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.34em;color:var(--blue);margin-top:3px;white-space:nowrap}
.lockup.brand{display:block;text-align:center;width:-webkit-max-content;width:max-content}
.lockup.brand>*+*{margin-left:0}
.lockup.brand .nm{margin-right:0;font-size:42px;line-height:.95;letter-spacing:-.5px;-webkit-transform-origin:center;transform-origin:center}
.lockup.brand .nm span{display:block}
.lockup.brand .rule{display:block;width:44px;height:3px;background:#fff;margin:16px auto 12px}
.lockup.brand .rl{font-size:13.5px;letter-spacing:.42em;text-indent:.42em;margin-top:0}
.lockup.on-dark .nm{color:#fff}
.lockup.on-dark .rl{color:#9fbbdd}

/* ---- buttons ---- */
.btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  min-height:52px;padding:14px 26px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.02em;
  border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;text-align:center;
  -webkit-transition:background .15s,border-color .15s,color .15s;transition:background .15s,border-color .15s,color .15s}
.btn>*+*{margin-left:10px}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff;text-decoration:none}
.btn[disabled]{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff}
.btn.onblue{background:#fff;border-color:#fff;color:var(--blue)}
.btn.onblue:hover{background:#cfdff2;border-color:#cfdff2;color:var(--navy)}
.btn.light{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.btn.light:hover{background:#fff;color:var(--blue);border-color:#fff}
.btn.sm{min-height:44px;padding:10px 20px;font-size:15px}
.btn.full{width:100%}

/* ---- header ---- */
header{position:-webkit-sticky;position:sticky;top:0;z-index:60;background:#faf9f6;background:rgba(250,249,246,.96);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:84px;padding:10px 0}
nav{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
nav>*+*{margin-left:26px}
nav a.lk{font-weight:600;font-size:16.5px;color:var(--navy);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav a.lk:hover{color:var(--blue);border-bottom-color:var(--blue);text-decoration:none}
nav a.lk.on{color:var(--blue);border-bottom-color:var(--blue)}
#mnav a.on{color:var(--blue)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:2px solid var(--navy);background:none;cursor:pointer;padding:0;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.burger i{display:block;width:20px;height:2px;background:var(--navy);margin:2.5px 0}
#mnav{display:none;border-top:1px solid var(--line);padding:8px 0 20px}
#mnav.open{display:block}
#mnav a{display:block;padding:13px 0;font-weight:600;font-size:18px;color:var(--navy);border-bottom:1px solid var(--line)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);min-height:660px;min-height:min(76vh,660px)}
.hero .panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}
.hero .panel .in{padding:76px 52px;padding-left:max(28px,calc((100vw - 1180px)/2 + 28px));max-width:560px;max-width:calc(560px + max(0px,(100vw - 1180px)/2))}
.hero h1{font-size:40px;font-size:clamp(30px,2.9vw,44px);color:#fff}
.hero h1 span{display:block;white-space:nowrap}
.hero .sub{margin-top:26px;font-size:19px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:#dbe7f5;max-width:520px}
.hero .cta{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:34px}
.hero .cta .btn{margin:0 14px 14px 0}
.hero .ph{position:relative;overflow:hidden;min-height:100%;background:var(--navy)}
.hero .ph img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:100% 50%;object-position:100% 50%}

/* ---- vote bar ---- */
.votebar{background:var(--blue);color:#fff}
.votebar .wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding-top:44px;padding-bottom:44px}
.vitem{-webkit-box-flex:1;-ms-flex:1 1 240px;flex:1 1 240px;padding:2px 40px;border-left:1px solid rgba(255,255,255,.28)}
.vitem:first-child{border-left:none;padding-left:0}
.vitem em{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#bcd2ec}
.vitem strong{display:block;font-family:var(--head);font-weight:700;font-size:25px;font-size:clamp(21px,2.1vw,27px);margin-top:10px;line-height:1.05;white-space:nowrap;letter-spacing:-.01em}
.vitem .vpin{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.vitem .vpin>*+*{margin-left:10px}
.vitem .vpin a{color:#fff}
.vitem .vpin a:hover{color:#fff;text-decoration:underline}
.vitem .vpin .ic{width:24px;height:24px;color:#bcd2ec}

/* ---- sections ---- */
section{padding:96px 0}
section.tight{padding:72px 0}
.sec-head{max-width:740px;margin-bottom:52px}
.sec-head.wide{max-width:none}
.sec-head h2{font-size:38px;font-size:clamp(28px,3.2vw,42px)}
.sec-head p{margin-top:18px;font-size:20px;color:var(--gray);max-width:740px}
.sec-head p.oneline{max-width:none;white-space:nowrap}
.band-sand{background:var(--sand)}
.band-blue{background:var(--blue);color:#fff}
.band-blue h2,.band-blue h3{color:#fff}

/* ---- about ---- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-gap:64px;gap:64px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
/* padding-top box keeps the 4:3 crop on browsers with no aspect-ratio support */
.story .ph .frame{position:relative;height:0;padding-top:75%;overflow:hidden;background:var(--sand)}
.story .ph .frame img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 34%;object-position:50% 34%}
.story .cap{margin-top:14px;font-size:14.5px;color:var(--gray)}
.story h2{font-size:36px;font-size:clamp(28px,3.2vw,40px)}
.story .body{margin-top:24px;font-size:19px;color:var(--gray)}
.story .body p+p{margin-top:17px}
.story .body b{color:var(--ink);font-weight:600}
.facts{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.facts div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:17.5px;color:var(--gray)}
.facts div+div{margin-top:13px}
.facts div>*+*{margin-left:12px}
.facts b{color:var(--navy)}
.facts .ic{color:var(--blue);width:21px;height:21px;margin-top:4px}

/* ---- working together ---- */
.feat{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);background:var(--navy);-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
.feat .txt{color:#fff;padding:78px 64px;padding-left:max(28px,calc((100vw - 1180px)/2 + 28px));
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.feat h2{font-size:40px;font-size:clamp(30px,3.4vw,44px);color:#fff}
.feat .txt p{margin-top:22px;font-size:19px;line-height:1.55;color:#dbe7f5;max-width:600px}
.boards{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.boards .bl{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9fbbdd}
.boards .bnames{margin-top:13px;font-size:17px;font-weight:600;color:#fff}
.boards .bnames span{white-space:nowrap}
.boards .bnames span+span:before{content:"";display:inline-block;width:4px;height:4px;background:#9fbbdd;vertical-align:middle;margin:0 13px}
.feat .vh{position:relative;overflow:hidden;min-height:420px;background:var(--navy)}
.feat .vh video,.feat .vh img.pv{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:64% 40%;object-position:64% 40%}
.feat .vh video{opacity:0;-webkit-transition:opacity .7s ease;transition:opacity .7s ease}
.feat .vh video.on{opacity:1}

/* ---- priorities ---- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:26px;gap:26px}
.pillar{background:#fff;border:1px solid var(--line);padding:36px 34px 38px;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.pillar>*+*{margin-top:12px}
.pillar .pt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.pillar .pt>*+*{margin-left:14px}
.pillar .pt .pic{width:54px;height:54px;stroke-width:1.45}
.pillar h3{font-size:22px;line-height:1.14;color:var(--blue)}
.pillar p{font-size:17.5px;color:var(--gray)}
.pillar.ask{background:var(--blue);color:#fff;border-color:var(--blue)}
.pillar.ask h3,.pillar.ask .pic{color:#fff}
.pillar.ask>p{color:#d5e2f2}
.pillar.ask a{color:#fff;font-weight:700;text-decoration:underline}
.pillar.ask a:hover{color:#cfdff2}

/* ---- modal ---- */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(13,35,65,.6);
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:100;padding:20px}
.modal[hidden]{display:none}
.mbox{background:#fff;max-width:520px;width:100%;padding:38px 36px;position:relative;max-height:90vh;overflow:auto}
.mbox h3{font-size:24px;margin-bottom:8px}
.mbox .msub{font-size:16.5px;color:var(--gray);margin-bottom:22px}
.mclose{position:absolute;top:12px;right:12px;width:40px;height:40px;border:none;background:none;font-size:26px;line-height:1;color:var(--gray);cursor:pointer}
.mclose:hover{color:var(--navy)}

/* ---- videos ---- */
.issues{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:30px;gap:30px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
.vcard{background:var(--paper);border:1px solid var(--line);display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.vcard .thumb{position:relative;height:0;padding-top:56.25%;background:#dcd9d1;overflow:hidden}
.vcard .thumb .play{position:absolute;top:50%;left:50%;margin:-30px 0 0 -30px;width:60px;height:60px;border:3px solid rgba(13,35,65,.4);
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.vcard .thumb .play:before{content:"";width:0;height:0;border-left:16px solid rgba(13,35,65,.48);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vcard .tag{position:absolute;left:0;top:0;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;z-index:2}
.vcard .vb{padding:26px 26px 28px;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}
.vcard .vb>*+*{margin-top:12px}
.vcard h3{font-size:20.5px;line-height:1.16}
.vcard p{font-size:16.5px;color:var(--gray)}
.vcard .when{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ncard{background:var(--navy);color:#fff;padding:36px 34px 38px;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.ncard>*+*{margin-top:18px}
.ncard h3{font-size:23px;font-size:clamp(21px,2vw,25px);color:#fff}
.ncard .pic{color:#9fbbdd;width:36px;height:36px}

/* ---- door knocking ---- */
.door{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
.door .ph{position:relative;overflow:hidden;min-height:560px;background:var(--navy)}
.door .ph img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 78%;object-position:50% 78%}
.door .txt{background:var(--navy);color:#fff;padding:70px 60px}
.door .txt h2{font-size:36px;font-size:clamp(28px,3.1vw,40px);color:#fff}
.door .txt .body{margin-top:22px}
.door .txt .body p{color:#d5e2f2;font-size:18.5px}
.door .txt .body p+p{margin-top:16px}

/* ---- forms ---- */
form .frow-sp+.frow-sp{margin-top:16px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}
label{display:block;font-size:14.5px;font-weight:700;letter-spacing:.04em;margin-bottom:7px;color:var(--ink)}
.on-dark label{color:#e3ebf5}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;min-height:52px;padding:13px 15px;font-family:var(--sans);font-size:17px;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:0;-webkit-appearance:none;appearance:none}
select{-webkit-appearance:menulist;appearance:menulist}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
.on-dark input,.on-dark select,.on-dark textarea{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07);color:#fff}
.on-dark input::-webkit-input-placeholder,.on-dark textarea::-webkit-input-placeholder{color:#9fbbdd}
.on-dark input::placeholder,.on-dark textarea::placeholder{color:#9fbbdd}
.on-dark input:focus,.on-dark select:focus,.on-dark textarea:focus{border-color:#fff;background:rgba(255,255,255,.13)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:14.5px;color:var(--gray);line-height:1.5}
.on-dark .fine{color:#a8bdd8}
.msg{padding:18px 20px;border-left:5px solid var(--blue);background:#eef3fa;font-size:17px;color:var(--navy)}
.on-dark .msg{background:rgba(255,255,255,.11);border-left-color:#fff;color:#fff}
.err{font-size:14.5px;font-weight:600;color:#b4232a;margin-top:12px}
.on-dark .err{color:#ffc9c2}
.opt{font-weight:400;opacity:.7}

/* ---- get involved ---- */
.involve{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:30px;gap:30px;-webkit-box-align:start;-ms-flex-align:start;align-items:start}
.icard{background:#fff;border:1px solid var(--line);padding:36px 32px 34px;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.icard>*+*{margin-top:15px}
.icard .ih{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.icard .ih>*+*{margin-left:14px}
.icard .ih .ic{width:30px;height:30px;color:var(--blue);stroke-width:1.6}
.icard h3{font-size:22px}
.icard>p{font-size:17px;color:var(--gray)}
.icard .btn{margin-top:auto}
.icard form[hidden]{display:none}
.icard form{margin-top:6px;border-top:1px solid var(--line);padding-top:22px}

/* ---- updates ---- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:60px;gap:60px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.signup h2{font-size:36px;font-size:clamp(28px,3.1vw,40px)}
.signup .lede{margin-top:18px;font-size:19px;color:#d5e2f2}
.signup .bullets{margin-top:24px}
.signup .bullets div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:17px;color:#e3ebf5}
.signup .bullets div+div{margin-top:10px}
.signup .bullets div>*+*{margin-left:12px}
.signup .bullets .ic{color:#9fbbdd}

/* ---- donate ---- */
.donate{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-gap:64px;gap:64px;-webkit-box-align:start;-ms-flex-align:start;align-items:start}
.donate h2{font-size:38px;font-size:clamp(28px,3.1vw,42px)}
.donate .lede{margin-top:20px;font-size:19px;color:var(--gray)}
.dbox{background:#fff;border:1px solid var(--line);padding:34px 32px 36px}
.dbox .dh{font-family:var(--head);font-weight:700;font-size:20px;margin-bottom:20px}
.amts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px;margin-bottom:16px}
.amt{min-height:62px;border:2px solid var(--line);background:#fff;font-family:var(--head);font-weight:700;font-size:20px;color:var(--navy);cursor:pointer;width:100%}
.amt:hover{border-color:var(--blue);color:var(--blue)}
.amt[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.amt-cell{position:relative;display:grid}
.amt-cell input{min-height:62px;height:100%;border-color:var(--blue);font-family:var(--head);font-weight:700;font-size:20px;text-align:center;padding:8px 10px}
.dwhy{margin:30px 0 0 6px;padding:2px 0 2px 24px;border-left:3px solid var(--sand)}
.dwhy div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-size:17px;color:var(--gray)}
.dwhy div+div{margin-top:15px}
.dwhy div>*+*{margin-left:13px}
.dwhy .ic{margin-top:2px;color:var(--blue)}
.dwhy b{color:var(--ink)}
.dnote{margin-top:26px;max-width:460px}

/* ---- footer ---- */
footer{background:var(--navy);color:#fff;padding:70px 0 40px}
.ftop{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-gap:56px;gap:56px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.ftop .lockup.brand{justify-self:center}
.fthead{font-family:var(--head);font-weight:700;font-size:21px;color:#fff;margin-bottom:10px;letter-spacing:-.01em}
.ftag{font-size:17px;line-height:1.6;color:#a8bdd8;margin:0;max-width:300px}
.fcontact{justify-self:end;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.fcontact>*+*{margin-top:13px}
.frow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:19px;font-weight:700;color:#fff}
.frow>*+*{margin-left:13px}
.frow a{color:#fff;font-weight:700}
.frow .lt{font-weight:400;font-size:14px;color:#8fa8c8;letter-spacing:.02em}
a.frow:hover{color:#fff;text-decoration:underline}
.frow .ic{width:22px;height:22px;color:#9fbbdd}
.auth{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
  display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:13.5px;color:#8fa8c8}
.auth>div{margin:5px 0}
.auth a{color:#8fa8c8}
.auth a:hover{color:#fff;text-decoration:underline}
.fnav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.fnav a{color:#8fa8c8;font-weight:600;margin-left:22px}
.fnav a:first-child{margin-left:0}
.fsoc{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-left:16px}
.fsoc a{color:#8fa8c8;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:14px}
.fsoc a:first-child{margin-left:0}
.fsoc a:hover{color:#fff}

/* ---- responsive ---- */
@media(max-width:1000px){
  nav{display:none}
  .burger{display:-webkit-box;display:-ms-flexbox;display:flex}
  .story,.donate,.signup{grid-template-columns:1fr;grid-gap:44px;gap:44px}
  .ftop{grid-template-columns:1fr;grid-gap:44px;gap:44px}
  .fcontact{justify-self:start}
  .ftop .lockup.brand{justify-self:start}
  .door,.feat{grid-template-columns:1fr}
  .door .txt{padding:52px 34px}
  .door .ph{min-height:0;height:380px;height:min(52vh,380px)}
  .feat .txt{padding:56px 28px}
  .feat .vh{min-height:0;height:0;padding-top:62.5%;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .ph{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;min-height:0;height:440px;height:min(58vh,440px)}
  .hero .ph img{-o-object-position:95% 45%;object-position:95% 45%}
  .hero .panel .in{padding:48px 28px 54px;max-width:none}
}
@media(max-width:820px){
  body{font-size:17px}
  section{padding:68px 0}
  section.tight{padding:54px 0}
  .wrap{padding:0 22px}
  .hero h1 span{white-space:normal}
  .hero .cta .btn{-webkit-box-flex:1;-ms-flex:1 1 220px;flex:1 1 220px}
  .fgrid{grid-template-columns:1fr}
  .sec-head{margin-bottom:38px}
  .sec-head p.oneline{white-space:normal}
  .dbox{padding:26px 22px 30px}
  .icard{padding:30px 24px 30px}
  .vitem{-ms-flex:1 1 100%;flex:1 1 100%;padding:0;border-left:none;margin-bottom:20px}
  .vitem:last-child{margin-bottom:0}
  .vitem strong{white-space:normal}
  .mbox{padding:30px 22px}
}

/* Where aspect-ratio is available, use it: it survives content overflow better
   than the padding-top box does. */
@supports (aspect-ratio:1/1){
  .story .ph .frame{height:auto;padding-top:0;aspect-ratio:4/3}
  .story .ph .frame img{position:static;height:100%}
  .vcard .thumb{height:auto;padding-top:0;aspect-ratio:16/9}
  @media(max-width:1000px){.feat .vh{height:auto;padding-top:0;aspect-ratio:16/10}}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important;
    -webkit-animation-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  header,.burger,#mnav,.feat .vh,form,.btn,.modal{display:none!important}
  body{font-size:12pt;background:#fff;color:#000}
  .hero,.feat,.door,.band-blue,footer{background:#fff!important;color:#000!important}
  .hero h1,.feat h2,.door .txt h2,footer,.band-blue h2{color:#000!important}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt}
}

/* Videos grid: four cards plus the signup card. Letting the signup card span
   the remaining columns fills the last row instead of leaving a hole. */
@media(min-width:1000px){
  .issues{grid-template-columns:repeat(3,1fr)}
  .issues .ncard{grid-column:span 2}
}
@media(min-width:640px) and (max-width:999px){
  .issues{grid-template-columns:repeat(2,1fr)}
  .issues .ncard{grid-column:1 / -1}
}

/* Contribution amounts are radio inputs styled as buttons, so choosing an
   amount needs no JavaScript at all. */
.amt{position:relative;display:block;cursor:pointer;border:0;background:none;padding:0}
.amt input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.amt span{display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  min-height:62px;border:2px solid var(--line);background:#fff;
  font-family:var(--head);font-weight:700;font-size:20px;color:var(--navy)}
.amt:hover span{border-color:var(--blue);color:var(--blue)}
.amt input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.amt input:focus+span{outline:3px solid var(--blue);outline-offset:2px}
.amt input:focus:not(:focus-visible)+span{outline:none}

/* The header lockup plus the menu button overflows a narrow phone at full
   size: "Adam Walker" is set in 29px Montserrat and scaleX() shrinks it
   visually without reducing the width it actually occupies. Step it down so
   the whole lockup and the button still fit at 320px. */
@media(max-width:560px){
  .bar{min-height:72px}
  .lockup .nm{font-size:24px}
  .lockup .rl{font-size:11px;letter-spacing:.2em}
  .lockup>*+*{margin-left:8px}
}
@media(max-width:400px){
  .lockup .nm{font-size:20px}
  .lockup .rl{font-size:9px;letter-spacing:.14em}
  .lockup>*+*{margin-left:6px}
  .burger{width:42px;height:42px}
}

/* Anchor targets stop at the top of their own coloured block, clear of the
   sticky header, rather than sliding underneath it. */
#top,#about,#priorities,#videos,#doors,#involved,#updates,#donate{scroll-margin-top:84px}
@media(max-width:560px){
  html{scroll-padding-top:72px}
  #top,#about,#priorities,#videos,#doors,#involved,#updates,#donate{scroll-margin-top:72px}
}

/* A little more air before the button that ends a form. */
.frow-sp.gap{margin-top:34px}

/* Video signup card: the bell sits beside the heading, not above it. */
.ncard .ih{display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center}
.ncard .ih>*+*{margin-left:15px}
.ncard .ih .pic{width:32px;height:32px;color:#9fbbdd}
.ncard .ih h3{font-size:22px;font-size:clamp(20px,1.9vw,24px);color:#fff;line-height:1.14}

/* Contribution page */
.give{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-gap:60px;gap:60px;-webkit-box-align:start;-ms-flex-align:start;align-items:start}
.method{background:#fff;border:1px solid var(--line);padding:30px 30px 32px;margin-bottom:22px}
.method .mh{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:14px}
.method .mh>*+*{margin-left:14px}
.method .mh .ic{width:28px;height:28px;color:var(--blue)}
.method h3{font-size:21px}
.method p{font-size:17.5px;color:var(--gray)}
.method p+p{margin-top:12px}
.method .big{font-family:var(--head);font-weight:700;font-size:21px;color:var(--navy);word-break:break-word;
  background:var(--sand);padding:13px 16px;margin-top:14px;display:block}
.rules{background:var(--navy);color:#fff;padding:34px 32px 36px}
.rules h3{font-size:21px;color:#fff;margin-bottom:8px}
.rules .lim{font-family:var(--head);font-weight:700;font-size:40px;line-height:1.05;color:#fff;margin:16px 0 6px}
.rules .limsub{font-size:15.5px;color:#9fbbdd;margin-bottom:26px}
.rules ul{list-style:none;margin:0;padding:0}
.rules li{position:relative;padding-left:30px;font-size:16.5px;color:#d5e2f2;margin-bottom:13px;line-height:1.5}
.rules li:before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;background:#9fbbdd}
.rules li.no:before{background:#e08a86}
.rules li b{color:#fff;font-weight:600}
.rules .fine{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);color:#a8bdd8}
.backlink{display:inline-block;margin-top:34px;font-weight:600}
@media(max-width:1000px){ .give{grid-template-columns:1fr;grid-gap:44px;gap:44px} }

/* Links inside the navy eligibility panel need to be legible on it. */
.rules a{color:#bcd2ec;text-decoration:underline}
.rules a:hover{color:#fff}

/* The Donate item is a button, so it marks the current section by deepening
   rather than by underlining. */
nav a.btn.on{background:var(--navy);border-color:var(--navy);color:#fff}
nav a.btn.on:hover{background:var(--navy);border-color:var(--navy)}