@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink: #08090b; --paper: #e8e4dc; --muted: #a7a29a; --blood: #b71d25; --line: rgba(232,228,220,.16); --panel: #111317; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font: 400 16px/1.65 Montserrat, Arial, sans-serif; }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; padding: 10px 14px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 16px; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font: 700 11px/1 Montserrat, sans-serif; letter-spacing: .13em; text-decoration: none; }
.brand img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.site-header nav { display: flex; gap: 24px; }
.site-header nav a { color: rgba(255,255,255,.8); font: 500 11px/1 DM Mono, monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover, .legal a:hover { color: #fff; }
.hero { position: relative; display: grid; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(4,5,7,.9) 0%, rgba(4,5,7,.38) 52%, rgba(4,5,7,.25)), linear-gradient(0deg, rgba(4,5,7,.78), transparent 50%), url('assets/game-splash.png') center/cover; filter: saturate(.72) contrast(1.08); transform: scale(1.02); }
.hero-noise { position: absolute; z-index: -1; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.hero-content { align-self: end; padding-block: 140px 145px; }
.eyebrow, .section-label { color: #d4c9c2; font: 500 11px/1.2 DM Mono, monospace; letter-spacing: .15em; }
.eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; }
.eyebrow span { display: block; width: 28px; height: 1px; background: var(--blood); }
.hero-logo { display: block; width: min(290px, 62vw); margin: 0 0 26px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin-bottom: 18px; color: #fff; font: 600 clamp(40px, 6vw, 82px)/.98 'Playfair Display', Georgia, serif; letter-spacing: -.045em; }
.hero-copy { max-width: 540px; color: rgba(255,255,255,.8); font-size: clamp(15px, 1.4vw, 18px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 48px; padding: 13px 19px; border: 1px solid transparent; font: 600 11px/1 Montserrat, sans-serif; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: .2s ease; }
.button-primary { background: var(--blood); color: #fff; }.button-primary:hover { background: #d32731; transform: translateY(-2px); }
.button-ghost { border-color: rgba(255,255,255,.4); color: #fff; }.button-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.scroll-cue { position: absolute; right: 34px; bottom: 32px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.58); font: 10px/1 DM Mono, monospace; letter-spacing: .12em; writing-mode: vertical-rl; }.scroll-cue span { width: 1px; height: 35px; background: var(--blood); }
.section { padding-block: 124px; }.manifesto { border-bottom: 1px solid var(--line); }.manifesto-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 9vw, 150px); align-items: start; }.manifesto h2, .community h2 { margin-bottom: 0; font: 600 clamp(36px, 4.4vw, 62px)/1.06 'Playfair Display', Georgia, serif; letter-spacing: -.04em; }.manifesto-grid p { color: var(--muted); }.manifesto-grid p + p { color: #d8d1c8; }
.features { background: #0e1013; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.feature-grid article { min-height: 250px; padding: 34px; background: #0e1013; }.feature-number { color: var(--blood); font: 500 12px DM Mono, monospace; }.feature-grid h3 { margin: 50px 0 10px; font-size: 19px; }.feature-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.community { display: grid; grid-template-columns: 1fr .88fr; gap: clamp(40px, 9vw, 140px); }.community > div > p:not(.section-label) { max-width: 480px; color: var(--muted); }.contact-form { display: grid; gap: 17px; padding: 30px; border: 1px solid var(--line); background: var(--panel); }.contact-form label { display: grid; gap: 7px; color: #c9c2ba; font: 500 10px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #363940; border-radius: 0; outline: none; padding: 12px; color: #fff; background: #090a0c; font: inherit; }.contact-form input:focus, .contact-form textarea:focus { border-color: #c23c43; }.contact-form .button { justify-self: start; margin-top: 5px; }
.site-footer { border-top: 1px solid var(--line); }.footer-inner { display: flex; justify-content: space-between; gap: 20px; padding-block: 24px; color: #8d8984; font: 10px/1.4 DM Mono, monospace; }.footer-inner p { margin: 0; }.footer-inner a { color: #c7c0b9; }
.privacy-page { background: radial-gradient(circle at 60% -20%, #282326, var(--ink) 47%); }.privacy-page .site-header { position: relative; }.legal { max-width: 860px; padding-block: 80px 115px; }.legal h1 { margin: 14px 0 8px; }.legal-date { margin-bottom: 45px; color: var(--muted); font: 11px DM Mono, monospace; }.legal-callout { margin-bottom: 52px; padding: 17px 20px; border-left: 3px solid var(--blood); color: #cfc8c0; background: rgba(183,29,37,.09); font-size: 14px; }.legal section { margin-block: 35px; }.legal h2 { margin-bottom: 10px; color: #fff; font: 600 24px/1.2 'Playfair Display', Georgia, serif; }.legal section p { color: #b8b3ac; }.legal a { color: #e5d8d3; }
@media (max-width: 720px) { .site-header { width: min(100% - 32px, 1280px); padding: 16px 0; }.brand span, .site-header nav a:not(:last-child) { display: none; }.site-header nav { gap: 12px; }.hero-content { padding-block: 130px 100px; }.scroll-cue { display: none; }.section { padding-block: 78px; }.manifesto-grid, .community { grid-template-columns: 1fr; gap: 30px; }.feature-grid { grid-template-columns: 1fr; }.feature-grid article { min-height: 195px; }.feature-grid h3 { margin-top: 35px; }.footer-inner { flex-direction: column; }.legal { padding-block: 50px 75px; } }
