/* Trevi Elite site shell — WordPress integration for Bitrix #7506. */

/* Self-hosted latin subsets: the local and production CSPs do not need an
 * external font origin, and each family can be verified as a real request. */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("site-shell.php?asset=cinzel-latin-variable.woff2&v=1788861008") 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: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("site-shell.php?asset=cormorant-garamond-latin-variable.woff2&v=1788861009") 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: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("site-shell.php?asset=cormorant-garamond-latin-italic-variable.woff2&v=1790705757") 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: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("site-shell.php?asset=inter-latin-variable.woff2&v=1788861010") 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;
}

.trevi-site-header,
.trevi-site-footer {
	--trevi-navy-900: #0e1130;
	--trevi-navy-800: #181b41;
	--trevi-navy-700: #232856;
	--trevi-navy-500: #5b6094;
	--trevi-champagne-100: #f3ead9;
	--trevi-champagne-200: #e6d6b7;
	--trevi-champagne-300: #dac4a5;
	--trevi-champagne-400: #c5ac8d;
	--trevi-gold-light: #e8d4ac;
	--trevi-gold: #c9a875;
	--trevi-gold-deep: #9a7c4f;
	--trevi-white: #fff;
	--trevi-border: rgba(24, 27, 65, 0.1);
	--trevi-border-gold: rgba(201, 168, 117, 0.45);
	--trevi-border-on-dark: rgba(218, 196, 165, 0.18);
	--trevi-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--trevi-font-serif: "Cormorant Garamond", Georgia, serif;
	--trevi-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--trevi-shadow-1: 0 1px 2px rgba(24, 27, 65, 0.06), 0 1px 1px rgba(24, 27, 65, 0.04);
	--trevi-shadow-4: 0 24px 60px rgba(24, 27, 65, 0.16), 0 4px 12px rgba(24, 27, 65, 0.06);
	--trevi-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--trevi-duration: 220ms;
	--trevi-shell-max: 1440px;
	--trevi-shell-pad: clamp(20px, 4vw, 64px);
	--trevi-utility-height: 44px;
	--trevi-header-height: 92px;
	--trevi-header-rgb: 24, 27, 65;
	--trevi-header-ground-min: 0.12;
	box-sizing: border-box;
}

html.trevi-menu-open {
	overflow: hidden;
}

.trevi-site-header *,
.trevi-site-header *::before,
.trevi-site-header *::after,
.trevi-site-footer *,
.trevi-site-footer *::before,
.trevi-site-footer *::after {
	box-sizing: inherit;
}

.trevi-shell-container {
	width: min(100%, var(--trevi-shell-max));
	margin-inline: auto;
	padding-inline: var(--trevi-shell-pad);
}

.trevi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.trevi-skip-link {
	position: fixed;
	z-index: 100001;
	top: 10px;
	left: 10px;
	transform: translateY(-180%);
	padding: 12px 18px;
	border: 2px solid #9a7c4f;
	background: #fff;
	color: #0e1130;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.trevi-skip-link:focus {
	transform: none;
}

.trevi-site-header :where(a, button):focus-visible,
.trevi-site-footer :where(a, button):focus-visible {
	outline: 3px solid var(--trevi-gold);
	outline-offset: 4px;
}

.trevi-site-header {
	position: relative;
	z-index: 900;
	background: var(--trevi-white);
	border-bottom: 1px solid var(--trevi-border);
	box-shadow: var(--trevi-shadow-1);
}

.trevi-site-header__utility {
	background: var(--trevi-navy-900);
	color: var(--trevi-champagne-200);
}

.trevi-site-header__utility-inner,
.trevi-utility-nav ul {
	display: flex;
	align-items: center;
}

.trevi-site-header__utility-inner {
	min-height: var(--trevi-utility-height);
	justify-content: flex-end;
}

.trevi-utility-nav ul,
.trevi-primary-nav ul,
.trevi-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.trevi-utility-nav ul {
	gap: 18px;
}

.trevi-utility-nav a {
	display: inline-flex;
	min-height: var(--trevi-utility-height);
	align-items: center;
	border: 0;
	color: var(--trevi-champagne-200);
	font-family: var(--trevi-font-sans);
	font-size: 10px;
	letter-spacing: 0.13em;
	text-decoration: none;
	text-transform: uppercase;
}

.trevi-utility-nav a:hover,
.trevi-utility-nav a[aria-current="page"] {
	color: var(--trevi-white);
}

.trevi-utility-nav a[hreflang] {
	min-width: 44px;
	justify-content: center;
	padding-inline: 10px;
	border-bottom: 0;
}

.trevi-utility-nav__tel {
	letter-spacing: 0.08em;
}

.trevi-site-header__main {
	display: grid;
	min-height: var(--trevi-header-height);
	grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 2.5vw, 40px);
}

.trevi-brand {
	display: flex;
	width: fit-content;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	border: 0;
	color: var(--trevi-navy-900);
	text-decoration: none;
}

.trevi-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 38px;
	object-fit: contain;
	object-position: left center;
}

.trevi-site-header .trevi-brand__logo {
	height: 48px;
}

.trevi-primary-nav {
	justify-self: end;
}

.trevi-primary-nav__list {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: clamp(12px, 1.25vw, 24px);
}

.trevi-primary-nav__list > li,
.trevi-submenu-heading {
	display: flex;
	align-items: center;
}

.trevi-primary-nav a,
.trevi-submenu-toggle,
.trevi-menu-toggle {
	border-bottom: 0;
	font-family: var(--trevi-font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.25;
	text-transform: uppercase;
}

.trevi-primary-nav__list > li > a,
.trevi-submenu-heading > a {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	color: var(--trevi-navy-900);
	text-decoration: none;
}

.trevi-primary-nav__list > li > a:hover,
.trevi-submenu-heading > a:hover,
.trevi-primary-nav__list > li > a[aria-current="page"] {
	box-shadow: inset 0 -1px var(--trevi-gold-deep);
}

.trevi-primary-nav__item--submenu {
	position: relative;
}

.trevi-submenu-toggle {
	display: inline-grid;
	width: 40px;
	height: 44px;
	margin-left: -7px;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--trevi-navy-900);
}

.trevi-submenu-toggle span[aria-hidden="true"] {
	transition: transform var(--trevi-duration) var(--trevi-ease-out);
}

.trevi-submenu-toggle[aria-expanded="true"] span[aria-hidden="true"] {
	transform: rotate(180deg);
}

