@font-face {
	font-family: "Windlass";
	src: url("/fonts/Windlass.woff2") format("woff2"), url("/fonts/Windlass.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "MedievalSharp";
	src: url("/fonts/MedievalSharp-Book.woff2") format("woff2"), url("/fonts/MedievalSharp-Book.woff") format("woff");
	font-display: swap;
}

:root {
	--bg: #070912;
	--bg-soft: #111a28;
	--paper: #fffdf4;
	--paper-border: #d8d0c1;
	--ink: #13110d;
	--muted: #64594a;
	--gold: #f2c56b;
	--teal: #6bd3c8;
	--line: rgba(255, 255, 255, 0.1);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: #f4f5fa;
	font-family: Georgia, "Times New Roman", serif;
	background:
		linear-gradient(180deg, #060812 0%, #060812 43.5%, #f4f5fa 43.5%, #f4f5fa 100%);
}

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

a {
	color: inherit;
	text-decoration: none;
}

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

.hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	padding: 2.5rem 1.25rem 4.75rem;
	background:
		linear-gradient(180deg, rgba(10, 13, 24, 0.92), rgba(8, 10, 18, 0.98)),
		var(--bg);
}

.hero-backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.35px) 0 0 / 6.5rem 6.5rem,
		radial-gradient(circle, rgba(255, 255, 255, 0.25) 0 1px, transparent 1.25px) 2rem 2.75rem / 10.5rem 10.5rem;
	opacity: 0.2;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 1;
	width: min(60rem, 100%);
	margin: 0 auto;
}

.brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 2rem;
}

.brand-mark {
	width: min(7.75rem, 30vw);
	filter: drop-shadow(0 0.2rem 0.45rem rgba(0, 0, 0, 0.45));
}

.brand-name {
	width: min(15rem, 60vw);
	filter: invert(1) brightness(1.65) saturate(1.15);
}

.eyebrow,
.stamp {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--teal);
}

.hero h1 {
	margin: 0;
	max-width: 10.2ch;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3.5rem, 8.5vw, 7.35rem);
	line-height: 0.9;
	font-weight: 400;
}

.lead {
	max-width: 41rem;
	margin: 1.35rem 0 0;
	font-size: 1.08rem;
	line-height: 1.75;
	color: #e9edf0;
}

.lead strong {
	color: var(--gold);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0 1.2rem;
	border: 0.12rem solid #f5f5f0;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(6px);
	box-shadow: 0.28rem 0.28rem 0 rgba(0, 0, 0, 0.42);
	font-weight: 700;
}

.button-primary {
	background: var(--teal);
	color: #071018;
}

.button-secondary {
	color: #f5f5f0;
}

.paper {
	padding: 0 1rem;
	color: var(--ink);
}

.paper-inner {
	width: min(78rem, 100%);
	margin: -2.5rem auto 0;
	padding: 2rem 1.25rem 2.25rem;
	border: 1rem solid transparent;
	border-image: url("/assets/pages/bg-content.svg") 40 stretch;
	background: var(--paper);
}

.paper h2,
.section-head h2 {
	margin: 0.45rem 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.5rem, 6.8vw, 5.35rem);
	line-height: 1;
	font-weight: 400;
}

.intro {
	max-width: 46rem;
	margin: 1rem 0 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #342f27;
}

.metric-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	margin-top: 2rem;
}

.metric {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	min-height: 7.75rem;
	padding: 1rem;
	background: #f8f5ec;
	border: 0.1rem solid #e2ddd0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.metric img {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
}

.metric-value {
	margin: 0;
	font-family: "MedievalSharp", Georgia, serif;
	font-size: clamp(2.1rem, 6.5vw, 3.8rem);
	line-height: 1;
}

.metric-value span {
	font-size: 0.95rem;
	font-family: Georgia, serif;
	font-weight: 700;
}

.metric-label {
	margin: 0.3rem 0 0;
	font-size: 1rem;
	color: #312c23;
	text-transform: none;
}

.treasure {
	padding: 4rem 1rem;
	background: #f4f5fa;
	color: var(--ink);
}

.treasure-card {
	width: min(56rem, 100%);
	margin: 0 auto;
	padding: 1.35rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	background: #13273a;
	color: #f4f5fa;
	border: 0.35rem solid #f4f5fa;
	box-shadow: 0 0 0 0.12rem #13273a;
}

.treasure-icon img {
	width: 6.4rem;
	height: 6.4rem;
	filter: invert(1);
}

.treasure-copy h2 {
	margin: 0.2rem 0;
	font-family: "MedievalSharp", Georgia, serif;
	font-size: clamp(5rem, 18vw, 10rem);
	line-height: 0.82;
	font-weight: 400;
	color: var(--gold);
}

.treasure-copy p {
	margin: 0;
	max-width: 36rem;
	font-size: 1.08rem;
	line-height: 1.55;
}

.logbook {
	padding: 0 1rem 4rem;
	background: #f4f5fa;
	color: var(--ink);
}

.section-head,
.entry-grid {
	width: min(78rem, 100%);
	margin-left: auto;
	margin-right: auto;
}

.entry-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	margin-top: 1.25rem;
}

.entry {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	min-height: 7.5rem;
	padding: 1rem;
	background: #fffefa;
	border: 0.1rem solid #ddd7cb;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.entry img {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
}

.entry-value {
	margin: 0;
	font-family: "MedievalSharp", Georgia, serif;
	font-size: clamp(2rem, 5.9vw, 3.35rem);
	line-height: 1;
}

.entry-value span {
	font-size: 0.95rem;
	font-family: Georgia, serif;
	font-weight: 700;
}

.entry-label {
	margin: 0.35rem 0 0;
	font-size: 1rem;
	color: #2d281f;
	text-transform: none;
}

.farewell-note {
	padding: 4rem 1.25rem 5rem;
	background: #070913;
	color: #f4f5fa;
	text-align: center;
}

.farewell-note p {
	width: min(52rem, 100%);
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.75;
}

.signoff {
	margin-top: 1.4rem;
	font-family: "Windlass", Georgia, serif;
	font-size: 2.1rem;
	line-height: 1.1;
	color: var(--gold);
}

.reveal {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 760px) {
	.hero {
		padding: 3rem 3rem 7rem;
	}

	.paper {
		padding: 0 2rem;
	}

	.paper-inner {
		padding: 3rem 3.25rem 3.5rem;
	}

	.metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.treasure-card {
		grid-template-columns: 10rem minmax(0, 1fr);
		align-items: center;
		padding: 2rem 2.4rem;
	}

	.logbook {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.entry-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 980px) {
	.hero {
		padding-left: clamp(4rem, 8vw, 6.5rem);
		padding-right: clamp(2rem, 4vw, 3rem);
	}

	.hero-inner {
		width: min(58rem, calc(100% - 2rem));
		margin: 0;
	}
}

@media (min-width: 1120px) {
	.metric-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}