/* Geeks Giving v3.1 — Direction A "The Portfolio House" grammar, POLISHED pass,
   in Geeks Giving's own identity. The GOLDEN HEART is the design core: the real
   golden circuit-heart art leads the hero and the favicon — never redrawn,
   never substituted. Palette derives from the heart itself: its gold, its warm
   brown field (#58240B sampled from the art), dusk plum for the close.
   Dynamic layer mirrors giagmedia.com v3: CSS-first motion + one small vanilla-JS
   enhancer (reveals, count-up) that degrades to a fully static page.
   Heart usage is rationed: the hero medallion is the page's one large heart;
   small gold heart glyphs serve as separators (hairline dividers, ticker).
   Hero cards carry the published post's own card art as a thumbnail, left,
   with a "See the post" link. The home-page grid carries the nine most
   recent stories; the complete set lives on the archive page, which is
   built from these same card styles. */

:root{
  --gold:#D4A24C;
  --gold-soft:#EAC078;
  --gold-pale:#F0D9A8;
  --gold-deep:#A8742A;
  --cream:#FFF8EC;
  --paper:#FFFDF6;
  --brown:#4A3220;
  --brown-deep:#241305;
  --field:#58240B;
  --plum:#46304A;
  --plum-deep:#2C1B2E;
  --ink:#3D2C1C;
  --muted:#7A6650;
  --line:#EAD9BC;
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Verdana, Geneva, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.65;
}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif; font-weight:700; color:#33220F}
a{color:var(--gold-deep)}
a:focus-visible, .btn-heart:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px;
}
img{max-width:100%}
::selection{background:var(--gold); color:#2A1A02}

/* ---------- Scroll-progress hairline ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:80;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left;
}

/* ---------- Scroll reveals (JS-gated: no JS = fully visible) ---------- */
.js .rv{opacity:0; transform:translateY(22px)}
.js .rv.in{
  opacity:1; transform:none;
  transition:opacity .8s ease var(--d,0s), transform .8s var(--ease) var(--d,0s);
}

/* ---------- Header — deep warm brown, the heart at the lockup ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 28px;
  padding:14px 5vw;
  background:var(--brown-deep);
  border-bottom:3px solid var(--gold);
  transition:padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head.scrolled{padding-top:8px; padding-bottom:8px; box-shadow:0 14px 34px rgba(20,8,0,.5)}
.brand-lockup{display:flex; align-items:center; gap:13px; text-decoration:none}
.brand-lockup img{
  width:46px; height:46px; border-radius:12px; flex:none;
  box-shadow:0 0 0 2px var(--gold), 0 0 18px rgba(212,162,76,.45);
  transition:transform .35s var(--ease);
}
.brand-lockup:hover img{transform:scale(1.06)}
.brand-name{
  font-family:Georgia, serif; letter-spacing:.22em; font-size:19px;
  color:#FFF3D6; font-weight:700; white-space:nowrap;
}
.site-nav{display:flex; flex-wrap:wrap; gap:6px 30px}
.site-nav a{
  position:relative;
  color:var(--gold-pale); text-decoration:none; text-transform:uppercase;
  letter-spacing:.18em; font-size:12px; font-weight:700; padding:6px 0;
  transition:color .25s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.site-nav a:hover{color:#fff}
.site-nav a:hover::after{transform:scaleX(1)}

/* ---------- Hero — the heart's own field, gold bloom, watermark heart ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(234,192,120,.30) 0%, rgba(234,192,120,0) 62%),
    radial-gradient(1000px 560px at 50% -30%, rgba(255,214,140,.20) 0%, rgba(255,214,140,0) 55%),
    linear-gradient(165deg, #6E3511 0%, var(--field) 46%, #331A06 100%);
  color:#F7E9D2;
  padding:88px 5vw 80px;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.4fr .9fr; gap:56px; align-items:center;
  max-width:1200px; margin:0 auto;
}
.eyebrow{
  display:flex; align-items:center; gap:16px;
  text-transform:uppercase; letter-spacing:.32em; font-size:12px; color:var(--gold-pale);
  margin:0 0 24px; font-weight:700;
}
.eyebrow::before{content:""; width:38px; height:2px; background:var(--gold); flex:none}
.hero h1{
  color:#FFF6E3; font-size:clamp(40px, 5.8vw, 66px); line-height:1.08; margin:0 0 24px; max-width:12em;
}
.js .h1-line{display:block; animation:rise-in 1s var(--ease) both}
.js .h1-line:nth-child(2){animation-delay:.16s}
@keyframes rise-in{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.lede{font-size:clamp(16px, 2vw, 19px); max-width:42em; color:#EFDCBB; margin:0 0 36px}
.cta-row{display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; margin:0}
.cta-row.center{justify-content:center}
.btn-heart{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-block; background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:#33220F; font-weight:700; text-decoration:none; padding:15px 30px; border-radius:999px;
  letter-spacing:.02em; box-shadow:0 4px 18px rgba(20,8,0,.4), 0 0 26px rgba(212,162,76,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s ease;
}
.btn-heart::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 68%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.btn-heart:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,8,0,.45), 0 0 34px rgba(212,162,76,.35)}
.btn-heart:hover::after{transform:translateX(130%)}
.link-light{color:var(--gold-pale); text-decoration:underline; text-underline-offset:4px; transition:color .25s ease}
.link-light:hover{color:#fff}

/* Hero medallion — the golden heart itself, framed on its own field */
.heart-medallion{margin:0; display:grid; place-items:center; position:relative}
.heart-medallion::before{
  content:""; position:absolute; width:88%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(234,192,120,.40) 0%, rgba(234,192,120,0) 68%);
  filter:blur(8px);
}
.heart-medallion img{
  position:relative; width:min(340px, 72vw); height:auto; border-radius:28px;
  box-shadow:0 34px 64px rgba(10,4,0,.55), 0 0 0 1px rgba(234,192,120,.55), 0 0 110px rgba(212,162,76,.30);
  animation:float 7s ease-in-out infinite alternate;
}
@keyframes float{from{transform:translateY(-8px)} to{transform:translateY(10px)}}

