/* The donation screen: shared by the homepage summit and the giving page. One ink
   screen with almost nothing on it: an enormous amount in the middle whose digits
   roll to each choice, a row of amounts, and one button that names the amount. */
.give-panel{position:relative;z-index:3;min-height:100svh;background:var(--ink);color:var(--paper);overflow:hidden}
.give-sheet{position:relative;height:100%;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px var(--gutter) 80px}
.give-stage{position:relative;display:flex;justify-content:center;font-family:Manrope,sans-serif}
/* The amount is an ordinary field set very large: click it, type, done. */
.give-entry{position:relative;display:flex;align-items:flex-start;justify-content:center;font:500 calc(min(25vw,40svh) * var(--fit,1))/1 Manrope,sans-serif;letter-spacing:-.075em;font-variant-numeric:tabular-nums;transition:font-size .4s cubic-bezier(.2,.75,.15,1)}
.give-entry input{width:2ch;min-width:1ch;height:1em;padding:0;border:0;border-radius:0;background:transparent;outline:none;font:inherit;line-height:1;letter-spacing:inherit;font-variant-numeric:inherit;color:var(--paper);caret-color:#e5c79d;text-align:center;cursor:text}
.give-entry input::placeholder{color:#eee9df40}
.give-entry input::selection{background:#e5c79d55}
.give-entry .give-cur{position:static;margin:.14em .1em 0 0;font-size:.26em;font-weight:500;letter-spacing:-.04em;color:#aebbaa}
.give-sheet.is-invalid .give-entry input{color:#f2b9a6}
.give-sheet .give-error{min-height:22px;margin-top:12px;font-size:15px;color:#f2b9a6}
.give-sheet .give-help{position:absolute;left:var(--gutter);right:var(--gutter);bottom:30px;margin:0;max-width:none;font-size:13px;line-height:1.6;color:#9dab99}
.give-stage{cursor:text}
/* Giving is one line of type, the same voice as the amount: Donate, the amount,
   an arrow. It leans toward the pointer; the arrow steps forward on hover. */
.give-go{position:relative;display:inline-flex;margin-top:7vh;padding:12px 2px 14px;color:var(--paper);font:500 clamp(28px,2.6vw,44px)/1 Manrope,sans-serif;letter-spacing:-.045em}
.give-go-label{display:inline-flex;align-items:baseline;gap:.28em}
.give-go b{display:inline-block;font-weight:500}
.give-go: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)}
.give-go:hover:after{transform:scaleX(0)}
.give-go-arrow{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.15,1)}
.give-go:hover .give-go-arrow,.give-go:focus-visible .give-go-arrow{transform:translateX(.3em)}
/* The screen is part of the summit. The scene sinks into pre-dawn blue and the
   amount rises over it, and the amount lights the sky: the larger the gift, the
   more dawn breaks over the peak (--light, set by give.js). Only opacity and
   position change, so it stays smooth. */
.give-reveal,html.give-arrive .giving-scene .give-panel{background:transparent}
.give-reveal:before,html.give-arrive .giving-scene .give-panel:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#08131b 0%,#0d1f26 52%,#122a2a 100%);opacity:0;transition:opacity 1.2s ease}
.give-reveal.is-open:before,html.give-arrive .giving-scene .give-panel.is-open:before{opacity:calc(.92 - var(--light,.27) * .42)}
.give-dawn{position:absolute;left:-25%;right:-25%;bottom:-55%;height:120%;border-radius:50%;background:radial-gradient(closest-side,#ffd3a1 0%,#f0a36dcc 30%,#d9805a55 55%,transparent 78%);opacity:0;mix-blend-mode:screen;pointer-events:none;transform:translate3d(0,calc((1 - var(--light,.27)) * 34%),0) scale(calc(.72 + var(--light,.27) * .5));transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.2,.75,.15,1);will-change:transform,opacity}
.give-panel.is-open>.give-dawn{opacity:calc(.18 + var(--light,.27) * .82)}
.give-panel:not(.give-reveal) .give-dawn{display:none}
html.give-arrive .giving-scene .give-panel .give-dawn{display:block}
.give-reveal .give-sheet,html.give-arrive .giving-scene .give-panel .give-sheet{opacity:0;transform:translate3d(0,6vh,0);transition:opacity .3s ease,transform .3s ease}
.give-reveal.is-open .give-sheet,html.give-arrive .giving-scene .give-panel.is-open .give-sheet{opacity:1;transform:none;transition:opacity .9s ease .35s,transform 1.3s cubic-bezier(.2,.75,.15,1) .3s}
@media(max-width:700px){.give-entry{font-size:calc(min(40vw,34svh) * var(--fit,1))}.give-sheet{padding-top:90px}.give-go{font-size:8vw}}
@media(prefers-reduced-motion:reduce){.give-entry,.give-go:after,.give-go-arrow,.give-dawn,.give-panel:before{transition:none}}