/* Off The Highway's public page (app/index.php): one black screen, lined out in dotted borders. Colours only ever as the
   variables printed by app/index.php: App settings > Look's (--oth-bg, --oth-text, --oth-line), the buttons' white
   and black (--oth-white, --oth-black) and each card's own (--card-bg, --card-ink). On a big enough screen the page fits the window and only
   the cards scroll, inside their column; on phones and short windows it stacks and scrolls like any page */

:root {
	--oth-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--oth-muted: color-mix(in srgb, var(--oth-text) 60%, var(--oth-bg));
	--oth-dots: 2px dotted var(--oth-line);
	--oth-head: 84px;
	--oth-foot: 56px;
	--oth-pad: 24px;
	--oth-gutter: 40px;
	--oth-ease: cubic-bezier(.22, .8, .24, 1);
}

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

html, body {
	margin: 0;
	height: 100%;
}

body {
	background: var(--oth-bg);
	color: var(--oth-text);
	font-family: var(--oth-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

a {
	color: inherit;
}

img {
	display: block;
	max-width: 100%;
}

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

.oth-frame {
	height: 100vh;
	height: 100dvh;
	display: grid;
	grid-template-rows: var(--oth-head) minmax(0, 1fr) var(--oth-foot);
}

/* the header: logo on the left, the Client Area boxed in on the right */
.oth-head {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: var(--oth-dots);
}

.oth-logo {
	display: flex;
	align-items: center;
	padding: 0 var(--oth-gutter);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -.01em;
	text-decoration: none;
}

.oth-logo img {
	max-height: 44px;
	width: auto;
}

.oth-client {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 var(--oth-gutter);
	border-left: var(--oth-dots);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s, color .3s;
}

.oth-client:hover {
	background: var(--oth-text);
	color: var(--oth-bg);
}

.oth-client span {
	transition: transform .3s var(--oth-ease);
}

.oth-client:hover span {
	transform: translateX(4px);
}

/* the middle: the big text on two thirds, the cards on the last third past a dotted divider */
.oth-main {
	display: grid;
	grid-template-columns: 2fr 1fr;
	min-height: 0;
}

.oth-statement {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* near the top rather than in the middle */
	justify-content: flex-start;
	align-items: flex-start;
	padding: clamp(12px, 3vh, 36px) var(--oth-gutter) var(--oth-pad);
	min-width: 0;
}

/* the highway up the middle, in the dotted lines' grey, with its exit in the text colour */
.oth-highway {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	pointer-events: none;
	/* toned down overall, it's the background */
	opacity: .7;
	/* fading out going up, and gently towards the left too so the side under the text stays a little quieter */
	-webkit-mask-image: linear-gradient(to top, #000 35%, transparent 95%), linear-gradient(to right, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .6) 70%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to top, #000 35%, transparent 95%), linear-gradient(to right, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .6) 70%);
	mask-composite: intersect;
}

/* the highway's own lines a little softer than the slip road, so they're there without fighting the text */
.oth-highway-edge {
	stroke: var(--oth-line);
	stroke-width: 3;
	opacity: .75;
}

.oth-highway-lane {
	stroke: var(--oth-line);
	stroke-width: 3;
	stroke-dasharray: 26 30;
	opacity: .55;
	animation: oth-drive 1.6s linear infinite;
}

.oth-highway-exit {
	stroke: var(--oth-text);
	stroke-width: 3;
	stroke-linecap: round;
	opacity: .45;
}

.oth-highway-exit-lane {
	stroke: var(--oth-text);
	stroke-width: 3;
	stroke-dasharray: 20 24;
	opacity: .45;
	animation: oth-drive 1.6s linear infinite;
}

/* small faint dashes down the middle of the slip road, running out along it */
.oth-highway-ramp-lane {
	stroke: var(--oth-text);
	stroke-width: 2;
	stroke-dasharray: 10 16;
	opacity: .3;
	animation: oth-drive-ramp 1.6s linear infinite;
}

@keyframes oth-drive-ramp {
	to { stroke-dashoffset: -26; }
}

/* the text sits over the road */
.oth-statement > *:not(.oth-highway) {
	position: relative;
}

@keyframes oth-drive {
	to { stroke-dashoffset: -56; }
}


.oth-statement h1 {
	margin: 0;
	font-weight: 800;
	/* as big as the column and the window's height both allow */
	font-size: min(10.5vw, 24vh);
	line-height: .92;
	letter-spacing: -.045em;
	max-width: 100%;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* the phrases take turns in one place, the box as big as the biggest so nothing below it moves: the one leaving
   lifts away and blurs out as the next rises in from below and comes into focus */
.oth-phrases {
	display: grid;
	align-items: center;
}

.oth-phrase {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(.35em);
	filter: blur(10px);
	transition: opacity .9s var(--oth-ease), transform 1s var(--oth-ease), filter .9s var(--oth-ease);
}

.oth-phrase.is-on {
	opacity: 1;
	transform: none;
	filter: none;
	transition-delay: .25s;
}

.oth-phrase.is-off {
	transform: translateY(-.35em);
	transition-delay: 0s;
}

/* shorter phrases show bigger, each wraps onto as many lines as it needs */
.oth-phrase-medium {
	font-size: min(7.4vw, 15vh);
}

.oth-phrase-long {
	font-size: min(5.2vw, 11vh);
	line-height: 1;
}

.oth-intro {
	max-width: 34rem;
	margin-top: 14px;
	color: var(--oth-muted);
	font-size: 18px;
}

.oth-intro p {
	margin: 0 0 .7em;
}

.oth-intro p:last-child {
	margin-bottom: 0;
}

.oth-intro strong {
	color: var(--oth-text);
}

.oth-statement .oth-button {
	margin-top: 32px;
}

.oth-cards {
	border-left: var(--oth-dots);
	padding: var(--oth-pad);
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--oth-line) transparent;
	outline: none;
}

/* short cards, just the logo with room around it, so most of them fit the column; the rest are a scroll away */
.oth-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--card-bg);
	color: var(--card-ink);
	outline: none;
}

/* the logo always in the middle of its own fixed height; a click on it opens the panel below and the card grows */
.oth-card-face {
	flex: 0 0 auto;
	height: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 32px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	/* the logo opens the description */
	cursor: pointer;
}

.oth-card-face:focus-visible {
	outline-offset: -6px;
}

.oth-card-face img {
	max-width: 62%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.oth-card-name {
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 34px);
	letter-spacing: -.02em;
	text-align: center;
}

/* the description opens under the logo, from nothing to its own height */
.oth-card-panel {
	flex: 0 0 auto;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s var(--oth-ease);
}

/* no padding of its own, so it closes right down to nothing: its contents keep their distance with margins */
.oth-card-panel-inner {
	min-height: 0;
	overflow: hidden;
	background: var(--oth-bg);
	color: var(--oth-text);
	/* the panel isn't a link, only the logo and the button are */
	cursor: default;
}

/* the text in a dotted box, inside the panel so nothing of it shows while it's closed */
.oth-card-panel-box {
	padding: 22px 28px 24px 36px;
	border: var(--oth-dots);
}

.oth-card-panel-box > :last-child {
	margin-bottom: 0;
}

.oth-card.is-open .oth-card-panel {
	grid-template-rows: 1fr;
}

.oth-card-panel h2 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 600;
}

