/* ==========================================================================
   TSPR landing page

   Landscape screens: every element is placed on a 1671 × 941 "stage" using the
   exact coordinates of the approved design. 1 design px = var(--u), so the whole
   composition scales with the viewport and keeps its proportions.
   Portrait / small screens: the same elements stack in normal flow.
   ========================================================================== */

body.home {
	background: #04150c;
	color: var(--ivory);
	overflow-x: hidden;
}

.landing {
	--sans: "Jost", "Futura", "Century Gothic", var(--font-sans);
	--u: min(calc(100vw / 1671), calc(100vh / 941));
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: #04150c url("../img/bg-landing.jpg") center / cover no-repeat;
	font-family: var(--sans);
	color: var(--ivory);
	text-align: center;
}

@supports (height: 100svh) {
	.landing { --u: min(calc(100vw / 1671), calc(100svh / 941)); }
}

.landing__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(1671 * var(--u));
	height: calc(941 * var(--u));
	transform: translate(-50%, -50%);
}

.landing__stage > * {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	line-height: 1;
}

/* ---------- Logo (extracted from the approved artwork) ---------- */
.landing__logo {
	left: calc(551 * var(--u));
	right: auto;
	top: calc(238 * var(--u));
	width: calc(571 * var(--u));
	font-size: 0;
}

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

/* ---------- Text ---------- */
.landing__tagline,
.landing__name,
.landing__title {
	text-transform: uppercase;
	white-space: nowrap;
	/* Pad the start by the tracking so the trailing letter-space doesn't push the line off-centre. */
	padding-left: var(--ls);
	letter-spacing: var(--ls);
	text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .35);
}

.landing__tagline {
	--ls: .292em;
	left: calc(4 * var(--u)); /* optical centring to the artwork */
	top: calc(450.5 * var(--u));
	font-size: calc(28 * var(--u));
	font-weight: 350;
}

.landing__name {
	--ls: .368em;
	left: calc(5 * var(--u));
	top: calc(580.5 * var(--u));
	font-size: calc(32 * var(--u));
	font-weight: 500;
}

.landing__title {
	--ls: .3125em;
	top: calc(628.5 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 300;
}

/* ---------- Contact row ---------- */
.landing__contact {
	left: calc(3 * var(--u));
	top: calc(718 * var(--u));
	height: calc(37 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(47.5 * var(--u));
	padding: 0;
	list-style: none;
}

.landing__contact li { display: flex; }

.landing__link {
	display: inline-flex;
	align-items: center;
	gap: calc(29 * var(--u));
	font-size: calc(26 * var(--u));
	font-weight: 300;
	letter-spacing: .045em;
	line-height: 1;
	color: var(--ivory);
	text-decoration: none;
	transition: color .2s ease;
}

.landing__link .icon { display: block; flex: none; }
.landing__link span { position: relative; top: calc(-2.5 * var(--u)); }
.landing__link .icon--mail     { width: calc(42 * var(--u)); height: calc(30 * var(--u)); }
.landing__link .icon--linkedin { width: calc(36 * var(--u)); height: calc(37 * var(--u)); }

.landing__link--linkedin { gap: calc(26.5 * var(--u)); }

.landing__link--linkedin span {
	text-decoration: underline;
	text-decoration-thickness: max(1px, calc(1.6 * var(--u)));
	text-underline-offset: .26em;
}

.landing__link:hover,
.landing__link:focus-visible { color: var(--gold); }

.landing__link:focus-visible {
	outline: 1px solid var(--gold);
	outline-offset: calc(8 * var(--u));
}

.landing__divider {
	width: 1px;
	height: calc(29 * var(--u));
	margin-left: calc(-3 * var(--u));
	background: rgba(243, 240, 233, .9);
}

/* ==========================================================================
   Portrait / small screens: stack in flow, sized to the screen width
   ========================================================================== */
@media (max-aspect-ratio: 1/1), (max-width: 767px) {
	.landing {
		/* Content column is ~740 design px wide (the tagline); fit it inside 16px gutters. */
		--u: min(calc((100vw - 32px) / 760), 1px);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 48px 16px;
		background-position: 18% center;
	}

	.landing__stage {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.landing__stage > * { position: static; }

	.landing__logo {
		width: calc(571 * var(--u) * 1.15);
		max-width: min(100%, 571px); /* never upscale the raster logo past its native size */
	}

	/* Text sizes get a floor so they stay readable on phones. */
	.landing__tagline { font-size: max(12px, calc(29 * var(--u))); margin-top: calc(8 * var(--u)); --ls: .2em; }
	.landing__name    { font-size: max(16px, calc(33 * var(--u))); margin-top: max(44px, calc(104 * var(--u))); --ls: .3em; }
	.landing__title   { font-size: max(12px, calc(25 * var(--u))); margin-top: max(12px, calc(16 * var(--u))); --ls: .24em; }

	.landing__contact {
		height: auto;
		margin-top: max(36px, calc(62 * var(--u)));
		gap: max(18px, calc(47.5 * var(--u)));
	}

	.landing__link { font-size: max(15px, calc(25 * var(--u))); gap: max(10px, calc(29 * var(--u))); }
	.landing__link .icon--mail     { width: max(24px, calc(42 * var(--u))); height: max(17px, calc(30 * var(--u))); }
	.landing__link .icon--linkedin { width: max(21px, calc(36 * var(--u))); height: max(22px, calc(37 * var(--u))); }
	.landing__divider { height: max(18px, calc(29 * var(--u))); }
}

/* Very narrow phones: put the two contact links on their own lines. */
@media (max-width: 359px) {
	.landing__contact { flex-direction: column; }
	.landing__divider { width: 28px; height: 1px; }
}

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
	.landing__stage > * { animation: tspr-fade 1.2s cubic-bezier(.2, .7, .2, 1) both; }
	.landing__tagline { animation-delay: .1s; }
	.landing__name,
	.landing__title   { animation-delay: .25s; }
	.landing__contact { animation-delay: .4s; }
}

@keyframes tspr-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}