/* ============================================================
   MIKE CAMPBELL MINISTRIES — "Contemporary Gallery" (D7)
   A pristine, curated exhibition space. Visible 1px grid,
   museum plates, immense white space, restrained orange punch.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --ink:#050505;
  --ink-70:rgba(5,5,5,.70);
  --ink-50:rgba(5,5,5,.50);
  --ink-35:rgba(5,5,5,.35);
  --primary:#426C7D;
  --primary-ink:#2f5563;
  --accent:#FF4500;
  --line:#E8E8E8;
  --line-strong:#d8d8d8;

  --frame-max:1320px;
  --gutter:clamp(20px,5vw,64px);

  --ff-display:"Epilogue",-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-body:"Karla",-apple-system,BlinkMacSystemFont,sans-serif;

  --ease:cubic-bezier(.16,.84,.30,1);
  --dur:.55s;
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:600;line-height:1.02;letter-spacing:-.02em;}
p{margin:0 0 1.1em;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- The Frame + Exhibition Grid ---------- */
.frame{
  position:relative;
  max-width:var(--frame-max);
  margin:0 auto;
  background:var(--surface);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  overflow:hidden;
}
/* faint interior vertical guide lines — the museum matrix, visible in whitespace */
.frame::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-repeat:no-repeat;
  background-position:25% 0,50% 0,75% 0;
  background-size:1px 100%;
  opacity:.55;
}
.frame > *{position:relative;z-index:1;}

/* ---------- Kicker / museum label ---------- */
.label{
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-50);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.label .idx{color:var(--accent);font-variant-numeric:tabular-nums;}
.label--light{color:rgba(255,255,255,.6);}
.label--light .idx{color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ff-body);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .25s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn:active{transform:translateY(1px);}
.btn--accent{background:var(--accent);border-color:var(--accent);}
.btn--accent:hover{background:var(--ink);border-color:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn--ondark{background:#fff;color:var(--ink);border-color:#fff;}
.btn--ondark:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn .arw{transition:transform .35s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}

/* text link with underline animation */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tlink:hover{color:var(--accent);border-color:var(--accent);}
.tlink .arw{transition:transform .35s var(--ease);}
.tlink:hover .arw{transform:translateX(4px);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 var(--gutter);height:74px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand__mark{width:38px;height:38px;flex:none;}
.brand__mark img{width:100%;height:100%;object-fit:contain;}
.brand__wm{display:flex;flex-direction:column;line-height:1;min-width:0;}
.brand__wm b{
  font-family:var(--ff-display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;
}
.brand__wm span{
  font-size:9.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-50);margin-top:3px;white-space:nowrap;
}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-70);transition:color .25s var(--ease);position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent);
  transition:width .3s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink);}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%;}
