/* Template 99 for familyheritage.info: one responsive design for every screen.

   TNG prints the page's content itself, mostly as tables with fixed widths and inline styles;
   this stylesheet, loaded after TNG's genstyle.css, restyles that markup rather than changing
   it. The template's own header and footer are in topmenu.php and footer.php, the home page in
   index.php, and the few things CSS cannot do in js/template.js.

   Colours come from four variables. A page about one family branch sets them to that branch's
   colours (branches.php), so everything below follows the branch. */

/* The site's two fonts, Newsreader for headings and Public Sans for text, served from the site
   (fonts/, under the SIL Open Font License: OFL-*.txt) with the Latin and Latin Extended subsets
   that Google Fonts makes. Declared here, in a stylesheet in the page's head, the browser knows
   them before it draws anything; with font-display: block the browser holds back the text for
   up to three seconds while they load, rather than drawing it in Georgia and Arial (if they take
   longer, it draws the text in those and changes to the site's fonts when they arrive). */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 500 700;
	font-display: block;
	src: url(../fonts/newsreader-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 500 700;
	font-display: block;
	src: url(../fonts/newsreader-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Public Sans';
	font-style: italic;
	font-weight: 100 900;
	font-display: block;
	src: url(../fonts/publicsans-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Public Sans';
	font-style: italic;
	font-weight: 100 900;
	font-display: block;
	src: url(../fonts/publicsans-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	src: url(../fonts/publicsans-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	src: url(../fonts/publicsans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--fh-accent: #3B3F7E;
	--fh-accent-dark: #262A55;
	--fh-visited: #66698F;
	--fh-hover: #2A2D63;

	--fh-ink: #1B1D22;
	--fh-ink-2: #3B414A;
	--fh-muted: #5A616B;
	--fh-line: #D5DAE1;
	--fh-paper: #F4F5F8;

	--fh-serif: 'Newsreader', Georgia, serif;
	--fh-sans: 'Public Sans', Arial, Helvetica, sans-serif;
	--fh-max: 1280px;
	--fh-gutter: 32px;
	--fh-label: 132px;
	--fh-date: 170px;
}

@media (max-width: 720px) {
	:root {
		--fh-gutter: 12px;
	}
}

/* Colours worked out from the four: a custom property is worked out where it is declared, so these
   are declared again wherever the four are set (a family's page sets them on the body, and the home
   page's family boxes inline), to follow that family rather than the site */
:root, body, [style*="--fh-accent"] {
	--fh-tint: color-mix(in srgb, var(--fh-accent) 13%, #FFFFFF);
	--fh-shade: color-mix(in srgb, var(--fh-accent) 8%, #FFFFFF);
}

/* ---------------------------------------------------------------- page */

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

body.fh {
	margin: 0;
	background: #FFFFFF;
	color: var(--fh-ink);
	font-family: var(--fh-sans);
	font-size: 16px;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.fh .normal, body.fh .indleftcol, body.fh td, body.fh th, body.fh input, body.fh select,
body.fh textarea, body.fh button {
	font-family: var(--fh-sans);
}

body.fh .normal {
	font-size: 15px;
}

body.fh .smaller {
	font-size: 13.5px;
}

body.fh img {
	max-width: 100%;
}

/* Except small icons in a table cell: a cell sized to its contents would shrink to nothing
   under max-width, squeezing the icon to a sliver (the event map's pins and Earth links) */
body.fh #mapevents img, body.fh img[src$="earth.gif"], body.fh img[src*="google_marker.php"] {
	max-width: none;
}

a:link, a:active, div.icons a {
	color: var(--fh-accent);
}

a:visited {
	color: var(--fh-visited);
}

a:hover {
	color: var(--fh-hover);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.fh-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--fh-max);
	margin: 0 auto;
	padding: 0 var(--fh-gutter);
}

.fh-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fh-skip {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 100;
	background: #FFFFFF;
	padding: 8px 12px;
	border-radius: 4px;
}

.fh-skip:focus {
	top: 8px;
}

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

.fh-header {
	background: var(--fh-accent-dark);
	color: #FFFFFF;
}

.fh-bar {
	min-height: 60px;
	display: flex;
	align-items: center;
	gap: 6px 24px;
	flex-wrap: wrap;
}

/* A stripe of the four families' colours under the bar on every page, in the branches' order
   (topmenu.php); on a family's page the bar takes that family's colour, and the stripe stays */
.fh-stripe {
	display: flex;
	height: 5px;
}

.fh-stripe > span {
	flex: 1 1 0;
}

.fh-brand, .fh-brand:link, .fh-brand:visited {
	font-family: var(--fh-serif);
	font-size: 27px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}
/* The symbol is exactly as tall as Newsreader's capitals (0.67em) and stands on the baseline like a letter,
   so its top and bottom rails line up with the tops and feet of the capitals at any size */
.fh-brand svg {
	height: 0.67em;
	width: auto;
	vertical-align: baseline;
	margin-right: 0.35em;
	fill: none;
	stroke: currentColor;
	stroke-width: 9;
	stroke-linejoin: miter;
}

/* The site menu and the search box are popovers (topmenu.php), so on a phone their buttons open
   them without a script; on a wider screen they are part of the bar, without the popover's look */
:where(.fh-header) [popover] {
	position: static;
	inset: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	color: inherit;
	background: none;
}

.fh-sitenav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px 20px;
}

.fh-sitenav > a, .fh-sitenav > a:link, .fh-sitenav > a:visited, .fh-menu > summary {
	font-size: 14.5px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

/* Log in sits at the far end of the menu, beside the search box */
.fh-sitenav > .fh-login {
	margin-left: auto;
}

.fh-header a:hover, .fh-header a:focus-visible, .fh-menu > summary:hover, .fh-menu[open] > summary {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The name search: a first name and a last name, each a white field, and the button */
.fh-search {
	flex: 0 1 330px;
	min-width: 240px;
	display: flex;
	align-items: center;
	gap: 6px;
}

body.fh .fh-search input[type="text"] {
	flex: 1 1 0;
	min-width: 0;
	height: 44px;
	box-sizing: border-box;
	border: none;
	border-radius: 4px;
	background: #FFFFFF;
	color: var(--fh-ink);
	padding: 0 10px;
	font-size: 15px;
}

.fh-search input::placeholder {
	color: var(--fh-muted);
}

.fh-search input:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.fh-search button {
	flex: none;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 4px;
	background: #FFFFFF;
	color: var(--fh-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.fh-bar-buttons {
	display: none;
}

/* The template's own buttons, free of TNG's grey button style */
.fh-toggle, .fh-search button {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	border: none;
	-webkit-tap-highlight-color: transparent;
}

/* Nor its pale grey while pressed (button:active in genstyle.css), which flashed on the bar */
.fh-toggle:active {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
	border: none;
}

.fh-search button:active {
	background: #FFFFFF;
	color: var(--fh-ink);
	border: none;
}

.fh-toggle {
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

/* ---------------------------------------------------------------- the menu bar's drop-downs */

/* Families, Find, Media and Info (topmenu.php): each a <details>, so a tap or a click opens it
   without a script. The rows inside Find, Media and Info are TNG's own (tngddrow() in genlib.php). */
.fh-menu {
	position: relative;
}

.fh-menu > summary {
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	list-style: none;
	cursor: pointer;
}

.fh-menu > summary::-webkit-details-marker {
	display: none;
}

.fh-menu > summary::after {
	content: "";
	width: 12px;
	height: 12px;
	margin-left: 3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fh-menu[open] > summary::after {
	transform: rotate(180deg);
}

.fh-menu > ul {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 50;
	min-width: 220px;
	max-height: calc(100vh - 70px);
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* On the full-width bar an open menu's name becomes a white tab, joined to its list beneath:
   the tab (drawn behind the name, so the name does not move) is as far below the name as above
   it, and the list starts just under it, overlapping the bar, so it is not far from the name.
   The tab covers the list's top edge where they meet. The folded menu (below 1,000px) stacks
   the list under its name instead. */
@media (min-width: 1000px) {
	.fh-menu[open] > summary {
		position: relative;
		z-index: 51;
	}

	.fh-menu[open] > summary::before {
		content: "";
		position: absolute;
		inset: 12px -14px 12px;
		z-index: -1;
		background: #FFFFFF;
		border: 1px solid var(--fh-line);
		border-bottom: 0;
		border-radius: 4px 4px 0 0;
	}

	.fh-header .fh-menu[open] > summary {
		color: var(--fh-accent-dark);
		text-decoration: none;
	}

	.fh-menu[open] > ul {
		top: calc(100% - 13px);
		border-top-width: 1px;
		border-top-color: var(--fh-line);
		border-radius: 0 4px 4px 4px;
	}
}

.fh-menu li {
	margin: 0;
}

.fh-header .fh-menu li a, .fh-header .fh-menu li a:link, .fh-header .fh-menu li a:visited {
	display: block;
	padding: 7px 14px;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--fh-ink);
	text-decoration: none;
	white-space: nowrap;
}

.fh-header .fh-menu li a:hover, .fh-header .fh-menu li a:focus-visible {
	background: var(--fh-tint);
	color: var(--fh-accent-dark);
	text-decoration: none;
}

/* TNG's rows carry an icon and a padded label; the icons are not used */
.fh-menu .menu-label {
	display: inline;
	padding: 0 !important;
}

.fh-menu .menu-icon {
	display: none;
}

/* The four families, each with a bar in its colour, linking to its box on the home page */
.fh-header .fh-menu li a[style*="--fh-key"] {
	box-shadow: inset 4px 0 0 var(--fh-key);
	padding-left: 18px;
	font-weight: 600;
}

/* ---------------------------------------------------------------- page */

.fh-main {
	flex: 1 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--fh-max);
	margin: 0 auto;
	padding: 0 var(--fh-gutter) 8px;
}

/* ---------------------------------------------------------------- headings and the title band */



body.fh .header, body.fh .plainheader {
	color: var(--fh-accent-dark);
	font-family: var(--fh-serif);
	font-weight: 600;
}

body.fh h2.header, body.fh h3.header, body.fh h2, body.fh h3 {
	font-family: var(--fh-serif);
	font-weight: 600;
	color: var(--fh-accent-dark);
	line-height: 1.15;
}

body.fh h2.header, body.fh h2 {
	font-size: 28px;
	margin: 28px 0 10px;
}

body.fh h3.header, body.fh h3 {
	font-size: 24px;
	margin: 30px 0 10px;
}

body.fh .subhead {
	font-family: var(--fh-serif);
	font-size: 20px;
	color: var(--fh-accent-dark);
}

/* A page's main heading sits in a band of the accent colour across the whole window. The band
   is drawn by each element's own shadow, so the heading and anything TNG prints with it (a
   person's dates, the Individual/Ancestors tabs) join up whatever markup comes between them. */
.fh-main h1.header, .fh-main .fh-band {
	box-shadow: 0 0 0 100vmax var(--fh-accent);
	clip-path: inset(0 -100vmax);
	background: var(--fh-accent);
	color: #FFFFFF;
}

.fh-main h1.header {
	margin: 0 0 18px;
	padding: 16px 0;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.fh-main h1.header .headericon {
	display: none;
}

.fh-main h1.header + br[clear] {
	display: none;
}

/* ---------------------------------------------------------------- a person's heading and tabs */

.fh-main .vcard {
	display: flow-root;
}

/* The name, with the sex and years on the right (js/template.js puts them in one line,
   .fh-namebar; without it they are two lines of the band) */
.fh-main .fh-namebar {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 18px;
	padding-top: 16px;
}

.fh-main #nameheader {
	margin: 0 !important;
	padding: 16px 0 0;
	box-shadow: none;
	clip-path: none;
}

.fh-main .fh-namebar #nameheader {
	padding: 0;
	background: none;
}

.fh-main #nameheader + .normal {
	box-shadow: 0 0 0 100vmax var(--fh-accent);
	clip-path: inset(-1px -100vmax 0);
	background: var(--fh-accent);
	color: #FFFFFF;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fh-serif);
	font-size: 30px;
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1.1;
}

.fh-main .fh-namebar #nameheader + .normal {
	box-shadow: none;
	clip-path: none;
	background: none;
}

.fh-main #nameheader + .normal br, .fh-main .vcard > br, .fh-main .fh-namebar + br {
	display: none;
}

.fh-main .fh-namebar .normal a:link, .fh-main .fh-namebar .normal a:visited {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--fh-sans);
	font-size: 13px;
}

.fh-main .fh-namebar .normal .menu-icon {
	display: none;
}

.fh-main .fh-sex {
	font-family: var(--fh-sans);
	font-size: 11px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 3px;
	padding: 1px 5px;
}

/* A person's photo, beside the name in the band */
.fh-main .vcard .defphoto, .fh-main > .defphoto {
	float: right;
	margin: 12px 0 0 18px;
	position: relative;
	z-index: 1;
}

.fh-main .defphoto img {
	display: block;
	max-height: 96px;
	width: auto;
	border: 2px solid #FFFFFF;
	border-radius: 3px;
}

/* For someone signed in, the relationship line and the links to choose the home person, in the
   band (getperson.php and fh_reldisplay.php) */
.fh-main .fh-relmenu, .fh-main #reldisplay {
	display: block;
	box-shadow: 0 0 0 100vmax var(--fh-accent);
	clip-path: inset(-1px -100vmax 0);
	background: var(--fh-accent);
	padding-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

.fh-main .fh-relmenu:empty {
	display: none;
}

.fh-main .fh-relmenu a.relicon:link, .fh-main .fh-relmenu a.relicon:visited, .fh-main #reldisplay a {
	color: rgba(255, 255, 255, 0.85);
}

.fh-main .fh-relmenu a.relicon img, .fh-main .fh-relmenu a[title^="Tips For Setting"] {
	display: none;
}

/* The relationship display's close button: a round x in place of TNG's red icon, centred on
   the line of text */
.fh-main #reldisplay a:has(> img.relmenuicon[src*="tng_delete"]) {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 4px;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	box-sizing: border-box;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}

.fh-main #reldisplay a:has(> img.relmenuicon[src*="tng_delete"]):hover {
	border-color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.15);
}

.fh-main #reldisplay img.relmenuicon {
	display: none;
}

.fh-main #reldisplay a.relicon {
	white-space: nowrap;
	font-size: inherit;
	text-decoration: underline;
}

