/* The look comes from the project icon: a flat cube with a white, a yellow and a blue face on grey, with a soft
   glow of the two colours. Those three face colours are the only accents. Movement is transform and opacity
   only, and all of it is off for visitors who ask for reduced motion (the block at the end). */
:root {
	--bg: #2a2a2b;
	--bg-alt: #303031;
	--panel: #3a3a3b;
	--line: #4a4a4b;
	--ink: #f4f4f2;
	--ink-dim: #b9b9b4;
	--white: #ffffff;
	--yellow: #e3d75c;
	--blue: #00a8ff;
	--dark: #1b1b1c;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	--wrap: 72rem;
	--gutter: 1.25rem;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 1.0625rem/1.6 var(--font);
	overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg, video { display: block; max-width: 100%; }

a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.wrap.narrow { max-width: 48rem; }

.dim { color: var(--ink-dim); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.cube-top { fill: var(--c-top, #ffffff); }
.cube-left { fill: var(--c-left, #e3d75c); }
.cube-right { fill: var(--c-right, #00a8ff); }

.skip {
	position: absolute;
	left: -100rem;
	top: 0;
	z-index: 30;
	padding: 0.5rem 1rem;
	background: var(--white);
	color: var(--dark);
}
.skip:focus { left: 0; }

/* buttons: a face colour with dark text (white text on the blue of the icon is too weak to read). On hover a
   light band runs across. */
.btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0.8rem 1.5rem;
	border: 2px solid transparent;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--dark);
	transition: transform 0.2s var(--ease);
}
.btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: rgba(255, 255, 255, 0.45);
	transform: translateX(-160%) skewX(-24deg);
}
.btn:hover { color: var(--dark); transform: translateY(-2px); }
.btn:hover::after { transform: translateX(360%) skewX(-24deg); transition: transform 0.6s var(--ease); }
.btn:active { transform: translateY(0); }
.btn-yellow { background: var(--yellow); }
.btn-blue { background: var(--blue); }
.btn-white { background: var(--white); }
.btn-line { border-color: var(--white); color: var(--white); }
.btn-line:hover { background: var(--white); color: var(--dark); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.9375rem; }

/* header: lies over the hero, gets a ground once the page is scrolled */
.head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	transition: background-color 0.3s, padding 0.3s;
	padding: 0.9rem 0;
}
.head.is-stuck {
	padding: 0.45rem 0;
	background: rgba(34, 34, 35, 0.94);
}
.head-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
}
/* the header changes when this line at the top of the page is out of sight */
.head-mark { position: absolute; top: 0; left: 0; width: 1px; height: 4rem; pointer-events: none; }

.brand, .footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.1875rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--white);
	text-decoration: none;
}
.brand-cube { width: 1.9rem; height: 1.9rem; transition: transform 0.5s var(--ease); }
.brand:hover .brand-cube { transform: rotate(-12deg) scale(1.1); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; padding: 0.25rem 0; }
.nav a:not(.btn):hover { color: var(--white); text-decoration: underline; }

/* hero */
.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(54rem, 100vh);
	padding: 7rem 0 5rem;
	overflow: hidden;
	background: #3d3d3e url(../media/hero.jpg) center / cover no-repeat;
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s;
}
.hero-video.is-playing { opacity: 1; }
/* the veil keeps the text readable over the moving picture and carries the two glows of the icon */
.hero-veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(34rem 26rem at 68% 52%, rgba(227, 215, 92, 0.22), rgba(227, 215, 92, 0) 70%),
		radial-gradient(34rem 26rem at 90% 52%, rgba(0, 168, 255, 0.26), rgba(0, 168, 255, 0) 70%),
		linear-gradient(180deg, rgba(42, 42, 43, 0.55) 0%, rgba(42, 42, 43, 0.25) 45%, rgba(42, 42, 43, 1) 100%),
		linear-gradient(90deg, rgba(42, 42, 43, 0.9) 0%, rgba(42, 42, 43, 0.7) 45%, rgba(42, 42, 43, 0.3) 100%);
}
.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	align-items: center;
	gap: 2rem;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.3rem 0.7rem;
	background: var(--white);
	color: var(--dark);
	font-size: 0.875rem;
	font-weight: 700;
}
.hero h1 {
	max-width: 17em;
	font-size: clamp(2.125rem, 5.2vw, 3.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--white);
}
.lead {
	max-width: 36rem;
	margin-top: 1.5rem;
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.55;
	color: var(--ink);
}
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-text > * { animation: rise 0.8s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: 0.08s; }
.hero-text > :nth-child(3) { animation-delay: 0.16s; }
.hero-text > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise {
	from { opacity: 0; transform: translateY(1.5rem); }
	to { opacity: 1; transform: none; }
}