.trevi-submenu {
	position: absolute;
	z-index: 10;
	top: calc(100% + 14px);
	right: 0;
	width: 270px;
	padding: 10px;
	background: var(--trevi-navy-900);
	box-shadow: var(--trevi-shadow-4);
}

.trevi-submenu[hidden],
.trevi-primary-nav[hidden] {
	display: none !important;
}

/* The mobile menu is hidden in server-rendered markup so a deferred script
 * cannot collapse a full-height menu after first paint. Desktop navigation
 * remains visible before the script runs, including when JavaScript is off. */
@media (min-width: 1200px) {
	.trevi-primary-nav[hidden] {
		display: block !important;
	}
}

.trevi-submenu a {
	display: flex;
	min-height: 48px;
	align-items: center;
	padding: 8px 14px;
	color: var(--trevi-champagne-100);
	text-decoration: none;
}

.trevi-submenu a:hover {
	background: var(--trevi-navy-700);
	color: var(--trevi-gold-light);
}

.trevi-primary-nav__contacts {
	display: none;
}

.trevi-menu-toggle {
	display: none;
	min-height: 48px;
	align-items: center;
	justify-self: end;
	gap: 12px;
	border: 0;
	background: transparent;
	color: var(--trevi-navy-900);
}

.trevi-menu-toggle__icon {
	display: grid;
	width: 26px;
	gap: 5px;
}

.trevi-menu-toggle__icon span {
	display: block;
	height: 1px;
	background: currentColor;
	transition: transform var(--trevi-duration), opacity var(--trevi-duration);
}

.trevi-menu-toggle[aria-expanded="true"] .trevi-menu-toggle__icon span:first-child {
	transform: translateY(6px) rotate(45deg);
}

.trevi-menu-toggle[aria-expanded="true"] .trevi-menu-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.trevi-menu-toggle[aria-expanded="true"] .trevi-menu-toggle__icon span:last-child {
	transform: translateY(-6px) rotate(-45deg);
}

/* The base header remains a usable light variant. */
.trevi-site-header--dark {
	background: var(--trevi-navy-800);
	border-bottom-color: var(--trevi-border-on-dark);
	box-shadow: none;
}

.trevi-site-header--dark .trevi-site-header__utility {
	background: var(--trevi-navy-800);
}

.trevi-site-header--dark .trevi-brand {
	color: var(--trevi-champagne-100);
}

.trevi-site-header--dark .trevi-primary-nav__list > li > a,
.trevi-site-header--dark .trevi-submenu-heading > a,
.trevi-site-header--dark .trevi-submenu-toggle,
.trevi-site-header--dark .trevi-menu-toggle {
	color: var(--trevi-champagne-100);
}

.trevi-site-header--dark .trevi-primary-nav__list > li > a:hover,
.trevi-site-header--dark .trevi-submenu-heading > a:hover,
.trevi-site-header--dark .trevi-primary-nav__list > li > a[aria-current="page"] {
	color: var(--trevi-gold-light);
}

.trevi-site-header--dark .trevi-submenu {
	border: 1px solid var(--trevi-border-on-dark);
}

/* Shared photo/video hero navigation. Solid navy remains the no-script fallback. */
.trevi-site-header--over-hero {
	position: fixed;
	inset: 0 0 auto;
	width: 100%;
	background: var(--trevi-navy-800);
	border-bottom-color: transparent;
	box-shadow: none;
}

.trevi-site-header--over-hero .trevi-site-header__utility,
.trevi-site-header--over-hero .trevi-site-header__main {
	background: transparent;
}

/* A separate decorative layer avoids replacing existing photo/hero veils. */
.trevi-hero-stage { position: relative; }
.trevi-hero-scrim {
	position: absolute;
	inset: 0 0 auto;
	height: 300px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(14, 17, 48, 0.5), rgba(14, 17, 48, 0));
}
.trevi-hero-stage > .ts-wrap { z-index: 3; }
.ts.ts .trevi-hero-stage > .ts-wrap { padding-top: max(var(--space-10), 160px); }

.trevi-site-footer {
	background: var(--trevi-navy-800);
	color: var(--trevi-champagne-100);
}

.trevi-site-footer__grid {
	display: grid;
	grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr));
	gap: clamp(38px, 5vw, 80px);
	padding-top: clamp(68px, 8vw, 108px);
	padding-bottom: clamp(58px, 7vw, 92px);
}

.trevi-brand--footer {
	color: var(--trevi-champagne-100);
}

.trevi-site-footer__identity > p,
.trevi-site-footer address {
	max-width: 330px;
	color: var(--trevi-champagne-300);
	font-family: var(--trevi-font-serif);
	font-size: 16px;
	font-style: normal;
	line-height: 1.6;
}

.trevi-site-footer__identity > p {
	margin: 28px 0 16px;
}

