/* Fonts are served from this site (Inter and Syne, SIL Open Font License), latin and latin-ext subsets. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.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+2074, 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: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.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+2074, 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: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.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+2074, 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: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/syne-latin-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/syne-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/syne-latin-800.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/syne-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Midnight blue with white type; the about section and footer text sit on light grey-blue. */
:root {
	--bg: #E7EAF2;
	--text: #0A0A0A;
	--dark: #060A14;
	--light: #FFFFFF;
	--light-rgb: 255 255 255;
	--muted: #595959;
	--line: #C5CBD9;
	--tile: #111A2E;
	--line-dark: rgb(255 255 255 / .12);
	--font-head: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--gutter: 2rem;
	/* The navigation's distance from the top and its height; the hero logo is centred on it */
	--bar-top: 1.25rem;
	--bar-h: 2.75rem;
}

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

html { background: var(--dark); scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
address { font-style: normal; }

h1, h2, .section-title {
	font-family: var(--font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

.grain {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .06;
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220"%3E%3Cfilter id="g"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".7" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23g)"/%3E%3C/svg%3E');
}

/* Navigation */
.site-nav {
	position: fixed;
	top: var(--bar-top);
	right: 1.25rem;
	z-index: 50;
	display: flex;
	align-items: center;
	height: var(--bar-h);
	padding: 0 .5rem;
	background: rgb(10 10 10 / .6);
	border: 1px solid rgb(var(--light-rgb) / .18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: var(--font-head);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
}

.site-nav__links { display: flex; align-items: center; }

.site-nav__link {
	padding: .45rem .6rem;
	white-space: nowrap;
	color: rgb(var(--light-rgb) / .72);
	transition: color .2s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="true"] { color: var(--light); }

.site-nav__link[aria-current="true"] { text-decoration: underline; text-underline-offset: .3em; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: fit-content;
	padding: 1rem 2rem;
	border: 2px solid var(--light);
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: clamp(.875rem, 1.5cqw, 1.25rem);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--solid { background: var(--light); color: var(--dark); }
.btn--solid:hover { background: transparent; color: var(--light); }
.btn--outline { background: transparent; color: var(--light); }
.btn--outline:hover { background: var(--light); color: var(--dark); }

/* Hero */
.hero {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	height: 100vh;
	background: var(--dark);
	will-change: opacity;
}

.hero__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--gutter);
	overflow: hidden;
	background: var(--dark);
	color: var(--light);
	container-type: inline-size;
}

.hero__logo {
	position: absolute;
	/* Centred on the navigation bar, so the logo and the menu sit on one line */
	top: calc(var(--bar-top) + var(--bar-h) / 2);
	left: var(--gutter);
	z-index: 1;
	width: clamp(104px, 11cqw, 170px);
	height: auto;
	translate: 0 -50%;
	animation: fade-up .8s var(--ease-out) .1s both;
}

.hero__title {
	position: relative;
	z-index: 1;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
}

.hero__name {
	font-size: clamp(1.5rem, 12.9cqw, 15rem);
	line-height: .85;
	white-space: nowrap;
}

.hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__line > span { display: inline-block; animation: line-up 1s var(--ease-out) .15s both; }
.hero__line--late > span { animation-delay: .27s; }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	margin-top: 2rem;
	animation: fade-up .8s var(--ease-out) .55s both;
}

.hero__foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	font-size: .875rem;
	font-weight: 500;
	animation: fade-up .8s var(--ease-out) .7s both;
}

.hero__scroll { transition: opacity .2s ease; }
.hero__scroll:hover { opacity: .6; }


.hero__photo { position: relative; height: 100%; overflow: hidden; }

.hero__photo::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: 28%;
	pointer-events: none;
	background: linear-gradient(to right, #000 0%, rgb(0 0 0 / .78) 25%, rgb(0 0 0 / .35) 60%, transparent 100%);
}

/* Ink reveal */
@property --ink {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

.ink { position: absolute; inset: 0; background: var(--dark); }

.ink__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.ink__layer--base { filter: grayscale(1) brightness(.4) contrast(1.1); }

.ink__layer--color {
	--ink: 0%;
	-webkit-mask-image:
		radial-gradient(circle farthest-corner at 52% 42%, #000 calc(var(--ink) * .7), transparent var(--ink)),
		radial-gradient(circle farthest-corner at 34% 66%, #000 calc(var(--ink) * .5), transparent calc(var(--ink) * .84)),
		radial-gradient(circle farthest-corner at 70% 30%, #000 calc(var(--ink) * .46), transparent calc(var(--ink) * .8));
	mask-image:
		radial-gradient(circle farthest-corner at 52% 42%, #000 calc(var(--ink) * .7), transparent var(--ink)),
		radial-gradient(circle farthest-corner at 34% 66%, #000 calc(var(--ink) * .5), transparent calc(var(--ink) * .84)),
		radial-gradient(circle farthest-corner at 70% 30%, #000 calc(var(--ink) * .46), transparent calc(var(--ink) * .8));
	animation: ink-reveal 3.2s cubic-bezier(.35, .05, .25, 1) .3s both;
}

.ink.is-done .ink__layer--color { -webkit-mask-image: none; mask-image: none; animation: none; }

@keyframes ink-reveal { to { --ink: 120%; } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Page content slides over the fixed hero */
.page {
	position: relative;
	z-index: 1;
	margin-top: 100vh;
	background: var(--bg);
	box-shadow: 0 -20px 40px rgb(0 0 0 / .05);
}

.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { animation: fade-up .8s var(--ease-out) forwards; }

.section-title { font-size: clamp(2rem, 6vw, 6rem); letter-spacing: -.04em; line-height: .9; }



/* Sponsors */
.sponsors {
	--logo-height: clamp(32px, 3vw, 44px);
	padding: clamp(2.5rem, 4.5vw, 4.25rem) var(--gutter);
	background: var(--dark);
	color: var(--light);
	border-top: 1px solid var(--line-dark);
}

.sponsors__inner {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 6vw, 7rem);
	max-width: 1760px;
	margin: 0 auto;
}

.sponsors__label {
	flex: none;
	font-family: var(--font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .6;
}

.sponsors__list {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3.5vw, 4rem);
	min-width: 0;
}

.js .sponsors__item.is-visible { animation-delay: var(--reveal-delay, 0ms); }

.sponsors__link { display: flex; align-items: center; justify-content: center; min-height: 44px; }

.sponsors__link img {
	width: auto;
	height: calc(var(--logo-height) * var(--logo-scale, 100) / 100);
	filter: grayscale(1);
	opacity: .78;
	transition: filter .25s ease, opacity .25s ease;
}

.sponsors__link:focus-visible img { filter: none; opacity: 1; }

@media (hover: hover) and (pointer: fine) {
	.sponsors__link:hover img { filter: none; opacity: 1; }
}

@media (max-width: 768px) {
	.sponsors { --logo-height: 30px; }
	.sponsors__inner { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
	.sponsors__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; width: 100%; }
	.sponsors__link img { max-width: 100%; object-fit: contain; }
}

/* Detail viewer */
.viewer {
	--viewer-chrome: 1;
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100dvh;
	max-height: none;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
	color: var(--light);
}

.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: transparent; }

.viewer__backdrop {
	position: absolute;
	inset: 0;
	background: #050505;
	opacity: 0;
	transition: opacity .28s ease;
}

.viewer.is-open .viewer__backdrop { opacity: 1; }

.viewer__bar,
.viewer__foot {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	opacity: 0;
	transition: opacity .28s ease;
}

.viewer.is-open .viewer__bar,
.viewer.is-open .viewer__foot { opacity: var(--viewer-chrome); }

.viewer__bar { padding: calc(.75rem + env(safe-area-inset-top)) var(--gutter) .75rem; }
.viewer__foot { padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); }

.viewer__count {
	font-family: var(--font-head);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.viewer__button {
	flex: none;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: .5rem .75rem;
	background: none;
	border: 0;
	color: var(--light);
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: opacity .2s ease, transform 120ms ease-out;
}

.viewer__button--close { padding-right: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.viewer__button:active { transform: scale(.94); }

.viewer__stage {
	position: relative;
	z-index: 1;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: zoom-in;
}

.viewer__stage.is-zoomed { cursor: zoom-out; }
.viewer__stage.is-flying { overflow: visible; }
.viewer__stage.is-flying .viewer__slide[inert] { visibility: hidden; }

.viewer__track,
.viewer__slide,
.viewer__zoom { position: absolute; inset: 0; }

.viewer__track { will-change: transform; }

.viewer__zoom {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	will-change: transform;
}

.viewer__photo {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	-webkit-user-drag: none;
	transition: opacity .2s ease;
}

.viewer__photo.is-loaded { opacity: 1; }

.viewer__strip {
	display: flex;
	flex: 1;
	justify-content: safe center;
	gap: .5rem;
	min-width: 0;
	padding: 3px;
	overflow-x: auto;
	scrollbar-width: none;
}

.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__strip[hidden] { display: flex; visibility: hidden; }

.viewer__thumb {
	display: block;
	flex: none;
	width: 2.75rem;
	height: 3.5rem;
	padding: 0;
	background: none;
	border: 0;
	opacity: .5;
	cursor: pointer;
	transition: opacity .2s ease;
}

.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumb[aria-current="true"] { opacity: 1; outline: 1px solid var(--light); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
	.viewer__button:hover { opacity: .6; }
	.viewer__thumb:hover { opacity: 1; }
}

/* Reveal for images: wiped in from the bottom once */
.js [data-reveal-image] { clip-path: inset(100% 0 0 0); }
.js [data-reveal-image].is-visible { clip-path: inset(0); transition: clip-path 1s var(--ease-out); }

/* About */
.about { padding: clamp(5rem, 9vw, 10rem) var(--gutter); background: var(--bg); }

.about__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 1.8vw, 2rem);
	max-width: 1760px;
	margin: 0 auto;
}

.about__title {
	grid-column: 1 / -1;
	margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
	/* Capped by the width too: ABOUT is about 5.8em wide in Syne */
	font-size: min(clamp(2.5rem, 15vw, 17rem), (100vw - 2 * var(--gutter)) / 5.9);
	line-height: .85;
}

.about__figure {
	position: sticky;
	top: 2rem;
	grid-column: 1 / span 5;
	align-self: start;
	overflow: hidden;
	background: var(--line);
}

.about__figure img { display: block; width: 100%; height: auto; }

.about__body { grid-column: 7 / span 6; min-width: 0; }

.about__lead {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 2.5vw, 2.625rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.12;
}

.about__copy {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: clamp(2rem, 3.5vw, 3.5rem);
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	line-height: 1.6;
}

/* The artist's name above the lead, small and spaced like the other labels */
.about__name {
	margin-bottom: 1.25rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--muted);
}

.studios { margin-top: clamp(3rem, 5vw, 5.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }

.studios__label {
	font-family: var(--font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--muted);
}

.studios__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 2rem;
	margin-top: 2rem;
}

.studio { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.studio img { width: auto; max-width: 100%; height: clamp(40px, 5vw, 76px); filter: invert(1); object-fit: contain; object-position: left bottom; }
.studio__place { font-size: .875rem; font-weight: 500; color: var(--muted); }

/* Reviews at the bottom of the booking section (dark blue), under the form and across both columns:
   centred, one at a time in small type, arrows on both sides (on phones under the text, beside the
   dots). All of them share one grid cell, so the height does not jump; a shorter one sits in the
   middle of it. Text stays pure white, like the rest of the section. */
.reviews {
	grid-column: 1 / -1;
	order: 3;
	margin: 0 var(--gutter) clamp(4rem, 7vw, 6rem);
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid var(--line-dark);
	color: var(--light);
	text-align: center;
}

.reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .6rem;
	font-size: .75rem;
	font-weight: 600;
}

.reviews__stars { font-size: .6875rem; letter-spacing: .14em; }
.reviews__summary a { text-decoration: underline; text-underline-offset: .2em; transition: opacity .2s ease; }

.reviews__carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 40rem) auto;
	grid-template-areas: "prev stage next" ". dots .";
	justify-content: center;
	align-items: center;
	column-gap: clamp(.75rem, 3vw, 2.5rem);
	margin-top: 1.5rem;
}

.reviews__list { grid-area: stage; }
.reviews__arrow--prev { grid-area: prev; }
.reviews__arrow--next { grid-area: next; }
.reviews__dots { grid-area: dots; }

.review__text { font-size: .9375rem; line-height: 1.65; white-space: pre-line; }
.review__text p::before { content: open-quote; }
.review__text p::after { content: close-quote; }
.review__author { margin-top: .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }

html:not(.js) .review + .review { margin-top: 1.5rem; }
html:not(.js) .reviews__dots,
html:not(.js) .reviews__arrow { display: none; }

.js .reviews__list { display: grid; touch-action: pan-y; }

.js .review {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}

.js .review.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* The arrows: thin chevrons, quiet until hovered */
.reviews__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0 0 .2rem;
	background: none;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--light);
	font: 300 2rem/1 var(--font-body);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, transform 120ms ease-out;
}

.reviews__arrow:active { transform: scale(.92); }

.reviews__dots { display: flex; justify-content: center; margin-top: .9rem; }

.reviews__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.reviews__dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--light);
	opacity: .3;
	transition: opacity .2s ease;
}

