@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        hsl(220,20%,7%);
  --fg:        hsl(210,25%,88%);
  --card:      hsl(220,18%,11%);
  --primary:   hsl(207,70%,50%);
  --primary-fg:hsl(220,20%,7%);
  --secondary: hsl(220,15%,18%);
  --muted:     hsl(215,15%,55%);
  --border:    hsl(220,15%,20%);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: 'Exo 2', sans-serif; font-size: 16px; line-height: 1.6; }

/* Typography */
h1,h2,h3,h4 { font-family: 'Rajdhani', sans-serif; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
strong { color: var(--fg); font-weight: 600; }
em { font-style: italic; }

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.container--narrow { max-width: 800px; margin: 0 auto; padding: 0 1.25rem; }

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 64px;
  background: hsla(220,20%,7%,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.navbar__brand { display: flex; align-items: center; gap: .75rem; }
.navbar__logo { height: 40px; width: 40px; object-fit: contain; }
.navbar__name { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .1em; color: var(--primary); }
.navbar__links { display: flex; gap: .25rem; }
.navbar__link {
  padding: .5rem 1rem; border-radius: .375rem;
  font-family: 'Rajdhani', sans-serif; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); transition: color .2s, background .2s;
}
.navbar__link:hover { color: var(--fg); background: var(--secondary); }
.navbar__link--active { color: var(--primary); background: hsla(207,70%,50%,.1); }

/* Mobile nav */
.navbar__toggle { display: none; background: none; border: none; color: var(--fg); cursor: pointer; padding: .5rem; }
.navbar__mobile { display: none; border-top: 1px solid var(--border); background: var(--bg); }
.navbar__mobile.open { display: block; }
.navbar__mobile-links { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 0; }
.navbar__mobile-link {
  padding: .75rem 1rem; border-radius: .375rem;
  font-family: 'Rajdhani', sans-serif; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.navbar__mobile-link:hover { color: var(--fg); background: var(--secondary); }
.navbar__mobile-link--active { color: var(--primary); background: hsla(207,70%,50%,.1); }

@media (max-width: 767px) {
  .navbar__links { display: none; }
  .navbar__toggle { display: block; }
}

/* Page wrapper */
.page { padding-top: 64px; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Sections */
.section { padding: 4rem 0; }
.section--hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; text-align: center; }
.section--hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, hsla(207,70%,50%,.05), transparent); pointer-events: none; }
.section--muted { background: hsla(220,18%,11%,.5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Hero */
.hero__logo {
  width: 128px; height: 128px; object-fit: contain;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 30px hsla(207,70%,50%,.3));
  display: block;
}
.hero__title { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; }
.hero__title span { color: var(--primary); }
.hero__sub { margin: 1rem auto 0; max-width: 600px; color: var(--muted); font-size: 1.1rem; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: .375rem; font-family: 'Rajdhani', sans-serif;
  font-size: .9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  transition: background .2s, border-color .2s;
  cursor: pointer; border: 1px solid transparent;
}
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: hsl(207,70%,43%); }
.btn--outline { border-color: var(--border); color: var(--fg); }
.btn--outline:hover { background: var(--secondary); }

/* Cards grid */
.cards { display: grid; gap: 1.5rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Card */
.card {
  border: 1px solid var(--border); border-radius: .5rem;
  background: var(--card); padding: 1.5rem;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: hsla(207,70%,50%,.4); box-shadow: 0 0 20px hsla(207,70%,50%,.08); }
.card--link { display: block; }
.card__icon { color: var(--primary); margin-bottom: .75rem; }
.card__title { font-size: 1.25rem; font-weight: 700; transition: color .2s; }
.card:hover .card__title { color: var(--primary); }
.card__desc { margin-top: .5rem; font-size: .875rem; color: var(--muted); }

/* Status badge */
.badge {
  display: inline-flex; align-items: center;
  padding: .25rem .75rem; border-radius: 9999px; border: 1px solid;
  font-size: .75rem; font-weight: 600;
}
.badge--active   { background: hsla(142,60%,50%,.15); color: hsl(142,60%,60%); border-color: hsla(142,60%,50%,.3); }
.badge--semi     { background: hsla(207,70%,50%,.15); color: var(--primary); border-color: hsla(207,70%,50%,.3); }
.badge--alumni   { background: var(--secondary); color: var(--muted); border-color: var(--border); }
.badge--mia      { background: hsla(30,70%,50%,.15); color: hsl(30,80%,60%); border-color: hsla(30,70%,50%,.3); }

/* Roster card */
.member__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.member__avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; border-radius: .375rem; background: var(--secondary); color: var(--primary); }
.member__info { flex: 1; }
.member__tag { font-size: 1.25rem; font-weight: 700; }
.member__role { font-size: .875rem; color: var(--muted); }
.member__bio { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }
.member__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .75rem; color: var(--muted); }
.member__meta span { display: flex; align-items: center; gap: .25rem; }
.member__meta .icon { color: var(--primary); }

