/* ============================================
   INKWELL PUBLISHERS — SHARED STYLES v2
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

:root {
  --slate: #44546A; --teal: #36D3D2; --teal-dark: #1aabaa; --royal: #007CDC;
  --gray-bg: #f5f5f0; --hero-gray: #E8E9EB; --dark-navy: #1a2535;
  --white: #ffffff; --text-body: #555; --text-muted: #777; --text-faint: #aaa;
  --border: rgba(68,84,106,0.13); --font-serif: 'DM Serif Display', serif; --font-sans: 'Inter', sans-serif;
}

body { font-family: var(--font-sans); background: var(--gray-bg); color: var(--slate); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* NAV */
.nav { background: var(--slate); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 56px; position: sticky; top: 0; z-index: 100; }
.nav-logo { display: flex; align-items: center; height: 32px; text-decoration: none; }
.nav-logo img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }
.nav-links a { color: rgba(255,255,255,0.7); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-btn-outline { background: transparent !important; color: rgba(255,255,255,0.85) !important; border: 0.5px solid rgba(255,255,255,0.35) !important; padding: 6px 14px; border-radius: 3px; font-weight: 600 !important; }
.nav-btn-outline:hover { border-color: var(--teal) !important; color: var(--teal) !important; }
.nav-btn-filled { background: var(--teal) !important; color: var(--slate) !important; padding: 6px 14px; border-radius: 3px; font-weight: 700 !important; }

/* BUTTONS */
.btn { display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 22px; border-radius: 3px; border: none; cursor: pointer; transition: opacity 0.15s; text-decoration: none; }
.btn:hover { opacity: 0.88; }
.btn-teal { background: var(--teal); color: var(--slate); }
.btn-slate { background: var(--slate); color: var(--white); }
.btn-royal { background: var(--royal); color: var(--white); }
.btn-ghost { background: transparent; color: var(--slate); border: 0.5px solid rgba(68,84,106,0.3); font-weight: 600; }
.btn-ghost-white { background: transparent; color: rgba(255,255,255,0.8); border: 0.5px solid rgba(255,255,255,0.3); font-weight: 500; }
.btn-outline-teal { background: transparent; color: var(--teal); border: 0.5px solid rgba(54,211,210,0.45); }
.btn-outline-royal { background: transparent; color: var(--royal); border: 0.5px solid rgba(0,124,220,0.45); }
.btn-sm { padding: 9px 16px; font-size: 10px; }
.btn-muted { background: rgba(68,84,106,0.06); color: #aaa; border: 0.5px solid rgba(68,84,106,0.12); padding: 10px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 3px; display: inline-block; cursor: default; }

/* HERO */
.hero { background: var(--hero-gray); padding: 64px 40px 60px; position: relative; overflow: hidden; }
.hero-dark { background: var(--slate); }
.hero-content { position: relative; z-index: 2; max-width: 520px; }
.hero h1 { font-family: var(--font-serif); font-size: 46px; line-height: 1.08; color: var(--slate); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--teal-dark); }
.hero-dark h1 { color: var(--white); }
.hero-dark h1 em { color: var(--teal); }
.hero-sub { font-size: 14px; line-height: 1.75; color: rgba(68,84,106,0.7); max-width: 460px; margin-bottom: 34px; }
.hero-dark .hero-sub { color: rgba(255,255,255,0.6); }
.eyebrow { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--teal-dark); }
.hero-dark .eyebrow { color: var(--teal); }
.hero-bg-text { position: absolute; right: -10px; bottom: -20px; font-family: var(--font-serif); font-size: 180px; color: rgba(68,84,106,0.06); line-height: 1; pointer-events: none; user-select: none; z-index: 1; }
.hero-dark .hero-bg-text { color: rgba(255,255,255,0.03); }