.trevi-footer-nav h2 {
	margin: 4px 0 22px;
	color: var(--trevi-gold-light);
	font-family: var(--trevi-font-display);
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

.trevi-footer-nav li + li {
	margin-top: 10px;
}

.trevi-footer-nav a {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	border: 0;
	color: var(--trevi-champagne-200);
	font-family: var(--trevi-font-sans);
	font-size: 13px;
	line-height: 1.35;
	text-decoration-color: transparent;
	text-underline-offset: 5px;
}

.trevi-footer-nav a:hover {
	color: var(--trevi-white);
	text-decoration-color: var(--trevi-gold);
}

.trevi-site-header a,
.trevi-site-footer a {
	border-bottom: 1px solid var(--trevi-border-gold);
}

.trevi-site-header .trevi-brand,
.trevi-site-footer .trevi-brand {
	border-bottom: 0;
}

.trevi-site-footer__bottom {
	border-top: 1px solid var(--trevi-border-on-dark);
	background: var(--trevi-navy-900);
}

.trevi-site-footer__bottom .trevi-shell-container {
	display: flex;
	min-height: 66px;
	align-items: center;
}

.trevi-site-footer__bottom p {
	margin: 0;
	color: var(--trevi-champagne-400);
	font-family: var(--trevi-font-sans);
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (max-width: 1199px) {
	.trevi-site-header__main {
		grid-template-columns: minmax(176px, 1fr) auto;
	}

	.trevi-site-header .trevi-brand__logo {
		height: 42px;
	}

	.trevi-menu-toggle {
		display: inline-flex;
	}

	.trevi-primary-nav {
		grid-column: 1 / -1;
		width: calc(100% + (2 * var(--trevi-shell-pad)));
		max-height: calc(100vh - var(--trevi-utility-height) - var(--trevi-header-height));
		max-height: calc(100dvh - var(--trevi-utility-height) - var(--trevi-header-height));
		margin: 0 calc(-1 * var(--trevi-shell-pad));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid var(--trevi-border);
		background: var(--trevi-white);
	}

	.trevi-site-header--dark .trevi-primary-nav {
		border-top-color: var(--trevi-border-on-dark);
		background: var(--trevi-navy-800);
	}

	.trevi-primary-nav .trevi-primary-nav__list {
		display: block;
		padding: 10px var(--trevi-shell-pad) 26px;
	}

	.trevi-primary-nav__list > li,
	.trevi-submenu-heading {
		display: flex;
		width: 100%;
	}

	.trevi-primary-nav__list > li {
		border-bottom: 1px solid var(--trevi-border);
	}

	.trevi-site-header--dark .trevi-primary-nav__list > li {
		border-bottom-color: var(--trevi-border-on-dark);
	}

	.trevi-primary-nav__list > li > a,
	.trevi-submenu-heading > a {
		min-height: 54px;
		flex: 1;
		font-size: 15px;
	}

	.trevi-primary-nav__item--submenu {
		flex-wrap: wrap;
	}

	.trevi-submenu-heading {
		flex: 1 0 100%;
	}

	.trevi-submenu-toggle {
		width: 52px;
		min-height: 52px;
		margin: 0;
	}

	.trevi-submenu {
		position: static;
		width: 100%;
		margin: 0 0 12px;
		box-shadow: none;
	}

	.trevi-submenu a {
		font-size: 14px;
	}

	.trevi-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.trevi-site-header,
	.trevi-site-footer {
		--trevi-shell-pad: 20px;
		--trevi-header-height: 76px;
	}

	.trevi-utility-nav ul {
		gap: 6px;
	}

	.trevi-utility-nav li:first-child,
	.trevi-utility-nav li:nth-child(2) {
		display: none;
	}

	.trevi-menu-toggle__label {
		font-size: 11px;
	}

	.trevi-site-header .trevi-brand__logo {
		height: 38px;
	}

	.trevi-primary-nav__contacts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 0 var(--trevi-shell-pad) 24px;
	}

	.trevi-primary-nav__contacts a {
		display: flex;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--trevi-border);
		color: var(--trevi-navy-900);
		font-family: var(--trevi-font-sans);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.trevi-site-header--dark .trevi-primary-nav__contacts a {
		border-color: var(--trevi-border-on-dark);
		color: var(--trevi-champagne-100);
	}

	.trevi-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.trevi-site-footer__bottom .trevi-shell-container {
		min-height: auto;
		padding-top: 22px;
		padding-bottom: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trevi-site-header *,
	.trevi-site-header *::before,
	.trevi-site-header *::after,
	.trevi-site-footer *,
	.trevi-site-footer *::before,
	.trevi-site-footer *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* Trevi design system, layer 1: tokens. The only copy of colours, type scale,
 * spacing, radii, shadows, motion timings and font stacks. Loaded by every
 * new-style page, before trevi-components.css. Fonts themselves are declared
 * (@font-face, self-hosted) in trevi-site-shell.css, which every page loads.
 * Scoped .ts.ts, one class above Elementor's kit styles. */
.ts.ts {--navy-900: #0e1130; --navy-800: #181b41; --navy-700: #232856; --navy-600: #353a6e; --navy-500: #5b6094; --champagne-100: #f3ead9; --champagne-200: #e6d6b7; --champagne-300: #dac4a5; --champagne-400: #c5ac8d; --champagne-500: #a98f6f; --champagne-600: #836a4d; --gold-light: #e8d4ac; --gold: #c9a875; --gold-deep: #9a7c4f; --gold-ink: #675335; --ivory: #fbf8f1; --paper: #f6f1e6; --bone: #efe7d4; --ink: #1a1c2e; --ink-2: #3a3c52; --ink-3: #6b6d80; --ink-4: #9a9bab; --white: #ffffff; --black: #000000; --bg: var(--ivory); --bg-elevated:var(--white); --bg-paper: var(--paper); --bg-dark: var(--navy-800); --bg-darker: var(--navy-900); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-4: var(--ink-4); --fg-on-dark: var(--champagne-100); --fg-on-dark-2: var(--champagne-300); --fg-on-dark-3: var(--navy-500); --accent: var(--gold); --accent-soft: var(--champagne-300); --accent-deep: var(--gold-deep); --border: rgba(24, 27, 65, 0.10); --border-strong: rgba(24, 27, 65, 0.22); --border-gold: rgba(201, 168, 117, 0.45); --border-on-dark: rgba(218, 196, 165, 0.18); --font-display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif; --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --fs-eyebrow: 0.72rem; --fs-meta: 0.8125rem; --fs-body-sm: 0.9375rem; --fs-body: 1.0625rem; --fs-body-lg: 1.1875rem; --fs-h6: 1.125rem; --fs-h5: 1.375rem; --fs-h4: 1.75rem; --fs-h3: 2.375rem; --fs-h2: 3.25rem; --fs-h1: 4.5rem; --fs-display: 6rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.65; --tracking-display: 0.04em; --tracking-eyebrow: 0.22em; --tracking-button: 0.14em; --tracking-body: 0.005em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(24, 27, 65, 0.06), 0 1px 1px rgba(24, 27, 65, 0.04); --shadow-2: 0 4px 12px rgba(24, 27, 65, 0.06), 0 1px 3px rgba(24, 27, 65, 0.04); --shadow-3: 0 12px 28px rgba(24, 27, 65, 0.10), 0 2px 6px rgba(24, 27, 65, 0.05); --shadow-4: 0 24px 60px rgba(24, 27, 65, 0.16), 0 4px 12px rgba(24, 27, 65, 0.06); --shadow-gold: 0 8px 24px rgba(201, 168, 117, 0.28); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; --dur-4: 800ms; --container: 1280px; --container-narrow: 880px; --gutter: 24px; --link-on-dark: var(--champagne-200); --link-on-dark-hover: var(--gold-light); --link-on-dark-rule: rgba(201, 168, 117, 0.30);}
.ts.ts {background: var(--bg); color: var(--fg); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
.ts.ts :where(.display), .ts.ts :where(h1.display) {font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--fg);}
.ts.ts :where(h1), .ts.ts :where(.h1) {font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0 0 var(--space-5);}
.ts.ts :where(h2), .ts.ts :where(.h2) {font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: 0; margin: 0 0 var(--space-5);}
.ts.ts :where(h3), .ts.ts :where(.h3) {font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 var(--space-4);}
.ts.ts :where(h4), .ts.ts :where(.h4) {font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0 0 var(--space-4);}
.ts.ts :where(h5), .ts.ts :where(.h5) {font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-snug); margin: 0 0 var(--space-3);}
.ts.ts :where(h6), .ts.ts :where(.h6) {font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h6); line-height: var(--lh-snug); margin: 0 0 var(--space-3);}
.ts.ts :where(p), .ts.ts :where(.body) {font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty;}
.ts.ts :where(.lede) {font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2);}
.ts.ts :where(.eyebrow) {font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-deep);}
.ts.ts :where(.meta) {font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--fg-3); letter-spacing: 0.02em;}
.ts.ts :where(.wordmark) {font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;}
.ts.ts :where(a) {color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-gold); transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);}
.ts.ts :where(a:hover) {color: var(--accent-deep); border-color: var(--accent-deep);}
.ts.ts :where(.on-dark a), .ts.ts :where([data-surface="dark"] a) {color: var(--link-on-dark); border-bottom-color: var(--link-on-dark-rule);}
.ts.ts :where(.on-dark a:hover), .ts.ts :where([data-surface="dark"] a:hover) {color: var(--link-on-dark-hover); border-bottom-color: var(--gold);}
.ts.ts :where(.on-dark), .ts.ts :where([data-surface="dark"]) {color: var(--fg-on-dark);}
.ts.ts :where(.on-dark p), .ts.ts :where([data-surface="dark"] p) {color: var(--fg-on-dark-2);}
.ts.ts :where(.on-dark .meta), .ts.ts :where([data-surface="dark"] .meta) {color: var(--champagne-400);}
.ts.ts :where(.on-dark .eyebrow), .ts.ts :where([data-surface="dark"] .eyebrow) {color: var(--gold-light);}
.ts.ts :where(code), .ts.ts :where(kbd), .ts.ts :where(samp), .ts.ts :where(pre) {font-family: var(--font-mono); font-size: 0.875em;}
.ts.ts :where(hr.rule-gold) {border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); margin: var(--space-6) 0;}
.ts.ts :where(.ornament) {display: flex; align-items: center; gap: var(--space-3); color: var(--gold); letter-spacing: 0.6em; font-size: 12px; text-transform: uppercase; font-family: var(--font-sans);}
.ts.ts :where(.ornament::before), .ts.ts :where(.ornament::after) {content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);}

