/* New Beginnings Leadership Center: site styles */
:root{
  --night:#1f1230;--plum:#3a2160;--royal:#4b2a72;--heather:#8c6fb3;
  --mist:#f3eef8;--paper:#fffdfb;--ink:#22172e;--soft:#5d4f6b;--gold:#e2ad62;--gold-deep:#a8702a;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);
  font-family:"Century Schoolbook","New Century Schoolbook","Century Schoolbook L","C059","TeX Gyre Schola",Georgia,serif;
  font-size:18px;line-height:1.72}
img{max-width:100%;height:auto}
a{color:var(--royal);text-underline-offset:.18em}
a:hover{color:var(--night)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
p{margin:0 0 1.1em}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--royal);padding:.6em 1em;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Header (sits inside each page's sky) */
.top{position:relative;z-index:3;max-width:70rem;margin:0 auto;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap}
.top-logo{display:block;line-height:0}
.top-logo img{width:150px}
.top nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.6rem}
.top nav a{color:#e6dcf3;text-decoration:none;font-size:1rem;padding:.25em 0;border-bottom:1px solid transparent}
.top nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.top nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

/* Home sky */
.sky{position:relative;overflow:hidden;color:#fff;text-align:center;
  --r:clamp(200px,32vw,440px);
  background:linear-gradient(to top,#f8d9a8 0,#f8d9a8 calc(var(--r)*.7),#f0bc87 calc(var(--r)*.86),#c98a95 calc(var(--r)*1.0),#80578f calc(var(--r)*1.2),#4b2a72 calc(var(--r)*1.48),#2c1849 calc(var(--r)*1.95),#1b0f2b 100%)}
@media (max-width:640px){.ridges{margin-top:4.5rem!important}.sun{bottom:150px!important}}
.stars{position:absolute;inset:0 0 40% 0;width:100%;height:60%;pointer-events:none}
.stars circle{fill:#fff}
.sky-title{position:relative;z-index:2;margin:0;padding:clamp(1.5rem,5vw,3.5rem) 1.25rem 0;font-weight:700;line-height:1;
  font-size:clamp(2.9rem,8.6vw,6.4rem);letter-spacing:-.01em;text-shadow:0 2px 24px rgba(20,8,35,.35)}
.sky-title span{display:block;margin-top:.32em;font-weight:400;font-style:italic;font-size:.42em;letter-spacing:.01em;color:#efe4fa}
.sun{position:absolute;left:62%;bottom:clamp(90px,15vw,210px);width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%;z-index:1;
  transform:translate(-50%,0);
  background:radial-gradient(circle,#fff6df 0 38%,#fbd99a 52%,rgba(247,200,128,.55) 64%,rgba(247,200,128,0) 72%)}
.ridges{position:relative;z-index:2;display:block;width:100%;margin-bottom:-2px;height:clamp(200px,32vw,440px);margin-top:clamp(1rem,3vw,2rem)}
@media (prefers-reduced-motion:no-preference){
  .sun{animation:rise 2.8s cubic-bezier(.2,.7,.2,1) both}
  .stars{animation:fade 2.8s ease-out both}
  @keyframes rise{from{transform:translate(-50%,46%);opacity:.65}to{transform:translate(-50%,0);opacity:1}}
  @keyframes fade{from{opacity:1}to{opacity:.45}}
}
@media (prefers-reduced-motion:reduce){.stars{opacity:.45}}

/* Letter */
.letter-wrap{position:relative;z-index:4;padding:0 1.25rem;margin-top:clamp(-6rem,-8vw,-2.5rem)}
.letter{position:relative;background:var(--paper);max-width:44rem;margin:0 auto;padding:clamp(2.75rem,6vw,4.5rem) clamp(1.5rem,6vw,4.25rem) clamp(2rem,5vw,3.5rem);
  border-radius:2px;box-shadow:0 30px 60px -30px rgba(31,18,48,.55),0 2px 6px rgba(31,18,48,.06)}
.seal{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;
  background:var(--royal);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--gold)}
.seal span{font-style:italic;font-size:1.35rem;letter-spacing:.02em;line-height:1}
.letter h2{font-weight:700;font-size:clamp(1.65rem,3.6vw,2.25rem);line-height:1.2;color:var(--royal);margin:0 0 .25em;text-align:center}
.letter .from{font-style:italic;color:var(--soft);text-align:center;margin:0 0 2.2em}
.letter .first::first-letter{float:left;font-size:3.35em;line-height:.82;padding:.08em .1em 0 0;color:var(--royal);font-weight:700}
.letter .date{color:var(--soft)}
.sign{margin-top:2.2em}
.sign strong{color:var(--royal)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:2.4em;padding-top:1.9em;border-top:1px solid #e7dcc9}
.btn{display:inline-block;font:inherit;font-size:1rem;line-height:1.2;padding:.85em 1.6em;border:1.5px solid var(--royal);border-radius:999px;text-decoration:none;background:var(--royal);color:#fff;cursor:pointer}
.btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.btn.quiet{background:transparent;color:var(--royal)}
.btn.quiet:hover{background:#efe6f8;color:var(--night)}

/* Gratitude strip */
.thanks{text-align:center;padding:clamp(3rem,7vw,5rem) 1.25rem clamp(3rem,6vw,4.5rem)}
.thanks h2{font-weight:400;font-style:italic;font-size:clamp(1.3rem,2.8vw,1.7rem);color:var(--royal);margin:0 0 1.4rem}
.faces{list-style:none;margin:0 auto 1.6rem;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
.faces li{margin:0 -.45rem}
.faces img{display:block;width:clamp(64px,10vw,92px);aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid var(--mist);box-shadow:0 6px 16px -8px rgba(31,18,48,.5)}

/* Inner page sky */
.dusk{position:relative;overflow:hidden;color:#fff;text-align:center;background:linear-gradient(180deg,#1b0f2b 0%,#3a2160 55%,#6b4a92 100%)}
.dusk h1{position:relative;z-index:2;margin:0;padding:clamp(1.5rem,4vw,2.75rem) 1.25rem 0;font-weight:700;font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:1.1}
.dusk p{position:relative;z-index:2;margin:.45em 0 0;padding:0 1.25rem;font-style:italic;color:#e6dcf3}
.dusk .ridge{margin-bottom:-2px;display:block;width:100%;height:clamp(60px,9vw,110px);margin-top:clamp(1.5rem,4vw,2.5rem)}
.main{padding:clamp(2.5rem,6vw,4.5rem) 1.25rem}

/* Team */
.members{list-style:none;margin:0 auto;padding:0;max-width:68rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(2.25rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem)}
.member{font-size:.95rem;line-height:1.55}
.member img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;margin:0 0 1.05rem;box-shadow:0 18px 30px -22px rgba(31,18,48,.7)}
.member h2{font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--royal);margin:0 0 .2em}
.member p{margin:0 0 .55em}
.role{font-style:italic;color:var(--gold-deep)}
.links a{margin-right:1em}

/* Contact */
.photo{display:block;max-width:44rem;width:100%;margin:0 auto clamp(3.5rem,7vw,5rem);border-radius:3px;box-shadow:0 24px 44px -28px rgba(31,18,48,.7)}
.form-wrap{max-width:44rem;margin:clamp(3rem,6vw,4.5rem) auto 0}
.form-wrap h2{font-weight:700;font-size:clamp(1.5rem,3.2vw,2rem);color:var(--royal);margin:0 0 .3em}
.form{display:grid;gap:1.1rem;margin-top:1.6rem}
.form label{display:block;font-size:.95rem;margin-bottom:.3em}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:1rem;padding:.75em .85em;border:1px solid #cdbfe0;border-radius:4px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--royal)}
.form textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}

/* Footer */
.foot{background:var(--night);color:#cfc2df;text-align:center;padding:2.75rem 1.25rem 3rem;font-size:.92rem;line-height:1.6}
.foot img{width:130px;margin:0 auto 1rem;display:block;opacity:.9}
.foot p{margin:0}
.foot .small{color:#9f90b3;font-size:.85rem;margin-top:.35rem}