/* DOS-AGE's about page (Figma "about", 651:63473: its 1920x1080 and 1200x800 frames): one
   scroll, a screen to each part (hero, synopsis, gameplay), then about and the footer. Figma's
   colours; its MEKMODE Text drawn from the font, pixel for pixel (.mm: an SVG in currentColor,
   tools/dos-age-text.py, a pixel and a half to each of the font's, about Figma's 13px and 16px);
   MEKZANTINE as Figma has it. */
@font-face { font-family: "MEKZANTINE Mono"; src: url("/assets/fonts/MEKZANTINE-Mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MEKZANTINE"; src: url("/assets/fonts/MEKZANTINE-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --dark1: #071324;
  --gold: #ffd23f;        /* gold-real */
  --gold-muted: #917d3c;
  --blue3: #306082;
  --blue4: #5b6ee1;
  --bw5: #9badb7;
  --bw6: #cbdbfc;
  --grey: #696a6a;
  --white: #fff;
  --text: ui-monospace, monospace;   /* (only what's typed in the e-mail field: the rest is .mm) */
  --mono: "MEKZANTINE Mono", ui-monospace, monospace;
  --serif: "MEKZANTINE", serif;
  --gutter: 56px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--dark1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* a screen to each part, so the scroll stops on each (one at a time, however hard the wheel's
   flicked), and on the footer at the bottom; only while each part's a screen (wider than 900px) */
@media (min-width: 901px) {
  html { scroll-snap-type: y mandatory; }
  main > section { scroll-snap-align: start; scroll-snap-stop: always; }
  .foot { scroll-snap-align: end; }
}
body { margin: 0; background: var(--dark1); color: var(--bw5); font: 12px/1.5 var(--text); overflow-x: clip; }
h1, h2, p { margin: 0; font-weight: normal; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* MEKMODE Text, as drawn (the words in .sr for screen readers) */
.mm { display: inline-block; vertical-align: top; }
.mm svg { display: block; }
.mm[hidden] { display: none; }

/* buttons: two lines of MEKMODE, the first its arrow and star (Figma's "↓        *") */
.btn { display: inline-flex; flex-direction: column; justify-content: center; padding: 6px 8px; background: var(--gold);
  color: var(--dark1); font: inherit; border: 0; border-radius: 0; text-align: left;
  transition: background-color 160ms, color 160ms; cursor: pointer; }
.btn.muted { background: var(--gold-muted); }
.btn.grey { background: var(--bw5); }
.btn.blue { background: var(--blue4); }
a.btn:hover, label.btn:hover { background: var(--white); }

/* the gold picture behind the hero and the footer (dos-age/art.png, tools/dos-age-art.py) */
.art { position: relative; isolation: isolate; }
.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad), url("/dos-age/art.png") center / cover no-repeat;
  image-rendering: pixelated; }


/* down the left, where you are (667:58344): the part in view at full, the rest at 30% */
.side { position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 36px;
  color: var(--bw5); }
.side a { display: flex; align-items: center; gap: 12px; opacity: 0.3; transition: opacity 160ms; }
.side a:hover, .side a[aria-current="true"] { opacity: 1; }
.side a > svg { width: 24px; height: 36px; fill: var(--bw5); flex: none; }

/* DOS, the cross of stat icons, AGE (651:63324) */
.logo { display: flex; align-items: flex-start; color: var(--gold); font: 111.924px/1 var(--mono); letter-spacing: 4.4769px; }
.logo span { margin-top: 4.74px; line-height: 0.82; }
.logo .cross { width: 79px; height: 118.5px; margin: 0 4px 0 0; fill: currentColor; flex: none; }
.logo .sr { margin: 0; }

.hero { --grad: radial-gradient(66.67% 100% at 50% 0, rgba(7, 19, 36, 0) 0, rgba(7, 19, 36, 0.8) 59.135%, var(--dark1) 100%);
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 96px; padding: 80px 16px; }
.hero .kicker { color: var(--gold); }
/* the halo round the head at the left (dos-age/halo.png: the picture's own, laid over it where it
   is), glowing in and out; still with reduced motion */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/dos-age/halo.png") center / cover no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.75)) drop-shadow(0 0 32px rgba(255, 210, 63, 0.45));
  opacity: 0; animation: halo 3.2s ease-in-out infinite alternate; }
@keyframes halo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; opacity: 0.6; } }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* the clips: the game recorded (dos-age/media/, see README), each in its box */
.clip { position: relative; background: var(--dark1); }
.clip video { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* synopsis (651:63337): the burning bush, and the pitch */
.synopsis { min-height: 100svh; height: 100svh; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; }
.synopsis .clip { height: 100%; aspect-ratio: 1000 / 1154; flex: none; max-width: calc(100% - 368px); }
/* (its edges fading into the page, as the mock's clip has them) */
.synopsis .clip video { object-fit: cover;
  --fade: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); -webkit-mask-composite: source-in; mask-composite: intersect; }
.synopsis .words { width: 320px; flex: none; display: flex; flex-direction: column; gap: 18px; color: var(--bw5); }
.synopsis h2 { width: 213px; margin-bottom: 30px; color: var(--blue3); font: 24px/1.4 var(--mono); letter-spacing: 0.96px; }

/* gameplay (657:63868): what there is, each with its clip */
.gameplay { position: relative; isolation: isolate; min-height: 100svh; height: 100svh; display: flex; align-items: center; justify-content: center;
  gap: 56px; padding: 100px var(--gutter); }
.gameplay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/dos-age/art-grey.png") center / cover no-repeat;
  image-rendering: pixelated; opacity: 0.2; mix-blend-mode: screen; }
