/* BlueG.Systems: the one stylesheet (docs/plan.md section 2). The look is hdln.gg's, which is headlineGG's: the
   tokens and the kit are carried from hdln.gg's internal/web/static/site.css (at 831a341, 2026-11-07), and each part
   carried says so, with the red family turned to the studio's blue. Solid slabs, square corners, no outlines, no
   glow; a color only where it has a job. Dark only, as the program is. docs/reference/look.md says each token's job.
   Order: the tokens; the ground and the type; the kit; the top bar and the foot; then each page, only what is its own. */

:root {
	/* the ground (carried) */
	--ink: #0a090c;        /* the darkest; the top bar; a dark slab's lower edge */
	--screen: #1e1b22;     /* the ground where it is one color */
	--ground-a: #1b181f;   /* the ground's 4 px checker */
	--ground-b: #221f26;
	/* slabs: a raised thing is a lighter slab, never an outline (carried) */
	--slab: #2c2732;       /* a window's face; a section on a list */
	--slab-hi: #38323f;    /* a raised thing at rest */
	--slab-top: #423c47;   /* under the pointer */
	--slab-lo: #17151a;    /* pressed in; a well; a list's ground */
	--on-face: #17151a;    /* the one that is ON is pressed in dark ... */
	--on-text: #efe6d2;    /* ... with paper letters */
	/* text (carried) */
	--paper: #efe6d2;      /* text */
	--label: #c2b8a6;      /* a row's word on a window */
	--muted: #8c8475;      /* hints; a bracket; a dark slab's lit edge */
	--faint: #585249;      /* the least */
	/* the studio's blue, where hdln.gg has headlineGG's tally red: the thing that is ON, the band, the mark's G, the GG
	   of a wordmark (docs/plan.md section 2; to set beside hdln.gg on screen and rule) */
	--tally: #4a90ff;
	--tally-dim: #2d5ba8;
	--band: #1d3b7c;       /* a window's title band, deep enough for paper letters */
	--tally-off: #1a2440;
	/* each product's own color, for its wordmark's GG alone (plan 2.1: a product's color only in its wordmark): read
	   from the products' wordmark files, headlineGG's from hdln.gg (the owner 11-07: jumpcut orange, boxout light
	   blue, bitcrush pink) */
	--headline-red: #f03228;
	--jumpcut-orange: #ff5d2f;
	--boxout-blue: #2ee6d6;
	--bitcrush-pink: #fa6086;
	/* amber: the way in to a program: headlineGG in the browser at hdln.gg (carried) */
	--amber: #e8a33d;
	/* go: the ONE forward action on a screen (PRESS START TO HIRE US) (carried) */
	--go: #48c470;
	--go-dim: #267c46;
	--go-off: #1e3426;

	/* made from the tokens by the program's rule (a color's edges are it 38 % toward white and 50 % toward black) */
	--go-lit: #8edaa6;
	--go-lo: #246238;
	--go-top: #5fd385;
	--tally-lit: #8fbaff;
	--tally-lo: #254880;
	--amber-lit: #f1c687;
	--amber-lo: #74521e;
	--amber-top: #ebb15a;
	--shadow: rgb(10 9 12 / 0.6); /* a floating thing's hard shadow (carried) */
	/* the band: --band at the left, in 14 steps into the window's face by the right (carried) */
	--band-steps: linear-gradient(90deg,
		color-mix(in srgb, var(--band), var(--slab) 0.0%) 0.00% 7.14%,
		color-mix(in srgb, var(--band), var(--slab) 7.7%) 7.14% 14.29%,
		color-mix(in srgb, var(--band), var(--slab) 15.4%) 14.29% 21.43%,
		color-mix(in srgb, var(--band), var(--slab) 23.1%) 21.43% 28.57%,
		color-mix(in srgb, var(--band), var(--slab) 30.8%) 28.57% 35.71%,
		color-mix(in srgb, var(--band), var(--slab) 38.5%) 35.71% 42.86%,
		color-mix(in srgb, var(--band), var(--slab) 46.2%) 42.86% 50.00%,
		color-mix(in srgb, var(--band), var(--slab) 53.8%) 50.00% 57.14%,
		color-mix(in srgb, var(--band), var(--slab) 61.5%) 57.14% 64.29%,
		color-mix(in srgb, var(--band), var(--slab) 69.2%) 64.29% 71.43%,
		color-mix(in srgb, var(--band), var(--slab) 76.9%) 71.43% 78.57%,
		color-mix(in srgb, var(--band), var(--slab) 84.6%) 78.57% 85.71%,
		color-mix(in srgb, var(--band), var(--slab) 92.3%) 85.71% 92.86%,
		color-mix(in srgb, var(--band), var(--slab) 100.0%) 92.86% 100.00%);

	/* sizes (carried), and the page's width: 1400 px at most, two columns of windows on HOME (the owner 11-07) */
	--row-h: 34px;
	--bar-h: 56px;
	--band-h: 26px;
	--edge: 2px;
	--gutter: 16px;
	--page-w: 1400px;
	--t-body: 15px;
	--t-small: 13px;
	--t-head: 20px;
	--w-body: 500;
	--w-heavy: 700;
	--face: Jura, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: dark;
}