.reviews__dot[aria-current="true"]::before { opacity: .9; }

.reviews__note { max-width: 40rem; margin: 1.25rem auto 0; font-size: .6875rem; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
	.reviews__summary a:hover { opacity: .7; }
	.reviews__arrow:hover { border-color: rgb(var(--light-rgb) / .35); }
	.reviews__dot:hover::before { opacity: .6; }
}

/* Computers: a little larger, still quiet */
@media (min-width: 1025px) {
	.reviews__summary { font-size: .8125rem; }
	.reviews__stars { font-size: .75rem; }
	.reviews__carousel { grid-template-columns: auto minmax(0, 48rem) auto; margin-top: 1.75rem; }
	.review__text { font-size: 1.125rem; }
	.review__author { margin-top: .75rem; font-size: .8125rem; }
	.reviews__arrow { width: 52px; height: 52px; font-size: 2.5rem; }
	.reviews__dots { margin-top: 1.1rem; }
	.reviews__note { max-width: 48rem; font-size: .75rem; }
}

/* Phones: the text gets the whole width, the arrows go beside the dots */
@media (max-width: 640px) {
	.reviews__carousel {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "stage stage stage" "prev dots next";
		column-gap: .25rem;
	}

	.reviews__arrow--prev { justify-self: end; }
	.reviews__arrow--next { justify-self: start; }

	.reviews__arrow, .reviews__dots { margin-top: .75rem; }
}