/* the cube floats, its glow breathes, and on a desktop it leans towards the pointer (--rx and --ry are set
   by site.js) */
.hero-art {
	position: relative;
	transform: perspective(60rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.4s var(--ease);
	animation: rise 1s 0.2s var(--ease) both;
}
.hero-cube { width: 100%; height: auto; overflow: visible; animation: float 7s ease-in-out infinite; }
.hero-glow { opacity: 0.7; animation: breathe 5s ease-in-out infinite; }
@keyframes float {
	0%, 100% { transform: translateY(-0.5rem); }
	50% { transform: translateY(0.5rem); }
}
@keyframes breathe {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.9; }
}

/* sections */
.section { padding: 5.5rem 0; scroll-margin-top: 3rem; }
.section-alt { background: var(--bg-alt); }

h2 {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 2.75rem;
}
/* the rule under a heading: the three face colours, drawn like a saber that ignites when it comes into view */
h2::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 0.25rem;
	margin-top: 0.9rem;
	background: linear-gradient(90deg, var(--white) 0 33.4%, var(--yellow) 33.4% 66.7%, var(--blue) 66.7%);
	box-shadow: 0 0 1rem rgba(227, 215, 92, 0.55), 0.75rem 0 1.25rem rgba(0, 168, 255, 0.5);
	transform-origin: left;
}
.js h2[data-reveal]::after { transform: scaleX(0); transition: transform 0.9s 0.25s var(--ease); }
.js h2.is-in::after { transform: scaleX(1); }

h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; }

/* things that come in while scrolling. Without the script nothing is hidden. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .stagger > :nth-child(3n + 2) { transition-delay: 0.09s; }
.js .stagger > :nth-child(3n + 3) { transition-delay: 0.18s; }

/* a picture or a clip, with a block of one face colour behind it: the cube again, without a shadow */
.frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--panel);
	--face: var(--yellow);
}
.frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--face);
	transform: translate(0.75rem, 0.75rem);
	transition: transform 0.4s var(--ease);
}
.frame > * { position: relative; }
.frame > video, .frame > picture, .frame > picture img, .frame > svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.frame > picture { display: block; }
.frame-yellow { --face: var(--yellow); }
.frame-blue { --face: var(--blue); }
.frame-white { --face: var(--white); }
.feature:hover .frame::before, .tile:hover .frame::before { transform: translate(1.1rem, 1.1rem); }

/* features */
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 4rem;
}
.feature + .feature { margin-top: 5.5rem; }
.feature:nth-of-type(even) .frame { order: 2; }

.tag {
	display: inline-block;
	margin-bottom: 0.9rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--line);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-dim);
}
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-bottom: 0.9rem; }
.feature-text > p:not(.tag) { color: var(--ink-dim); }

.points { list-style: none; margin-top: 1.25rem; }
.points li { position: relative; padding-left: 1.5rem; }
.points li + li { margin-top: 0.45rem; }
.points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--yellow);
}
.points li:nth-child(2)::before { background: var(--blue); }
.points li:nth-child(3)::before { background: var(--white); }