/* MISSION STRIP */
.mission-strip { background: var(--teal); padding: 18px 40px; display: flex; align-items: center; gap: 14px; }
.mission-badge { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; background: rgba(68,84,106,0.2); color: var(--slate); padding: 4px 10px; border-radius: 2px; white-space: nowrap; }
.mission-strip p { font-size: 12px; color: var(--slate); line-height: 1.55; }
.mission-strip strong { color: var(--dark-navy); font-weight: 600; }

/* SECTIONS */
.section { padding: 56px 40px; }
.section-white { background: var(--white); }
.section-gray { background: var(--gray-bg); }
.section-slate { background: var(--slate); }
.section-royal { background: var(--royal); }
.section h2 { font-family: var(--font-serif); font-size: 30px; color: var(--slate); line-height: 1.2; margin-top: 8px; margin-bottom: 10px; }
.section h2 em { font-style: italic; color: var(--teal-dark); }
.section h2.light { color: var(--white); }
.section h2.light em { color: var(--teal); }
.section-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--slate); opacity: 0.55; margin-bottom: 12px; display: block; }
.section-sub { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 500px; margin-bottom: 36px; }
.section-sub.light { color: rgba(255,255,255,0.6); }

/* GRIDS */
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.card-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }

/* PATH CARDS */
.path-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; padding: 26px 22px; display: flex; flex-direction: column; align-self: stretch; }
.path-card-icon { width: 46px; height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 22px; flex-shrink: 0; }
.icon-teal  { background: var(--teal);      color: var(--white); }
.icon-slate { background: var(--slate);     color: var(--white); }
.icon-navy  { background: var(--dark-navy); color: var(--white); }
.icon-royal { background: var(--royal); color: var(--white); }
.path-card h3 { font-family: var(--font-serif); font-size: 19px; color: var(--slate); margin-bottom: 10px; line-height: 1.2; flex-shrink: 0; }
.path-card p { font-size: 12px; line-height: 1.7; color: var(--text-muted); flex: 1; margin-bottom: 22px; }
.path-card-link { font-size: 11px; font-weight: 700; color: var(--teal-dark); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; margin-top: auto; }

/* AUTHOR CARDS (dark bg) */
.author-card { background: rgba(255,255,255,0.07); border: 0.5px solid rgba(255,255,255,0.11); border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color 0.2s; align-self: start; text-decoration: none; display: block; }
.author-card:hover { border-color: rgba(54,211,210,0.5); }
.author-card-photo { width: 100%; aspect-ratio: 4/5; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,0.18); position: relative; overflow: hidden; }
.author-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.author-card-info { padding: 9px 11px 11px; }
.author-card-info h4 { font-family: var(--font-serif); font-size: 13px; color: var(--white); margin-bottom: 2px; line-height: 1.25; }
.author-first { color: var(--teal); }
.author-card-info span { font-size: 9px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.07em; }

/* ROSTER CARDS (light bg) */
.roster-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; transition: border-color 0.2s, transform 0.15s; text-decoration: none; display: block; align-self: start; }
.roster-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.roster-card-photo { width: 100%; aspect-ratio: 3/4; background: rgba(68,84,106,0.07); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.roster-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.roster-card-photo i { font-size: 32px; color: rgba(68,84,106,0.18); position: relative; z-index: 1; }
.roster-card-body { padding: 12px 14px 14px; }
.roster-card-name { font-family: var(--font-serif); font-size: 15px; color: var(--slate); line-height: 1.2; margin-bottom: 6px; }
.roster-first { color: var(--teal-dark); }
.roster-card-role { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.07em; }

/* CONTRIBUTOR CARDS (no link) */
.contributor-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; display: block; align-self: start; }
.contributor-card-photo { width: 100%; aspect-ratio: 3/4; background: rgba(68,84,106,0.05); display: flex; align-items: center; justify-content: center; }
.contributor-card-photo i { font-size: 32px; color: rgba(68,84,106,0.12); }
.contributor-card-body { padding: 12px 14px 14px; }
.contributor-card-name { font-family: var(--font-serif); font-size: 15px; color: var(--slate); line-height: 1.2; margin-bottom: 6px; }
.contributor-card-role { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.07em; }

