/* ==========================================================================
   Family Heritage — the "tidy look" (1.87)
   One layer, loaded after main.css, that gives every page the same fonts,
   spacing, buttons, boxes and form fields. Remove this file to go back to the
   old look - nothing else depends on it.
   ========================================================================== */

/* 1. Shared sizes ---------------------------------------------------------- */
:root {
	--fh-s1: 4px;  --fh-s2: 8px;  --fh-s3: 12px; --fh-s4: 16px;
	--fh-s5: 24px; --fh-s6: 32px; --fh-s7: 48px; --fh-s8: 64px;
	--fh-r: 12px;
	--fh-r-lg: 16px;
	--fh-box-shadow: 0 1px 2px rgba(45, 35, 15, .05), 0 6px 18px rgba(45, 35, 15, .06);
	--fh-pop-shadow: 0 12px 32px rgba(45, 35, 15, .16);
	--fh-field-h: 46px;
	--fh-ui: "Inter", "Mukta", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 2. Text ------------------------------------------------------------------ */
.fh-heritage { font-size: 17px; line-height: 1.7; }
.fh-heritage .fh-muted { color: var(--fh-muted); }

/* Page titles: the same size and gap on every page. */
.fh-heritage .fh-page__title { margin: 0 0 var(--fh-s2); }
.fh-heritage .fh-page > .fh-page__title + .fh-content,
.fh-heritage .fh-tree-head .fh-muted,
.fh-heritage .fh-tree-intro { font-size: 1.06rem; color: var(--fh-muted); max-width: 680px; }

/* Section headings inside pages: dark and clear (not pale gold). */
.fh-heritage .fh-content h2,
.fh-heritage .fh-profile__sec h2,
.fh-heritage .fh-ornament-title,
.fh-heritage .fh-home__story h2 {
	color: var(--fh-ink);
	font-size: clamp(1.55rem, 3vw, 1.9rem);
	line-height: 1.2;
	margin: var(--fh-s7) 0 var(--fh-s3);
}
.fh-heritage .fh-content h3,
.fh-heritage .fh-profile__sec h3 {
	font-family: var(--fh-ui);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--fh-ink);
	margin: var(--fh-s5) 0 var(--fh-s2);
}
/* Long reading text: a comfortable line length. */
.fh-heritage .fh-content > p,
.fh-heritage .fh-home__story p { max-width: 72ch; }
/* Highlighted words in stories: calmer - dark text, a soft underline. */
.fh-heritage .fh-content strong,
.fh-heritage .fh-home__story strong {
	color: var(--fh-ink);
	font-weight: 600;
}
/* Left-aligned text reads more easily than stretched (justified) lines. */
.fh-heritage .fh-content,
.fh-heritage .fh-home__story,
.fh-heritage .fh-branch-note__desc,
.fh-heritage .fh-profile__story .fh-content { text-align: left; }
.fh-heritage .fh-content p, .fh-heritage .fh-home__story p { text-align: left; }

/* 3. Page rhythm ---------------------------------------------------------- */
.fh-heritage .fh-main > .fh-wrap,
.fh-heritage .fh-page { padding-top: var(--fh-s6); padding-bottom: var(--fh-s8); }
.fh-heritage .fh-tree-head { margin-bottom: var(--fh-s4); }
.fh-heritage .fh-tree-head .fh-muted { margin: 0 auto; }

/* 4. Buttons: one style everywhere ----------------------------------------- */
.fh-heritage .fh-btn,
.fh-heritage a.fh-btn,
.fh-heritage button.fh-btn,
.fh-heritage input[type="submit"],
.fh-heritage button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 10px;
	font: 600 .98rem/1.2 var(--fh-ui);
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
html[lang^="ne"] .fh-heritage .fh-btn { font-size: 1rem; }
.fh-heritage .fh-btn.fh-btn--ghost,
.fh-heritage a.fh-btn.fh-btn--ghost {
	background: var(--fh-surface);
	color: var(--fh-ink);
	border: 1px solid var(--fh-line);
}
.fh-heritage .fh-btn.fh-btn--ghost:hover { border-color: var(--fh-accent); color: var(--fh-accent); filter: none; }
.fh-heritage .fh-btn--small { min-height: 36px; padding: 6px 14px; font-size: .92rem; }
.fh-heritage .fh-icon-btn { border-radius: 10px; font-family: var(--fh-ui); }