.gameplay::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--dark1), rgba(7, 19, 36, 0) 100px, rgba(7, 19, 36, 0) calc(100% - 100px), var(--dark1)); }
.steps { list-style: none; margin: 0 0 0 var(--steps-in, 110px); padding: 0; display: flex; flex-direction: column; gap: 40px; width: 200px; flex: none; }
.steps button { position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; color: var(--bw5); font: inherit;
  letter-spacing: inherit; text-align: left; cursor: pointer; transition: color 160ms; }
.steps path.b { fill: var(--grey); transition: fill 160ms; }
.steps button:hover { color: var(--bw6); }
.steps button[aria-selected="true"] { color: var(--white); }
.steps button[aria-selected="true"] path.b { fill: var(--gold); }
/* (the arrow beside the one picked: Figma's, 12 x 9 turned to point right) */
.steps button[aria-selected="true"]::before { content: ""; position: absolute; left: -19px; top: 6px; width: 9px; height: 12px; background: var(--gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gameplay .clip { flex: 1 1 0; height: 100%; max-height: 700px; max-width: 1000px; padding: 64px; display: flex; justify-content: center; }
.gameplay .clip video { width: auto; max-width: 100%; aspect-ratio: 1; }

/* about (672:58633): who we are, the newsletter and Ko-fi, and the game played */
.about { min-height: 100svh; height: 100svh; display: flex; align-items: center; justify-content: center; gap: 32px; padding: var(--gutter); }
.team { width: 315px; flex: none; display: flex; flex-direction: column; gap: 24px; color: var(--blue3); }
.devs { display: flex; color: var(--bw5); }
.devs p { flex: 1; }
.devs .name { display: block; width: fit-content; margin-bottom: 4px; color: var(--bw6); font: 32px/1.4 var(--serif); letter-spacing: 0; }
.subscribe { display: grid; grid-template-columns: auto 1fr; row-gap: 8px; }
.subscribe .btn { height: 50px; }
/* the field: what's typed, or its dots (MEKMODE, drawn) while it's empty */
.subscribe .field { position: relative; min-width: 0; cursor: text; }
.subscribe .field input { position: absolute; inset: 0; width: 100%; padding: 0 8px; border: 0; background: none; color: var(--dark1);
  font: 15px var(--text); outline: 0; }
.subscribe .field .dots { pointer-events: none; }
.subscribe .field input:not(:placeholder-shown) + .dots { visibility: hidden; }
.subscribe .field:focus-within { background: var(--bw6); }
.subscribe .field:focus-within .dots { opacity: 0.4; }
.subscribe .trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.subscribe .status { grid-column: 1 / -1; min-height: 0; color: var(--bw6); }
.subscribe:not([data-state]) .status, .subscribe[data-state=""] .status { display: none; }
.subscribe[data-state="error"] .status { color: #d95763; }
.subscribe[aria-busy="true"] .btn { opacity: 0.6; }
.donate { width: 100%; background: var(--blue3); }
.devs a.name:hover { color: var(--gold); }
.about .clip { flex: 1 1 0; max-width: 700px; max-height: min(700px, 100%); aspect-ratio: 1 / 0.983; padding: 64px; display: flex; align-items: center; }
.about .clip video { height: auto; aspect-ratio: 2184 / 1810; }

/* the footer (691:128400) */
.foot { --grad: radial-gradient(47.2% 76.3% at 38.8% 76.3%, rgba(7, 19, 36, 0) 0, rgba(7, 19, 36, 0.8) 59.135%, var(--dark1) 100%);
  min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: var(--gutter); }
.logo.small { color: var(--bw5); font-size: 49.73px; letter-spacing: 1.9892px; }
.logo.small span { margin-top: 2.1px; }
.logo.small .cross { width: 35.1px; height: 52.65px; margin-right: 2px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 24px; max-width: 800px; }

/* Ko-fi's Support me (its own widget, in gold: about.js KOFI), 24px in */
#kofi .floatingchat-container-wrap, #kofi .floatingchat-container-wrap-mobi {
  left: auto !important; right: 24px !important; bottom: 24px !important; transform: scale(0.745); transform-origin: right bottom; }
#kofi .floating-chat-kofi-popup-iframe, #kofi .floating-chat-kofi-popup-iframe-mobi {
  left: auto !important; right: 24px !important; bottom: 66px !important; }

/* (1200x800, 642:62405, is the same, but its parts start clear of the nav down the side, which
   runs to ~200px: the mock has the synopsis's clip and the about column under it) */
@media (min-width: 901px) and (max-width: 1599px) {
  .synopsis, .about { padding-left: 230px; }
  .synopsis .clip { max-width: calc(100% - 394px); }
  .steps { --steps-in: 160px; }
}
/* narrower: no nav down the side, and each part's two halves under each other */
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .side { display: none; }
  .hero { gap: 64px; }
  .logo { font-size: clamp(48px, 14vw, 111.924px); letter-spacing: 0.04em; }
  .logo .cross { width: 0.706em; height: 1.059em; }
  .synopsis, .gameplay, .about { height: auto; min-height: 0; flex-direction: column; padding: 64px var(--gutter); gap: 40px; }
  .synopsis .clip { height: auto; width: min(100%, 520px); max-width: none; }
  .synopsis .words { width: min(100%, 420px); }
  .steps { width: min(100%, 420px); gap: 24px; margin-left: 19px; }
  .gameplay .clip, .about .clip { flex: none; width: min(100%, 560px); height: auto; padding: 0; }
  .gameplay .clip video { width: 100%; }
  .about .clip { aspect-ratio: auto; }
  .team { width: min(100%, 420px); }
}
@media (max-width: 420px) {
  .cta .btn { min-width: 0; }
  .foot .links { gap: 12px; }
}