/* represent.estherfundsfoundation.org home film. EFF's palette (purple and
   gold on night, cream for the calm passages), classes prefixed rp-. */
:root {
  --rp-purple: #42127F; --rp-lit: #5B1FB0; --rp-deep: #2A0A55; --rp-night: #140720; --rp-void: #0A0412;
  --rp-lilac: #B799E3; --rp-gold: #C9A227; --rp-gold-lit: #E8C65A; --rp-parch: #F1E6C8; --rp-cream: #F8F2E4;
  --rp-ink: #1A1226; --rp-ink2: #6F6885;
  --rp-display: "Bricolage Grotesque", system-ui, sans-serif; --rp-ui: Outfit, system-ui, sans-serif; --rp-read: Fraunces, Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.rp-body { margin: 0; font-family: var(--rp-ui); color: var(--rp-cream); background: var(--rp-night); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.rp-body a { color: inherit; }
.rp-body :focus-visible { outline: 2px solid var(--rp-gold-lit); outline-offset: 3px; }
.rp-skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: #fff; color: #000; z-index: 100; }
.rp-skip:focus { left: 8px; }
main, .rp-top, .rp-foot { position: relative; z-index: 1; }

/* four layers of depth behind the dark scenes */
.rp-depth { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rp-depth i { position: absolute; border-radius: 50%; filter: blur(10px); }
.rp-depth .g1 { width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(91,31,176,.55), transparent); transform: translateY(calc(var(--sy, 0) * -0.08px)); }
.rp-depth .g2 { width: 60vmax; height: 60vmax; right: -25vmax; top: 30vh; background: radial-gradient(closest-side, rgba(66,18,127,.6), transparent); transform: translateY(calc(var(--sy, 0) * -0.16px)); }
.rp-depth .g3 { width: 40vmax; height: 40vmax; left: 30vw; top: 70vh; background: radial-gradient(closest-side, rgba(201,162,39,.16), transparent); transform: translateY(calc(var(--sy, 0) * -0.24px)); }
.rp-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* header */
.rp-top { position: fixed; top: var(--eff-bar, 0px); left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); transition: background .4s, color .4s; }
.rp-top.solid { background: rgba(20,7,32,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.rp-brand img { width: 40px; height: 40px; object-fit: contain; }
.rp-brand b { display: block; font-family: var(--rp-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rp-brand small { display: block; font-size: 11px; color: var(--rp-lilac); }
.rp-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 500; }
.rp-nav a { text-decoration: none; opacity: .88; }
.rp-nav a:hover { opacity: 1; color: var(--rp-gold-lit); }
.rp-nav .rp-cta { opacity: 1; padding: 9px 18px; border-radius: 999px; background: var(--rp-gold); color: var(--rp-night); font-weight: 700; }
.rp-nav .rp-cta:hover { color: var(--rp-night); background: var(--rp-gold-lit); }
.rp-menu { display: none; margin-left: auto; background: none; color: inherit; border: 1px solid rgba(248,242,228,.35); border-radius: 999px; padding: 8px 16px; font: 600 14px var(--rp-ui); cursor: pointer; }
@media (max-width: 820px) {
  .rp-menu { display: block; }
  .rp-nav { display: none; position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border-radius: 18px; background: rgba(20,7,32,.97); border: 1px solid rgba(183,153,227,.35); }
  .rp-nav.open { display: flex; }
  .rp-nav a { padding: 14px 16px; }
  .rp-nav .rp-cta { text-align: center; margin-top: 6px; }
}

/* shared */
.rp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.rp-kicker { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--rp-purple); margin: 0 0 14px; }
.rp-kicker.light, .rp-open .rp-kicker, .rp-photo .rp-kicker { color: var(--rp-gold-lit); }
.rp-h2 { font-family: var(--rp-display); font-weight: 800; font-size: clamp(34px, 5.6vw, 68px); line-height: 1; letter-spacing: -.035em; margin: 0 0 20px; }
.rp-h2 em { font-style: normal; color: var(--rp-lit); }
.rp-h2.light em, .rp-train .rp-h2 em { color: var(--rp-gold-lit); }
.rp-src { font-size: 13px; color: var(--rp-lilac); margin: 8px 0 0; }
.rp-src.dark { color: var(--rp-ink2); }
.rp-src a { color: inherit; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 700 16px var(--rp-ui); text-decoration: none; color: var(--rp-cream); background: linear-gradient(135deg, var(--rp-lit), var(--rp-purple)); box-shadow: 0 12px 34px rgba(66,18,127,.45); transition: transform .25s, box-shadow .25s; }
.rp-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(91,31,176,.55); }
.rp-btn.ghost { background: transparent; box-shadow: 0 0 0 1.5px rgba(248,242,228,.45) inset; }
.rp-btn.ghost.dark { color: var(--rp-purple); box-shadow: 0 0 0 1.5px rgba(66,18,127,.45) inset; }
.rp-btn.gold { background: linear-gradient(135deg, var(--rp-gold-lit), var(--rp-gold)); color: var(--rp-night); }
.rp-btn.cream { background: var(--rp-cream); color: var(--rp-purple); }

/* I. opening */
.rp-open { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.rp-globe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.rp-open-in { position: relative; z-index: 2; max-width: 1040px; padding: 120px 16px 80px; }
.rp-cold { margin: 0; font-family: var(--rp-read); font-size: clamp(20px, 2.8vw, 30px); color: var(--rp-parch); opacity: 0; animation: rp-rise 1.2s forwards; }
.rp-cold time { font-family: var(--rp-ui); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--rp-gold-lit); }
.rp-cold.l1 { animation-delay: .8s; margin-top: 14px; }
.rp-cold.l2 { animation-delay: 2.2s; }
.rp-cold em { color: var(--rp-gold-lit); }
.rp-open .rp-src { opacity: 0; animation: rp-rise 1s 3.2s forwards; }
.rp-title { font-family: var(--rp-display); font-weight: 800; font-size: clamp(44px, 8.6vw, 110px); line-height: .95; letter-spacing: -.04em; margin: 44px 0 0; }
.rp-title span { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-60deg); animation: rp-word 1s calc(3.8s + var(--i) * .16s) cubic-bezier(.2,.7,.2,1) forwards; }
.rp-title .gold { color: var(--rp-gold-lit); text-shadow: 0 0 40px rgba(232,198,90,.35); }
@keyframes rp-word { to { opacity: 1; transform: none; } }
@keyframes rp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rp-lede { max-width: 640px; margin: 22px auto 0; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; color: var(--rp-parch); opacity: 0; animation: rp-rise 1s 5s forwards; }
.rp-open .rp-actions { justify-content: center; opacity: 0; animation: rp-rise 1s 5.3s forwards; }
.rp-note { margin: 22px 0 0; font-size: 15px; color: var(--rp-lilac); opacity: 0; animation: rp-rise 1s 5.6s forwards; }
.rp-note b { color: var(--rp-cream); }

/* II. full-bleed photograph */
.rp-photo { position: relative; height: 120svh; overflow: hidden; display: grid; align-items: end; }
.rp-photo-img { position: absolute; inset: -10% 0; background-size: cover; background-position: center 30%; transform: translateY(calc((var(--p, .5) - .5) * -14%)) scale(1.08); }
.rp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--rp-night) 0%, rgba(20,7,32,.1) 30%, rgba(42,10,85,.35) 60%, rgba(20,7,32,.95) 100%); }
.rp-photo-copy { position: relative; z-index: 2; padding: 0 clamp(16px, 6vw, 80px) 18svh; }
.rp-bridge { font-family: var(--rp-display); font-weight: 800; font-size: clamp(48px, 10vw, 136px); line-height: .9; letter-spacing: -.045em; margin: 0; text-transform: uppercase; }
.rp-bridge span { display: block; }
.rp-bridge em { display: block; font-family: var(--rp-read); font-style: italic; font-weight: 400; text-transform: none; font-size: .45em; letter-spacing: -.01em; color: var(--rp-gold-lit); margin-top: 14px; }

