/* ============================================================
   ROCK WELFARE PROJECT — shared design system
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --slate:#373c42;
  --granite:#6e6a63;
  --copper:#5d7a6b;
  --copper-lt:#bfe0cd;
  --limestone:#f4f1ea;
  --paper:#ece6da;
  --basalt:#1b1d1f;
  --line:#d3ccbf;
  --line-strong:#bcb3a2;
  --maxw:1180px;
  --serif:"Spectral",Georgia,serif;
  --display:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--limestone);color:var(--basalt);
  font-family:var(--serif);font-size:18px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{ /* film grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;}
img{max-width:100%;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;letter-spacing:-.01em;}
.mono{font-family:var(--mono);}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--granite);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.lead{font-size:clamp(20px,2.3vw,27px);line-height:1.5;font-weight:300;}
p{max-width:68ch;}
sup a{font-family:var(--mono);font-size:.62em;text-decoration:none;color:var(--copper);}
.center{text-align:center;}

/* ---- NAV ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(244,241,234,0);
  transition:background .4s,border-color .4s;border-bottom:1px solid transparent;}
nav.scrolled,nav.solid{background:rgba(244,241,234,.95);backdrop-filter:blur(8px);border-color:var(--line);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;transition:color .4s;}
nav.scrolled .brand,nav.solid .brand{color:var(--basalt);}
.brand svg{width:30px;height:30px;flex:none;}
.brand .bt{font-family:var(--display);font-size:15px;letter-spacing:.04em;line-height:1.05;text-transform:uppercase;}
.brand .bt small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;opacity:.7;text-transform:uppercase;}
.nav-links{display:flex;gap:24px;align-items:center;}
.nav-links .item{position:relative;}
.nav-links a,.nav-links .item>span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:#fff;opacity:.88;transition:color .4s,opacity .2s;cursor:pointer;}
nav.scrolled .nav-links a,nav.scrolled .nav-links .item>span,
nav.solid .nav-links a,nav.solid .nav-links .item>span{color:var(--basalt);}
.nav-links a:hover,.nav-links .item:hover>span{opacity:1;}
.nav-links a.give{border:1px solid currentColor;padding:7px 14px;opacity:1;}
.drop{position:absolute;top:100%;left:-14px;padding-top:14px;display:none;}
.item:hover .drop{display:block;}
.drop-inner{background:var(--limestone);border:1px solid var(--line);min-width:230px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.12);}
.drop-inner a{display:block;color:var(--basalt)!important;opacity:1;padding:10px 14px;font-size:11.5px;}
.drop-inner a:hover{background:var(--paper);}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.burger span{width:24px;height:2px;background:#fff;display:block;transition:.3s;}
nav.scrolled .burger span,nav.solid .burger span{background:var(--basalt);}
@media(max-width:920px){
  .nav-links{position:fixed;inset:56px 0 auto 0;background:var(--limestone);flex-direction:column;
    align-items:flex-start;gap:0;padding:10px 0;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .35s;max-height:90vh;overflow:auto;}
  .nav-links.open{transform:none;}
  .nav-links a,.nav-links .item>span{color:var(--basalt)!important;padding:14px 32px;width:100%;font-size:13px;}
  .item{width:100%;}
  .drop{position:static;display:block;padding:0;}
  .drop-inner{border:0;box-shadow:none;background:var(--paper);min-width:0;padding:0;}
  .drop-inner a{padding-left:48px;}
  .nav-links a.give{margin:14px 32px;width:auto;text-align:center;}
  .burger{display:flex;}
}

/* ---- HERO ---- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero.short{min-height:62vh;}
.hero .bg{position:absolute;inset:0;background:#22262b center/cover no-repeat;}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.82) contrast(1.02);}
.hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,25,.55),rgba(20,22,25,.25)38%,rgba(20,22,25,.82));}
.hero .wrap{position:relative;padding-top:150px;padding-bottom:64px;}
.hero .eyebrow{color:#cdd6cf;}
.hero h1{font-size:clamp(40px,6.6vw,90px);font-weight:300;margin:20px 0 0;max-width:18ch;text-shadow:0 1px 30px rgba(0,0,0,.3);}
.hero h1 em{font-style:italic;color:#cfe0d4;}
.hero .sub{font-size:clamp(18px,2vw,23px);max-width:44ch;margin:24px 0 0;color:#e9e6df;font-weight:300;}
.credit{position:absolute;right:32px;bottom:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:rgba(255,255,255,.55);text-align:right;}

/* ---- buttons ---- */
.cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.btn{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;
  text-decoration:none;border:1px solid;display:inline-block;transition:.2s;cursor:pointer;background:none;}
