/* empath.co — stylesheet
   Rebuilt 2026-08-29. Responsive, no framework, no external requests.
   Previous version backed up in _backup_2026-08-29_065811/ */

:root {
	--ink: #23252b;
	--ink-soft: #4a4f5a;
	--paper: #fbf8f2;
	--paper-alt: #f3eee3;
	--accent: #1f5450;
	--accent-warm: #9a6b2f;
	--rule: #ddd5c5;
	--maxw: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Garamond, serif;
	font-size: 1.125rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.5rem;
}

header.site {
	padding: 2.5rem 0 1.75rem;
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}

header.site img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto;
}

main { padding: 0 0 3rem; }

footer.site {
	border-top: 1px solid var(--rule);
	margin-top: 3rem;
	padding: 2rem 0 3rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
	text-align: center;
}

footer.site a { color: var(--ink-soft); }

/* ---------- type ---------- */

h1 {
	font-size: clamp(2rem, 6vw, 2.9rem);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 2.75rem 0 0.5rem;
}

.standfirst {
	font-size: 1.25rem;
	color: var(--ink-soft);
	font-style: italic;
	margin: 0 0 2.25rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rule);
}

h2 {
	font-size: clamp(1.4rem, 3.6vw, 1.75rem);
	line-height: 1.25;
	font-weight: 600;
	margin: 3rem 0 0.9rem;
	color: var(--accent);
}

h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 2rem 0 0.4rem;
	color: var(--ink);
}

p { margin: 0 0 1.25rem; }

em { font-style: italic; }

a {
	color: var(--accent);
	text-underline-offset: 0.15em;
}

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

/* ---------- pull quote ---------- */

.pull {
	margin: 2.5rem 0;
	padding: 1.5rem 0 1.5rem 1.5rem;
	border-left: 3px solid var(--accent-warm);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--ink-soft);
}

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

/* ---------- calls to action ---------- */

.cta {
	background: var(--paper-alt);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 1.75rem;
	margin: 2.75rem 0;
	text-align: center;
}

.cta p { margin-bottom: 1rem; }
.cta p:last-child { margin-bottom: 0; }

.btn {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	font-size: 1.05rem;
	padding: 0.8rem 1.75rem;
	border-radius: 3px;
	transition: background 0.15s ease;
}

.btn:hover,
.btn:focus {
	background: var(--accent-warm);
	color: #fff;
}

/* ---------- FAQ ---------- */

.faq h3 { margin-top: 1.9rem; }
.faq h3:first-of-type { margin-top: 0.75rem; }
.faq p { margin-bottom: 0; }

/* ---------- editing placeholders ----------
   Anything in this style is unfinished text awaiting Jon's wording.
   Remove the block, or remove the class once real text is in.
   These are deliberately loud so they cannot go live unnoticed. */

.edit-me {
	background: #fff6cc;
	border: 2px dashed #c99a00;
	border-radius: 3px;
	padding: 1rem 1.15rem;
	margin: 0 0 1.25rem;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.98rem;
	color: #5a4600;
}

.edit-me strong { color: #7a3d00; }

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
	body { font-size: 1.06rem; }
	.wrap { padding: 0 1.15rem; }
	.pull { padding-left: 1.1rem; }
	.cta { padding: 1.35rem 1.1rem; }
}

/* ---------- print ---------- */

@media print {
	body { background: #fff; color: #000; }
	.cta, .edit-me { border: 1px solid #999; background: none; }
}