/* Goon's website wears the game's own palette and its
   two fonts. Nothing here comes from another server. */

@font-face {
	font-family: "DotGothic16";
	src: url("fonts/DotGothic16.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "VT323";
	src: url("fonts/VT323.woff2") format("woff2");
	font-display: swap;
}

:root {
	--desktop: #008080;
	--surface: #c0c0c0;
	--bevel-hi: #ffffff;
	--bevel-light: #dfdfdf;
	--bevel-shadow: #808080;
	--bevel-dark: #0a0a0a;
	--field: #ffffff;
	--text: #000000;
	--text-2: #484850;
	--primary: #000080;
	--secondary: #1084d0;
	--positive: #085422;
	--taskbar: 44px;
	/* The height of a piece of the screen in the list of pictures. */
	--cut: 250px;
	--raised: inset -1px -1px var(--bevel-dark), inset 1px 1px var(--bevel-light),
		inset -2px -2px var(--bevel-shadow), inset 2px 2px var(--bevel-hi);
	--sunken: inset 1px 1px var(--bevel-shadow), inset -1px -1px var(--bevel-hi),
		inset 2px 2px var(--bevel-dark), inset -2px -2px var(--bevel-light);
}

* { box-sizing: border-box; }
/* A rule that sets "display" would otherwise show what is marked hidden. */
[hidden] { display: none !important; }

html {
	background: var(--desktop);
	scroll-behavior: smooth;
	scroll-padding-top: 12px;
	scroll-padding-bottom: calc(var(--taskbar) + 12px);
}

body {
	margin: 0;
	padding: 28px 16px calc(var(--taskbar) + 40px);
	color: var(--text);
	font: 17px/1.55 "DotGothic16", ui-monospace, "Courier New", monospace;
}

main {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	gap: 28px;
}
main > * { min-width: 0; }

img { max-width: 100%; height: auto; }
/* What is drawn on a grid of pixels is shown at whole multiples of it, with
   its edges kept: 16 pixels at 32, 48 at 96. */
img[src*="/apps/"], img[src*="/menu/"], img[src*="icon-"], img[src*="logo."], .bust, .face { image-rendering: pixelated; }

a { color: var(--primary); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
	outline: 2px dotted var(--text);
	outline-offset: 2px;
}

h1, h2, h3 { font-weight: normal; line-height: 1.25; margin: 0; }
h1 { font-size: clamp(26px, 3vw, 32px); }
h2 { font-size: 26px; color: var(--primary); margin-bottom: 6px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
/* The font has one weight, and a bold that the browser makes up fills its
   letters in. What matters is said in the colour of a title bar instead. */
b { font-weight: normal; color: var(--primary); }
/* What somebody copies is set in the machine's own fixed-width font: in the
   pixel fonts "%" and "~" are hard to tell from their neighbours. */
code, pre { font: 14px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

.skip {
	position: absolute; left: -9999px; top: 8px;
	background: var(--field); padding: 6px 10px; z-index: 30;
}
.skip:focus { left: 8px; }

/* --- a window ------------------------------------------------------------------ */

.window {
	background: var(--surface);
	box-shadow: var(--raised);
	padding: 3px;
	min-width: 0;
}
/* One window is in front and has the coloured title bar; the others are grey,
   as on the desktop this is modelled on. Without a script it is the log-on
   dialog, or the window a link has just led to. */
.titlebar {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 3px 4px 3px 8px;
	background: var(--bevel-shadow);
	color: var(--bevel-light);
}
.is-front > .titlebar,
.viewer > .titlebar,
html:not(.has-front) .window:target > .titlebar,
html:not(.has-front) .logon > .titlebar {
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}
/* Without a script and with a window a link has led to, that one is in front
   and the dialog is not: never two. */
@supports selector(:has(*)) {
	html:not(.has-front):has(.window:target) .logon:not(:target) > .titlebar {
		background: var(--bevel-shadow);
		color: var(--bevel-light);
		text-shadow: none;
	}
}
.titlebar-box, .titlebar-button {
	width: 20px; height: 18px; flex: none;
	display: grid; place-content: center;
	background: var(--surface); box-shadow: var(--raised);
	color: var(--text); font: 15px/1 "DotGothic16", monospace; text-shadow: none; text-decoration: none;
	border: 0; padding: 0;
}
.titlebar-box::before { content: "×"; }
/* The box of a window that cannot be closed is greyed, as a disabled one is. */
span.titlebar-box { color: var(--bevel-shadow); text-shadow: 1px 1px var(--bevel-hi); }
.titlebar-button { cursor: pointer; width: 26px; height: 22px; }
.titlebar-button:active { box-shadow: var(--sunken); }
.window-body { padding: 18px 20px 20px; }

.well {
	background: var(--field);
	box-shadow: var(--sunken);
	padding: 8px 10px;
}

.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 36px; padding: 6px 16px;
	background: var(--surface); color: var(--text);
	box-shadow: var(--raised);
	border: 0; font: inherit; text-decoration: none; cursor: pointer;
	white-space: nowrap;
}
.button:active { box-shadow: var(--sunken); padding: 7px 15px 5px 17px; }
.button:focus-visible { outline-offset: -5px; }
/* The button a dialog acts on when you press Return has a black frame. */
.button.default { box-shadow: var(--raised), 0 0 0 1px var(--bevel-dark); }
.button.default:active { box-shadow: var(--sunken), 0 0 0 1px var(--bevel-dark); }

/* Two windows side by side. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.pair-wide-first { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* --- the first screen: the log-on dialog, a tip, and the game ------------------- */

.first {
	display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); grid-template-rows: auto 1fr;
	gap: 20px 24px;
}
.first .logon { grid-column: 1; grid-row: 1; }
.first .tips { grid-column: 1; grid-row: 2; align-self: start; }
.hero-shot { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: start; }
/* As high as the Store Manager down to its two tabs: a picture that ends in
   the middle of a row of text looks torn. */
.shot.hero-shot img { height: 598px; }

.logon-body {
	display: grid; grid-template-columns: 190px 1fr; gap: 20px;
	padding-bottom: 14px;
}
.logo-panel {
	background: var(--primary); color: #fff;
	display: grid; place-content: center; justify-items: center; gap: 6px;
	padding: 22px 10px; min-height: 270px;
}
.logo-panel img { width: 128px; height: 128px; }
.wordmark { font: 48px/1 "VT323", monospace; margin: 0; letter-spacing: 1px; }
.logon-text { min-width: 0; }
.lead { margin-top: 12px; }

.os-pick {
	border: 0; padding: 0; margin: 16px 0 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
}
.os-pick legend { float: left; padding: 0; margin-right: 6px; color: var(--text-2); }
.option { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.option input {
	appearance: none; -webkit-appearance: none;
	width: 16px; height: 16px; margin: 0; border-radius: 50%;
	background: var(--field);
	box-shadow: inset 1px 1px var(--bevel-shadow), inset -1px -1px var(--bevel-hi), inset 2px 2px var(--bevel-dark);
}
.option input:checked { background: radial-gradient(circle, var(--text) 0 3px, var(--field) 4px); }
.mobile-note { margin: 14px 0 0; color: var(--primary); }

.logon-actions {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	border-top: 1px solid var(--bevel-shadow); box-shadow: 0 1px 0 var(--bevel-hi) inset;
	margin: 0 20px; padding: 14px 0 16px;
}
.actions-left, .actions-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.actions-right { justify-content: flex-end; margin-left: auto; }
.dl-meta { color: var(--text-2); font-size: 15px; }
.logon .button.default { min-height: 44px; padding-inline: 20px; font-size: 18px; }

/* One download button at a time: the one of the system that is picked. Where a
   browser cannot ask ":has", all three stay — nothing is lost, only tidiness. */
.dot:not(:empty)::before { content: " · "; }
@supports selector(:has(*)) {
	.logon:has(input:checked) .dl, .logon [data-size] { display: none; }
	.logon:has(input[value="mac"]:checked) .dl[data-os="mac"],
	.logon:has(input[value="windows"]:checked) .dl[data-os="windows"],
	.logon:has(input[value="linux"]:checked) .dl[data-os="linux"] { display: inline-flex; }
	.logon:has(input[value="mac"]:checked) [data-size="mac"],
	.logon:has(input[value="windows"]:checked) [data-size="windows"],
	.logon:has(input[value="linux"]:checked) [data-size="linux"] { display: inline; }
}
/* Without ":has" all three buttons stand side by side; three sizes in a row
   beside them would say nothing. */
@supports not selector(:has(*)) {
	.logon .dl-meta { display: none !important; }
}
/* A phone cannot start the game: the dialog says so and offers no download.
   The files are still there, further down, for whoever wants one anyway. */
.is-mobile .logon .os-pick, .is-mobile .logon .actions-right { display: none; }

/* A contrast theme drops every shadow, and here the shadows are the edges:
   give the system back its own radio buttons and draw real borders. */
@media (forced-colors: active) {
	.option input { appearance: auto; -webkit-appearance: auto; box-shadow: none; background: revert; }
	.window, .well, .button, .titlebar-box, .titlebar-button, .start-menu, .taskbar, .shot a, .bust, .yours { border: 1px solid ButtonText; }
	.download.is-yours { border-width: 3px; }
	/* The mark of a menu's entry is its ground, and a contrast theme takes that. */
	.start-menu a:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* --- did you know ----------------------------------------------------------------- */

.tips-body { display: flex; align-items: center; gap: 12px; padding: 12px; }
.tip-list { flex: 1; margin: 0; list-style: none; min-height: 66px; display: flex; align-items: center; }
/* All of the game's tips are in the page; one shows. Without a script it is the first. */
.tip-list li { display: none; }
.tip-list li.is-shown, .tip-list:not(.is-live) li:first-child { display: block; }
.tips .button { min-width: 120px; }

/* --- screenshots -------------------------------------------------------------------- */

/* A picture in the list is a piece of the whole screen at its own size: a
   screen of 1600 pixels shrunk into a third of the page is a grey smear, and
   every word in the game is one pixel thick. Which piece, each class says. */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.shot { margin: 0; min-width: 0; }
.shot.wide { grid-column: 1 / -1; }
.shot a { display: block; box-shadow: var(--sunken); padding: 2px; background: var(--bevel-dark); cursor: zoom-in; overflow: hidden; }
.shot img { display: block; width: 100%; max-width: none; height: var(--cut); object-fit: none; object-position: 0 0; }
.shot figcaption { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.shot figcaption b { color: var(--text); }
.shots-note { margin: 16px 0 0; font-size: 15px; color: var(--text-2); }
/* Where a point of the page is two or three dots of the screen a picture of
   the game is doubled or trebled, and its edges are kept: smoothed, every
   letter in it is soft. In between, smoothing is the lesser evil. */
@media (resolution: 2dppx), (resolution: 3dppx) {
	.shot img, .viewer:not(.is-fitted) .viewer-body img { image-rendering: pixelated; }
}
/* The picture of the first screen stands on the desktop itself, not in a window. */
.hero-shot figcaption, .hero-shot figcaption b { color: #fff; }

.at-store img { object-position: 0 0; }
.at-desktop img { object-position: 0 0; }
.at-hr img { object-position: -22px -552px; }
/* Wide, and as high as both rows of seats: it has its row of the list to itself. */
.at-board { --cut: 294px; }
.at-board img { object-position: -6px -86px; }
.at-finance img { object-position: 0 -136px; }
/* Wide, and held by its right edge: the order ticket stands at the right of
   the program, and on a narrow screen it is the list that gives way. The
   German program is sixteen pixels wider (its status column is narrower). */
.at-market img { object-position: calc(100% + 290px) -501px; }
:lang(de) .at-market img { object-position: calc(100% + 274px) -501px; }
.at-map img { object-position: -24px -486px; }
.at-lab img { object-position: 0 -291px; }
/* One listing, whole: from under the city picker to the next row of houses. */
.at-web img { object-position: -36px -269px; }
.at-jukebox img { object-position: 0 -84px; }
/* The letter on its sheet: its writer's face, its head, and four lines of it.
   In German the list beside it is sixteen pixels wider. */
.at-mail img { object-position: -826px -82px; }
:lang(de) .at-mail img { object-position: -842px -82px; }
.at-designer img { object-position: -490px -207px; }
/* The chart of the weeks, under the headline that runs across the window. */
.at-report img { object-position: -790px -110px; }
/* The store by night, down to the head of its table. */
.at-night img { object-position: 0 -139px; }
.at-start img { object-position: 0 -650px; }

/* --- readme ------------------------------------------------------------------------ */

.notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px 28px; }
.notes h3 { color: var(--primary); margin-bottom: 4px; }
.notes p { margin: 0; font-size: 16px; }
/* The last note has room for what it is about. */
.faces-note { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px 28px; align-items: center; }
/* Twelve faces: two rows of six. */
.faces { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 606px; margin: 0 0 0 auto; }
.face { width: 96px; height: 96px; flex: none; background: url("img/faces.png") 0 0 / auto 96px; box-shadow: var(--sunken); }
.face:nth-child(2) { background-position: -96px 0; }
.face:nth-child(3) { background-position: -192px 0; }
.face:nth-child(4) { background-position: -288px 0; }
.face:nth-child(5) { background-position: -384px 0; }
.face:nth-child(6) { background-position: -480px 0; }
.face:nth-child(7) { background-position: -576px 0; }
.face:nth-child(8) { background-position: -672px 0; }
.face:nth-child(9) { background-position: -768px 0; }
.face:nth-child(10) { background-position: -864px 0; }
.face:nth-child(11) { background-position: -960px 0; }
.face:nth-child(12) { background-position: -1056px 0; }
.notes-foot { margin: 18px 0 0; font-size: 15px; color: var(--text-2); }

/* --- the jukebox --------------------------------------------------------------------- */

.stations { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.stations li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; background: var(--field); box-shadow: var(--sunken); padding: 8px 10px; }
.stations p { margin: 0; }
.station span { color: var(--text-2); font-size: 15px; }
.plays { grid-column: 1; font-size: 15px; color: var(--text-2); }
.stations audio { grid-column: 1 / -1; width: 100%; height: 36px; margin-top: 6px; }
/* With a script each tune has a button of this desktop's and the browser's own player is put away. */
.stations .play { grid-column: 2; grid-row: 1 / span 2; min-width: 96px; }
.stations .play[aria-pressed="true"] { box-shadow: var(--sunken); }
.stations .is-driven audio { display: none; }
.tune-lost { grid-column: 1 / -1; color: var(--primary); font-size: 15px; }
.stations progress { grid-column: 1 / -1; width: 100%; height: 10px; margin-top: 6px; appearance: none; -webkit-appearance: none; border: 0; background: var(--surface); box-shadow: var(--sunken); }
.stations progress::-webkit-progress-bar { background: transparent; }
.stations progress::-webkit-progress-value { background: var(--primary); }
.stations progress::-moz-progress-bar { background: var(--primary); }

/* --- a letter ------------------------------------------------------------------------ */

.letter { margin: 14px 0 14px; }
.letter-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.bust { width: 96px; height: 96px; flex: none; box-shadow: var(--sunken); }
.bust-mum { background: url("img/mum.png") 0 0 / 96px 96px; }
.letter dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.letter dt { color: var(--text-2); }
.letter dd { margin: 0; }
.letter-body { margin: 0; white-space: pre-line; padding: 12px 14px; }

/* --- a week ----------------------------------------------------------------------- */

.steps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.steps li { counter-increment: step; padding-left: 30px; position: relative; }
/* A number, not a button: nothing here is to be pressed. */
.steps li::before { content: counter(step) "."; position: absolute; left: 0; top: 0; color: var(--primary); }
.panes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.panes li { display: grid; padding: 4px 8px 5px; background: var(--surface); }
.panes span { font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; hyphens: auto; }
.panes b { font-size: 21px; color: var(--text); }
.numbers .window-body { padding: 12px; }
.numbers .panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- programs ---------------------------------------------------------------------- */

#programs h3, #download h3 { margin: 20px 0 8px; }
/* A list as a file manager shows one: a small picture, a name, what it is. */
.programs {
	list-style: none; margin: 0; padding: 4px;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 0 18px;
}
.programs li { display: grid; grid-template-columns: 32px 178px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 6px; min-height: 42px; }
.programs img { width: 32px; height: 32px; }
.programs b { color: var(--primary); }
.programs span { font-size: 15px; line-height: 1.35; color: var(--text-2); }

/* --- download ---------------------------------------------------------------------- */

.downloads { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.download { background: var(--surface); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.download > * { min-width: 0; max-width: 100%; }
.download p { margin: 0; }
.download-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#download .download h3 { margin: 0; font-size: 24px; color: var(--primary); }
.yours { background: var(--primary); color: #fff; font-size: 14px; padding: 1px 8px; }
.download.is-yours { box-shadow: var(--sunken), 0 0 0 2px var(--primary); }
.req, .size { color: var(--text-2); font-size: 15px; }
.download details { margin-top: 2px; }
.download summary { cursor: pointer; color: var(--primary); width: fit-content; }
.download details p, .download details li { margin-top: 8px; font-size: 15px; }
.download details ol { margin: 0; padding-left: 26px; }
.download pre { margin: 6px 0 0; overflow-x: auto; }
.sum { margin-top: auto !important; padding-top: 6px; font-size: 15px; color: var(--text-2); }
.sum code { font-size: 12.5px; word-break: break-all; display: block; color: var(--text); }
.sums-note, .paths-note { margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.plain { margin: 0; padding-left: 22px; }
.paths { list-style: none; padding: 0; display: grid; gap: 4px; }
.paths span { display: inline-block; min-width: 86px; color: var(--text-2); }
.paths code { word-break: break-all; }

[data-show-when="release"] { display: none; }
.has-release [data-show-when="release"] { display: revert; }

/* --- footer and taskbar ------------------------------------------------------------- */

.colophon { max-width: 1240px; margin: 28px auto 0; color: #fff; text-align: center; font-size: 15px; }
.colophon p { margin: 0 0 4px; }
.colophon a { color: #fff; }
.colophon a:focus-visible { outline-color: #fff; }

.taskbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
	height: var(--taskbar);
	display: flex; align-items: center; gap: 6px;
	padding: 4px 6px;
	background: var(--surface);
	box-shadow: inset 0 1px var(--bevel-light), inset 0 2px var(--bevel-hi);
}
.start { position: relative; flex: none; }
.start-button { list-style: none; padding-inline: 10px; min-height: 34px; }
.start-button img { width: 16px; height: 16px; }
.start-button::-webkit-details-marker { display: none; }
.start[open] > .start-button { box-shadow: var(--sunken); }
.start-menu {
	position: absolute; left: 0; bottom: calc(100% + 2px);
	list-style: none; margin: 0; padding: 3px; min-width: 230px;
	/* On a screen that is very low the menu scrolls rather than leave it at the top. */
	max-height: calc(100vh - var(--taskbar) - 8px); overflow-y: auto;
	background: var(--surface); box-shadow: var(--raised);
}
.start-menu a { display: flex; align-items: center; gap: 12px; padding: 5px 14px 5px 8px; color: var(--text); text-decoration: none; }
.start-menu a:hover, .start-menu a:focus-visible { background: var(--primary); color: #fff; outline: 0; }
.start-menu img { width: 32px; height: 32px; }
.start-menu .ruled { border-top: 1px solid var(--bevel-shadow); box-shadow: 0 1px 0 var(--bevel-hi) inset; margin-top: 3px; padding-top: 3px; }
.tasks { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 1; min-width: 0; }
/* As wide as its name and no narrower: a name that does not fit is not cut
   and does not run into its neighbour - below 1100 pixels the buttons go,
   and the Start menu has them all. */
.tasks li { flex: 0 0 auto; min-width: 118px; }
.task { width: 100%; justify-content: flex-start; min-height: 34px; padding-inline: 10px; }
/* The button of the window in front is held down. */
.task[aria-current="true"] { box-shadow: var(--sunken); background: var(--bevel-light); }
.tray { margin: 0 0 0 auto; flex: none; display: flex; align-items: center; gap: 12px; background: var(--surface); padding: 5px 10px; font-size: 15px; }
.tray :empty { display: none; }
.language { color: var(--text); text-decoration: none; background: var(--primary); color: #fff; padding: 0 5px; }

/* --- the screenshot viewer ------------------------------------------------------------ */

/* A picture at its own size, in a window that scrolls when the screen is the
   smaller of the two. A click on the picture fits it into the window and back. */
.viewer { border: 0; max-width: min(1612px, 96vw); max-height: 94vh; }
.viewer::backdrop { background: rgba(0, 40, 40, .72); }
.viewer-tools { display: flex; align-items: center; gap: 4px; }
.viewer-tools form { margin: 0; display: flex; }
#viewer-count { margin-right: 8px; font-size: 15px; }
.viewer-body { overflow: auto; max-height: calc(94vh - 40px); background: var(--bevel-dark); }
.viewer-body img { display: block; max-width: none; cursor: zoom-out; }
.viewer.is-fitted .viewer-body img { max-width: 100%; height: auto; cursor: zoom-in; }

/* --- narrower screens ------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.first { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.first .logon, .first .tips, .hero-shot { grid-column: 1; grid-row: auto; }
	.shot.hero-shot img { height: 300px; }
	.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tasks { display: none; }
	.faces-note { grid-template-columns: minmax(0, 1fr); }
	.faces { justify-content: flex-start; margin-left: 0; }
}

@media (max-width: 900px) {
	.pair, .pair-wide-first { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	body { padding: 14px 10px calc(var(--taskbar) + 28px); font-size: 16px; }
	main { gap: 18px; }
	.window-body { padding: 14px 14px 16px; }
	.logon-body { grid-template-columns: 1fr; gap: 14px; }
	.logo-panel { min-height: 0; padding: 14px; grid-auto-flow: column; gap: 16px; }
	.logo-panel img { width: 64px; height: 64px; }
	.wordmark { font-size: 40px; }
	.logon-actions { margin: 0 14px; }
	.actions-right { width: 100%; justify-content: stretch; }
	.actions-right .dl { flex: 1; }
	.tips-body { flex-direction: column; align-items: stretch; }
	/* Thirteen pictures one under the other are a long way down: a row to swipe. */
	.shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; }
	.shots .shot { flex: 0 0 86%; scroll-snap-align: start; }
	.programs li { grid-template-columns: 32px minmax(0, 1fr); }
	.programs span { grid-column: 2; }
	.face { width: 48px; height: 48px; background-size: auto 48px; }
	.face:nth-child(2) { background-position: -48px 0; }
	.face:nth-child(3) { background-position: -96px 0; }
	.face:nth-child(4) { background-position: -144px 0; }
	.face:nth-child(5) { background-position: -192px 0; }
	.face:nth-child(6) { background-position: -240px 0; }
	.face:nth-child(7) { background-position: -288px 0; }
	.face:nth-child(8) { background-position: -336px 0; }
	.face:nth-child(9) { background-position: -384px 0; }
	.face:nth-child(10) { background-position: -432px 0; }
	.face:nth-child(11) { background-position: -480px 0; }
	.face:nth-child(12) { background-position: -528px 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media print {
	.taskbar, .tips, .skip, .stations audio, .play { display: none; }
	html { background: #fff; }
	body { padding-bottom: 0; }
	.window { box-shadow: none; border: 1px solid #000; }
	/* Backgrounds are not printed, so nothing may be white on them. */
	.titlebar, .is-front > .titlebar, html .logon > .titlebar, html .window:target > .titlebar, .logo-panel, .colophon, .colophon a, .yours,
	.hero-shot figcaption, .hero-shot figcaption b { color: #000; background: none; text-shadow: none; }
}