:root{--accent:#e11d48;--muted:#6a7280;--bg:#fafafa;--card:#fff;--max-width:1100px}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;line-height:1.5;margin:0;background:var(--bg);color:#111}
main{position:relative;overflow:hidden;background:transparent}
main::before{content:"";position:fixed;left:50%;top:0;transform:translateX(-50%);width:125%;height:100vh;background:url('DH Hocke.jpeg') center/cover no-repeat;opacity:1;z-index:-1;animation:backgroundMove 18s ease-in-out infinite alternate}
@keyframes backgroundMove{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-48%) scale(1.08)}}
.container{max-width:var(--max-width);margin:0 auto;padding:1.5rem}
.topbar{position:sticky;top:0;z-index:20;background:rgba(250,250,250,.95);backdrop-filter:blur(6px);border-bottom:1px solid #eceff4;padding:0.08rem 0;box-shadow:0 1px 0 rgba(17,17,17,.03)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;padding:.5rem 1.5rem}
.nav-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;flex:1}
.nav-btn{display:inline-block;padding:.7rem 1rem;border-radius:999px;text-decoration:none;background:#fff;border:1px solid #e6e8ef;color:#111;font-weight:600;transition:.2s ease}
.nav-btn:hover{background:var(--accent);color:#ffffff;border-color:var(--accent)}
.nav-brand{display:block;max-width:190px;height:64px;padding:0;background:transparent;border:none;object-fit:contain;filter:none}
.hero{background:linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)), url('gemsstock.avif') center 18%/cover no-repeat;padding:0 2rem 4rem;border-bottom:1px solid #eceff4;min-height:92vh;display:flex;align-items:flex-start}
.hero-layout{display:flex;gap:1.25rem;align-items:flex-start;width:100%;padding-top:0;padding-bottom:0}
.hero-left{flex:1.5;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin:0;font-size:2.5rem;line-height:1.1;color:#111;transform:translateY(42px)}
.subtitle{color:#2b2b2b;margin:.25rem 0 .75rem;font-size:1.1rem;transform:translateY(38px)}
.hero-content{display:flex;gap:1.5rem;align-items:flex-start;margin-top:.5rem}
.quote{margin:0;flex:1;max-width:320px;font-size:2rem;line-height:1.1;font-weight:700;color:#111;letter-spacing:.02em;transform:translateY(38px)}
.hero-bio{flex:1.2;max-width:420px;transform:translateY(-30px)}
.hero-bio p{margin:0;color:#1b1b1b;font-size:1rem;line-height:1.6;font-weight:600}
.hero-photo{display:flex;align-items:center;justify-content:center;transform:translateY(70px)}
.photo-placeholder{width:210px;height:210px;border-radius:12px;background:#fff;border:1px solid #e6e8ef;object-fit:cover;display:block;color:var(--muted)}
.btn{display:inline-block;padding:.5rem .75rem;border-radius:8px;text-decoration:none;background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff}

html{scroll-behavior:smooth}
section{margin-top:1.25rem;scroll-margin-top:90px}
section h2{font-size:2rem;line-height:1.2;margin-bottom:.75rem}
.profile{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;background:rgba(255,255,255,0.72);padding:1rem;border-radius:12px;border:1px solid rgba(17,17,17,0.06)}
.profile dt{font-weight:700;font-size:1.15rem}
.profile dd{margin:0;color:#2c2c2c;font-size:1.1rem}

.goals,.achievements{background:rgba(255,255,255,0.72);padding:1rem 1rem 1rem 2rem;border-radius:12px;border:1px solid rgba(17,17,17,0.06);margin-left:.5rem}
.support-copy{background:rgba(255,255,255,0.72);padding:1.25rem;border-radius:12px;border:1px solid rgba(17,17,17,0.06)}
.support-copy p,
.support-copy .support-list{margin:0 0 1rem}
.support-copy p:last-child,
.support-copy .support-list:last-child{margin-bottom:0}
.support-copy .support-list{padding-left:1.5rem}
.support-copy .support-list li{margin-bottom:.35rem}
.support-copy .support-list li:last-child{margin-bottom:0}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:1rem;margin-top:.5rem;align-items:stretch}
.photo{background:transparent;border:none;padding:0;height:220px;border-radius:0;display:block;object-fit:cover;overflow:hidden;box-shadow:none}
.photo-large{width:100%;height:220px;object-fit:cover;border-radius:12px}
.sponsor-gallery{grid-template-columns:repeat(4, minmax(140px, 1fr));}
.sponsor-logo{width:100%;height:120px;padding:1rem;object-fit:contain;background:#fff}

.site-footer{margin-top:2rem;padding:1rem;text-align:center;color:var(--muted)}

@media (max-width:720px){
  .hero .container{flex-direction:column;align-items:flex-start}
  .profile{grid-template-columns:1fr}
}