/* 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)}
.letter .salutation{margin-bottom:1.3em}
.sign{margin-top:2.2em;line-height:1.55}
.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 2.9rem;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(12.5rem,1fr));gap:clamp(2.25rem,4vw,3.25rem) clamp(1.25rem,2.5vw,2rem)}
.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}

/* Sun rays */
.sun::before{content:"";position:absolute;left:50%;top:50%;width:760%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 4deg,rgba(255,238,205,.2) 0 3.5deg,rgba(255,238,205,0) 3.5deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 0 6.5%,#000 8%,rgba(0,0,0,.35) 26%,transparent 48%);
  mask:radial-gradient(circle,transparent 0 6.5%,#000 8%,rgba(0,0,0,.35) 26%,transparent 48%)}
@media (prefers-reduced-motion:no-preference){.sun::before{animation:glow 4.2s ease-out both}@keyframes glow{0%,35%{opacity:0}100%{opacity:1}}}

/* Paper */
.letter{background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Faces: names on hover or keyboard focus */
.faces li{position:relative}
.faces a{display:block;border-radius:50%;transition:transform .25s ease}
.faces a:hover,.faces a:focus-visible{transform:translateY(-5px);z-index:2;position:relative}
.faces .name{position:absolute;left:50%;top:calc(100% + .55rem);transform:translateX(-50%);white-space:nowrap;font-size:.8rem;line-height:1.3;
  background:var(--night);color:#fff;padding:.35em .7em;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:3}
.faces a:hover .name,.faces a:focus-visible .name{opacity:1}
.faces a:focus-visible{outline-offset:4px}

/* Team: founders featured */
.member.lead{grid-column:1/-1;display:grid;gap:1.25rem 3rem;align-items:center;padding-bottom:clamp(2.25rem,4vw,3.25rem);border-bottom:1px solid #e1d5ec}
.member.lead img{margin:0}
.member.lead h2{font-size:clamp(1.55rem,3vw,2.1rem)}
.member.lead .role{font-size:1.08rem}
.member.lead p{font-size:1.02rem}
@media (min-width:760px){.member.lead{grid-template-columns:minmax(0,24rem) 1fr}}
.member{scroll-margin-top:1.5rem}
@media (min-width:1100px){.members{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Contact layout */
.portrait{display:block;width:clamp(170px,22vw,230px);aspect-ratio:1;object-fit:cover;object-position:50% 30%;border-radius:50%;margin:clamp(-5.5rem,-7vw,-4rem) auto clamp(3.75rem,6vw,4.75rem);position:relative;z-index:3;
  box-shadow:0 0 0 6px var(--mist),0 0 0 7px var(--gold),0 22px 40px -22px rgba(31,18,48,.8)}
.contact-grid{max-width:74rem;margin:0 auto;display:grid;gap:clamp(3rem,6vw,4rem)}
.contact-grid .letter{max-width:44rem;width:100%}
.contact-grid .form-wrap{max-width:44rem;width:100%;margin:0 auto;background:var(--paper);padding:clamp(1.75rem,4vw,2.5rem);border-radius:2px;box-shadow:0 30px 60px -34px rgba(31,18,48,.5);border-top:3px solid var(--gold)}
@media (min-width:1000px){
  .contact-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .contact-grid .letter,.contact-grid .form-wrap{max-width:none}
  .contact-grid .form-wrap{position:sticky;top:2rem}
}

.letter-solo .letter{max-width:46rem}
.contact-photo{display:block;max-width:44rem;width:100%;margin:0 auto clamp(2.5rem,5vw,3.5rem);border-radius:3px;box-shadow:0 24px 44px -28px rgba(31,18,48,.7)}
.contact-solo .form-wrap{max-width:44rem;margin:0 auto;background:var(--paper);padding:clamp(1.75rem,4vw,2.5rem);border-radius:2px;box-shadow:0 30px 60px -34px rgba(31,18,48,.5);border-top:3px solid var(--gold)}
.contact-solo .note{max-width:44rem;margin:0 auto clamp(2rem,4vw,2.75rem);text-align:center;font-style:italic;color:var(--soft)}
.contact-solo .note a{font-style:normal}

/* Footer bookend */
.foot{position:relative;padding-top:0;overflow:hidden}
.foot-ridge{display:block;width:calc(100% + 2.5rem);height:clamp(60px,8vw,110px);margin:0 -1.25rem 1.75rem}
.foot-stars{position:absolute;left:0;right:0;top:40%;width:100%;height:60%;opacity:.35;pointer-events:none}
.foot-stars circle{fill:#fff}
.foot > *:not(svg){position:relative}

/* Footer */
.foot{background:var(--night);color:#cfc2df;text-align:center;padding:0 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}