.nav__right{display:flex;align-items:center;gap:18px;}
.nav__social{display:flex;align-items:center;gap:14px;}
.nav__social a{color:var(--ink-50);transition:color .25s var(--ease),transform .25s var(--ease);}
.nav__social a:hover{color:var(--accent);transform:translateY(-2px);}
.nav__social svg{width:17px;height:17px;display:block;}
.nav__give{
  padding:11px 20px;font-size:12px;letter-spacing:.14em;
}
.hamburger{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.hamburger span{display:block;width:20px;height:1.6px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* mobile drawer */
.m-nav{
  position:fixed;inset:0;z-index:55;background:var(--surface);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;padding:96px var(--gutter) 40px;
  visibility:hidden;
}
.m-nav.open{transform:translateY(0);visibility:visible;}
.m-nav a.m-link{
  font-family:var(--ff-display);font-weight:600;font-size:clamp(30px,9vw,46px);
  letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;
}
.m-nav a.m-link small{font-family:var(--ff-body);font-size:12px;color:var(--accent);letter-spacing:.2em;font-weight:700;}
.m-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:20px;}
.m-nav__social{display:flex;gap:22px;}
.m-nav__social a{color:var(--ink-70);}
.m-nav__social svg{width:22px;height:22px;}

/* ============================================================
   HERO — split grid: whitespace + tagline | uncropped portrait
   ============================================================ */
.hero{display:grid;grid-template-columns:1.02fr .98fr;border-bottom:1px solid var(--line);}
.hero__text{
  padding:clamp(40px,7vw,92px) var(--gutter) clamp(40px,6vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--line);min-width:0;
}
.hero__crumb{
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-35);margin-bottom:clamp(28px,5vw,54px);display:flex;gap:10px;align-items:center;
}
.hero__crumb .dot{width:5px;height:5px;background:var(--accent);border-radius:50%;}
.hero h1{
  font-size:clamp(46px,8.2vw,104px);font-weight:300;letter-spacing:-.035em;line-height:.94;
}
.hero h1 em{font-style:normal;font-weight:700;}
.hero h1 .amp{color:var(--primary);}
.hero__accentline{width:64px;height:2px;background:var(--accent);margin:clamp(28px,4vw,42px) 0;}
.hero__sub{font-size:clamp(16px,1.5vw,19px);color:var(--ink-70);max-width:44ch;margin-bottom:36px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero__media{position:relative;overflow:hidden;min-height:420px;background:var(--line);}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 32%;}
.hero__plate{
  position:absolute;left:0;bottom:0;right:0;
  padding:16px 20px;background:linear-gradient(to top,rgba(5,5,5,.62),transparent);
  color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
}
.hero__plate .cap{font-family:var(--ff-display);font-size:18px;font-weight:500;max-width:22ch;}
.hero__plate .no{font-size:10px;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.7);white-space:nowrap;}

/* marquee strip */
.marquee{border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink);color:#fff;}
.marquee__track{display:flex;gap:0;white-space:nowrap;will-change:transform;animation:marq 34s linear infinite;}
.marquee__track span{
  font-family:var(--ff-display);font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:13px 26px;display:inline-flex;align-items:center;gap:26px;
}
.marquee__track span::after{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%;}
@keyframes marq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section{padding:clamp(52px,8vw,110px) var(--gutter);border-bottom:1px solid var(--line);}
.section--tight{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,5vw,60px);flex-wrap:wrap;}
.sec-head__l{max-width:60ch;}
.sec-title{font-size:clamp(30px,5vw,58px);font-weight:300;letter-spacing:-.03em;margin-top:20px;}
.sec-title em{font-style:normal;font-weight:700;}
.sec-intro{color:var(--ink-70);max-width:56ch;margin-top:22px;font-size:clamp(15px,1.4vw,18px);}

/* ============================================================
   ABOUT — oversized portraits + curated bios
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.person{background:var(--surface);display:flex;flex-direction:column;}
.person__media{overflow:hidden;aspect-ratio:4/3;background:var(--line);}
.person__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.person:hover .person__media img{transform:scale(1.04);}
.person__body{padding:clamp(24px,3vw,40px);}
.person__name{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.person__name h3{font-size:clamp(26px,3vw,38px);font-weight:700;}
.person__name .role{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);}
.person__body p{font-size:15.5px;color:var(--ink-70);}
.person__book{margin-top:14px;}
.person__book .tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);border:1px solid var(--line);padding:6px 12px;margin-bottom:16px;
}

/* ============================================================
   PILLARS — mathematical grid, hairline gaps
   ============================================================ */
.pillars-wrap{border:1px solid var(--line);}
.pillar-groups{display:grid;grid-template-columns:1fr;}
.group-band{
  display:flex;align-items:center;gap:16px;padding:14px var(--gutter);
  background:var(--bg);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-70);
}
.group-band .n{color:var(--accent);}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);}
.pillar{
  background:var(--surface);padding:clamp(22px,2.4vw,34px);min-height:230px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:background .4s var(--ease);
}
.pillar:hover{background:var(--bg);}
.pillar__no{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ink-35);font-variant-numeric:tabular-nums;}
.pillar__no b{color:var(--accent);}
.pillar h4{font-size:clamp(18px,1.7vw,22px);font-weight:700;margin:18px 0 12px;letter-spacing:-.01em;}
.pillar p{font-size:14px;color:var(--ink-70);line-height:1.6;margin:0;}
.pillar__where{
  margin-top:auto;padding-top:16px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary);
}
.pillar__mark{position:absolute;right:18px;top:18px;width:22px;height:1px;background:var(--line-strong);}