/* the face: Jura (OFL 1.1, static/fonts/OFL.txt), served from the site, nothing from a CDN (carried) */
@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/static/fonts/jura.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/static/fonts/jura-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* a finger needs more than the program's 34 (carried) */
@media (pointer: coarse) {
	:root { --row-h: 44px; }
}

/* ---- the ground and the type (carried) ---- */

* { box-sizing: border-box; }

html, body { margin: 0; }

/* the ground is the program's checker, 4 px squares of two close tones */
body {
	background: repeating-conic-gradient(var(--ground-a) 0 25%, var(--ground-b) 0 50%) 0 0 / 8px 8px;
	background-color: var(--screen);
	color: var(--paper);
	font-family: var(--face);
	font-size: var(--t-body);
	font-weight: var(--w-body);
	line-height: 1.4;
	letter-spacing: 0.04em;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
	width: 100%;
	max-width: calc(var(--page-w) + 2 * var(--gutter));
	margin: 0 auto;
	padding: var(--gutter);
}

a { color: inherit; }
h1, h2, h3 { font-weight: var(--w-heavy); }

/* keyboard focus: paper, square */
:focus-visible { outline: 3px solid var(--paper); outline-offset: 0; }
:focus:not(:focus-visible) { outline: none; }

/* ---- the kit (carried) ---- */

/* a slab: a raised thing at rest. RAISED is lit along the top and left and dark along the foot and right; PRESSED IN
   the other way about. */
.slab {
	--lit: var(--muted);
	--dark: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--row-h);
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--lit), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--dark);
	color: var(--label);
	font: inherit;
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}
.slab::-webkit-details-marker { display: none; }
.slab:hover { background: var(--slab-top); color: var(--paper); }
/* open, or held under the button: pressed in dark with paper letters */
details[open] > summary.slab, .slab:active {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--dark), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--lit);
}
.slab-go { --lit: var(--go-lit); --dark: var(--go-lo); background: var(--go); color: var(--ink); }
.slab-go:hover { background: var(--go-top); color: var(--ink); }
.slab-go:active { background: var(--go); color: var(--ink); }
/* amber: the way in to a program (USE IT AT HDLN.GG), as hdln.gg's USE NOW (carried) */
.slab-amber { --lit: var(--amber-lit); --dark: var(--amber-lo); background: var(--amber); color: var(--ink); }
.slab-amber:hover { background: var(--amber-top); color: var(--ink); }
.slab-amber:active { background: var(--amber); color: var(--ink); }
.slab-big { height: calc(var(--row-h) + 14px); padding: 0 32px; font-size: 17px; letter-spacing: 0.08em; }

