:root {
	--bar: 44px;
	/* (The whole header: on a narrow screen the tabs take a row of their own under the bar.) */
	--head: var(--bar);
	--hair: rgba(0, 0, 0, .075);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	min-width: 320px;
	color: #000;
	background: #fff;
	/* The app is set in the system font; only the wordmark has a face of its own. */
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Roboto, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

a { color: #666; text-decoration: none; }

/* Nothing eases into place while the page is still arriving. */
.loading *, .loading *::before, .loading *::after { transition: none !important; }

/* Header ----------------------------------------------------- */

#header {
	position: fixed;
	z-index: 30;
	top: 0;
	left: env(safe-area-inset-left, 0);
	right: env(safe-area-inset-right, 0);
	height: var(--bar);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color .25s ease-in-out, box-shadow .25s ease-in-out;
}

.open #header {
	background-color: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 1px 0 var(--hair);
}

#title { margin: 0; padding: 0 12px; line-height: 0; }
#title a { display: block; }
#title img { display: block; width: auto; height: 30px; }

#tabs {
	display: flex;
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s ease-in-out;
}
.open #tabs { visibility: visible; opacity: 1; }
#tabs a {
	padding: 0 18px;
	font-size: 16px;
	line-height: var(--bar);
	white-space: nowrap;
	transition: color .1s ease-in-out;
}
#tabs a:hover { color: #000; }
@media (max-width: 767px) {
	#tabs a { padding: 0 9px; font-size: 15px; }
}
@media (max-width: 600px) {
	:root { --tabs: 34px; --head: calc(var(--bar) + var(--tabs)); }
	#header { flex-wrap: wrap; height: auto; }
	#tabs { order: 1; width: 100%; height: var(--tabs); padding: 0 8px; justify-content: space-between; }
	#tabs a { padding: 0 4px; font-size: min(14px, 3.9vw); line-height: var(--tabs); }
	body:not(.open) #tabs { display: none; }
}

#menu {
	position: relative;
	flex: none;
	width: var(--bar);
	height: var(--bar);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #999;
	-webkit-tap-highlight-color: transparent;
}
#menu:hover { color: #666; }
#menu::before, #menu::after, #menu span {
	content: '';
	position: absolute;
	left: 13px;
	top: 21px;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease-in-out, opacity .1s ease-in-out;
}
#menu::before { transform: translateY(-6px); }
#menu::after { transform: translateY(6px); }
.open #menu span { opacity: 0; }
.open #menu::before { transform: rotate(45deg); }
.open #menu::after { transform: rotate(-45deg); }

/* Poster ----------------------------------------------------- */

#poster {
	position: fixed;
	z-index: 1;
	top: var(--bar);
	right: 0;
	bottom: 0;
	left: 0;
	width: calc((100vmin - var(--bar) - 8vh) * 1.6);
	height: calc(100% - var(--bar) - 8vh);
	max-width: 100%;
	min-width: 320px;
	margin: auto;
	container-type: inline-size;
	transition: filter .25s ease-in-out;
}
/* Behind the open page the picture is out of focus. */
.open #poster { filter: blur(2vmin); }

@media (max-width: 767px) and (orientation: portrait) {
	#poster { top: 0; }
}

/* Everything in the picture is measured on a 1600 by 1000 board. */
#stage {
	--u: calc(100cqw / 1600);
	position: absolute;
	inset: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin: auto;
}

/* Anodised aluminium: a soft sheen, and a fine grain laid over it (soft light, so it neither
   lightens nor darkens the metal on the whole). */
#stage {
	--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 .55'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* A device is a drawing: only its screen can be pressed. */
.device {
	position: absolute;
	display: block;
	pointer-events: none;
}

.screen {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: auto;
	background: #000;
}
/* A film: its still, and the film itself over that. A new one fades in over the old. */
.film {
	position: absolute;
	inset: 0;
	display: block;
	background: center / cover no-repeat;
	transition: opacity .6s ease-in-out;
}
.film.in { opacity: 0; }
.film video + video { position: absolute; inset: 0; }
.enter {
	position: absolute;
	z-index: 1;
	inset: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.enter:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -5px; }