.fh-main form:has(> #tngmenu) {
	margin: 0;
}

/* The tabs' band reaches the window's edges through a layer behind it, so that the More menu's
   list can open below it (a clip on the tabs themselves would cut the list off). The layer is
   the tabs' own width and reaches the edges with a clipped shadow, as the other bands do: a
   shadow never makes the page wider, where a layer stretched past the edges made a phone's
   page scroll sideways */
#tngmenu {
	position: relative;
	z-index: 5;
	isolation: isolate;
	background: var(--fh-accent);
	padding-top: 12px;
	overflow: visible;
	clear: both;
	margin-bottom: 0;
}

#tngmenu::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -1px;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--fh-accent);
	box-shadow: 0 0 0 100vmax var(--fh-accent);
	clip-path: inset(0 -100vmax);
}

/* "More" (genlib.php writes the tabs again in it): on a narrower screen it takes the
   tabs that do not fit, keeping the current page's tab in the strip */
#tngnav > li.fh-more {
	display: none;
	position: relative;
}

.fh-more > details > summary {
	display: flex;
	align-items: center;
	gap: 3px;
	min-height: 100%;
	box-sizing: border-box;
	padding: 8px 13px;
	border-radius: 6px 6px 0 0;
	color: #FFFFFF;
	font-size: 14.5px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
}