@media (pointer: coarse) {
	.reviews__dot { width: 32px; height: 32px; }
}

/* World Ink Battle: the video in the middle, two photos on each side */
.wib {
	--gold: #C9A35B;
	--gap: clamp(.75rem, 1.4vw, 1.5rem);
	/* The video fits the screen's height, so it stays in view while the photos pass by. */
	--video-width: min(calc(82vh * 9 / 16), 34vw);
	background: #070605;
	color: var(--light);
}

.wib__inner { max-width: 1520px; margin: 0 auto; padding: clamp(5rem, 9vw, 10rem) var(--gutter); }

.wib__head { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* WORLD INK BATTLE on one line: about 15.6em wide in Syne */
.wib__title {
	font-size: min(calc((min(100vw, 1520px) - 2 * var(--gutter)) / 16.2), 9rem);
	line-height: .9;
	white-space: nowrap;
}

.wib__text {
	max-width: 48ch;
	text-wrap: balance;
	margin-top: clamp(1.25rem, 2vw, 2rem);
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	line-height: 1.45;
}

.wib__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2.75rem;
	margin-top: .75rem;
	border-bottom: 1px solid var(--gold);
	color: var(--gold);
	font-size: .9375rem;
	font-weight: 600;
	transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.wib__link:hover { opacity: .7; }
}