@font-face { font-family: "Cinzel alt";    src: local("Georgia"), local("Times New Roman"); size-adjust: 124%; }
@font-face { font-family: "Cormorant alt"; src: local("Georgia"), local("Times New Roman"); size-adjust: 89%; }
@font-face { font-family: "Inter alt";     src: local("Arial"), local("Helvetica"); size-adjust: 106%; }

.ts.ts {
  --font-display: 'Cinzel', 'Cinzel alt', Georgia, serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant alt', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'Inter alt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* Trevi design system, layer 2: shared components. Used by every new-style
 * page (service pages such as Home Care, the author page, articles). Loaded
 * after trevi-tokens.css and before the page-type layer (trevi-service.css,
 * trevi-editorial.css). Change a component here and every page follows. */

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

.ts.ts {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

.ts.ts :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li) { margin: 0; padding: 0; }
.ts.ts :where(ul, ol) { list-style: none; }
.ts.ts :where(img) { display: block; max-width: 100%; }

.ts.ts .ts-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.ts.ts .ts-narrow { max-width: var(--container-narrow); }

.ts.ts .ts-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.ts.ts .ts-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.ts.ts .ts-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 3.6vw, var(--fs-h2));
  line-height: var(--lh-snug);
}
.ts.ts .ts-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ts.ts .ts-h4 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.ts.ts .ts-lede { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.ts.ts .ts-body p { color: var(--fg-2); }
.ts.ts .ts-body p + p { margin-top: var(--space-4); }
.ts.ts .ts-rule { width: 56px; height: 1px; margin: 0; background: var(--gold); border: 0; }

.ts.ts .on-dark .ts-eyebrow { color: var(--gold-light); }

.ts.ts .ts-eyebrow-row { display: flex; align-items: center; gap: var(--space-4); }
.ts.ts .ts-eyebrow-row .ts-rule { flex-shrink: 0; }

.ts.ts .ts-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end;
  background: var(--navy-800); overflow: clip; }
.ts.ts .ts-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts.ts .ts-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,48,.46) 0%, rgba(14,17,48,.58) 44%, rgba(14,17,48,.94) 100%);
}
.ts.ts .ts-hero .ts-wrap { position: relative; padding-top: var(--space-10); padding-bottom: var(--space-7); }

.ts.ts .ts-hero .ts-h1 { color: var(--champagne-100); margin: var(--space-5) 0 var(--space-5); max-width: 17ch; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.ts.ts .ts-hero .ts-hero-lede { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h4); line-height: var(--lh-normal); color: var(--champagne-200); max-width: 44ch; }
.ts.ts .ts-hero-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between;
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--border-on-dark);
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--champagne-300);
}

.ts.ts a.ts-cta {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  color: var(--navy-900); background: var(--gold);
  padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-0);
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ts.ts a.ts-cta:hover, .ts.ts a.ts-cta:focus { background: var(--gold-light); color: var(--navy-900); box-shadow: var(--shadow-gold); }

@media (min-width: 1600px) {
  .ts.ts {
    --fs-eyebrow: 0.8rem;
    --fs-meta:    0.875rem;
    --fs-body-sm: 1.0625rem;
    --fs-body:    1.1875rem;
    --fs-body-lg: 1.375rem;
    --fs-h5:      1.5rem;
    --fs-h4:      2rem;
    --fs-h2:      3.75rem;
  }
  .ts.ts .ts-h1 { font-size: clamp(34px, 4.6vw, var(--fs-h1)); }
}

@media (max-width: 900px) {
  .ts.ts .ts-wrap { padding: 0 var(--space-5); }
  .ts.ts .ts-hero { min-height: 500px; }
  .ts.ts .ts-hero .ts-wrap { padding-top: var(--space-9); padding-bottom: var(--space-6); }
  .ts.ts .ts-hero .ts-h1 { max-width: none; }
}

