/* hazrac.org homepage — design from Claude Design draft (2026-07-06).
   Fonts self-hosted under /assets/fonts (SIL OFL 1.1, licenses alongside). */

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/newsreader-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

:root {
	--ink:      #211c17;
	--ink-soft: #4a4136;
	--muted:    #6b6156;
	--italic:   #5a5045;
	--cream:    #f4ede3;
	--paper:    #f7f2ea;
	--line:     #c9c0b2;
	--accent:   #a8542e;

	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: var(--serif);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ---- Layout switch (JS sets data-layout; split is the no-JS default) ---- */
.layout-centered { display: none; }
.layout-split    { display: flex; }
[data-layout="centered"] .layout-centered { display: flex; }
[data-layout="centered"] .layout-split    { display: none; }

/* Shared bits */
.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.name {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.0;
}
.tagline {
	margin: 0;
	font-style: italic;
	color: var(--italic);
	line-height: 1.35;
}
.bio {
	margin: 0;
	color: var(--ink-soft);
	line-height: 1.65;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 13px 22px;
	background: var(--ink);
	color: var(--cream);
	border-radius: 4px;
	transition: background 160ms ease;
}
.btn:hover { background: var(--accent); }
.social {
	display: flex;
	gap: 20px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	flex-wrap: wrap;
}
.social a { transition: color 140ms ease; }
.social a:hover { color: var(--accent); }

/* =====================  SPLIT SCREEN  ===================== */
.layout-split {
	min-height: 100vh;
}
.layout-split .photo {
	width: 44%;
	min-height: 100vh;
	object-fit: cover;
	/* portrait source ≈ column shape; keep the head in frame on short columns */
	object-position: 50% 22%;
	display: block;
	background: #ddd4c6;
}
.layout-split .panel {
	flex: 1;
	background: var(--cream);
	padding: 6vw 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.layout-split .name    { font-size: clamp(44px, 5.2vw, 68px); }
.layout-split .tagline { font-size: clamp(18px, 1.7vw, 21px); }
.layout-split .bio     { font-size: 16px; max-width: 34em; }
.layout-split .actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px;
}
.layout-split .btn { align-self: flex-start; }

/* =====================  CENTERED CARD  ===================== */
.layout-centered {
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	padding: 6vh 24px;
}
.layout-centered .card {
	width: 100%;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
}
.layout-centered .photo {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	background: #ddd4c6;
}
.layout-centered .name    { font-size: clamp(40px, 6vw, 58px); }
.layout-centered .tagline { font-size: clamp(17px, 2.4vw, 19px); }
.layout-centered .bio     { font-size: 17px; line-height: 1.7; max-width: 420px; }
.layout-centered .rule {
	width: 44px; height: 1px; background: var(--line); border: 0;
}
.layout-centered .btn { margin-top: 4px; }
.layout-centered .social { margin-top: 8px; }

/* -------------------------  responsive  ------------------------- */
@media (max-width: 760px) {
	.layout-split { flex-direction: column; }
	.layout-split .photo { width: 100%; min-height: 44vh; }
	.layout-split .panel { padding: 40px 28px; }
}