.btn.solid{background:var(--limestone);color:var(--basalt);border-color:var(--limestone);}
.btn.solid:hover{background:transparent;color:#fff;}
.btn.ghost{border-color:rgba(255,255,255,.6);color:#fff;}
.btn.ghost:hover{background:rgba(255,255,255,.12);}
.btn.dark{background:var(--basalt);color:var(--limestone);border-color:var(--basalt);}
.btn.dark:hover{background:transparent;color:var(--basalt);}

/* ---- sections ---- */
section{padding:104px 0;}
.sec-head{max-width:62ch;margin-bottom:14px;}
.sec-head h2{font-size:clamp(30px,4.4vw,54px);font-weight:300;margin-top:14px;}
.muted{color:#43474c;}
@media(max-width:680px){section{padding:64px 0;}}

/* stat band */
.stats{background:var(--basalt);color:var(--limestone);}
.stats .grid{display:grid;grid-template-columns:repeat(3,1fr);}
.stat{padding:54px 32px;border-right:1px solid rgba(255,255,255,.12);}
.stat:last-child{border-right:0;}
.stat .n{font-family:var(--display);font-size:clamp(40px,5.6vw,64px);font-weight:300;line-height:1;}
.stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#a7a297;margin-top:16px;max-width:30ch;}
@media(max-width:760px){.stats .grid{grid-template-columns:1fr;}.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);}}

/* big quote band */
.bigband{background:var(--paper);}
.bigband .big{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.32;max-width:24ch;}
.bigband .big em{font-style:italic;}

/* three col */
.three{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:46px;}
.three .col{padding:38px 32px 38px 0;border-right:1px solid var(--line);}
.three .col:last-child{border-right:0;padding-left:34px;}
.three .col:nth-child(2){padding-left:34px;}
.three h3{font-size:24px;margin-bottom:12px;}
.three .tag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--copper);display:block;margin-bottom:16px;}
@media(max-width:820px){.three{grid-template-columns:1fr;}.three .col,.three .col:last-child,.three .col:nth-child(2){border-right:0;border-bottom:1px solid var(--line);padding:30px 0;}}

/* feature rows (alternating image/text) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:64px;}
.feat:first-of-type{margin-top:48px;}
.feat.flip .ftext{order:2;}
.feat .frame{aspect-ratio:4/3;}
.feat h3{font-size:clamp(26px,3vw,38px);font-weight:300;margin-bottom:16px;}
.feat .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);}
.feat p{color:#43474c;font-size:17px;}
@media(max-width:820px){.feat{grid-template-columns:1fr;gap:28px;}.feat.flip .ftext{order:0;}}

/* image frame with fallback placeholder */
figure{margin:0;}
.frame{position:relative;background:repeating-linear-gradient(45deg,#e2dccf 0 9px,#e7e1d4 9px 18px);
  overflow:hidden;border:1px solid var(--line-strong);}
.frame::after{content:"FIELD ARCHIVE · IMAGE PENDING DIGITIZATION";position:absolute;inset:0;z-index:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--granite);text-align:center;padding:20px;}
.frame img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.28) contrast(1.02);}
figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--granite);margin-top:10px;line-height:1.5;}
figcaption b{color:var(--basalt);font-weight:500;}
.plate-no{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--copper);text-transform:uppercase;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:52px;align-items:end;}
.duo .frame{aspect-ratio:4/3;}
@media(max-width:720px){.duo{grid-template-columns:1fr;}}

