/* The volunteer application: one question at a time, in the site's heading voice.
   Fields are soft filled shapes, choices are pills, and moving on is a line of type
   like Donate. Without the script every question shows at once as an ordinary form. */
body.page-volunteer main{max-width:none;margin:0;padding:0}
body.interior.scenic-header main>.apply{width:100%;max-width:none;margin:0}
.apply{position:relative;min-height:88svh;padding:150px var(--gutter) 140px;background:var(--paper);color:var(--ink)}
.apply-form{max-width:980px}
.apply-step{border:0;margin:0 0 80px;padding:0;min-width:0}
.apply-q{padding:0;margin-bottom:44px;font:450 clamp(44px,5.4vw,96px)/1.02 Manrope,sans-serif;letter-spacing:-.062em;max-width:14ch;text-wrap:balance}
.apply-field{display:block;width:100%;max-width:760px;margin:0 0 14px;padding:24px 30px;border:0;border-radius:999px;background:#e2dccf;color:var(--ink);font:450 clamp(22px,2vw,30px)/1.2 Manrope,sans-serif;letter-spacing:-.03em;outline:none;transition:background .4s ease,box-shadow .4s ease}
.apply-field::placeholder{color:#7d8a82}
.apply-field:focus{background:#d9d2c3;box-shadow:0 0 0 2px var(--ink)}
.apply-long{border-radius:28px;resize:vertical;min-height:190px;line-height:1.45}
.apply-choices{display:flex;flex-wrap:wrap;gap:12px;max-width:900px;margin-top:6px}
.apply-choices label{position:relative;cursor:pointer}
.apply-choices input{position:absolute;opacity:0;pointer-events:none}
.apply-choices span{position:relative;display:inline-flex;align-items:center;min-height:58px;padding:0 26px;border-radius:999px;border:1px solid #2038324d;font:450 clamp(18px,1.5vw,22px) Manrope,sans-serif;letter-spacing:-.02em;overflow:hidden;isolation:isolate;transition:color .4s ease,border-color .4s ease}
.apply-choices span:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ink);transform:translate3d(0,101%,0);transition:transform .55s cubic-bezier(.65,0,.2,1)}
.apply-choices label:hover span{border-color:var(--ink)}
.apply-choices input:checked+span{color:var(--paper);border-color:var(--ink)}
.apply-choices input:checked+span:before{transform:none}
.apply-choices input:focus-visible+span{outline:2px solid var(--ink);outline-offset:4px}
#apply-school{margin-bottom:34px}
#apply-school::-webkit-calendar-picker-indicator{display:none!important}
.apply-consent{display:flex;gap:18px;align-items:flex-start;max-width:720px;font-size:19px;line-height:1.6;cursor:pointer}
.apply-consent input{flex:none;width:26px;height:26px;margin:2px 0 0;accent-color:var(--ink)}
.apply-consent a{text-decoration:underline;text-underline-offset:4px}
.apply-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apply-error{min-height:0;margin:0;font-size:18px;line-height:1.5;color:#8a2f22}
.apply-error:not(:empty){margin:-40px 0 40px}
.apply-nav{display:none}
/* Moving on: Continue or Send, as a line of type; Back sits quietly beside it. */
.apply-next,.apply-send{position:relative;display:inline-flex;align-items:baseline;gap:.3em;padding:10px 2px 12px;font:500 clamp(26px,2.4vw,38px)/1 Manrope,sans-serif;letter-spacing:-.045em;color:var(--ink)}
.apply-next:after,.apply-send:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform-origin:right;transition:transform .6s cubic-bezier(.65,0,.15,1)}
.apply-next:hover:after,.apply-send:hover:after{transform:scaleX(0)}
.apply-arrow{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.15,1)}
.apply-next:hover .apply-arrow,.apply-send:hover .apply-arrow{transform:translateX(.3em)}
.apply-back{display:none;margin:0 0 30px -2px;padding:10px 0;font:450 18px Manrope,sans-serif;color:var(--muted);transition:color .3s ease}
.apply-form.is-stepped .apply-back{display:inline-flex;gap:.45em}
.apply-back:hover{color:var(--ink)}
.apply-send[disabled]{opacity:.5;cursor:progress}
/* With the script: one question at a time; each rises in as the last one leaves. */
.apply-form.is-stepped .apply-step{display:none;margin-bottom:56px}
.apply-form.is-stepped .apply-step.is-current{display:block;animation:apply-in .7s cubic-bezier(.2,.75,.15,1) both}
.apply-form.is-stepped .apply-step.is-leaving{display:block;animation:apply-out .32s ease-in both}
@keyframes apply-in{from{opacity:0;transform:translate3d(0,48px,0)}}
@keyframes apply-out{to{opacity:0;transform:translate3d(0,-36px,0)}}
.apply-form.is-stepped .apply-nav{display:flex;align-items:center;gap:40px}
.apply-form.is-stepped .apply-send{display:none}
.apply-form.is-last .apply-next{display:none}
.apply-form.is-last .apply-send{display:inline-flex}
.apply-form.is-first .apply-back{visibility:hidden}
.apply-back span{display:inline-block;transition:transform .4s cubic-bezier(.65,0,.15,1)}.apply-back:hover span{transform:translateX(-.25em)}
.apply-form:not(.is-stepped) .apply-nav{display:flex}
.apply-form:not(.is-stepped) .apply-next{display:none}
.apply-done h2{font:450 clamp(52px,6.6vw,124px)/1 Manrope,sans-serif;letter-spacing:-.066em;max-width:13ch;animation:apply-in .9s cubic-bezier(.2,.75,.15,1) both}
.apply-done p{margin-top:36px;font-size:20px;line-height:1.6;max-width:36ch;animation:apply-in .9s cubic-bezier(.2,.75,.15,1) .12s both}
.apply-done .text-link{margin-top:34px;animation:apply-in .9s cubic-bezier(.2,.75,.15,1) .2s both}
@media(max-width:700px){
 .apply{padding:90px var(--gutter) 90px}.apply-q{font-size:11vw;margin-bottom:30px}
 .apply-field{padding:20px 24px;font-size:21px}.apply-choices span{min-height:52px;padding:0 20px;font-size:17px}
 .apply-form.is-stepped .apply-nav{gap:28px}.apply-next,.apply-send{font-size:8vw}
 
}
@media(prefers-reduced-motion:reduce){.apply-form.is-stepped .apply-step.is-current,.apply-form.is-stepped .apply-step.is-leaving,.apply-done *{animation:none}.apply-choices span,.apply-choices span:before,.apply-field,.apply-next:after,.apply-send:after,.apply-arrow{transition:none}}