.fh-more > details > summary::-webkit-details-marker {
	display: none;
}

.fh-more > details > summary::after {
	content: "";
	width: 11px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fh-more > details > summary:hover, .fh-more > details[open] > summary {
	background: rgba(255, 255, 255, 0.2);
}

.fh-more > details > ul {
	position: absolute;
	left: 0;
	max-width: calc(100vw - 24px);
	top: 100%;
	z-index: 30;
	min-width: 190px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

#tngnav .fh-more ul a, #tngnav .fh-more ul a:link, #tngnav .fh-more ul a:visited {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px !important;
	border-radius: 0;
	background: none;
	color: var(--fh-ink);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

#tngnav .fh-more ul a:hover {
	background: var(--fh-tint);
	color: var(--fh-accent-dark);
}

/* How many tabs stay in the strip: four below 860px, two on a phone, one on a very narrow one (360px),
   with the current page's tab always; More shows when there are tabs left over */
@media (max-width: 860px) {
	ul#tngnav {
		flex-wrap: nowrap;
	}

	#tngnav > li:nth-child(n+5):not(.fh-more):not(:has(> a.here)) {
		display: none;
	}

	#tngnav:has(> li:nth-child(6)) > li.fh-more {
		display: block;
	}

	#tngnav .fh-more ul > li:nth-child(-n+4) {
		display: none;
	}

	/* More can be near the screen's right-hand edge, so its list opens leftwards, lined up with
	   More's right-hand end */
	.fh-more > details > ul {
		left: auto;
		right: 0;
	}
}

@media (max-width: 720px) {
	#tngnav > li:nth-child(n+3):not(.fh-more):not(:has(> a.here)) {
		display: none;
	}

	#tngnav:has(> li:nth-child(4)) > li.fh-more {
		display: block;
	}

	#tngnav .fh-more ul > li:nth-child(n+3) {
		display: block;
	}

	#tngnav .fh-more ul > li:nth-child(-n+2) {
		display: none;
	}
}

@media (max-width: 360px) {
	#tngnav > li:nth-child(n+2):not(.fh-more):not(:has(> a.here)) {
		display: none;
	}

	#tngnav:has(> li:nth-child(3)) > li.fh-more {
		display: block;
	}

	#tngnav .fh-more ul > li:nth-child(n+2) {
		display: block;
	}

	#tngnav .fh-more ul > li:nth-child(-n+1) {
		display: none;
	}

	/* With one tab More is too near the left for that, so its list lines up with the strip's
	   right-hand end instead */
	#tngnav > li.fh-more {
		position: static;
	}
}

/* The current page's tab is in the strip, so not in More */
#tngnav .fh-more ul > li:has(> a.here) {
	display: none !important;
}

ul#tngnav {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
}

#tngnav li {
	float: none;
	margin: 0;
}

#tngnav a, #tngnav a:link, #tngnav a:visited {
	padding: 8px 13px !important;
	min-height: 0;
	border: none;
	border-radius: 6px 6px 0 0;
	background: none;
	color: #FFFFFF;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

#tngnav a span[id$="-smicon"] {
	display: none;
}

#tngnav a:hover, #tngnav a:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
}

#tngnav a.here, #tngnav a.here:hover {
	background: #FFFFFF;
	color: var(--fh-accent-dark);
	font-weight: 700;
	padding: 8px 13px !important;
	border: none;
}

/* The links under the tabs (Personal Information, Media, Sources...), plain on white */
#pub-innermenu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin: 0 0 4px;
	padding: 8px 0 10px;
	background: none;
	border: none;
	filter: none;
	border-radius: 0;
	font-size: 0;
	color: transparent;
}

#pub-innermenu > div[style*="float"] {
	order: 2;
	margin-left: auto;
}

#pub-innermenu a, #pub-innermenu a:link, #pub-innermenu a:visited {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fh-accent);
	text-decoration: none;
}

#pub-innermenu a.lightlink3 {
	color: var(--fh-accent-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#pub-innermenu a:hover {
	color: var(--fh-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#pub-innermenu + br {
	display: none;
}

/* The generations select: TNG's "Generations:" is plain text, hidden with the "|" separators,
   so the stylesheet writes the label (closing up the gaps either side of the hidden text) */
#pub-innermenu:has(> select[name="generations"])::before {
	content: "Generations";
	align-self: center;
	margin-right: -26px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fh-muted);
}

#pub-innermenu > select[name="generations"] {
	align-self: center;
}

body.fh #pub-innermenu select {
	margin: 0;
	padding: 2px 6px;
	height: auto;
	font-family: var(--fh-sans);
	font-size: 13.5px;
	box-shadow: none;
	background-color: #FFFFFF;
}

/* An administrator's buttons for adding media, parents or a spouse, at the end */
#pub-innermenu a.fh-add, #pub-innermenu a.fh-add:link, #pub-innermenu a.fh-add:visited {
	align-self: center;
	padding: 2px 9px;
	border: 1px solid var(--fh-line);
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fh-muted);
	background: #FFFFFF;
}

#pub-innermenu :not(.fh-add) + a.fh-add {
	margin-left: auto;
}

#pub-innermenu a.fh-add::before {
	content: "+";
	margin-right: 4px;
}

#pub-innermenu a.fh-add:hover {
	color: var(--fh-accent-dark);
	border-color: var(--fh-accent);
	text-decoration: none;
}

/* ---------------------------------------------------------------- tables */

.whiteback {
	border: 1px solid var(--fh-line);
	background-color: #FFFFFF;
	border-collapse: collapse;
}

.tfixed, .thfixed, .dna-tfixed {
	border-radius: 0;
	box-shadow: none;
}

.tfixed tr td, .thfixed tr th, .thfixed tr td {
	border-radius: 0 !important;
}