/* The arrows: beside the screen, one each side, and there only while the screen (or an arrow) is pointed at
   or reached with the keyboard. Frosted, so that they read on the white page and over the other screen alike. */
.arrow {
	--a: clamp(22px, calc(46 * var(--u)), 40px);
	--gap: calc(16 * var(--u));
	position: absolute;
	z-index: 3;
	top: 50%;
	width: var(--a);
	height: var(--a);
	margin-top: calc(var(--a) / -2);
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: rgba(0, 0, 0, .62);
	background-color: rgba(255, 255, 255, .62);
	box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 6px rgba(0, 0, 0, .10);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .2s ease-in-out, background-color .1s ease-in-out;
}
.arrow.prev { right: calc(100% + var(--gap)); }
.arrow.next { left: calc(100% + var(--gap)); }
/* (The way from the screen to an arrow is part of the arrow, so it does not go out on the way there.) */
.arrow::after {
	content: '';
	position: absolute;
	top: -60%;
	bottom: -60%;
}
.arrow.prev::after { left: -30%; right: calc(-1 * var(--gap) - 100%); }
.arrow.next::after { right: -30%; left: calc(-1 * var(--gap) - 100%); }
.arrow::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26%;
	height: 26%;
	border: solid currentColor;
	border-width: 0 0 1.5px 1.5px;
	transform: translate(-28%, -50%) rotate(45deg);
}
.arrow.next::before { transform: translate(-72%, -50%) rotate(-135deg); }
.choice > .arrow { visibility: visible; }
/* (Reached with the keyboard, that is: an arrow that has just been clicked does not keep them lit after the pointer has gone.) */
.choice:hover > .arrow, .choice:has(:focus-visible) > .arrow { opacity: 1; }
.arrow:hover { background-color: rgba(255, 255, 255, .86); }
.arrow:focus-visible { outline: 2px solid rgba(0, 0, 0, .5); outline-offset: 2px; }
@media (hover: none) {
	.choice > .arrow { opacity: .8; }
}
/* Where there is no room beside the screens (a phone held upright), the arrows sit on the edge of the case. */
@media (max-width: 767px) {
	.arrow.prev { right: auto; left: calc(var(--a) * -.3); }
	.arrow.next { left: auto; right: calc(var(--a) * -.3); }
}
/* The still is what shows until the film is really running, so a browser that will not
   start a film by itself (low power mode, say) shows the still and no play button. */
.screen video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in-out;
}
.screen video.live { opacity: 1; }

/* Studio Display */

.display {
	left: calc(490 * var(--u));
	top: calc(64 * var(--u));
	width: calc(1090 * var(--u));
	height: calc(836 * var(--u));
}
.display .panel {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(633 * var(--u));
	padding: calc(18 * var(--u));
	/* (The rim of the case, catching the light along its top.) */
	border: calc(3 * var(--u)) solid transparent;
	border-radius: calc(10 * var(--u));
	background:
		linear-gradient(#0a0a0b, #0a0a0b) padding-box,
		linear-gradient(to bottom, #f6f7f8 0, #d4d5d8 6%, #bcbdc1 50%, #a9aaae 94%, #8f9094 100%) border-box;
}
.display .panel::before {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(5 * var(--u));
	width: calc(5 * var(--u));
	height: calc(5 * var(--u));
	margin-left: calc(-2.5 * var(--u));
	border-radius: 50%;
	background: #1d1e22;
}
.display .screen { border-radius: calc(1.5 * var(--u)); }
.display .stand {
	position: absolute;
	left: 50%;
	top: calc(620 * var(--u));
	width: calc(268 * var(--u));
	height: calc(216 * var(--u));
	margin-left: calc(-134 * var(--u));
	border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
	background:
		var(--grain),
		linear-gradient(to right, rgba(0, 0, 0, .16) 0, rgba(255, 255, 255, .5) 1.2%, rgba(255, 255, 255, .12) 9%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .03) 62%, rgba(255, 255, 255, .1) 92%, rgba(255, 255, 255, .4) 98.8%, rgba(0, 0, 0, .18) 100%),
		linear-gradient(to bottom, #96979b 0, #b6b7bb 12%, #cdced1 38%, #d6d7da 66%, #c9cacd 93.5%, #f3f4f5 94%, #e0e1e4 97%, #c2c3c7 100%);
	background-blend-mode: soft-light, normal, normal;
}
.display .stand::before {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(13 * var(--u));
	width: calc(80 * var(--u));
	height: calc(32 * var(--u));
	margin-left: calc(-40 * var(--u));
	border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u)) / 0 0 calc(32 * var(--u)) calc(32 * var(--u));
	background: #fff;
	box-shadow: inset 0 calc(-5 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .14), 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .5);
}
.display::after, .macbook::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: calc(-12 * var(--u));
	height: calc(22 * var(--u));
	background: radial-gradient(closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
}
.display::after { left: 36%; right: 36%; }