/* 5. Form fields: one style everywhere ------------------------------------- */
.fh-heritage .fh-main input[type="text"],
.fh-heritage .fh-main input[type="search"],
.fh-heritage .fh-main input[type="email"],
.fh-heritage .fh-main input[type="tel"],
.fh-heritage .fh-main input[type="number"],
.fh-heritage .fh-main input[type="password"],
.fh-heritage .fh-main select,
.fh-heritage .fh-main textarea {
	min-height: var(--fh-field-h);
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--fh-line) 70%, var(--fh-ink) 30%);
	border-radius: 10px;
	background-color: var(--fh-surface);
	color: var(--fh-ink);
	font: 400 1rem/1.4 var(--fh-ui);
	box-shadow: none;
}
.fh-heritage .fh-main textarea { min-height: 140px; }
.fh-heritage .fh-main input:focus-visible,
.fh-heritage .fh-main select:focus-visible,
.fh-heritage .fh-main textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--fh-gold) 55%, transparent);
	outline-offset: 1px;
	border-color: var(--fh-gold);
}
.fh-heritage .fh-main label { font-family: var(--fh-ui); }

/* 6. Boxes (cards): the same corners, border and shadow -------------------- */
.fh-heritage .fh-card,
.fh-heritage .fh-profile__head,
.fh-heritage .fh-fcard,
.fh-heritage .fh-otd,
.fh-heritage .fh-contact-form {
	border-radius: var(--fh-r-lg);
	border: 1px solid var(--fh-line);
	box-shadow: var(--fh-box-shadow);
}

/* 7. Family Tree page ------------------------------------------------------ */
/* The branch box: still first and still gold, but neater. */
.fh-heritage .fh-branch-bar { border-radius: var(--fh-r-lg); padding: var(--fh-s4) var(--fh-s5); margin-bottom: var(--fh-s4); gap: var(--fh-s3) var(--fh-s4); }

/* One toolbar. */
.fh-treebar {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fh-s3) var(--fh-s4);
	background: var(--fh-surface);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-r-lg);
	box-shadow: var(--fh-box-shadow);
	padding: var(--fh-s3) var(--fh-s4);
	margin: 0 0 var(--fh-s3);
	font-family: var(--fh-ui);
}
.fh-treebar__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fh-treebar__label,
.fh-treebar .fh-layout-switch > span:first-child,
.fh-treebar .fh-view-root > span {
	font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fh-muted);
}
.fh-treebar__find { flex: 1 1 150px; }
.fh-treebar__find input { width: 100%; }
.fh-treebar .fh-view-root { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fh-treebar .fh-view-root[hidden] { display: none; }
.fh-treebar .fh-view-root select { min-width: 200px; }
.fh-treebar .fh-layout-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.fh-treebar .fh-layout-switch__btns { display: inline-flex; border: 1px solid var(--fh-line); border-radius: 10px; overflow: hidden; padding: 0; background: var(--fh-surface); }
.fh-treebar .fh-layout-switch button { min-height: 44px; border: 0; border-radius: 0; padding: 0 14px; background: none; font: 600 .92rem var(--fh-ui); color: var(--fh-ink); cursor: pointer; }
.fh-treebar .fh-layout-switch button[aria-pressed="true"] { background: var(--fh-accent); color: #fff; }
.fh-treebar__actions { display: flex; align-items: flex-end; gap: var(--fh-s2); margin-left: auto; flex-wrap: wrap; }
.fh-treebar .fh-tool-btn { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 10px; }

/* Pop-up menus: "Show" and "Colour key". */
.fh-pop { position: relative; }
.fh-pop > summary { list-style: none; }
.fh-pop > summary::-webkit-details-marker { display: none; }
.fh-pop__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	min-height: 44px; min-width: 190px; padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--fh-line) 70%, var(--fh-ink) 30%); border-radius: 10px;
	background: var(--fh-surface); color: var(--fh-ink);
	font: 600 .98rem var(--fh-ui); cursor: pointer; white-space: nowrap;
}
.fh-pop__btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.fh-pop[open] > .fh-pop__btn::after { transform: translateY(2px) rotate(-135deg); }
.fh-pop__btn:hover { border-color: var(--fh-accent); }
.fh-pop__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--fh-gold) 55%, transparent); outline-offset: 1px; }
.fh-pop__btn--plain { min-width: 0; }
.fh-pop__panel {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
	background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-r);
	box-shadow: var(--fh-pop-shadow); padding: var(--fh-s3);
}
.fh-key .fh-pop__panel { left: auto; right: 0; width: min(360px, 90vw); }

