:root { --felt:#073c2a; --felt-deep:#02271d; --ink:#f5f1e6; --muted:#c2c8b9; --paper:#eeeade; --paper-ink:#14241c; --gold:#f2bd00; --cyan:#4bc7d3; --line:rgba(233,230,217,.22); --panel:#062b29; --font-display:Georgia,'Times New Roman',serif; --font-body:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(ellipse at 25% 0%,#0a5a3d 0%,var(--felt) 42%,var(--felt-deep) 100%); color:var(--ink); font:16px/1.6 var(--font-body); } a { color:inherit; } img { display:block; max-width:100%; } button { font:inherit; } .wrap { width:min(1160px,calc(100% - 48px)); margin-inline:auto; } .sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:absolute; left:-9999px; z-index:20; } .skip-link:focus { left:20px; top:20px; background:var(--gold); color:#111; padding:8px 12px; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; z-index:2; border-bottom:1px solid var(--line); } .wordmark { font-family:var(--font-display); font-size:1.45rem; font-weight:900; letter-spacing:-.08em; text-decoration:none; white-space:nowrap; } .wordmark span { color:var(--gold); } nav { display:flex; gap:26px; } nav a,.site-footer a { color:var(--muted); text-decoration:none; font-size:.88rem; } nav a:hover,.site-footer a:hover,nav a[aria-current='page'] { color:var(--ink); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:50px; padding:.7rem 1.15rem; border:2px solid #d9af00; border-radius:4px; color:#111; background:var(--gold); box-shadow:4px 4px 0 rgba(0,0,0,.35); text-decoration:none; font-weight:800; } .button:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(0,0,0,.35); } .button-small { min-height:38px; font-size:.82rem; }
.hero { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,7vw,96px); align-items:center; min-height:calc(100vh - 96px); padding-block:80px; position:relative; } .eyebrow,.article-meta { margin:0 0 12px; color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.13em; } .status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#7cca67; box-shadow:0 0 0 3px rgba(124,202,103,.2); } .status-waiting { background:var(--gold); box-shadow:0 0 0 3px rgba(242,189,0,.16); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--font-display); line-height:.97; } h1 { max-width:700px; margin-bottom:28px; font-size:clamp(3.4rem,6vw,6.7rem); letter-spacing:-.065em; } h1 em { color:var(--gold); font-style:normal; } .lede { max-width:560px; color:var(--muted); font-size:1.1rem; } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:32px; } .text-link,.card-link { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:3px; } .text-link:hover,.card-link:hover { color:var(--gold); } .microcopy,.gallery-note { color:var(--muted); font-size:.78rem; margin-top:25px; }
.framed { margin:0; padding:12px; background:#6d3c20; border:2px solid #b47d43; box-shadow:14px 14px 0 rgba(0,0,0,.25); transform:rotate(1.3deg); } .framed img { border:2px solid #2f1c12; aspect-ratio:16 / 9; object-fit:cover; } .image-button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; } .image-button:hover img,.image-button:focus-visible img { filter:brightness(1.08); } figcaption { color:#ead9bd; padding:10px 4px 1px; font-size:.75rem; }
.section { padding-block:120px; position:relative; } .section-heading h2,.archive-heading h2 { margin-bottom:0; font-size:clamp(2.4rem,4vw,4.3rem); letter-spacing:-.05em; } .game-intro { border-top:1px solid var(--line); } .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:55px; } .steps article { border-top:3px solid var(--gold); padding-top:18px; } .steps span,.rival-card span { color:var(--cyan); font-size:.78rem; font-weight:800; letter-spacing:.08em; } .steps h3 { margin:10px 0 13px; font-size:1.65rem; } .steps p,.split-heading > p,.creator p,.status-grid p { color:var(--muted); }
.gallery-section,.journal-section { background:rgba(0,13,11,.42); border-block:1px solid var(--line); } .split-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; } .split-heading > p { max-width:360px; margin:0; } .gallery { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-top:52px; } .gallery-item { position:relative; overflow:hidden; min-height:220px; padding:0; border:1px solid var(--line); background:#031e16; color:var(--ink); cursor:zoom-in; text-align:left; } .gallery-item.wide { grid-row:span 2; } .gallery-item img { width:100%; height:100%; min-height:inherit; object-fit:cover; transition:transform .35s ease; } .gallery-item:hover img,.gallery-item:focus-visible img { transform:scale(1.04); } .gallery-item span { position:absolute; inset:auto 0 0; padding:40px 16px 13px; background:linear-gradient(transparent,rgba(0,0,0,.8)); font-weight:800; }
.rival-grid,.article-grid,.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; } .rival-card { min-height:280px; display:flex; flex-direction:column; justify-content:end; overflow:hidden; background:linear-gradient(160deg,#123f3b,#071e1d); border:1px solid var(--line); } .rival-card img { width:100%; height:165px; object-fit:contain; object-position:center bottom; image-rendering:pixelated; background:radial-gradient(circle,#31534d 0%,transparent 68%); } .rival-card div { padding:16px 20px 22px; border-top:1px solid var(--line); } .rival-card h3 { font-size:1.65rem; margin:7px 0 8px; } .rival-card p { color:var(--muted); font-size:.88rem; margin:0; }
.status-section { border-top:1px solid var(--line); } .status-grid article { min-height:185px; padding:28px; border:1px solid var(--line); background:rgba(5,42,36,.72); } .status-grid h3 { margin:14px 0 10px; font-size:1.45rem; } .article-card { min-height:280px; display:flex; flex-direction:column; align-items:start; padding:28px; border:1px solid var(--line); background:rgba(5,42,36,.85); } .featured-card { background:var(--paper); color:var(--paper-ink); } .featured-card .article-meta { color:#62470f; } .featured-card .card-link { color:var(--paper-ink); } .featured-card .card-link:hover { color:#725600; } .article-card h2,.article-card h3 { margin-bottom:15px; font-size:2rem; } .article-card h2 a,.article-card h3 a { text-decoration:none; } .article-card > p:not(.article-meta) { color:inherit; opacity:.78; } .card-link { margin-top:auto; }
.creator { display:grid; grid-template-columns:1fr 1fr; gap:70px; border-bottom:1px solid var(--line); } .creator > div:last-child { max-width:490px; font-size:1.08rem; } .journal-hero { max-width:920px; } .journal-archive { padding-top:0; } .archive-grid { grid-template-columns:repeat(2,1fr); } .archive-grid .article-card { min-height:255px; } .article-page { max-width:820px; margin-inline:auto; } .article-page h1 { font-size:clamp(3rem,6vw,5.8rem); } .article-figure { margin:48px 0; transform:none; } .article-content { max-width:720px; color:var(--ink); font-size:1.1rem; line-height:1.78; } .article-content p + p { margin-top:1.5em; } .article-pagination { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:64px; padding-top:25px; border-top:1px solid var(--line); } .article-pagination a:last-child { text-align:right; } .article-pagination a { color:var(--ink); font-weight:700; text-decoration:none; } .article-pagination a:hover { color:var(--gold); }
.site-footer { padding-block:32px; position:relative; } .site-footer .wrap { display:flex; align-items:center; gap:23px; flex-wrap:wrap; } .site-footer p,.site-footer span { margin:0; color:var(--muted); font-size:.78rem; } .site-footer span { margin-left:auto; } dialog { width:min(1100px,94vw); max-width:min(1100px,94vw); max-height:92vh; border:1px solid #a88f64; padding:10px; background:#201a15; color:var(--ink); } dialog::backdrop { background:rgba(0,0,0,.82); } dialog img { max-height:75vh; margin-inline:auto; } dialog p { margin:8px 4px 2px; } .dialog-bar { display:flex; justify-content:end; min-height:34px; } .dialog-close { border:0; border-radius:50%; width:34px; height:34px; color:#111; background:var(--paper); font-size:1.6rem; line-height:1; cursor:pointer; } :focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .button:hover { transform:none; } .gallery-item:hover img,.gallery-item:focus-visible img { transform:none; } }
@media (max-width:760px) { .wrap { width:min(100% - 32px,1160px); } .site-header { min-height:auto; padding-block:18px; flex-wrap:wrap; } nav { order:3; width:100%; overflow-x:auto; gap:20px; padding-bottom:3px; } .site-header .button { margin-left:auto; } .hero { grid-template-columns:1fr; min-height:auto; padding-block:70px; } h1 { font-size:clamp(3.1rem,15vw,5rem); } .framed { transform:none; } .section { padding-block:76px; } .steps,.rival-grid,.article-grid,.status-grid,.archive-grid { grid-template-columns:1fr; } .split-heading,.creator { display:block; } .split-heading > p { margin-top:20px; } .gallery { grid-template-columns:1fr; } .gallery-item,.gallery-item.wide { min-height:210px; grid-row:auto; } .creator > div:last-child { margin-top:30px; } .article-pagination { grid-template-columns:1fr; } .article-pagination a:last-child { text-align:left; } .site-footer span { width:100%; margin-left:0; } }