@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy:#14213D;
  --navy-deep:#0A0F1A;
  --mist:#F2F3F6;
  --mist-2:#FAFAFC;
  --amber:#E8963C;
  --amber-dark:#C97A24;
  --teal:#2E8C86;
  --line: rgba(20,33,61,0.14);
  --line-strong: rgba(20,33,61,0.26);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--mist); color:var(--navy); font-family:'Inter',sans-serif; font-size:17px; line-height:1.65; overflow-x:hidden;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; line-height:1.1; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}

.reveal{opacity:1; transform:none; transition:opacity 0.7s ease, transform 0.7s ease;}
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(22px);}
  .js .reveal.in{opacity:1; transform:none;}
}

.scroll-progress{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--amber); transform-origin:0 0; transform:scaleX(0); z-index:100;}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){ .scroll-progress{animation:growProgress auto linear; animation-timeline:scroll(root);} }
}
@keyframes growProgress{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

.skip-link{position:absolute; left:16px; top:-60px; background:var(--navy); color:var(--mist-2); padding:12px 18px; font-size:14px; font-weight:600; z-index:100; transition:top 0.2s ease;}
.skip-link:focus{top:16px;}

/* HEADER */
header{position:sticky; top:0; z-index:50; background:rgba(242,243,246,0.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-strong);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1160px; margin:0 auto;}
.wordmark{font-family:'Fraunces',serif; font-weight:600; font-size:20px; display:flex; align-items:center; gap:10px;}
.wordmark span{color:var(--amber);}
.wordmark img{width:36px; height:36px; border-radius:7px; object-fit:cover; flex:0 0 auto;}
nav{display:flex; align-items:center; gap:30px;}
.nav-links{display:flex; gap:26px;}
.nav-links a{position:relative; font-size:15px; font-weight:500; padding-bottom:3px;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--amber); transform:scaleX(0); transform-origin:right; transition:transform 0.25s ease;}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left;}
.btn{display:inline-block; padding:11px 22px; border-radius:2px; font-size:14px; font-weight:600; border:none; cursor:pointer; font-family:inherit; transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;}
.btn-brick{background:var(--amber); color:var(--navy-deep);}
.btn-brick:hover{background:var(--amber-dark); transform:translate(3px,-3px); box-shadow:-3px 3px 0 var(--navy);}
.menu-toggle{display:none; background:none; border:none; font-size:26px; color:var(--navy); cursor:pointer; padding:4px;}
@media (max-width:860px){
  .nav-links{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--mist); border-bottom:1px solid var(--line-strong); max-height:0; overflow:hidden; transition:max-height 0.28s ease;}
  .nav-links a{padding:16px 32px; border-top:1px solid var(--line);}
  header.nav-open .nav-links{max-height:320px;}
  header .header-inner .btn-brick{display:none;}
  header.nav-open .header-inner .btn-brick{display:inline-block; margin:0 32px 20px; width:calc(100% - 64px); text-align:center;}
  .menu-toggle{display:block;}
}

/* HERO — full-bleed image with gradient overlay */
.hero-full{position:relative; min-height:82vh; background:var(--navy-deep); display:flex; align-items:flex-end; overflow:hidden;}
.hero-full img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.9) brightness(0.75);}
.hero-full::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,15,26,0.92) 0%, rgba(10,15,26,0.45) 45%, rgba(10,15,26,0.15) 100%);}
.hero-text{position:relative; z-index:1; padding:64px 8vw 72px 32px; max-width:720px; color:var(--mist-2);}
.hero-loc{font-size:14px; font-weight:500; color:var(--amber); margin-bottom:18px;}
.hero-text h1{font-size:clamp(2.1rem,4vw,3.5rem); max-width:560px; margin-bottom:22px;}
.hero-text p{font-size:18px; max-width:460px; color:rgba(250,250,252,0.82); margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px;}
.btn-outline{border:1px solid rgba(250,250,252,0.55); color:var(--mist-2); padding:11px 22px; border-radius:2px; font-size:14px; font-weight:600; transition:transform 0.18s ease, background 0.18s ease;}
.btn-outline:hover{background:rgba(250,250,252,0.08); transform:translate(3px,-3px);}
.scroll-cue{display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(250,250,252,0.55);}
.scroll-cue .rail{width:1px; height:34px; background:rgba(250,250,252,0.3); position:relative; overflow:hidden;}
.scroll-cue .rail::after{content:''; position:absolute; left:0; top:-34px; width:100%; height:34px; background:var(--amber); animation:railDrop 2.2s ease-in-out infinite;}
@keyframes railDrop{ 0%{top:-34px;} 60%{top:34px;} 100%{top:34px;} }
@media (prefers-reduced-motion: reduce){ .scroll-cue .rail::after{animation:none; top:0;} }

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){ .hero-full img{animation:heroParallax linear; animation-timeline:scroll(root); animation-range:0 90vh;} }
}
@keyframes heroParallax{ from{transform:scale(1.02) translateY(0);} to{transform:scale(1.1) translateY(3%);} }