/* The views inside "Show": a simple list in three groups. */
.fh-show__panel { width: 300px; }
.fh-treebar .fh-view-switch { display: flex; flex-direction: column; gap: var(--fh-s2); border: 0; background: none; padding: 0; border-radius: 0; }
.fh-treebar .fh-view-group,
.fh-treebar .fh-view-group--solo { display: flex; flex-direction: column; align-items: stretch; gap: 2px; border: 0; background: none; padding: 0; box-shadow: none; border-radius: 0; }
.fh-treebar .fh-view-group + .fh-view-group { border-top: 1px solid var(--fh-line); padding-top: var(--fh-s2); }
.fh-treebar .fh-view-group__label { display: block; padding: 2px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fh-muted); }
.fh-treebar .fh-view-group__btns { display: flex; flex-direction: column; gap: 2px; }
.fh-treebar .fh-view-switch button {
	display: block; width: 100%; text-align: left;
	padding: 8px 10px; border: 0; border-radius: 8px; background: none;
	font: 500 .96rem/1.3 var(--fh-ui); color: var(--fh-ink); cursor: pointer; box-shadow: none;
}
.fh-treebar .fh-view-switch button:hover { background: color-mix(in srgb, var(--fh-gold) 12%, var(--fh-surface)); }
.fh-treebar .fh-view-switch button[aria-pressed="true"] { background: color-mix(in srgb, var(--fh-gold) 20%, var(--fh-surface)); color: var(--fh-ink); font-weight: 700; }

/* Colour key panel. */
.fh-key__panel .fh-legend { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 var(--fh-s3); justify-content: start; font-size: .94rem; }
.fh-key__panel .fh-legend__item { margin: 0; }
.fh-key__panel .fh-lamp-note,
.fh-key__panel .fh-marr-note { text-align: left; font-size: .9rem; margin: var(--fh-s2) 0 0; color: var(--fh-muted); line-height: 1.5; }

/* "Shown: …" line under the toolbar. */
.fh-heritage .fh-tree-page > .fh-view-note { margin: 0 0 var(--fh-s3); font-size: .95rem; color: var(--fh-muted); text-align: left; }