/* pressed in, and not a control: a state, a setting's value (the program's ON look, words, never a pill) */
.sunk {
	display: inline-flex;
	align-items: center;
	height: var(--row-h);
	padding: 0 12px;
	background: var(--on-face);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
	color: var(--on-text);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* a well: set into what it is on, sunken, 3 px round it */
.well {
	display: block;
	padding: 3px;
	background: var(--slab-lo);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}

/* a window: a raised frame on the slab, the band along its top in the studio's blue with its name, heavy, in paper */
.window {
	padding: 5px;
	background: var(--slab);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	min-width: 0;
}
.band {
	display: flex;
	align-items: center;
	height: var(--band-h);
	margin: 0;
	padding: 0 9px;
	background: var(--band-steps);
	color: var(--paper);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.window-in { padding: 12px 11px 14px; }

/* a band that opens a page: the band's whole width the link, SEE ALL the one control on it, at its right end, the
   band's height, a raised slab that lights while the pointer is anywhere on the band */
.band-link { padding: 0; }
.band-open {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding-left: 9px;
	color: inherit;
	text-decoration: none;
}
.band-open:focus-visible { outline-offset: -3px; }
.band-word { min-width: 0; margin-right: 10px; overflow: hidden; text-overflow: ellipsis; }
.band-more {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	height: 100%;
	margin-left: auto;
	padding: 0 12px;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--label);
	letter-spacing: 0.06em;
}
.band-open:hover .band-more { background: var(--slab-top); color: var(--paper); }
.band-open:active .band-more {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.more-glyph { flex-shrink: 0; fill: currentColor; }

/* a box: a group with a name, etched, the name cut into its top line. Only on a window's face. */
.box {
	position: relative;
	margin: 26px 0 0;
	padding: 18px 12px 12px;
	box-shadow: inset 1px 1px 0 var(--ink), inset -1px -1px 0 var(--muted), inset 2px 2px 0 var(--muted), inset -2px -2px 0 var(--ink);
}
.box-name {
	position: absolute;
	top: 0;
	left: 18px;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 8px;
	background: var(--slab);
	color: var(--paper);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
	line-height: 1.2;
}

/* rows: the word in label at the left, the value in paper beside it, one row height each */
.rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; margin: 0; }
.rows dt, .rows dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--row-h);
	margin: 0;
}
.rows dt { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); }
.rows dd { font-weight: var(--w-heavy); overflow-wrap: anywhere; }

/* the menu floats: a hard shadow down and right; rows in label, the pointed one raised in paper; ON in faint */
.menu {
	position: absolute;
	z-index: 10;
	top: calc(100% + 4px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink), 6px 6px 0 var(--shadow);
}
.menu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: var(--row-h);
	padding: 0 12px 0 14px;
	color: var(--label);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}
.menu-row:hover {
	background: var(--slab-top);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--paper);
}
.menu-on { color: var(--faint); font-size: 0.85em; }

/* a fact not known yet: its label in brackets, in muted (plan section 1) */
.bracket { color: var(--muted); }

/* a product's name in its own casing: the stem at the body's weight, the GG heavier in the studio's blue, or in the
   product's own color where it has one (plan 2.1 and 5) */
.wordmark { font-weight: var(--w-body); letter-spacing: 0.02em; white-space: nowrap; }
.gg { color: var(--tally); font-weight: var(--w-heavy); }
.gg-headline { color: var(--headline-red); }
.gg-jumpcut { color: var(--jumpcut-orange); }
.gg-boxout { color: var(--boxout-blue); }
.gg-bitcrush { color: var(--bitcrush-pink); }
/* THE GG SOFTWARE SUITE's GG (the owner 11-07: "shift colors between the GG colors below", then "a slow color shift
   ... instead of instant cuts"): the letters' color moving slowly through the four products' colors, 3 s from one to
   the next, back to red to close the loop; still, in headlineGG's red, for a viewer who asks for less motion */