/* ---------- Ticker — the seven categories on gold ---------- */
.ticker{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  overflow:hidden; padding:11px 0;
  border-top:1px solid var(--gold-deep); border-bottom:1px solid var(--gold-deep);
}
.ticker-track{
  display:flex; width:max-content; white-space:nowrap;
  font-family:Georgia, serif; font-weight:700; letter-spacing:.14em; font-size:13px; color:#33220F;
  text-transform:uppercase;
  animation:ticker-move 52s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick-heart{display:inline-flex; vertical-align:-2px; margin:0 2px}
.tick-heart svg{width:11px; height:10px; fill:#7A4E14}
@keyframes ticker-move{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Stats band ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  padding:52px 5vw 12px; max-width:1200px; margin:0 auto;
}
.stat{text-align:left; border-bottom:1px solid var(--line); padding-bottom:18px}
.stat-num{display:block; font-family:Georgia, serif; font-size:58px; line-height:1; color:var(--gold-deep)}
.stat-label{display:block; margin-top:8px; color:var(--muted); font-size:13px}

/* ---------- Sections ---------- */
.section{padding:64px 5vw; max-width:1200px; margin:0 auto}
.section-alt{
  background:var(--paper); max-width:none; padding-left:0; padding-right:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section-alt > *{max-width:1200px; margin-left:auto; margin-right:auto; padding-left:5vw; padding-right:5vw}
.kicker{
  display:flex; align-items:center; gap:16px;
  text-transform:uppercase; letter-spacing:.3em; font-size:11px; font-weight:700;
  color:var(--gold-deep); margin:0 0 14px;
}
.kicker::after{content:""; height:1px; width:min(180px, 30vw); background:linear-gradient(90deg, var(--gold), rgba(212,162,76,0))}
.kicker-dark{color:var(--gold-pale); justify-content:center}
.kicker-dark::before{content:""; height:1px; width:min(120px, 22vw); background:linear-gradient(-90deg, var(--gold), rgba(212,162,76,0))}
.section-title{font-size:clamp(30px, 4vw, 44px); margin:0 0 10px; line-height:1.15}
.section-title::after{content:""; display:block; width:64px; height:3px; background:var(--gold); margin-top:14px; border-radius:2px}
.section-sub{color:var(--muted); max-width:46em; margin:0 0 34px}
.mission-text{max-width:52em}
.mission-text p{margin:0 0 16px; font-size:17px}

/* ---------- Hero + category cards ---------- */
.hero-grid-cards, .cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.hero-card, .cat-card{
  background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:20px;
  border-top:3px solid var(--gold);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.cat-card{background:var(--paper)}
.hero-card:hover, .cat-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 18px 34px rgba(88,36,11,.16);
}
.hero-card h3, .cat-card h3{margin:0 0 6px; font-size:17.5px; line-height:1.3}
.hero-card p, .cat-card p{margin:0; color:var(--muted); font-size:14px}
.hero-card .card-date{
  margin:12px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700;
}
.community-note{color:var(--muted); font-style:italic; margin-top:24px}

/* ---------- Accent separation — hairline rule + one small heart ----------
   The ONLY heart motif outside the hero medallion: a separator, never a logo. */
.divider{
  display:flex; align-items:center; gap:14px;
  max-width:1200px; margin:6px auto; padding:0 5vw;
}
.divider::before, .divider::after{content:""; flex:1; height:1px}
.divider::before{background:linear-gradient(90deg, rgba(212,162,76,0), var(--gold))}
.divider::after{background:linear-gradient(90deg, var(--gold), rgba(212,162,76,0))}
.divider svg{
  width:19px; height:17px; flex:none; fill:var(--gold-deep);
  filter:drop-shadow(0 0 5px rgba(212,162,76,.55));
}
.divider-plum{margin:0 auto 30px; padding:0}
.divider-plum::before{background:linear-gradient(90deg, rgba(212,162,76,0), var(--gold-soft))}
.divider-plum::after{background:linear-gradient(90deg, var(--gold-soft), rgba(212,162,76,0))}
.divider-plum svg{fill:var(--gold-soft)}

/* ---------- Hero cards — published post art, left; story, right ---------- */
.hero-card{display:flex; gap:16px; align-items:flex-start}
.card-thumb{
  flex:none; width:116px; display:block; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); line-height:0;
  box-shadow:0 6px 16px rgba(88,36,11,.14);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.card-thumb img{display:block; width:100%; height:auto}
.hero-card:hover .card-thumb{transform:translateY(-2px); border-color:var(--gold); box-shadow:0 12px 24px rgba(88,36,11,.20)}
.card-body{flex:1; min-width:0}
.card-link{margin:12px 0 0; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.card-link a{color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--gold-soft); padding-bottom:1px; transition:color .25s ease, border-color .25s ease}
.card-link a:hover{color:var(--brown); border-color:var(--gold-deep)}

/* ---------- Nominate close — dusk plum, opened by the plum divider ---------- */
.nominate-close{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(820px 420px at 50% -12%, rgba(212,162,76,.20) 0%, rgba(212,162,76,0) 62%),
    linear-gradient(165deg, var(--plum) 0%, var(--plum-deep) 58%, #1D0F24 100%);
  color:#F1E4CE; text-align:center; padding:76px 5vw;
}
.nc-inner{position:relative; z-index:1; max-width:1000px; margin:0 auto}
.nominate-close h2{color:#FFF6E3; font-size:clamp(30px, 4.4vw, 44px); margin:0 0 12px}
.nc-lede{margin:0 auto 40px; color:#DCC9A4; max-width:44em}
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin:0 0 42px; text-align:left}
.step{border-top:3px solid var(--gold); padding-top:14px}
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#33220F;
  font-family:Georgia, serif; font-size:19px; font-weight:700;
  box-shadow:0 0 18px rgba(212,162,76,.35);
}
.step h3{margin:12px 0 6px; font-size:19px; color:#FFF3D6}
.step p{color:#CDBD9C; font-size:14.5px; margin:0}
.follow-line{color:#CDBD9C; max-width:56em; margin:26px auto 0; font-size:14.5px}
.follow-line a{color:var(--gold-pale)}
.tag-line{
  margin:18px 0 0; font-family:Georgia, serif; letter-spacing:.18em; font-size:13px;
  color:var(--gold-soft); text-transform:uppercase;
}

/* ---------- Footer — deep brown, gold rule ---------- */
.site-foot{background:var(--brown-deep); color:#D8C6A6; padding:44px 5vw 32px; border-top:3px solid var(--gold)}
.foot-main{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.foot-brand{
  display:flex; align-items:center; gap:12px; margin:0;
  font-family:Georgia, serif; letter-spacing:.2em; color:#FFF3D6; font-size:18px; font-weight:700;
}
.foot-brand img{width:38px; height:38px; border-radius:9px; box-shadow:0 0 0 1px var(--gold)}
.foot-line{margin:0; font-size:14px}
.foot-line a, .foot-brands a{color:var(--gold-pale); text-decoration:none}
.foot-brands{border-top:1px solid #4A3220; margin:26px 0 0; padding-top:16px; font-size:13px; text-align:center}
.foot-legal{font-size:12px; color:#9A8563; margin:10px 0 0; text-align:center}

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .heart-medallion{order:2}
  .heart-medallion img{width:min(260px, 62vw)}
}
@media (max-width: 900px){
  .hero-grid-cards, .cat-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .hero-grid-cards, .cat-grid{grid-template-columns:1fr}
  .site-nav{gap:4px 16px}
  .brand-name{font-size:15px; letter-spacing:.14em}
  .brand-lockup img{width:38px; height:38px}
  .hero{padding:60px 6vw 56px}
  .stat-num{font-size:46px}
  .hero-card{flex-direction:column}
  .card-thumb{width:100%}
  .card-thumb img{width:100%; height:200px; object-fit:cover; object-position:top center}
}

/* ---------- Reduced motion: everything settles, nothing hides ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important; transition:none !important}
  .js .rv{opacity:1; transform:none}
  .js .h1-line{animation:none}
  .ticker-track{flex-wrap:wrap; white-space:normal; width:auto; padding:0 5vw}
  .heart-medallion img{animation:none}
}

/* ---------- See more — the doorway to the full story archive ---------- */
.see-more-row{margin:30px 0 0; text-align:center}
.see-more-link{
  display:inline-block; padding:12px 30px; border-radius:999px;
  border:1px solid var(--gold); color:var(--gold-deep); background:transparent;
  font-family:Georgia, serif; font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  transition:background .3s ease, color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.see-more-link:hover{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#33220F;
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(88,36,11,.18);
}