/*
 * Lido's palette. These values must stay in step with the app's
 * (Paybots-ai/Lido, web/src/styles.css) — the marketing page and the product are
 * the same brand, and a drifted accent reads as two companies.
 *
 * Bone ground, ink text, one terracotta accent. The serif is display-only; body
 * copy is a system stack, so there is no webfont on the text most people read.
 */

/* Self-hosted so the page fetches nothing from a third party. */
@font-face {
	font-family: "Instrument Serif";
	src: url("fonts/instrument-serif.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bone: #f7f4ef;
	--bone-2: #efeae2;
	--card: #ffffff;
	--ink: #1a1714;
	--ink-2: #423b34;
	--muted: #7a736b;
	--line: #e3ddd3;
	--accent: #b4472f;
	--accent-soft: #f6e7e2;
	--radius: 16px;
	--radius-lg: 22px;
	--shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 8px 24px -12px rgba(26, 23, 20, 0.12);
	--serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
	--gutter: 24px;
	/* Shows through wherever a photo is absent, so a missing file reads as a
	   deliberate bone-to-clay panel rather than a broken image. */
	--photo-fallback: linear-gradient(135deg, #e8d9cd, #d8c3b4 60%, #c9ab99);
}

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

body {
	margin: 0;
	padding: 0 var(--gutter);
	background: var(--bone);
	color: var(--ink);
	font: 400 16px/1.5 ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Visible only once focused, so keyboard users can jump the header. */
.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	left: var(--gutter);
	top: 12px;
	padding: 8px 14px;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

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

a {
	color: var(--accent);
}

main,
.foot {
	max-width: 880px;
	margin: 0 auto;
}

.wordmark {
	margin: 0;
	font-family: var(--serif);
	font-size: 27px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.wordmark span {
	color: var(--accent);
}

.hero {
	padding: 72px 0 0;
}

/* The terracotta period is the wordmark's mark, and here it doubles as the stop
   between the brand and the proposition — so the two need no other separator. */
.hero h1 span {
	color: var(--accent);
}

/* Sized to set on one line at the container's full width — the vw term keeps it
   there down to tablet widths before it wraps. Adding a max-width here re-wraps it. */
.hero h1 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(34px, 8.4vw, 76px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.lede {
	margin: 22px 0 0;
	font-size: 19px;
	color: var(--ink-2);
}

.cta {
	margin: 60px 0 0;
}

.cta a {
	display: inline-block;
	padding: 13px 22px;
	background: var(--ink);
	color: var(--bone);
	border-radius: var(--radius-lg);
	text-decoration: none;
	font-weight: 500;
}

.cta a:hover {
	background: var(--accent);
}

.shots {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	margin: 40px 0 0;
}

.shot {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--bone-2);
}

/* The photo is a background layer, so an absent file falls through to the
   gradient instead of rendering a broken-image icon. It sits on its own layer
   rather than on .shot so the desaturation never reaches the label. */
.shot::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--shot, none), var(--photo-fallback);
	background-size: cover;
	background-position: center;
	/* Desaturated so a tile reads as a kind of place rather than one venue. */
	filter: saturate(0.75) brightness(0.82);
}

/* Over a scrim, not beside the photo: the label has to stay legible on whatever
   image is dropped in, and the top of the gradient must reach transparent so it
   does not read as a bar. */
.shot figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(to top, rgba(20, 16, 13, 0.78), transparent);
	color: #fff;
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.1;
}

.shot--dining {
	--shot: url("photos/restaurant.jpg");
}

.shot--golf {
	--shot: url("photos/golf.jpg");
	--photo-fallback: linear-gradient(215deg, #e8d9cd, #d8c3b4 60%, #c9ab99);
}

.shot--spa {
	--shot: url("photos/spa.jpg");
	--photo-fallback: linear-gradient(160deg, #efeae2, #ddcdc2 60%, #cbb0a0);
}

.shot--tennis {
	--shot: url("photos/tennis.jpg");
	--photo-fallback: linear-gradient(120deg, #e8d9cd, #cbb0a0);
}

.shot--beauty {
	--shot: url("photos/beauty.jpg");
	--photo-fallback: linear-gradient(200deg, #efeae2, #d8c3b4 70%, #c9ab99);
}

.shot--fitness {
	--shot: url("photos/fitness.jpg");
	--photo-fallback: linear-gradient(145deg, #e3ddd3, #c9ab99);
}

.concierge {
	margin: 56px 0 0;
}

.concierge h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(28px, 5vw, 40px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.concierge p {
	margin: 16px 0 0;
	font-size: 18px;
	color: var(--ink-2);
}

/* Four across on a wide screen, 2x2 once there isn't room — set explicitly rather
   than by auto-fit, so the count never depends on how long the headings are. */
.cards {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	margin: 56px 0 0;
}

.cards article {
	padding: 22px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.cards h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.cards p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin-top: 88px;
	padding: 24px 0 48px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

.foot p {
	margin: 0;
}

.foot .wordmark {
	font-size: 20px;
	margin-right: auto;
}

@media (max-width: 900px) {
	.shots,
	.cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	:root {
		--gutter: 18px;
	}

	.hero {
		padding-top: 40px;
	}

	.lede,
	.concierge p {
		font-size: 17px;
	}

	.shots {
		gap: 14px;
		margin-top: 48px;
	}

	.concierge,
	.cards {
		margin-top: 52px;
	}

	.cards {
		gap: 12px;
	}

	.cards article {
		padding: 16px;
	}

	.foot {
		margin-top: 64px;
	}
}