/* ROLE PILLS */
.role-pill { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; margin-top: 6px; }
.role-author      { background: rgba(54,211,210,0.1);  color: var(--teal-dark); }
.role-artist      { background: rgba(68,84,106,0.1);   color: var(--slate); }
.role-team        { background: rgba(68,84,106,0.07);  color: #888; }
.role-publisher   { background: rgba(26,37,53,0.08);   color: var(--dark-navy); }
.role-contributor { background: rgba(68,84,106,0.05);  color: #aaa; }

/* COLLAGE STRIP — hidden until image loads */
.collage-strip { width: 100%; height: 210px; overflow: hidden; position: relative; display: none; }
.collage-strip.loaded { display: block; }
.collage-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; opacity: 0.78; }
.collage-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(68,84,106,0.2) 0%, rgba(68,84,106,0.88) 100%); }

/* STAT BLOCKS */
.stat-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 32px; }
.stat-block { background: var(--gray-bg); border-radius: 4px; padding: 22px 20px; }
.stat-block.white { background: var(--white); border: 0.5px solid var(--border); }
.stat-num { font-family: var(--font-serif); font-size: 36px; color: var(--slate); line-height: 1; margin-bottom: 8px; }
.stat-num.teal { color: var(--teal-dark); }
.stat-num span { color: var(--teal-dark); }
.stat-label { font-size: 12px; color: var(--text-body); line-height: 1.55; }
.stat-source { font-size: 10px; color: var(--text-faint); margin-top: 6px; font-style: italic; }

/* INVOLVE CARDS */
.involve-card { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 22px 20px; display: flex; flex-direction: column; align-self: stretch; }
.involve-card i { font-size: 20px; color: var(--teal); margin-bottom: 12px; flex-shrink: 0; }
.involve-card h4 { font-family: var(--font-serif); font-size: 16px; color: var(--white); margin-bottom: 8px; flex-shrink: 0; }
.involve-card p { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.65; flex: 1; margin-bottom: 16px; }