.fieldnameback, .tablesaw-cell-label {
	background-color: var(--fh-tint);
	border: none;
	border-top: 1px solid var(--fh-line);
	padding: 8px 10px;
	text-align: right;
	vertical-align: top;
}

.fieldnameback .fieldname, .fieldname {
	color: var(--fh-accent-dark);
	font-size: 13.5px;
	font-weight: 700;
}

body.fh .fieldnameback a.lightlink:link, body.fh .fieldnameback a.lightlink:visited,
body.fh th.fieldnameback a:link, body.fh th.fieldnameback a:visited {
	color: var(--fh-accent-dark);
}

.databack, .databackalt {
	background-color: #FFFFFF;
	border: none;
	border-top: 1px solid var(--fh-line);
	padding: 7px 12px 8px;
	vertical-align: top;
	font-size: 16px;
}

.databackalt {
	background-color: var(--fh-paper);
}

.labelcol {
	width: var(--fh-label);
}

.tfixed col[style*="150px"] {
	width: var(--fh-date) !important;
}

.whiteback + br, .tfixed + br {
	display: block;
	content: "";
	margin-top: 12px;
}

th.fieldnameback {
	text-align: left;
	border-top: none;
	border-bottom: 2px solid var(--fh-accent);
	white-space: nowrap;
}

.thfixed {
	border-top: 2px solid var(--fh-accent);
}

/* Citation numbers [1, 2] as small chips; the brackets and commas are hidden */
.fh-cite {
	font-size: 0;
	white-space: normal;
}

.fh-cite a, .fh-cite a:link, .fh-cite a:visited {
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	background: var(--fh-tint);
	color: var(--fh-accent-dark);
	border-radius: 3px;
	padding: 0 5px;
	margin: 1px 3px 1px 0;
}

.fh-cite a:hover {
	background: var(--fh-accent);
	color: #FFFFFF;
}

/* TNG's small magnifier after a place: find everyone with events there */
img[src$="tng_search_small.gif"] {
	width: 11px !important;
	height: 11px !important;
	opacity: 0.55;
	vertical-align: 0;
}

/* Years made bold by js/template.js */
.fh-year {
	font-weight: 700;
}

/* ---------------------------------------------------------------- the person page */

/* Personal information on the left; parents and families in an equal column on the right
   (the page is at most 1,280px wide, so each is about 600px), each under a heading */
@media (min-width: 1000px) {
	li#info:has(> .fh-side > table) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-items: start;
	}
}

.fh-main h2.fh-colhead {
	margin: 18px 0 10px;
	font-size: 26px;
}

.fh-facts > br:last-child {
	display: none;
}

/* A family's heading opens its group sheet; it looks like a heading until hovered */
h2.fh-colhead a {
	color: inherit;
	text-decoration: none;
}

h2.fh-colhead a:hover,
h2.fh-colhead a:focus-visible {
	text-decoration: underline;
}

/* A heading over each family; the first lines up with the one over the facts */
.fh-side > table.fh-family + h2.fh-colhead {
	margin-top: 28px;
}

@media (max-width: 999px) {
	.fh-side > h2.fh-colhead:first-child {
		margin-top: 28px;
	}
}

/* The preview shown over a thumbnail: a card as wide as its image, beside the thumbnail, in
   place of TNG's fixed 410 x 400 speech bubble. On a phone it is centred on the screen. */
body.fh .media-prev {
	top: -120px;
	left: calc(100% + 14px);
	right: auto;
	width: max-content;
	height: auto;
	padding: 8px;
	line-height: 1.3;
	text-align: left;
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(16, 20, 26, 0.22);
}

/* TNG moves it to the thumbnail's left near the page's right edge */
body.fh .media-prev[style*="right"] {
	left: auto;
	right: calc(100% + 14px) !important;
	background-image: none !important;
}

body.fh .media-prev img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(560px, 46vw);
	max-height: min(460px, 70vh);
	margin: 0;
	border: none;
}

body.fh .media-prev .prev-caption {
	position: static;
	width: 0;
	min-width: 100%;
	margin: 8px 0 0;
	padding: 0;
	background: none;
	color: var(--fh-ink-2);
	font-size: 13.5px;
	font-weight: 400;
}

/* TNG sends the title in bold */
body.fh .media-prev .prev-caption strong {
	font-weight: 500;
}

body.fh .media-prev .prev-caption:empty {
	display: none;
}

@media (max-width: 720px) {
	body.fh .media-prev, body.fh .media-prev[style*="right"] {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto !important;
		transform: translate(-50%, -50%);
	}

	body.fh .media-prev img {
		max-width: calc(100vw - 48px);
	}
}

/* A person's media, shown when pointing at the camera beside their name (js/template.js) */
.fh-mediacard {
	position: absolute;
	z-index: 200;
	width: 340px;
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	padding: 10px 12px 12px;
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(16, 20, 26, 0.22);
	font-family: var(--fh-sans);
}

.fh-mediacard-head {
	margin-bottom: 8px;
	font-family: var(--fh-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--fh-accent-dark);
}

.fh-mediacard ul {
	max-height: 360px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-mediacard li + li {
	border-top: 1px solid var(--fh-line);
}

.fh-mediacard a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--fh-accent);
	text-decoration: none;
}

.fh-mediacard a:hover span {
	text-decoration: underline;
}

.fh-mediacard img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: var(--fh-paper);
	border: 1px solid var(--fh-line);
	border-radius: 3px;
}

.fh-mediacard p {
	margin: 0;
	font-size: 13.5px;
	color: var(--fh-muted);
}

/* The card a source number shows on a person or family page (js/template.js), styled as the
   media card above. The whole card opens the source, so it takes a pointer cursor. */
.fh-sourcecard {
	position: absolute;
	z-index: 200;
	width: 320px;
	max-width: calc(100vw - 16px);
	box-sizing: border-box;
	padding: 10px 12px 10px;
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(16, 20, 26, 0.22);
	font-family: var(--fh-sans);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--fh-ink);
	cursor: pointer;
}

.fh-sourcecard-num {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-muted);
}

.fh-sourcecard-head {
	margin-top: 2px;
	font-family: var(--fh-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--fh-accent-dark);
}

.fh-sourcecard-text {
	margin-top: 6px;
	overflow-wrap: anywhere;
	max-height: 160px;
	overflow-y: auto;
}

.fh-sourcecard-text a {
	color: var(--fh-accent);
}

/* Each picture keeps its own shape, up to 88px tall, shrinking to share the card's width */
.fh-sourcecard-pics {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}

.fh-sourcecard-pics a {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.fh-sourcecard-pics img {
	display: block;
	max-width: 100%;
	max-height: 88px;
	width: auto;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(16, 20, 26, 0.22);
}

.fh-sourcecard-foot {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--fh-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--fh-accent);
}

.fh-sourcecard:hover .fh-sourcecard-foot {
	text-decoration: underline;
}

/* The event map's list of events keeps a readable width (280px or more); the map takes the rest,
   in place of TNG's fixed 65% */
.fh-main li#eventmap .mapcol {
	width: auto;
}

.fh-main li#eventmap table.tfixed col:last-of-type {
	width: 340px;
}

