/* ============================================================
   GIVE16 FOUNDATION — style.css
   Palette: ink charcoal + warm cream, spruce/teal accent, warm gold
   Type: Fraunces (display serif) + Hanken Grotesk (body)
   ============================================================ */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --color-bg: #F6F1E7;            /* warm cream */
  --color-surface: #FBF7EF;
  --color-surface-2: #FFFDF8;
  --color-surface-offset: #EDE6D6;
  --color-border: #DCD3C0;
  --color-divider: #E4DBC9;

  --color-text: #1B1D21;          /* ink */
  --color-text-muted: #5C5E5A;
  --color-text-faint: #9A9890;
  --color-text-inverse: #F6F1E7;

  --color-ink: #16181C;           /* deep dark sections */
  --color-ink-surface: #1E2127;

  --color-primary: #1F5A57;       /* spruce teal */
  --color-primary-hover: #16433F;
  --color-primary-soft: #D9E4E1;

  --color-gold: #B98828;          /* warm gold accent */
  --color-gold-soft: #E9DCBE;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(27,29,33,.06);
  --shadow-md: 0 6px 20px rgba(27,29,33,.10);
  --shadow-lg: 0 18px 48px rgba(27,29,33,.16);

  --content-narrow: 680px;
  --content-default: 1080px;
  --content-wide: 1240px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
}

[data-theme="dark"] {
  --color-bg: #131418;
  --color-surface: #1A1C21;
  --color-surface-2: #20232A;
  --color-surface-offset: #1E2027;
  --color-border: #2D3037;
  --color-divider: #26282E;

  --color-text: #ECE7DB;
  --color-text-muted: #A3A199;
  --color-text-faint: #6C6A63;
  --color-text-inverse: #16181C;

  --color-ink: #0E0F12;
  --color-ink-surface: #16181C;

  --color-primary: #5BA89F;
  --color-primary-hover: #7FC0B7;
  --color-primary-soft: #233533;

  --color-gold: #D4A646;
  --color-gold-soft: #3A3324;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#131418; --color-surface:#1A1C21; --color-surface-2:#20232A;
    --color-surface-offset:#1E2027; --color-border:#2D3037; --color-divider:#26282E;
    --color-text:#ECE7DB; --color-text-muted:#A3A199; --color-text-faint:#6C6A63;
    --color-text-inverse:#16181C; --color-ink:#0E0F12; --color-ink-surface:#16181C;
    --color-primary:#5BA89F; --color-primary-hover:#7FC0B7; --color-primary-soft:#233533;
    --color-gold:#D4A646; --color-gold-soft:#3A3324;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
body{
  min-height:100dvh;line-height:1.65;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);
  transition:background-color .4s ease,color .4s ease;
}
img,picture,svg{display:block;max-width:100%;height:auto;}
ul[role="list"]{list-style:none;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit;}
h1,h2,h3,h4{text-wrap:balance;line-height:1.12;font-family:var(--font-display);font-weight:600;}
p{text-wrap:pretty;max-width:64ch;}
::selection{background:color-mix(in oklab,var(--color-primary) 28%,transparent);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

a,button,.btn{transition:color var(--transition-interactive),background var(--transition-interactive),
  border-color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive);}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;
  padding:.65rem 1rem;z-index:200;border-radius:0 0 var(--radius-md) 0;}
.skip-link:focus{left:0;}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem);}
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32));}
.section--alt{background:var(--color-surface-offset);}
.section--dark{background:var(--color-ink);color:var(--color-text-inverse);position:relative;overflow:hidden;}
[data-theme="dark"] .section--dark{background:var(--color-ink);}

.eyebrow{font-size:var(--text-sm);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--color-primary);margin-bottom:var(--space-4);display:flex;align-items:center;gap:.6rem;}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--color-gold);display:inline-block;}
.eyebrow--light{color:var(--color-gold);}

.section-title{font-size:var(--text-2xl);font-weight:600;letter-spacing:-.01em;}
.section-head{max-width:760px;margin-bottom:var(--space-12);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-intro{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-5);max-width:62ch;}
.section-head--center .section-intro{margin-inline:auto;}
.section-intro--light{color:rgba(246,241,231,.78);}

.lead{font-size:var(--text-lg);color:var(--color-text);margin-bottom:var(--space-5);}
.muted-note{color:var(--color-text-muted);margin-top:var(--space-4);}
p + p{margin-top:var(--space-4);}

.text-link{display:inline-block;margin-top:var(--space-5);color:var(--color-primary);font-weight:600;
  border-bottom:2px solid transparent;padding-bottom:2px;}
.text-link:hover{border-bottom-color:var(--color-primary);}