.wib__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--video-width) minmax(0, 1fr);
	gap: var(--gap);
	margin-top: clamp(3rem, 5vw, 5.5rem);
}

.wib__side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* The right column starts lower, so the photos frame the video in a loose rhythm. */
.wib__side--right { padding-top: clamp(3rem, 12vw, 14rem); }

.wib__center { min-width: 0; }

/* Centred on the screen while the photos on both sides scroll past */
.wib__video {
	position: sticky;
	top: calc((100vh - var(--video-width) * 16 / 9) / 2);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #15120F;
}

.wib__photo { aspect-ratio: 3 / 4; overflow: hidden; background: #15120F; }

.wib__video video,
.wib__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wib__photo--row img { object-position: 50% 40%; }

.wib__sound {
	position: absolute;
	bottom: .85rem;
	left: .85rem;
	min-height: 2.75rem;
	padding: .55rem 1.05rem;
	background: rgb(0 0 0 / .55);
	border: 1px solid rgb(255 255 255 / .4);
	border-radius: 999px;
	color: #fff;
	font: 600 .6875rem/1 var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 120ms ease-out;
}

.wib__sound:active { transform: scale(.96); }

/* Portrait tablets and phones: the photo above the text. Sideways the photo stays beside it. */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 640px) {
	.about__figure { position: static; grid-column: 1 / -1; max-width: 560px; margin-bottom: 3rem; }
	.about__body { grid-column: 1 / -1; }
}

