:root {
	--ink: #14181d;
	--paper: #f4efe6;
	--card: #fffaf3;
	--line: #e4d8c4;
	--gold: #8d6424;
	--gold-deep: #6d4c16;
	--muted: #5e564c;
	--bad: #8c2f2f;
	--bad-bg: #f8e6e2;
	--ok: #1f5c45;
	--ok-bg: #e5f3ec;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at top left, rgba(141, 100, 36, 0.16), transparent 32rem),
		var(--paper);
	font-family: "Segoe UI", system-ui, sans-serif;
	line-height: 1.5;
}

h1, .brand {
	font-family: Palatino, "Palatino Linotype", Georgia, serif;
	font-weight: 600;
	letter-spacing: -0.02em;
}

a { color: var(--gold-deep); }

.container { width: min(960px, calc(100% - 2rem)); margin: 0 auto; }

.site-header {
	border-bottom: 1px solid var(--line);
	background: rgba(255, 250, 243, 0.9);
}

.header-inner, .header-nav, .actions, .inline-form {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-inner { justify-content: space-between; min-height: 4.25rem; }

.brand {
	color: var(--ink);
	text-decoration: none;
	font-size: 1.25rem;
}

.header-nav a, .link-button {
	color: var(--ink);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.nav-cta, .btn-gold, .btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	text-decoration: none;
}

.nav-cta, .btn-gold {
	background: var(--gold);
	color: #fffaf3;
}

.btn-gold { border: 0; cursor: pointer; font: inherit; }
.btn-gold:hover, .nav-cta:hover { background: var(--gold-deep); color: #fffaf3; }

.btn-ghost {
	border: 1px solid var(--line);
	color: var(--ink);
	background: transparent;
}

.page { padding: 2.5rem 0 4rem; }

.hero h1, .panel h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.15; margin: 0 0 1rem; }

.eyebrow {
	margin: 0 0 0.75rem;
	color: var(--gold-deep);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
}

.lede { font-size: 1.15rem; max-width: 40rem; }
.muted { color: var(--muted); }

.panel {
	max-width: 32rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 1.25rem;
	padding: 1.5rem;
	box-shadow: 0 18px 50px rgba(20, 24, 29, 0.06);
}

.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-weight: 600; }
.field input {
	min-height: 2.75rem;
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	padding: 0.55rem 0.8rem;
	background: #fff;
	color: var(--ink);
	font: inherit;
}
.field input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.field small { color: var(--bad); }

.alert { border-radius: 0.8rem; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-bad { background: var(--bad-bg); color: var(--bad); }
.foot-note { margin-top: 1.25rem; }
.inline-form { margin: 0; }

.panel-wide { max-width: 44rem; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; }
.section-head h1 { margin-bottom: 0.35rem; }

.steps {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}
.steps a, .steps span {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	background: transparent;
}
.steps .is-current span { color: #fffaf3; background: var(--gold); border-color: var(--gold); }
.steps .is-done a { color: var(--ink); background: #fff; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset legend { font-weight: 600; padding: 0; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; margin-top: 0.75rem; }
.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.check input { width: 1rem; height: 1rem; accent-color: var(--gold-deep); }

.archetype-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.archetype-card, .message {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 1.25rem;
	padding: 1.25rem 1.4rem;
}
.archetype-card h2 { font-family: Palatino, Georgia, serif; font-size: 1.6rem; margin: 0 0 0.4rem; }
.archetype-card p { margin: 0.35rem 0; }
.badge {
	display: inline-flex;
	margin: 0 0 0.5rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--gold);
	color: #fffaf3;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.activation { color: var(--gold-deep); font-style: italic; }
.message { margin: 0; font-size: 1.05rem; }

.wallpaper-frame {
	width: min(280px, 100%);
	aspect-ratio: 1024 / 1792;
	margin: 1rem 0;
	border-radius: 1.5rem;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #1c160f;
}
.wallpaper-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn-gold:disabled { opacity: 0.65; cursor: progress; }

@media (max-width: 640px) {
	.header-inner { align-items: flex-start; padding: 0.8rem 0; flex-direction: column; }
	.actions, .section-head { flex-direction: column; align-items: stretch; }
	.field-row, .checks { grid-template-columns: 1fr; }
}