/*
 * RootsPersona — persona page templates (Archive card, Chronicle).
 *
 * Every colour, font, radius and shadow comes from a --rp-* custom property with a
 * fallback, so a theme restyles the templates from outside, e.g.
 *
 *   :root { --rp-accent: #b06a2c; --rp-font-heading: "Lora", serif; }
 *   :root[data-theme="dark"] { --rp-ink: #efe7da; --rp-card: #2a2622; }
 *
 * Variables:
 *   --rp-ink            main text            --rp-ink-2        secondary text
 *   --rp-muted          muted text / labels  --rp-accent       accent (links, markers)
 *   --rp-accent-ink     text on accent       --rp-accent-soft  pale accent background
 *   --rp-card           card background      --rp-surface      section/tile background
 *   --rp-line           lines and borders    --rp-line-w       line width
 *   --rp-radius         card radius          --rp-radius-sm    small radius
 *   --rp-shadow         card shadow          --rp-gap          base spacing
 *   --rp-font-heading   headings             --rp-font-body    body text
 *   --rp-font-caption   labels and captions  --rp-male / --rp-female  avatar tints
 *
 * The templates never set the page width or the outer background: that is the theme's job.
 */

.rp-tpl {
	--rp-_gap: var(--rp-gap, 1rem);
	color: var(--rp-ink, #2b2721);
	font-family: var(--rp-font-body, inherit);
	line-height: 1.55;
	display: flex;
	flex-direction: column;
	gap: calc(var(--rp-_gap) * 1.75);
	min-width: 0;
}

.rp-tpl *,
.rp-tpl *::before,
.rp-tpl *::after {
	box-sizing: border-box;
}

.rp-tpl :where(h2, h3, h4) {
	font-family: var(--rp-font-heading, inherit);
	color: var(--rp-ink, #2b2721);
	margin: 0;
	line-height: 1.2;
	font-weight: 600;
}

.rp-tpl :where(ul, ol, dl) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rp-tpl :where(a) {
	color: var(--rp-accent, #8a5a2b);
}

.rp-tpl :where(p) {
	margin: 0;
}

/* ---------- Sections ---------- */

.rp-section {
	display: flex;
	flex-direction: column;
	gap: var(--rp-_gap);
	min-width: 0;
}

.rp-section__title {
	font-size: 1.45rem;
}

.rp-bio {
	font-size: 1rem;
	color: var(--rp-ink, #2b2721);
	overflow-wrap: anywhere;
}

.rp-bio p + p {
	margin-top: 0.75em;
}

.rp-bio img {
	max-width: 100%;
	height: auto;
}

/* ---------- Portrait / monogram ---------- */

.rp-portrait {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: center;
}

.rp-portrait__link {
	display: block;
	line-height: 0;
}

.rp-portrait__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
	border-radius: var(--rp-radius, 0.75rem);
	box-shadow: var(--rp-shadow, 0 6px 18px rgba(43, 39, 33, 0.18));
}

.rp-portrait__caption {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.85rem;
	color: var(--rp-muted, #7a6f61);
	text-align: center;
}

.rp-monogram {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--rp-accent-soft, #efe3d0);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rp-accent, #8a5a2b);
	font-family: var(--rp-font-heading, inherit);
	box-shadow: var(--rp-shadow, 0 6px 18px rgba(43, 39, 33, 0.12));
}

.rp-monogram__letter {
	font-size: 4.5rem;
	line-height: 1;
}

/* ---------- Person card ---------- */

.rp-person {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	background: var(--rp-card, #fffdf8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius-sm, 0.5rem);
	color: var(--rp-ink, #2b2721);
	text-decoration: none;
}

.rp-tpl a.rp-person {
	color: var(--rp-ink, #2b2721);
	text-decoration: none;
}

.rp-tpl a.rp-person:hover,
.rp-tpl a.rp-person:focus-visible {
	border-color: var(--rp-accent, #8a5a2b);
}

.rp-tpl a.rp-person:hover .rp-person__name,
.rp-tpl a.rp-person:focus-visible .rp-person__name {
	color: var(--rp-accent, #8a5a2b);
}

.rp-person__avatar {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rp-font-heading, inherit);
	font-size: 1.05rem;
	color: var(--rp-accent, #8a5a2b);
	background: var(--rp-accent-soft, #efe3d0);
}

.rp-person--m .rp-person__avatar {
	background: var(--rp-male, var(--rp-accent-soft, #e6e2d6));
}

.rp-person--f .rp-person__avatar {
	background: var(--rp-female, var(--rp-accent-soft, #f1e2d6));
}

.rp-person__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rp-person__rel {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rp-muted, #7a6f61);
}

.rp-person__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.rp-person__years,
.rp-person__note {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.85rem;
	color: var(--rp-ink-2, #5c5246);
}

.rp-person--unknown {
	border-style: dashed;
	color: var(--rp-muted, #7a6f61);
	background: transparent;
}

.rp-person--unknown .rp-person__name {
	font-weight: 400;
	color: var(--rp-muted, #7a6f61);
}

.rp-person--unknown .rp-person__avatar {
	background: transparent;
	color: var(--rp-muted, #7a6f61);
	border: var(--rp-line-w, 1px) dashed var(--rp-line, #d9cfbf);
}

.rp-private {
	color: var(--rp-muted, #7a6f61);
	font-style: italic;
}

/* =====================================================================
   Template 1: Archive card
   ===================================================================== */

.rp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem);
	gap: calc(var(--rp-_gap) * 1.5);
	align-items: center;
}

.rp-hero--monogram {
	grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
}

.rp-hero__text {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}

.rp-hero__name {
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
	overflow-wrap: anywhere;
}

.rp-hero__years {
	font-family: var(--rp-font-heading, inherit);
	font-size: 1.15rem;
	color: var(--rp-accent, #8a5a2b);
}

.rp-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	color: var(--rp-ink-2, #5c5246);
}

.rp-hero__meta-item {
	position: relative;
	padding-left: 1.1rem;
}

.rp-hero__meta-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--rp-accent, #8a5a2b);
}

.rp-hero__lead {
	color: var(--rp-ink-2, #5c5246);
	max-width: 42rem;
}

.rp-hero__portrait.rp-monogram {
	width: 100%;
	max-width: 12rem;
	justify-self: center;
}

/* Fact tiles */

.rp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.75rem;
}

.rp-fact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.8rem 0.9rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius-sm, 0.5rem);
	min-width: 0;
}

.rp-fact__label {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rp-muted, #7a6f61);
}

.rp-fact__value {
	overflow-wrap: anywhere;
}

/* Family cards */

.rp-family {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0.9rem;
}

.rp-family__card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius, 0.75rem);
	min-width: 0;
}

.rp-family__title {
	font-size: 1.1rem;
}

.rp-family__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Three-generation chart */

.rp-chart {
	--rp-_card-h: 5rem;
	--rp-_join: 1.4rem;
	display: grid;
	grid-template-columns:
		[gp] minmax(0, 1fr) [j1] var(--rp-_join)
		[par] minmax(0, 1fr) [j2] var(--rp-_join)
		[self] minmax(0, 1.15fr) [j3] var(--rp-_join)
		[kids] minmax(0, 1fr);
	grid-template-rows: repeat(4, minmax(var(--rp-_card-h), auto));
	row-gap: 0.6rem;
	padding: 1rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius, 0.75rem);
	overflow-x: auto;
}

.rp-chart--no-gp {
	grid-template-columns:
		[par] minmax(0, 1fr) [j2] var(--rp-_join)
		[self] minmax(0, 1.15fr) [j3] var(--rp-_join)
		[kids] minmax(0, 1fr);
}

.rp-chart--no-gp.rp-chart--no-kids {
	grid-template-columns: [par] minmax(0, 1fr) [j2] var(--rp-_join) [self] minmax(0, 1.15fr);
}

.rp-chart--no-kids:not(.rp-chart--no-gp) {
	grid-template-columns:
		[gp] minmax(0, 1fr) [j1] var(--rp-_join)
		[par] minmax(0, 1fr) [j2] var(--rp-_join)
		[self] minmax(0, 1.15fr);
}

.rp-chart--no-parents {
	grid-template-columns: [self] minmax(0, 1.15fr) [j3] var(--rp-_join) [kids] minmax(0, 1fr);
}

.rp-chart__node {
	height: var(--rp-_card-h);
	align-self: center;
	overflow: hidden;
}

.rp-chart__node .rp-person__name,
.rp-chart__node .rp-person__note {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rp-chart__node .rp-person__name {
	-webkit-line-clamp: 2;
	line-height: 1.25;
}

.rp-chart__node .rp-person__note {
	-webkit-line-clamp: 1;
}

.rp-chart__gp--4 { grid-column: gp; grid-row: 1; }
.rp-chart__gp--5 { grid-column: gp; grid-row: 2; }
.rp-chart__gp--6 { grid-column: gp; grid-row: 3; }
.rp-chart__gp--7 { grid-column: gp; grid-row: 4; }
.rp-chart__join--pat { grid-column: j1; grid-row: 1 / 3; }
.rp-chart__join--mat { grid-column: j1; grid-row: 3 / 5; }
.rp-chart__father { grid-column: par; grid-row: 1 / 3; }
.rp-chart__mother { grid-column: par; grid-row: 3 / 5; }
.rp-chart__join--par { grid-column: j2; grid-row: 1 / 5; }
.rp-chart__self { grid-column: self; grid-row: 1 / 5; }
.rp-chart__join--kids { grid-column: j3; grid-row: 1 / 5; }
.rp-chart__kids { grid-column: kids; grid-row: 1 / 5; }

/* A bracket joining two cards (centres at 25% and 75%) into one line to the right. */
.rp-chart__join {
	position: relative;
	display: block;
}

.rp-chart__join::before {
	content: "";
	position: absolute;
	left: 0;
	right: 50%;
	top: 25%;
	bottom: 25%;
	border: var(--rp-line-w, 1px) solid var(--rp-line, #cdbfa8);
	border-left: 0;
}

.rp-chart__join::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 0;
	top: 50%;
	border-top: var(--rp-line-w, 1px) solid var(--rp-line, #cdbfa8);
}

.rp-chart__join--kids::before {
	display: none;
}

.rp-chart__join--kids::after {
	left: 0;
}

.rp-chart__self {
	border-color: var(--rp-accent, #8a5a2b);
	box-shadow: var(--rp-shadow, 0 6px 18px rgba(43, 39, 33, 0.12));
	background: var(--rp-card, #fffdf8);
}

.rp-chart__self .rp-person__avatar {
	background: var(--rp-accent, #8a5a2b);
	color: var(--rp-accent-ink, #fffdf8);
}

.rp-chart__kids {
	position: relative;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-left: var(--rp-_join);
}

.rp-chart__kids::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--rp-_card-h) / 2);
	bottom: calc(var(--rp-_card-h) / 2);
	border-left: var(--rp-line-w, 1px) solid var(--rp-line, #cdbfa8);
}

.rp-chart__kid {
	position: relative;
}

.rp-chart__kid::before {
	content: "";
	position: absolute;
	left: calc(var(--rp-_join) * -1);
	width: var(--rp-_join);
	top: 50%;
	border-top: var(--rp-line-w, 1px) solid var(--rp-line, #cdbfa8);
}

/* Descendant counters */

.rp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 0.75rem;
}

.rp-stat {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.9rem 1rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius-sm, 0.5rem);
}

.rp-stat__value {
	font-family: var(--rp-font-heading, inherit);
	font-size: 1.8rem;
	color: var(--rp-accent, #8a5a2b);
	line-height: 1;
}

.rp-stat__label {
	color: var(--rp-ink-2, #5c5246);
}

/* Gallery */

.rp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: 0.75rem;
}

.rp-gallery__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.rp-gallery__link {
	display: block;
	line-height: 0;
}

.rp-gallery__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rp-radius-sm, 0.5rem);
}

.rp-gallery__caption {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.8rem;
	color: var(--rp-muted, #7a6f61);
}

/* =====================================================================
   Template 2: Chronicle (line of generations)
   ===================================================================== */

.rp-chron__head {
	display: flex;
	align-items: center;
	gap: calc(var(--rp-_gap) * 1.25);
}

.rp-chron__portrait {
	flex: 0 0 auto;
	width: 8.5rem;
}

.rp-chron__portrait .rp-portrait__img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.rp-chron__portrait.rp-monogram .rp-monogram__letter {
	font-size: 3.4rem;
}

.rp-chron__title {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.rp-chron__name {
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
	overflow-wrap: anywhere;
}

.rp-chron__years {
	font-family: var(--rp-font-heading, inherit);
	font-size: 1.1rem;
	color: var(--rp-accent, #8a5a2b);
}

.rp-chron__subtitle {
	color: var(--rp-ink-2, #5c5246);
}

.rp-line {
	--rp-_rail: 1.6rem;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(var(--rp-_gap) * 1.5);
	padding-left: calc(var(--rp-_rail) + 0.6rem);
}

.rp-line::before {
	content: "";
	position: absolute;
	left: calc(var(--rp-_rail) / 2);
	top: 0.4rem;
	bottom: 0.4rem;
	border-left: calc(var(--rp-line-w, 1px) * 2) solid var(--rp-line, #d9cfbf);
}

.rp-line__gen {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-width: 0;
}

.rp-line__gen::before {
	content: "";
	position: absolute;
	left: calc((var(--rp-_rail) / 2 + 0.6rem) * -1 - 0.4rem);
	top: 0.25rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--rp-card, #fffdf8);
	border: calc(var(--rp-line-w, 1px) * 2) solid var(--rp-accent, #8a5a2b);
}

.rp-line__gen.is-current::before {
	width: 1.1rem;
	height: 1.1rem;
	left: calc((var(--rp-_rail) / 2 + 0.6rem) * -1 - 0.55rem);
	top: 0.15rem;
	background: var(--rp-accent, #8a5a2b);
}

.rp-line__label {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rp-muted, #7a6f61);
	font-weight: 600;
}

.rp-line__gen.is-current > .rp-line__label {
	font-family: var(--rp-font-heading, inherit);
	font-size: 1.35rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rp-ink, #2b2721);
}

.rp-line__body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}

.rp-line__gen.is-current > .rp-line__body {
	padding: 1.1rem 1.2rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius, 0.75rem);
}

.rp-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
}

.rp-people--compact {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.rp-chron__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.6rem 1.2rem;
}

.rp-chron__fact dt {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rp-muted, #7a6f61);
}

.rp-chron__fact dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.rp-chron__marriage .rp-person {
	max-width: 30rem;
}

.rp-chron__subhead {
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.rp-chron__with {
	font-family: var(--rp-font-caption, inherit);
	font-size: 0.85rem;
	color: var(--rp-muted, #7a6f61);
}

.rp-chron__with + .rp-people {
	margin-top: -0.4rem;
}

.rp-chron__counts {
	font-size: 1.05rem;
	color: var(--rp-ink-2, #5c5246);
}

.rp-chron__empty {
	color: var(--rp-muted, #7a6f61);
	font-style: italic;
}

/* =====================================================================
   Narrow screens (down to 375px)
   ===================================================================== */

@media (max-width: 46rem) {
	.rp-hero,
	.rp-hero--monogram {
		grid-template-columns: minmax(0, 1fr);
	}

	.rp-hero__portrait {
		order: -1;
		width: 100%;
		max-width: 16rem;
		justify-self: center;
	}

	.rp-hero__portrait.rp-monogram {
		max-width: 8rem;
	}

	.rp-hero__portrait.rp-monogram .rp-monogram__letter {
		font-size: 3.2rem;
	}

	/* The chart becomes a labelled list: grandparents and parents in pairs, then the person and children. */
	.rp-chart,
	.rp-chart--no-gp,
	.rp-chart--no-kids,
	.rp-chart--no-parents {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 0.6rem;
		overflow: visible;
	}

	.rp-chart > * {
		grid-column: auto;
		grid-row: auto;
	}

	.rp-chart__join {
		display: none;
	}

	.rp-chart__node {
		height: auto;
	}

	.rp-chart__self,
	.rp-chart__kids {
		grid-column: 1 / -1;
	}

	.rp-chart__kids {
		padding-left: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rp-chart__kids::before,
	.rp-chart__kid::before {
		display: none;
	}

	.rp-chron__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.rp-chron__portrait {
		width: 6.5rem;
	}
}

@media (max-width: 26rem) {
	.rp-chart,
	.rp-chart--no-gp,
	.rp-chart--no-kids,
	.rp-chart--no-parents,
	.rp-chart__kids {
		grid-template-columns: minmax(0, 1fr);
	}

	.rp-line {
		--rp-_rail: 1.2rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rp-tpl a.rp-person {
		transition: border-color 0.15s ease;
	}
}

/* Chronicle split into parts: the person's facts and biography shown under the header. */
.rp-chron__intro {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.1rem 1.2rem;
	background: var(--rp-surface, #f6f1e8);
	border: var(--rp-line-w, 1px) solid var(--rp-line, #d9cfbf);
	border-radius: var(--rp-radius, 0.75rem);
	min-width: 0;
}