/* The tree, with zoom buttons floating in its corner. */
.fh-tree-stage { position: relative; }
.fh-zoom { position: absolute; z-index: 5; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
.fh-zoom .fh-icon-btn { min-width: 40px; height: 40px; padding: 0 6px; background: var(--fh-surface); box-shadow: var(--fh-box-shadow); font-size: .86rem; }
.fh-heritage .fh-tree-viewport { border-radius: var(--fh-r-lg); }
.fh-tree-foot { text-align: center; margin: var(--fh-s4) 0 0; color: var(--fh-muted); font-family: var(--fh-ui); font-size: .95rem; }
.fh-tree-foot .fh-btn { margin-left: 6px; }

/* While a branch is being chosen, only the branch box shows. */
.fh-tree-page.is-choosing > .fh-treebar,
.fh-tree-page.is-choosing > .fh-view-note,
.fh-tree-page.is-choosing > .fh-tree-stage,
.fh-tree-page.is-choosing > .fh-tree-foot { display: none !important; }

/* Phones. */
@media (max-width: 700px) {
	.fh-heritage .fh-main > .fh-wrap, .fh-heritage .fh-page { padding-top: var(--fh-s5); padding-bottom: var(--fh-s7); }
	.fh-treebar { padding: var(--fh-s3); gap: var(--fh-s3); }
	.fh-treebar__field, .fh-treebar .fh-view-root, .fh-treebar__find { flex: 1 1 100%; }
	.fh-pop__btn { min-width: 0; width: 100%; }
	.fh-show__panel { width: 100%; }
	.fh-treebar .fh-view-root select { min-width: 0; width: 100%; }
	.fh-treebar .fh-layout-switch, .fh-treebar .fh-layout-switch__btns { width: 100%; }
	.fh-treebar .fh-layout-switch button { flex: 1; }
	.fh-treebar__actions { margin-left: 0; width: 100%; }
	.fh-treebar__actions > * { flex: 1; }
	.fh-treebar .fh-tool-btn { justify-content: center; width: 100%; }
	.fh-key .fh-pop__btn { justify-content: center; }
	.fh-key .fh-pop__panel { right: 0; left: auto; }
	.fh-zoom { top: 8px; right: 8px; }
	.fh-zoom .fh-icon-btn { min-width: 36px; height: 36px; }
}

/* Dark mode. */
html.fh-dark .fh-pop__panel, html.fh-dark .fh-treebar { background: var(--fh-surface); border-color: var(--fh-line); }
html.fh-dark .fh-treebar .fh-view-switch button { color: var(--fh-ink); }

/* The toolbar and the "Shown" line line up with the branch box above. */
.fh-tree-page > .fh-treebar,
.fh-heritage .fh-tree-page > .fh-view-note,
.fh-tree-page > .fh-branch-bar { max-width: 1120px; margin-left: auto; margin-right: auto; }
.fh-heritage .fh-tree-page > .fh-view-note { padding: 0 4px; }

/* Family Map (1.87.1): "Homes now" first, the other layers after "Also show:". */
.fh-map-filters__also { align-self: center; font: 600 .85rem var(--fh-ui); color: var(--fh-muted); margin: 0 2px 0 6px; }
.fh-lock__note { margin: var(--fh-s3, 12px) 0 0; font-size: .85rem; color: var(--fh-muted); text-align: center; }

/* Forms never push wider than a phone (fieldsets don't shrink on their own). */
.fh-heritage fieldset { min-width: 0; }
.fh-heritage input[type="file"] { max-width: 100%; }

/* ==========================================================================
   1.90 - more beautiful: person pages, gallery wall, finishing touches
   ========================================================================== */
:root {
	--fh-shadow-soft: 0 1px 2px rgba(60, 40, 15, .05), 0 10px 28px rgba(60, 40, 15, .08);
	--fh-shadow-lift: 0 2px 4px rgba(60, 40, 15, .06), 0 18px 40px rgba(60, 40, 15, .13);
}
html.fh-dark { --fh-shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3); --fh-shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4); }

