/**
 * Resume — screen and print.
 *
 * Every measurement here is in points, taken straight from the source
 * artboards, where one design unit equals one point. A4 is 595.28pt x
 * 841.89pt, so the page boxes below are the paper, one to one. Do not swap
 * these for pixels or rems: the print output depends on them.
 */

.fmr-resume {
	--fmr-ink: #3e3e3e;
	--fmr-ink-strong: #1b0e43;
	--fmr-accent: #1b0e43;
	--fmr-sand: #fad592;
	--fmr-paper: #ffffff;
	--fmr-page-bg: #f4f2ee;
	--fmr-rule: #e6e2db;
	--fmr-scale: 1;

	font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
	color: var(--fmr-ink);
	background: var(--fmr-page-bg);
	padding: 24px 0 48px;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- toolbar */

.fmr-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 auto 24px;
	padding: 0 16px;
}

.fmr-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 22px;
	border: 1px solid var(--fmr-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--fmr-accent);
	cursor: pointer;
}

.fmr-btn--primary {
	background: var(--fmr-accent);
	color: #fff;
}

.fmr-btn:hover,
.fmr-btn:focus-visible {
	filter: brightness(1.15);
}

.fmr-toolbar__hint {
	font-size: 13px;
	color: #6b6b6b;
}

/* ------------------------------------------------------------------ pages */

.fmr-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.fmr-page {
	position: relative;
	box-sizing: border-box;
	width: 595.28pt;
	height: 841.89pt;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--fmr-paper);
	box-shadow: 0 2px 24px rgba(27, 14, 67, 0.14);
	transform: scale(var(--fmr-scale));
	transform-origin: top center;
	/* Screen only: collapse the gap left by a scaled-down page. */
	margin-bottom: calc((var(--fmr-scale) - 1) * 841.89pt);
}

.fmr-page__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
	padding: 14pt 16pt 18pt;
}

/* --------------------------------------------------------- header card */

.fmr-card {
	box-sizing: border-box;
	padding: 7pt 9pt 9pt;
	margin-bottom: 12pt;
	background: var(--fmr-paper);
	border-radius: 6pt;
	box-shadow: 0 1pt 6pt rgba(27, 14, 67, 0.08);
}

.fmr-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12pt;
	margin-bottom: 6pt;
}

.fmr-card__name {
	font-size: 14pt;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fmr-ink-strong);
}

.fmr-card__title {
	font-size: 14pt;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fmr-ink-strong);
}

.fmr-card__summary {
	margin: 0;
	font-size: 10pt;
	font-weight: 300;
	line-height: 1.34;
	white-space: pre-line;
}

/* ------------------------------------------------------------ experience */

.fmr-experience {
	display: flex;
	flex-direction: column;
	gap: 11pt;
}

.fmr-job {
	display: flex;
	align-items: flex-start;
	gap: 4pt;
	break-inside: avoid;
}

.fmr-job__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fmr-job__company {
	margin: 0;
	font-size: 11pt;
	font-weight: 700;
	line-height: 1.18;
	color: var(--fmr-ink-strong);
}

.fmr-job__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10pt;
	margin: 2pt 0 4pt;
	font-size: 10pt;
	font-weight: 500;
}

.fmr-job__dates {
	flex: 0 0 auto;
	font-weight: 400;
	white-space: nowrap;
}

.fmr-job__bullets {
	font-size: 10pt;
	font-weight: 300;
	line-height: 1.32;
}

/*
 * The source renders each bullet as a line inside a single text block, with no
 * marker glyph. Keeping it that way preserves the wrapping the pages were laid
 * out around.
 */
.fmr-job__bullets p {
	margin: 0;
}

/* ------------------------------------------------------------- education */

.fmr-education {
	margin-top: 14pt;
}

.fmr-education__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10pt 34pt;
	margin-top: 8pt;
}

.fmr-edu {
	display: flex;
	align-items: flex-start;
	gap: 8pt;
}

.fmr-edu__logo {
	flex: 0 0 auto;
	width: 60pt;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmr-edu__logo .fmr-svg svg,
.fmr-edu__logo img {
	max-width: 60pt;
	max-height: 40pt;
}

.fmr-edu__logo:empty {
	display: none;
}

.fmr-edu__school {
	margin: 0 0 2pt;
	font-size: 11pt;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fmr-ink-strong);
}

.fmr-edu__line {
	margin: 0;
	font-size: 11pt;
	font-weight: 400;
	line-height: 1.28;
}

/* --------------------------------------------------------------- toolset */

.fmr-section-title {
	margin: 0;
	font-size: 12pt;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fmr-ink-strong);
}

.fmr-toolset {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22pt 12pt;
	margin-top: 20pt;
}

.fmr-tool-group {
	break-inside: avoid;
}