@media (max-width:860px){
  .hero-full{min-height:66vh;}
  .hero-text{padding:40px 24px 40px;}
  .scroll-cue{display:none;}
}

/* DIVIDER */
.brick-build{height:10px; background-image:repeating-linear-gradient(90deg, var(--navy) 0 46px, transparent 46px 50px); opacity:0.85; clip-path:inset(0 100% 0 0);}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){ .brick-build{animation:brickFill linear both; animation-timeline:view(); animation-range:entry 0% entry 90%;} }
}
@media (prefers-reduced-motion: reduce){ .brick-build{clip-path:inset(0 0 0 0);} }
.js .brick-build{clip-path:inset(0 0 0 0);}
@keyframes brickFill{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }

/* STORY */
.story{background:var(--mist-2);}
.story-grid{display:grid; grid-template-columns:0.9fr 1.1fr;}
.story-sticky-col{position:relative;}
.story-sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); overflow:hidden;}
.story-visual{position:relative; width:82%; max-width:440px; aspect-ratio:4/5;}
.sv-layer{position:absolute; inset:0; opacity:0; transition:opacity 0.7s ease; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center;}
.sv-layer.active{opacity:1;}
.sv-layer img{width:100%; height:100%; object-fit:cover; border:1px solid rgba(250,250,252,0.2);}
.sv-num{font-family:'Fraunces',serif; font-size:clamp(3.6rem,7vw,5.2rem); color:var(--teal); line-height:1;}
.sv-label{font-size:15px; color:rgba(250,250,252,0.75); margin-top:16px; max-width:280px;}

.story-steps{display:flex; flex-direction:column;}
.story-step{min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:40px 8vw 40px 48px; opacity:0.32; transition:opacity 0.4s ease;}
.js .story-step.active{opacity:1;}
.story-step h2{font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:18px; max-width:460px;}
.story-step p{max-width:460px; color:rgba(20,33,61,0.82);}

@media (max-width:860px){
  .story-grid{grid-template-columns:1fr;}
  .story-sticky-col{display:none;}
  .story-step{min-height:auto; padding:0 24px 48px; opacity:1;}
}

/* PROGRAMS */
.spine-section{padding:120px 0 110px; background:var(--mist);}
.spine-head{max-width:560px; margin-bottom:72px;}
.spine-head h2{font-size:clamp(1.8rem,3vw,2.6rem);}
.spine{position:relative; max-width:760px;}
.spine-rail{position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--line-strong);}
.spine-fill{position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--amber); transform:scaleY(0); transform-origin:top;}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){ .spine-fill{animation:fillLine linear both; animation-timeline:view(); animation-range:entry 0% exit 100%;} }
}
@media (prefers-reduced-motion: reduce){ .spine-fill{transform:scaleY(1);} }
.js .spine-fill{transform:scaleY(1);}
@keyframes fillLine{ from{transform:scaleY(0);} to{transform:scaleY(1);} }