@media (max-width: 1000px) {
	.fh-main li#eventmap table.tfixed col:last-of-type {
		width: 280px;
	}
}

/* The Google Earth links' globe: a line drawing in the link's colour, in place of TNG's shiny one */
.fh-main img[src$="img/earth.gif"] {
	display: none;
}

.fh-main a:has(> img[src$="img/earth.gif"])::before, .fh-main span:has(> img[src$="img/earth.gif"])::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	background: var(--fh-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cellipse cx='8' cy='8' rx='2.8' ry='6.6'/%3E%3Cpath d='M1.6 6h12.8M1.6 10h12.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cellipse cx='8' cy='8' rx='2.8' ry='6.6'/%3E%3Cpath d='M1.6 6h12.8M1.6 10h12.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fh-main a:has(> img[src$="img/earth.gif"]):hover::before {
	background: var(--fh-hover);
}

ul.nopad {
	padding: 0;
	margin: 0;
}

ul.nopad > li {
	list-style: none;
}

/* Each event's first row; its label cell spans the rest */
.fh-main table.tfixed td.fieldnameback[rowspan] {
	border-top: 1px solid var(--fh-line);
}

/* Dates, places and details */
.fh-main #info td.databack {
	font-size: 16px;
}

.fh-main #info td.fh-date {
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	/* A long date ("Bef 25 Feb 1747/8") wraps rather than running into the place */
	overflow-wrap: break-word;
}

.fh-main #info tr[class^="t"] > td.databack, .fh-main #info tr[class*=" t"] > td.databack {
	border-top: none;
	padding-top: 2px;
	font-size: 15px;
	color: var(--fh-ink-2);
}

.fh-main #info tr[class^="t"] > td.databack[colspan="2"] {
	padding-left: calc(var(--fh-date) + 12px);
}

.fh-main #info .notearea {
	max-height: none;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--fh-ink-2);
	max-width: 74ch;
}

.fh-main #info .notearea ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A thumbnail sits uncropped in a 124 x 92 box beside its title */
.fh-main td.databack[align="center"] {
	text-align: left;
}

.fh-main td.databack img.thumb {
	display: block;
	max-width: 124px;
	max-height: 92px;
	width: auto;
	height: auto !important;
	border: 1px solid var(--fh-line);
}

/* On a person's page (its events and its Photos list) a thumbnail, border and all, is as wide
   as the inside of the date column it sits in (146px at most), and up to twice that tall: the
   size the thumbnails are made (General Settings, 146 x 292) */
.fh-page-getperson .fh-main :is(#info, #media) td.databack img.thumb {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 292px;
}

.fh-main #info td.databack a[href^="showmedia.php"], .fh-main #info td.databack a[href^="/media/"] {
	font-size: 14px;
	text-underline-offset: 2px;
}

/* Birth, death and marriage: a solid label and a lightly shaded box with a 2px border
   (js/template.js tags the rows) */
/* The label has the same 2px edges as the shaded cells beside it, so they line up */
.fh-main #info td.fieldnameback.fh-milestone {
	background: var(--fh-accent);
	border-top: 2px solid var(--fh-accent);
	border-bottom: 2px solid var(--fh-accent);
}

.fh-main #info td.fieldnameback.fh-milestone .fieldname {
	color: #FFFFFF;
}

.fh-main #info tr.fh-milestone > td.databack {
	background: var(--fh-shade);
}

.fh-main #info tr.fh-milestone-first > td.databack {
	border-top: 2px solid var(--fh-accent);
}

.fh-main #info tr.fh-milestone > td.databack:last-child {
	box-shadow: inset -2px 0 0 var(--fh-accent);
}

.fh-main #info tr.fh-milestone-last > td.databack {
	border-bottom: 2px solid var(--fh-accent);
}

.fh-main #info tr.fh-milestone-first > td.fh-date {
	font-size: 16px;
	font-weight: 700;
	color: var(--fh-accent-dark);
}

.fh-main #info tr.fh-milestone-first > td.fh-date + td {
	font-weight: 600;
}

/* Parents and families */
table.fh-family td.databack {
	font-size: 15px;
}

