@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

html, body { overflow-x:hidden; }
.hero { position:relative; }

:root { --ink:#090b0e; --ink-2:#0e1217; --panel:#121820; --line:#29323d; --text:#f3f0e9; --muted:#aeb7bd; --yellow:#ffbc27; --orange:#ff8a1e; --mint:#9de0ca; --header:76px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 22px); } body { margin:0; color:var(--text); background:var(--ink); font:16px/1.55 "Space Grotesk",sans-serif; } a { color:inherit; text-decoration:none; } p { margin:0; } h1,h2,h3,h4 { margin:0; line-height:.98; letter-spacing:-.055em; } h1 { max-width:760px; font-size:clamp(3.8rem,8.3vw,8.6rem); font-weight:600; } h2 { font-size:clamp(2.7rem,5.2vw,5.5rem); font-weight:500; } h3 { font-size:clamp(1.7rem,2.5vw,2.7rem); font-weight:500; } h4 { font-size:1rem; letter-spacing:-.02em; } em { color:var(--yellow); font-style:normal; } .site-header { position:fixed; z-index:10; inset:0 0 auto; height:var(--header); display:flex; align-items:center; justify-content:space-between; padding:12px clamp(22px,4vw,70px); background:rgb(9 11 14 / .9); border-bottom:1px solid rgb(255 255 255 / .1); backdrop-filter:blur(14px); } .brand img { display:block; width:min(244px,45vw); height:auto; } nav { display:flex; gap:clamp(18px,2.5vw,38px); color:#cbd1d3; font:500 .75rem/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; } nav a:hover { color:var(--yellow); } .menu-toggle { display:none; } main { overflow:hidden; } .hero { min-height:700px; padding-top:calc(var(--header) + 100px)!important; align-items:center; } .section-grid { display:grid; grid-template-columns:minmax(160px,.44fr) minmax(0,1.56fr); gap:clamp(35px,8vw,160px); padding:clamp(90px,12vw,180px) clamp(22px,8vw,150px); border-bottom:1px solid var(--line); } .hero-copy { position:relative; z-index:1; grid-column:1 / span 2; max-width:830px; } .kicker,.section-label,.status { font:500 .72rem/1.2 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; } .kicker { color:var(--yellow); margin-bottom:25px; } .lead { max-width:540px; margin-top:36px; color:var(--muted); font-size:clamp(1.1rem,1.8vw,1.4rem); } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:38px; } .button { padding:15px 20px; background:var(--yellow); color:#18140d; font-weight:700; } .button:hover { background:#ffd05d; } .button span,.quiet-link span,.contact a span { margin-left:8px; } .quiet-link { border-bottom:1px solid #687079; color:var(--text); padding-bottom:3px; } .quiet-link:hover { color:var(--yellow); border-color:var(--yellow); } .hero-signal { position:absolute; width:min(58vw,830px); aspect-ratio:1.37; right:-4vw; top:130px; border:1px solid #2c3740; background:linear-gradient(135deg,#111820 0%,#0b1015 70%); transform:rotate(-4deg); } .hero-signal > p { padding:18px; color:#78838a; font:.65rem "DM Mono",monospace; letter-spacing:.08em; } .signal-grid { position:absolute; inset:0; opacity:.34; background-image:linear-gradient(#26303a 1px,transparent 1px),linear-gradient(90deg,#26303a 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,black,transparent); } .pixel-core { position:absolute; top:38%; left:51%; display:grid; grid-template:repeat(2,58px)/repeat(2,58px); gap:5px; transform:translate(-50%,-50%); } .pixel-core i { background:linear-gradient(135deg,#ffdf67,#ff981a); box-shadow:0 0 40px #ff9a1d44; } .pixel-core i:nth-child(2) { opacity:.8; } .pixel-core i:nth-child(3) { opacity:.68; } .pixel-core i:nth-child(4) { opacity:.9; } .signal-readout { position:absolute; right:20px; bottom:20px; display:flex; gap:15px; color:#a5d7c8; font:.64rem "DM Mono",monospace; } .section-label { color:#89969d; padding-top:9px; } .about > div { max-width:760px; } .about .body-large { margin-top:32px; max-width:680px; color:#c3cbd0; font-size:clamp(1.08rem,1.7vw,1.4rem); } .games,.pledge,.contact { padding:clamp(90px,12vw,180px) clamp(22px,8vw,150px); border-bottom:1px solid var(--line); } .section-heading,.pledge-top { display:flex; justify-content:space-between; gap:30px; align-items:baseline; margin-bottom:50px; color:var(--muted); } .game-card { display:grid; grid-template-columns:1.05fr .95fr; min-height:500px; overflow:hidden; background:var(--panel); border:1px solid #35404a; } .game-art { position:relative; min-height:320px; overflow:hidden; background:radial-gradient(circle at 44% 34%,#47462f 0,#1e2625 25%,#11171c 60%); } .floor-line { position:absolute; right:-20%; bottom:17%; width:120%; height:12px; background:var(--yellow); box-shadow:0 0 25px #ffbc276b; transform:rotate(-7deg); } .crate { position:absolute; width:180px; height:180px; left:36%; bottom:22%; background:linear-gradient(135deg,#f9b927,#cb6014); outline:8px solid #172025; box-shadow:28px 28px 0 #0c1014; transform:rotate(9deg); } .bolt { position:absolute; width:33px; height:33px; background:var(--mint); box-shadow:0 0 0 7px #141d22; } .bolt-one { top:22%; left:22%; }.bolt-two { right:20%; top:37%; background:var(--orange); } .game-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(38px,7vw,100px); } .status { display:inline-block; color:#121009; background:var(--yellow); padding:7px 9px; margin-bottom:34px; } .game-content > p:not(.status):not(.kicker) { max-width:410px; margin:28px 0 34px; color:var(--muted); font-size:1.15rem; } .pledge { background:#0c1014; } blockquote { max-width:1120px; margin:0 0 66px; color:#e6e5de; font-size:clamp(1.65rem,3.2vw,3.5rem); line-height:1.15; letter-spacing:-.04em; } .pledge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .panel { padding:clamp(26px,4vw,52px); background:var(--panel); border:1px solid #303a44; } .panel-head { display:flex; align-items:start; justify-content:space-between; gap:15px; } .status-dot { color:var(--mint); font:.68rem "DM Mono",monospace; text-transform:uppercase; } .status-dot::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; background:var(--mint); border-radius:50%; } .total { margin:64px 0 40px; }.total span { color:#919ca3; font:.68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.total strong { display:block; margin:9px 0; font-size:clamp(3rem,5vw,5rem); letter-spacing:-.07em; }.total p,.note { color:var(--muted); font-size:.9rem; } dl { margin:0; } dl div { display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid #303a44; color:#9eaaaf; font-size:.84rem; } dd { margin:0; color:var(--text); text-align:right; }.note { margin-top:28px; }.timeline > h3 { margin:15px 0 39px; }.timeline ol { display:grid; gap:27px; margin:0; padding:0; list-style:none; }.timeline li { display:grid; grid-template-columns:50px 1fr; gap:14px; position:relative; }.timeline li:not(:last-child)::before { content:""; position:absolute; left:15px; top:32px; bottom:-29px; border-left:1px solid #4c5960; }.timeline b { color:var(--yellow); font:.8rem "DM Mono",monospace; }.timeline li:not(:first-child) b { color:#6a767d; }.timeline p { margin-top:5px; color:var(--muted); font-size:.88rem; }.faq { align-items:start; }.faq h2 { margin:20px 0 28px; }.faq > div > p:last-child { max-width:380px; color:var(--muted); }.faq-list { display:grid; gap:0; }.faq details { border-top:1px solid #35404a; padding:21px 0; }.faq details:last-child { border-bottom:1px solid #35404a; }.faq summary { cursor:pointer; display:flex; gap:16px; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:500; list-style:none; }.faq summary::-webkit-details-marker { display:none; }.faq summary span { color:var(--yellow); font:.72rem "DM Mono",monospace; padding-top:5px; }.faq details p { margin:19px 0 2px 37px; color:var(--muted); }.contact { background:linear-gradient(135deg,#11191e,#16140f); }.contact h2 { margin:22px 0 36px; }.contact > a { color:var(--yellow); font-size:clamp(1.4rem,3vw,3rem); font-weight:500; letter-spacing:-.04em; border-bottom:1px solid #8a6829; }.contact > p:last-child { max-width:390px; margin-top:28px; color:var(--muted); } footer { display:grid; grid-template-columns:1fr 2fr 1fr; gap:25px; align-items:center; padding:30px clamp(22px,4vw,70px); color:#98a1a7; font-size:.75rem; } footer img { width:180px; } footer p { text-align:center; } footer a { text-align:right; color:var(--text); }
@media (max-width:760px) { :root { --header:66px; } .site-header { padding-inline:20px; }.brand img { width:180px; }.menu-toggle { display:flex; align-items:center; gap:8px; padding:8px 0; border:0; background:transparent; color:var(--text); font:.7rem "DM Mono",monospace; text-transform:uppercase; }.menu-toggle span,.menu-toggle::before { content:""; width:16px; border-top:1px solid var(--yellow); }.menu-toggle[aria-expanded="true"] span { transform:rotate(45deg); }.menu-toggle[aria-expanded="true"]::before { position:absolute; transform:rotate(-45deg); } nav { display:none; position:absolute; top:calc(var(--header) - 1px); left:0; right:0; padding:25px 20px; background:#0e1217; border-bottom:1px solid var(--line); flex-direction:column; gap:22px; } nav.is-open { display:flex; }.section-grid { grid-template-columns:1fr; gap:30px; padding:80px 22px; }.hero { min-height:720px; padding-top:150px!important; }.hero-copy { grid-column:auto; }.hero-signal { width:130vw; top:385px; right:-33vw; }.pixel-core { grid-template:repeat(2,42px)/repeat(2,42px); }.games,.pledge,.contact { padding:80px 22px; }.section-heading,.pledge-top { align-items:flex-start; flex-direction:column; margin-bottom:35px; }.game-card,.pledge-grid { grid-template-columns:1fr; }.game-art { min-height:290px; }.game-content { padding:42px 30px 48px; }.panel { padding:28px 22px; }blockquote { margin-bottom:43px; }.faq { gap:15px; }.faq details p { margin-left:0; }.contact { min-height:420px; } footer { grid-template-columns:1fr; padding:30px 22px; } footer p,footer a { text-align:left; } }