/* (a step larger than the band's words: the colors are darker than the paper beside them, and darker letters on the
   dark band read smaller at the same size; measured 11-07, the same 13 px and the same width as paper GG) */
.gg-cycle { font-size: 1.15em; font-weight: inherit; color: var(--headline-red); animation: gg-cycle 12s linear infinite; }
@keyframes gg-cycle {
	0% { color: var(--headline-red); }
	25% { color: var(--jumpcut-orange); }
	50% { color: var(--boxout-blue); }
	75% { color: var(--bitcrush-pink); }
	100% { color: var(--headline-red); }
}
@media (prefers-reduced-motion: reduce) {
	.gg-cycle { animation: none; }
}

/* ---- the top bar (carried: hdln.gg's HeadlineBar, 56 px on ink, staying at the top) and the foot ---- */

.top {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px 20px;
	padding: 0 var(--gutter);
	min-height: var(--bar-h);
	background: var(--ink);
}
.mark { font-weight: var(--w-heavy); font-size: 19px; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.mark b { color: var(--tally); }
.tabs { display: flex; gap: 6px; }
/* a tab: raised at rest, the one in hand pressed in dark */
.tab {
	display: flex;
	align-items: center;
	height: var(--row-h);
	padding: 0 12px;
	background: var(--slab-hi);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink);
	color: var(--label);
	font-size: var(--t-small);
	font-weight: var(--w-heavy);
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}
.tab:hover { background: var(--slab-top); color: var(--paper); }
.tab-on, .tab-on:hover {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
/* MORE, the program's word for what the bar cannot fit: a <details>, so it works with no script; wide screens have the
   tabs and never show it. Its list hangs from the bar's right edge. */
.more { display: none; margin-left: auto; }
.more-menu { right: var(--gutter); top: calc(50% + var(--row-h) / 2 + 4px); min-width: 220px; }

/* the foot: plain words in muted, the business line in faint (plan section 3) */
.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 4px var(--gutter);
	background: var(--ink);
	font-size: var(--t-small);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-links a {
	display: flex;
	align-items: center;
	min-height: var(--row-h);
	padding: 0 10px;
	color: var(--muted);
	font-weight: var(--w-heavy);
	text-decoration: none;
}
.foot-links a:hover { color: var(--paper); }
/* a product on Steam OR in the browser: one phrase, two links, OR between them in faint */
.foot-pair { display: flex; align-items: center; }
.foot-or { color: var(--faint); font-weight: var(--w-heavy); }
.foot-law { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 8px 10px; color: var(--faint); font-weight: var(--w-heavy); }
.foot-where { color: var(--muted); } /* where the studio is: a step brighter than the registry numbers beside it */

/* ---- HOME (plan section 4): four windows, each its own shape. Wide, two columns: the products, the contract work and
   the games at the left, the house rules in a 400 px column at the right (the owner 11-07: "One vert column isn't
   it"). Narrower, the columns let go and the windows take the order software, rules, contract, games. ---- */

.home { display: flex; flex-direction: column; gap: 22px; }
.home-col { display: contents; }
.home-soft { order: 1; }
.home-rules { order: 2; }
.home-origins { order: 3; }
.home-contract { order: 4; }
.home-games { order: 5; }
/* the rules and the services lay themselves out by the room their window has, not the screen's */
.home-rules, .home-contract, .home-games { container-type: inline-size; }
@media (min-width: 1200px) {
	.home { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
	.home-col { display: flex; flex-direction: column; gap: 22px; }
}

.lead { margin: 0 0 14px; font-weight: var(--w-heavy); }

/* THE GG SOFTWARE SUITE: a row a product on the window's face, an etched line under each; the name and line the link to its
   page, the state pressed in, the price, the Steam slab at the end */
.soft-rows { list-style: none; margin: 0; padding: 0; }
.soft-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 140px 80px 190px;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 4px;
	box-shadow: inset 0 -1px 0 var(--muted), inset 0 -2px 0 var(--ink);
}
.soft-row:last-child { box-shadow: none; }
.soft-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; }
.soft-name .wordmark { font-size: var(--t-head); }
.soft-line { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); }
.soft-name:hover .soft-line { color: var(--paper); }
.soft-price { font-weight: var(--w-heavy); white-space: nowrap; }
/* the end of a row: its Steam slab, and headlineGG's way in to the browser under it; every slab the column's width,
   one width down the whole list (the owner 11-07) */