/* ============================================================
   MISSIONS — horizontal gallery + project cards
   ============================================================ */
.gallery-scroll{
  display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.gallery-scroll::-webkit-scrollbar{height:6px;}
.gallery-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);}
.plate{
  flex:0 0 auto;width:clamp(260px,30vw,380px);background:var(--surface);scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.plate--text{
  width:clamp(200px,22vw,280px);justify-content:center;padding:clamp(24px,3vw,40px);
  background:var(--bg);
}
.plate--text .big{font-family:var(--ff-display);font-weight:300;font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1;}
.plate--text .lst{margin-top:18px;font-size:13px;color:var(--ink-70);line-height:2;}
.plate--text .lst b{color:var(--ink);font-weight:600;}
.plate__media{overflow:hidden;aspect-ratio:4/5;background:var(--line);}
.plate__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.plate:hover .plate__media img{transform:scale(1.05);}
.plate__cap{padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--line);}
.plate__cap .t{font-family:var(--ff-display);font-size:15px;font-weight:500;}
.plate__cap .n{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--ink-35);white-space:nowrap;}
.scrollhint{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);margin-top:16px;display:flex;gap:8px;align-items:center;}

/* project cards */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1px;}
.project{background:var(--surface);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;min-height:220px;transition:background .4s var(--ease);}
.project:hover{background:var(--bg);}
.project__date{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent);font-variant-numeric:tabular-nums;}
.project h4{font-size:clamp(22px,2.4vw,30px);font-weight:700;margin:14px 0 8px;}
.project__place{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:16px;}
.project p{font-size:14px;color:var(--ink-70);margin:0;}
.project__foot{margin-top:auto;padding-top:18px;}

/* La Ola CTA band */
.laola{display:grid;grid-template-columns:1.1fr .9fr;background:var(--primary);color:#fff;border:1px solid var(--primary);margin-top:1px;}
.laola__body{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center;}
.laola__body h3{font-size:clamp(26px,3.4vw,42px);font-weight:300;letter-spacing:-.02em;line-height:1.02;margin-bottom:18px;}
.laola__body h3 em{font-style:normal;font-weight:700;}
.laola__body p{color:rgba(255,255,255,.8);font-size:15.5px;max-width:46ch;margin-bottom:28px;}
.laola__media{overflow:hidden;min-height:280px;background:var(--primary-ink);}
.laola__media img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   GIVING teaser
   ============================================================ */
.give-teaser{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--surface);}
.give-teaser__l{padding:clamp(30px,4vw,60px);border-right:1px solid var(--line);}
.give-teaser__l h3{font-size:clamp(28px,3.6vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.02;margin-bottom:22px;}
.give-teaser__l h3 em{font-style:normal;font-weight:700;}
.give-teaser__l p{color:var(--ink-70);max-width:48ch;font-size:16px;}
.harvest{display:inline-flex;gap:10px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin-bottom:26px;border:1px solid var(--line);padding:8px 14px;}
.harvest .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;}
.give-teaser__r{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:center;gap:1px;background:var(--line);}
.give-row{background:var(--surface);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .3s var(--ease);}
.give-row:hover{background:var(--bg);}
.give-row .m{display:flex;flex-direction:column;}
.give-row .m b{font-family:var(--ff-display);font-size:18px;font-weight:600;}
.give-row .m span{font-size:12.5px;color:var(--ink-50);}
.give-row .amt{font-family:var(--ff-display);font-size:15px;font-weight:600;color:var(--primary);white-space:nowrap;}

/* ============================================================
   DEVOTIONALS teaser
   ============================================================ */
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.dev{background:var(--surface);display:flex;flex-direction:column;overflow:hidden;transition:background .4s var(--ease);}
.dev:hover{background:var(--bg);}
.dev__media{overflow:hidden;aspect-ratio:16/10;background:var(--line);}
.dev__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.dev:hover .dev__media img{transform:scale(1.05);}
.dev__body{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1;}
.dev__meta{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35);display:flex;gap:10px;align-items:center;margin-bottom:14px;}
.dev__meta .cat{color:var(--primary);}
.dev h4{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.01em;margin-bottom:12px;}
.dev p{font-size:14px;color:var(--ink-70);margin:0 0 18px;}
.dev__foot{margin-top:auto;}

