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

:root{
  --ink:#132420;
  --dusk:#0F3B3C;
  --dusk-2:#082221;
  --dusk-3:#3A5F4E;
  --gold:#E7A33E;
  --gold-soft:#F4CD8C;
  --coral:#E2614C;
  --sage:#7FA487;
  --cream:#FBF6EC;
  --paper:#F2ECDC;
  --line:rgba(19,36,32,0.12);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; font-size:0.72rem;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; line-height:1.06; margin:0;}
img{max-width:100%;}
button{font-family:inherit;}
a{color:inherit;}

::selection{background:var(--gold-soft); color:var(--dusk-2);}

:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:2px;}

.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:200; background:var(--dusk); color:var(--cream);
  padding:0.7rem 1.1rem; border-radius:8px; transition:top 0.25s var(--ease); text-decoration:none;
}
.skip-link:focus{top:1rem;}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:100;
  background:linear-gradient(90deg, var(--gold), var(--coral));
  transition:width 0.1s linear;
}

/* ---------- loading ---------- */
.loading{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  background:radial-gradient(120% 90% at 50% 0%, var(--dusk-3) 0%, var(--dusk) 45%, var(--dusk-2) 100%);
  color:var(--cream);
}
.loading .ng-mark{width:240px; opacity:0.9;}
.loading .mono{color:var(--gold); letter-spacing:0.12em;}
.loading-bar{width:140px; height:2px; background:rgba(251,246,236,0.15); border-radius:2px; overflow:hidden;}
.loading-bar::after{
  content:''; display:block; width:40%; height:100%; background:var(--gold);
  animation:loadingSweep 1.1s ease-in-out infinite;
}
@keyframes loadingSweep{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(350%);}
}
.hidden{display:none !important;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,246,236,0.72); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.3s var(--ease-soft);
}
.site-header.scrolled{box-shadow:0 8px 30px rgba(15,59,60,0.08);}
.header-inner{
  max-width:1180px; margin:0 auto; padding:0.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:0.7rem; background:none; border:none; cursor:pointer; padding:0.2rem;}
.brand-logo{width:40px; height:40px; object-fit:cover; border-radius:50%;}
.brand-mark{
  width:40px; height:40px; border-radius:50%; background:var(--dusk); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:1.2rem;
  transition:transform 0.4s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
.brand-text{display:flex; flex-direction:column; align-items:flex-start; text-align:left;}
.brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; color:var(--ink);}
.brand-sub{font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--dusk); opacity:0.6;}
.footer-brand{font-size:1.25rem; color:var(--cream);}

.nav{display:flex; align-items:center; gap:1.7rem;}
.nav-link{background:none; border:none; cursor:pointer; font-size:0.92rem; font-weight:500; color:var(--ink); opacity:0.68; padding:0.3rem 0; position:relative;}
.nav-link:hover{opacity:1;}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--coral);
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease);
}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{opacity:1;}
.nav-link.active::after{transform:scaleX(1);}
.nav-admin{
  background:var(--dusk); color:var(--cream); border:none; border-radius:999px; padding:0.5rem 1.1rem;
  font-size:0.8rem; font-weight:600; cursor:pointer; letter-spacing:0.03em; text-decoration:none; display:inline-block;
  transition:transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-admin:hover{background:var(--dusk-2); transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,59,60,0.25);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:0.5rem; width:34px; height:34px; align-items:center; justify-content:center;}
.burger span{width:20px; height:2px; background:var(--ink); display:block; transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:820px){
  .nav{
    position:fixed; top:65px; left:0; right:0; background:var(--cream);
    flex-direction:column; align-items:flex-start; gap:0; padding:0.4rem 1.5rem 1.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all 0.3s var(--ease);
  }
  .nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-link, .nav-admin{width:100%; text-align:left; padding:0.8rem 0;}
  .nav.open .nav-link, .nav.open .nav-admin{
    animation:navItemIn 0.4s var(--ease) backwards;
  }
  .nav.open .nav-link:nth-child(1){animation-delay:0.04s;}
  .nav.open .nav-link:nth-child(2){animation-delay:0.09s;}
  .nav.open .nav-link:nth-child(3){animation-delay:0.14s;}
  .nav.open .nav-link:nth-child(4){animation-delay:0.19s;}
  .nav.open .nav-admin{animation-delay:0.24s;}
  @keyframes navItemIn{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:translateX(0);}}
  .burger{display:flex;}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg, var(--dusk-2) 0%, var(--dusk) 55%, var(--dusk-3) 100%);}
