:root {
	--ink:#000080;
	--muted:#333;
	--paper:#c0c0c0;
	--line:#808080;
	--lime:#ffff00;
	--orange:#800000;
	--blue:#0000ee;
	--card:#fff;
	--mono:'Courier New',monospace;
	--sans:'Times New Roman',serif;
}
* {
	box-sizing:border-box;
}
html {
	scroll-behavior:smooth;
}
body {
	margin:0;
	color:var(--ink);
	background-color:var(--paper);
	background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
	background-size:42px 42px;
	font-family:var(--sans);
}
a {
	color:inherit;
	text-decoration:none;
}
.wrap {
	width:min(1100px,calc(100% - 40px));
	margin:0 auto;
}
.topbar {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:24px 0;
	border-bottom:1px solid var(--ink);
}
.brand {
	font:500 13px var(--mono);
	letter-spacing:.08em;
}
.brand b {
	display:inline-block;
	padding:5px 8px;
	margin-right:8px;
	background:var(--ink);
	color:var(--lime);
}
nav {
	display:flex;
	gap:22px;
	font:500 11px var(--mono);
	text-transform:uppercase;
}
nav a:hover {
	color:var(--orange);
}
.page-hero {
	padding:100px 0 80px;
	border-bottom:1px solid var(--ink);
	position:relative;
}
.eyebrow {
	color:var(--orange);
	font:500 11px var(--mono);
	letter-spacing:.14em;
	text-transform:uppercase;
}
h1 {
	max-width:850px;
	margin:18px 0 22px;
	font-size:clamp(52px,9vw,108px);
	line-height:.86;
	letter-spacing:-.07em;
}
h1 span {
	color:var(--blue);
}
.intro {
	max-width:620px;
	color:#4b535b;
	font-size:18px;
	line-height:1.6;
}
section {
	padding:75px 0;
	border-bottom:1px solid var(--ink);
}
h2 {
	margin:8px 0 28px;
	font-size:clamp(35px,6vw,65px);
	line-height:.95;
	letter-spacing:-.06em;
}
h3 {
	font-size:25px;
	margin:0 0 9px;
	letter-spacing:-.04em;
}
p {
	line-height:1.6;
}
.button {
	display:inline-flex;
	padding:13px 17px;
	border:1px solid var(--ink);
	background:var(--lime);
	box-shadow:4px 4px 0 var(--ink);
	font:500 11px var(--mono);
	text-transform:uppercase;
}
.button:hover {
	transform:translate(3px,3px);
	box-shadow:1px 1px 0 var(--ink);
}
.detail-grid {
	display:grid;
	grid-template-columns:1fr 1.3fr;
	gap:70px;
	align-items:start;
}
.portrait {
	width:100%;
	max-width:340px;
	aspect-ratio:1;
	object-fit:cover;
	border:1px solid var(--ink);
	box-shadow:10px 10px 0 var(--orange);
}
.lead-copy {
	font-size:clamp(22px,3vw,34px);
	line-height:1.2;
	letter-spacing:-.035em;
	margin-top:0;
}
.lead-copy strong {
	color:var(--blue);
}
.facts {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1px;
	margin-top:30px;
	background:var(--ink);
	border:1px solid var(--ink);
}
.fact {
	padding:16px;
	background:var(--card);
}
.fact b {
	display:block;
	font-size:22px;
	margin-bottom:6px;
}
.fact span {
	color:var(--muted);
	font:11px var(--mono);
}
.project-grid {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:14px;
}
.project {
	display:flex;
	gap:18px;
	padding:24px;
	border:1px solid var(--ink);
	background:var(--card);
	min-height:180px;
}
.project:nth-child(2n) {
	box-shadow:6px 6px 0 var(--lime);
}
.project:nth-child(2n+1) {
	box-shadow:6px 6px 0 var(--blue);
}
.project-mark {
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	flex:none;
	background:var(--orange);
	color:#fff;
	font-size:22px;
}
.project p {
	color:var(--muted);
	font:12px/1.6 var(--mono);
	margin:0;
}
.game-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
}
.game {
	position:relative;
	min-height:430px;
	overflow:hidden;
	background:var(--ink);
	border:1px solid var(--ink);
}
.game img {
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.82;
}
.game:last-child img {
	object-position:center;
}
.game-caption {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	padding:70px 24px 24px;
	color:#fff;
	background:linear-gradient(transparent,rgba(0,0,0,.9));
}
.game-caption h3 {
	font-size:42px;
	margin:5px 0;
}
.game-caption p {
	color:var(--lime);
	font:11px var(--mono);
}
.server-list {
	border-top:1px solid var(--ink);
}
.server {
	display:grid;
	grid-template-columns:55px 1fr auto;
	gap:22px;
	padding:25px 0;
	border-bottom:1px solid var(--line);
	align-items:center;
}
.server-number {
	color:var(--orange);
	font:22px var(--mono);
}
.server p {
	color:var(--muted);
	font:12px/1.6 var(--mono);
}
.address {
	padding:10px 12px;
	background:var(--ink);
	color:var(--lime);
	font:11px var(--mono);
}
footer {
	display:flex;
	justify-content:space-between;
	padding:28px 0 42px;
	color:var(--muted);
	font:11px var(--mono);
}
footer b {
	color:var(--ink);
}
@media (max-width:720px) {
	.wrap {
	width:min(100% - 28px,560px);
}
nav {
	gap:10px;
	font-size:9px;
}
.page-hero {
	padding:62px 0 55px;
}
.detail-grid,.game-layout,.project-grid {
	grid-template-columns:1fr;
	gap:34px;
}
.facts {
	grid-template-columns:1fr;
}
.server {
	grid-template-columns:35px 1fr;
	gap:10px;
}
.address {
	grid-column:2;
	justify-self:start;
	max-width:100%;
	overflow-wrap:anywhere;
}
footer {
	display:block;
	line-height:2;
}

}
/* 1990s browser skin */
body {
	color:#000;
	background-color:var(--paper);
	background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 1px,transparent 1px,transparent 3px);
	font-family:var(--sans);
}
a {
	color:var(--blue);
	text-decoration:underline;
}
a:visited {
	color:var(--ink);
}
a:hover {
	color:#f00;
	background:var(--lime);
}
.wrap {
	width:min(900px,calc(100% - 24px));
}
.topbar {
	padding:8px;
	margin-top:10px;
	background:#000080;
	border:3px outset #d0d0d0;
	color:#fff;
}
.brand {
	color:#fff;
	font:bold 13px var(--mono);
}
.brand b {
	padding:2px 5px;
	margin-right:5px;
	color:#000080;
	background:#fff;
}
nav {
	gap:14px;
}
nav a, nav a:visited {
	color:#fff;
	text-decoration:underline;
}
nav a:hover {
	color:#000;
}
.page-hero {
	padding:42px 18px 32px;
	background:#fff;
	border:3px ridge #d0d0d0;
}
.eyebrow {
	color:var(--orange);
	font:bold 12px var(--mono);
	letter-spacing:0;
}
h1 {
	margin:14px 0 18px;
	color:var(--ink);
	font:bold clamp(42px,8vw,76px) var(--sans);
	letter-spacing:0;
	text-shadow:2px 2px #808080;
}
h1 span,h2 span {
	color:var(--orange);
}
.intro {
	color:#000;
	font:16px/1.45 var(--mono);
}
section {
	padding:38px 0;
	border-bottom:2px groove #fff;
}
h2 {
	color:var(--ink);
	font:bold clamp(32px,6vw,54px) var(--sans);
	letter-spacing:0;
	text-shadow:1px 1px #fff;
}
h3 {
	font:bold 22px var(--sans);
	letter-spacing:0;
}
p {
	line-height:1.45;
}
.button {
	color:#000;
	background:#c0c0c0;
	border:3px outset #fff;
	box-shadow:none;
	font:bold 12px var(--mono);
	text-decoration:none;
}
.button:visited {
	color:#000;
}
.button:hover {
	transform:none;
	box-shadow:none;
	border-style:inset;
}
.detail-grid {
	gap:36px;
}
.portrait {
	border:3px inset #fff;
	box-shadow:8px 8px 0 var(--ink);
}
.lead-copy {
	color:var(--ink);
	letter-spacing:0;
}
.lead-copy strong {
	color:var(--orange);
}
.facts {
	background:#000;
	border:2px inset #fff;
}
.fact {
	background:#fff;
	border:1px solid #808080;
}
.fact b {
	color:var(--ink);
}
.project-grid {
	gap:18px;
}
.project {
	padding:16px;
	border:3px ridge #fff;
	background:#fff;
}
.project:nth-child(2n),.project:nth-child(2n+1) {
	box-shadow:none;
}
.project-mark {
	background:var(--ink);
	border:2px outset #fff;
}
.game {
	border:3px ridge #fff;
}
.game-caption {
	background:rgba(0,0,128,.9);
}
.game-caption h3 {
	font:bold 34px var(--sans);
}
.game-caption p {
	color:var(--lime);
}
.server-list {
	border-top:2px groove #fff;
}
.server {
	border-bottom:2px groove #fff;
}
.server-number {
	color:var(--orange);
}
.address {
	background:#000;
	color:var(--lime);
	border:2px inset #fff;
}
footer {
	padding:18px 0 30px;
}
footer b {
	color:var(--ink);
}