/* ============================================================
   CONNECT / FOLLOW block
   ============================================================ */
.connect{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.connect__head{padding:clamp(30px,4vw,56px) var(--gutter) clamp(20px,3vw,30px);}
.connect__head h3{font-size:clamp(30px,4.6vw,58px);font-weight:300;letter-spacing:-.03em;line-height:1;}
.connect__head h3 em{font-style:normal;font-weight:700;}
.connect__head p{color:rgba(255,255,255,.65);max-width:50ch;margin-top:20px;}
.socials{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);}
.social-cell{
  background:var(--ink);padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:18px;min-height:150px;
  transition:background .4s var(--ease);color:#fff;
}
.social-cell:hover{background:var(--accent);}
.social-cell svg{width:26px;height:26px;}
.social-cell .nm{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.social-cell .hd{font-size:12px;color:rgba(255,255,255,.55);}
.social-cell:hover .hd{color:rgba(255,255,255,.85);}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);}
.contact__l{padding:clamp(30px,4vw,56px);border-right:1px solid var(--line);}
.contact__l h3{font-size:clamp(28px,3.6vw,46px);font-weight:300;letter-spacing:-.03em;margin-bottom:22px;}
.contact__l h3 em{font-style:normal;font-weight:700;}
.contact__l p{color:var(--ink-70);max-width:44ch;}
.contact__r{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;gap:1px;background:var(--line);}
.cinfo{background:var(--surface);padding:20px 22px;}
.cinfo .k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);margin-bottom:8px;}
.cinfo .v{font-family:var(--ff-display);font-size:19px;font-weight:600;letter-spacing:-.01em;}
.cinfo .v a{transition:color .25s var(--ease);}
.cinfo .v a:hover{color:var(--accent);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg);border-top:1px solid var(--line);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;}
.footer-top > div{padding:clamp(30px,4vw,56px) var(--gutter);border-right:1px solid var(--line);}
.footer-top > div:last-child{border-right:none;}
.f-brand .brand{margin-bottom:22px;}
.f-brand p{font-size:14px;color:var(--ink-70);max-width:34ch;}
.f-col h5{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);margin-bottom:20px;}
.f-col a,.f-col span{display:block;font-size:14.5px;color:var(--ink-70);padding:7px 0;transition:color .25s var(--ease);}
.f-col a:hover{color:var(--accent);}
.f-social{display:flex;gap:16px;margin-top:8px;}
.f-social a{color:var(--ink-50);transition:color .25s var(--ease),transform .25s var(--ease);}
.f-social a:hover{color:var(--accent);transform:translateY(-2px);}
.f-social svg{width:20px;height:20px;}
.footer-bar{
  border-top:1px solid var(--line);padding:20px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-50);
}
.footer-bar .ein{font-variant-numeric:tabular-nums;}

/* ============================================================
   FLOATING / STICKY GIVE
   ============================================================ */
.give-fab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;border:none;
  padding:15px 22px;font-family:var(--ff-body);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(255,69,0,.32);
  transform:translateY(140%);opacity:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease),background .3s var(--ease);
}
.give-fab.show{transform:translateY(0);opacity:1;}
.give-fab:hover{background:var(--ink);}
.give-fab svg{width:16px;height:16px;}

/* ============================================================
   SCROLL REVEAL — guaranteed-visible fallback.
   Content is visible by default. Only when JS adds .js-reveal
   to <html> AND motion is allowed does the initial hidden state apply.
   ============================================================ */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
