/* =========================================================
   Paideia of Youth — stylesheet (proportion-matched rebuild)
   Design reference canvas: 1366px wide.
   Text column ≈ 67% width, centered (≈16% margins).
   Section heading ≈ 3.7× body size.
   ========================================================= */

:root{
  --cream:#E7E6DF;
  --cream-2:#DEDBD2;
  --tan:#C2AD9D;
  --tan-dark:#a98d78;
  --ink:#2b2825;
  --text:#54504a;
  --muted:#726c63;
  --line:#cfc9bd;
  --black:#141414;
  --shadow:0 20px 45px rgba(60,48,34,.14);
  --wide:min(90vw, 1680px);   /* fills the screen but keeps side gutters */
  --measure:min(62vw, 1180px);/* text column ≈ 67% of the banner width */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Poppins', 'Segoe UI', system-ui, sans-serif;
  --ease-pop:cubic-bezier(.22,1,.36,1);
  --ease-jump:cubic-bezier(.2,.9,.25,1.22);   /* overshoot = little jump */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--cream);}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.3vw,24px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0;color:var(--ink);letter-spacing:.3px;}
h1{font-size:clamp(2.9rem,6.2vw,7rem);}
h2{font-size:clamp(2.2rem,5vw,5.6rem);}          /* scales like the Canva design */
h3{font-size:clamp(1.4rem,1.9vw,2.2rem);font-weight:600;}
p{margin:0 0 1.15rem;}
.muted{color:var(--muted);}
.italic{font-style:italic;}

/* Layout containers */
.wrap{width:var(--wide);margin:0 auto;}
.measure{width:100%;max-width:var(--measure);margin:0 auto;}
.section{padding:clamp(58px,8.5vw,104px) 0;}
.center{text-align:center;}
.lead{max-width:var(--measure);}
.kicker{font-family:var(--serif);font-size:1.4rem;color:var(--ink);}
.divider{width:120px;height:1px;background:var(--line);margin:0 0 22px;}
.prose ul{margin:.4rem 0 1rem 1.15rem;padding:0;}
.prose li{margin:.4rem 0;}

/* ---------------- Page transition (tab switching) ---------------- */
/* Entrance is PER-ELEMENT: each heading, paragraph, image and card rises in
   individually with a stagger (see .reveal below).
   Exit: the whole page fades / falls away before navigating to the next tab. */
.page-body{transition:opacity .3s ease, transform .3s ease;}
body.leaving .page-body{opacity:0;transform:translateY(-28px);}

/* ---------------- Navigation ---------------- */
.nav{position:sticky;top:0;z-index:200;background:rgba(231,230,223,.9);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(0,0,0,.05);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;width:var(--wide);}
.brand{display:flex;align-items:center;gap:11px;}
.brand .logo{width:30px;height:30px;background:var(--ink);flex:none;
  -webkit-mask:url(assets/img/logo-mask.png) center/contain no-repeat;
  mask:url(assets/img/logo-mask.png) center/contain no-repeat;}
.brand span{font-family:var(--serif);font-size:1.35rem;letter-spacing:.5px;color:var(--ink);font-weight:500;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:.95rem;letter-spacing:.4px;color:var(--muted);font-weight:400;
  position:relative;padding:5px 0;transition:color .22s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);font-weight:500;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;
  background:var(--ink);border-radius:2px;transition:right .28s var(--ease-pop);}
.nav-links a:hover::after,.nav-links a.active::after{right:0;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:210;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;
  border-radius:2px;transition:.3s var(--ease-pop);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------- Buttons ---------------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:400;letter-spacing:1px;
  font-size:.95rem;padding:13px 34px;border-radius:40px;cursor:pointer;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:transform .25s var(--ease-pop),background .25s,color .25s;
  text-decoration:underline;text-underline-offset:3px;}
.btn:hover{background:var(--ink);color:var(--cream);text-decoration:none;transform:translateY(-2px);}

/* ---------------- Media wrapper + skeleton loader ---------------- */
.media{position:relative;overflow:hidden;background:var(--cream-2);}
.media > img,.media > video{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .6s ease;}
.media.loaded > img,.media.loaded > video{opacity:1;}
.skeleton::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--cream-2) 30%,#efeee8 50%,var(--cream-2) 70%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;}
.media.loaded.skeleton::before{opacity:0;animation:none;transition:opacity .4s;pointer-events:none;}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* ---------------- Hero / full-bleed banners (shown whole, never cropped) --------- */
.hero,.band{width:var(--wide);margin-inline:auto;}
.hero{border-radius:0;}
.band-link{display:block;position:relative;transition:filter .3s;}
.band-link:hover{filter:brightness(1.05);}