.ts.ts {
  --ts-in: ts-rise;
  --ts-plate-in: ts-plate;
  --ts-hero-photo: ts-float;
}

@media (prefers-reduced-motion: reduce) {
  .ts.ts { --ts-in: ts-fade; --ts-plate-in: ts-fade; --ts-hero-photo: ts-float-soft; }
}

@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* Living photographs (Gabriele, 2026-09-29, site-wide): hero photos pan left and
 * right and zoom in and out very slowly, on their own, in every browser.
 * Time-based, transform only, so the GPU composites it without repainting.
 * Every frame keeps at least 3.5% of photo beyond each edge (scale 1.07 against
 * a pan of at most 2%), so no edge of the photo ever shows. Reduced motion keeps
 * only a slow breath of zoom, no panning. */
@keyframes ts-float {
  0%   { transform: scale(1.08) translate3d(-2%, 0, 0); }
  50%  { transform: scale(1.12) translate3d(1.5%, -1%, 0); }
  100% { transform: scale(1.07) translate3d(2%, .5%, 0); }
}
@keyframes ts-float-soft {
  from { transform: scale(1.02); }
  to   { transform: scale(1.05); }
}
@keyframes ts-plate {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes ts-line { from { transform: translateY(110%); } to { transform: none; } }

.ts.ts .ts-hero img {
  animation-name: var(--ts-hero-photo); animation-duration: 26s;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-direction: alternate; animation-fill-mode: both;
  animation-timeline: auto; will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ts.ts .ts-hero img { animation-duration: 30s; }
}
.ts.ts .ts-hero .ts-eyebrow-row, .ts.ts .ts-hero .ts-h1, .ts.ts .ts-hero .ts-hero-lede, .ts.ts .ts-hero .ts-hero-foot {
  animation-name: var(--ts-in); animation-duration: 1400ms;
  animation-timing-function: var(--ease-out); animation-fill-mode: both;
  animation-timeline: auto;
}
.ts.ts .ts-hero .ts-h1 { animation-delay: 200ms; }
.ts.ts .ts-hero .ts-hero-lede { animation-delay: 420ms; }
.ts.ts .ts-hero .ts-hero-foot { animation-delay: 640ms; }

@supports (animation-timeline: view()) {
  .ts.ts .ts-eyebrow-row, .ts.ts .ts-h2, .ts.ts .ts-lede {
    animation-name: var(--ts-in);
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();

    animation-range: cover 0% cover 34%;
  }
}

/* Text links and buttons. The tokens underline every link with a gold border;
 * block links and links that draw their own underline opt out. */
.ts.ts .te-card-link, .ts.ts .te-textlink { border-bottom: 0; }
.ts.ts .te-textlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-deep); text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px; transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.ts.ts .te-textlink::after { content: "\2192"; font-size: 1.3em; letter-spacing: 0; }
.ts.ts .te-textlink:hover, .ts.ts .te-textlink:focus-visible { background-size: 100% 1px; color: var(--navy-800); }

.ts.ts .te-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px;
  border: 1px solid var(--gold); color: var(--navy-800); background: transparent; text-decoration: none;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ts.ts .te-btn svg { width: 16px; height: 16px; }
.ts.ts .te-btn:hover, .ts.ts .te-btn:focus-visible { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-gold); }

.ts.ts .te-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }

/* ------------------------------------------------ cards (author list, related) */
.ts.ts .te-card { min-width: 0; }
.ts.ts .te-card-link { display: block; color: inherit; text-decoration: none; }
.ts.ts .te-card-photo {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--navy-800);
  box-shadow: var(--shadow-1); margin-bottom: var(--space-4);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.ts.ts .te-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.ts.ts .te-card-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.ts.ts .te-card-link:hover .te-card-photo { box-shadow: var(--shadow-3); }
.ts.ts .te-card-link:hover .te-card-photo img { transform: scale(1.04); }
.ts.ts .te-card-link:hover .te-card-photo::after { transform: scaleX(1); }
.ts.ts .te-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.ts.ts .te-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-deep);
}
.ts.ts .te-card-meta time { color: var(--fg-3); font-weight: 400; }
.ts.ts .te-card-title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h5); line-height: var(--lh-snug);
  color: var(--navy-800); margin: var(--space-3) 0 var(--space-2);
  text-transform: none; letter-spacing: 0; text-wrap: balance;
  transition: color var(--dur-2) var(--ease-out);
}
.ts.ts .te-card-link:hover .te-card-title { color: var(--gold-deep); }
.ts.ts .te-card-excerpt {
  font-size: var(--fs-body-sm); line-height: var(--lh-loose); color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ts.ts .te-card-more { display: none; }

.ts.ts .te-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}

/* Lead card: the latest article, wide. */
.ts.ts .te-card--lead { margin-bottom: var(--space-9); }
.ts.ts .te-card--lead .te-card-link {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8); align-items: center;
}
.ts.ts .te-card--lead .te-card-photo { grid-row: 1 / span 5; margin: 0; aspect-ratio: 16 / 10; box-shadow: var(--shadow-3); }
.ts.ts .te-card--lead .te-card-title { font-size: clamp(28px, 2.7vw, 44px); line-height: 1.12; margin: 0; }
.ts.ts .te-card--lead .te-card-excerpt { font-size: var(--fs-body-lg); -webkit-line-clamp: 4; text-align: justify; hyphens: manual; }
.ts.ts .te-card--lead .te-card-more {
  display: inline-flex; gap: 10px; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-deep);
}
.ts.ts .te-card--lead .te-card-more::after { content: "\2192"; font-size: 1.3em; letter-spacing: 0; }

@media (max-width: 1100px) {
  .ts.ts .te-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ts.ts .te-card--lead .te-card-link { grid-template-columns: minmax(0, 1fr); }
  .ts.ts .te-card--lead .te-card-photo { grid-row: auto; margin-bottom: var(--space-3); }
  .ts.ts .te-card--lead { margin-bottom: var(--space-8); }
}
@media (max-width: 700px) {
  .ts.ts .te-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  .ts.ts .te-card-link:hover .te-card-photo img { transform: none; }
}
/* Trevi design system, layer 3: editorial pages (author page, single article).
 * Only what those pages alone use. Loads after trevi-tokens.css and
 * trevi-components.css; page wrapper <div class="ts te te-author"> or
 * <div class="ts te te-article">. Design of record: design/author-article-2026-09/. */