.oth-card-panel p {
	margin-top: 0;
	margin-bottom: 16px;
	color: var(--oth-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* buttons: white with black text */
.oth-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--oth-white);
	background: var(--oth-white);
	color: var(--oth-black);
	font: 600 14px var(--oth-font);
	text-decoration: none;
	cursor: pointer;
	transition: background .25s, color .25s;
}

.oth-button:hover {
	background: transparent;
	color: var(--oth-white);
}

.oth-button-outline {
	background: transparent;
	color: var(--oth-white);
}

.oth-button-outline:hover {
	background: var(--oth-white);
	color: var(--oth-black);
}

/* the footer */
.oth-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
	padding: 0 var(--oth-gutter);
	border-top: var(--oth-dots);
	color: var(--oth-muted);
	font-size: 13px;
}

.oth-foot-right {
	display: flex;
	gap: 32px;
}

.oth-foot a {
	text-decoration: none;
	transition: color .2s;
}

.oth-foot a:hover {
	color: var(--oth-text);
}

/* the cookie question, only when there's tracking */
.oth-cookies {
	position: fixed;
	right: 16px;
	bottom: calc(var(--oth-foot) + 16px);
	left: 16px;
	z-index: 10;
	max-width: 520px;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	padding: 18px 20px;
	background: var(--oth-bg);
	border: var(--oth-dots);
	font-size: 14px;
}

.oth-cookies[hidden] {
	display: none;
}

.oth-cookies p {
	flex: 1 1 240px;
	margin: 0;
}

.oth-cookies div {
	display: flex;
	gap: 8px;
}

/* phones, tablets and short windows: one column, the page scrolls, the cards stack under the text */
@media (max-width: 900px), (max-height: 560px) {
	body {
		overflow: auto;
	}

	.oth-frame {
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		grid-template-rows: var(--oth-head) 1fr var(--oth-foot);
	}

	.oth-main {
		grid-template-columns: 1fr;
	}

	.oth-statement {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.oth-statement h1 {
		font-size: clamp(56px, 15vw, 120px);
	}

	.oth-phrase-medium {
		font-size: clamp(44px, 11vw, 90px);
	}

	.oth-phrase-long {
		font-size: clamp(34px, 8vw, 64px);
	}

	.oth-cards {
		border-left: 0;
		border-top: var(--oth-dots);
		overflow: visible;
	}
}

@media (max-width: 600px) {
	:root {
		--oth-head: 68px;
		--oth-gutter: 16px;
		--oth-pad: 16px;
	}

	.oth-client {
		padding: 0 16px;
		letter-spacing: .08em;
	}

	.oth-intro {
		font-size: 16px;
	}

	.oth-foot {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.oth-frame {
		grid-template-rows: var(--oth-head) 1fr auto;
	}

	.oth-foot-right {
		flex-wrap: wrap;
		gap: 4px 20px;
	}
}

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

	.oth-highway-lane,
	.oth-highway-exit-lane,
	.oth-highway-ramp-lane {
		animation: none;
	}

	/* the phrases still take turns, just a plain fade */
	.oth-phrase,
	.oth-phrase.is-off {
		transform: none;
		filter: none;
		transition-property: opacity;
		transition-duration: .6s !important;
	}
}