/* ===== Black wordmark header logo (from the intro artwork) ===== */
.brand .wordmark{display:block;height:22px;width:180px;background:var(--ink);
  -webkit-mask:url(assets/img/wordmark-mask.png) left center/contain no-repeat;
  mask:url(assets/img/wordmark-mask.png) left center/contain no-repeat;}

/* ===== Animated intro + thank-you heroes ===== */
.intro-hero,.thankyou-hero{position:relative;width:var(--wide);margin:0 auto;
  height:min(84vh,780px);overflow:hidden;background:#1a1712;}
.thankyou-hero{height:min(66vh,600px);margin-top:12px;}
.intro-bg{position:absolute;inset:0;}
.intro-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  animation:kenburns 16s ease-out forwards;}
@keyframes kenburns{to{transform:scale(1);}}
.intro-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,12,.32),rgba(20,16,12,.52));}
.intro-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;}
.intro-logo{width:120px;height:124px;background:#fff;margin-bottom:16px;
  -webkit-mask:url(assets/img/logo-mask.png) center/contain no-repeat;
  mask:url(assets/img/logo-mask.png) center/contain no-repeat;
  opacity:0;transform:translateY(22px) scale(.82);
  animation:introPop .85s var(--ease-jump) .15s forwards;}
@keyframes introPop{to{opacity:1;transform:none;}}
.intro-title{font-family:var(--serif);color:#fff;font-weight:500;letter-spacing:1px;
  font-size:clamp(2.6rem,10.3vw,9.2rem);line-height:1.02;min-height:1.02em;}
.intro-sub{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.92);
  font-size:clamp(1.15rem,3.6vw,3rem);margin-top:14px;opacity:0;transform:translateY(12px);
  transition:opacity .9s ease,transform .9s var(--ease-pop);}
.intro-sub.show{opacity:1;transform:none;}
.ty-title{font-family:var(--serif);color:#fff;font-weight:500;line-height:1.1;
  font-size:clamp(2.4rem,10.7vw,9.2rem);max-width:15ch;min-height:1.1em;}
/* blinking caret while typing */
.typing::after{content:'';display:inline-block;width:.055em;height:1em;background:currentColor;
  margin-left:.06em;vertical-align:-.06em;animation:caret .7s step-end infinite;}
@keyframes caret{50%{opacity:0;}}

/* ===== Composed Donate CTA (only the button is clickable) ===== */
.donate-cta{position:relative;width:var(--wide);margin:0 auto;overflow:hidden;
  aspect-ratio:1306/662;background:#1a1712;}
.cta-bg{position:absolute;inset:0;}
.cta-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  animation:kenburns 18s ease-out forwards;}
.cta-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,12,.38),rgba(20,16,12,.5));}
.cta-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:min(2.6vw,30px);padding:20px;text-align:center;}
.cta-make{width:clamp(260px,56%,760px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));}
.cta-donate-text{width:clamp(130px,21%,290px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));}
.cta-btn{display:inline-block;line-height:0;cursor:pointer;width:clamp(200px,26%,360px);
  transition:transform .28s var(--ease-pop),filter .28s;}
.cta-btn img{width:100%;height:auto;}
.cta-btn:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.12);}

/* ---------------- Scroll reveal — every element pops individually ---------------- */
.js [data-reveal]{opacity:0;
  transition:opacity .75s ease, transform .95s var(--ease-jump);
  transition-delay:calc(var(--d,0) * 1ms);}
.js [data-reveal].in{opacity:1;transform:none;}
.js [data-reveal="up"]{transform:translateY(50px);}
.js [data-reveal="pop"]{transform:translateY(42px) scale(.9);}     /* pictures */
.js [data-reveal="left"]{transform:translateX(-64px);}
.js [data-reveal="right"]{transform:translateX(64px);}
.js [data-reveal="fade"]{transform:translateY(18px);}

/* Signature touches */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--tan-dark),var(--ink));}
.to-top{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:250;
  width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--cream);border:0;cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .3s, transform .35s var(--ease-pop), background .2s;box-shadow:0 10px 26px rgba(0,0,0,.28);}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--tan-dark);transform:translateY(-3px);}
.to-top svg{width:20px;height:20px;}
/* gentle zoom on hover for card / banner pictures */
.ecard .media img,.fund-card .media img,.band-link .media img{transition:transform .7s var(--ease-pop),opacity .6s ease;}
.ecard:hover .media img,.fund-card:hover .media img,.band-link:hover .media img{transform:scale(1.06);}