.soft-acts { grid-column: 4; justify-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.soft-wait { grid-column: 4; justify-self: end; color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; white-space: nowrap; }

/* HOUSE RULES: the program's SETUP list, a section a rule on the list's dark ground. Every rule on one grid (subgrid),
   so the setting words start on one line and the values on another (the owner 11-07: the second column "not lined
   up"). In a narrow window a rule is three lines: its name; the setting at the left and its value at the right; the
   line. In a wide one, one line: the name, the setting, the value, the line, each in its own column. */
.settings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto;
	gap: 3px 16px;
}
.setting {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: center;
	row-gap: 8px;
	padding: 10px 12px;
	background: var(--slab);
}
.setting-rule { grid-column: 1 / -1; margin: 0; font-size: var(--t-body); letter-spacing: 0.06em; }
.setting-word { white-space: nowrap; color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }
.setting-value { justify-self: end; }
.setting-line { grid-column: 1 / -1; margin: 0; color: var(--label); white-space: pre-line; } /* a rule's line breaks where its words say */
/* a phone's window has no room for a word and its value side by side: the value under the word */
@container (max-width: 340px) {
	.settings { grid-template-columns: minmax(0, 1fr); }
	.setting-value { justify-self: start; }
}
@container (min-width: 700px) {
	.settings { grid-template-columns: max-content max-content max-content minmax(0, 1fr); }
	.setting-rule, .setting-line { grid-column: auto; }
	.setting-value { justify-self: start; }
}

/* rows of lines: the kit's rows with a sentence beside each word, not a value: WHERE THEY CAME FROM (a tool's wordmark
   and its beginning; the owner 11-07: the house rule's paragraph "way too much 'wall of text'"), CONTRACT's services,
   ABOUT */
.rows-lines dt { color: var(--paper); font-size: var(--t-body); }
.rows-lines dd { padding: 6px 0; color: var(--label); font-weight: var(--w-body); }
/* a link set in a row: paper, lighting under the pointer, no underline (the kit's words are not underlined) */
.rows-link { color: var(--paper); font-weight: var(--w-heavy); text-decoration: none; }
.rows-link:hover { color: var(--on-text); background: var(--slab-top); }

/* CONTRACT MODE: the three services as etched boxes side by side while their names fit on one line, one a row after
   that; the one go slab under them */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@container (max-width: 760px) {
	.services { grid-template-columns: minmax(0, 1fr); }
}
.box-line { margin: 0; color: var(--label); }
.contract-go { margin: 22px 0 4px; }
.contract-go .slab { width: 100%; } /* the owner 11-07: the window's width */

