:root{
  --bg:#0d0f10;
  --surface:#15181a;
  --card:#1a1e20;
  --card-2:#20252733;
  --line:#2a2f31;
  --ink:#ecebe6;
  --muted:#9aa2a1;
  --faint:#6d7574;
  --accent:#d4f66a;
  --accent-2:#a9e05a;
  --accent-ink:#121603;
  --radius:14px;
  --radius-s:10px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk",var(--font);
  --maxw:1200px;
  --gap:clamp(1rem,2.4vw,1.75rem);
  --pad:clamp(1.1rem,5vw,2rem);
  --section:clamp(4.5rem,9vw,7.5rem);
  --shadow:0 18px 50px -24px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul[class]{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-0.02em}
.wrap{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto}
.eyebrow{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.lede{font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);color:var(--muted);line-height:1.6}
.muted{color:var(--muted)}
.nums{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;height:3rem;padding:0 1.5rem;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.98rem;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px -8px rgba(212,246,106,.5)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(13,15,16,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.25rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.brand .dot{width:.85rem;height:.85rem;border-radius:3px;background:var(--accent);box-shadow:0 0 14px 2px rgba(212,246,106,.6);transform:rotate(45deg)}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-size:.95rem;color:var(--muted);transition:color .18s ease}
.nav-links a:hover{color:var(--ink)}
.nav .btn{height:2.5rem;padding:0 1.1rem;font-size:.9rem}
.nav-menu{display:none}

/* hero */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;transform:scale(1.04);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,16,.55) 0%,rgba(13,15,16,.1) 35%,rgba(13,15,16,.75) 78%,var(--bg) 100%),linear-gradient(90deg,rgba(13,15,16,.8) 0%,rgba(13,15,16,.15) 55%)}
.hero-in{position:relative;z-index:1;padding-bottom:clamp(3rem,8vw,6rem);padding-top:6rem}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.75rem);font-weight:700;letter-spacing:-.03em;max-width:19ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .accent{color:var(--accent)}
.hero .sub{margin-top:1.25rem;font-size:clamp(1.0625rem,1rem + .55vw,1.375rem);color:#d6d9d6;max-width:46ch;line-height:1.55}
.hero .cta{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.hero .meta{display:flex;gap:1.75rem;margin-top:2.5rem;flex-wrap:wrap}
.hero .meta div{display:flex;flex-direction:column}
.hero .meta b{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1}
.hero .meta span{font-size:.82rem;color:var(--muted);margin-top:.35rem;letter-spacing:.03em}
.scrolltip{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:1;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* generic section */
.section{padding-block:var(--section)}
.head{max-width:60ch;margin-bottom:clamp(2rem,5vw,3.25rem)}
.head h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);margin-top:.6rem}
.head p{margin-top:1rem}

/* lore cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:transform .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-4px);border-color:#3a4042}
.card .ph{position:absolute;inset:0;z-index:-1}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.05)}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,16,0) 30%,rgba(13,15,16,.7) 70%,rgba(13,15,16,.94) 100%)}
.card .body{position:relative;padding:1.5rem}
.card h3{font-size:1.3rem}
.card p{margin-top:.5rem;color:#c4c9c6;font-size:.95rem;line-height:1.55}
.card .tag{position:absolute;top:1rem;left:1rem;z-index:1;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(13,15,16,.6);backdrop-filter:blur(6px);padding:.3rem .6rem;border-radius:999px;border:1px solid rgba(212,246,106,.25)}

/* about split */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about .txt p{margin-top:1rem;color:var(--muted)}
.about .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.about .stats div{background:var(--card);padding:1.6rem 1.4rem}
.about .stats b{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:600;line-height:1;color:var(--accent)}
.about .stats span{display:block;margin-top:.5rem;color:var(--muted);font-size:.9rem}

/* seasons timeline */
.seasons{display:grid;gap:var(--gap)}
.season{display:grid;grid-template-columns:150px 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;padding:1.5rem 0;border-top:1px solid var(--line)}
.season:first-child{border-top:none}
.season .yr{font-family:var(--display);font-weight:600}
.season .yr b{display:block;font-size:1.35rem;color:var(--accent)}
.season .yr span{color:#a6adac;font-size:.9rem}
.season .txt h3{font-size:1.3rem;margin-bottom:.4rem}
.season .txt p{color:var(--muted)}
.season.has-img{grid-template-columns:150px 1.2fr .9fr}
.season .shot{border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.season .shot img{width:100%;height:100%;object-fit:cover}

/* rules grid */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.rule{display:flex;gap:.9rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:1.1rem 1.25rem}
.rule .m{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:6px;background:rgba(212,246,106,.14);color:var(--accent);display:grid;place-items:center;font-size:.9rem;font-weight:700;font-family:var(--display);transform:rotate(45deg)}
.rule .m span{transform:rotate(-45deg)}
.rule .t{flex:1}
.rule .t b{font-weight:600}
.rule .t p{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.rules-foot{margin-top:1.5rem;color:var(--muted)}
.rules-foot a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}

/* faq */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2.5rem}
.faq-item{border-bottom:1px solid var(--line);padding:1.25rem 0}
.faq-item h3{font-size:1.1rem;margin-bottom:.4rem}
.faq-item p{color:var(--muted);font-size:.95rem}

/* join cta */
.join{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);isolation:isolate}
.join .ph{position:absolute;inset:0;z-index:-1}
.join .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.join .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,15,16,.92),rgba(13,15,16,.72) 60%,rgba(13,15,16,.5))}
.join .in{position:relative;padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,3.5rem);max-width:40rem}
.join h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem)}
.join p{margin-top:1rem;color:#cfd3d0}
.join .cta{display:flex;gap:.9rem;margin-top:1.75rem;flex-wrap:wrap;align-items:center}
.join .hint{color:var(--muted);font-size:.9rem}

/* footer */
footer{border-top:1px solid var(--line);padding:3rem 0 2.5rem;margin-top:var(--section)}
.foot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot .brand{font-size:1rem}
.foot nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot nav a{color:var(--muted);font-size:.92rem}
.foot nav a:hover{color:var(--ink)}
.foot .cr{color:var(--faint);font-size:.85rem;width:100%;margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.5rem}

/* inner pages */
.page{padding-top:clamp(3rem,7vw,5rem)}
.page .head h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem);margin-top:.5rem}
.page .prose{max-width:68ch;font-size:1.05rem}
.page .prose h2{font-size:1.5rem;margin:2.5rem 0 .75rem}
.page .prose p{margin-top:.9rem;color:#d4d8d5}
.page .prose ol{margin-top:1rem;padding-left:0;list-style:none;counter-reset:r;display:grid;gap:.9rem}
.page .prose ol li{counter-increment:r;position:relative;padding-left:3rem;color:#d4d8d5}
.page .prose ol li::before{content:counter(r);position:absolute;left:0;top:-.1rem;width:2rem;height:2rem;border-radius:8px;background:rgba(212,246,106,.14);color:var(--accent);font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:.95rem}
.page .prose ol li b{color:var(--ink)}
.page .back{display:inline-flex;align-items:center;gap:.4rem;margin:3rem 0;color:var(--accent);font-weight:600;font-family:var(--display)}
.page figure{margin:2rem 0}
.page figure img{border-radius:var(--radius);border:1px solid var(--line);width:100%;aspect-ratio:16/9;object-fit:cover}
.page figcaption{margin-top:.6rem;color:var(--muted);font-size:.9rem}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-bg img{animation:none;transform:none}}

@media (max-width:960px){
  .about{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr;gap:0}
}
@media (max-width:680px){
  .nav-links,.nav .btn.nav-join{display:none}
  .nav-menu{display:inline-flex}
  .cards{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .season,.season.has-img{grid-template-columns:1fr;gap:.75rem;text-align:left}
  .season .yr{display:flex;gap:.6rem;align-items:baseline}
  .season .yr b{font-size:1.15rem}
  .season .shot{order:-1}
  .hero .meta{gap:1.25rem}
  .foot{flex-direction:column;align-items:flex-start}
}