.hero-grain{position:absolute; inset:0; opacity:0.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-sky{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-sun{
  position:absolute; right:6%; top:10%; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(231,163,62,0.85) 0%, rgba(231,163,62,0.22) 45%, rgba(231,163,62,0) 72%);
  animation:sunPulse 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes sunPulse{0%,100%{opacity:0.65; transform:scale(1);} 50%{opacity:1; transform:scale(1.09);}}
.motes{position:absolute; inset:0; pointer-events:none;}
.mote{
  position:absolute; bottom:-8%; width:4px; height:4px; border-radius:50%; background:var(--gold-soft);
  opacity:0; animation:moteRise linear infinite;
}
@keyframes moteRise{
  0%{opacity:0; transform:translateY(0) translateX(0);}
  10%{opacity:0.7;}
  90%{opacity:0.4;}
  100%{opacity:0; transform:translateY(-120vh) translateX(30px);}
}
.hero-inner{position:relative; max-width:900px; margin:0 auto; padding:7rem 1.5rem 6.5rem; text-align:left;}
.eyebrow{color:var(--gold); margin-bottom:1.1rem; display:block; opacity:0; animation:riseIn 0.7s var(--ease) forwards 0.05s;}
.hero-h1{color:var(--cream); font-size:clamp(2.15rem, 5vw, 3.6rem); font-weight:600; max-width:19ch; margin-bottom:1.5rem;}
.word-mask{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em;}
.word{display:inline-block; opacity:0; transform:translateY(100%); animation:wordUp 0.75s var(--ease) forwards;}
@keyframes wordUp{to{opacity:1; transform:translateY(0);}}
.hero-body{color:rgba(251,246,236,0.82); font-size:1.1rem; max-width:56ch; line-height:1.7;
  opacity:0; animation:riseIn 0.8s var(--ease) forwards 0.5s;}
@keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.hero-mark-wrap{margin-top:3.4rem; opacity:0; animation:riseIn 0.9s var(--ease) forwards 0.7s; max-width:440px;}
.scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:0.5rem; opacity:0; animation:riseIn 0.8s var(--ease) forwards 1.4s;
}
.scroll-cue-line{width:1px; height:34px; background:linear-gradient(180deg, var(--gold), transparent); position:relative; overflow:hidden;}
.scroll-cue-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold);
  animation:cueDrip 1.8s ease-in-out infinite;
}
@keyframes cueDrip{0%{top:-100%;} 60%,100%{top:100%;}}

/* horizon divider between hero and next section */
.horizon{position:relative; margin-top:-1px; line-height:0;}
.horizon svg{width:100%; height:auto; display:block;}

/* ---------- nightingale svg mark ---------- */
.ng-mark{width:100%; max-width:440px; height:auto;}
.ng-branch{stroke:var(--gold); stroke-width:1.4; fill:none; opacity:0.7;}
.ng-leaf{fill:var(--sage);}
.ng-staff{stroke:rgba(251,246,236,0.22); stroke-width:1;}
.ng-bird{fill:var(--gold);}
.ng-wing-back{fill:var(--sage); opacity:0.55;}
.ng-wing{fill:var(--coral); opacity:0.9;}
.ng-tail{fill:var(--gold); opacity:0.85;}
.ng-leg{stroke:var(--gold); stroke-width:2; stroke-linecap:round;}
.ng-eye{fill:var(--dusk-2);}

