@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500;1,6..72,600&display=swap');

:root {
  --ink: #19231b; --muted: #687168; --paper: #f4f1e8; --paper-2: #ebe6d9;
  --line: #d7d1c2; --moss: #3d6547; --moss-dark: #17241b; --gold: #bd8b3d;
  --rust: #a75335; --blue: #3c6c78; --violet: #65577f;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--paper);
  font-synthesis: none; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.topbar { height: 70px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: sticky; top: 0; z-index: 50; color: #fff; background: rgba(23,36,27,.96); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-decoration: none; white-space: nowrap; }
.brand em { display: block; color: #d8b779; font-size: 9px; font-style: normal; letter-spacing: .28em; margin-top: 1px; }
.brand-mark { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(216,183,121,.65); transform: rotate(45deg); }
.brand-mark svg { transform: rotate(-45deg); }
.topbar nav { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.topbar nav a { color: #d3d8d3; text-decoration: none; font-size: 13px; transition: color .2s; }
.topbar nav a:hover { color: #fff; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.version-pill { border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 7px 11px; font-size: 11px; color: #dbe3dc; white-space: nowrap; }
.version-pill span, .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #79bf75; box-shadow: 0 0 0 4px rgba(121,191,117,.12); margin-right: 7px; }
.menu-button { display: none; border: 0; background: transparent; color: #fff; }

.hero { position: relative; min-height: calc(100vh - 70px); padding: 9vh 5vw 0; color: #fff; background: #17241b; overflow: hidden; display: flex; flex-direction: column; }
.hero:before { content: ''; position: absolute; inset: 0; opacity: .19; background: radial-gradient(circle at 75% 25%, #90aa72 0, transparent 30%), repeating-radial-gradient(ellipse at 78% 65%, transparent 0 28px, rgba(255,255,255,.13) 29px 30px, transparent 31px 47px); transform: scale(1.35); }
.hero:after { content: ''; position: absolute; width: 550px; height: 550px; right: -180px; top: -250px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.hero-grid { position: absolute; inset: 0; opacity: .045; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 48px 48px; }
.hero-content { position: relative; z-index: 2; width: min(1180px, 100%); margin: auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: center; }
.kicker, .section-index { color: #d8b779; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.hero h1 { margin: 22px 0 22px; max-width: 720px; font-size: clamp(52px, 6.7vw, 94px); line-height: .91; letter-spacing: -.055em; }
.hero h1 i { font-family: 'Newsreader', Georgia, serif; font-weight: 500; color: #dbc693; }
.hero-copy > p { max-width: 620px; color: #bdc7bf; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; }
.hero-cta { display: flex; gap: 12px; margin-top: 34px; }
.primary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; text-decoration: none; font-size: 13px; font-weight: 700; border-radius: 2px; }
.primary-button { background: #e0c17d; color: #19231b; }
.ghost-button { border: 1px solid rgba(255,255,255,.25); color: #fff; }
.server-card { position: relative; background: rgba(245,242,232,.96); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.25); }
.server-card:before { content: ''; position: absolute; inset: 7px; border: 1px solid #d1c9b6; pointer-events: none; }
.server-card-top { display: flex; align-items: center; padding: 20px 24px 15px; font-size: 10px; font-weight: 800; letter-spacing: .14em; border-bottom: 1px solid var(--line); }
.server-card-top .edition { margin-left: auto; color: var(--muted); }
.server-address { padding: 30px 26px 26px; position: relative; }
.server-address > span { display: block; font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .16em; }
.server-address strong { display: block; font-size: clamp(22px, 2.6vw, 36px); margin-top: 7px; letter-spacing: -.04em; }
.server-address .copy-button { position: absolute; right: 24px; top: 29px; }
.server-details { margin: 0 8px; padding: 19px 18px 25px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.server-details div { display: flex; flex-direction: column; gap: 3px; }
.server-details span { font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: .12em; }
.server-details strong { font-size: 13px; }.server-details small { color: var(--muted); }
.terrain-line { height: 52px; background: #ded9cb; display: flex; padding: 0 28px; align-items: center; color: var(--moss); }
.terrain-line span { height: 1px; flex: 1; background: #aba691; margin: 0 10px; }
.hero-stats { position: relative; z-index: 2; width: min(1180px,100%); margin: 8vh auto 0; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(4,1fr); }
.hero-stats div { padding: 24px 0; display: flex; align-items: baseline; gap: 10px; }
.hero-stats strong { font-family: 'Newsreader', Georgia, serif; font-size: 27px; color: #e0c17d; }.hero-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #97a39a; }

.section { max-width: 1240px; margin: 0 auto; padding: 110px 5vw; }
.section-heading { margin-bottom: 44px; }.section-heading.split { display: grid; grid-template-columns: 1fr minmax(260px,420px); gap: 40px; align-items: end; }
.section-heading h2 { margin: 13px 0 0; max-width: 800px; font-size: clamp(36px,4.4vw,60px); line-height: 1; letter-spacing: -.045em; }
.section-heading > p, .section-heading.split > p { color: var(--muted); line-height: 1.7; margin: 0; }
.section .section-index { color: var(--moss); }
.join-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.join-card { border: 1px solid var(--line); min-height: 330px; padding: 34px; position: relative; display: flex; flex-direction: column; align-items: flex-start; background: rgba(255,255,255,.34); }
.join-card.featured { background: var(--moss-dark); color: #fff; border-color: var(--moss-dark); transform: translateY(-10px); }
.join-card > svg { color: var(--gold); margin-top: 28px; }.join-card h3 { font-size: 23px; margin: 18px 0 4px; }.join-card p { color: var(--muted); font-size: 13px; line-height: 1.55; }.join-card.featured p { color: #aebcb1; }
.large-glyph { color: var(--gold); margin-top: 26px; font-family: Georgia, serif; font-size: 30px; line-height: 1; }
.join-number { position: absolute; right: 25px; top: 24px; color: #a49c89; font-family: 'Newsreader',serif; font-style: italic; }
.join-card code { font-size: 15px; font-weight: 700; padding: 10px 0; }.port-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 5px 0 14px; }.port-row span { color:#9cab9f; }.port-row strong { color:#e0c17d; }
.copy-button { border: 1px solid currentColor; background: transparent; color: var(--moss); display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
.copy-button.compact { padding: 7px; }.server-address .copy-button.compact { color: var(--moss); }.join-card.featured .copy-button { color: #e0c17d; }
.tip { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--moss); background:#dfe9df; padding: 7px 9px; }
.notice { margin-top: 30px; background: #e9e3d5; display: flex; gap: 18px; padding: 20px 24px; border-left: 3px solid var(--gold); }.notice svg { color: var(--gold); flex: 0 0 auto; }.notice div { display:flex; flex-direction:column; gap:4px; }.notice span { color:var(--muted); font-size:13px; line-height:1.5; }
.notice-glyph { width: 22px; height: 22px; border: 1px solid var(--gold); color: var(--gold) !important; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; }

.dark-section { max-width: none; background: #202d24; color: #fff; padding-left: max(5vw,calc((100vw - 1240px)/2 + 5vw)); padding-right: max(5vw,calc((100vw - 1240px)/2 + 5vw)); }
.dark-section .section-heading p { color:#acb7ae; max-width: 600px; margin-top: 14px; }.dark-section .section-index { color:#d8b779; }
.journey { border-top: 1px solid rgba(255,255,255,.15); }
.journey-step { display:grid; grid-template-columns: 80px 1fr; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.15); transition: background .2s, padding .2s; }
.journey-step:hover { background: rgba(255,255,255,.035); padding-left: 15px; }.roman { font-family:'Newsreader',serif; font-size:31px; font-style:italic; color:#d8b779; }.journey-step h3 { margin:0 0 8px; font-size:22px; }.journey-step p { color:#b4c0b6; margin:0; line-height:1.6; max-width:750px; }.journey-step small { display:block; color:#d8b779; margin-top:10px; text-transform:uppercase; letter-spacing:.12em; }

.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.category-tabs { display:flex; flex-wrap:wrap; gap:5px; }.category-tabs button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 14px; cursor:pointer; font-size:12px; }.category-tabs button.active { color:#fff; background:var(--moss); border-color:var(--moss); }
.search { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--ink); padding:8px 0; }.search input { border:0; outline:0; background:transparent; width:190px; }
.mod-list { border-top:1px solid var(--line); }.mod-card { border-bottom:1px solid var(--line); }.mod-card-head { width:100%; display:grid; grid-template-columns:50px 1fr 22px; gap:18px; align-items:center; padding:24px 5px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.mod-icon { width:43px; height:43px; display:grid; place-items:center; background:#e0e6dc; color:var(--moss); }.mod-icon.rust { background:#eee0d7;color:var(--rust); }.mod-icon.blue {background:#dce8e9;color:var(--blue)}.mod-icon.violet{background:#e7e1ed;color:var(--violet)}.mod-icon.gold{background:#ece3ce;color:#9b722e}
.mod-icon { font-family: Georgia, serif; font-size: 20px; }
.mod-title-wrap { display:grid; grid-template-columns:minmax(175px,240px) 1fr; column-gap:24px; align-items:center; }.mod-title-wrap .eyebrow { grid-column:1; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }.mod-title-wrap strong { grid-column:1; font-size:18px; }.mod-title-wrap > span:last-child { grid-column:2; grid-row:1/3; color:var(--muted); font-size:14px; line-height:1.4; }
.chevron { transition:transform .25s; }.mod-card.open .chevron { transform:rotate(180deg); }.mod-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }.mod-card.open .mod-detail { grid-template-rows:1fr; }.mod-detail-inner { overflow:hidden; padding:0 70px; }.mod-card.open .mod-detail-inner { padding-bottom:28px; }
.mod-detail-inner p { color:var(--muted); line-height:1.7; max-width:800px; }.mod-detail-inner h4 { font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin:20px 0 10px; }.mod-detail-inner ul { list-style:none; padding:0; margin:0 0 20px; }.mod-detail-inner li { display:flex; gap:8px; align-items:flex-start; color:#4d564e; font-size:13px; padding:4px 0; }.mod-detail-inner li svg { color:var(--moss); margin-top:2px; flex:0 0 auto; }.mod-detail-inner a { display:inline-flex; gap:6px; align-items:center; color:var(--moss); font-size:12px; font-weight:700; }.empty-state { padding:50px; text-align:center; color:var(--muted); }

.command-section { padding-top:50px; }.command-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.command-row { display:grid; grid-template-columns:24px minmax(155px,.7fr) 1fr 34px; gap:14px; align-items:center; min-height:82px; padding:16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.command-row > svg { color:var(--gold); }.command-row code { font-weight:700; }.command-row p { font-size:12px; color:var(--muted); line-height:1.4; }
.command-glyph { color: var(--gold); font-family: monospace; font-weight: 700; }
.crossplay-section { padding-top:45px; }.crossplay-card { background:#cfd9cd; padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:70px; position:relative; overflow:hidden; }.crossplay-card:after { content:''; position:absolute; width:380px;height:380px;border:1px solid rgba(23,36,27,.12);border-radius:50%;right:-210px;bottom:-240px;box-shadow:0 0 0 55px rgba(23,36,27,.04),0 0 0 110px rgba(23,36,27,.025); }.crossplay-card h2 { font-size:clamp(35px,4vw,55px);line-height:1;margin:15px 0 22px;letter-spacing:-.045em; }.crossplay-card p { line-height:1.7;color:#526057; }.platform-list { position:relative;z-index:1; }.platform-list > div { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(23,36,27,.16); }.platform-list svg { color:var(--moss);flex:0 0 auto }.platform-list span { display:flex;flex-direction:column;font-size:12px;color:#5b685f;gap:4px }.platform-list strong { color:var(--ink);font-size:14px; }
.platform-list > div > b { color: var(--moss); width: 20px; flex: 0 0 auto; }
.faq-section { padding-top:45px; }.faq-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 50px; }.faq-grid details { border-top:1px solid var(--line);padding:0; }.faq-grid details:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }.faq-grid summary { display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-weight:700;padding:21px 0;font-size:14px; }.faq-grid summary::-webkit-details-marker { display:none }.faq-grid details[open] summary svg { transform:rotate(180deg) }.faq-grid summary svg { transition:transform .2s }.faq-grid details p { color:var(--muted);font-size:13px;line-height:1.65;margin:0 35px 22px 0; }
footer { background:#17241b;color:#fff;min-height:180px;padding:45px 5vw;display:flex;align-items:center;justify-content:space-between;gap:30px; }footer p { color:#8f9d92;font-size:12px; }footer>a { color:#d8b779;font-size:12px;text-decoration:none; }

@media (max-width: 900px) {
  .topbar nav { display:none; position:absolute;top:70px;left:0;right:0;background:#17241b;padding:18px 5vw 24px;flex-direction:column;border-top:1px solid rgba(255,255,255,.1); }.topbar nav.open{display:flex}.menu-button{display:block}.version-pill{display:none}
  .hero { padding-top:70px; }.hero-content { grid-template-columns:1fr; }.server-card { max-width:560px; }.hero-stats { grid-template-columns:repeat(2,1fr); margin-top:60px; }.hero-stats div { border-top:1px solid rgba(255,255,255,.1); }
  .section-heading.split { grid-template-columns:1fr; }.join-grid { grid-template-columns:1fr; }.join-card.featured { transform:none; }.join-card { min-height:280px; }
  .mod-title-wrap { grid-template-columns:1fr; }.mod-title-wrap > span:last-child { grid-column:1;grid-row:auto;margin-top:5px }.command-grid,.faq-grid { grid-template-columns:1fr; }.faq-grid details:nth-last-child(2){border-bottom:0}.crossplay-card{grid-template-columns:1fr;gap:25px;padding:42px}.command-row{grid-template-columns:22px minmax(140px,.8fr) 1fr 32px}
}
@media (max-width: 600px) {
  .topbar { padding:0 18px }.hero { padding:55px 20px 0; min-height:auto }.hero h1 { font-size:50px }.hero-cta { flex-direction:column;align-items:stretch }.server-address{padding:27px 20px 20px}.server-address strong{font-size:22px}.server-address .copy-button{position:static;margin-top:13px}.server-details{grid-template-columns:1fr 1fr}.server-details div:last-child{display:none}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats div{flex-direction:column;gap:2px}.hero-stats strong{font-size:23px}.hero-stats span{font-size:9px}
  .section { padding:78px 20px }.section-heading h2{font-size:39px}.filter-bar{align-items:stretch;flex-direction:column}.search input{width:100%}.mod-card-head{grid-template-columns:43px 1fr 18px;gap:12px}.mod-detail-inner{padding:0 5px}.command-row{grid-template-columns:20px 1fr 30px;gap:10px}.command-row p{grid-column:2/4;margin:0}.crossplay-card{padding:32px 24px;margin:0 -4px}.faq-grid{gap:0}footer{align-items:flex-start;flex-direction:column}.notice{align-items:flex-start}
}