.spine-item{position:relative; padding:0 0 64px 56px;}
.spine-item:last-child{padding-bottom:0;}
.spine-item::after{content:''; display:table; clear:both;}
.spine-dot{position:absolute; left:8px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--mist); border:2px solid var(--amber); transition:background 0.3s ease;}
.js .spine-item.in .spine-dot{background:var(--amber);}
.spine-photo{width:104px; height:104px; object-fit:cover; border:1px solid var(--line-strong); float:left; margin:2px 22px 12px 0;}
.spine-item h3{font-size:1.5rem; margin-bottom:8px;}
.spine-item p{color:rgba(20,33,61,0.8); margin-bottom:10px; max-width:480px;}
.spine-item a{font-size:14px; font-weight:600; color:var(--teal); border-bottom:1px solid var(--teal); padding-bottom:2px; transition:padding-left 0.2s ease;}
.spine-item a:hover{padding-left:4px; color:#256b66; border-color:#256b66;}

@media (max-width:640px){
  .spine-photo{width:76px; height:76px; margin:2px 16px 10px 0;}
  .spine-item{padding-left:44px;}
  .spine-rail, .spine-fill{left:6px;}
  .spine-dot{left:0;}
}

/* WALL — simple, reliable horizontal scroller, images shown uncropped */
.wall-head{padding:96px 32px 0; max-width:1160px; margin:0 auto; background:var(--navy);}
.wall-head h2{color:var(--mist-2); font-size:clamp(1.8rem,3vw,2.6rem); max-width:560px;}
.wall-head p{color:rgba(250,250,252,0.7); margin-top:16px; max-width:520px; padding-bottom:56px;}
.wall-pin{position:relative; background:var(--navy); padding:8px 0 56px;}
.wall-sticky{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);}
.wall-sticky::-webkit-scrollbar{display:none;}
.wall-track{display:flex; align-items:flex-end; gap:16px; padding:0 32px; width:max-content;}
.wall-track figure{flex:0 0 auto; height:56vh; position:relative; scroll-snap-align:start;}
.wall-track figure img{height:100%; width:auto; display:block; filter:saturate(0.9);}
.wall-track figure.w-l{height:64vh;}
.wall-track figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-size:13px; color:rgba(250,250,252,0.85); background:linear-gradient(0deg, rgba(10,15,26,0.85), transparent);}
.wall-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid rgba(250,250,252,0.35); background:rgba(10,15,26,0.65); color:var(--mist-2); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;}
.wall-nav:hover{background:rgba(10,15,26,0.9);}
.wall-prev{left:16px;}
.wall-next{right:16px;}
@media (max-width:860px){
  .wall-track figure{height:38vh;}
  .wall-track figure.w-l{height:44vh;}
  .wall-nav{display:none;}
}

/* CTA */
.cta{background:var(--amber); color:var(--navy-deep); padding:100px 0;}
.cta-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:48px; align-items:end;}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:28px; max-width:500px;}
.cta-buttons{display:flex; gap:14px; flex-wrap:wrap;}
.btn-cream{background:var(--navy-deep); color:var(--mist-2); padding:13px 26px; border-radius:2px; font-weight:600; font-size:15px; transition:transform 0.18s ease, box-shadow 0.18s ease;}
.btn-cream:hover{transform:translate(3px,-3px); box-shadow:-3px 3px 0 var(--navy);}
.btn-outline-light{border:1px solid rgba(10,15,26,0.55); color:var(--navy-deep); padding:13px 26px; border-radius:2px; font-weight:600; font-size:15px; transition:transform 0.18s ease;}
.btn-outline-light:hover{transform:translate(3px,-3px); background:rgba(10,15,26,0.08);}
.cta-address{border-left:2px solid rgba(10,15,26,0.3); padding-left:28px;}
.cta-address .label{font-size:13px; font-weight:600; margin-bottom:10px;}
.cta-address p{font-size:15px; line-height:1.6;}
@media (max-width:760px){
  .cta-grid{grid-template-columns:1fr; gap:32px;}
  .cta-address{border-left:none; border-top:2px solid rgba(10,15,26,0.3); padding-left:0; padding-top:24px;}
}

/* FOOTER */
footer{background:var(--navy-deep); color:rgba(250,250,252,0.75); padding:40px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(250,250,252,0.16);}
.footer-brand{font-family:'Fraunces',serif; font-size:18px; color:var(--mist-2); display:flex; align-items:center; gap:10px;}
.footer-brand img{width:28px; height:28px; border-radius:6px; object-fit:cover; flex:0 0 auto;}
.footer-links{display:flex; gap:24px; flex-wrap:wrap; font-size:14px;}
.footer-links a:hover{color:var(--mist-2);}
.footer-social{display:flex; gap:18px; font-size:14px;}
.footer-social a:hover{color:var(--mist-2);}
.footer-bottom{padding-top:20px; font-size:13px; color:rgba(250,250,252,0.5);}

