/* Art for Future — Style A "Origami"
   Folded-paper planes in the logo's four colors on white paper; photos cut on a diagonal. */
:root{
  --paper:#ffffff; --ink:#1d2433; --muted:#5b6474; --line:#eef0f3;
  --teal:#18a6a0; --pink:#e83f7b; --orange:#f39221; --green:#5aa846; --sky:#e9f6f5; --lav:#ece8fd;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
.eyebrow{font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.c-pink{color:var(--pink)}.c-teal{color:var(--teal)}.c-orange{color:var(--orange)}.c-green{color:var(--green)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand img{height:46px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.nav > a,.nav summary{text-decoration:none;padding-block:6px;border-bottom:3px solid transparent;cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.nav > a:hover,.nav summary:hover,.nav .current,.nav details[open] summary{border-color:var(--orange)}
.nav details{position:relative}
.nav summary{white-space:nowrap}
.menu{position:absolute;right:0;top:calc(100% + 12px);width:min(340px,86vw);background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(29,36,51,.35);padding:8px;display:grid;text-transform:none;letter-spacing:0;font-weight:500}
.menu a{text-decoration:none;padding:.65em .8em;border-left:4px solid transparent;line-height:1.35}
.menu a:hover,.menu a[aria-current]{background:var(--sky);border-color:var(--teal)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--pink);color:#fff;text-decoration:none;font-weight:700;padding:.85em 1.5em;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.btn:hover{background:var(--ink)}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:var(--pink)}

/* ---------- home: hero ---------- */
.hero{position:relative;width:100%;overflow:hidden;background:var(--ink)}
.hero-img{width:100%;height:min(88vh,62vw);min-height:340px;object-fit:cover;object-position:center 55%}
.hero-text{position:absolute;inset:auto 0 0 0;padding-block:clamp(80px,14vw,200px) clamp(28px,4.5vw,64px);background:linear-gradient(to top,rgba(17,22,32,.78),rgba(17,22,32,.35) 55%,transparent)}
.hero h1{color:#fff;font-size:clamp(2.2rem,6vw,5.4rem);letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero h1 .art{color:#ff6fa3}
.hero::after{content:"";position:absolute;right:0;bottom:0;width:clamp(60px,10vw,150px);aspect-ratio:1;background:var(--orange);clip-path:polygon(100% 0,100% 100%,0 100%)}

/* ---------- home: mission ---------- */
.mission{background:var(--sky);clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%);padding-block:calc(4vw + 56px)}
.mission .wrap{display:grid;gap:clamp(40px,6vw,72px)}
.mrow{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.mrow.flip{grid-template-columns:1fr 1.2fr}
.mrow.flip .mtext{order:2}
.mrow h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:18px}
.mrow p{max-width:62ch;margin:0 0 14px}
.dropcap::first-letter{float:left;font:800 3.6em/.82 var(--display);color:var(--teal);margin:.06em .1em 0 0}
.mphoto img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 86%,90% 100%,0 100%)}
.mrow.flip .mphoto img{clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 14%)}

/* ---------- sections ---------- */
section.block{padding-block:clamp(56px,8vw,104px)}
.head{margin-bottom:40px;max-width:70ch}
.head h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.head p{color:var(--muted);margin:16px 0 0}

/* ---------- team ---------- */
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:40px clamp(24px,4vw,48px)}
.person{display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:start}
.person img,.person .ph{width:100%;aspect-ratio:1;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.person .ph{display:grid;place-items:center;background:var(--sky);font:800 2.2rem var(--display);color:var(--teal)}
.person h3{font-size:1.4rem}
.person h4{font:700 .9rem/1.3 var(--body);color:var(--pink);margin:4px 0 10px}
.person p{margin:0;color:var(--muted);font-size:.98rem}
.members{margin-top:64px;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,48px);align-items:center}
.members img{width:100%;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(0 0,94% 0,100% 8%,100% 100%,0 100%)}
.members h3{font-size:1.6rem;margin-bottom:14px}
.members ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.members li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);padding:.25em .7em;font-size:.93rem}
.members li:nth-child(4n+2){border-left-color:var(--pink)}.members li:nth-child(4n+3){border-left-color:var(--orange)}.members li:nth-child(4n){border-left-color:var(--green)}