/* Phones held upright: two photos, the video, two photos. Held sideways they keep the desktop layout. */
@media (max-width: 768px) and (orientation: portrait), (max-width: 560px) {
	.wib__stage { grid-template-columns: 1fr 1fr; }
	.wib__side { display: contents; }
	.wib__center { grid-column: 1 / -1; }
	.wib__video { position: relative; top: auto; width: min(100%, calc(80svh * 9 / 16)); margin: 0 auto; }
}

/* WORLD INK over BATTLE: the first line is about 9.6em wide */
@media (max-width: 640px) {
	.wib__title { font-size: calc((100vw - 2 * var(--gutter)) / 9.6); }
	.wib__title-line { display: block; }
}

/* Booking: heading and contacts stay beside the form */
.booking {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
	padding-inline: max(0px, (100% - 1760px) / 2);
	background: var(--dark);
	color: var(--light);
	border-top: 1px solid var(--line-dark);
}

.booking__intro { container-type: inline-size; }

.booking__intro-inner {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: 100vh;
	padding: clamp(5rem, 7vw, 7rem) var(--gutter) clamp(2rem, 3vw, 3rem);
}

.booking__title {
	font-size: min(calc((100cqw - 2 * var(--gutter)) / 11.4), 9rem);
	line-height: .95;
}

.booking__lede {
	max-width: 30ch;
	margin-top: 2rem;
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	line-height: 1.35;
	color: rgb(var(--light-rgb) / .82);
}

.booking__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-dark);
}

.booking__detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	min-width: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.booking__label {
	margin-bottom: .6rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .6;
}

.booking__link {
	padding-bottom: .15rem;
	border-bottom: 1px solid rgb(var(--light-rgb) / .4);
	overflow-wrap: anywhere;
	transition: border-color .2s ease;
}

.booking__link--spaced { margin-top: .7rem; }

.booking__form {
	display: flex;
	flex-direction: column;
	gap: clamp(2.75rem, 4vw, 4rem);
	max-width: 880px;
	padding: clamp(5rem, 7vw, 7rem) var(--gutter) clamp(3.5rem, 5vw, 5.5rem);
}

.step { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.step__name {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .25rem;
	font-family: var(--font-head);
	font-size: clamp(1.25rem, 1.7vw, 1.625rem);
	font-weight: 800;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.step__number {
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: rgb(var(--light-rgb) / .6);
}

.booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

.field label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(var(--light-rgb) / .72);
}

.field input,
.field textarea {
	width: 100%;
	padding: .95rem 1rem;
	background: rgb(var(--light-rgb) / .07);
	border: 0;
	border-bottom: 1px solid rgb(var(--light-rgb) / .34);
	border-radius: 0;
	color: var(--light);
	font: inherit;
	transition: background-color .2s ease, border-color .2s ease;
}

.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--light-rgb) / .58); }

.field input:focus-visible,
.field textarea:focus-visible {
	outline: none;
	background: rgb(var(--light-rgb) / .12);
	border-bottom-color: var(--light);
	box-shadow: 0 1px 0 var(--light);
}

.field--file input { padding: .7rem; cursor: pointer; }
.field--file input:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; box-shadow: none; }