/* Links that draw their own underline opt out of the tokens' gold border. */
.ts.ts .te-byline-who, .ts.ts .te-crumbs a, .ts.ts .te-toc a, .ts.ts .te-authorcard-name a, .ts.ts .te-prose a { border-bottom: 0; }

/* Profile circle, old-Facebook style: the avatar alone, no plate or box behind it.
 * The image carries its own gold ring and transparent corners, so no border is added. */
.ts.ts .te-portrait { position: relative; margin: 0; aspect-ratio: 1; width: 100%; }
.ts.ts .te-portrait img {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  filter: drop-shadow(0 14px 28px rgba(14, 17, 48, .28));
}

/* ------------------------------------------------ author page */
.ts.ts .te-author-hero { min-height: clamp(540px, 74vh, 800px); }
.ts.ts .te-author-veil {
  background:
    linear-gradient(90deg, rgba(14,17,48,.90) 0%, rgba(14,17,48,.62) 46%, rgba(14,17,48,.22) 100%),
    linear-gradient(180deg, rgba(14,17,48,0) 50%, rgba(14,17,48,.85) 100%);
}
/* Bottom padding clears the profile circle, which rises 170px into the hero. */
.ts.ts .te-author-hero .ts-wrap { padding-bottom: 200px; }
.ts.ts .te-author-hero .ts-h1 { max-width: 12ch; }

.ts.ts .te-profile { position: relative; padding: 0 0 var(--space-9); background: var(--bg); }
.ts.ts .te-profile-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-9); align-items: start;
}
/* The plate rises out of the hero: the page's one overlap. Text left, plate right. */
.ts.ts .te-profile .te-portrait { grid-column: 2; grid-row: 1; justify-self: center; width: 340px; margin-top: -170px; z-index: 1; }
.ts.ts .te-profile .te-profile-text { grid-column: 1; grid-row: 1; }
.ts.ts .te-profile-text { padding-top: var(--space-9); }
.ts.ts .te-bio {
  margin: var(--space-6) 0 var(--space-7);
  font-family: var(--font-serif); font-size: clamp(21px, 1.7vw, 27px); line-height: 1.55; color: var(--ink-2);
  text-align: justify; hyphens: manual; text-wrap: pretty;
}
.ts.ts .te-bio::first-letter {
  float: left; font-family: var(--font-display); font-weight: 400; font-size: 3.3em; line-height: .86;
  margin: .06em .12em 0 0; color: var(--gold-deep);
}
.ts.ts .te-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
  margin: 0 0 var(--space-7); padding: var(--space-6) 0 0; border-top: 1px solid var(--border-gold);
}
.ts.ts .te-facts div { margin: 0; }
.ts.ts .te-facts dt {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3vw, 46px); line-height: 1;
  color: var(--navy-800); letter-spacing: .02em;
}
.ts.ts .te-facts dd {
  margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: var(--fs-meta);
  line-height: 1.45; color: var(--fg-3); max-width: 22ch;
}

.ts.ts .te-articles { padding: var(--space-9) 0 var(--space-10); background: var(--paper); }
.ts.ts .te-section-head {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border);
}
.ts.ts .te-section-head .ts-h2 { margin-top: var(--space-4); color: var(--navy-800); }

.ts.ts .te-pager { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-9); }
.ts.ts .te-pager a {
  min-width: 48px; height: 48px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); color: var(--navy-800); text-decoration: none;
  font-family: var(--font-sans); font-size: var(--fs-meta); letter-spacing: .08em;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ts.ts .te-pager a:hover { border-color: var(--gold); }
.ts.ts .te-pager a.is-current { background: var(--navy-800); border-color: var(--navy-800); color: var(--champagne-100); }
.ts.ts .te-pager .te-pager-next { text-transform: uppercase; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); padding: 0 22px; }

/* ------------------------------------------------ article page */
.ts.ts .te-article-hero { min-height: clamp(560px, 84vh, 920px); }
.ts.ts .te-article-hero picture { position: absolute; inset: 0; }
.ts.ts .te-article-hero .ts-wrap { padding-top: var(--space-9); }
/* Desktop: reserve the measured menu plus 40px. The hero has a minimum,
 * never a fixed height, so the complete title can grow downwards. */
@media (min-width: 701px) {
  .ts.ts .te-article-hero .ts-wrap { padding-top: calc(var(--te-header-clearance, 132px) + 40px); }
}
.ts.ts .te-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-7);
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--champagne-300);
}
.ts.ts .te-crumbs a { color: var(--champagne-200); text-decoration: none; }
.ts.ts .te-crumbs a:hover { color: var(--gold-light); }
.ts.ts .te-title {
  margin: var(--space-5) 0; max-width: 22ch;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 4.8vw, 76px); line-height: 1.06;
  letter-spacing: -.005em; text-transform: none; color: var(--champagne-100); text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ts.ts .te-article-hero .ts-hero-lede { max-width: 52ch; font-size: clamp(19px, 1.6vw, 24px); }
@media (min-width: 701px) {
  .ts.ts .te-title { max-width: 30ch; font-size: clamp(38px, 3.9vw, 56px); }
}

.ts.ts .te-byline { align-items: center; }
.ts.ts .te-byline-who { display: inline-flex; align-items: center; gap: 14px; color: var(--champagne-300); text-decoration: none; line-height: 1.6; }
.ts.ts .te-byline-who strong { color: var(--champagne-100); font-weight: 500; }
.ts.ts .te-byline-who:hover strong { color: var(--gold-light); }
/* .ts-hero img (the hero photograph rule) would otherwise stretch the byline photo over the hero. */
.ts.ts .ts-hero img.te-avatar { position: static; inset: auto; width: 48px; height: 48px; border: 0; background: none; object-fit: cover; animation: none; }
.ts.ts .te-avatar {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700); border: 1px solid var(--gold); color: var(--champagne-300);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .06em;
}

.ts.ts .te-body { padding: var(--space-9) 0 var(--space-9); background: var(--bg); }
.ts.ts .te-body-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-8); align-items: start; }

.ts.ts .te-toc { position: sticky; top: 132px; }
.ts.ts .te-toc summary { list-style: none; cursor: default; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-gold); }
.ts.ts .te-toc summary::-webkit-details-marker { display: none; }
.ts.ts .te-toc ol { counter-reset: toc; margin-top: var(--space-4); }
.ts.ts .te-toc li { counter-increment: toc; }
.ts.ts .te-toc a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 9px 0 9px 12px; margin-left: -12px;
  border-left: 2px solid transparent; text-decoration: none;
  font-family: var(--font-sans); font-size: var(--fs-meta); line-height: 1.45; color: var(--fg-3);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ts.ts .te-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-size: 12px; color: var(--gold-deep); padding-top: 2px; }