/* GAMES: a game a block, an etched line between: its state, its title, its line, its slab or its bracket */
.game-list { list-style: none; margin: 0; padding: 0; }
.game {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 4px;
	box-shadow: inset 0 -1px 0 var(--muted), inset 0 -2px 0 var(--ink);
}
.game:first-child { padding-top: 2px; }
.game:last-child { box-shadow: none; }
.game-state { color: var(--label); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }
.game-title { font-weight: var(--w-heavy); }
.game-line { color: var(--label); font-size: var(--t-small); }
.game-end { margin-top: 6px; }
/* in a wide window, a game a row: its words at the left, its slab or its bracket at the right */
@container (min-width: 600px) {
	.game { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
	.game > * { grid-column: 1; }
	.game > .game-end { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* ---- the other pages (plan section 4): each lays its windows out its own way ---- */

/* a page of one window at a reading width: ABOUT, PRIVACY, NOT FOUND */
.page-col { max-width: 820px; margin: 0 auto; }

/* SOFTWARE: a window a product, one under the other, in A CARD's frame: the band the name and its state at the right;
   the picture in a well at the left, the rest beside it; narrower, the rest under the picture, still in the window */
.products { display: flex; flex-direction: column; gap: 22px; }
.band-name .wordmark { font-size: 1.15em; letter-spacing: 0.04em; } /* (the colored GG reads smaller on the band: as the suite's) */
.band-state { margin-left: auto; padding-left: 12px; color: var(--label); letter-spacing: 0.08em; }
.product-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; padding: 12px 11px 14px; }
.product-face { flex: 1 1 460px; max-width: 720px; min-width: 0; }
.product-face img { width: 100%; height: auto; }
/* (no picture yet: a short well, not a whole empty screen's worth) */
.product-wait {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--muted);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
}
.product-side { flex: 1 1 340px; min-width: 0; }
.product-line { margin: 0 0 4px; font-size: var(--t-head); font-weight: var(--w-heavy); line-height: 1.25; }
/* every product's facts on one edge, window to window: the words' column one width (IN THE BROWSER, the longest) */
.product-side .rows { grid-template-columns: 120px minmax(0, 1fr); }
.features { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--label); }
.product-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.product-go .slab { min-width: 190px; } /* (HOME's slabs' width) */

/* GAMES: a row of cabinets, a window a game, its slab at the foot of each so the feet line up */
.cabinets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.cabinet { display: flex; flex-direction: column; }
.cabinet-in { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.cabinet-title { margin: 0; font-size: var(--t-head); line-height: 1.25; }
.cabinet-line { margin: 0; color: var(--label); }
.cabinet-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; }
/* the cabinet's screen: every picture the same 16:9 frame, so the titles under them start on one line */
.cabinet-face { margin: 0 0 6px; }
.cabinet-face img, .cabinet-wait { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cabinet-wait { display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: var(--w-heavy); letter-spacing: 0.08em; }
.cabinet-note { margin-top: 4px; color: var(--muted); font-size: var(--t-small); font-weight: var(--w-heavy); letter-spacing: 0.06em; }

/* CONTRACT: CONTRACT MODE at the left, ENTER YOUR INITIALS in a 420 px column at the right; one column narrower */
.contract { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }

/* ABOUT: the names in a row, a gap between */
.about-names { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* PRIVACY: the house rules' list, laid out by its window's width */
.privacy { container-type: inline-size; }

/* the product rows' end columns let go of their widths before the bar turns to MORE */
@media (max-width: 980px) {
	.soft-row { grid-template-columns: minmax(0, 1fr) auto auto 190px; }
	.contract { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the bar as MORE, at the width the tabs no longer fit: the mark and the tabs need 721 px (measured 11-07, the
   bar's Steam slab gone at the owner's word), and a long page's scrollbar takes up to 17 more ---- */

@media (max-width: 760px) {
	.tabs { display: none; }
	.more { display: block; }
}

/* ---- phone width: one column, nothing wider than the screen ---- */

@media (max-width: 640px) {
	.top { gap: 8px; }
	.mark { font-size: 15px; }
	/* the name, then the state and the price or NOW LOADING, then the Steam slab on a line of its own */
	.soft-row { grid-template-columns: auto minmax(0, 1fr); }
	.soft-name { grid-column: 1 / -1; }
	.soft-acts { grid-column: 1 / -1; }
	.soft-wait { grid-column: 2; }
	.rows { grid-template-columns: minmax(0, 1fr); }
	.rows dt { min-height: 0; padding-top: 6px; }
	.foot { justify-content: flex-start; }
}