.field--file input::file-selector-button {
	margin-right: 1rem;
	padding: .55rem 1.1rem;
	background: var(--light);
	border: 0;
	border-radius: 999px;
	color: var(--dark);
	font: 600 .6875rem/1.4 var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.field__error, .booking__errors { color: #FF9D94; font-size: .875rem; }
.booking__errors { display: flex; flex-direction: column; gap: .25rem; }

.booking__notice {
	padding: 1rem 1.25rem;
	background: var(--light);
	color: var(--dark);
	font-weight: 600;
}

.booking__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.booking__actions { display: flex; flex-direction: column; gap: 1rem; }

.booking__submit {
	width: 100%;
	padding: 1.2rem 2rem;
	background: var(--light);
	border: 2px solid var(--light);
	border-radius: 999px;
	color: var(--dark);
	font-family: var(--font-head);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.booking__submit:active { transform: scale(.985); transition-duration: 120ms; }
.booking__note { font-size: .8125rem; color: rgb(var(--light-rgb) / .62); }
.booking__note a { text-decoration: underline; text-underline-offset: .2em; }

@media (hover: hover) and (pointer: fine) {
	.booking__link:hover { border-bottom-color: var(--light); }
	.booking__submit:hover { background: transparent; color: var(--light); transform: translateY(-2px); }
}

@media (max-width: 1024px) {
	.booking { grid-template-columns: minmax(0, 1fr); }
	/* One column: heading, then the form, then the contacts */
	.booking__intro, .booking__intro-inner { display: contents; }
	.booking__heading { padding: clamp(5rem, 7vw, 7rem) var(--gutter) 0; }
	.booking__form { order: 1; max-width: none; padding-top: 3rem; }
	.booking__details { order: 2; margin: 0 var(--gutter) clamp(3.5rem, 8vw, 5rem); }
}

@media (max-width: 640px) {
	.booking__details { grid-template-columns: 1fr; }
	.booking__row { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer {
	padding: clamp(3.5rem, 6vw, 6.5rem) var(--gutter) 1.5rem;
	background: var(--bg);
	color: var(--text);
}

.site-footer__inner { max-width: 1760px; margin: 0 auto; }

.site-footer__top {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2.5rem clamp(1rem, 1.8vw, 2rem);
}


.site-footer__col {
	display: flex;
	flex-direction: column;
	grid-column: span 4;
	align-items: flex-start;
	gap: .35rem;
	min-width: 0;
	font-size: .875rem;
	line-height: 1.5;
}

.site-footer__col a { overflow-wrap: anywhere; transition: opacity .2s ease; }

.site-footer__label {
	margin-bottom: .55rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted);
}

.site-footer__wordmark {
	margin-top: clamp(3.5rem, 7vw, 8rem);
	font-family: var(--font-head);
	font-size: min(calc((100vw - 2 * var(--gutter)) / 11.45), 9.6rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .86;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-footer__studio { line-height: 1.5; }
.site-footer__studio + .site-footer__studio { margin-top: .9rem; }
.site-footer__studio-name { display: block; font-weight: 600; }

/* Operator, consumer disputes and copyright on the left, legal links on the right */
.site-footer__legal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 1.25rem 3rem;
	margin-top: 1.75rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--muted);
}

.site-footer__fine { display: flex; flex-direction: column; gap: .35rem; max-width: 92ch; }
.site-footer__fine a { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__missing { opacity: .6; }

.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.site-footer__legal a { transition: opacity .2s ease; }

@media (hover: hover) and (pointer: fine) {
	.site-footer__col a:hover, .site-footer__legal a:hover { opacity: .6; }
}

@media (max-width: 640px) {
	.site-footer__col { grid-column: 1 / -1; }
	.site-footer__legal { grid-template-columns: minmax(0, 1fr); }
}

/* Error pages */
.error-page { max-width: 640px; margin: 0 auto; padding: 8rem var(--gutter); }
.error-page h1 { margin-bottom: 1.5rem; font-size: clamp(2.5rem, 8vw, 5rem); line-height: .95; }

/* Custom cursor, fine pointers only */
html.has-cursor, html.has-cursor * { cursor: none !important; }

.cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #000;
	pointer-events: none;
	mix-blend-mode: difference;
	transition: width .3s var(--ease-out), height .3s var(--ease-out);
}

.cursor[hidden] { display: none; }
.cursor.is-large { width: 80px; height: 80px; }
.cursor.is-view::after { content: "DETAIL"; }

/* Phones and portrait tablets: the photo fills the first screen and fades into the page, the name
   and buttons sit at the bottom over it. Landscape phones keep the side-by-side hero. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
	.hero {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
		will-change: auto;
	}

	.hero__panel { display: contents; }
	.hero__logo { width: clamp(104px, 15vw, 140px); }

	.hero__title {
		flex-grow: 0;
		padding: 0 var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
		color: var(--light);
		container-type: inline-size;
	}

	.hero__photo { position: absolute; inset: 0; z-index: 0; height: auto; }
	.hero__foot { display: none; }

	.page { margin-top: 0; box-shadow: none; }
}

/* Phones */
@media (max-width: 768px) {
	:root { --gutter: 1.5rem; --bar-top: calc(.75rem + env(safe-area-inset-top)); --bar-h: 3rem; }

	.site-nav { right: calc(.75rem + env(safe-area-inset-right)); font-size: .6875rem; letter-spacing: .08em; }
	.site-nav__link { padding: .75rem .4rem; }
}

@media (max-width: 480px) {
	.hero__actions { flex-direction: column; align-items: stretch; }
	.btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js [data-reveal] { opacity: 1; }
	.ink__layer--color { -webkit-mask-image: none; mask-image: none; }
}

/* Midnight blue theme: hero photo, beam, navigation and dark footer */
/* Hero: the photo column takes the photo's own proportions, so nothing is cropped. */
.hero { grid-template-columns: minmax(0, 1fr) min(84.5vh, 62vw); }
.hero__photo { overflow: visible; }

.ink__layer { object-fit: contain; object-position: center bottom; }
.ink__layer--base { filter: brightness(.34) saturate(.7); }

.hero__beam {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	animation: beam-in 1.6s ease .5s both;
}

.hero__logo, .hero__title, .hero__foot { z-index: 4; }

.hero__beam line { vector-effect: non-scaling-stroke; }
.hero__beam-core { stroke-width: 12px; filter: blur(7px); }
.hero__beam-halo { stroke-width: 60px; opacity: .32; filter: blur(30px); }

@keyframes beam-in { from { opacity: 0; } to { opacity: 1; } }

.hero__photo::before {
	width: 24%;
	background: linear-gradient(to right, var(--dark) 0%, rgb(6 10 20 / .72) 30%, rgb(6 10 20 / .3) 65%, transparent 100%);
}

.site-nav { background: rgb(6 10 20 / .84); border-color: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Sponsors keep their own colours here */
.sponsors__link img { filter: none; opacity: .92; }

/* Secondary text stays pure white too: translucent white turns bluish on this background. */
.site-nav__link,
.booking__lede,
.field label,
.step__number,
.booking__note { color: var(--light); }

.sponsors__label,
.booking__label { opacity: 1; }

.site-nav__link:hover { color: var(--light); opacity: .7; }

.viewer__backdrop { background: #050814; }

.site-footer { background: var(--dark); color: var(--light); border-top: 1px solid var(--line-dark); }
.site-footer__label, .site-footer__legal { color: var(--light); }
.site-footer__legal { border-top-color: rgb(255 255 255 / .28); }

/* Full-screen hero on phones: the photo covers the screen (his face stays in view) and fades into
   the page colour at the top, for the logo and menu, and at the bottom, for the name and buttons.
   The beam belongs to the desktop composition. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
	.hero__beam { display: none; }
	.ink__layer { object-fit: cover; object-position: 42% 20%; }

	.hero__photo::before {
		inset: 0;
		width: auto;
		background: linear-gradient(to bottom,
			rgb(6 10 20 / .6) 0%,
			rgb(6 10 20 / 0) 16%,
			rgb(6 10 20 / 0) 40%,
			rgb(6 10 20 / .78) 64%,
			var(--dark) 100%);
	}
}

/* Cursor over a work: solid white with dark text, so it does not pick up the photo's colours. */
.cursor.is-view {
	width: 72px;
	height: 72px;
	mix-blend-mode: normal;
	color: var(--dark);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
}

/* Language switch at the end of the navigation: the other language's flag and code */
.site-nav__lang {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-left: .35rem;
	padding: .45rem .2rem .45rem .75rem;
	border-left: 1px solid rgb(255 255 255 / .22);
	color: var(--light);
	transition: opacity .2s ease;
}

.site-nav__lang img {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgb(255 255 255 / .35);
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__lang:hover { opacity: .7; }
}

@media (max-width: 768px) {
	.site-nav__lang { margin-left: .2rem; padding: .75rem .1rem .75rem .55rem; gap: .35rem; }
	.site-nav__lang img { width: 16px; height: 16px; }
}

/* Menu button, phones only (with JavaScript; without it the links stay in the bar) */
.site-nav__toggle { display: none; }

.site-nav__toggle-icon {
	position: relative;
	width: 16px;
	height: 8px;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}

.site-nav__toggle-icon::before { top: 0; }
.site-nav__toggle-icon::after { top: calc(100% - 1.5px); }

.site-nav.is-open .site-nav__toggle-icon::before { top: calc(50% - .75px); transform: rotate(45deg); }
.site-nav.is-open .site-nav__toggle-icon::after { top: calc(50% - .75px); transform: rotate(-45deg); }

@media (max-width: 640px) {
	.js .site-nav { padding: 0 .35rem; }
	.js .site-nav__lang { margin-left: 0; padding: .75rem .65rem .75rem .45rem; border-left: 0; }

	.js .site-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		height: 100%;
		padding: 0 .55rem 0 .8rem;
		background: none;
		border: 0;
		border-left: 1px solid rgb(255 255 255 / .22);
		color: var(--light);
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		cursor: pointer;
	}

	/* The links drop down under the bar, across the screen */
	.js .site-nav__links {
		position: absolute;
		top: calc(100% + .5rem);
		right: -1px;
		flex-direction: column;
		align-items: stretch;
		width: calc(100vw - 1.5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
		padding: .5rem 0;
		background: var(--dark);
		border: 1px solid rgb(255 255 255 / .14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-.5rem);
		transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
	}

	.js .site-nav.is-open .site-nav__links {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .2s ease, transform .3s var(--ease-out);
	}

	.js .site-nav__links .site-nav__link {
		padding: 1rem 1.25rem;
		font-size: 1.5rem;
		font-weight: 800;
		letter-spacing: -.02em;
	}

	.js .site-nav__links .site-nav__link + .site-nav__link { border-top: 1px solid var(--line-dark); }
}

/* Legal information page */
.legal {
	padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(4rem, 8vw, 7rem);
	background: var(--dark);
	color: var(--light);
}

.legal__inner { max-width: 760px; margin: 0 auto; }

.legal__back {
	display: inline-flex;
	gap: .5rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: opacity .2s ease;
}

.legal__title {
	margin-top: 2rem;
	/* INFORMATION, the longest word, is about 12em wide in Syne */
	font-size: min(calc((min(100vw, 760px + 2 * var(--gutter)) - 2 * var(--gutter)) / 12.6), 5.5rem);
	line-height: .95;
}

.legal__body { margin-top: clamp(2.5rem, 5vw, 4rem); }

.legal__section { padding: 2rem 0; border-top: 1px solid var(--line-dark); scroll-margin-top: 5rem; }

.legal__section h2 {
	margin-bottom: 1rem;
	/* SPOTŘEBITELSKÝCH, the longest word, is about 17em wide in Syne */
	font-size: min(1.875rem, calc((100vw - 2 * var(--gutter)) / 17.5));
	letter-spacing: -.03em;
	line-height: 1.1;
}

.legal__section h3 { margin: 1.5rem 0 .35rem; font-size: 1rem; font-weight: 600; }

.legal__section p { font-size: 1rem; line-height: 1.65; color: rgb(255 255 255 / .86); }
.legal__section p + p { margin-top: .75rem; }
.legal__section a { text-decoration: underline; text-underline-offset: .2em; }

.legal__missing { opacity: .6; }
.legal__updated { padding-top: 2rem; border-top: 1px solid var(--line-dark); font-size: .875rem; opacity: .7; }

@media (hover: hover) and (pointer: fine) {
	.legal__back:hover, .legal__section a:hover { opacity: .7; }
}

/* The narrowest phones without JavaScript: the links and the language switch still fit on one line. */
@media (max-width: 374px) {
	html:not(.js) .site-nav { right: calc(.5rem + env(safe-area-inset-right)); padding: 0 .3rem; font-size: .625rem; letter-spacing: .05em; }
	html:not(.js) .site-nav__link { padding: .75rem .3rem; }
	html:not(.js) .site-nav__lang { padding-left: .45rem; }
}

/* Landscape phones and short windows: the side-by-side hero with smaller buttons, so it fits the height */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 641px) {
	.hero__actions { gap: .5rem; margin-top: 1.25rem; }
	.btn { padding: .7rem 1.2rem; font-size: .75rem; }
	.hero__foot { padding-top: 1rem; }
}

/* Narrowest phones: buttons keep their label on one line */
@media (max-width: 374px) {
	.btn { padding: .95rem 1rem; font-size: .8125rem; letter-spacing: .03em; }
	.field--file input::file-selector-button { margin-right: .6rem; padding-inline: .8rem; }
}

/* Touch screens: links in lists get room for a finger (about 40px each) */
@media (pointer: coarse) {
	.site-nav__link, .site-nav__lang { padding-block: .75rem; }
	.site-footer__col { gap: 0; }
	.site-footer__col a { padding-block: .55rem; }
	.site-footer__links { gap: 0 1.5rem; }
	.site-footer__links a { display: inline-block; padding-block: .65rem; }
	.booking__link, .hero__scroll, .wib__link { position: relative; }
	.booking__link::after, .hero__scroll::after {
		content: '';
		position: absolute;
		inset: -.6rem 0;
	}
}