/* Small tags (branch, pachha, profession). */
.fh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px; font: 600 .86rem/1.5 var(--fh-ui); background: color-mix(in srgb, var(--fh-accent) 12%, var(--fh-surface)); color: var(--fh-accent); }
.fh-chip--job { background: color-mix(in srgb, var(--fh-rhodo, #8a2a35) 10%, var(--fh-surface)); color: var(--fh-rhodo, #8a2a35); }
.fh-chip .fh-icon { flex: none; }

/* ----- Person page ----- */
.fh-heritage .fh-profile { max-width: 1060px; }
.fh-heritage .fh-profile__head {
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--fh-s4) var(--fh-s6);
	text-align: left; padding: var(--fh-s5) var(--fh-s6);
	background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 20px; box-shadow: var(--fh-shadow-soft);
}
.fh-heritage .fh-profile__photo { width: 176px; height: 176px; border: 0; box-shadow: 0 0 0 5px var(--fh-surface), 0 0 0 7px var(--fh-gold); }
.fh-heritage .fh-profile__ini { font-family: var(--fh-display, var(--fh-serif)); color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--fh-accent) 55%, #fff), var(--fh-accent)); }
.fh-heritage .fh-profile__name { font-size: clamp(2.1rem, 4.4vw, 3rem); }
.fh-heritage .fh-profile__alt { margin: 2px 0 6px; }
.fh-heritage .fh-profile__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.fh-heritage .fh-profile__dates, .fh-heritage .fh-profile__aka { font-family: var(--fh-ui); color: var(--fh-muted); font-size: .98rem; }
.fh-heritage .fh-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fh-s5); margin-top: var(--fh-s5); align-items: start; }
.fh-heritage .fh-profile__sec {
	margin: 0; text-align: left; min-width: 0;
	background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 18px; padding: var(--fh-s5) var(--fh-s5) var(--fh-s4);
	box-shadow: var(--fh-shadow-soft);
}
.fh-heritage .fh-profile__sec--wide { grid-column: 1 / -1; }
.fh-heritage .fh-profile__sec > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--fh-s3); font-size: 1.6rem; color: var(--fh-ink); }
.fh-heritage .fh-profile__sec > h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--fh-line), transparent); }
.fh-heritage .fh-profile__sec h3, .fh-heritage .fh-profile__sec h4 { font: 700 .92rem/1.4 var(--fh-ui); letter-spacing: .01em; color: var(--fh-muted); margin: var(--fh-s4) 0 var(--fh-s2); }
.fh-heritage .fh-profile__sec .fh-pcards { justify-content: flex-start; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 var(--fh-s2); }
.fh-heritage .fh-pcard { min-width: 0; max-width: none; background: var(--fh-bg); border: 1px solid var(--fh-line); border-radius: 14px; box-shadow: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fh-heritage .fh-pcard:hover, .fh-heritage .fh-pcard:focus-visible { transform: translateY(-2px); box-shadow: var(--fh-shadow-soft); border-color: color-mix(in srgb, var(--fh-gold) 60%, var(--fh-line)); }
.fh-heritage .fh-pcard__img { box-shadow: 0 0 0 2px var(--fh-surface), 0 0 0 3px color-mix(in srgb, var(--fh-gold) 70%, transparent); }
.fh-heritage .fh-pcard__name { font-family: var(--fh-ui); font-size: 1rem; }
/* Life story: a decorated first letter. */
.fh-heritage .fh-profile__story .fh-content { max-width: none; margin: 0; }
.fh-heritage .fh-profile__story .fh-content > p:first-child::first-letter { float: left; font: 400 3.4rem/.8 var(--fh-display, var(--fh-serif)); color: var(--fh-rhodo, #8a2a35); margin: 8px 10px 0 0; }
.fh-heritage .fh-profile__story blockquote { margin: var(--fh-s3) 0; padding: var(--fh-s3) var(--fh-s4); border: 0; border-radius: 12px; background: color-mix(in srgb, var(--fh-gold) 12%, var(--fh-surface)); font-style: italic; }
/* Ancestors: a quiet numbered path. */
.fh-heritage .fh-lineup { text-align: left; }
/* Places: a simple timeline of years. */
.fh-heritage .fh-timeline { list-style: none; margin: 0; padding: 0; max-width: none; }
.fh-heritage .fh-timeline li { display: grid; grid-template-columns: 48px 16px 1fr; gap: 10px; padding: 0; border: 0; font-family: var(--fh-ui); font-size: .98rem; line-height: 1.45; }
.fh-heritage .fh-timeline__when { text-align: right; font-weight: 700; color: var(--fh-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.fh-heritage .fh-timeline__dot { position: relative; min-height: 42px; }
.fh-heritage .fh-timeline__dot::before { content: ""; position: absolute; left: 3px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--fh-gold); box-shadow: 0 0 0 3px var(--fh-surface); z-index: 1; }
.fh-heritage .fh-timeline__dot::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: -6px; width: 2px; background: var(--fh-line); }
.fh-heritage .fh-timeline li:last-child .fh-timeline__dot::after { display: none; }
.fh-heritage .fh-timeline__what { padding-bottom: var(--fh-s3); }
.fh-heritage .fh-timeline__what small { display: block; }
.fh-heritage .fh-profile__photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fh-heritage .fh-profile__photos a { border-radius: 12px; }
.fh-heritage .fh-profile__photos img { transition: transform .4s ease; }
.fh-heritage .fh-profile__photos a:hover img { transform: scale(1.05); }
.fh-heritage .fh-profile__acts { margin-top: var(--fh-s5); }
@media (max-width: 760px) {
	.fh-heritage .fh-profile__head { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--fh-s5) var(--fh-s4); }
	.fh-heritage .fh-profile__chips { justify-content: center; }
	.fh-heritage .fh-profile__photo { width: 140px; height: 140px; }
	.fh-heritage .fh-profile__grid { grid-template-columns: 1fr; }
	.fh-heritage .fh-profile__sec { padding: var(--fh-s4); }
}

/* ----- Gallery ----- */
.fh-album-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--fh-s5); margin: 0 0 var(--fh-s7); }
.fh-album-cover { display: flex; flex-direction: column; text-decoration: none; color: var(--fh-ink); background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: 18px; overflow: hidden; box-shadow: var(--fh-shadow-soft); transition: transform .25s ease, box-shadow .25s ease; }
.fh-album-cover:hover, .fh-album-cover:focus-visible { transform: translateY(-4px); box-shadow: var(--fh-shadow-lift); }
.fh-album-cover:focus-visible { outline: 3px solid color-mix(in srgb, var(--fh-gold) 60%, transparent); outline-offset: 2px; }
.fh-album-cover img, .fh-album-cover__none { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: linear-gradient(160deg, color-mix(in srgb, var(--fh-gold) 30%, var(--fh-surface)), color-mix(in srgb, var(--fh-accent) 30%, var(--fh-surface))); }
.fh-album-cover__text { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 16px; }
.fh-album-cover__text strong { font: 400 1.35rem/1.2 var(--fh-display, var(--fh-serif)); }
.fh-album-cover__text small { font: 600 .84rem var(--fh-ui); color: var(--fh-muted); }
.fh-heritage .fh-album { scroll-margin-top: 24px; }
.fh-heritage .fh-album__head h2 { font-size: 1.8rem; }
/* The photo wall: mixed sizes, caption on the photo. */
.fh-heritage .fh-photo-grid.fh-wall { display: grid; columns: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 10px; }
.fh-heritage .fh-wall .fh-photo-grid__item { position: relative; margin: 0; aspect-ratio: auto; height: 100%; border-radius: 14px; overflow: hidden; box-shadow: none; background: var(--fh-line); }
.fh-heritage .fh-wall .fh-photo-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fh-heritage .fh-wall .fh-photo-grid__item:hover img { transform: scale(1.05); }
.fh-heritage .fh-wall .is-tall { grid-row: span 2; }
.fh-heritage .fh-wall .is-wide { grid-column: span 2; }
.fh-wall__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; font: 600 .86rem/1.3 var(--fh-ui); color: #fff; background: linear-gradient(transparent, rgba(25, 18, 10, .66)); opacity: .95; }
@media (max-width: 600px) {
	.fh-heritage .fh-photo-grid.fh-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 6px; }
	.fh-album-covers { grid-template-columns: 1fr; gap: var(--fh-s4); }
}