.grid-2{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (min-width:860px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-2--mission{grid-template-columns:1fr 1.2fr;align-items:end;}
  .grid-2--story{grid-template-columns:1.4fr .9fr;align-items:center;}
  .grid-2--collab{grid-template-columns:1.3fr .9fr;align-items:start;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  padding:.85rem 1.6rem;border-radius:var(--radius-full);border:2px solid transparent;
  white-space:nowrap;line-height:1;}
.btn--sm{padding:.6rem 1.15rem;}
.btn--block{display:flex;width:100%;}
.btn--primary{background:var(--color-primary);color:#fff;}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--primary:active{transform:translateY(0);}
.btn--ghost{background:transparent;border-color:var(--color-border);color:var(--color-text);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);}
.btn--on-dark{border-color:rgba(246,241,231,.35);color:#F6F1E7;}
.btn--on-dark:hover{border-color:var(--color-gold);color:var(--color-gold);background:rgba(246,241,231,.04);}
.btn--outline-light{background:transparent;border-color:rgba(246,241,231,.4);color:#F6F1E7;}
.btn--outline-light:hover{background:#F6F1E7;color:var(--color-ink);transform:translateY(-2px);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;}
.site-header.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding-block:var(--space-3);}
.brand{display:flex;align-items:center;}
.brand-logo{height:44px;width:auto;transition:height .3s ease;}
.brand-logo--light{display:none;}
[data-theme="dark"] .brand-logo--dark{display:none;}
[data-theme="dark"] .brand-logo--light{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .brand-logo--dark{display:none;}
  :root:not([data-theme]) .brand-logo--light{display:block;}
}
.scrolled .brand-logo{height:38px;}

.primary-nav ul{display:flex;gap:clamp(1rem,2vw,1.9rem);align-items:center;}
.primary-nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);position:relative;padding:.3rem 0;}
.primary-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--color-primary);transition:width var(--transition-interactive);}
.primary-nav a:hover{color:var(--color-text);}
.primary-nav a:hover::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);
  color:var(--color-text-muted);border:1px solid var(--color-border);}
.icon-btn:hover{color:var(--color-primary);border-color:var(--color-primary);}

.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;padding:0 9px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);}
.nav-toggle span{display:block;height:2px;background:var(--color-text);border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none;}
.mobile-nav ul{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) clamp(1.25rem,5vw,3rem) var(--space-8);}
.mobile-nav a{display:block;padding:.7rem 0;font-size:var(--text-lg);font-weight:500;border-bottom:1px solid var(--color-divider);}
.mobile-nav .btn{margin-top:var(--space-3);border-bottom:none;}

@media (max-width:980px){
  .primary-nav,.header-cta{display:none;}
  .nav-toggle{display:flex;}
  .mobile-nav{display:block;max-height:0;overflow:hidden;background:var(--color-surface);
    border-bottom:1px solid var(--color-border);transition:max-height .4s var(--ease-out);}
  .mobile-nav.open{max-height:560px;}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,820px);display:flex;align-items:flex-end;
  color:#F6F1E7;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:-1;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,18,.30) 0%,rgba(14,15,18,.36) 34%,rgba(14,15,18,.82) 100%);}
.hero-content{padding-block:clamp(var(--space-16),12vh,var(--space-32));max-width:760px;}
.hero-title{font-size:var(--text-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.04;
  text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero-lede{font-size:var(--text-lg);max-width:54ch;margin-top:var(--space-5);color:rgba(246,241,231,.92);}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8);}
.hero-attribution{margin-top:var(--space-6);font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(246,241,231,.7);}

/* ---------- Mission ---------- */
.mission-body .lead{max-width:60ch;}
.stat-row{display:grid;gap:var(--space-8);margin-top:clamp(var(--space-12),6vw,var(--space-20));
  padding-top:var(--space-12);border-top:1px solid var(--color-border);}
@media (min-width:720px){.stat-row{grid-template-columns:repeat(3,1fr);}}
.stat-num{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-primary);
  font-variant-numeric:tabular-nums;}
.stat-label{display:block;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);}

/* ---------- Story ---------- */
.story-text .section-title{margin-bottom:var(--space-8);}
.pullquote{margin-top:var(--space-8);padding-left:var(--space-6);border-left:3px solid var(--color-gold);
  font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;color:var(--color-text);line-height:1.4;}
.pullquote cite{display:block;margin-top:var(--space-3);font-size:var(--text-sm);font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-family:var(--font-body);}
.number-card{background:var(--color-ink);color:#F6F1E7;border-radius:var(--radius-xl);padding:clamp(2rem,4vw,3rem);
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.number-card::after{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;
  border:1px solid rgba(246,241,231,.12);}
.number-card-num{font-family:var(--font-display);font-size:clamp(4.5rem,12vw,7rem);font-weight:600;line-height:1;
  color:var(--color-gold);display:block;}
.number-card-text{margin-top:var(--space-5);color:rgba(246,241,231,.82);font-size:var(--text-base);}

/* ---------- Suite ---------- */
.suite-feature{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:clamp(var(--space-16),6vw,var(--space-24));}
@media (min-width:860px){.suite-feature{grid-template-columns:1fr 1fr;}}
.suite-figure{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
.suite-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.suite-feature-text h3{font-size:var(--text-xl);margin-bottom:var(--space-4);}
.program-grid{display:grid;gap:var(--space-5);}
@media (min-width:640px){.program-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.program-grid{grid-template-columns:repeat(4,1fr);}}
.program-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);}
.program-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-full);
  background:var(--color-primary-soft);color:var(--color-primary);font-size:1.4rem;margin-bottom:var(--space-4);}