/* MacBook Pro 16-inch, silver */

.macbook {
	z-index: 2;
	left: calc(30 * var(--u));
	top: calc(501 * var(--u));
	width: calc(690 * var(--u));
	height: calc(399 * var(--u));
}
.macbook .lid {
	position: absolute;
	left: calc(55 * var(--u));
	top: 0;
	width: calc(580 * var(--u));
	height: calc(385 * var(--u));
	padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(11 * var(--u));
	border: calc(2 * var(--u)) solid transparent;
	border-bottom: 0;
	border-radius: calc(15 * var(--u)) calc(15 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
	background:
		linear-gradient(#070708, #070708) padding-box,
		linear-gradient(to bottom, #f4f5f6 0, #cfd0d3 5%, #babbbf 55%, #a4a5a9 100%) border-box;
}
.macbook .screen { border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0; }
.macbook .notch {
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(62 * var(--u));
	height: calc(12 * var(--u));
	margin-left: calc(-31 * var(--u));
	border-radius: 0 0 calc(4.5 * var(--u)) calc(4.5 * var(--u));
	background: #070708;
	pointer-events: none;
	z-index: 3;
}
.macbook .notch::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(3.5 * var(--u));
	width: calc(4 * var(--u));
	height: calc(4 * var(--u));
	margin-left: calc(-2 * var(--u));
	border-radius: 50%;
	background: #1d1e22;
}
.macbook .base {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(14 * var(--u));
	border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)) / calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
	background:
		var(--grain),
		linear-gradient(to right, rgba(0, 0, 0, .2) 0, rgba(255, 255, 255, .45) 1%, rgba(255, 255, 255, .1) 7%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .04) 60%, rgba(255, 255, 255, .1) 93%, rgba(255, 255, 255, .4) 99%, rgba(0, 0, 0, .22) 100%),
		linear-gradient(to bottom, #fbfbfc 0, #e6e7e9 10%, #d2d3d6 45%, #b9babe 78%, #94959a 100%);
	background-blend-mode: soft-light, normal, normal;
}
.macbook .base::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(98 * var(--u));
	height: calc(6 * var(--u));
	margin-left: calc(-49 * var(--u));
	border-radius: 0 0 calc(7 * var(--u)) calc(7 * var(--u));
	background: linear-gradient(to bottom, #97989c, #c3c4c8 70%, #dedfe1);
}
.macbook::after { z-index: 0; left: 2%; right: 2%; }

/* The credit, small, at the foot of the screen. */
#credit {
	position: fixed;
	z-index: 2;
	left: calc(13px + env(safe-area-inset-left, 0px));
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	color: #999;
	font-size: 12px;
	line-height: 1.25;
	transition: opacity .25s ease-in-out;
}
#credit a, #footer a { color: inherit; text-decoration: underline; }
.open #credit { opacity: 0; }

/* Page ----------------------------------------------------- */

#main {
	position: fixed;
	z-index: 20;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scroll-padding-top: calc(var(--head) + 4px);
	padding: var(--head) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
	outline: 0;
	background-color: rgba(255, 255, 255, .84);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease-in-out, visibility 0s .25s;
}
.open #main {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease-in-out;
}

#content {
	flex: 1;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 20px;
	font-size: 18px;
	line-height: 1.6;
	transform: translateY(28px);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.open #content { transform: none; }