/* ----- Finishing touches ----- */
/* Softer shadows on every box. */
.fh-heritage .fh-card, .fh-heritage .fh-otd, .fh-heritage .fh-contact-form, .fh-heritage .fh-fcard, .fh-heritage .fh-treebar,
.fh-heritage .fh-tradition, .fh-heritage .fh-tree-viewport { box-shadow: var(--fh-shadow-soft); }
/* Boxes you can click lift gently. */
.fh-heritage .fh-tradition, .fh-heritage .fh-otd__list a, .fh-heritage .fh-album-nav a, .fh-heritage .fh-find__card, .fh-heritage .fh-branch-card {
	transition: transform .2s ease, box-shadow .2s ease;
}
.fh-heritage a.fh-tradition:hover, .fh-heritage .fh-otd__list a:hover, .fh-heritage .fh-find__card:hover, .fh-heritage .fh-branch-card:hover { transform: translateY(-3px); box-shadow: var(--fh-shadow-lift); }
.fh-heritage .fh-btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.fh-heritage .fh-btn:hover { box-shadow: 0 6px 16px rgba(60, 40, 15, .16); }
/* A calm fade-in when a page opens. */
@keyframes fh-rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fh-heritage .fh-page > *, .fh-heritage .fh-profile > *, .fh-heritage .fh-profile__grid > * { animation: fh-rise .6s ease both; }
.fh-heritage .fh-page > :nth-child(2), .fh-heritage .fh-profile__grid > :nth-child(2) { animation-delay: .06s; }
.fh-heritage .fh-page > :nth-child(3), .fh-heritage .fh-profile__grid > :nth-child(3) { animation-delay: .12s; }
.fh-heritage .fh-page > :nth-child(n+4), .fh-heritage .fh-profile__grid > :nth-child(n+4) { animation-delay: .18s; }
/* The tree page builds itself; it does not fade (zoom and measuring need it in place). */
.fh-heritage .fh-tree-page > *, .fh-heritage .fh-tree-page .fh-tree-stage { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.fh-heritage *, .fh-heritage *::before, .fh-heritage *::after { animation: none !important; transition: none !important; }
}
@media print { .fh-heritage * { animation: none !important; } }

