/* The opening film on the home page: lights down, the mirror and the ruby,
   the name, the mission lit as you scroll, one pillar per screen, pearls and
   rubies, the story so far, and Proverbs 31:10 alone on a dark screen before
   the lights come up on the rest of the site. Every class starts with pf-. */

.pf{--night:#1b0b14;--void:#0d0509;--rose:#d86d9d;--pink:#f9a8c9;--blush:#ffd6e7;--pearl:#fff5f8;--ruby:#9f2852;--gold:#c4a26a;
  position:relative;background:var(--night);color:#fff;overflow:clip}
.pf *{box-sizing:border-box}
.pf-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s}
body.pgws-dark .pf-canvas{opacity:1}
.pf>section{position:relative;z-index:1}

/* Opening */
.pf-open{min-height:calc(100svh - 110px);display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:56px 20px 80px;overflow:hidden}
.pf-glow{position:absolute;inset:-25%;z-index:-1;background:radial-gradient(34% 30% at 50% 36%,rgba(249,168,201,.42),transparent 70%),radial-gradient(26% 26% at 18% 82%,rgba(179,18,63,.35),transparent 70%),radial-gradient(28% 28% at 84% 70%,rgba(216,109,157,.3),transparent 70%);animation:pfGlow 10s ease-in-out infinite alternate}
.pf-pre{margin:0;font:italic 400 clamp(17px,2.4vw,22px)/1.3 'DM Serif Display',Georgia,serif;color:rgba(255,255,255,.72);animation:pfPre 3.4s ease forwards}
.pf-mirror{position:relative;width:clamp(64px,min(13vw,11vh),132px);margin:4px 0 2px;animation:pfMirror 1.6s cubic-bezier(.2,.7,.2,1) .9s both}
.pf-mirror svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 26px rgba(249,168,201,.55))}
.pf-mirror .pf-ruby{position:absolute;right:-16%;bottom:24%;width:26%;animation:pfDrop 1.2s cubic-bezier(.3,1.5,.5,1) 2s both}
.pf-mirror .pf-ruby svg{filter:drop-shadow(0 6px 14px rgba(179,18,63,.7))}
.pf-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);animation:pfIn 1s ease 2.2s both}
.pf-title{margin:0;line-height:.9;font-weight:400}
.pf-title .pf-serif{display:block;font:400 clamp(52px,min(12.5vw,14vh),176px)/.88 'DM Serif Display',Georgia,serif;letter-spacing:.02em;text-transform:uppercase}
.pf-title .pf-serif span{display:inline-block;margin:0 .09em;animation:pfWord 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(2.4s + var(--i) * .18s)}
.pf-title .pf-script{display:block;margin-top:.08em;font:400 clamp(40px,min(8.4vw,9.5vh),116px)/1.1 Pacifico,cursive;color:var(--pink);text-shadow:0 10px 40px rgba(249,168,201,.45);animation:pfScript 1.4s ease 3s both}
.pf-deck{margin:14px auto 0;max-width:46ch;font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:rgba(255,255,255,.84);animation:pfIn 1s ease 3.6s both}
.pf-tag{margin:0;font:800 12px/1 'DM Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--blush);animation:pfIn 1s ease 3.8s both}
.pf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;animation:pfIn 1s ease 4s both}
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--pink);color:var(--night);font:800 15px/1 'DM Sans',sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}
.pf-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px var(--pink)}
.pf-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.pf-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.55);animation:pfIn 1s ease 4.6s both}

/* Pinned scenes */
.pf [data-pf-scrub]{position:relative}
.pf-sticky{position:sticky;top:0;min-height:100svh;display:grid;place-content:center;padding:100px clamp(20px,6vw,80px) 60px}
.pf-kicker{margin:0 0 18px;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink)}
.pf-mission{height:260svh}
.pf-lit{margin:0;max-width:22ch;font:400 clamp(30px,4.8vw,60px)/1.18 'DM Serif Display',Georgia,serif}
.pf-lit span{opacity:calc(.16 + .84 * clamp(0, (var(--p, 0) * 1.25 - var(--w)) * 12, 1));transition:opacity .2s}
.pf-lit em{font-style:italic;color:var(--pink)}