html.js-reveal .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.js-reveal .reveal{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   GIVE PAGE
   ============================================================ */
.give-hero{padding:clamp(40px,6vw,84px) var(--gutter);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:end;}
.give-hero h1{font-size:clamp(44px,7vw,92px);font-weight:300;letter-spacing:-.035em;line-height:.95;}
.give-hero h1 em{font-style:normal;font-weight:700;}
.give-hero p{color:var(--ink-70);font-size:clamp(16px,1.5vw,19px);max-width:46ch;}
.give-hero__note{border-left:2px solid var(--accent);padding-left:18px;margin-top:26px;font-size:14px;color:var(--ink-70);}

.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:0;border:1px solid var(--line);}
.checkout__main{padding:clamp(28px,4vw,52px);border-right:1px solid var(--line);}
.checkout__side{padding:clamp(28px,4vw,52px);background:var(--bg);display:flex;flex-direction:column;gap:26px;}
.field-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.field-label .idx{color:var(--accent);}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px;}
.amount-grid label{position:relative;}
.amount-grid input{position:absolute;opacity:0;pointer-events:none;}
.amount-grid .opt{
  display:flex;align-items:center;justify-content:center;background:var(--surface);
  padding:22px 8px;font-family:var(--ff-display);font-size:21px;font-weight:600;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);user-select:none;
}
.amount-grid .opt:hover{background:var(--bg);}
.amount-grid input:checked + .opt{background:var(--ink);color:#fff;}
.amount-custom{display:flex;align-items:center;border:1px solid var(--line);background:var(--surface);margin-bottom:24px;}
.amount-custom .cur{padding:0 18px;font-family:var(--ff-display);font-size:20px;font-weight:600;color:var(--ink-50);border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center;}
.amount-custom input{flex:1;border:none;background:transparent;font-family:var(--ff-display);font-size:20px;font-weight:600;padding:16px 18px;color:var(--ink);width:100%;}
.amount-custom input:focus{outline:none;}
.freq{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:28px;}
.freq label{flex:1;position:relative;}
.freq input{position:absolute;opacity:0;pointer-events:none;}
.freq .opt{display:block;text-align:center;background:var(--surface);padding:14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s;}
.freq input:checked + .opt{background:var(--primary);color:#fff;}
.pay-note{font-size:13px;color:var(--ink-50);margin-top:18px;display:flex;gap:10px;}
.pay-note svg{flex:none;width:16px;height:16px;color:var(--primary);margin-top:2px;}

.alt-pays{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);}
.alt-pay{background:var(--surface);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:background .3s var(--ease);}
.alt-pay:hover{background:var(--bg);}
.alt-pay__ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);}
.alt-pay__ic svg{width:22px;height:22px;}
.alt-pay .m{flex:1;min-width:0;}
.alt-pay .m b{font-family:var(--ff-display);font-size:16px;font-weight:600;display:block;}
.alt-pay .m span{font-size:12.5px;color:var(--ink-50);}
.alt-pay .go{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);white-space:nowrap;}

.side-card{border:1px solid var(--line);background:var(--surface);padding:24px;}
.side-card h4{font-size:18px;font-weight:700;margin-bottom:12px;}
.side-card p{font-size:13.5px;color:var(--ink-70);margin-bottom:16px;}
.tax-line{font-size:13px;color:var(--ink-70);border-top:1px solid var(--line);padding-top:18px;}
.tax-line b{color:var(--ink);font-variant-numeric:tabular-nums;}

/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-hero{padding:clamp(40px,6vw,84px) var(--gutter);border-bottom:1px solid var(--line);}
.blog-hero h1{font-size:clamp(44px,7.5vw,100px);font-weight:300;letter-spacing:-.035em;line-height:.94;}
.blog-hero h1 em{font-style:normal;font-weight:700;}
.blog-hero p{color:var(--ink-70);max-width:52ch;margin-top:24px;font-size:clamp(16px,1.5vw,19px);}
.blog-hero__meta{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap;}
.blog-hero__meta .stat b{font-family:var(--ff-display);font-size:30px;font-weight:600;display:block;line-height:1;}
.blog-hero__meta .stat span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-35);margin-top:6px;display:block;}