/* GET INVOLVED STRIP */
.involve-strip { background: var(--slate); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.involve-strip h3 { font-family: var(--font-serif); font-size: 22px; color: var(--white); margin-bottom: 6px; }
.involve-strip p { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.6; max-width: 380px; }
.involve-strip-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* PROGRAM CARDS */
.program-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; align-self: stretch; text-decoration: none; transition: border-color 0.2s; }
.program-card:hover { border-color: var(--teal); }
.program-card-image { width: 100%; height: 160px; background: rgba(68,84,106,0.07); display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(68,84,106,0.18); position: relative; overflow: hidden; flex-shrink: 0; }
.program-card-image.dark-bg { background: #2a1a35; }
.program-card-image.teal-bg { background: rgba(54,211,210,0.1); }
.program-card-image.navy-bg { background: #1a2535; }
.program-card-image-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(68,84,106,0.6) 100%); }
.program-card-image-tag { position: absolute; bottom: 12px; left: 14px; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; }
.tag-active { color: var(--teal); }
.tag-dev    { color: rgba(255,255,255,0.6); }
.tag-coming { color: rgba(255,255,255,0.35); }
.program-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.program-card-title { font-family: var(--font-serif); font-size: 22px; color: var(--slate); margin-bottom: 6px; flex-shrink: 0; }
.program-card-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 12px; flex-shrink: 0; }
.program-card-subtitle.muted { color: #aaa; }
.program-card-desc { font-size: 13px; color: #777; line-height: 1.7; flex: 1; margin-bottom: 18px; }
.program-card-link { font-size: 11px; font-weight: 700; color: var(--teal-dark); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; margin-top: auto; }

/* DONATION CARDS */
.donation-list { display: flex; flex-direction: column; gap: 14px; }
.donation-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; display: grid; grid-template-columns: 6px 1fr; transition: border-color 0.2s; }
.donation-card:hover { border-color: var(--teal); }
.donation-bar-active   { background: var(--teal); }
.donation-bar-building { background: rgba(68,84,106,0.25); }
.donation-bar-general  { background: var(--slate); }
.donation-inner { padding: 22px 22px 22px 18px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.donation-status { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.status-active   { color: var(--teal-dark); }
.status-building { color: #aaa; }
.status-general  { color: var(--slate); opacity: 0.6; }
.donation-title { font-family: var(--font-serif); font-size: 20px; color: var(--slate); margin-bottom: 4px; line-height: 1.2; display: block; }
.donation-subtitle { font-size: 11px; color: #aaa; margin-bottom: 10px; display: block; }
.donation-desc { font-size: 12px; color: #777; line-height: 1.65; }
.donation-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.donation-amount { font-family: var(--font-serif); font-size: 22px; color: var(--slate); text-align: right; line-height: 1; }
.donation-amount span { font-size: 12px; color: #aaa; font-family: var(--font-sans); display: block; margin-top: 2px; font-weight: 400; }

/* 501c3 CALLOUT */
.np-callout { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: 4px; margin-top: 28px; max-width: 520px; }
.np-callout.on-dark { background: rgba(54,211,210,0.12); border: 0.5px solid rgba(54,211,210,0.25); }
.np-callout.on-light { background: rgba(68,84,106,0.06); border: 0.5px solid rgba(68,84,106,0.15); }
.np-callout i { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.np-callout.on-dark i { color: var(--teal); }
.np-callout.on-light i { color: var(--slate); }
.np-callout-text strong { font-size: 13px; font-weight: 700; display: block; margin-bottom: 4px; }
.np-callout.on-dark .np-callout-text strong { color: var(--white); }
.np-callout.on-light .np-callout-text strong { color: var(--slate); }
.np-callout-text p { font-size: 12px; line-height: 1.6; }
.np-callout.on-dark .np-callout-text p { color: rgba(255,255,255,0.75); }
.np-callout.on-light .np-callout-text p { color: var(--text-muted); }

/* PROGRESS BAR */
.progress-wrap { margin-bottom: 18px; }
.progress-labels { display: flex; justify-content: space-between; margin-bottom: 5px; }
.progress-labels span { font-size: 11px; color: var(--text-muted); }
.progress-labels strong { font-size: 11px; color: var(--slate); font-weight: 600; }
.progress-track { height: 6px; background: var(--gray-bg); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--teal); border-radius: 3px; width: 0%; transition: width 1s ease; }

/* LANE CARDS */
.lane-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; align-self: stretch; }
.lane-top { height: 3px; flex-shrink: 0; }
.lane-top-teal  { background: var(--teal); }
.lane-top-slate { background: var(--slate); }
.lane-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }
.lane-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.lane-tag-teal  { color: var(--teal-dark); }
.lane-tag-slate { color: rgba(68,84,106,0.5); }
.lane-card h3 { font-family: var(--font-serif); font-size: 22px; color: var(--slate); margin-bottom: 10px; line-height: 1.2; flex-shrink: 0; }
.lane-body > p { font-size: 13px; color: #777; line-height: 1.7; margin-bottom: 18px; flex-shrink: 0; }
.lane-fits-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #bbb; margin-bottom: 8px; }
.lane-fits { list-style: none; display: flex; flex-direction: column; gap: 6px; flex: 1; margin-bottom: 22px; }
.lane-fits li { font-size: 12px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
.lane-fits li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dots-teal li::before  { background: var(--teal); opacity: 0.7; }
.dots-slate li::before { background: var(--slate); opacity: 0.25; }

/* STAGE CARDS (vertical 3-col journey) */
.stage-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; align-self: stretch; }
.stage-top { height: 3px; flex-shrink: 0; }
.stage-top-early  { background: rgba(68,84,106,0.2); }
.stage-top-mid    { background: var(--teal); }
.stage-top-ready  { background: var(--slate); }
.stage-body { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }
.stage-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.tag-early { color: #bbb; }
.tag-mid   { color: var(--teal-dark); }
.tag-ready { color: rgba(68,84,106,0.6); }
.stage-card h3 { font-family: var(--font-serif); font-size: 18px; color: var(--slate); margin-bottom: 10px; line-height: 1.3; flex-shrink: 0; }
.stage-card p { font-size: 12px; color: var(--text-muted); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.stage-note { font-size: 11px; color: #bbb; font-style: italic; margin-top: 8px; display: block; }

/* VALUE CARDS */
.value-card { background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 22px 20px; }
.value-card i { font-size: 20px; color: var(--teal); margin-bottom: 12px; display: block; }
.value-card h4 { font-family: var(--font-serif); font-size: 16px; color: var(--white); margin-bottom: 8px; }
.value-card p { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.65; }

/* STEPS */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 0.5px solid rgba(68,84,106,0.1); }
.step:last-child { border-bottom: none; }
.step-num { font-family: var(--font-serif); font-size: 32px; color: rgba(68,84,106,0.14); line-height: 1; flex-shrink: 0; width: 36px; }
.step-body h4 { font-size: 14px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
.step-body p { font-size: 12px; color: var(--text-muted); line-height: 1.7; }

/* OTHER WAYS CARDS */
.other-card { background: var(--gray-bg); border-radius: 4px; padding: 22px 20px; display: flex; gap: 16px; align-items: flex-start; }
.other-card i { font-size: 20px; color: var(--slate); flex-shrink: 0; margin-top: 2px; }
.other-body h4 { font-size: 14px; font-weight: 600; color: var(--slate); margin-bottom: 6px; }
.other-body p { font-size: 12px; color: #888; line-height: 1.65; margin-bottom: 12px; }
.other-link { font-size: 11px; font-weight: 700; color: var(--teal-dark); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }

/* BREADCRUMB */
.breadcrumb { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 18px; display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--teal); }

/* FOOTER */
.footer { background: var(--dark-navy); padding: 40px 40px 24px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.footer-brand p { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 10px; line-height: 1.65; max-width: 200px; }
.footer-logo img { height: 18px; width: auto; }
.footer-col h5 { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 12px; font-weight: 500; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 12px; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 10px; color: rgba(255,255,255,0.22); }
.footer-np-badge { font-size: 9px; padding: 3px 9px; border: 0.5px solid rgba(54,211,210,0.3); border-radius: 2px; color: var(--teal); letter-spacing: 0.1em; text-transform: uppercase; }

/* TODO PLACEHOLDER */
.todo { background: rgba(255,200,0,0.12); border: 1px dashed rgba(255,180,0,0.4); border-radius: 3px; padding: 8px 12px; font-size: 11px; color: #886600; font-family: monospace; margin-bottom: 12px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .card-grid-5 { grid-template-columns: repeat(3,1fr); }
  .stat-grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero { padding: 48px 20px 44px; }
  .hero h1 { font-size: 34px; }
  .section { padding: 40px 20px; }
  .card-grid-2, .card-grid-3, .card-grid-4, .card-grid-5 { grid-template-columns: 1fr; }
  .stat-grid-4 { grid-template-columns: 1fr; }
  .involve-strip { flex-direction: column; align-items: flex-start; }
  .footer-top { flex-direction: column; gap: 28px; }
  .mission-strip { padding: 16px 20px; }
  .footer { padding: 36px 20px 20px; }
  .donation-inner { grid-template-columns: 1fr; }
  .donation-right { align-items: flex-start; }
}
@media (max-width: 480px) { .hero h1 { font-size: 28px; } }