/* the two drawings: a voice that reaches a near and a far player, and sound in two rooms */
/* the drawing needs its own ground: the coloured block behind a frame would show through it */
.frame-art > svg { background: #262627; }
.art { fill: none; }
.art-floor, .art-room, .art-wall { stroke: var(--line); stroke-width: 3; }
.art-wall { stroke: var(--ink-dim); stroke-width: 5; }
.wave { stroke: var(--white); stroke-width: 5; stroke-linecap: square; animation: wave 1.8s ease-out infinite; }
.wave-2 { animation-delay: 0.2s; }
.wave-3 { animation-delay: 0.4s; }
@keyframes wave {
	0% { opacity: 0; }
	25% { opacity: 1; }
	100% { opacity: 0; }
}
.talker { animation: nod 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes nod {
	0%, 100% { transform: scale(1); }
	20% { transform: scale(1.05); }
}
.level { transform-box: fill-box; transform-origin: left center; animation: level 1.8s ease-in-out infinite; }
.level-near { fill: var(--yellow); }
.level-far { fill: var(--blue); opacity: 0.55; animation-delay: 0.35s; }
@keyframes level {
	0%, 100% { transform: scaleX(0.15); }
	35% { transform: scaleX(1); }
	60% { transform: scaleX(0.6); }
}
.listener-far { opacity: 0.6; }

.ring {
	stroke: var(--yellow);
	stroke-width: 3;
	transform-box: fill-box;
	transform-origin: center;
	animation: ring 3s linear infinite;
}
.ring-2 { animation-delay: 1s; }
.ring-3 { animation-delay: 2s; }
.rings-door .ring { stroke: var(--blue); animation-delay: 0.9s; }
.rings-door .ring-2 { animation-delay: 2.4s; }
@keyframes ring {
	0% { transform: scale(0.1); opacity: 0.95; }
	100% { transform: scale(1); opacity: 0; }
}
.art-source { fill: var(--yellow); }

/* two pictures of the admin page that take turns */
.frame-swap > picture { position: absolute; inset: 0; }
.frame-swap > .swap-b { animation: swap 12s infinite; }
@keyframes swap {
	0%, 42% { opacity: 0; }
	50%, 92% { opacity: 1; }
	100% { opacity: 0; }
}

/* in motion */
.tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.25rem 2rem;
}
.tile figcaption { margin-top: 1.4rem; color: var(--ink-dim); }

/* screenshots */
.shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}
.shot a { display: block; overflow: hidden; background: var(--panel); }
.shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.shot a:hover img, .shot a:focus-visible img { transform: scale(1.06); }
.shot figcaption { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-dim); }

/* download */
.downloads {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 1.75rem;
}
.dl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--panel);
	border-top: 0.3rem solid var(--line);
}
.dl-linux { border-top-color: var(--yellow); }
.dl-windows { border-top-color: var(--blue); }
.dl-macos { border-top-color: var(--white); }
.dl.is-soon {
	background: transparent;
	outline: 1px dashed var(--line);
	outline-offset: -1px;
}
.dl h3 { font-size: 1.625rem; }
.dl-state {
	margin: 1.25rem 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-dim);
}
.dl .btn { margin: 1.25rem 0; }
.dl-size { margin: -0.6rem 0 1rem; font-size: 0.9375rem; color: var(--ink-dim); }
.dl-note, .dl-warn { font-size: 0.9375rem; color: var(--ink-dim); }
.dl-warn { margin-top: 0.5rem; padding-left: 0.75rem; border-left: 0.2rem solid var(--yellow); }
.dl-extra { margin-top: 0.35rem; }
.dl-sum { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-dim); }
.dl-sum summary { cursor: pointer; }
.dl-sum code { display: block; margin-top: 0.4rem; font: 0.75rem/1.5 var(--mono); overflow-wrap: anywhere; }

.install { margin-top: 3.5rem; max-width: 46rem; }
.install h3 { margin-bottom: 1.25rem; }
.install .dim { margin-top: 1.5rem; }

