:root {
	--ink: #f8efe7;
	--muted: #b8a6b8;
	--paper: #160d22;
	--lime: #ff9b45;
	--line: #3d264d;
	--dark: #0c0713;
	--purple: #2b1640;
	--gold: #ffd26a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header, .site-footer { align-items: center; display: flex; justify-content: space-between; padding: 24px 5vw; }
.site-header { border-bottom: 1px solid var(--line); }
.brand { align-items: center; display: flex; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; gap: 10px; letter-spacing: .08em; }
.brand em { color: var(--lime); font-style: normal; }
.brand-logo { cursor: default; display: block; height: 38px; object-fit: cover; width: 38px; }
nav { align-items: center; display: flex; font-size: 13px; gap: 32px; }
nav a:not(.nav-join), .text-link { color: var(--muted); }
.nav-join { background: var(--lime); color: var(--dark); padding: 12px 18px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 610px; padding: 8vw 5vw 7vw; }
.hero-copy { align-self: center; max-width: 590px; padding-right: 32px; position: relative; z-index: 1; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; margin: 0 0 24px; text-transform: uppercase; }
.pulse, .status-dot { background: #80b543; border-radius: 50%; display: inline-block; height: 8px; margin-right: 8px; width: 8px; }
.hero h1, .content-section h2, .rules-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(48px, 7vw, 92px); letter-spacing: -.055em; line-height: .93; margin: 0; }
.hero h1 span { color: var(--lime); }
.hero-text { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 30px 0; max-width: 430px; }
.hero-actions { align-items: center; display: flex; gap: 26px; }
.button { align-items: center; display: inline-flex; font-size: 16px; font-weight: 700; padding: 20px 28px; }
.button-primary { background: var(--lime); color: var(--dark); }
.discord-button-icon { height: 20px; margin-right: 11px; width: 20px; }
.button-primary .button-arrow { color: var(--dark); margin-left: 40px; }
.text-link { font-size: 13px; }
.text-link span { color: var(--ink); margin-left: 8px; }
.hero-art, .hero-art * { cursor: default; }
.hero-art { background: #170a28; margin-left: -10vw; min-height: 470px; overflow: hidden; position: relative; width: calc(100% + 10vw); }
.hero-art:after { background: linear-gradient(180deg, var(--paper) 0%, transparent 25%, transparent 75%, var(--paper) 100%); content: ''; inset: 0; opacity: .65; pointer-events: none; position: absolute; }
.hero-image { display: block; height: 100%; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, #000 42%, #000 86%, transparent 100%); min-height: 470px; object-fit: cover; object-position: center; width: 100%; }
.moon { background: var(--gold); border-radius: 50%; box-shadow: 0 0 45px rgba(255,155,69,.7); height: 145px; position: absolute; right: 16%; top: 14%; width: 145px; }
.mountain { bottom: 0; position: absolute; }
.mountain-back { border-bottom: 270px solid #4b2459; border-left: 190px solid transparent; border-right: 190px solid transparent; height: 0; right: 0; width: 0; }
.mountain-front { border-bottom: 215px solid #21112f; border-left: 270px solid transparent; border-right: 270px solid transparent; height: 0; left: -100px; width: 0; }
.tree { background: #0e0918; bottom: 22px; height: 110px; position: absolute; width: 20px; }
.tree:before, .tree:after { border-bottom: 80px solid #0e0918; border-left: 45px solid transparent; border-right: 45px solid transparent; content: ''; left: -35px; position: absolute; }
.tree:before { top: -55px; }
.tree:after { top: -20px; }
.tree-one { left: 18%; }
.tree-two { bottom: 65px; right: 17%; transform: scale(.7); }
.art-caption { bottom: 25px; color: var(--paper); display: flex; font-size: 10px; font-weight: 700; gap: 15px; letter-spacing: .12em; position: absolute; right: 28px; z-index: 1; }
.join-panel { background: var(--dark); color: var(--paper); display: grid; gap: 40px; grid-template-columns: 1fr 1.2fr; padding: 48px 10vw; }
.join-panel h2 { color: var(--lime); font-family: 'Space Grotesk'; font-size: 32px; letter-spacing: -.04em; margin: 0; }
.join-panel .eyebrow { color: #b8a6b8; }
.server-details { align-self: center; }
.server-status { align-items: center; color: #d2bdd1; display: flex; font-size: 12px; gap: 4px; margin-bottom: 18px; }
.server-status strong { color: var(--lime); font-weight: 500; margin-left: auto; }
.edition-toggle { display: inline-flex; gap: 4px; margin-bottom: 16px; }
.edition-button { background: transparent; border: 1px solid #563263; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; padding: 9px 13px; }
.edition-button.is-active { background: var(--lime); border-color: var(--lime); color: var(--dark); }
.address-row { align-items: center; border-bottom: 1px solid #563263; display: flex; justify-content: space-between; padding-bottom: 12px; }
.address-row code { color: var(--lime); font-family: 'Space Grotesk'; font-size: clamp(18px, 3vw, 28px); }
.copy-button { background: var(--lime); border: 0; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 700; padding: 10px 13px; }
.hint { color: #b8a6b8; font-size: 11px; margin: 12px 0 0; }
.hint code { color: var(--lime); }
.content-section { padding: 115px 10vw; }
.section-heading { display: flex; justify-content: space-between; margin-bottom: 50px; }
.section-heading h2 { font-size: clamp(50px, 7vw, 82px); max-width: 500px; }
.feature-grid { display: grid; gap: 16px; grid-template-columns: 1.25fr 1fr 1fr; }
.feature-card { background: var(--purple); border: 1px solid #452354; min-height: 310px; padding: 26px; position: relative; }
.feature-large { background: linear-gradient(135deg, var(--lime), #f05d4b); border: 0; color: var(--dark); }
.card-number { color: var(--muted); font-size: 11px; }
.feature-card h3 { font-family: 'Space Grotesk'; font-size: 28px; letter-spacing: -.05em; line-height: 1.05; margin: 72px 0 14px; }
.feature-card p { color: #cbb9ca; font-size: 13px; line-height: 1.5; max-width: 220px; }
.feature-large p { color: var(--ink); }
.card-icon { bottom: 23px; font-size: 25px; position: absolute; right: 25px; }
.rules-section { background: #281338; display: grid; gap: 60px; grid-template-columns: 1fr 1fr; padding: 100px 10vw; }
.rules-section h2 { font-size: clamp(50px, 6vw, 78px); }
.rule-list { align-self: end; }
.rule-list div { align-items: center; border-bottom: 1px solid #543061; display: flex; gap: 25px; padding: 18px 0; }
.rule-list span { color: var(--lime); font-size: 11px; }
.rule-list p { font-size: 15px; margin: 0; }
.site-footer { background: var(--dark); color: var(--paper); font-size: 12px; }
.site-footer .brand-logo { box-shadow: 0 0 16px rgba(255, 155, 69, .45); height: 48px; width: 48px; }
.site-footer .brand > span { color: var(--gold); }
.site-footer .brand em { color: var(--lime); }
.site-footer p { color: #b8a6b8; margin: 0; }
.discord-link { color: var(--lime); }
.toast { background: var(--lime); bottom: 25px; font-size: 12px; left: 50%; padding: 12px 18px; position: fixed; transform: translate(-50%, 120px); transition: transform .25s ease; }
.toast.visible { transform: translate(-50%, 0); }

@media (max-width: 720px) {
	.site-header, .site-footer { padding: 18px 5vw; }
	.site-header { flex-wrap: wrap; row-gap: 18px; }
	.site-header nav { font-size: 11px; gap: 12px; justify-content: flex-end; width: 100%; }
	.site-header nav a:not(.nav-join) { display: block; }
	.nav-join { padding: 10px 12px; }
	.hero { display: block; padding: 70px 5vw 45px; }
	.hero-copy { padding: 0; }
	.hero h1 { font-size: 57px; }
	.hero-art { margin-left: 0; margin-top: 55px; min-height: 330px; width: 100%; }
	.join-panel, .rules-section { display: block; padding: 55px 8vw; }
	.server-details { margin-top: 38px; }
	.content-section { padding: 75px 8vw; }
	.section-heading { display: block; }
	.section-heading h2 { margin-top: 35px; }
	.feature-grid { grid-template-columns: 1fr; }
	.feature-card { min-height: 260px; }
	.feature-card h3 { margin-top: 55px; }
	.site-footer { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
	.site-footer p { order: 3; width: 100%; }
}

.founders-page { min-height: 100vh; }
.founders-hero { max-width: 760px; padding: 105px 10vw 70px; }
.founders-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(52px, 8vw, 100px); letter-spacing: -.06em; line-height: .9; margin: 0; }
.founders-hero h1 span { color: var(--lime); }
.founders-hero p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 30px 0 0; max-width: 520px; }
.founder-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); padding: 0 10vw 110px; }
.founder-card { background: var(--purple); border: 1px solid #452354; min-height: 290px; padding: 28px; }
.founder-card:nth-child(2) { background: #351447; }
.founder-card:nth-child(3) { background: #42204f; }
.founder-number { color: var(--lime); font-size: 11px; letter-spacing: .12em; }
.founder-card h2 { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 31px; letter-spacing: -.05em; margin: 72px 0 28px; }
.discord-profile { align-items: center; background: transparent; border: 0; color: var(--lime); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; gap: 9px; padding: 0; }
.discord-profile img { height: 18px; width: 18px; }
.discord-profile:hover { color: var(--gold); }
.founders-note { color: var(--muted); font-size: 12px; margin: -75px 10vw 75px; }
.rules-hero { max-width: 760px; padding: 105px 10vw 70px; }
.rules-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(52px, 8vw, 100px); letter-spacing: -.06em; line-height: .9; margin: 0; }
.rules-hero h1 span { color: var(--lime); }
.rules-list { counter-reset: rules; list-style: none; margin: 0 10vw 110px; padding: 0; }
.rules-list li { border-bottom: 1px solid var(--line); color: var(--ink); counter-increment: rules; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.35; padding: 25px 0 25px 74px; position: relative; }
.rules-list li:first-child { border-top: 1px solid var(--line); }
.rules-list li::before { color: var(--lime); content: counter(rules) '-'; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; left: 0; position: absolute; top: 31px; }

@media (max-width: 720px) {
	.founders-hero { padding: 70px 8vw 55px; }
	.founder-grid { grid-template-columns: 1fr; padding: 0 8vw 75px; }
	.founder-card { min-height: 245px; }
	.founder-card h2 { margin-top: 55px; }
	.founders-note { margin: -45px 8vw 55px; }
	.rules-hero { padding: 70px 8vw 55px; }
	.rules-list { margin: 0 8vw 75px; }
	.rules-list li { padding-left: 50px; }
	.rules-list li::before { top: 29px; }
}