#content h2 { font-size: 28px; line-height: 1.4; margin: 1em 0 .25em; }
#content h3 { font-size: 21px; line-height: 1.5; margin: 1em 0 .25em; }
#content p { margin: 0; }
#content p + p { margin-top: 1em; }
#content ul { margin: 0 0 1.5em; padding: 0 0 0 1.25em; }
#content a:not(.btn) { color: #000; text-decoration: underline; }

aside > section {
	padding: 1em 0 1.5em;
	border-top: solid 1px var(--hair);
}
aside > section:last-child { padding-bottom: 0; }

/* The roadmap is a list of boxes, ticked as things are done. */
#content ul.checks { padding-left: 0; list-style: none; }
ul.checks li { position: relative; padding-left: 1.6em; }
ul.checks li::before {
	content: '';
	position: absolute;
	left: 1px;
	top: .36em;
	width: .9em;
	height: .9em;
	box-sizing: border-box;
	border: solid 1.5px #999;
	border-radius: 4px;
}
ul.checks li.done::before {
	border-color: #222;
	background: #222 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg>') center / 100% no-repeat;
}
#content aside h3 { margin-top: 0; }
#content aside ul { margin-bottom: 0; }

/* Each question is shut until it is clicked. */
/* (Its words are for pressing, not for picking up: a quick double press selects nothing.) */
.faq { margin-top: .5em; -webkit-user-select: none; user-select: none; overflow-anchor: none; }
.faq details { border-top: solid 1px var(--hair); }
.faq summary {
	position: relative;
	display: block;
	padding: .6em 2em .6em 1.25em;
	text-indent: -1.25em;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, #content .faq p::before {
	display: inline-block;
	width: 1.25em;
	text-indent: 0;
	font-weight: bold;
}
.faq summary::before { content: 'Q.'; }
#content .faq p::before { content: 'A.'; }
/* (A plus that turns to a cross when the answer is out.) */
.faq summary::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	width: 13px;
	height: 13px;
	margin-top: -6.5px;
	background: linear-gradient(#999, #999) center / 100% 1.5px no-repeat, linear-gradient(#999, #999) center / 1.5px 100% no-repeat;
	transition: transform .2s ease-in-out;
}
.faq details[open] summary::after { transform: rotate(45deg); }
#content .faq p { padding: 0 2em .9em 1.25em; text-indent: -1.25em; }

/* The privacy and terms pages: one column, a little narrower so the lines are easy to read. */
#content.doc { max-width: 760px; }
#content.doc .date { margin-bottom: 1.25em; color: #666; font-size: 14px; }
#content.doc > section { margin-top: 1.5em; padding-top: 1em; border-top: solid 1px var(--hair); }
#content.doc > section:last-child { padding-bottom: 1.5em; }
#content.doc h3 { margin-top: 0; }
#content.doc ul { margin: .5em 0 0; }
#content.doc li + li { margin-top: .35em; }
#content.doc ul + p { margin-top: 1em; }

#download { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 2em auto; }

.module {
	display: flex;
	flex-direction: column;
	flex: 0 1 300px;
	max-width: 100%;
	padding: 20px;
	border: solid 1px rgba(0, 0, 0, .05);
	border-radius: 8px;
	background-color: rgba(248, 248, 248, .75);
	text-align: center;
}
#content .module h3 { margin: 0; font-size: 24px; line-height: 1; }
.module h3::before {
	content: '';
	display: block;
	/* (The picture has room round the icon for the shadow it throws: the icon itself is still 76 across.) */
	width: 94px;
	height: 94px;
	margin: -7px auto -3px;
	background: url('assets/app-icon.png') center / contain no-repeat;
}
#content .module .cap { padding: 7px 0; font-size: 12px; line-height: 1.5; }
#content .module .price { margin: 6px 0 14px; font-size: 24px; font-weight: 500; line-height: 1.2; }

#content .dl { margin: 0; }
.module .dl { margin-top: auto !important; }
aside .dl { padding-top: 1em; }