.steps { list-style: none; counter-reset: step; }
.steps li {
	position: relative;
	padding-left: 3rem;
	counter-increment: step;
}
.steps li + li { margin-top: 1rem; }
.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	font: 700 1rem var(--mono);
	color: var(--dark);
	background: var(--white);
}
.steps li:nth-child(3n + 2)::before { background: var(--yellow); }
.steps li:nth-child(3n + 3)::before { background: var(--blue); }

/* questions */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
	position: relative;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 1rem;
	height: 0.1875rem;
	margin-top: -0.09375rem;
	background: var(--yellow);
	transition: transform 0.3s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--white); }
.faq details p { padding: 0 2.5rem 1.25rem 0; color: var(--ink-dim); animation: rise 0.4s var(--ease) both; }

/* guides */
.guides {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}
.guide-card {
	display: block;
	padding: 1.5rem;
	background: var(--panel);
	border-top: 0.3rem solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.3s var(--ease), background-color 0.3s;
}
.guide-card:hover { color: var(--ink); transform: translateY(-0.4rem); background: #424243; }
.guide-card h3 { margin: 1rem 0 0.4rem; font-size: 1.25rem; }
.guide-card p { color: var(--ink-dim); font-size: 0.9375rem; }

.glyph {
	width: 2.5rem;
	height: 2.5rem;
	--c-top: #8e8e8f;
	--c-left: #6c6c6d;
	--c-right: #565657;
	transition: transform 0.5s var(--ease);
}
.guide-card:hover .glyph { transform: rotate(-10deg) scale(1.12); }
.lit-top { border-top-color: var(--white); }
.lit-left { border-top-color: var(--yellow); }
.lit-right { border-top-color: var(--blue); }
.lit-top .glyph { --c-top: var(--white); }
.lit-left .glyph { --c-left: var(--yellow); }
.lit-right .glyph { --c-right: var(--blue); }

/* footer */
.footer {
	padding: 3.5rem 0;
	background: #222223;
	font-size: 0.9375rem;
	color: var(--ink-dim);
}
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 3rem;
}
.footer p + p { margin-top: 0.75rem; }
.footer-brand { margin-bottom: 1rem; }

/* guide pages */
.page-head { padding: 8rem 0 3rem; background: var(--bg-alt); }
.page-head h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.page-head .lead { color: var(--ink-dim); }
.crumb { margin-bottom: 1rem; font-size: 0.9375rem; }
.crumb a { color: var(--ink-dim); }

.guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15rem;
	gap: 4rem;
	padding: 3.5rem 0 5rem;
}
.guide-body h2 { margin: 3rem 0 1.25rem; font-size: 1.625rem; scroll-margin-top: 5rem; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h2::after { width: 3.5rem; height: 0.1875rem; margin-top: 0.6rem; }
.guide-body p, .guide-body ul, .guide-body ol, .guide-body table { margin-bottom: 1.1rem; }
.guide-body p, .guide-body li { color: var(--ink-dim); }
.guide-body b, .guide-body strong { color: var(--ink); }
.guide-body ul:not(.points) { padding-left: 1.25rem; }
.guide-body ul:not(.points) li + li { margin-top: 0.35rem; }
.guide-body .steps li { color: var(--ink-dim); }

kbd, code {
	font: 0.875em var(--mono);
	overflow-wrap: anywhere;
}
kbd, .guide-body code {
	padding: 0.1rem 0.4rem;
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--ink);
}
.menu-path { color: var(--ink); font-weight: 700; }

.tip {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--panel);
	border-left: 0.3rem solid var(--blue);
}
.tip.tip-yellow { border-left-color: var(--yellow); }
.tip p:last-child { margin-bottom: 0; }

.guide-body table { width: 100%; border-collapse: collapse; }
.guide-body th, .guide-body td {
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.guide-body th { color: var(--ink); font-size: 0.9375rem; }
.guide-body td { color: var(--ink-dim); }
.guide-body td:first-child { white-space: nowrap; }

.guide-nav { align-self: start; position: sticky; top: 5rem; }
.guide-nav h2 { margin-bottom: 1rem; font-size: 1rem; }
.guide-nav h2::after { display: none; }
.guide-nav ul { list-style: none; }
.guide-nav li + li { margin-top: 0.25rem; }
.guide-nav li a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-left: 0.2rem solid var(--line);
	color: var(--ink-dim);
	text-decoration: none;
}
.guide-nav li a:hover { color: var(--white); border-left-color: var(--white); }
.guide-nav li a[aria-current="page"] { color: var(--white); border-left-color: var(--yellow); font-weight: 700; }
.guide-nav .btn { margin-top: 1.5rem; }