.ng-mark.animate .ng-staff{stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.3s var(--ease) forwards;}
.ng-mark.animate .ng-branch{stroke-dasharray:260; stroke-dashoffset:260; animation:draw 1s var(--ease) forwards 0.3s;}
.ng-mark.animate .ng-leaf{opacity:0; transform:scale(0.4); transform-origin:center; animation:leafPop 0.5s var(--ease-soft) forwards 1s;}
.ng-mark.animate .ng-leaf:nth-of-type(2){animation-delay:1.15s;}
.ng-mark.animate .ng-tail,
.ng-mark.animate .ng-wing-back,
.ng-mark.animate .ng-bird,
.ng-mark.animate .ng-wing{
  stroke:var(--gold); stroke-width:1;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 1.9s var(--ease) forwards 0.7s;
}
.ng-mark.animate .ng-leg{stroke-dasharray:20; stroke-dashoffset:20; animation:draw 0.5s var(--ease) forwards 2.5s;}
.ng-mark.animate .ng-eye{opacity:0; animation:fadeIn 0.4s ease forwards 2.7s;}
.ng-mark.animate .ng-bird-group{
  animation:idleBob 4.5s ease-in-out infinite 3s;
  transform-origin:255px 90px;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}
@keyframes leafPop{to{opacity:0.85; transform:scale(1);}}
@keyframes idleBob{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-3px) rotate(-1deg);}}

/* ---------- facts strip ---------- */
.facts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  background:var(--dusk);
}
.fact{padding:2.2rem 1.6rem; border-right:1px solid rgba(251,246,236,0.12); position:relative;}
.fact:last-child{border-right:none;}
.fact::before{
  content:''; position:absolute; top:0; left:1.6rem; right:1.6rem; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 0.6s var(--ease) 0.1s;
}
.fact.in::before{transform:scaleX(1);}
.fact-label{color:var(--gold); margin-bottom:0.55rem; display:block;}
.fact-value{color:var(--cream); font-family:'Fraunces', serif; font-size:1.18rem; font-weight:600;}
@media (max-width:720px){
  .facts{grid-template-columns:repeat(2, 1fr);}
  .fact{border-bottom:1px solid rgba(251,246,236,0.12);}
}

/* ---------- sections ---------- */
.section{max-width:900px; margin:0 auto; padding:5.5rem 1.5rem;}
.section-alt{
  max-width:none; padding:5.5rem 0;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(127,164,135,0.14) 0%, transparent 60%),
    var(--paper);
}
.section-alt > *{max-width:900px; margin-left:auto; margin-right:auto; padding:0 1.5rem;}
.section-alt .mini-gallery{padding:0 1.5rem; max-width:900px; box-sizing:border-box;}
.page-top{padding-top:4.8rem;}
.section-eyebrow{color:var(--coral); margin-bottom:0.85rem; display:block; position:relative; padding-left:1.4rem;}
.section-eyebrow::before{content:''; position:absolute; left:0; top:50%; width:0.9rem; height:1px; background:var(--coral); transform:translateY(-50%);}
.section-h1{font-size:clamp(1.95rem, 4vw, 2.7rem); margin-bottom:1.3rem; max-width:20ch;}
.section-h2{font-size:clamp(1.6rem, 3vw, 2.15rem); margin-bottom:1.15rem; max-width:20ch;}
.section-h3{font-size:1.42rem; margin:2.4rem 0 1.3rem;}
.section-body{font-size:1.03rem; line-height:1.8; color:var(--ink); opacity:0.85; max-width:64ch;}
.link-btn{
  background:none; border:none; color:var(--dusk); font-weight:600; cursor:pointer; padding:0;
  margin-top:1.3rem; font-size:0.95rem; display:inline-flex; align-items:center; gap:0.4rem;
  text-decoration:none; position:relative;
}
.link-btn::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--coral); transform:scaleX(1); transform-origin:left; transition:transform 0.3s var(--ease);}
.link-btn .arrow{transition:transform 0.3s var(--ease);}
.link-btn:hover{color:var(--coral);}
.link-btn:hover .arrow{transform:translateX(4px);}
.muted{opacity:0.6; font-style:italic;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(0.94); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.reveal-scale.in{opacity:1; transform:scale(1);}

/* ---------- objectives — branch/timeline treatment ---------- */
.objectives{list-style:none; margin:0; padding:0 0 0 0.2rem; position:relative;}
.objectives::before{
  content:''; position:absolute; left:16px; top:8px; bottom:8px; width:1.5px;
  background:linear-gradient(180deg, var(--gold), var(--sage));
  transform:scaleY(0); transform-origin:top; transition:transform 1.1s var(--ease);
}
.objectives.in::before{transform:scaleY(1);}
.objectives li{
  display:flex; gap:1.1rem; align-items:flex-start; padding:0 0 1.4rem 0; position:relative; padding-left:2.5rem;
}
.objectives li:last-child{padding-bottom:0;}
.obj-num{
  position:absolute; left:0; top:0.1rem; width:33px; height:33px; border-radius:50%; background:var(--cream);
  border:1.5px solid var(--gold); color:var(--dusk); display:flex; align-items:center; justify-content:center;
  font-size:0.66rem; flex-shrink:0; z-index:1;
}
.objectives li span:last-child{line-height:1.7; opacity:0.9; padding-top:0.4rem;}

/* ---------- trustees ---------- */
.trustees{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1.1rem;}
.trustee-card{
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:1.3rem;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.trustee-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(15,59,60,0.1); border-color:var(--gold);}
.trustee-name{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; margin-bottom:0.35rem;}
.trustee-role{color:var(--dusk); opacity:0.7;}

/* ---------- gallery ---------- */
.mini-gallery, .gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.3rem; margin:2.2rem auto;
  max-width:900px;
}
.gallery-grid{grid-template-columns:repeat(3, 1fr); max-width:1180px; padding:0 1.5rem;}
.gallery-card{
  margin:0; border-radius:14px; overflow:hidden; background:var(--dusk); position:relative;
  box-shadow:0 10px 24px rgba(15,59,60,0.08); transition:box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.gallery-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(15,59,60,0.18);}