/* Timeline */
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.timeline__item { position: relative; padding-left: 48px; margin-bottom: 3rem; }
.timeline__dot { position: absolute; left: 10px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); background: var(--bg); }
.timeline__period { display: flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--primary); margin-bottom: .5rem; }
.timeline__title { font-size: 1.125rem; font-weight: 700; }
.timeline__desc { margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.timeline__highlight { margin-top: .75rem; display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: hsla(207,70%,50%,.8); }

@media (min-width: 768px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .timeline__item { padding-left: 0; width: 50%; margin-left: 0; padding-right: 3rem; }
  .timeline__item:nth-child(even) { margin-left: 50%; padding-left: 3rem; padding-right: 0; }
  .timeline__dot { left: auto; right: -6px; }
  .timeline__item:nth-child(even) .timeline__dot { left: -6px; right: auto; }
}

/* Rules */
.rule__icon { color: var(--primary); margin-bottom: .75rem; }
.rule__title { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.rule__desc { font-size: .875rem; color: var(--muted); line-height: 1.7; }

/* TL;DR box */
.tldr {
  margin-top: 3rem; border: 1px solid hsla(207,70%,50%,.3);
  background: hsla(207,70%,50%,.05); border-radius: .5rem;
  padding: 1.5rem; text-align: center;
}
.tldr__title { font-size: 1.25rem; font-weight: 700; color: var(--primary); margin-bottom: .5rem; }
.tldr__text { color: var(--muted); }

/* Page title section (inner pages) */
.section--page-title { padding: 4rem 0 2.5rem; text-align: center; }

/* Section headings */
.section-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; text-align: center; margin-bottom: .75rem; }
.section-title span { color: var(--primary); }
.section-sub { color: var(--muted); text-align: center; max-width: 480px; margin: 0 auto 3rem; }

/* Status / origin */
.status-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; }
.status-title span { color: var(--primary); }
.origin-text { color: var(--muted); line-height: 1.8; }
.origin-text p + p { margin-top: 1rem; }
.origin-text strong.accent { color: var(--primary); }

/* Member card */
.card--member { }
.card__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.member__name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin-bottom: .25rem; }
.member__stats { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; font-size: .8125rem; margin: .75rem 0; }
.member__stats dt { color: var(--muted); font-weight: 600; }
.member__stats dd { color: var(--fg); }

/* Timeline card + tags */
.timeline__card { }
.timeline__year { font-size: .75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .375rem; }
.timeline__game { font-size: 1.1875rem; font-weight: 700; margin-bottom: .5rem; }
.timeline__game em { font-style: italic; font-weight: 400; color: var(--muted); }
.timeline__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.tag { display: inline-flex; padding: .2rem .6rem; border-radius: 9999px; border: 1px solid var(--border); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--secondary); }

/* Rule card */
.card--rule { }
.rule__number { font-family: 'Rajdhani', sans-serif; font-size: 2.5rem; font-weight: 700; color: hsla(207,70%,50%,.2); line-height: 1; margin-bottom: .5rem; }

/* TL;DR */
.tldr { margin: 0; border: 1px solid hsla(207,70%,50%,.3); background: hsla(207,70%,50%,.05); border-radius: .5rem; padding: 2rem; text-align: center; }
.tldr__heading { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
.tldr__quote { font-family: 'Rajdhani', sans-serif; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; color: var(--fg); line-height: 1.4; border: none; }
.tldr__sub { margin-top: 1rem; font-size: .875rem; color: var(--muted); font-style: italic; }

/* Footer */
footer {
  border-top: 1px solid var(--border); background: hsla(220,18%,11%,.5);
  padding: 2rem 0; margin-top: auto;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .875rem; color: var(--muted); text-align: center; }
@media (min-width: 768px) {
  .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer__brand { display: flex; align-items: center; gap: .5rem; font-family: 'Rajdhani', sans-serif; }
.footer__logo { height: 24px; width: 24px; opacity: .6; object-fit: contain; }

/* SVG icons inline */
.icon { display: inline-block; vertical-align: middle; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate { opacity: 0; }
.animate.visible { animation: fadeUp .5s ease forwards; }