/* Opening photograph: the lights go down on real PGWS women */
.pf-open{isolation:isolate}
.pf-openphoto{position:absolute;inset:0;z-index:-2;overflow:hidden}
.pf-openphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transform:scale(1.18);animation:pfKen 14s cubic-bezier(.2,.6,.2,1) .4s forwards}
.pf-openphoto:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(27,11,20,.38),rgba(27,11,20,.86) 80%),linear-gradient(180deg,rgba(27,11,20,.7),rgba(27,11,20,.25) 40%,rgba(27,11,20,.95))}
.pf-open .pf-glow{z-index:-1;mix-blend-mode:screen;opacity:.7}
.pf-letterbox{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:2;pointer-events:none;animation:pfBars 2.6s cubic-bezier(.7,0,.2,1) 3.4s forwards}
.pf-letterbox.top{top:0}.pf-letterbox.bot{bottom:0}
.pf-title .pf-serif{text-shadow:0 18px 60px rgba(0,0,0,.55)}

/* The member journey: seven stages, one per screen */
.pf-journey{height:calc(100svh * 7.6)}
.pf-journey .pf-sticky{grid-template-columns:minmax(0,1fr);place-content:center;overflow:hidden}
.pf-jphoto{position:absolute;inset:0;z-index:-1}
.pf-jphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(calc(1.15 - var(--p, 0) * .15))}
.pf-jphoto:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,11,20,.94) 0%,rgba(27,11,20,.7) 45%,rgba(27,11,20,.35) 100%)}
.pf-jhead{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink)}
.pf-jtitle{margin:0 0 34px;font:400 clamp(30px,4vw,52px)/1.05 'DM Serif Display',Georgia,serif;max-width:16ch}
.pf-jtitle em{font:400 .85em/1.1 Pacifico,cursive;color:var(--pink)}
.pf-stages{list-style:none;margin:0;padding:0;display:grid;min-height:clamp(220px,34vh,320px)}
.pf-stages li{grid-area:1/1;align-self:start;display:grid;gap:4px;opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .7s,transform .7s,filter .7s}
.pf-stages li.on{opacity:1;transform:none;filter:none}
.pf-stages i{font:400 clamp(90px,15vw,200px)/.8 'DM Serif Display',Georgia,serif;font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(249,168,201,.75)}
.pf-stages small{font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.pf-stages b{font:400 clamp(44px,7.5vw,104px)/1 Pacifico,cursive;color:#fff;text-shadow:0 14px 50px rgba(249,168,201,.45);padding-right:.1em}
.pf-jbar{display:flex;gap:6px;margin-top:30px}
.pf-jbar i{width:28px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);transition:background .4s}
.pf-jbar i.on{background:var(--pink)}

/* The founder */
.pf-founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,6vw,90px);align-items:center;max-width:1180px;margin:0 auto;padding:clamp(90px,12vw,160px) clamp(22px,5vw,50px)}
.pf-arch{position:relative;margin:0;max-width:440px;justify-self:center;width:100%}
.pf-arch:before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--gold);border-radius:240px 240px 26px 26px}
.pf-arch img{position:relative;display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%;border-radius:240px 240px 26px 26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.pf-founder blockquote{margin:0;font:italic 400 clamp(30px,4.2vw,54px)/1.2 'DM Serif Display',Georgia,serif}
.pf-founder blockquote em{font-style:normal;color:var(--pink)}
.pf-founder cite{display:block;margin-top:26px;font:800 12px/1.5 'DM Sans',sans-serif;font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--pink)}
.pf-founder cite span{display:block;color:rgba(255,255,255,.6);letter-spacing:.14em}
.pf-founder p{margin:22px 0 0;max-width:52ch;color:rgba(255,255,255,.76);font-size:17px;line-height:1.7}
@media(max-width:700px){.pf-jphoto:after{background:linear-gradient(180deg,rgba(27,11,20,.72) 0%,rgba(27,11,20,.62) 45%,rgba(27,11,20,.9) 100%)}}
@media(max-width:800px){.pf-founder{grid-template-columns:1fr}.pf-arch{max-width:320px}}