a.btn {
	/* (A button is pressed, not read: pressing one twice quickly must not select the words on it.) */
	-webkit-user-select: none;
	user-select: none;
	display: inline-block;
	min-width: 130px;
	max-width: 100%;
	height: 44px;
	padding: 0 20px;
	border-radius: 7px;
	color: #fff;
	background-color: #222;
	font-size: 18px;
	font-weight: 500;
	line-height: 44px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .1s ease-in-out;
}
a.btn:hover { background-color: #000; }
a.btn.download::before {
	content: '';
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 44px;
	margin-right: .5em;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7.2"/><path d="M8 4.3v7M5.2 8.6 8 11.4l2.8-2.8"/></svg>') center / 1em 1em no-repeat;
}
/* Locked until launch: grey, not a link, and a padlock where the arrow was. */
a.btn.download.locked { background-color: #9a9a9a; cursor: default; }
a.btn.download.locked:hover { background-color: #9a9a9a; }
a.btn.download.locked::before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><rect x="3.2" y="7.2" width="9.6" height="7" rx="1.6"/><path d="M5.3 7.2V5.1a2.7 2.7 0 0 1 5.4 0v2.1"/></svg>');
}
/* Two buttons side by side keep a gap between them, across and (on a narrow screen, where the second drops below) down. */
#content .dl a.btn + a.btn { margin-left: 8px; }
@media (max-width: 560px) { #content .dl a.btn + a.btn { margin: 10px 0 0; } }
/* Not made yet: "Windows" and "Linux" on the roadmap are links, and pressed, a box opens under the line for an email address. */
ul.checks a.wish { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .35); text-underline-offset: 2px; cursor: pointer; }
ul.checks a.wish:hover, ul.checks a.wish[aria-expanded="true"] { text-decoration-color: currentColor; }
form.notify { display: flex; gap: 6px; width: 100%; max-width: 320px; height: 29px; margin: 8px 0 2px; }
form.notify input { flex: 1; min-width: 0; height: 29px; padding: 0 9px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; font: inherit; font-size: 13px; font-weight: 400; background: #fff; color: inherit; }
form.notify input.bad { border-color: #d9534f; animation: notify-shake .35s; }
form.notify input.bad::placeholder { color: #d9534f; }
form.notify button { height: 29px; padding: 0 11px; border: 0; border-radius: 6px; background: #222; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
form.notify button:hover { background: #000; }
form.notify button:disabled { opacity: .6; cursor: default; }
form.notify .said { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: #555; line-height: 1.3; }
@keyframes notify-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { form.notify input.bad { animation: none; } }
/* (Stood on the same line as a button next door, a button sits on its own top edge.) */
#content .module .dl a.btn { vertical-align: top; }
/* Somebody has come by a friend's link: their code, where the download is. */
#content .module .invited { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.invited strong { letter-spacing: .12em; font-variant-numeric: tabular-nums; }

/* Until the sandwich button is given somewhere to go, it says so. */
a.btn:not([href]) { background-color: #bbb; cursor: default; }
a.btn.sandwich:not([href])::after { content: ' (opening soon)'; font-weight: 400; }

#footer {
	padding: 20px;
	padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
	box-shadow: 0 -1px 0 var(--hair);
	color: #666;
	font-size: 12px;
	line-height: 1;
	text-align: center;
}
#footer p { margin: 0; }

@media (max-width: 767px) {
	#content { font-size: 16px; }
	#content h2 { font-size: 24px; }
	#content h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	#content { transform: none; transition: none; }
	#main, #header, #tabs, #poster, #menu::before, #menu::after, #menu span, .film, .screen video, .arrow { transition: none; }
}

@media print {
	#poster, #credit, #menu, #tabs { display: none; }
	body { overflow: visible; }
	#main { position: static; opacity: 1; visibility: visible; }
}

/* On a phone: no arrows beside the screens (each shows its first film), and no row of section tabs in the header
   (the page is scrolled instead). */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
	:root { --head: var(--bar); }
	.choice > .arrow { display: none; }
	#tabs { display: none !important; }
	/* The footer's Fliqlo line goes on a line of its own. */
	#footer .dot { display: none; }
	#footer .inspired { display: block; margin-top: 8px; }
}