.program-card h4{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2);}
.program-card p{font-size:var(--text-sm);color:var(--color-text-muted);}

/* ---------- Support (dark) ---------- */
.support-texture{position:absolute;inset:0;background:url("../img/texture-dark.jpg") center/cover no-repeat;
  opacity:.5;z-index:0;}
.support-inner{position:relative;z-index:1;}
.support-cards{display:grid;gap:var(--space-6);margin-top:var(--space-4);}
@media (min-width:780px){.support-cards{grid-template-columns:repeat(2,1fr);}}
.support-card{background:rgba(246,241,231,.05);border:1px solid rgba(246,241,231,.14);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.25rem);display:flex;flex-direction:column;}
.support-card h3{font-size:var(--text-xl);color:#F6F1E7;margin-bottom:var(--space-3);}
.support-card p{color:rgba(246,241,231,.75);font-size:var(--text-sm);margin-bottom:var(--space-6);flex:1;}
.support-card-note{color:rgba(246,241,231,.55)!important;font-size:var(--text-xs)!important;margin-bottom:var(--space-5)!important;flex:0!important;}
.support-note{margin-top:var(--space-10);font-size:var(--text-sm);color:rgba(246,241,231,.6);max-width:70ch;
  border-top:1px solid rgba(246,241,231,.14);padding-top:var(--space-6);}

/* ---------- Community ---------- */
.values-grid{display:grid;gap:var(--space-6);}
@media (min-width:780px){.values-grid{grid-template-columns:repeat(3,1fr);}}
.value-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.25rem);border-top:3px solid var(--color-gold);}
.value-card h4{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-3);}
.value-card p{font-size:var(--text-sm);color:var(--color-text-muted);}

/* ---------- Collaborations ---------- */
.collab-text .section-title{margin-bottom:var(--space-8);}
.collab-text p{margin-bottom:var(--space-5);}
.collab-text .btn{margin-top:var(--space-3);}
.collab-aside{background:var(--color-surface-offset);border-radius:var(--radius-xl);padding:clamp(1.75rem,3vw,2.5rem);}
.collab-aside h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-5);}
.collab-list li{display:flex;gap:.75rem;padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);
  font-size:var(--text-sm);color:var(--color-text-muted);}
.collab-list li:last-child{border-bottom:none;}
.collab-list span{color:var(--color-gold);font-size:.7rem;margin-top:.45rem;}

/* ---------- Contact ---------- */
.contact .section-title{color:#FFF9EA;text-shadow:0 2px 18px rgba(0,0,0,.38);}
.contact-grid{display:grid;gap:var(--space-6);margin-top:var(--space-4);}
@media (min-width:780px){.contact-grid{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto;}}
.contact-card{background:rgba(246,241,231,.05);border:1px solid rgba(246,241,231,.14);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.25rem);text-align:center;}
.contact-card h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;color:#F6F1E7;margin-bottom:var(--space-3);}
.contact-card p{color:rgba(246,241,231,.75);font-size:var(--text-sm);margin-bottom:var(--space-6);margin-inline:auto;}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-ink);color:rgba(246,241,231,.8);padding-block:var(--space-20) var(--space-10);}
.footer-inner{display:grid;gap:var(--space-12);}
@media (min-width:780px){.footer-inner{grid-template-columns:1.2fr 2fr;align-items:start;}}
.footer-brand img{height:64px;width:auto;}
.footer-tagline{margin-top:var(--space-4);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:rgba(246,241,231,.9);max-width:30ch;}
.footer-nav{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.footer-col h4{font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold);
  font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-4);}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-2);}
.footer-col a{font-size:var(--text-sm);color:rgba(246,241,231,.75);}
.footer-col a:hover{color:#F6F1E7;}
.footer-legal{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid rgba(246,241,231,.14);}
.legal-note{font-size:var(--text-sm);color:rgba(246,241,231,.7);max-width:80ch;}
.legal-meta{margin-top:var(--space-3);font-size:var(--text-xs);color:rgba(246,241,231,.5);}
.legal-copy{margin-top:var(--space-4);font-size:var(--text-xs);color:rgba(246,241,231,.45);}
.legal-copy sup{font-size:.6em;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
  .reveal.in{opacity:1;transform:none;}
}