*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; scroll-behavior: smooth; } /* ===== Page transitions ===== Smooth fade between pages. Driven by transitions.js. IMPORTANT: NO `transform` on because that breaks position:fixed for the lightbox and modals (they'd be positioned relative to body, not viewport). Slide-in animation lives on .hero-content via keyframes, and a subtle slide is added to direct body children via the dedicated wrapper class below. */ body { transition: opacity .4s ease; } html.page-entering body { opacity: 0; } html.page-leaving body { opacity: 0; transition: opacity .22s ease; } /* Stagger reveal for hero content */ html.page-entered .hero-content > * { animation: rise-in .7s cubic-bezier(.22, .61, .36, 1) both; } html.page-entered .hero-content > *:nth-child(1) { animation-delay: .05s; } html.page-entered .hero-content > *:nth-child(2) { animation-delay: .15s; } html.page-entered .hero-content > *:nth-child(3) { animation-delay: .25s; } html.page-entered .hero-content > *:nth-child(4) { animation-delay: .35s; } html.page-entered .hero-content > *:nth-child(5) { animation-delay: .45s; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { body, html.page-leaving body, html.page-entering body, html.page-entered body { transition: none !important; transform: none !important; animation: none !important; } html.page-entering body, html.page-leaving body { opacity: 1 !important; } } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; letter-spacing: -0.005em; } img, video { max-width: 100%; height: auto; display: block; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } .font-display { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.02; font-feature-settings: 'kern' 1, 'liga' 1; } .font-accent { font-family: var(--font-accent); letter-spacing: .015em; font-weight: 400; font-style: italic; } .italic-luxe { font-family: var(--font-accent); font-style: italic; letter-spacing: .01em; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gold-text { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .section { padding: 5rem 0; } .section-tight { padding: 3rem 0; } .eyebrow { display: inline-flex; align-items: center; gap: .85rem; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-500); } .eyebrow::before { content: ''; display: inline-block; width: 42px; height: 1px; background: var(--gradient-gold); } .eyebrow-num { font-family: var(--font-accent); font-style: italic; color: var(--gold-400); font-size: 18px; letter-spacing: .02em; margin-right: .25rem; } .eyebrow-light { color: var(--gold-200); } .eyebrow-light::before { background: var(--gradient-gold); } .h-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; } .h1 { font-size: clamp(2.75rem, 6.5vw, 5.5rem); font-weight: 500; } .h2 { font-size: clamp(2.15rem, 4.8vw, 3.75rem); font-weight: 500; } .h3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 600; } .h4 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; } /* Ornamental gold divider */ .ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0; color: var(--gold-400); } .ornament::before, .ornament::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-300)); } .ornament::after { background: linear-gradient(-90deg, transparent, var(--gold-300)); } .ornament-mark { font-family: var(--font-accent); font-style: italic; font-size: 18px; } /* Drop cap for editorial paragraphs */ .dropcap::first-letter { font-family: var(--font-display); font-weight: 500; font-size: 4.5rem; line-height: .85; float: left; margin: .15rem .65rem -.15rem 0; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .muted { color: var(--color-muted); } .small { font-size: .85rem; } .tiny { font-size: .75rem; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); } /* Selection */ ::selection { background: var(--gold-300); color: var(--ink-900); }