/* ---------------- Contact-to-donate card ---------------- */
.donate-card{max-width:560px;margin:32px auto 0;border:1px solid #b6b0a3;border-radius:14px;
  padding:34px 30px 40px;text-align:center;background:rgba(255,255,255,.22);}
.donate-card h3{font-family:var(--serif);font-size:1.9rem;font-weight:500;margin-bottom:26px;}
.contact-row{display:flex;justify-content:center;gap:80px;flex-wrap:wrap;}
.contact-item{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.92rem;
  cursor:pointer;background:none;border:0;color:var(--ink);font-family:var(--sans);
  transition:transform .25s var(--ease-pop);}
.contact-item:hover{transform:translateY(-3px);}
.contact-item svg{width:46px;height:46px;}
.contact-item u{text-underline-offset:3px;}

/* ---------------- Footer ---------------- */
.footer{background:var(--tan);color:#3a322b;margin-top:10px;}
.footer .wrap{padding:56px 0;}
.footer h2{color:#332c25;margin-bottom:16px;}
.footer p{color:#463c33;max-width:820px;}
.footer .fcontacts{margin-top:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.footer .fcontacts a,.footer .fcontacts button{display:flex;align-items:center;gap:12px;color:#3a322b;
  background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:1rem;
  transition:transform .2s var(--ease-pop);padding:0;}
.footer .fcontacts a:hover,.footer .fcontacts button:hover{transform:translateX(4px);}
.footer .fcontacts svg{width:22px;height:22px;flex:none;}
.subfooter{background:var(--black);color:#cfc9c0;}
.subfooter .wrap{display:flex;justify-content:center;align-items:center;min-height:46px;
  font-size:.82rem;letter-spacing:.4px;padding:8px 0;flex-wrap:wrap;gap:6px;}
.subfooter a{margin:0 16px;color:#cfc9c0;transition:color .2s;}
.subfooter a:hover{color:#fff;}
.subfooter .designed{font-family:var(--serif);font-style:italic;font-size:1rem;}

/* =========================================================
   EVENTS PAGE
   ========================================================= */
.activities-title{padding:clamp(40px,6vw,64px) 0 6px;text-align:center;}
.latest{padding:26px 0 8px;}
.latest .kick{font-family:var(--serif);font-size:2.1rem;color:var(--ink);font-weight:500;}
.latest .ev-name{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-top:6px;}
.latest .ev-date{color:var(--muted);font-size:.9rem;margin-bottom:22px;}
.latest .media{border-radius:14px;box-shadow:var(--shadow);aspect-ratio:16/10;
  max-width:min(66vw,1060px);}

/* tap-for-sound button on the autoplaying latest video */
.sound-toggle{position:absolute;right:14px;bottom:14px;z-index:5;
  background:rgba(20,16,12,.6);color:#fff;border:0;border-radius:40px;
  padding:9px 16px;font-family:var(--sans);font-size:.82rem;letter-spacing:.3px;cursor:pointer;
  backdrop-filter:blur(4px);transition:background .2s, transform .2s var(--ease-pop);}
.sound-toggle:hover{background:rgba(20,16,12,.82);transform:translateY(-2px);}

/* video card + click-to-play overlay */
.play-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(20,16,12,.16);transition:opacity .3s, background .3s;border:0;}
.play-overlay:hover{background:rgba(20,16,12,.28);}
.play-overlay .pbtn{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.25);
  transition:transform .25s var(--ease-pop);}
.play-overlay:hover .pbtn{transform:scale(1.1);}
.play-overlay .pbtn::after{content:"";margin-left:5px;border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink);}
.playing .play-overlay{opacity:0;pointer-events:none;}

/* Past events — responsive grid */
.events-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.ecard{background:var(--cream);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(70,60,45,.08);
  transition:transform .4s var(--ease-pop), box-shadow .4s;}
.ecard:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(70,60,45,.20);}
.ecard .media{aspect-ratio:16/10;}
.ecard .ebody{padding:18px 22px 24px;}
.ecard .ebody h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:2px;}
.ecard .ebody .date{font-style:italic;color:var(--muted);font-size:.9rem;margin-bottom:10px;}
.ecard .ebody p{font-size:.93rem;margin:0;color:var(--text);}

/* Fundraisers */
.fund-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}
.fund-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:rgba(255,255,255,.35);
  transition:transform .4s var(--ease-pop), box-shadow .4s;}
.fund-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.fund-card .media{border-radius:8px;margin-bottom:14px;aspect-ratio:289/315;}
.fund-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:500;}
.fund-card .date{font-style:italic;color:var(--muted);font-size:.85rem;margin:2px 0 10px;}
.fund-card p{font-size:.88rem;margin:0;}