.gallery-card img{width:100%; height:230px; object-fit:cover; display:block; transition:transform 0.6s var(--ease);}
.gallery-card:hover img{transform:scale(1.08);}
.gallery-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem 0.9rem;
  background:linear-gradient(0deg, rgba(8,34,33,0.92), rgba(8,34,33,0.15) 70%, transparent);
  color:var(--cream); font-size:0.83rem;
  transform:translateY(8px); opacity:0.88; transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.gallery-card:hover figcaption{transform:translateY(0); opacity:1;}
@media (max-width:820px){
  .mini-gallery, .gallery-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .mini-gallery, .gallery-grid{grid-template-columns:1fr;}
}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.contact-card{
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:1.5rem;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.contact-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,59,60,0.1); border-color:var(--gold);}
.contact-value{font-size:1.03rem; margin-top:0.35rem; line-height:1.55;}
@media (max-width:600px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
.site-footer{background:var(--dusk-2); color:var(--cream); padding:3.8rem 1.5rem 1.7rem; position:relative; overflow:hidden;}
.footer-inner{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:2.2rem; border-bottom:1px solid rgba(251,246,236,0.12); position:relative;}
.footer-text{opacity:0.65; max-width:38ch; margin-top:0.65rem; line-height:1.55; font-size:0.92rem;}
.footer-links{display:flex; flex-direction:column; gap:0.65rem;}
.footer-links button{background:none; border:none; color:var(--cream); opacity:0.75; cursor:pointer; text-align:left; padding:0; font-size:0.92rem; transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);}
.footer-links button:hover{opacity:1; color:var(--gold); transform:translateX(3px);}
.footer-copy{max-width:1180px; margin:1.5rem auto 0; opacity:0.4;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
  .hero-h1, .hero-body, .eyebrow, .hero-mark-wrap, .reveal, .reveal-scale, .word{opacity:1 !important; transform:none !important;}
  .ng-mark.animate .ng-bird, .ng-mark.animate .ng-wing, .ng-mark.animate .ng-staff, .ng-mark.animate .ng-branch, .ng-mark.animate .ng-leg, .ng-mark.animate .ng-eye, .ng-mark.animate .ng-leaf, .ng-mark.animate .ng-wing-back, .ng-mark.animate .ng-tail{
    stroke-dashoffset:0 !important; opacity:1 !important; transform:none !important;
  }
  .objectives::before{transform:scaleY(1) !important;}
  .fact::before{transform:scaleX(1) !important;}
}