table.fh-family td.databack > a[href^="/person/"], table.fh-family .unhighlightedchild > a[href^="/person/"],
table.fh-family .highlightedchild > a[href^="/person/"],
table.fh-family td.databack > a[href*="getperson.php"], table.fh-family .unhighlightedchild > a[href*="getperson.php"],
table.fh-family .highlightedchild > a[href*="getperson.php"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

table.fh-family .toggleicon {
	display: none;
}

table.fh-family td.databack table td {
	border: none;
	padding: 1px 0;
	font-size: 15px;
	background: none;
}

table.fh-family .descindicator {
	text-decoration: none;
	color: var(--fh-muted);
}

.unhighlightedchild, .highlightedchild {
	background: none !important;
}

/* Sources, notes and the event map, full width under the facts */
/* Two columns of sources; each number sits in its item's own margin so the
   second column's numbers have room, and no source is split between columns */
.fh-main ol.citeblock {
	margin: 0;
	padding-left: 0;
	font-size: 13px;
	column-count: 2;
	column-gap: 28px;
}

.fh-main ol.citeblock li {
	margin: 0 0 5px 2.2em;
	break-inside: avoid;
}

@media (max-width: 720px) {
	.fh-main ol.citeblock {
		column-count: 1;
	}
}

/* ---------------------------------------------------------------- lists: search results and others */

.fh-main .thfixed td.databack, .fh-main table.whiteback:not(.tfixed) td.databack {
	font-size: 15px;
}

.fh-main td.databack img.chartimg {
	display: none;
}

.fh-main td.databack .searchthumb {
	float: left;
	margin-right: 6px;
}

.fh-main a.pers {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fh-main td.nbrcol, .fh-main th.nbrcol, .fh-main .thfixed tr > td:first-child {
	color: var(--fh-muted);
	font-variant-numeric: tabular-nums;
	width: 2.5em;
}

.fh-main .thfixed td.databack:nth-child(3) {
	color: var(--fh-muted);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.fh-page-search .fh-main table:has(th.nbrcol) td.databack:nth-child(4) {
	white-space: nowrap;
}

/* TNG's sort arrows are white, for its dark heading cells */
th.fieldnameback img.sortimg {
	filter: invert(0.7);
	vertical-align: 1px;
}

.fh-main .thfixed tr:hover > td.databack {
	background: var(--fh-paper);
}

/* TNG's bar charts (places, statistics) */
.bar {
	background-color: var(--fh-accent);
}

/* Buttons and button-like links */
a.snlink, a.snlink:link, a.snlink:visited, .btn, input[type="submit"], input[type="button"] {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: none;
	border-radius: 4px;
	background: var(--fh-accent);
	color: #FFFFFF;
	font-family: var(--fh-sans);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

a.snlink:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
	background: var(--fh-accent-dark);
	color: #FFFFFF;
}

body.fh input[type="text"], body.fh input[type="search"], body.fh input[type="email"], body.fh input[type="password"],
body.fh select, body.fh textarea {
	border: 1px solid #A9B0BA;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 15px;
	box-sizing: border-box;
	max-width: 100%;
}

.fh-header input[type="text"] {
	border: none;
}

/* TNG's pop-up boxes */
.LB_window {
	background: #FFFFFF;
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	color: var(--fh-ink);
	border-radius: 4px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.LB_closeAjaxWindow {
	background-color: var(--fh-accent);
}

.sidelink {
	font-weight: 700;
	text-decoration: none;
	color: var(--fh-accent);
}

.sidelink:hover {
	text-decoration: underline;
	color: var(--fh-hover);
}

/* ---------------------------------------------------------------- the home page (index.php) */

/* The hero: the headline and the four couples on the left, the mosaic of pictures on the right,
   in the page's own column, so the headline lines up with the figures and the boxes below */
.fh-main .fh-welcome {
	display: flex;
	align-items: stretch;
	gap: 0 56px;
	padding: 0;
	margin: 0;
}

.fh-welcome-text {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 0;
}

.fh-welcome h1 {
	margin: 0;
	font-family: var(--fh-serif);
	font-size: 54px;
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}

/* The headline breaks after "Meet our grandparents." */
.fh-welcome h1 > span {
	display: block;
}

.fh-couples {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 26px;
}

.fh-couples p {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	column-gap: 12px;
	margin: 0;
	font-size: 16.5px;
	line-height: 1.5;
	color: #FFFFFF;
}

/* Each couple's square, in its family's colour, level with the sentence's first line */
.fh-couple-key {
	width: 12px;
	height: 12px;
	margin-top: calc(0.75em - 6px);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

/* White on the band, whatever branch footer.php marks the person link with */
.fh-welcome .fh-couples a:link, .fh-welcome .fh-couples a:visited, .fh-welcome .fh-couples a:hover {
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fh-couples a:hover {
	text-decoration-thickness: 2px;
}

/* The mosaic fills the band's height; its tiles are placed by js/mosaic.js, which sets the grid's
   columns and rows. Its height is set here at every width, so nothing moves as the tiles arrive. */
.fh-mosaic {
	flex: 1 1 440px;
	min-width: 0;
	min-height: 440px;
	/* Sized by the band and the rules below, never by its pictures */
	contain: size;
	box-sizing: border-box;
	display: grid;
	gap: 3px;
	background: var(--fh-accent-dark);
}

.fh-mosaic .fh-welcome-photo {
	width: 100%;
	height: 100%;
}

/* Each tile is drawn on its own (isolation), so its tint blends with nothing outside it, and
   pointing at one redraws only that tile */
.fh-tile {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--fh-accent);
}

/* Each picture in greys tinted with the band's colour, so records, sepia photographs and colour
   snapshots read as one: a layer of the colour over it gives the greys its hue. In full colour,
   the layer faded out, when pointed at or reached with the keyboard. */
.fh-tile img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter 150ms ease, opacity 150ms ease;
}

.fh-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fh-accent);
	mix-blend-mode: color;
	pointer-events: none;
	z-index: 1;
	transition: opacity 150ms ease;
}

.fh-tile-doc img {
	object-position: top;
}

.fh-tile:hover img, .fh-tile:focus-visible img {
	filter: none;
	opacity: 1;
}

.fh-tile:hover::before, .fh-tile:focus-visible::before {
	opacity: 0;
}

.fh-tile:focus-visible {
	outline: none;
}

.fh-tile:focus-visible::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 3px;
	outline: 3px solid #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.fh-tile img, .fh-tile::before {
		transition: none;
	}
}

/* The old collage: shown when there is no script, or too few pictures for the mosaic */
.fh-welcome-photo {
	box-sizing: border-box;
	background: url('../img/header.jpg') center / cover no-repeat #D9D4CA;
}

/* Four figures under the hero, each numeral above its label, on a pale band across the window */
.fh-main .fh-band.fh-figures {
	position: relative;
	box-shadow: 0 0 0 100vmax var(--fh-paper);
	background: var(--fh-paper);
	color: var(--fh-ink);
	padding: 28px 0 30px;
	/* The space between the band and "The four families" */
	margin: 0 0 32px;
}

.fh-main .fh-figures::after {
	content: "";
	position: absolute;
	left: -100vmax;
	right: -100vmax;
	bottom: 0;
	border-bottom: 1px solid var(--fh-line);
}

.fh-figures-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 40px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-figures-list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
}

.fh-figure-num {
	font-family: var(--fh-serif);
	font-size: 42px;
	line-height: 1;
	font-weight: 500;
	color: var(--fh-accent);
}

.fh-figure-label {
	font-size: 15px;
	line-height: 1.4;
	color: var(--fh-ink-2);
}

/* Tablets: the text, then the mosaic, across the column */
@media (max-width: 999px) {
	.fh-main .fh-welcome {
		flex-direction: column;
	}

	.fh-welcome-text {
		flex: none;
		padding: 40px 0 32px;
	}

	.fh-welcome h1 {
		font-size: 44px;
	}

	.fh-couples p {
		font-size: 16px;
	}

	.fh-mosaic {
		flex: none;
		min-height: 0;
		height: 300px;
	}
}

/* Two figures to a row where four do not fit */
@media (max-width: 879px) {
	.fh-figures-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: the headline over the mosaic, which runs across the screen */
@media (max-width: 699px) {
	.fh-welcome-text {
		padding: 32px calc(20px - var(--fh-gutter)) 28px;
	}

	.fh-welcome h1 {
		font-size: min(30px, 8.6vw);
		line-height: 1.12;
	}

	.fh-welcome h1 > span {
		white-space: nowrap;
	}

	.fh-couples {
		display: none;
	}

	.fh-mosaic {
		height: 200px;
		margin: 0 calc(-1 * var(--fh-gutter));
	}

	.fh-figure-num {
		font-size: 36px;
	}

	.fh-figure-label {
		font-size: 14px;
	}

	.fh-figures-list {
		gap: 20px 24px;
	}
}

.fh-section {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.fh-section:first-of-type {
	margin-top: 0;
}

body.fh .fh-section h2 {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	color: var(--fh-ink);
}

.fh-section > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	max-width: 78ch;
}

/* The four families, two to a row; each in its own colours */
.fh-lines {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

table.fh-linebox {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fh-line);
	background: #FFFFFF;
	scroll-margin-top: 12px;
}

table.fh-linebox th {
	width: 128px;
	box-sizing: border-box;
	padding: 8px 10px;
	text-align: right;
	vertical-align: top;
	font-size: 13.5px;
	font-weight: 700;
	background: var(--fh-tint);
	color: var(--fh-accent-dark);
	border-top: 1px solid var(--fh-line);
}

table.fh-linebox td {
	padding: 8px 12px;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.4;
	border-top: 1px solid var(--fh-line);
}

table.fh-linebox a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

table.fh-linebox tr.fh-linehead th, table.fh-linebox tr.fh-linehead td {
	border-top: 2px solid var(--fh-accent);
}

table.fh-linebox tr.fh-linehead th {
	background: var(--fh-accent);
	color: #FFFFFF;
}

/* The family's name, as a heading */
table.fh-linebox tr.fh-linehead th {
	padding-top: 10px;
	font-family: var(--fh-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.05;
}

table.fh-linebox tr.fh-linehead td {
	background: var(--fh-shade);
	box-shadow: inset -2px 0 0 var(--fh-accent), inset 0 -2px 0 var(--fh-accent);
	font-size: 16px;
}

/* The ancestor chart: a tab for each family, in its colours */
.fh-charttabs {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-bottom: -10px;
}

.fh-charttabs button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 6px 6px 0 0;
	font-family: var(--fh-sans);
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	background: var(--fh-tint);
	color: var(--fh-accent-dark);
	box-shadow: inset 0 3px 0 var(--fh-accent);
}

.fh-charttabs button[aria-selected="true"] {
	background: var(--fh-accent);
	color: #FFFFFF;
	box-shadow: none;
}

.fh-chartbox {
	border: 1px solid var(--fh-line);
	border-top: 3px solid var(--fh-accent);
	background: #FFFFFF;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fh-chartbox iframe {
	display: block;
	border: none;
}

/* Brick walls and chief interests, side by side */
.fh-twocol {
	margin-top: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 26px 28px;
	align-items: start;
}

.fh-twocol .fh-section {
	margin-top: 0;
}

table.fh-list {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--fh-line);
	background: #FFFFFF;
}