/* SUBPAGES — shared components for interior pages (programs, team, donate, events, contact) */
.page-hero{background:var(--navy-deep); color:var(--mist-2); padding:56px 8vw 48px;}
.page-hero .crumb{font-size:14px; font-weight:500; color:var(--amber); margin-bottom:14px;}
.page-hero .crumb a{border-bottom:1px solid rgba(232,150,60,0.4);}
.page-hero .crumb a:hover{border-color:var(--amber);}
.page-hero h1{font-size:clamp(2rem,4vw,3rem); max-width:720px;}
.page-hero p{margin-top:16px; max-width:600px; color:rgba(250,250,252,0.8); font-size:17px;}

.content-section{padding:64px 0;}
.content-section + .content-section{border-top:1px solid var(--line);}
.content-section h2{font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:20px;}
.content-section p{max-width:720px; margin-bottom:16px; color:rgba(20,33,61,0.85);}
.content-section ul{margin:0 0 16px 20px;}
.content-section li{margin-bottom:8px; color:rgba(20,33,61,0.85);}
.content-section .btn-brick, .content-section .btn-outline-dark{margin-top:8px;}
.btn-outline-dark{display:inline-block; border:1px solid var(--line-strong); color:var(--navy); padding:11px 22px; border-radius:2px; font-size:14px; font-weight:600; transition:transform 0.18s ease, background 0.18s ease;}
.btn-outline-dark:hover{background:rgba(20,33,61,0.06); transform:translate(3px,-3px);}

.content-figure{margin:8px 0 32px; background:var(--navy-deep); display:flex; align-items:center; justify-content:center; max-height:460px; overflow:hidden;}
.content-figure img{width:auto; height:auto; max-width:100%; max-height:460px; object-fit:contain; display:block;}
.content-figure figcaption{font-size:13px; color:rgba(20,33,61,0.6); margin-top:8px;}

.back-link{display:inline-block; font-size:14px; font-weight:600; color:var(--teal); margin-bottom:8px;}
.back-link:hover{color:#256b66;}

/* team grid */
.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:32px 28px; margin-top:8px;}
.team-card img{width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:14px; filter:saturate(0.9); border:1px solid var(--line-strong);}
.team-card h3{font-size:1.05rem; margin-bottom:4px;}
.team-card .role{font-size:13px; color:var(--teal); font-weight:600; margin-bottom:8px;}
.team-card p{font-size:14px; color:rgba(20,33,61,0.75); margin-bottom:0;}

/* forms (Netlify Forms compatible) */
.form-grid{display:grid; gap:18px; max-width:560px; margin-top:8px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field label{font-size:14px; font-weight:600;}
.form-field input, .form-field textarea, .form-field select{border:1px solid var(--line-strong); padding:12px 14px; font-family:inherit; font-size:15px; border-radius:2px; background:#fff; color:var(--navy);}
.form-field textarea{min-height:120px; resize:vertical;}
.form-note{font-size:13px; color:rgba(20,33,61,0.6); margin-top:4px;}
.form-success{display:none; background:rgba(46,140,134,0.12); border:1px solid var(--teal); color:#1d5b57; padding:16px 18px; border-radius:2px; margin-top:8px;}

/* simple index card list (programs overview page) */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; margin-top:8px;}
.card{border:1px solid var(--line-strong); padding:24px; background:var(--mist-2);}
.card h3{font-size:1.2rem; margin-bottom:10px;}
.card p{font-size:14px; color:rgba(20,33,61,0.8); margin-bottom:14px;}
.card a{font-size:14px; font-weight:600; color:var(--teal); border-bottom:1px solid var(--teal); padding-bottom:2px;}
.card a:hover{color:#256b66; border-color:#256b66;}

@media (max-width:640px){
  .page-hero{padding:44px 24px 36px;}
  .content-section{padding:48px 0;}
}