.article{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;}
.article__aside{padding:clamp(28px,4vw,56px) var(--gutter);border-right:1px solid var(--line);}
.article__aside .num{font-family:var(--ff-display);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.1em;}
.article__aside .meta{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35);margin:18px 0 10px;}
.article__aside .meta .cat{color:var(--primary);display:block;margin-bottom:6px;}
.article__aside h2{font-size:clamp(28px,3.4vw,44px);font-weight:400;letter-spacing:-.02em;line-height:1.02;margin-top:14px;}
.article__aside .stick{position:sticky;top:100px;}
.article__body{padding:clamp(28px,4vw,56px) var(--gutter);min-width:0;}
.article__media{overflow:hidden;aspect-ratio:16/9;background:var(--line);margin-bottom:clamp(28px,4vw,44px);border:1px solid var(--line);}
.article__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.article__media:hover img{transform:scale(1.03);}
.article__body .prose{max-width:66ch;}
.article__body .prose p{font-size:16.5px;color:var(--ink-70);line-height:1.75;margin-bottom:1.3em;}
.article__body .prose p:first-of-type::first-letter{
  font-family:var(--ff-display);font-weight:700;font-size:3.4em;line-height:.8;
  float:left;margin:6px 14px 0 0;color:var(--ink);
}

.archive{padding:clamp(52px,8vw,110px) var(--gutter);border-bottom:1px solid var(--line);}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.arch{background:var(--surface);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;min-height:220px;transition:background .35s var(--ease);}
.arch:hover{background:var(--bg);}
.arch__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;}
.arch__date{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-35);font-variant-numeric:tabular-nums;}
.arch__cat{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);}
.arch h4{font-size:clamp(19px,1.9vw,24px);font-weight:700;letter-spacing:-.01em;margin-bottom:12px;}
.arch p{font-size:13.5px;color:var(--ink-70);margin:0 0 16px;}
.arch__foot{margin-top:auto;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
.arch.full-ref .arch__foot{color:var(--accent);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .frame::before{background-position:33% 0,66% 0,120% 0;}
  .pillars{grid-template-columns:repeat(2,1fr);}
  .projects{grid-template-columns:1fr;}
  .dev-grid{grid-template-columns:1fr;}
  .arch-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr;}
  .footer-top > div{border-right:none;border-bottom:1px solid var(--line);}
}
@media (max-width:900px){
  .nav__links,.nav__social{display:none;}
  .hamburger{display:flex;}
  .nav__give{display:none;}
  .hero{grid-template-columns:1fr;}
  .hero__text{border-right:none;border-bottom:1px solid var(--line);}
  .hero__media{min-height:min(78vh,560px);}
  .about-grid{grid-template-columns:1fr;}
  .give-teaser,.contact,.laola,.give-hero,.checkout{grid-template-columns:minmax(0,1fr);}
  .give-teaser__l,.contact__l,.checkout__main{border-right:none;border-bottom:1px solid var(--line);}
  .laola__media{min-height:320px;order:-1;}
  .socials{grid-template-columns:repeat(2,1fr);}
  .article{grid-template-columns:1fr;}
  .article__aside{border-right:none;border-bottom:1px solid var(--line);}
  .article__aside .stick{position:static;}

  /* keep single-column grids from being widened by long unbreakable tokens */
  .give-teaser__l,.give-teaser__r,.contact__l,.contact__r,
  .checkout__main,.checkout__side,.cinfo,.cinfo .v,
  .laola__body,.give-hero > *{min-width:0;}
  .cinfo .v,.cinfo .v a,.contact__l h3,
  .give-row .m b,.give-row .m span{overflow-wrap:anywhere;word-break:break-word;}

  /* Missions horizontal gallery — one panel fully visible at a time on mobile */
  .plate,.plate--text{width:min(86vw,420px);flex:0 0 auto;scroll-snap-align:start;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .pillars{grid-template-columns:1fr;}
  .arch-grid{grid-template-columns:1fr;}
  .socials{grid-template-columns:1fr;}
  .amount-grid{grid-template-columns:repeat(2,1fr);}
  .blog-hero__meta{gap:20px;}
  .give-fab{right:14px;bottom:14px;padding:13px 18px;}
  .frame::before{opacity:.35;}
  .footer-bar{flex-direction:column;align-items:flex-start;}
}