table.fh-list th {
	text-align: left;
	padding: 8px 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fh-accent-dark);
	background: var(--fh-tint);
	border-bottom: 2px solid var(--fh-accent);
	white-space: nowrap;
}

table.fh-list td {
	padding: 7px 10px;
	font-size: 15px;
	line-height: 1.35;
	border-top: 1px solid var(--fh-line);
	vertical-align: top;
}

table.fh-list a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fh-nowrap {
	white-space: nowrap;
}

.fh-chip {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 700;
	color: #FFFFFF;
	background: var(--fh-accent);
	white-space: nowrap;
}

form.fh-admin {
	margin-top: 2em;
	color: var(--fh-muted);
}

form.fh-admin + form.fh-admin {
	margin-top: 0;
}

form.fh-admin input[type="submit"] {
	margin-right: 8px;
}

form.fh-admin input[type="submit"]:disabled {
	opacity: 0.45;
	cursor: default;
}

/* ---------------------------------------------------------------- charts */

/* Wide charts scroll sideways inside the page rather than widening it */
.fh-main #outer, .fh-main #vcontainer, .fh-main .fh-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* TNG's chart boxes take their colours from its pedigree settings, set in the admin area;
   here they are white with a light edge, and a person's branch colour down the left */
.fh-main .pedbox {
	background-color: #FFFFFF !important;
	border: 1px solid var(--fh-line) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
	border-radius: 4px !important;
}

/* ---------------------------------------------------------------- footer */

.fh-footer {
	margin-top: 26px;
	background: var(--fh-paper);
	border-top: 1px solid var(--fh-line);
}

.fh-footer .fh-wrap {
	padding-top: 14px;
	padding-bottom: 18px;
	display: flex;
	justify-content: space-between;
	gap: 4px 20px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--fh-muted);
}

.fh-footer .fh-brand, .fh-footer .fh-brand:link, .fh-footer .fh-brand:visited {
	font-size: 17px;
	color: var(--fh-ink);
}

/* The parents' and families' tables open with a thicker rule */
.fh-main table.fh-family.tfixed > tbody > tr:first-child > td {
	border-top: 3px solid var(--fh-accent);
}

/* ---------------------------------------------------------------- narrower screens */

/* Below 1,000px the menu folds into a button, opening as a list in which each drop-down opens in
   place beneath its name; the search box stays in the bar */
@media (max-width: 999px) {
	.fh-bar {
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-right: 2px;
	}

	.fh-bar-buttons {
		display: flex;
	}

	.fh-sitenav, .fh-toggle[popovertarget="fh-search"] {
		display: none;
	}

	.fh-search {
		margin-left: auto;
	}

	.fh-header {
		position: relative;
	}

	/* The site menu, and on a phone the search box, open below the bar and the stripe */
	#fh-sitenav:popover-open, #fh-search:popover-open {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		top: 65px; /* the bar and the stripe; a popover is placed from the page's top */
		width: auto;
		margin: 0;
		z-index: 40;
		background: var(--fh-accent-dark);
		padding: 8px var(--fh-gutter) 14px;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	}

	#fh-sitenav:popover-open {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc(100dvh - 65px);
		overflow-y: auto;
		box-sizing: border-box;
	}

	#fh-sitenav:popover-open > a, #fh-sitenav:popover-open .fh-menu > summary {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 16px;
	}

	#fh-sitenav:popover-open > .fh-login {
		margin-left: 0;
	}

	#fh-sitenav:popover-open .fh-menu > ul {
		position: static;
		min-width: 0;
		max-height: none;
		overflow: visible;
		margin: 0 0 8px;
		border-radius: 4px;
		box-shadow: none;
	}

	#fh-sitenav:popover-open .fh-menu li a {
		padding: 10px 14px;
		font-size: 16px;
		white-space: normal;
	}

	.fh-header:has(#fh-sitenav:popover-open) .fh-toggle[popovertarget="fh-sitenav"],
	.fh-header:has(#fh-search:popover-open) .fh-toggle[popovertarget="fh-search"] {
		background: rgba(255, 255, 255, 0.16);
	}
}

/* On a phone the search box folds into a button too, and opens below the bar */
@media (max-width: 699px) {
	.fh-brand, .fh-brand:link, .fh-brand:visited {
		font-size: 24px;
	}

	.fh-search {
		display: none;
	}

	.fh-toggle[popovertarget="fh-search"] {
		display: inline-flex;
	}

	body.fh #fh-search:popover-open input[type="text"] {
		font-size: 16px;
	}
}