.ts.ts .te-toc a:hover { color: var(--navy-800); }
.ts.ts .te-toc a.is-active { color: var(--navy-800); border-left-color: var(--gold); font-weight: 500; }

/* Reading column at about 68 characters; figures and tables run wider. */
.ts.ts .te-prose {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
  font-family: var(--font-serif); font-size: clamp(19px, 1.28vw, 22px); line-height: 1.72; color: var(--ink-2);
}
.ts.ts .te-prose > * { grid-column: 2; }
.ts.ts .te-prose > p { margin: 0 0 1.05em; text-align: justify; hyphens: manual; text-wrap: pretty; }
.ts.ts .te-prose a { color: var(--gold-ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ts.ts .te-prose a:hover { color: var(--navy-800); }
.ts.ts .te-prose .te-dateline {
  margin-bottom: var(--space-5); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-deep); text-align: left;
}
.ts.ts .te-prose .te-first { font-size: 1.14em; line-height: 1.62; color: var(--ink); }
.ts.ts .te-prose .te-first::first-letter {
  float: left; font-family: var(--font-display); font-weight: 400; font-size: 3.6em; line-height: .84;
  margin: .07em .1em 0 0; color: var(--gold-deep);
}
.ts.ts .te-prose h2 {
  margin: 1.9em 0 .7em; scroll-margin-top: 120px;
  font-family: var(--font-serif); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: clamp(30px, 2.5vw, 42px); line-height: 1.15; color: var(--navy-800); text-wrap: balance;
}
.ts.ts .te-prose h2::before { content: ""; display: block; width: 44px; height: 1px; margin-bottom: 22px; background: var(--gold); }
.ts.ts .te-prose h3 { margin: 1.6em 0 .5em; font-family: var(--font-serif); font-weight: 600; font-size: 1.2em; line-height: 1.3; color: var(--navy-800); text-transform: none; letter-spacing: 0; }
.ts.ts .te-prose ul, .ts.ts .te-prose ol { margin: 0 0 1.2em; padding: 0; }
.ts.ts .te-prose ul li { position: relative; padding-left: 26px; margin-bottom: .35em; }
.ts.ts .te-prose ul li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.ts.ts .te-prose ol { list-style: decimal; padding-left: 1.4em; }
.ts.ts .te-prose ol li::marker { color: var(--gold-deep); font-family: var(--font-display); }
.ts.ts .te-prose blockquote {
  margin: 1.4em 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--gold);
  font-style: italic; font-size: 1.2em; line-height: 1.5; color: var(--navy-800);
}

.ts.ts .te-prose > figure { grid-column: 1 / -1; margin: var(--space-7) 0 var(--space-7); }
/* The frame clips the drift below. overflow: clip, never hidden: hidden would make the
 * frame a scroll container and freeze the view() timeline (see the Home Care README). */
.ts.ts .te-prose > figure .te-frame { display: block; overflow: clip; box-shadow: var(--shadow-3); }
.ts.ts .te-prose > figure img { display: block; width: 100%; height: auto; }
.ts.ts .te-prose > figure figcaption {
  max-width: 720px; margin: var(--space-4) auto 0; padding-left: var(--space-4); border-left: 1px solid var(--gold);
  font-family: var(--font-sans); font-size: var(--fs-meta); line-height: 1.6; color: var(--fg-3);
}

.ts.ts .te-table { grid-column: 1 / -1; margin: var(--space-6) 0 var(--space-7); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts.ts .te-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: 1.45; }
.ts.ts .te-table th {
  padding: 16px 18px; text-align: left; background: var(--navy-800); color: var(--champagne-100);
  font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.ts.ts .te-table td { padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--ink-2); vertical-align: top; }
.ts.ts .te-table tr:nth-child(odd) td { background: var(--paper); }
.ts.ts .te-table td:first-child { font-family: var(--font-serif); font-size: 1.12em; font-weight: 500; color: var(--navy-800); }

.ts.ts .te-notes {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: var(--fs-meta); line-height: 1.7; color: var(--fg-3);
}
.ts.ts .te-notes .ts-eyebrow { margin-bottom: var(--space-3); }
.ts.ts .te-notes p { margin: 0 0 var(--space-3); }
.ts.ts .te-notes a { color: var(--fg-2); }

.ts.ts .te-authorcard {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-6); align-items: start;
  margin-top: var(--space-8); padding: var(--space-7) var(--space-6); background: var(--paper);
  border-top: 1px solid var(--gold);
}
.ts.ts .te-portrait--small img { filter: drop-shadow(0 6px 14px rgba(14, 17, 48, .2)); }
.ts.ts .te-authorcard-name { margin: var(--space-3) 0 2px; }
.ts.ts .te-authorcard-name a {
  font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy-800); text-decoration: none;
}
.ts.ts .te-authorcard-role { font-style: italic; color: var(--fg-3); margin-bottom: var(--space-3); }
.ts.ts .te-authorcard-bio { font-size: var(--fs-body); line-height: 1.6; margin-bottom: var(--space-5); text-align: justify; hyphens: manual; }

.ts.ts .te-related { padding: var(--space-9) 0 var(--space-10); background: var(--navy-800); }
.ts.ts .te-related .ts-eyebrow { color: var(--gold-light); }
.ts.ts .te-related .ts-h2 { color: var(--champagne-100); margin: var(--space-4) 0 var(--space-8); }
.ts.ts .te-related .te-card-title { color: var(--champagne-100); }
.ts.ts .te-related .te-card-link:hover .te-card-title { color: var(--gold-light); }
.ts.ts .te-related .te-card-meta { color: var(--gold-light); }
.ts.ts .te-related .te-card-meta time { color: var(--champagne-300); }
.ts.ts .te-related .te-card-excerpt { color: var(--champagne-300); }
.ts.ts .te-related .te-card-photo { box-shadow: none; }

