/* TTO Page Banners. Everything is scoped under .ttopb so the theme can't leak in and we can't leak out. */
body.ttopb-on { overflow-x: clip; }
.ttopb, .ttopb * { box-sizing: border-box; }
.ttopb {
	--ttopb-h: 260px; --ttopb-o: .45; --ttopb-c: #1d3d2b; --ttopb-y: 50%;
	position: relative; display: block; overflow: hidden; isolation: isolate;
	height: var(--ttopb-h); min-height: 130px; margin: 0 0 1.6rem; padding: 0;
	background: var(--ttopb-c); color: #fff; line-height: 1.2;
}
.ttopb--full { width: 100vw; max-width: 100vw; left: 50%; margin-left: -50vw; margin-right: -50vw; }
.ttopb:not(.ttopb--full) { border-radius: 10px; }
.ttopb .ttopb__img {
	position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0;
	object-fit: cover; object-position: 50% var(--ttopb-y); border: 0; border-radius: 0; box-shadow: none;
}
/* colour tint (strength from the Customizer) */
.ttopb::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ttopb-c); opacity: var(--ttopb-o); }
/* fixed dark fade at the bottom, where the title sits */
.ttopb .ttopb__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 20, 14, .55) 0%, rgba(10, 20, 14, .12) 55%, rgba(10, 20, 14, 0) 100%); }
.ttopb .ttopb__in {
	position: absolute; left: 0; right: 0; bottom: 0; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) clamp(16px, 3.2vw, 34px);
}
.ttopb--centre .ttopb__in { text-align: center; }
.ttopb h1.ttopb__title {
	display: block; margin: 0; padding: 0; border: 0; background: none;
	font: 600 clamp(1.7rem, 4.6vw, 3rem)/1.1 "Fraunces", Georgia, "Times New Roman", serif;
	letter-spacing: -.01em; text-transform: none; text-align: inherit; color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
	overflow-wrap: anywhere;
}
.ttopb h1.ttopb__title::before, .ttopb h1.ttopb__title::after { content: none; }
/* a small postmark-gold rule under the title, to tie in with the site */
.ttopb .ttopb__in::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: #c69a1e; }
.ttopb--centre .ttopb__in::after { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .ttopb { height: calc(var(--ttopb-h) * .68); min-height: 130px; } }
@media print { .ttopb { height: auto; min-height: 0; background: none; color: #000; } .ttopb .ttopb__img, .ttopb::before, .ttopb .ttopb__shade, .ttopb .ttopb__in::after { display: none; } .ttopb h1.ttopb__title { color: #000; text-shadow: none; } .ttopb .ttopb__in { position: static; padding: 0; } }