.fmr-tool-list {
	list-style: none;
	margin: 10pt 0 0;
	padding: 0;
}

.fmr-tool {
	display: flex;
	align-items: center;
	gap: 9pt;
	min-height: 24pt;
	margin: 0;
	font-size: 10pt;
	font-weight: 300;
}

.fmr-tool__logo {
	flex: 0 0 auto;
	width: 24pt;
	height: 24pt;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * An empty slot keeps its space so the columns stay aligned, but only an
 * editor sees the placeholder — visitors and the PDF get clean whitespace.
 */
.fmr-resume--editable .fmr-tool__logo:empty {
	background: var(--fmr-rule);
	border-radius: 4pt;
}

.fmr-tool__logo .fmr-svg svg,
.fmr-tool__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fmr-tool__label {
	min-width: 0;
}

/* ----------------------------------------------------------- logo tiles */

.fmr-tile {
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 38pt;
	height: 38pt;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3pt;
	border-radius: 6pt;
	overflow: hidden;
}

.fmr-tile--initials {
	border: 0.5pt solid rgba(62, 62, 62, 0.14);
}

.fmr-tile__initials {
	font-size: 12pt;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fmr-tile .fmr-svg,
.fmr-tile .fmr-svg svg,
.fmr-tile img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.fmr-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}

.fmr-svg svg {
	max-width: 100%;
	max-height: 100%;
}

/* ------------------------------------------------------------ ornaments */

.fmr-ornaments {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.fmr-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(28pt);
	opacity: 0.5;
}

.fmr-blob--tl {
	top: -70pt;
	left: -60pt;
	width: 240pt;
	height: 240pt;
	background: rgba(250, 213, 146, 0.75);
}

.fmr-blob--left {
	top: 300pt;
	left: -110pt;
	width: 220pt;
	height: 220pt;
	background: rgba(27, 14, 67, 0.16);
}

.fmr-blob--bottom {
	bottom: -90pt;
	left: 120pt;
	width: 300pt;
	height: 220pt;
	background: rgba(250, 213, 146, 0.6);
}

.fmr-blob--right {
	top: 520pt;
	right: -100pt;
	width: 240pt;
	height: 240pt;
	background: rgba(27, 14, 67, 0.12);
}

.fmr-confetti {
	position: absolute;
	right: 16pt;
	bottom: 22pt;
	width: 170pt;
	height: 86pt;
	opacity: 0.9;
}

/* The toolset grid runs to the foot of the page; the cluster would sit on it. */
.fmr-page:has(.fmr-toolset) .fmr-confetti {
	display: none;
}

/* ------------------------------------------------- overflow warning (UI) */

.fmr-page__overflow {
	display: none;
}

.fmr-page.is-overflowing .fmr-page__overflow {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	padding: 6pt 10pt;
	font-size: 9pt;
	font-weight: 600;
	color: #7a2c00;
	background: rgba(255, 214, 153, 0.95);
	border-top: 1pt solid #d99b3d;
}

.fmr-page.is-overflowing {
	outline: 2px solid #d99b3d;
}

/* ------------------------------------------------------------ responsive */

@media screen and (max-width: 860px) {
	.fmr-resume {
		padding: 16px 0 32px;
	}

	.fmr-pages {
		gap: 16px;
	}
}

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

@page {
	size: A4;
	margin: 0;
}

@media print {
	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
	}

	body * {
		visibility: hidden;
	}

	.fmr-resume,
	.fmr-resume * {
		visibility: visible;
	}

	.fmr-resume {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0;
		background: #fff;
	}

	.fmr-toolbar,
	.fmr-page__overflow {
		display: none !important;
	}

	.fmr-tool__logo:empty {
		background: none !important;
	}

	.fmr-pages {
		display: block;
		gap: 0;
	}

	.fmr-page {
		width: 210mm;
		height: 297mm;
		margin: 0;
		transform: none;
		box-shadow: none;
		overflow: hidden;
		break-after: page;
		page-break-after: always;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.fmr-page:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	.fmr-page.is-overflowing {
		outline: none;
	}

	/* Keep the tiles, blobs and confetti in the PDF. */
	.fmr-resume,
	.fmr-tile,
	.fmr-blob,
	.fmr-confetti,
	.fmr-tool__logo,
	.fmr-card {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Blur filters render unpredictably in print engines; a soft radial
	   gradient reproduces the same wash reliably. */
	.fmr-blob {
		filter: none;
		background-image: radial-gradient(closest-side, currentColor, transparent);
	}

	.fmr-blob--tl,
	.fmr-blob--bottom {
		color: rgba(250, 213, 146, 0.7);
		background-color: transparent;
	}

	.fmr-blob--left,
	.fmr-blob--right {
		color: rgba(27, 14, 67, 0.14);
		background-color: transparent;
	}
}