.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 8rem 0 4rem; }
.lost .hero-cube { width: 11rem; margin: 0 auto 2rem; }
.lost p { margin: 1rem 0 2rem; color: var(--ink-dim); }

/* lightbox: a dialog over the whole window, so the browser keeps the focus inside and Esc closes it */
.lightbox {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 20, 21, 0.95);
	color: var(--ink);
}
.lightbox::backdrop { background: rgba(20, 20, 21, 0.95); }
.lightbox[open] { animation: fade 0.25s both; }
.lightbox[open] .lb-figure { animation: zoom 0.35s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom { from { opacity: 0; transform: scale(0.94); } }
.lb-stage {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 3.75rem 1rem 1rem;
}
.lb-figure { max-width: 100%; }
.lb-figure img {
	width: auto;
	height: auto;
	max-width: min(100%, 1920px);
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	margin: 0 auto;
	background: var(--panel);
}
.lb-figure figcaption {
	margin-top: 0.75rem;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--ink-dim);
}
.lb-count { margin-left: 0.75rem; font: 0.8125rem var(--mono); white-space: nowrap; }
.lb-btn {
	position: fixed;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: var(--panel);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s var(--ease);
}
.lb-btn:hover { background: var(--line); transform: scale(1.08); }
.lb-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: square;
}
.lb-close { top: 0.75rem; right: 0.75rem; }
.lb-prev { left: 0.75rem; top: calc(50% - 1.375rem); }
.lb-next { right: 0.75rem; top: calc(50% - 1.375rem); }

[hidden] { display: none !important; }

@media (max-width: 62.5rem) {
	.shots, .downloads, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature { gap: 2.5rem; }
	.guide { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.guide-nav { position: static; }
}

@media (max-width: 50rem) {
	.hero { min-height: 0; padding: 6.5rem 0 3.5rem; }
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hero-art { order: -1; width: min(52%, 13rem); margin: 0 auto 1.5rem; }
	.hero-veil {
		background:
			radial-gradient(18rem 14rem at 30% 22%, rgba(227, 215, 92, 0.22), rgba(227, 215, 92, 0) 70%),
			radial-gradient(18rem 14rem at 70% 22%, rgba(0, 168, 255, 0.26), rgba(0, 168, 255, 0) 70%),
			linear-gradient(180deg, rgba(42, 42, 43, 0.6) 0%, rgba(42, 42, 43, 0.8) 55%, rgba(42, 42, 43, 1) 100%);
	}
	.feature { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.feature:nth-of-type(even) .frame { order: 0; }
	.feature + .feature { margin-top: 4rem; }
	.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.section { padding: 4rem 0; }
	.frame::before { transform: translate(0.5rem, 0.5rem); }
}

@media (max-width: 40rem) {
	:root { --gutter: 1rem; }
	.shots, .downloads, .tiles, .guides { grid-template-columns: minmax(0, 1fr); }
	.nav { gap: 0.25rem 1rem; font-size: 0.9375rem; }
	.lb-prev, .lb-next { top: auto; bottom: 0.75rem; }
	.lb-stage { padding-bottom: 4.25rem; }
	.guide-body td:first-child { white-space: normal; }
}

/* reduced motion: everything stands still, and what would have slid in is simply there. The clips stay on
   their poster picture (site.js does not start them). */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.js h2[data-reveal]::after { transform: none; }
	.hero-video { display: none; }
	.hero-glow { opacity: 0.7; }
	.frame-swap > .swap-b { opacity: 0; }
	.wave { opacity: 0.8; }
}