/* Tollwyn, the studio page on the fleet's apex domain.
   One family, Archivo, self-hosted from /fonts (OFL, licence next to the file): the page makes no
   third-party request, which is what the privacy page promises. Its width axis carries the roles:
   expanded and heavy for display, normal for text.
   Colour: Swiss red (Pantone 485, #DA291C) for the hero, ink and paper for the rest.
   No build step, no JavaScript. The brand files themselves live in brand/ at the repo root. */

@font-face {
	font-family: "Archivo";
	src: url("/fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light dark;

	--red: #DA291C;
	--on-red: #FFFFFF;
	--paper: #FFFFFF;
	--ink: #141414;
	--muted: #57574F;
	--line: #DEDED8;
	--panel: #F3F3EF;
	--red-text: #C42417; /* links on paper: 5.9:1 */
	--focus: #141414;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6.5rem;

	--measure: 64ch;
	--page: 76rem;
	--radius: 0.5rem;

	--display: "Archivo", "Helvetica Neue", Arial, sans-serif;

	--band: #141414; /* the partners band: ink on paper, a lifted grey on the dark paper */
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #121211;
		--ink: #F0F0EC;
		--muted: #A9A9A2;
		--line: #30302D;
		--panel: #1B1B19;
		--red-text: #FF6A5C; /* 6.6:1 on the dark paper */
		--focus: #F0F0EC;
		--band: #22221F;
	}
}

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

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-stretch: 100%;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.skip-link {
	position: absolute;
	left: var(--space-2);
	top: var(--space-2);
	z-index: 10;
	padding: 0.75rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

a {
	color: var(--red-text);
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
}

a:hover {
	text-decoration-thickness: 2px;
}

.shell {
	width: 100%;
	max-width: var(--page);
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2.5rem);
}

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

.site-header {
	padding: var(--space-3) 0;
}

.header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.375rem;
	letter-spacing: -0.035em;
	color: var(--ink);
	text-decoration: none;
}

/* On paper the mark sits on its red tile; on the red hero it stands alone in white. */
.wordmark svg {
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	padding: 0.2rem;
	border-radius: 0.4rem;
	background: var(--red);
	fill: var(--on-red);
}

.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.nav a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Hero (start page): the header and the hero below it share the red ---------- */

.home .site-header,
.hero {
	background: var(--red);
	color: var(--on-red);
	--focus: var(--on-red);
}

.hero {
	position: relative;
	overflow: hidden;
}

.home .wordmark svg {
	padding: 0;
	background: none;
}

.home .site-header a,
.hero a:not(.button) {
	color: var(--on-red);
}

.hero-body {
	position: relative;
	z-index: 1;
	padding-top: clamp(2rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 11vw, 9rem);
}

.hero h1 {
	max-width: 11.5ch;
	margin: 0;
	font-size: clamp(2.75rem, 8.2vw, 7.25rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.045em;
	line-height: 0.94;
}

.hero-lede {
	max-width: 44ch;
	margin: var(--space-4) 0 0;
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	line-height: 1.5;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-4) 0 0;
}

/* The button sits on the red in both schemes, so its colours are fixed, not themed. */
.button {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.4rem;
	border-radius: 999px;
	background: #FFFFFF;
	color: #141414;
	font-weight: 700;
	text-decoration: none;
}

.button:hover {
	background: #141414;
	color: #FFFFFF;
}

.hero-mail {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
}

/* The big mark. It stands on the lower edge of the hero, on the right, and grows with the width
   of the page, so its boom stays clear of the headline; on a narrow screen it stands below the
   text instead, in room the hero keeps free for it. */
.barrier {
	position: absolute;
	right: clamp(0rem, 2vw, 4rem);
	bottom: 0;
	height: min(86%, 38rem, 42vw);
	width: auto;
	fill: var(--on-red);
}

.barrier .hinge {
	fill: var(--red);
}

.boom {
	transform-box: view-box;
	transform-origin: 37px 42px;
	transform: rotate(-22deg);
}

@media (prefers-reduced-motion: no-preference) {
	.boom {
		animation: lift 1.5s cubic-bezier(0.3, 0.7, 0.25, 1.12) 0.45s both;
	}
}

@keyframes lift {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-22deg);
	}
}

@media (max-width: 52rem) {
	.hero {
		--barrier: clamp(9.5rem, 34vw, 15rem);
	}

	.hero-body {
		padding-bottom: calc(var(--barrier) + var(--space-3));
	}

	.barrier {
		right: clamp(1rem, 4vw, 2.5rem);
		height: var(--barrier);
	}
}

/* Sections ---------------------------------------------------------------- */

.section {
	padding: var(--space-6) 0 0;
}

.section-title {
	margin: 0;
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Principles ---------------------------------------------------------------- */

.principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.principles h3 {
	margin: 0;
	padding-top: var(--space-2);
	border-top: 2px solid var(--ink);
	font-size: 1.3125rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.025em;
}

.principles p {
	margin: var(--space-1) 0 0;
	color: var(--muted);
}

@media (max-width: 52rem) {
	.principles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}
}

/* Partners ------------------------------------------------------------------ */

.partners {
	margin-top: var(--space-6);
	padding: var(--space-6) 0;
	background: var(--band);
	color: #F0F0EC;
	--focus: #F0F0EC;
}

.partners-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-3) var(--space-5);
	align-items: start;
}

.partners-title {
	margin: 0;
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	line-height: 1;
}

.partners-body p {
	max-width: var(--measure);
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: #CFCFC8;
}

.partners-mail {
	display: inline-block;
	overflow-wrap: anywhere;
	margin-top: var(--space-3);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.035em;
	color: #FFFFFF;
	text-decoration-color: var(--red);
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.18em;
}

.partners-mail:hover {
	text-decoration-thickness: 0.12em;
	text-decoration-color: #FFFFFF;
}

@media (max-width: 52rem) {
	.partners-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Prose (legal pages) ------------------------------------------------------ */

.prose {
	max-width: var(--measure);
	padding-bottom: var(--space-6);
}

.prose h1 {
	margin: var(--space-4) 0 var(--space-1);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	line-height: 1.02;
}

.prose h2 {
	margin: var(--space-4) 0 var(--space-1);
	font-size: 1.25rem;
	font-weight: 800;
	font-stretch: 106%;
	letter-spacing: -0.015em;
}

.prose p,
.prose ul {
	margin: var(--space-1) 0 0;
}

.prose ul {
	padding-left: 1.25rem;
}

.prose li {
	margin-top: 0.35rem;
}

.prose address {
	font-style: normal;
	margin-top: var(--space-1);
}

.updated {
	color: var(--muted);
	font-size: 0.9375rem;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
	border-top: 1px solid var(--line);
	padding: var(--space-3) 0 var(--space-5);
}

.home .site-footer {
	border-top: 0;
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
}

.site-footer nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.colophon {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
	a,
	.button {
		transition: color 160ms ease, background-color 160ms ease, text-decoration-thickness 160ms ease, text-decoration-color 160ms ease;
	}
}