/*
	Playlab — playlab.co.uk

	A hand-written rebuild of the original one-pager. Every colour, size and
	radius below is taken from the stylesheet of the last live version of the
	site, so the look is the same; the CSS is just a great deal shorter.
*/

/* ------------------------------------------------------------------ font */

/*
	Inter, self-hosted — no third-party request, nothing to consent to.

	These are the variable files, so one download covers every weight the page
	uses (400 body copy, 500 headings and buttons). Google's CSS names each
	weight separately but serves this same file for all of them.

	The unicode-range split means a typical visitor fetches only the two latin
	files; latin-ext is pulled on demand if a character in that range appears.

	Licence: SIL Open Font License 1.1 — see assets/fonts/LICENSE.txt.
*/

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/inter-latin-normal.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: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/inter-latin-italic.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: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/inter-latin-ext-normal.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;
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/inter-latin-ext-italic.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;
}

/* ---------------------------------------------------------------- tokens */

:root {
	--bg:            #C1CADB; /* page surround           */
	--panel:         #FFFFFF; /* content band            */
	--heading:       #535861; /* 7.15:1 on white                    */
	--body:          #6E737D; /* 4.76:1 — Carrd's #7B808A was 3.96:1 */
	--field-border:  #EBEEF5;
	--accent:        #36D1B5; /* focus ring              */
	--button-bg:     #C1CADB;
	--button-fg:     #4A4E54; /* 5.08:1 on the button fill          */

	--radius:        0.375rem;
	--spacing:       1.25rem;
	--pad-x:         3.875rem;
	--pad-y:         1.5rem;

	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	        'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------- reset */

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

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li,
section, header, footer {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

ul { list-style: none; }

/* Carrd sized the site in points; keeping that keeps the proportions. */
html { font-size: 16pt; }

body {
	background-color: var(--bg);
	color: var(--body);
	font-family: var(--font);
	line-height: 1;
	min-height: 100vh;
	min-width: 320px;
	overflow-x: hidden;
	word-wrap: break-word;
	-webkit-text-size-adjust: none;
}

a { color: inherit; text-decoration: underline; transition: color 0.25s ease; }
a:hover { text-decoration: none; }

strong { font-weight: bolder; }
em { font-style: italic; }

/* ---------------------------------------------------------------- layout */

#wrapper {
	-webkit-overflow-scrolling: touch;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

#main {
	align-items: center;
	background-color: var(--panel);
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	max-width: 100%;
	position: relative;
	text-align: left;
	width: 100%;
	z-index: 1;
}

#main > .inner {
	max-width: 100%;
	padding: var(--pad-y) var(--pad-x);
	position: relative;
	width: 47rem;
	z-index: 1;
}

#main > .inner > section > * {
	margin-top: var(--spacing);
	margin-bottom: var(--spacing);
}

#main > .inner > section > :first-child { margin-top: 0 !important; }
#main > .inner > section > :last-child  { margin-bottom: 0 !important; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ logo */

.image { display: block; line-height: 0; max-width: 100%; position: relative; }

.image .frame {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	vertical-align: top;
	width: 100%;
}

.image .frame img {
	height: auto;
	max-width: 100%;
	vertical-align: top;
	width: inherit;
}

/*
	The artwork is a 500x500 square with the mark in the middle band, so it
	carries its own whitespace above and below — that is what sets the logo
	apart from the address, exactly as on the original site.
*/
#image01 .frame { width: 15rem; }

/* ------------------------------------------------------------ typography */

.style1 {
	color: var(--heading);
	font-family: var(--font);
	font-size: 2em;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.375;
	width: 100%;
}

.style2 {
	color: var(--body);
	font-family: var(--font);
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.75;
	text-align: left;
	width: 100%;
}

.style2 .p { display: block; }
.style2 .p:nth-child(n + 2) { margin-top: 1rem; }

/* --------------------------------------------------------------- buttons */

.buttons {
	cursor: default;
	display: flex;
	justify-content: flex-start;
	letter-spacing: 0;
	padding: 0;
}

.buttons li { max-width: 100%; }

.buttons.style1 {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.buttons.style1:not(:first-child) { margin-top: 2rem !important; }
.buttons.style1:not(:last-child)  { margin-bottom: 2rem !important; }

.buttons.style1 li a {
	align-items: center;
	background-color: var(--button-bg);
	border-radius: var(--radius);
	color: var(--button-fg);
	display: inline-flex;
	flex-direction: row-reverse;
	font-family: var(--font);
	font-size: 1em;
	font-weight: 500;
	height: 3.25rem;
	justify-content: flex-end;
	line-height: 3.25rem;
	max-width: 100%;
	padding: 0 1.625rem;
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
	vertical-align: middle;
	white-space: nowrap;
}

.buttons.style1 li a svg {
	display: block;
	fill: var(--button-fg);
	flex-grow: 0;
	flex-shrink: 0;
	height: 100%;
	margin-left: 0.875rem;
	margin-right: -0.125em;
	min-width: 16px;
	transition: fill 0.25s ease;
	width: 1em;
}

.buttons.style1 li a .label {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	text-align: left;
	width: 100%;
}

.buttons.style1 li a:hover { transform: scale(1.0425); }

.buttons.style1 li a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--accent);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1680px) {
	html { font-size: 12pt; }
}

@media (max-width: 980px) {
	html { font-size: 10pt; }
	#main > .inner { width: auto; max-width: 100%; }
}

@media (max-width: 736px) {
	html { font-size: 11pt; }
	:root { --pad-x: 2rem; }
	.buttons.style1 { flex-direction: column; flex-wrap: nowrap; }
	.buttons.style1 li a { max-width: 32rem; width: 100%; }
	.style1 { font-size: 1.5em; }
	#image01 { margin-bottom: 3rem !important; }
}

@media (max-width: 480px) {
	:root { --spacing: 1.09375rem; }
}

@media (max-width: 360px) {
	:root { --pad-x: 1.5rem; --pad-y: 1.125rem; --spacing: 0.9375rem; }
	.buttons.style1 { gap: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}