/* ---------- home programs ---------- */
.programs-band{background:#fafbfc;border-top:1px solid var(--line)}
.prog{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(28px,4vw,48px)}
.prog + .prog{border-top:1px dashed #d9dee5}
.prog:nth-of-type(even) .ptext{order:2}
.prog h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.prog h3 a{text-decoration:none}
.prog h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.prog p{margin:0 0 18px;max-width:60ch}
.prog .pimg{position:relative;display:block}
.prog .pimg img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 86%,90% 100%,0 100%)}
.prog .pimg::before{content:"";position:absolute;left:-14px;top:-14px;width:28%;aspect-ratio:1;clip-path:polygon(0 0,100% 0,0 100%);z-index:-1}
.prog:nth-of-type(3n+1) .pimg::before{background:var(--orange)}
.prog:nth-of-type(3n+2) .pimg::before{background:var(--green)}
.prog:nth-of-type(3n) .pimg::before{background:var(--pink)}
.prog .pimg{isolation:isolate}
.more{font-weight:700;text-decoration:none;border-bottom:3px solid var(--orange);padding-bottom:2px}

/* ---------- join ---------- */
.join{background:var(--orange);clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);padding-block:calc(3vw + 64px) 72px}
.join .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.join h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:16px}
.join p{max-width:56ch;font-size:1.08rem;margin:0 0 10px}
.join .tag{font-weight:700}
.join .actions{justify-self:start;display:flex;flex-wrap:wrap;gap:12px}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--ink);color:#fff}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#c7cdd8;padding-block:28px;font-size:.92rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.site-footer img{height:40px;width:auto;background:#fff;padding:4px;border-radius:4px}

/* ---------- program pages ---------- */
.page-hero{padding-block:clamp(36px,6vw,72px) clamp(24px,4vw,40px);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-40px;top:0;width:min(260px,30vw);aspect-ratio:1;background:var(--sky);clip-path:polygon(100% 0,100% 100%,0 0);z-index:-1}
.page-hero h1{font-size:clamp(2rem,5vw,3.8rem);max-width:22ch}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.crumb a{text-decoration:none;border-bottom:1px solid currentColor}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.story .text p{margin:0 0 18px;max-width:62ch}
.story .lead img{width:100%;object-fit:cover;aspect-ratio:4/3;clip-path:polygon(0 0,100% 0,100% 88%,90% 100%,0 100%)}
.gallery-wrap{background:#fafbfc;border-top:1px solid var(--line);padding-block:clamp(40px,6vw,72px)}
.gallery-wrap h2{font-size:1.6rem;margin-bottom:24px}
.gallery{columns:3 240px;column-gap:14px}
.gallery button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid}
.gallery img{width:100%;height:auto;transition:opacity .2s}
.gallery button:hover img{opacity:.85}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:36px;border-top:1px solid var(--line)}
.pager a{text-decoration:none;font-weight:700;max-width:46%}
.pager span{display:block;font:600 .78rem/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.empty{padding-block:clamp(40px,8vw,96px) clamp(80px,12vw,160px)}

/* ---------- feature program page ---------- */
.feature{display:grid;gap:clamp(28px,4vw,44px);padding-block:clamp(16px,3vw,32px) clamp(40px,6vw,72px)}
.title-panel{padding-block:clamp(20px,3vw,40px) 0}
.title-panel h1{font-size:clamp(2.2rem,5.2vw,4.2rem);letter-spacing:-.02em}
.feature-lead{width:min(100%,760px);justify-self:center;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.feature-text{width:min(100%,640px);justify-self:center}
.feature-text p{margin:0 0 1.2em}
.gallery.grid{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery.grid button{margin:0}
.gallery.grid img{aspect-ratio:4/3;object-fit:cover;border-radius:12px}
@media (max-width:700px){.gallery.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(17,22,32,.92);display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.lightbox img{max-height:86vh;max-width:100%;width:auto;object-fit:contain}
.lightbox button{position:absolute;background:#fff;color:var(--ink);border:0;width:46px;height:46px;font-size:1.4rem;cursor:pointer}
.lb-close{top:16px;right:16px}.lb-prev{left:12px;top:50%}.lb-next{right:12px;top:50%}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mrow,.mrow.flip,.members,.join .wrap,.prog,.story{grid-template-columns:1fr}
  .mrow.flip .mtext,.prog:nth-of-type(even) .ptext{order:0}
  .leaders{grid-template-columns:1fr}
}
@media (max-width:560px){
  .person{grid-template-columns:96px 1fr;gap:16px}
  .brand img{height:28px}
  .nav{gap:10px;font-size:.78rem;letter-spacing:.02em}
  .bar{gap:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}