:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; background:#080808; overflow-x:hidden; }
.font-display { font-family:"Bebas Neue", sans-serif; }
.font-heading { font-family:Oswald, sans-serif; }
.text-stroke { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.72); }

.hero{
  background:
    linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.76) 60%,#080808),
    radial-gradient(circle at 75% 30%,rgba(153,27,27,.24),transparent 35%),
    url('../images/hero.svg') center/cover no-repeat;
}
.nav-link{transition:.2s}.nav-link:hover{color:#fff}
.mobile-nav{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#d4d4d4}
.glass-card{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.info-box{padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#101010}
.info-box span{display:block;color:#737373;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.stat-card{padding:18px;border-radius:18px;background:#111;border:1px solid rgba(255,255,255,.08)}
.stat-card b{display:block;font-family:"Bebas Neue";font-size:42px;line-height:.9}.stat-card span{font-size:11px;color:#737373;letter-spacing:.12em;text-transform:uppercase}
.section-wrap{max-width:1400px;margin:0 auto;padding:90px 16px}
@media(min-width:768px){.section-wrap{padding:110px 32px}}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
@media(min-width:768px){.section-head{flex-direction:row;justify-content:space-between;align-items:end}}
.section-head h2{font-family:"Bebas Neue";font-size:48px;line-height:.95}
@media(min-width:768px){.section-head h2{font-size:70px}}
.section-head>p{color:#737373;max-width:440px}
.section-kicker{font-family:Oswald,sans-serif;color:#ef4444;font-size:12px;letter-spacing:.23em}
.timeline{border-left:1px solid rgba(255,255,255,.12);margin-left:8px}
.timeline-item{position:relative;padding:0 0 34px 30px}
.timeline-dot{position:absolute;left:-7px;top:10px;width:13px;height:13px;background:#dc2626;border-radius:999px;box-shadow:0 0 0 6px rgba(220,38,38,.1)}
.timeline-card{padding:24px;border:1px solid rgba(255,255,255,.08);background:#101010;border-radius:20px}
.timeline-card span,.content-card small,.video-card small,.competition-card small,.journal-card small{font-size:11px;letter-spacing:.15em;color:#737373}
.timeline-card h3,.content-card h3,.video-card h3,.competition-card h3,.journal-card h3{font-family:Oswald,sans-serif;font-size:24px;margin:6px 0}
.timeline-card p,.content-card p,.competition-card p,.journal-card p{color:#a3a3a3}
.content-card,.video-card,.competition-card{overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#101010;transition:.25s}
.content-card:hover,.video-card:hover{transform:translateY(-4px);border-color:rgba(220,38,38,.38)}
.content-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:20px}.tag{display:inline-flex;padding:5px 9px;border-radius:999px;border:1px solid rgba(220,38,38,.3);background:rgba(153,27,27,.15);color:#fca5a5;font-size:10px;letter-spacing:.12em;margin-right:8px}
.video-placeholder{aspect-ratio:16/9;background:linear-gradient(145deg,#191919,#0b0b0b);display:grid;place-items:center;cursor:pointer;position:relative}
.video-placeholder span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#dc2626;font-size:24px;padding-left:4px;box-shadow:0 15px 35px rgba(220,38,38,.2)}
.video-placeholder p{position:absolute;bottom:14px;left:18px;color:#737373;font-size:12px}
/* Face-safe gallery layout */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

@media(min-width:640px){
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(min-width:1024px){
  .gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#111;
  min-height:280px;
  aspect-ratio:4/5;
  display:block;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .35s ease;
}

.gallery-item:hover img{
  transform:scale(1.03);
}

/* Disable random masonry spans so heads are less likely to be cropped */
.gallery-item.tall,
.gallery-item.wide{
  grid-row:span 1;
  grid-column:span 1;
}

@media(min-width:768px){
  .gallery-item{
    min-height:320px;
  }
}
.filter-btn{font-size:11px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#a3a3a3}
.filter-btn.active{color:white;border-color:#dc2626;background:rgba(220,38,38,.12)}
.competition-card{padding:24px}.competition-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.medal{padding:8px 10px;border:1px solid rgba(212,168,83,.55);color:#d4a853;border-radius:10px;font-size:11px;letter-spacing:.12em}.medal.bronze{color:#c08457;border-color:#7c4d2f}
.match-row{display:grid;grid-template-columns:1fr auto;gap:5px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06)}.match-row small{grid-column:1/-1}.win{color:#4ade80}.loss{color:#f87171}
.achievement-card{min-height:150px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,#141414,#0d0d0d);display:flex;flex-direction:column;justify-content:space-between}
.achievement-card span{font-family:"Bebas Neue";font-size:42px;color:#dc2626}.achievement-card b{font-family:Oswald;font-size:16px}.achievement-card.locked{opacity:.32}
.tech-row{display:flex;justify-content:space-between;gap:18px;padding:17px 18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#101010}.tech-row b{font-size:10px;color:#fca5a5;letter-spacing:.1em}
.belt-card{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#101010;margin-bottom:10px}.belt-card h3{font-family:Oswald;font-size:21px}.belt-card small{font-size:10px;color:#ef4444;letter-spacing:.15em}.belt-card p{color:#a3a3a3;font-size:13px}.belt-card.faded{opacity:.28}.belt{width:74px;height:17px;border-radius:2px;display:block}.belt.white{background:white}.belt.blue{background:#2563eb}.belt.purple{background:#7e22ce}.belt.brown{background:#7c2d12}.belt.black{background:#050505;border:1px solid #444}
.quote-section{padding:120px 16px;background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.88)),url('../images/quote.svg') center/cover no-repeat;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.quote-section blockquote{font-family:"Bebas Neue";font-size:42px;line-height:1.05;margin-top:15px}@media(min-width:768px){.quote-section blockquote{font-size:70px}}
.journal-card{padding:28px;border-radius:22px;background:#101010;border:1px solid rgba(255,255,255,.08);border-left:3px solid #dc2626}


/* Junior Jiu-Jitsu belt hierarchy */
.belt-card.completed{
  opacity:.62;
}

.belt-card.current{
  border-color:rgba(239,68,68,.55);
  background:linear-gradient(145deg,#171111,#101010);
  box-shadow:0 0 0 1px rgba(239,68,68,.08),0 12px 35px rgba(0,0,0,.28);
}

.belt.grey{
  background:#8b8b8b;
}

.belt.grey-white{
  background:linear-gradient(
    to right,
    #8b8b8b 0 30%,
    #ffffff 30% 70%,
    #8b8b8b 70% 100%
  );
}

.belt.grey-black{
  background:linear-gradient(
    to right,
    #8b8b8b 0 30%,
    #111111 30% 70%,
    #8b8b8b 70% 100%
  );
}

.belt.yellow{
  background:#facc15;
}

.belt.yellow-white{
  background:linear-gradient(
    to right,
    #facc15 0 30%,
    #ffffff 30% 70%,
    #facc15 70% 100%
  );
}

.belt.yellow-black{
  background:linear-gradient(
    to right,
    #facc15 0 30%,
    #111111 30% 70%,
    #facc15 70% 100%
  );
}

.belt.orange{
  background:#f97316;
}

.belt.orange-white{
  background:linear-gradient(
    to right,
    #f97316 0 30%,
    #ffffff 30% 70%,
    #f97316 70% 100%
  );
}

.belt.orange-black{
  background:linear-gradient(
    to right,
    #f97316 0 30%,
    #111111 30% 70%,
    #f97316 70% 100%
  );
}

.belt.green{
  background:#16a34a;
}

.belt.green-white{
  background:linear-gradient(
    to right,
    #16a34a 0 30%,
    #ffffff 30% 70%,
    #16a34a 70% 100%
  );
}

.belt.green-black{
  background:linear-gradient(
    to right,
    #16a34a 0 30%,
    #111111 30% 70%,
    #16a34a 70% 100%
  );
}

.dynamic-photo{
  overflow:hidden;
}

.dynamic-photo img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .3s ease;
}

.dynamic-photo:hover img{
  transform:scale(1.025);
}

.video-placeholder img{
  pointer-events:none;
}


.gallery-caption{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px 16px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78) 55%,rgba(0,0,0,.92));
  text-align:left;
  pointer-events:none;
}

.gallery-caption-title{
  font-family:Oswald,sans-serif;
  font-size:18px;
  line-height:1.05;
  color:#fff;
  margin-bottom:6px;
}

.gallery-caption-meta{
  font-size:10px;
  letter-spacing:.14em;
  color:#a3a3a3;
}