@media (max-width: 1000px) {
	.fh-lines, .fh-twocol {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	/* The home page on a phone */
	table.fh-linebox th {
		width: 96px;
	}

	table.fh-linebox tr.fh-linehead th {
		font-size: 21px;
	}

	/* Brick walls as cards: name and family, then birth, then relationship */
	table.fh-walls, table.fh-walls tbody {
		display: block;
	}

	table.fh-walls thead {
		display: none;
	}

	table.fh-walls tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 10px;
		row-gap: 1px;
		padding: 8px 10px;
		border-top: 1px solid var(--fh-line);
	}

	table.fh-walls tr:first-child {
		border-top: none;
	}

	table.fh-walls td {
		display: block;
		padding: 0;
		border: none;
	}

	table.fh-walls td.fh-wall-name {
		grid-row: 1;
		font-size: 16px;
		font-weight: 700;
	}

	table.fh-walls td.fh-wall-family {
		grid-row: 1;
		grid-column: 2;
		align-self: baseline;
	}

	table.fh-walls td.fh-wall-born, table.fh-walls td.fh-wall-rel {
		grid-column: 1 / -1;
	}

	table.fh-walls td.fh-wall-rel {
		color: var(--fh-ink-2);
	}

	.fh-main h1.header {
		font-size: 38px;
		padding: 12px 0;
	}

	.fh-main .fh-namebar {
		padding-top: 12px;
	}

	.fh-main #nameheader {
		font-size: 38px;
	}

	.fh-main #nameheader + .normal {
		font-size: 19px;
	}

	.fh-sex {
		font-size: 10.5px;
	}

	#tngmenu {
		padding-top: 6px;
	}

	/* The tabs keep to one line (More takes the rest); the links under them wrap */
	ul#tngnav {
		flex-wrap: nowrap;
		position: relative;
	}

	#tngnav li {
		flex: none;
	}

	.fh-more > details > summary {
		min-height: 44px;
		padding: 0 10px;
	}

	#tngnav a, #tngnav a:link, #tngnav a:visited, #tngnav a.here {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
		padding: 0 10px !important;
		white-space: nowrap;
	}

	#pub-innermenu {
		flex-wrap: wrap;
		column-gap: 14px;
		padding: 0;
		position: relative;
	}

	#pub-innermenu a, #pub-innermenu a:link, #pub-innermenu a:visited {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	#pub-innermenu a.fh-add, #pub-innermenu a.fh-add:link, #pub-innermenu a.fh-add:visited {
		min-height: 32px;
		margin: 6px 0;
	}

	/* Tables of facts: each row wraps. An event's label and date share a tinted first line,
	   and its place takes the full width beneath; the rows that follow are plain blocks. */
	.fh-main table.tfixed, .fh-main table.tfixed > tbody {
		display: block;
		width: 100%;
	}

	.fh-main table.tfixed col {
		display: none;
	}

	.fh-main table.tfixed > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}

	.fh-main table.tfixed > tbody > tr > td {
		display: block;
		box-sizing: border-box;
		border-top: none;
	}

	.fh-main table.tfixed > tbody > tr > td.fieldnameback {
		flex: 1 1 auto;
		text-align: left;
		padding: 4px 10px;
		border-top: 1px solid var(--fh-line);
		align-self: stretch;
	}

	/* Only a row with a cell after the date is an event; a section with one cell beside its
	   label (Sources, Research) and the event map's map take the full width beneath it.
	   :where() keeps the tests out of the specificity, so the milestone rules below still win. */
	.fh-main table.tfixed > tbody > tr > td.fieldnameback + td.databack:not([colspan]):where(:has(+ td.databack):not(li#eventmap td)) {
		flex: 0 1 auto;
		align-self: stretch;
		background: var(--fh-tint);
		border-top: 1px solid var(--fh-line);
		color: var(--fh-accent-dark);
		padding: 4px 10px;
		text-align: right;
	}

	.fh-main table.tfixed > tbody > tr > td.fieldnameback + td.databack[colspan] {
		flex: 1 1 100%;
	}

	.fh-main table.tfixed > tbody > tr > td.databack {
		flex: 1 1 100%;
		padding: 6px 10px 8px;
	}

	.fh-main table.tfixed > tbody > tr > td.fieldnameback + td.databack + td.databack {
		flex: 1 1 100%;
	}

	.fh-main #info tr[class^="t"] > td.databack[colspan="2"] {
		padding-left: 10px;
	}

	.fh-main #info tr[class^="t"] > td.databack[align="center"] {
		flex: 0 0 auto;
		padding-right: 0;
	}

	/* The thumbnail's shadow reaches past its cell; keep it above the title's shaded cell */
	.fh-main #info tr[class^="t"] > td.databack[align="center"] img.thumb {
		position: relative;
	}

	/* On a phone a person's thumbnails stay the size they were before the thumbnails were made
	   146 x 292: at most 80 wide and 92 tall, inside the border */
	.fh-page-getperson .fh-main :is(#info, #media) td.databack img.thumb {
		max-width: 82px;
		max-height: 94px;
	}

	/* The event list under the map grows with its events instead of TNG's fixed 380px */
	.fh-main li#eventmap #mapevents {
		height: auto !important;
	}

	.fh-main #info tr[class^="t"] > td.databack[align="center"] + td.databack {
		flex: 1 1 0;
		min-width: 0;
		align-self: center;
	}

	.fh-main #info td.fieldnameback.fh-milestone + td.databack:not([colspan]) {
		background: var(--fh-accent);
		color: #FFFFFF;
	}

	.fh-main #info tr.fh-milestone-first > td.fh-date {
		color: #FFFFFF;
	}

	.fh-main #info tr.fh-milestone > td.databack:last-child {
		box-shadow: inset -2px 0 0 var(--fh-accent), inset 2px 0 0 var(--fh-accent);
	}

	/* A thumbnail and its title share a line: the box's left edge is on the thumbnail */
	.fh-main #info tr.fh-milestone > td.databack[align="center"]:first-child {
		background: var(--fh-shade);
		box-shadow: inset 2px 0 0 var(--fh-accent);
	}

	.fh-main #info tr.fh-milestone > td.databack[align="center"] + td.databack:last-child {
		box-shadow: inset -2px 0 0 var(--fh-accent);
	}

	/* The title is centred beside the thumbnail; the row behind it keeps the shading and edge */
	.fh-main #info tr.fh-milestone:has(> td.databack[align="center"]:first-child) {
		background: var(--fh-shade);
		box-shadow: inset -2px 0 0 var(--fh-accent);
	}

	.fh-main #info tr.fh-milestone-last:has(> td.databack[align="center"]:first-child) {
		box-shadow: inset -2px 0 0 var(--fh-accent), inset 0 -2px 0 var(--fh-accent);
	}

	.fh-main #info tr.fh-milestone-last:has(> td.databack[align="center"]:first-child) > td.databack {
		border-bottom: none;
	}

	.fh-main #info tr.fh-milestone-last > td.databack[align="center"]:first-child {
		box-shadow: inset 2px 0 0 var(--fh-accent), inset 0 -2px 0 var(--fh-accent);
	}

	.fh-main #info tr.fh-milestone-first > td.databack {
		border-top: none;
	}

	/* Wide tables (search results, lists) scroll sideways within the page */
	.fh-main table.whiteback:not(.tfixed):not(:has(th.nbrcol)) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Search results as cards: name and ID, then birth and place */
	.fh-page-search .fh-main table:has(th.nbrcol), .fh-page-search .fh-main table:has(th.nbrcol) > tbody {
		display: block;
		width: 100%;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) thead, .fh-page-search .fh-main table:has(th.nbrcol) tr > :first-child,
	.fh-page-search .fh-main table:has(th.nbrcol) tr > :nth-child(6) {
		display: none;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 10px;
		padding: 8px 10px;
		border-top: 1px solid var(--fh-line);
	}

	.fh-page-search .fh-main table:has(th.nbrcol) tr:first-child {
		border-top: none;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td {
		display: block;
		border: none;
		padding: 0;
		background: none !important;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(2) {
		grid-column: 1 / 3;
		font-size: 16px;
		white-space: normal;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(3) {
		text-align: right;
		align-self: baseline;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(4), .fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(5) {
		grid-row: 2;
		font-size: 15px;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(4) {
		grid-column: 1;
		padding-right: 8px;
	}

	.fh-page-search .fh-main table:has(th.nbrcol) td:nth-child(5) {
		grid-column: 2 / -1;
	}
}

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

@media print {
	.fh-header, .fh-footer, .menucontainer, #tngmenu, #pub-innermenu {
		display: none !important;
	}

	.fh-main h1.header, #nameheader + .normal {
		box-shadow: none;
		background: none;
		color: var(--fh-ink);
	}
}