/* 1.90.5-1.90.6: important headings in golden lettering - the Home story headings, page titles,
 * section headings and person names, on every page. -webkit-text-fill-color keeps small icons
 * inside a heading (they use the gold "color") visible. */
.fh-heritage .fh-home__story h2,
.fh-heritage .fh-page__title,
.fh-heritage .fh-ornament-title,
.fh-heritage .fh-content h2,
.fh-heritage .fh-profile__sec h2,
.fh-heritage .fh-profile__name,
.fh-heritage .fh-dates__month h2,
.fh-heritage .fh-strip__title,
.fh-heritage .fh-otd__title,
.fh-heritage .fh-rel__title { color: #a47c33; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.fh-heritage .fh-home__story h2,
	.fh-heritage .fh-page__title,
	.fh-heritage .fh-ornament-title,
	.fh-heritage .fh-content h2,
	.fh-heritage .fh-profile__sec h2,
	.fh-heritage .fh-profile__name,
	.fh-heritage .fh-dates__month h2,
	.fh-heritage .fh-strip__title,
	.fh-heritage .fh-otd__title,
	.fh-heritage .fh-rel__title {
		background: linear-gradient(180deg, #d8b45a 0%, #b38b3f 45%, #8a6424 100%);
		-webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	html.fh-dark .fh-heritage .fh-home__story h2,
	html.fh-dark .fh-heritage .fh-page__title,
	html.fh-dark .fh-heritage .fh-ornament-title,
	html.fh-dark .fh-heritage .fh-content h2,
	html.fh-dark .fh-heritage .fh-profile__sec h2,
	html.fh-dark .fh-heritage .fh-profile__name,
	html.fh-dark .fh-heritage .fh-dates__month h2,
	html.fh-dark .fh-heritage .fh-strip__title,
	html.fh-dark .fh-heritage .fh-otd__title,
	html.fh-dark .fh-heritage .fh-rel__title { color: #d8b45a; background-image: linear-gradient(180deg, #f3dc9a 0%, #d8b45a 50%, #b38b3f 100%); }
}
.fh-heritage .fh-home__story h2::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 12'%3E%3Cg fill='none' stroke='%23b38b3f' stroke-width='1'%3E%3Cpath d='M0 6h46M86 6h46'/%3E%3Cpath d='M66 1.2 70.8 6 66 10.8 61.2 6z' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='52' cy='6' r='1.5' fill='%23b38b3f'/%3E%3Ccircle cx='80' cy='6' r='1.5' fill='%23b38b3f'/%3E%3C/svg%3E");
}

/* 1.90.6: a tighter gap between the Home picture and the story. */
.fh-heritage .fh-hero, .fh-heritage .fh-hero.has-photo { padding-bottom: 64px; }
.fh-heritage .fh-hero__branches { height: 230px; }
.fh-heritage .fh-home { padding-top: 32px; }
.fh-heritage .fh-home__story > h2:first-child { margin-top: 0; }

/* 1.92.0: the Rai life cycle on the Traditions page - a row of steps from birth to the ancestors. */
.fh-heritage .fh-lc { margin: 0 0 var(--fh-s6, 28px); padding: 18px 18px 14px; background: var(--fh-surface); border: 1px solid #e6d9c2; border-radius: 16px; box-shadow: 0 6px 16px rgba(92, 70, 39, .06); }
.fh-heritage .fh-lc__title { margin: 0 0 12px; text-align: center; font: 600 1.15rem/1.3 var(--fh-serif); color: #a47c33; }
.fh-heritage .fh-lc__title a { font: 600 .85rem var(--fh-sans); margin-left: 8px; white-space: nowrap; }
.fh-heritage .fh-lc__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; }
.fh-heritage .fh-lc__step { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 78px; padding: 8px 6px; border-radius: 12px; color: var(--fh-rhodo, #8a2a35); text-decoration: none; font: 600 .82rem/1.2 var(--fh-sans); text-align: center; transition: background .15s, transform .15s; }
.fh-heritage a.fh-lc__step:hover, .fh-heritage a.fh-lc__step:focus-visible { background: #f6ecd8; transform: translateY(-2px); }
.fh-heritage .fh-lc__step span { color: var(--fh-ink); }
.fh-heritage .fh-lc__step.is-off { opacity: .45; }
.fh-heritage .fh-lc__step.is-end { color: #a47c33; }
.fh-heritage .fh-lc__pair { display: inline-flex; flex-direction: column; border-left: 2px solid #e6d9c2; border-right: 2px solid #e6d9c2; border-radius: 12px; padding: 0 2px; }
.fh-heritage .fh-lc__pair .fh-lc__step { flex-direction: row; min-width: 0; padding: 4px 8px; }
.fh-heritage .fh-lc__pair .fh-lc__step svg { width: 20px; height: 20px; }
.fh-heritage .fh-lc__arrow { color: #c9a868; font-size: 1.1rem; }
.fh-heritage .fh-lc-note { background: #fbf3e3; border-left: 4px solid #c9a868; padding: 10px 14px; border-radius: 8px; font-size: .95rem; }
.fh-heritage .fh-sources { font-size: .9rem; }
html.fh-dark .fh-heritage .fh-lc { border-color: #3a3328; }
html.fh-dark .fh-heritage a.fh-lc__step:hover { background: #2a2620; }
html.fh-dark .fh-heritage .fh-lc-note { background: #2a2620; }
@media (max-width: 600px) { .fh-heritage .fh-lc__arrow { display: none; } .fh-heritage .fh-lc__step { min-width: 70px; } }