/* chart grid (dark, used on research.html) */
.chartgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:46px;}
.chartgrid > div{background:var(--basalt);padding:34px;min-width:0;}
.chartgrid svg{display:block;width:100%;height:auto;max-width:100%;}
@media(max-width:760px){.chartgrid{grid-template-columns:1fr;}}

/* taxonomy-of-harm rows (used on impact.html) */
.taxrow{display:grid;grid-template-columns:64px 1fr 200px;gap:28px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;}
@media(max-width:680px){
  .taxrow{grid-template-columns:auto 1fr;gap:6px 16px;padding:22px 0;}
  .taxrow > div:nth-child(3){grid-column:1/-1;text-align:left !important;margin-top:4px;display:flex;align-items:baseline;gap:10px;}
  .taxrow > div:nth-child(3) b{display:inline !important;font-size:22px !important;}
}

/* dark cta band */
.ctaband{background:var(--slate);color:var(--limestone);text-align:center;}
.ctaband h2{font-size:clamp(28px,4vw,48px);font-weight:300;max-width:20ch;margin:0 auto;}
.ctaband p{margin:18px auto 0;color:#dfe3dc;max-width:52ch;}

/* ---- generic card grid ---- */
.cardgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
.gcard{background:var(--limestone);padding:38px;}
.gcard .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--copper);}
.gcard h3{font-size:25px;font-weight:300;margin:14px 0 12px;}
.gcard p{font-size:16px;color:#43474c;margin:0;}
.gcard .badge{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--granite);border:1px solid var(--line-strong);padding:5px 10px;}
@media(max-width:720px){.cardgrid{grid-template-columns:1fr;}}

/* ---- impact counters ---- */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:48px;}
.counter{background:var(--basalt);padding:48px 30px;text-align:center;}
.counter .n{font-family:var(--display);font-size:clamp(38px,5vw,62px);font-weight:300;line-height:1;color:#fff;}
.counter .l{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#a7a297;margin-top:16px;}
@media(max-width:760px){.counters{grid-template-columns:1fr;}.counter{padding:28px 22px;}.counter .n{font-size:30px;}.counter .l{margin-top:10px;}}

/* ---- prose article ---- */
.prose{max-width:68ch;}
.prose p{margin:0 0 22px;}
.prose h3{font-size:28px;font-weight:300;margin:44px 0 16px;}
.prose blockquote{margin:32px 0;font-family:var(--display);font-weight:300;font-style:italic;font-size:26px;
  line-height:1.34;border-left:2px solid var(--copper);padding-left:26px;color:var(--slate);}
.prose ul{padding-left:20px;}
.prose li{margin:8px 0;}

/* ---- team ---- */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
.mem{background:var(--limestone);padding:0;}
.mem .ph{aspect-ratio:1/1;background:repeating-linear-gradient(45deg,#e2dccf 0 9px,#e7e1d4 9px 18px);position:relative;overflow:hidden;}
.mem .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.02);}
.mem .body{padding:22px 22px 26px;}
.mem .role{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);}
.mem .nm{font-family:var(--display);font-size:21px;font-weight:300;margin-top:8px;}
.mem .bio{font-size:13.5px;color:#5a5d62;margin-top:10px;line-height:1.5;}
@media(max-width:900px){.tgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.tgrid{grid-template-columns:1fr;}}

/* ---- news ---- */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:46px;}
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--limestone);transition:.2s;}
.post:hover{box-shadow:0 16px 40px rgba(0,0,0,.08);transform:translateY(-3px);}
.post .ph{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#e2dccf 0 9px,#e7e1d4 9px 18px);overflow:hidden;}
.post .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.02);}
.post .body{padding:24px;flex:1;display:flex;flex-direction:column;}
.post .meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--granite);}
.post h3{font-size:21px;font-weight:300;margin:12px 0 10px;line-height:1.2;}
.post p{font-size:14.5px;color:#5a5d62;margin:0;flex:1;}
.post .more{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);margin-top:18px;}
@media(max-width:880px){.newsgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.newsgrid{grid-template-columns:1fr;}}