/* ---------------- Legal pages (privacy / terms) ---------------- */
.legal{padding:clamp(50px,7vw,90px) 0;}
.legal h1{margin-bottom:10px;}
.legal .updated{color:var(--muted);font-style:italic;margin-bottom:34px;}
.legal h2{font-size:1.7rem;margin:34px 0 10px;}
.legal p,.legal li{color:var(--text);}
.legal ul{margin:0 0 1rem 1.1rem;}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.linklike{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font:inherit;
  text-decoration:underline;text-underline-offset:3px;}

/* ---------------- Toast (email copied) ---------------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--cream);padding:13px 26px;border-radius:40px;
  font-size:.9rem;letter-spacing:.4px;box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .3s, transform .35s var(--ease-pop);z-index:500;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------------- Team page ---------------- */
.team-content{width:var(--wide);margin:0 auto;padding:10px 0 60px;}

/* ---------------- Reduced motion ---------------- */
/* Respect reduced-motion, but keep a gentle version of the entrance so the
   site still feels alive (this project is intentionally animation-forward). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js [data-reveal]{transition-duration:.62s;}
  .js [data-reveal="up"]{transform:translateY(34px);}
  .js [data-reveal="pop"]{transform:translateY(30px) scale(.94);}
  .js [data-reveal="left"]{transform:translateX(-42px);}
  .js [data-reveal="right"]{transform:translateX(42px);}
}

/* ---------------- Responsive ---------------- */
@media (max-width:880px){
  /* comfortable, consistent side gutter for every text block */
  :root{--measure:100%; --wide:92vw; --gutter:clamp(22px,6vw,48px);}
  body{font-size:16px;}
  h1{font-size:clamp(2.3rem,9vw,3.4rem);}
  h2{font-size:clamp(1.9rem,7vw,2.8rem);}
  .section{padding:clamp(42px,9vw,58px) 0;}

  /* Feature images keep a small breathing gutter (via --wide = 92vw) … */
  /* … while text columns sit comfortably further inset from the edges */
  .wrap,.measure{width:auto;max-width:none;margin-inline:var(--gutter);}
  .nav .wrap{width:auto;margin-inline:var(--gutter);}
  .lead{max-width:none;}

  .events-grid{grid-template-columns:1fr;gap:22px;}
  .fund-grid{grid-template-columns:1fr;gap:20px;}
  .contact-row{gap:40px;}
  .latest .media{max-width:100%;}
  .donate-card{padding:28px 22px 34px;margin-top:28px;}
  .footer .wrap{padding:46px 0;}
  .footer p{font-size:.98rem;}
  .intro-hero{height:min(72vh,560px);}
  .thankyou-hero{height:min(54vh,440px);}
  .intro-logo{width:64px;height:64px;margin-bottom:12px;}
  .brand .wordmark{height:17px;width:140px;}
  .brand .logo{width:26px;height:26px;}
  /* taller CTA on phones so the pieces have room to breathe */
  .donate-cta{aspect-ratio:5/6;}
  .cta-inner{gap:7vw;}
  .cta-make{width:86%;}
  .cta-donate-text{width:48%;}
  .cta-btn{width:56%;}

  /* --- mobile nav drawer: hidden until the ☰ button is pressed --- */
  .nav-toggle{display:block;}
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; height:100dvh;
    width:min(80vw,300px); background:var(--cream);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:84px 0 24px;
    box-shadow:-18px 0 50px rgba(0,0,0,.18);
    transform:translateX(100%); transition:transform .4s var(--ease-pop);
    visibility:hidden; z-index:190;
  }
  .nav-links.open{transform:translateX(0); visibility:visible;}
  .nav-links a{padding:16px 28px; width:100%; font-size:1.1rem; color:var(--ink);
    border-bottom:1px solid rgba(0,0,0,.06);}
  .nav-links a:first-of-type{border-top:1px solid rgba(0,0,0,.06);}
  .nav-links a.active{font-weight:600;}
  .nav-links a::after{display:none;}
  .nav-scrim{position:fixed; inset:0; background:rgba(20,16,12,.4); z-index:180;
    opacity:0; pointer-events:none; transition:opacity .35s;}
  .nav-scrim.show{opacity:1; pointer-events:auto;}
}

/* extra-small phones — keep everything tidy */
@media (max-width:480px){
  .contact-row{gap:28px;}
  .contact-item svg{width:40px;height:40px;}
  .subfooter .wrap{flex-direction:column;gap:2px;text-align:center;}
}
/* the scrim only exists visually on small screens */
.nav-scrim{display:none;}
@media (max-width:880px){ .nav-scrim{display:block;} }