/* III. calm reading on cream */
.rp-story { background: var(--rp-cream); color: var(--rp-ink); padding: 120px 0; }
.rp-read { max-width: 820px; }
.rp-lit { font-family: var(--rp-read); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; margin: 0 0 24px; }
.rp-lit span { opacity: calc(.18 + .82 * clamp(0, (var(--p, 1) - var(--w)) * 5, 1)); transition: opacity .15s; }
.rp-lit em { font-style: normal; color: var(--rp-purple); font-weight: 500; }
.rp-body-p { font-family: var(--rp-read); font-size: 20px; line-height: 1.7; color: #3A3050; margin: 0 0 24px; }
.rp-link { font-weight: 700; color: var(--rp-purple) !important; text-decoration: none; border-bottom: 2px solid var(--rp-gold); padding-bottom: 2px; }

/* pinned scenes */
.rp-pin { position: relative; height: calc(var(--steps, 3) * 100svh); }
.rp-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* IV. roles */
.rp-roles { --steps: 3; background: var(--rp-parch); color: var(--rp-ink); }
.rp-roles .rp-stage { display: grid; grid-template-rows: auto 1fr auto; padding: 96px clamp(16px, 6vw, 80px) 36px; perspective: 1200px; }
.rp-roles-head .rp-h2 { font-size: clamp(28px, 4vw, 50px); }
.rp-role-list { list-style: none; margin: 0; padding: 0; position: relative; }
.rp-role { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4vw; align-items: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.rp-role.on { opacity: 1; visibility: visible; transition: opacity .7s .15s, visibility 0s; }
.rp-num { justify-self: center; font-family: var(--rp-display); font-weight: 800; font-size: clamp(140px, 24vw, 330px); line-height: .8; letter-spacing: -.06em; background: linear-gradient(160deg, var(--rp-gold-lit), var(--rp-gold) 55%, #8C6D12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 20px 30px rgba(140,109,18,.3)); transform: rotateY(calc(var(--ry, 0deg) - 60deg)) rotateX(var(--rx, 0deg)); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.rp-role.on .rp-num { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.rp-role h3 { font-family: var(--rp-display); font-weight: 800; font-size: clamp(34px, 5vw, 64px); letter-spacing: -.035em; line-height: 1; margin: 0 0 18px; color: var(--rp-purple); }
.rp-role p { font-family: var(--rp-read); font-size: clamp(19px, 2vw, 23px); line-height: 1.6; margin: 0; max-width: 520px; }
.rp-role > div { opacity: 0; transform: translateY(24px); transition: opacity .8s .3s, transform .8s .3s; }
.rp-role.on > div { opacity: 1; transform: none; }
.rp-roles-foot { margin: 0; font-size: 15px; color: var(--rp-ink2); max-width: 720px; }
@media (max-width: 760px) {
  .rp-role { grid-template-columns: 1fr; text-align: center; align-content: center; gap: 6px; }
  .rp-role p { margin: 0 auto; font-size: 18px; }
  .rp-num { font-size: 34vw; }
  .rp-roles-foot { font-size: 13px; }
}

/* V. credential */
.rp-cred { background: var(--rp-cream); color: var(--rp-ink); padding: 110px 0; }
.rp-cred-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.rp-card-stage { perspective: 1100px; display: grid; place-items: center; }
.rp-card { width: min(440px, 100%); aspect-ratio: 1.58; border-radius: 22px; padding: 3px; background: linear-gradient(135deg, var(--rp-gold-lit), #8C6D12 40%, var(--rp-gold-lit) 60%, #8C6D12); box-shadow: 0 40px 80px rgba(42,10,85,.35); transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 8deg)); transition: transform .25s; transform-style: preserve-3d; }
.rp-card-face { position: relative; height: 100%; border-radius: 19px; padding: 22px 24px; background: radial-gradient(120% 90% at 20% 0%, var(--rp-lit), var(--rp-purple) 45%, var(--rp-deep)); color: var(--rp-cream); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto auto auto; }
.rp-card-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); transform: translateX(calc(var(--shine, -60) * 1%)); transition: transform .3s; }
.rp-card-org { margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--rp-gold-lit); }
.rp-card-seal { position: absolute; right: 22px; top: 18px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0; font-family: var(--rp-display); font-weight: 800; color: var(--rp-night); background: radial-gradient(circle at 35% 30%, var(--rp-gold-lit), var(--rp-gold) 60%, #8C6D12); box-shadow: 0 0 0 3px rgba(232,198,90,.35); }
.rp-card-title { margin: 0; align-self: end; font-family: var(--rp-display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.rp-card-name { margin: 4px 0 0; font-family: var(--rp-read); font-style: italic; font-size: 20px; color: var(--rp-parch); }
.rp-card-school { margin: 0; font-size: 13px; color: var(--rp-lilac); }
.rp-card-foot { margin: 14px 0 0; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rp-gold-lit); border-top: 1px solid rgba(232,198,90,.4); padding-top: 10px; gap: 8px; }
.rp-gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-gets li { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #E6DCF2; font-weight: 600; box-shadow: 0 6px 18px rgba(42,10,85,.06); opacity: 0; transform: translateY(14px); transition: opacity .6s calc(var(--d, 0) * .12s), transform .6s calc(var(--d, 0) * .12s); }
.rp-gets li::before { content: "✦ "; color: var(--rp-gold); }
.rp-gets.in li { opacity: 1; transform: none; }
@media (max-width: 860px) { .rp-cred-in { grid-template-columns: 1fr; } .rp-gets { grid-template-columns: 1fr; } }

/* VI. training ring */
.rp-train { position: relative; padding: 110px 0; background: linear-gradient(180deg, var(--rp-deep), var(--rp-night)); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.rp-ring-wrap { position: relative; height: min(520px, 90vw); perspective: 1000px; display: grid; place-items: center; }
.rp-ring { position: absolute; width: 1px; height: 1px; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(calc(var(--spin, 0) * 1deg)); }
.rp-ring span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translate(-50%, -50%) rotateY(calc(var(--k) * 36deg)) translateZ(min(210px, 36vw)); padding: 10px 16px; border-radius: 999px; background: rgba(66,18,127,.7); border: 1px solid rgba(232,198,90,.5); font-weight: 600; font-size: 14px; backface-visibility: hidden; }
.rp-ring-core { position: relative; font-family: var(--rp-display); font-weight: 800; font-size: clamp(70px, 10vw, 120px); line-height: .9; color: var(--rp-gold-lit); text-align: center; text-shadow: 0 0 60px rgba(232,198,90,.4); }
.rp-ring-core small { display: block; font-family: var(--rp-ui); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--rp-parch); }
.rp-train-copy p { color: var(--rp-parch); font-size: 18px; line-height: 1.65; margin: 0 0 26px; }
@media (max-width: 860px) { .rp-train { grid-template-columns: 1fr; padding-top: 60px; } .rp-ring span { font-size: 12px; padding: 8px 12px; } }

/* VII. no chapter */
.rp-nochapter { background: var(--rp-cream); color: var(--rp-ink); padding: 110px clamp(16px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; max-width: 1280px; margin: 0 auto; }
.rp-nochapter-copy p { font-family: var(--rp-read); font-size: 20px; line-height: 1.65; }
.rp-stack { position: relative; height: min(560px, 110vw); }
.rp-stack > div { position: absolute; border-radius: 26px; background-size: cover; background-position: center; box-shadow: 0 30px 70px rgba(42,10,85,.3); border: 6px solid #fff; }
.rp-stack-a { left: 0; top: 0; width: 62%; height: 78%; transform: rotate(-4deg) translateY(calc((var(--p, .5) - .5) * 60px)); }
.rp-stack-b { right: 0; bottom: 0; width: 60%; height: 62%; transform: rotate(5deg) translateY(calc((var(--p, .5) - .5) * -60px)); }
@media (max-width: 860px) { .rp-nochapter { grid-template-columns: 1fr; } }

/* VIII. numbers */
.rp-now { background: var(--rp-parch); color: var(--rp-ink); padding: 90px 0; }
.rp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rp-nums div { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid #E3D6B8; }
.rp-nums b { display: block; font-family: var(--rp-display); font-weight: 800; font-size: clamp(56px, 7vw, 92px); letter-spacing: -.05em; line-height: 1; color: var(--rp-purple); }
.rp-nums span { display: block; margin: 10px 0 12px; font-size: 16px; line-height: 1.5; }
.rp-nums a { font-size: 13px; color: var(--rp-ink2); }
@media (max-width: 760px) { .rp-nums { grid-template-columns: 1fr; } }

/* IX. the verse, alone on black */
.rp-verse { min-height: 100svh; display: grid; place-items: center; background: #000; position: relative; overflow: hidden; }
.rp-verse::before { content: ""; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,162,39,.3), rgba(201,162,39,.06) 50%, transparent); opacity: calc(var(--p, 1) * 1.3); transform: scale(calc(.6 + var(--p, 1) * .5)); }
.rp-verse blockquote { position: relative; margin: 0; padding: 0 20px; max-width: 900px; text-align: center; opacity: calc(.15 + var(--p, 1) * 1.6); }
.rp-verse p { font-family: var(--rp-read); font-style: italic; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.3; margin: 0 0 22px; color: var(--rp-parch); }
.rp-verse p em { color: var(--rp-gold-lit); }
.rp-verse cite { font-style: normal; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--rp-gold); }

/* X. final */
.rp-final { padding: 120px 0; text-align: center; background: radial-gradient(90% 90% at 50% 100%, var(--rp-lit), var(--rp-purple) 45%, var(--rp-deep)); }
.rp-final-h { font-family: var(--rp-display); font-weight: 800; font-size: clamp(40px, 7vw, 92px); letter-spacing: -.04em; line-height: .95; margin: 0 0 18px; }
.rp-final-h em { font-style: normal; color: var(--rp-gold-lit); }
.rp-final p { font-size: 18px; color: var(--rp-parch); margin: 0 0 30px; }

/* footer (a classed div, never a bare footer) */
.rp-foot { background: var(--rp-void); padding: 44px clamp(16px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 18px; font-size: 14px; }
.rp-foot-brand { display: flex; gap: 12px; align-items: center; }
.rp-foot-brand img { width: 44px; height: 44px; object-fit: contain; }
.rp-foot-brand p { margin: 0; color: var(--rp-lilac); }
.rp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rp-foot-links a { text-decoration: none; color: var(--rp-parch); }
.rp-foot-links a:hover { color: var(--rp-gold-lit); }
.rp-foot-help, .rp-copy { grid-column: 1 / -1; margin: 0; color: var(--rp-lilac); }
.rp-foot-help a { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .rp-foot { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rp-body *, .rp-body *::before, .rp-body *::after { animation: none !important; transition: none !important; }
  .rp-cold, .rp-open .rp-src, .rp-title span, .rp-lede, .rp-open .rp-actions, .rp-note { opacity: 1; transform: none; }
  .rp-pin { height: auto; }
  .rp-stage { position: relative; height: auto; overflow: visible; }
  .rp-role-list { display: grid; gap: 40px; margin: 30px 0; }
  .rp-role { position: relative; opacity: 1; visibility: visible; }
  .rp-role > div, .rp-num { opacity: 1; transform: none; }
  .rp-gets li { opacity: 1; transform: none; }
  .rp-verse blockquote { opacity: 1; }
}