/* ---- donate tiers ---- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-top:48px;}
.tier{background:var(--slate);padding:34px 26px;text-align:center;transition:.2s;}
.tier:hover{background:#41464d;}
.tier .nm{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-lt);}
.tier .amt{font-family:var(--display);font-size:40px;font-weight:300;margin:14px 0 4px;}
.tier .amt span{font-size:15px;color:#aeb4ac;}
.tier .d{font-size:13px;color:#c8ccc4;min-height:40px;}
.tier .btn{margin-top:16px;font-size:11px;}
@media(max-width:820px){.tiers{grid-template-columns:1fr 1fr;}}

/* ---- forms ---- */
.field{display:block;margin-bottom:20px;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--granite);display:block;margin-bottom:8px;}
.field input,.field textarea,.field select{width:100%;background:var(--limestone);border:1px solid var(--line-strong);
  padding:13px 14px;font-family:var(--serif);font-size:16px;color:var(--basalt);outline:none;transition:border .2s;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--copper);}
.field textarea{min-height:140px;resize:vertical;}
.formnote{font-family:var(--mono);font-size:11px;color:var(--granite);margin-top:6px;}
.formmsg{display:none;font-family:var(--mono);font-size:13px;letter-spacing:.03em;margin-top:18px;padding:16px 18px;border:1px solid var(--copper);background:rgba(93,122,107,.08);color:var(--slate);}
.formmsg.show{display:block;}
.spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-2px;margin-right:8px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn[disabled]{opacity:.6;cursor:default;}

/* newsletter (footer + page) */
.news-signup{display:flex;max-width:420px;border:1px solid var(--line-strong);}
.news-signup input{flex:1;background:transparent;border:0;padding:13px 14px;font-family:var(--mono);font-size:13px;outline:none;color:inherit;}
.news-signup button{background:var(--basalt);color:var(--limestone);border:0;padding:0 20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.news-signup button[disabled]{opacity:.6;}

/* contact split */
.csplit{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;margin-top:48px;}
@media(max-width:840px){.csplit{grid-template-columns:1fr;gap:40px;}}
.cinfo .row{padding:20px 0;border-bottom:1px solid var(--line);}
.cinfo .row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--granite);}
.cinfo .row .v{font-size:18px;margin-top:6px;}
.cinfo .row .v a{color:var(--copper);text-decoration:none;}

/* ---- footer ---- */
footer{background:var(--basalt);color:#a7a297;padding:78px 0 40px;}
footer .ftop{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:42px;}
footer .brand-f .bt{font-family:var(--display);font-size:22px;font-weight:300;color:var(--limestone);}
footer .brand-f p{font-family:var(--mono);font-size:12px;line-height:1.7;color:#8a857b;margin-top:12px;max-width:34ch;}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a857b;font-weight:500;margin-bottom:16px;}
footer .fcol a{display:block;color:#bdb8ad;text-decoration:none;font-size:14px;padding:5px 0;}
footer .fcol a:hover{color:#fff;}
footer .news h4{margin-bottom:8px;}
footer .news .sub{font-family:var(--mono);font-size:11px;color:#8a857b;margin:0 0 14px;}
footer .news .formmsg{color:#bfe0cd;border-color:#5d7a6b;}
footer .fine{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.8;margin-top:30px;color:#6f6a60;max-width:88ch;}
footer .socials{display:flex;gap:18px;margin-top:18px;}
footer .socials a{color:#8a857b;}
footer .socials a:hover{color:#fff;}
@media(max-width:760px){footer .ftop{grid-template-columns:1fr;gap:32px;}}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
.ld{opacity:0;transform:translateY(16px);animation:ld .9s forwards cubic-bezier(.2,.7,.2,1);}
@keyframes ld{to{opacity:1;transform:none;}}
.d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}.d4{animation-delay:.75s}