.ts.ts .te-related .te-h2link { color: var(--champagne-100); border-bottom: 0; text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
.ts.ts .te-related .te-h2link::after { content: " \2192"; font-style: normal; font-size: .7em; color: var(--gold-light); }
.ts.ts .te-related .te-h2link:hover { color: var(--gold-light); }
.ts.ts .te-related-sub {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); align-items: center; justify-content: space-between;
  margin: var(--space-9) 0 var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--border-on-dark);
}
.ts.ts .te-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ts.ts .te-chips a {
  padding: 10px 16px; border: 1px solid var(--border-on-dark); color: var(--champagne-200); text-decoration: none;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.ts.ts .te-chips a:hover, .ts.ts .te-chips a:focus-visible { border-color: var(--gold); color: var(--gold-light); }

/* ------------------------------------------------ motion (same timelines as the service template) */
@supports (animation-timeline: view()) {
  .ts.ts .te-profile-text > *, .ts.ts .te-section-head, .ts.ts .te-card, .ts.ts .te-prose > h2, .ts.ts .te-prose > figure, .ts.ts .te-table, .ts.ts .te-authorcard {
    animation-name: var(--ts-in); animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: cover 0% cover 30%;
  }
  .ts.ts .te-grid > :nth-child(3n+2) { animation-range: cover 6% cover 38%; }
  .ts.ts .te-grid > :nth-child(3n) { animation-range: cover 12% cover 46%; }
  .ts.ts .te-profile .te-portrait { animation: var(--ts-in) 1400ms var(--ease-out) 500ms both; }
}
.ts.ts .te-article-hero .te-crumbs, .ts.ts .te-article-hero .te-title {
  animation-name: var(--ts-in); animation-duration: 1400ms; animation-timing-function: var(--ease-out);
  animation-fill-mode: both; animation-timeline: auto;
}
.ts.ts .te-article-hero .te-title { animation-delay: 200ms; }

/* Article photos move like the heroes (ts-float, trevi-components.css). The hero
 * photos already get it from the shared .ts-hero img rule. */
.ts.ts .te-article-hero img { animation-duration: 30s; }
.ts.ts .te-prose > figure .te-frame img {
  animation-name: var(--ts-hero-photo); animation-duration: 22s;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-direction: alternate; animation-fill-mode: both;
  animation-timeline: auto; will-change: transform;
}
/* Photos further down start mid-movement so they never move in step. */
.ts.ts .te-prose > figure:nth-of-type(2n) .te-frame img { animation-delay: -9s; animation-direction: alternate-reverse; }
.ts.ts .te-prose > figure:nth-of-type(3n) .te-frame img { animation-delay: -15s; }
@media (prefers-reduced-motion: reduce) {
  .ts.ts .te-prose > figure .te-frame img { animation-duration: 30s; }
}

/* ------------------------------------------------ large screens */
@media (min-width: 1600px) {
  .ts.ts .te-body-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .ts.ts .te-prose { grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); }
}

/* ------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .ts.ts .te-body-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ts.ts .te-toc { position: static; max-width: 720px; width: 100%; margin: 0 auto var(--space-7); }
  .ts.ts .te-toc details { border: 1px solid var(--border-gold); padding: var(--space-4) var(--space-5); background: var(--paper); }
  .ts.ts .te-toc summary { cursor: pointer; border: 0; padding: 0; display: flex; justify-content: space-between; }
  .ts.ts .te-toc summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--gold-deep); }
  .ts.ts .te-toc details[open] summary::after { content: "\2212"; }
  .ts.ts .te-prose { grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); }
}

/* ------------------------------------------------ phone */
@media (max-width: 900px) {
  .ts.ts .te-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ts.ts .te-profile .te-portrait { grid-column: 1; grid-row: 1; justify-self: start; width: 180px; margin-top: -90px; }
  .ts.ts .te-profile .te-profile-text { grid-column: 1; grid-row: 2; padding-top: var(--space-7); }
  .ts.ts .te-author-hero .ts-wrap { padding-bottom: calc(var(--space-9) + var(--space-6)); }
  .ts.ts .te-byline { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .ts.ts .te-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ts.ts .te-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
  .ts.ts .te-facts dd { margin: 0; }
  .ts.ts .te-prose { display: block; font-size: 19px; }
  .ts.ts .te-prose > figure, .ts.ts .te-table { margin-left: calc(var(--space-5) * -1); margin-right: calc(var(--space-5) * -1); }
  .ts.ts .te-prose > figure .te-frame { box-shadow: none; }
  .ts.ts .te-prose > figure figcaption { margin-left: var(--space-5); margin-right: var(--space-5); }
  .ts.ts .te-table { padding: 0 var(--space-5); }
  .ts.ts .te-authorcard { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) var(--space-5); }
  .ts.ts .te-authorcard .te-portrait--small { width: 96px; }
  .ts.ts .te-authorcard-bio { text-align: left; }
  .ts.ts .te-title { font-size: clamp(34px, 9vw, 44px); }
}

/* #8328: one readable gold for small editorial labels on light surfaces.
 * Minimum contrast: 4.75:1 on paper, 5.04:1 on ivory. Other golds stay unchanged. */
.ts.ts.te { --te-small-text-gold: #82663f; }
.ts.ts.te .te-toc summary,
.ts.ts.te .te-dateline,
.ts.ts.te .te-notes .ts-eyebrow { color: var(--te-small-text-gold); }

/* WordPress integration only. Palette, type and motion stay in shared layers. */
body.trevi-editorial-page { margin: 0; }
.trevi-editorial-page .trevi-editorial-main { margin: 0; padding: 0; width: 100%; max-width: none; }
.trevi-editorial-page .te-pager .page-numbers {
  min-width: 48px; height: 48px; padding: 0 14px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--border-strong);
  color: var(--navy-800); font-family: var(--font-sans); font-size: var(--fs-meta); letter-spacing: .08em;
}
.trevi-editorial-page .te-pager .current { background: var(--navy-800); border-color: var(--navy-800); color: var(--champagne-100); }
.trevi-editorial-page .te-pager .dots { border-color: transparent; }
.trevi-editorial-page .te-pager .prev, .trevi-editorial-page .te-pager .next {
  text-transform: uppercase; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); padding: 0 22px;
}
.ts.ts .te-body-grid--no-toc { grid-template-columns: minmax(0, 1fr); }
/* Decorative brand monogram while a public author portrait is unavailable. */
.ts.ts .te-portrait--placeholder {
  display: grid; place-items: center; box-sizing: border-box;
  border: 2px solid var(--gold); border-radius: 50%;
  background: var(--navy-800); color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 84px); letter-spacing: .06em;
  box-shadow: 0 14px 28px rgba(14, 17, 48, .28);
}
.ts.ts .te-portrait--small.te-portrait--placeholder { font-size: 32px; }