/* 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;
}