:root {
--paper:#f7f1e7;--ink:#17231d;--forest:#214838;--fresh:#72a96b;--gold:#e8b84a;--coral:#e66b52;--sage:#c6d4c2;--line:rgba(23,35,29,.16);--white:#fff;--max:1440px}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth}
body {
margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;line-height:1.6}
.wrap {
width:min(calc(100% - 64px),var(--max));margin:auto}
.eyebrow {
font:500 12px/1.2 'DM Mono',monospace;letter-spacing:.15em;text-transform:uppercase}
.btn {
display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 24px;border-radius:999px;text-decoration:none;font-weight:700;transition:.25s ease}
.btn-primary {
background:var(--gold);color:#17231d;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.btn-primary:hover {
transform:translateY(-2px);background:#f0c65d}
.btn-outline {
border:1px solid var(--line);color:var(--ink)}

/* Vector icons */
.icon {
width:1em;
height:1em;
flex:0 0 auto;
display:block;
}
.icon-external {
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .25s ease;
}
.btn:hover .icon-external {
transform:translate(2px,-2px);
}
header {
position:absolute;z-index:3;left:0;right:0;top:0;padding:28px 0}
.nav {
display:flex;align-items:center;justify-content:space-between}
.mark {
font-family:Newsreader,serif;font-size:24px}
.hero {
min-height:100svh;display:grid;align-items:end;position:relative;overflow:hidden;background:#14251d;color:white}
.hero-img {
position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,27,20,.92) 0%,rgba(12,27,20,.68) 45%,rgba(12,27,20,.14) 78%),url('assets/luis-with-sister-kariliz.jpg') center/cover no-repeat;transform:scale(1.02)}
.hero-content {
position:relative;z-index:2;padding:180px 0 72px;max-width:840px}
.hero h1 {
font:500 clamp(64px,8.4vw,132px)/.88 Newsreader,serif;letter-spacing:-.055em;margin:22px 0 28px}
.hero p {
font-size:clamp(17px,1.5vw,22px);max-width:650px;color:rgba(255,255,255,.86);margin:0 0 34px}
.hero .eyebrow {
color:#f1d88a}
.hero-meta {
position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}
.meta {
padding:25px 0}
.meta strong {
font:500 28px Newsreader,serif;display:block}
.meta span {
font-size:12px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.1em}
.section {
padding:120px 0}
.intro-centered {
width:70%;margin:0 auto}
.intro-centered .eyebrow {
margin-bottom:24px}
.intro-centered .story h2 {
max-width:1000px}
.intro-grid {
display:grid;grid-template-columns:.75fr 1.25fr;gap:10vw;align-items:start}
.intro h2,.support h2,.final h2 {
font:500 clamp(48px,6vw,88px)/.98 Newsreader,serif;letter-spacing:-.045em;margin:0}
.story p {
font-size:19px;margin:0 0 22px;color:#39453f}
.pull {
font:500 clamp(30px,3.5vw,52px)/1.1 Newsreader,serif;color:var(--forest);margin:45px 0}
.timeline {
border-top:1px solid var(--line);margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr)}
.step {
padding:28px 28px 0 0;border-right:1px solid var(--line);min-height:210px}
.step:not(:first-child) {
padding-left:28px}
.step:last-child {
border-right:0}
.step .year {
font:500 12px 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#66736c}
.step h3 {
font:500 27px/1.1 Newsreader,serif;margin:18px 0 12px}
.step p {
font-size:14px;color:#59645e}
.dark {
background:var(--forest);color:white}
.goal-grid {
display:grid;grid-template-columns:.72fr .9fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.goal-num {
font:500 clamp(82px,10vw,158px)/.86 Newsreader,serif;letter-spacing:-.06em;margin:28px 0 0;padding-top:.03em}
.goal-copy p {
font-size:18px;color:rgba(255,255,255,.72);max-width:520px}
.live-progress {
margin-top:0;padding-top:0;border-top:0}
.live-progress .eyebrow {
margin-bottom:16px}
.gfm-shell {
max-width:520px;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.gfm-shell .gfm-embed {
width:100%}
.gfm-note {
margin-top:13px!important;font-size:12px!important;color:rgba(255,255,255,.56)!important}
.dark .btn-primary {
background:var(--gold);color:#17231d}
.dark .eyebrow {
color:#f1d88a}
.uses {
display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18);margin-top:80px}
.use {
padding:30px 35px 0 0}
.use+.use {
border-left:1px solid rgba(255,255,255,.18);padding-left:35px}
.use h3 {
font:500 28px Newsreader,serif;margin:0 0 8px}
.use p {
font-size:14px;color:rgba(255,255,255,.65)}
.support {
text-align:center}
.support .eyebrow {
margin-bottom:24px}
.support h2 {
max-width:1000px;margin:auto}
.support>div>p {
max-width:690px;margin:28px auto;color:#59645e;font-size:18px}
.share {
padding:75px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-row {
display:flex;align-items:center;justify-content:space-between;gap:30px}
.share h3 {
font:500 38px Newsreader,serif;margin:0}
.share-actions {
display:flex;gap:10px;flex-wrap:wrap}
.final {
padding:130px 0;text-align:center}
.final h2 {
max-width:980px;margin:0 auto 35px}
.footer {
padding:30px 0;border-top:1px solid var(--line);font-size:12px;color:#69736e}
.footer-row {
display:flex;justify-content:space-between;gap:20px}
.reveal {
opacity:0;transform:translateY(18px);transition:.7s ease}
.reveal.in {
opacity:1;transform:none}
@media(max-width:800px) {
.wrap {
width:min(calc(100% - 36px),var(--max))}
.intro-centered {
width:100%}
.hero {
min-height:850px}
.hero-img {
background:linear-gradient(0deg,rgba(12,27,20,.96) 0%,rgba(12,27,20,.45) 68%,rgba(12,27,20,.1)),url('assets/luis-with-sister-kariliz.jpg') 58% center/cover}
.hero-content {
padding-top:330px}
.hero h1 {
font-size:68px}
.hero-meta {
grid-template-columns:1fr 1fr}
.hero-meta .meta:last-child {
display:none}
.section {
padding:80px 0}
.intro-grid,.goal-grid {
grid-template-columns:1fr;gap:45px}
.goal-num {
margin-bottom:8px}
.live-progress {
padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.timeline {
grid-template-columns:1fr}
.step,.step:not(:first-child) {
padding:24px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}
.uses {
grid-template-columns:1fr}
.use,.use+.use {
border-left:0;border-bottom:1px solid rgba(255,255,255,.18);padding:24px 0}
.share-row,.footer-row {
align-items:flex-start;flex-direction:column}
.final {
padding:90px 0}
.nav .btn {
padding:12px 17px;font-size:13px}
}

.hero .btn-primary {
background:var(--gold);color:#17231d}
.step .year {
color:#7b6429}
.step h3:before {
content:'';display:block;width:28px;height:4px;border-radius:4px;background:var(--gold);margin-bottom:16px}
.share {
background:rgba(232,184,74,.10)}
.final {
background:linear-gradient(180deg,var(--paper),#f4e5bf)}
.photo-card {
position:relative}
.photo-card:after {
content:'KEEP FIGHTING';position:absolute;left:22px;bottom:22px;padding:9px 12px;border-radius:999px;background:var(--gold);color:#17231d;font:600 10px/1 'DM Mono',monospace;letter-spacing:.12em}
.media-caption {
font-weight:600}
.hope-band {
background:var(--gold);color:#17231d;padding:22px 0}
.hope-band .wrap {
display:flex;justify-content:space-between;gap:30px;align-items:center}
.hope-band strong {
font:500 25px Newsreader,serif}
.hope-band span {
font:600 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:800px) {
.hope-band .wrap {
align-items:flex-start;flex-direction:column;gap:4px}
}
.media-story {
padding:0 0 120px}
.media-grid {
display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch}
.photo-card,.video-card {
overflow:hidden;border-radius:28px;background:#e8e3d9}
.photo-card img {
width:100%;height:100%;min-height:620px;object-fit:cover;display:block}
.video-card {
position:relative;min-height:620px;background:#101713;display:flex;align-items:center;justify-content:center}
.video-card video {
width:100%;height:620px;object-fit:contain;background:#101713;display:block}
.media-caption {
margin-top:16px;font-size:13px;color:#68736d}
.media-heading {
display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:38px}
.media-heading h2 {
font:500 clamp(42px,5vw,72px)/1 Newsreader,serif;letter-spacing:-.04em;margin:10px 0 0;max-width:780px}
@media(max-width:800px) {
.media-story {
padding-bottom:80px}
.media-grid {
grid-template-columns:1fr}
.photo-card img,.video-card {
min-height:480px}
.video-card video {
height:auto;max-height:76svh;min-height:0}
.media-heading {
align-items:start;flex-direction:column}
}

/* Component-specific typography and utility styles */
.story-title {
  font: 500 clamp(46px, 5.5vw, 78px)/1 Newsreader, serif;
  letter-spacing: -0.04em;
  margin: 0 0 38px;
}
.media-intro { max-width: 420px; margin: 0; color: #59645e; }
.media-figure { margin: 0; }
.goal-title {
  font: 500 clamp(40px, 4.5vw, 64px)/1 Newsreader, serif;
  margin: 0 0 25px;
}
.final-eyebrow { margin-bottom: 24px; }
.footer-link { color: inherit; text-underline-offset: 3px; }