/* Full-bleed photographs of PGWS women, graded under rose-night */
.pf-photo{position:relative;min-height:110svh;display:grid;align-items:end;overflow:hidden}
.pf-photo img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;object-position:center 30%;transform:translateY(calc((var(--p, .5) - .5) * -12%));will-change:transform}
.pf-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,11,20,.85) 0%,rgba(27,11,20,.15) 32%,rgba(27,11,20,.25) 55%,rgba(27,11,20,.94) 100%)}
.pf-photo figcaption{position:relative;z-index:1;padding:0 clamp(22px,6vw,90px) clamp(60px,10vh,110px);max-width:900px}
.pf-photo figcaption span{display:block;margin-bottom:12px;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--pink)}
.pf-photo figcaption strong{display:block;font:400 clamp(40px,7vw,96px)/1 'DM Serif Display',Georgia,serif;text-shadow:0 10px 40px rgba(0,0,0,.45)}
.pf-photo figcaption strong em{font:400 .82em/1.1 Pacifico,cursive;color:var(--pink)}

/* We are redefining pretty */
.pf-pretty{height:300svh}
.pf-pretty .pf-sticky{justify-items:center;text-align:center}
.pf-pretty h2{margin:0 0 26px;font:400 clamp(40px,6.6vw,88px)/1 'DM Serif Display',Georgia,serif}
.pf-pretty h2 em{font:400 .85em/1.1 Pacifico,cursive;color:var(--pink)}
.pf-not{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 30px;padding:0;list-style:none;max-width:760px}
.pf-not li{position:relative;font:400 clamp(24px,3.6vw,44px)/1.1 'DM Serif Display',Georgia,serif;color:rgba(255,255,255,.9);transition:color .5s}
.pf-not li:after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:3px;border-radius:3px;background:var(--pink);transform:scaleX(var(--s,0));transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pf-not li.gone{color:rgba(255,255,255,.32)}
.pf-not li.gone:after{--s:1}
.pf-is{margin:0;max-width:30ch;font:400 clamp(22px,2.9vw,34px)/1.35 'DM Serif Display',Georgia,serif;opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.pf-is em{font-style:italic;color:var(--pink)}
.pf-pretty.done .pf-is{opacity:1;transform:none}

/* Pearls and rubies */
.pf-gems{min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:110px 22px;background:radial-gradient(60% 50% at 50% 45%,rgba(216,109,157,.22),transparent 70%)}
.pf-gemrow{display:flex;align-items:center;gap:clamp(22px,5vw,48px);margin-bottom:34px}
.pf-pearl{width:clamp(70px,11vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,#fbeef2 30%,#e8d2da 62%,#b89aa6 100%);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset -10px -14px 28px rgba(120,70,90,.35)}
.pf-rubygem{width:clamp(58px,9vw,96px)}
.pf-rubygem svg{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 36px rgba(179,18,63,.6))}
.pf-gems h2{margin:0 0 16px;font:400 clamp(44px,7vw,92px)/1 'DM Serif Display',Georgia,serif}
.pf-gems h2 em{font:400 .8em/1 Pacifico,cursive;color:var(--pink)}
.pf-gems p{margin:0 auto;max-width:50ch;font-size:clamp(17px,2vw,20px);line-height:1.65;color:rgba(255,255,255,.8)}

/* Story */
.pf-story{max-width:1000px;margin:0 auto;padding:clamp(80px,11vw,140px) clamp(20px,5vw,40px)}
.pf-story h2{margin:0;font:400 clamp(40px,6.4vw,84px)/1 'DM Serif Display',Georgia,serif}
.pf-story h2 em{font:400 .8em/1 Pacifico,cursive;color:var(--pink)}
.pf-time{list-style:none;margin:40px 0 0;padding:0 0 0 28px;border-left:2px solid rgba(249,168,201,.3);display:grid;gap:36px}
.pf-time li{position:relative;display:grid;gap:6px;max-width:60ch}
.pf-time li:before{content:"";position:absolute;left:-37px;top:4px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#f2dfe6 55%,#c9a9b6);box-shadow:0 0 0 6px rgba(249,168,201,.15)}
.pf-time time{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
.pf-time b{font:400 clamp(24px,3vw,32px)/1.1 'DM Serif Display',Georgia,serif}
.pf-time p{margin:0;font-size:17px;line-height:1.55;color:rgba(255,255,255,.76)}
.pf-time a{color:var(--pink);font-weight:800;font-size:14px}

/* The verse, alone */
.pf-verse{min-height:100svh;display:grid;place-items:center;padding:90px 22px;background:var(--void);text-align:center;overflow:hidden}
.pf-bloom{position:absolute;left:50%;top:50%;width:72vmin;height:72vmin;margin:-36vmin 0 0 -36vmin;border-radius:50%;background:radial-gradient(circle,rgba(179,18,63,.55),rgba(249,168,201,.12) 45%,transparent 68%);filter:blur(22px);animation:pfBloom 7s ease-in-out infinite alternate}
.pf-verse blockquote{position:relative;margin:0;max-width:20ch;font:italic 400 clamp(32px,5.2vw,60px)/1.25 'DM Serif Display',Georgia,serif}
.pf-verse cite{display:block;margin-top:22px;font:800 12px/1 'DM Sans',sans-serif;font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:var(--pink)}

/* Lights up into the site */
.pf-dawn{height:clamp(160px,26vh,280px);background:linear-gradient(180deg,var(--void) 0%,#5a2340 30%,#f59bc2 65%,#fff6fa 100%)}

.pf-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i, 0) * .14s)}
.pf-reveal.in{opacity:1;transform:none}

/* The header dims with the lights */
body.pgws-dark .site-header{background:rgba(27,11,20,.92);border-bottom-color:rgba(249,168,201,.18)}
body.pgws-dark .site-header nav a,body.pgws-dark .menu{color:rgba(255,255,255,.9)}
body.pgws-dark .site-header nav a:hover{color:var(--pink)}
body.pgws-dark .join-mini{background:var(--pink);color:#1b0b14}
body.pgws-dark .join-mini span{color:#1b0b14}
body.pgws-dark .site-header nav.open{background:#1b0b14}
.site-header,.site-header nav a,.join-mini{transition:background .5s,color .5s,border-color .5s}

@media (min-width:700px) and (max-height:860px){.pf-tag{display:none}.pf-deck{margin-top:4px}.pf-mirror{width:clamp(60px,9vh,132px)}.pf-open{padding-top:40px}}

@keyframes pfKen{0%{opacity:0;transform:scale(1.18)}18%{opacity:1}100%{opacity:1;transform:scale(1.02)}}
@keyframes pfBars{to{height:0}}
@keyframes pfGlow{from{transform:scale(1)}to{transform:scale(1.12) translateY(-3%)}}
@keyframes pfPre{0%{opacity:0}25%{opacity:1}70%{opacity:1}100%{opacity:.4}}
@keyframes pfMirror{from{opacity:0;transform:translateY(24px) scale(.9);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes pfDrop{from{opacity:0;transform:translateY(-80px) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes pfWord{from{opacity:0;transform:translateY(.35em);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes pfScript{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes pfIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pfBloom{from{transform:scale(.85);opacity:.7}to{transform:scale(1.1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .pf *,.pf *:before{animation:none!important;transition:none!important}
  .pf-reveal{opacity:1;transform:none}
  .pf-mission,.pf-pretty{height:auto}
  .pf-sticky{position:static;min-height:0;padding:80px 22px}
  .pf-lit span{opacity:1}
  .pf-openphoto img{opacity:1;transform:none}
  .pf-letterbox{display:none}
  .pf-journey{height:auto}
  .pf-stages{gap:34px}
  .pf-stages li{grid-area:auto;opacity:1;transform:none;filter:none}
  .pf-jbar{display:none}
  .pf-jphoto img{transform:none}
  .pf-dots,.pf-canvas{display:none}
  .pf-is{opacity:1;transform:none}
  .pf-not li{color:rgba(255,255,255,.32)}
  .pf-not li:after{--s:1}
  .pf-photo img{transform:none}
}