/* ═══════════════════════════════════════════════════════════════════
MAYA SOJOURNS — style.css
Brand system: Pañcha Mahābhūta · v11 · Charcoal · Bronze · Bone
Typography: Cormorant Garamond · Inter · Noto Serif Devanagari
Version 2.0 · May 2026
═══════════════════════════════════════════════════════════════════ */
/* ─── CUSTOM PROPERTIES ─────────────────────────────────────────── */
/* v11 Pañcha Mahābhūta token system — Light is default, Dark is the override.
First-visit theme is chosen by prefers-color-scheme in main.js. */
:root {
/* ── Pañcha Mahābhūta · Light palette ───────────────────────── */
--bone-l: #FAF6EC; /* Ākāśa bone — page bg (day) */
--bone-l-warm: #FFFBF1;
--bone-l-cool: #F0EAD9;
--alabaster-l: #FFFCF3;
--graphite-l: #1F1D18; /* Pṛthvī graphite — text */
--graphite-l-2: #4A463C;
--umber-l: #6E6659; /* Jala umber — secondary text (AA-tuned) */
--bronze-l: #8C6A47; /* Agni bronze — accent */
--bronze-l-2: #A8855E;
--hairline-l: rgba(31, 29, 24, 0.10);
--hairline-l-2: rgba(31, 29, 24, 0.22);
/* ── Pañcha Mahābhūta · Dark palette ────────────────────────── */
--charcoal-d: #1C1B19; /* Ākāśa charcoal — page bg (night) */
--charcoal-d-2: #23211D;
--charcoal-d-3: #161513;
--bone-d: #E8DFCC; /* Pṛthvī bone — body text */
--bone-d-2: #B8AE99;
--bone-d-hi: #F4EFE3; /* highlight bone */
--bone-d-3: #8B826E; /* Jala mist */
--bronze-d: #B89370; /* Agni soft bronze */
--bronze-d-2: #D4AC85; /* lighter bronze glow */
--hairline-d: rgba(232, 223, 204, 0.10);
--hairline-d-2: rgba(232, 223, 204, 0.22);
/* ── Active aliases default to light (per v11) ──────────────── */
--bg: var(--bone-l);
--surface: var(--alabaster-l);
--surface-2: var(--bone-l-warm);
--recess: var(--bone-l-cool);
--text: var(--graphite-l);
--text-2: var(--graphite-l-2);
--text-3: var(--umber-l);
--accent: var(--bronze-l);
--accent-2: var(--bronze-l-2);
--rule: var(--hairline-l);
--rule-2: var(--hairline-l-2);
/* ── Legacy aliases — kept until full callsite refactor ─────── */
--obsidian: var(--charcoal-d);
--warm-gold: var(--bronze-d);
--ivory: var(--bone-d);
--paper: var(--bone-d-hi);
--slate: var(--text-3);
--white: var(--bone-l);
--gold-deep: var(--bronze-l);
--gold-soft: var(--bronze-d-2);
--stone: var(--charcoal-d-2);
--void: var(--charcoal-d-3);
--parchment: var(--bone-d-hi);
--vellum: #DBD2BD;
--graphite: var(--graphite-l);
--bone: var(--bone-d);
--gold-faint: rgba(140, 106, 71, 0.07);
--gold-border: rgba(140, 106, 71, 0.20);
--gold-mid: rgba(140, 106, 71, 0.35);
--obsidian-nav: rgba(250, 246, 236, 0.86);
/* ── Typography stacks ──────────────────────────────────────── */
--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
--font-deva: 'Noto Serif Devanagari', serif;
/* ── Type — v11 modular scale (brand kit v11) ───────────────── */
--type-micro: 8.5px;
--type-eyebrow: 9px; /* kit eyebrows / labels */
--type-meta: 10px;
--type-body-sm: 14px; /* kit dl-row / dense data */
--type-body-italic: 14px; /* kit .tile .body italic */
--type-body: 18.5px; /* prose paragraph — kit-aligned readable */
--type-lede: clamp(18px, 1.7vw, 24px);
--type-tile-sm: 22px;
--type-tile: 24px; /* kit .tile .ttl */
--type-section: clamp(34px, 4vw, 60px);
--type-display: clamp(72px, 11vw, 180px);
--tracking-cap: 0.42em;
--tracking-nav: 0.34em;
--tracking-meta: 0.22em;
--tracking-body: 0.005em;
--leading-tight: 1.08;
--leading-body: 1.7; /* generous prose breathing */
--leading-loose: 1.85;
/* ── Spacing ────────────────────────────────────────────────── */
--space-xs: 0.75rem;
--space-sm: 1.5rem;
--space-md: 3rem;
--space-lg: 5rem;
--space-xl: 7.5rem;
--space-2xl: 10rem;
/* ── Layout ─────────────────────────────────────────────────── */
--max-width: 1280px;
--content-width: 640px;
--margin-h: clamp(1.5rem, 7vw, 7rem);
/* ── Animation ──────────────────────────────────────────────── */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-silk: cubic-bezier(0.16, 1, 0.30, 1);
--ease-io: cubic-bezier(0.7, 0, 0.3, 1);
--duration: 0.45s;
}
/* ─── DARK THEME — v11 charcoal/night override ──────────────────── */
[data-theme="dark"] {
--bg: var(--charcoal-d);
--surface: var(--charcoal-d-2);
--surface-2: var(--charcoal-d-2);
--recess: var(--charcoal-d-3);
--text: var(--bone-d);
--text-2: var(--bone-d-2);
--text-3: var(--bone-d-3);
--accent: var(--bronze-d);
--accent-2: var(--bronze-d-2);
--rule: var(--hairline-d);
--rule-2: var(--hairline-d-2);
/* legacy aliases swap */
--obsidian: var(--charcoal-d);
--warm-gold: var(--bronze-d);
--ivory: var(--bone-d);
--paper: var(--bone-d-hi);
--slate: var(--bone-d-3);
--white: var(--bone-d);
--gold-deep: var(--bronze-d-2);
--obsidian-nav: rgba(28, 27, 25, 0.86);
--gold-faint: rgba(184, 147, 112, 0.08);
--gold-border: rgba(184, 147, 112, 0.22);
--gold-mid: rgba(184, 147, 112, 0.40);
}
/* ─── LIGHT THEME — explicit override (mirrors :root) ───────────── */
[data-theme="light"] {
--bg: var(--bone-l);
--surface: var(--alabaster-l);
--surface-2: var(--bone-l-warm);
--recess: var(--bone-l-cool);
--text: var(--graphite-l);
--text-2: var(--graphite-l-2);
--text-3: var(--umber-l);
--accent: var(--bronze-l);
--accent-2: var(--bronze-l-2);
--rule: var(--hairline-l);
--rule-2: var(--hairline-l-2);
--obsidian: var(--bone-l);
--warm-gold: var(--bronze-l);
--ivory: var(--graphite-l);
--paper: var(--alabaster-l);
--slate: var(--umber-l);
--white: var(--graphite-l);
--gold-deep: var(--bronze-l-2);
--obsidian-nav: rgba(250, 246, 236, 0.86);
--gold-faint: rgba(140, 106, 71, 0.07);
--gold-border: rgba(140, 106, 71, 0.20);
--gold-mid: rgba(140, 106, 71, 0.35);
}
/* ─── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::selection {
background: var(--accent);
color: var(--bg);
}
/* Skip-to-content — visible only on keyboard focus */
.skip-link {
position: absolute;
left: 0.75rem;
top: -4rem;
z-index: 2000;
background: var(--accent);
color: var(--bg);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.6rem 1rem;
transition: top 0.25s var(--ease);
}
.skip-link:focus {
top: 0.75rem;
outline: 2px solid var(--bg);
outline-offset: 2px;
}
[id="main"]:focus {
outline: none;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.9s var(--ease-silk), color 0.9s var(--ease-silk);
font-family: var(--font-serif);
font-weight: 300;
font-size: var(--type-body);
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
p {
font-size: var(--type-body);
font-weight: 400;
line-height: var(--leading-body);
}
/* ─── GRAIN TEXTURE — subtle paper noise across entire site ─────── */
/* v11: warm multiply on light (default), warm screen on dark */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: .55;
}
[data-theme="dark"] body::before {
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: screen;
opacity: .55;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
address {
font-style: normal;
}
button {
cursor: pointer;
border: none;
background: none;
font: inherit;
}
/* ─── GOLD RULES — section dividers ─────────────────────────────── */
.gold-rule {
display: block;
height: 1px;
background-color: var(--warm-gold);
margin-bottom: var(--space-md);
}
/* Short accent rule — used under hero */
.hero-rule {
width: 48px;
margin: var(--space-sm) auto 0;
animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
/* Full-width section rule */
.gold-rule--full {
width: 100%;
}
/* Tier internal divider */
.tier-rule {
width: 24px;
height: 1px;
background-color: var(--warm-gold);
margin: var(--space-sm) 0;
}
/* ─── NAVIGATION ─────────────────────────────────────────────────── */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1.4rem var(--margin-h);
transition: background-color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk),
padding 0.5s var(--ease-silk);
}
.site-nav.is-scrolled {
background-color: var(--obsidian-nav);
border-bottom: 1px solid var(--gold-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1rem var(--margin-h);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--max-width);
margin: 0 auto;
gap: var(--space-md);
}
.nav-wordmark {
display: inline-flex;
align-items: center;
line-height: 1;
flex-shrink: 0;
}
.nav-roman {
font-family: var(--font-serif);
font-size: 0.875rem; /* 14px — kit .brand-mini .wm voice */
font-weight: 400;
letter-spacing: 0.18em;
color: var(--warm-gold);
text-transform: uppercase;
transition: color 0.4s var(--ease-silk);
}
.nav-wordmark:hover .nav-roman {
color: var(--gold-soft);
}
/* Desktop default: inline links, centred-right */
.nav-links {
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(1.4rem, 3vw, 2.6rem);
margin-left: auto;
margin-right: var(--space-md);
}
.nav-links a {
position: relative;
font-family: var(--font-sans);
font-size: 10px; /* kit .btn base eyebrow */
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ivory);
padding: 0.4rem 0;
line-height: 1;
transition: color 0.35s var(--ease-silk), letter-spacing 0.5s var(--ease-silk);
}
/* Underline-grow on hover and current page */
.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: var(--warm-gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--ease-silk);
}
.nav-links a:hover { color: var(--warm-gold); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--warm-gold); }
.nav-links a[aria-current="page"]::after {
transform: scaleX(1);
opacity: 0.6;
}
/* "An Introduction" CTA — kit .btn-pill outline, eyebrow-scale */
.nav-cta-persistent {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--warm-gold);
background: transparent;
border: 1px solid var(--warm-gold);
border-radius: 999px;
padding: 9px 18px;
line-height: 1;
white-space: nowrap;
position: relative;
z-index: 1020;
flex-shrink: 0;
transition: color 0.4s var(--ease-silk),
background 0.4s var(--ease-silk),
border-color 0.4s var(--ease-silk),
letter-spacing 0.5s var(--ease-silk);
}
.nav-cta-persistent:hover {
color: var(--paper);
background: var(--warm-gold);
border-color: var(--warm-gold);
letter-spacing: 0.42em;
}
.nav-controls {
display: flex;
align-items: center;
gap: 18px; /* kit .frame-top-r rhythm */
}
/* Mobile (<900px): collapse to a labelled Menu trigger + overlay */
@media (max-width: 899px) {
.nav-links {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
padding: 5rem var(--margin-h) 4rem;
background-color: var(--obsidian);
background-image:
radial-gradient(ellipse 60% 40% at 50% 35%, rgba(184, 150, 90, 0.10), transparent 70%);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
z-index: 1200;
gap: 0;
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.45s var(--ease-silk), visibility 0s linear 0.45s;
}
.nav-links.is-open {
opacity: 1;
visibility: visible;
pointer-events: all;
transition: opacity 0.45s var(--ease-silk), visibility 0s linear 0s;
}
.nav-links a {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 6vw, 2.4rem);
font-weight: 300;
letter-spacing: 0.02em;
text-transform: none;
padding: 0.7rem 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s var(--ease-silk), transform 0.5s var(--ease-silk);
}
.nav-links a::after { display: none; }
.nav-links.is-open a { opacity: 1; transform: translateY(0); }
.nav-links.is-open a:nth-child(2) { transition-delay: 0.05s; }
.nav-links.is-open a:nth-child(3) { transition-delay: 0.10s; }
.nav-links.is-open a:nth-child(4) { transition-delay: 0.15s; }
/* "An Introduction" CTA hides inside the open mobile drawer — its
equivalent appears below the nav links inside the drawer instead. */
.nav-cta-persistent {
display: none;
}
/* Theme toggle relocates from header into the open drawer on mobile.
We append a clone in JS; original stays in DOM but visually hidden. */
.nav-controls .theme-toggle {
display: none;
}
.nav-links .theme-toggle {
display: inline-block;
margin-top: 2.4rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s var(--ease-silk) 0.20s,
transform 0.5s var(--ease-silk) 0.20s,
border-color 0.4s var(--ease-silk),
background 0.4s var(--ease-silk);
}
.nav-links.is-open .theme-toggle {
opacity: 1;
transform: translateY(0);
}
/* Mobile drawer: an "Introduction" link that mirrors the header CTA */
.nav-drawer-cta {
display: inline-block;
margin-top: 1.4rem;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--warm-gold);
border-bottom: 1px solid var(--gold-border);
padding-bottom: 0.5rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s var(--ease-silk) 0.18s,
transform 0.5s var(--ease-silk) 0.18s,
color 0.3s, border-color 0.3s;
}
.nav-links.is-open .nav-drawer-cta { opacity: 1; transform: translateY(0); }
.nav-drawer-cta:hover { color: var(--gold-soft); border-color: var(--warm-gold); }
}
/* Mobile menu toggle — minimalist text-only "Menu / Close" per brand rule.
Label text is set via JS (textContent flips between "Menu" and "Close"). */
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
background: none;
border: none;
position: relative;
z-index: 1220;
padding: 0.5rem 0;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--warm-gold);
transition: color 0.3s var(--ease-silk), letter-spacing 0.5s var(--ease-silk);
}
.nav-toggle:hover {
color: var(--gold-soft);
letter-spacing: 0.42em;
}
.nav-toggle-label {
display: inline-block;
}
.nav-toggle-dot { display: none; }
@media (max-width: 899px) {
.nav-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
.nav-roman { font-size: 0.78rem; letter-spacing: 0.18em; }
}
/* Cloned mobile-drawer controls — hidden on desktop, revealed inside the
open drawer on mobile (see .nav-links .theme-toggle and .nav-drawer-cta
rules inside the @media (max-width: 899px) block above). Scoped to
min-width: 900px so it never overrides the mobile rules. */
@media (min-width: 900px) {
.nav-links .theme-toggle,
.nav-drawer-cta {
display: none;
}
}
/* ─── v11 Theme toggle — 46×24 pill with sliding bronze indicator ── */
.theme-toggle {
width: 46px;
height: 24px;
border: 1px solid var(--rule-2);
border-radius: 12px;
background: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
padding: 0;
z-index: 1020;
transition: border-color 0.4s var(--ease-silk), background 0.4s var(--ease-silk);
}
.theme-toggle:hover {
border-color: var(--accent);
}
.theme-toggle::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
transition: transform 0.55s var(--ease-silk), background 0.4s var(--ease-silk);
}
[data-theme="dark"] .theme-toggle::after {
transform: translateX(22px);
background: var(--bone-d-hi);
}
/* (Audio toggle removed — internal-only "ambient" terminology was confusing visitors.
Audio infrastructure remains in main.js but no UI surfaces it.) */
/* Mobile: header theme-toggle hides; an equivalent appears inside the
open drawer (see .nav-links .theme-toggle in the mobile @media block). */
body.nav-is-open {
overflow: hidden;
}
/* ─── BRAND KIT v11 BUTTONS — single canonical system ─────────────── */
/* Five variants: .btn-primary .btn-bronze .btn-quiet .btn-ghost .btn-pill
All inherit from .btn base. Use these instead of bespoke buttons. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
padding: 18px 28px;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
text-decoration: none;
text-align: left;
line-height: 1;
transition: background 0.5s var(--ease-silk),
color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk),
letter-spacing 0.6s var(--ease-silk);
}
.btn-primary {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.btn-primary:hover {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
letter-spacing: 0.42em;
}
.btn-bronze {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
}
.btn-bronze:hover {
background: transparent;
color: var(--accent);
letter-spacing: 0.42em;
}
.btn-quiet {
background: transparent;
color: var(--text);
border-bottom: 1px solid var(--rule-2);
padding: 14px 0;
text-align: left;
border-radius: 0;
}
.btn-quiet:hover {
color: var(--accent);
border-color: var(--accent);
letter-spacing: 0.42em;
}
.btn-ghost {
background: transparent;
color: var(--text-3);
border-color: var(--rule-2);
}
.btn-ghost:hover {
color: var(--text);
border-color: var(--text);
letter-spacing: 0.42em;
}
.btn-pill {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 999px;
padding: 14px 24px;
}
.btn-pill:hover {
background: var(--accent);
color: var(--paper);
letter-spacing: 0.42em;
}
/* ─── HERO SECTION ───────────────────────────────────────────────── */
.hero {
min-height: 100svh;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 var(--margin-h);
position: relative;
overflow: hidden;
}
/* Ambient video — sits behind the gradient overlay */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
z-index: 0;
opacity: 0.78;
filter: saturate(0.7) brightness(0.68) contrast(1.05);
transition: opacity 1.2s;
}
/* Video failed to load — reveal the still fallback */
.hero.hero-video--failed .hero-video { display: none; }
.hero.hero-video--failed .hero-bg--fallback { opacity: 0.6; }
[data-theme="light"] .hero-video {
opacity: 0.45;
filter: saturate(0.4) brightness(0.8) sepia(0.18);
mix-blend-mode: multiply;
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
opacity: 0.55;
filter: saturate(0.7) brightness(0.75);
mix-blend-mode: luminosity;
transition: opacity 0.6s, filter 0.6s;
}
/* Fallback image — hidden when video plays */
.hero-bg--fallback {
opacity: 0;
transition: opacity 0.6s;
}
/* Show fallback if video fails to load (no JS needed — CSS-only) */
.hero-video:not([src]) ~ .hero-bg--fallback,
.hero-video[src=""] ~ .hero-bg--fallback {
opacity: 0.55;
}
[data-theme="light"] .hero-bg {
opacity: 0.45;
filter: saturate(0.5) brightness(0.85) sepia(0.15);
mix-blend-mode: multiply;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 55% at 50% 40%, rgba(184, 150, 90, 0.10) 0%, transparent 65%),
linear-gradient(to bottom, rgba(12,10,8,0.72) 0%, rgba(12,10,8,0.22) 40%, rgba(12,10,8,0.85) 100%);
pointer-events: none;
z-index: 1;
animation: heroGlow 12s ease-in-out infinite alternate;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 880px;
width: 100%;
}
/* Devanagari — secondary mark above the wordmark */
.hero-devanagari {
font-family: var(--font-deva);
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--warm-gold);
line-height: 1.1;
margin-bottom: 1rem;
animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
/* MAYA SOJOURNS wordmark — dominant visual anchor */
.hero-wordmark {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 4.2vw, 4.25rem);
font-weight: 300;
letter-spacing: clamp(0.18em, 0.6vw, 0.42em);
color: var(--ivory);
margin-bottom: var(--space-lg);
text-transform: uppercase;
white-space: nowrap;
animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@media (max-width: 520px) {
.hero-wordmark {
white-space: normal;
word-spacing: 100vw;
letter-spacing: 0.22em;
line-height: 1.15;
}
}
/* Brand sentence */
.hero-sentence {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(1.35rem, 3.2vw, 2.2rem);
color: var(--ivory);
line-height: 1.5;
max-width: 620px;
margin: 0 auto;
animation: heroFadeUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
/* ─── BEAT SECTIONS (shared) ─────────────────────────────────────── */
.beat {
padding: var(--space-xl) var(--margin-h);
position: relative;
}
.beat-inner {
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
}
.beat-inner--wide {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}
/* Two-column split — text left, image right */
.beat-inner--split {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--space-xl);
align-items: center;
}
/* Section label — small caps Warm Gold */
.section-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
}
/* Body text — leading 1.75, Cormorant Garamond Regular */
.body-text {
font-family: var(--font-serif);
font-size: var(--type-body);
font-weight: 400;
line-height: 1.75;
color: var(--ivory);
}
.body-text + .body-text {
margin-top: 1.25rem;
}
/* Inline text links */
.body-link {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--warm-gold);
margin-top: var(--space-md);
transition: color var(--duration);
}
.body-link:hover {
color: var(--ivory);
}
/* ─── BEAT 2: THE OFFER ──────────────────────────────────────────── */
.offer-block {
border-left: 1px solid var(--warm-gold);
padding-left: var(--space-sm);
margin: 0;
}
.offer-line {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.8vw, 2rem);
font-weight: 300;
line-height: 1.5;
color: var(--ivory);
padding: 1.2rem 0;
border-bottom: 1px solid var(--gold-border);
transition: padding-left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
color 0.5s,
letter-spacing 0.65s cubic-bezier(0.22, 1, 0.36, 1);
cursor: default;
}
.offer-line:hover {
padding-left: 2rem;
color: var(--warm-gold);
letter-spacing: 0.01em;
}
.offer-line:last-child {
border-bottom: none;
}
/* ─── BEAT 3: THE TIERS ──────────────────────────────────────────── */
.tiers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-bottom: var(--space-xl);
border: 1px solid var(--gold-border);
background: linear-gradient(180deg, rgba(184,150,90,0.03) 0%, transparent 100%);
}
.tier {
padding: var(--space-xl) var(--space-md);
border-right: 1px solid var(--gold-border);
position: relative;
overflow: hidden;
transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Subtle top-gold accent line that draws on hover */
.tier::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--warm-gold), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.tier:hover::before {
transform: scaleX(1);
}
.tier:last-child {
border-right: none;
}
.tier:hover {
background-color: rgba(184, 150, 90, 0.06);
transform: translateY(-14px);
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(184,150,90,0.15);
}
.tier-devanagari {
font-family: var(--font-deva);
font-size: 1.4rem;
font-weight: 400;
color: var(--warm-gold);
line-height: 1.2;
margin-bottom: 0.2rem;
}
.tier-roman {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: var(--space-xs);
letter-spacing: 0.02em;
}
.tier-duration {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 0.3rem;
}
.tier-price {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
transition: color 0.4s;
}
.tier:hover .tier-price {
background: linear-gradient(90deg, var(--warm-gold), var(--gold-soft), var(--warm-gold));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: goldShimmer 2s linear infinite;
}
.tier-desc {
font-family: var(--font-serif);
font-size: 1.03rem;
font-weight: 400;
line-height: 1.75;
color: var(--ivory);
opacity: 0.9;
margin-bottom: var(--space-md);
}
.tier-link {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--warm-gold);
transition: color var(--duration);
}
.tier-link:hover {
color: var(--ivory);
}
/* Quiet institutional affiliations */
.affiliations {
padding-top: var(--space-md);
border-top: 1px solid var(--gold-border);
}
.affiliations-label {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 0.75rem;
}
.affiliations-row {
display: flex;
gap: var(--space-sm);
align-items: center;
flex-wrap: wrap;
}
.affiliation-name {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.08em;
color: rgba(138, 138, 138, 0.85);
}
.affiliation-sep {
color: var(--gold-border);
font-size: 0.8rem;
}
/* ─── IMAGE BAND — full-bleed immersive mosaic ───────────────────── */
.image-band {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
gap: 3px;
overflow: hidden;
position: relative;
}
.image-band-item {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
}
.image-band-item--tall {
aspect-ratio: 2 / 3;
margin-top: -5%;
margin-bottom: -5%;
}
.image-band-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.6) brightness(0.72);
transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s;
mix-blend-mode: luminosity;
}
[data-theme="light"] .image-band-item img {
filter: saturate(0.5) brightness(0.85) sepia(0.15);
mix-blend-mode: multiply;
}
.image-band-item:hover img {
transform: scale(1.08);
filter: saturate(0.85) brightness(0.85);
}
[data-theme="light"] .image-band-item:hover img {
filter: saturate(0.75) brightness(0.88) sepia(0.08);
}
.image-band-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(14, 12, 10, 0.25) 0%,
transparent 35%,
transparent 65%,
rgba(14, 12, 10, 0.55) 100%);
pointer-events: none;
z-index: 1;
transition: background 0.8s;
}
.image-band-item:hover::after {
background: linear-gradient(to bottom,
rgba(14, 12, 10, 0.1) 0%,
transparent 30%,
transparent 70%,
rgba(14, 12, 10, 0.35) 100%);
}
[data-theme="light"] .image-band-item::after {
background: linear-gradient(to bottom,
rgba(242, 237, 228, 0.1) 0%,
transparent 30%,
transparent 70%,
rgba(184, 150, 90, 0.15) 100%);
}
@media (max-width: 768px) {
.image-band {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.image-band-item--tall {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
margin: 0;
order: -1;
}
}
/* ─── HERO IMAGE — luxury blend ──────────────────────────────────── */
.vertical-heading {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.5rem);
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
margin-bottom: var(--space-md);
}
/* Image placeholder — replace with actual 4:5 portrait */
.vertical-image {
position: relative;
top: 0;
overflow: hidden;
}
.image-placeholder {
aspect-ratio: 4 / 5;
background-color: var(--gold-faint);
border: 1px solid var(--gold-border);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.custodian:hover .image-placeholder,
.beat--vertical:hover .image-placeholder,
.beat--vertical:hover .vertical-img {
transform: scale(1.05);
background-color: rgba(184, 150, 90, 0.11);
}
.vertical-img {
width: 100%;
display: block;
object-fit: cover;
aspect-ratio: 4 / 5;
filter: saturate(0.75) brightness(0.82);
mix-blend-mode: luminosity;
transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s;
}
[data-theme="light"] .vertical-img {
filter: saturate(0.6) brightness(0.88) sepia(0.1);
mix-blend-mode: multiply;
}
.beat--vertical:hover .vertical-img,
.vertical-image:hover .vertical-img {
filter: saturate(0.95) brightness(0.9);
}
[data-theme="light"] .vertical-image:hover .vertical-img {
filter: saturate(0.8) brightness(0.88) sepia(0.06);
}
.image-placeholder--landscape {
aspect-ratio: 3 / 2;
}
.placeholder-text {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--slate);
text-transform: uppercase;
text-align: center;
line-height: 1.8;
}
/* ─── BEAT 5: CUSTODIANS ─────────────────────────────────────────── */
.custodians-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
margin-bottom: var(--space-md);
}
.custodian-portrait {
margin-bottom: var(--space-md);
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--gold-faint);
}
.custodian-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.6) brightness(0.85);
transition: transform 1.4s var(--ease), filter 0.6s;
}
.custodian:hover .custodian-portrait img {
transform: scale(1.05);
filter: saturate(0.85) brightness(0.92);
}
[data-theme="light"] .custodian-portrait img {
filter: saturate(0.55) brightness(0.92) sepia(0.1);
mix-blend-mode: multiply;
}
.custodian-name {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.4rem;
}
.custodian-meta {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.05em;
color: var(--slate);
line-height: 1.6;
margin-bottom: 0.4rem;
}
.custodian-vertical {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.9rem;
font-weight: 300;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
}
.custodian-bio {
font-family: var(--font-serif);
font-size: 1.03rem;
font-weight: 400;
line-height: 1.8;
color: var(--ivory);
opacity: 0.9;
}
/* ─── BEAT 6: GATEWAY ────────────────────────────────────────────── */
.beat--gateway {
padding-bottom: var(--space-2xl);
background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184,150,90,0.06) 0%, transparent 70%);
text-align: center;
}
.beat--gateway .beat-inner {
text-align: center;
}
.gateway-statement {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.6rem, 3.8vw, 3rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.35;
margin-bottom: 0.75rem;
}
.gateway-sub {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-lg);
}
.gateway-form {
display: flex;
align-items: flex-end;
gap: var(--space-sm);
max-width: 440px;
margin: 0 auto var(--space-sm);
border-bottom: 1px solid var(--gold-mid);
padding-bottom: 0.6rem;
text-align: left;
}
.gateway-input {
flex: 1;
background: none;
border: none;
outline: none;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
padding: 0.4rem 0;
letter-spacing: 0.04em;
}
.gateway-input::placeholder {
color: var(--slate);
}
.gateway-btn {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm-gold);
padding: 0.4rem 0 0.4rem var(--space-sm);
white-space: nowrap;
transition: color var(--duration);
}
.gateway-btn:hover {
color: var(--ivory);
}
.gateway-note {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 300;
color: var(--slate);
letter-spacing: 0.06em;
}
.gateway-link {
color: var(--warm-gold);
transition: color var(--duration);
}
.gateway-link:hover {
color: var(--ivory);
}
/* ─── FOOTER ─────────────────────────────────────────────────────── */
.site-footer {
padding: var(--space-lg) var(--margin-h) var(--space-md);
border-top: 1px solid var(--gold-border);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
@media (max-width: 640px) {
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
.footer-wordmark {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.28em;
color: var(--ivory);
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.footer-tagline {
font-family: var(--font-deva);
font-size: 0.85rem;
font-weight: 300;
color: var(--warm-gold);
margin-bottom: var(--space-xs);
}
.footer-offices {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 300;
color: var(--slate);
letter-spacing: 0.1em;
}
.footer-col-label {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: 0.75rem;
}
.footer-address {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 300;
color: var(--slate);
line-height: 1.7;
}
.footer-address--mt {
margin-top: 0.75rem;
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.footer-nav a {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--slate);
transition: color var(--duration);
}
.footer-nav a:hover {
color: var(--ivory);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: var(--space-sm);
border-top: 1px solid rgba(184, 150, 90, 0.1);
gap: var(--space-md);
flex-wrap: wrap;
}
.footer-legal {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 300;
color: rgba(138, 138, 138, 0.7);
letter-spacing: 0.05em;
line-height: 1.7;
}
.footer-legal a {
color: rgba(138, 138, 138, 0.5);
transition: color var(--duration);
}
.footer-legal a:hover {
color: var(--slate);
}
.footer-sep {
margin: 0 0.5rem;
}
/* ─── PAGE HEADER — interior pages ──────────────────────────────── */
.page-header {
padding: calc(5rem + var(--space-xl)) var(--margin-h) var(--space-lg);
border-bottom: 1px solid var(--gold-border);
}
.page-header-inner {
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
text-align: center;
}
.page-header-inner .page-intro {
margin-left: auto;
margin-right: auto;
}
.page-title-deva {
font-family: var(--font-deva);
font-size: clamp(1.8rem, 4vw, 3.2rem);
font-weight: 400;
color: var(--warm-gold);
line-height: 1.2;
margin-bottom: 0.3rem;
}
.page-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3.5vw, 2.8rem);
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
margin-bottom: var(--space-sm);
}
.page-intro {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 300;
line-height: 1.75;
color: var(--ivory);
opacity: 0.75;
max-width: 560px;
}
/* ─── ABOUT PAGE ─────────────────────────────────────────────────── */
.about-hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 0 var(--margin-h) var(--space-xl);
}
.about-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
filter: saturate(0.65) brightness(0.7);
mix-blend-mode: luminosity;
transition: filter 0.6s;
}
[data-theme="light"] .about-hero-img {
filter: saturate(0.5) brightness(0.85) sepia(0.15);
mix-blend-mode: multiply;
}
.about-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(28, 28, 28, 0.55) 0%,
transparent 40%,
rgba(28, 28, 28, 0.72) 100%);
z-index: 1;
pointer-events: none;
}
[data-theme="light"] .about-hero::before {
background: linear-gradient(to bottom,
rgba(242, 237, 228, 0.45) 0%,
transparent 40%,
rgba(242, 237, 228, 0.65) 100%);
}
.about-hero-inner {
position: relative;
z-index: 2;
max-width: 680px;
padding-top: 7rem;
}
.about-hero-title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.15;
margin-bottom: var(--space-sm);
animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.about-hero-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.1rem;
font-weight: 300;
color: var(--ivory);
opacity: 0.7;
animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
/* About split layout — text + image side by side */
.about-split-inner {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--space-xl);
align-items: center;
}
.about-split--reverse .about-split-inner {
grid-template-columns: 380px 1fr;
}
.about-split-image {
overflow: hidden;
}
.about-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 3 / 4;
filter: saturate(0.72) brightness(0.82);
mix-blend-mode: luminosity;
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s;
}
[data-theme="light"] .about-img {
filter: saturate(0.58) brightness(0.88) sepia(0.12);
mix-blend-mode: multiply;
}
.about-split-image:hover .about-img {
transform: scale(1.04);
filter: saturate(0.9) brightness(0.88);
}
[data-theme="light"] .about-split-image:hover .about-img {
filter: saturate(0.78) brightness(0.9) sepia(0.07);
}
/* Full-bleed quote band with background image */
.about-quote-band {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding: var(--space-xl) var(--margin-h);
}
.about-quote-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.about-quote-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: saturate(0.55) brightness(0.6);
mix-blend-mode: luminosity;
}
[data-theme="light"] .about-quote-bg img {
filter: saturate(0.45) brightness(0.75) sepia(0.2);
mix-blend-mode: multiply;
}
.about-quote-band::before {
content: '';
position: absolute;
inset: 0;
background: rgba(28, 28, 28, 0.62);
z-index: 1;
pointer-events: none;
}
[data-theme="light"] .about-quote-band::before {
background: rgba(242, 237, 228, 0.55);
}
.about-quote {
position: relative;
z-index: 2;
max-width: 760px;
}
.about-quote p {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.45;
}
/* Three-column image triptych */
.about-triptych {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
padding: var(--space-xl) var(--margin-h);
max-width: calc(var(--max-width) + 2 * var(--margin-h));
margin: 0 auto;
}
.about-triptych-item {
position: relative;
overflow: hidden;
}
.about-triptych-item img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
filter: saturate(0.7) brightness(0.8);
mix-blend-mode: luminosity;
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s;
}
[data-theme="light"] .about-triptych-item img {
filter: saturate(0.55) brightness(0.88) sepia(0.12);
mix-blend-mode: multiply;
}
.about-triptych-item:hover img {
transform: scale(1.05);
filter: saturate(0.88) brightness(0.88);
}
[data-theme="light"] .about-triptych-item:hover img {
filter: saturate(0.72) brightness(0.9) sepia(0.07);
}
.about-triptych-caption {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm-gold);
padding-top: 0.75rem;
}
@media (max-width: 1024px) {
.about-split-inner,
.about-split--reverse .about-split-inner {
grid-template-columns: 1fr 300px;
}
.about-split--reverse .about-split-inner {
grid-template-columns: 300px 1fr;
}
}
@media (max-width: 768px) {
.about-hero {
min-height: 60vh;
}
.about-split-inner,
.about-split--reverse .about-split-inner {
grid-template-columns: 1fr;
}
.about-split--reverse .about-split-inner .about-split-image {
order: 1;
}
.about-triptych {
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.about-triptych-item:nth-child(3) {
grid-column: 1 / -1;
}
.about-triptych-item:nth-child(3) img {
aspect-ratio: 16 / 9;
}
.about-quote-band {
min-height: 320px;
}
}
/* ─── RECEIVE PAGE (inquiry gateway) ────────────────────────────── */
/* No navigation on /receive — once a principal decides to begin a
conversation, the site removes all exit options except back button. */
.receive-page .site-nav .nav-links,
.receive-page .site-nav .nav-toggle {
display: none !important;
}
.receive-page .nav-inner {
justify-content: center;
}
/* Split composition: atmosphere on one side, the letter on the other.
The form page is the single conversion point on the site, so it earns
an image without breaking the no-stills rule — moving picture only. */
.receive-section {
min-height: 100svh;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
padding: 0;
}
@media (min-width: 900px) {
.receive-section {
grid-template-columns: 0.85fr 1.15fr;
}
}
/* ── atmosphere panel ─────────────────────────────────────────── */
/* min-width:0 stops the panel's content from forcing the grid column
wider than a narrow viewport */
.receive-visual {
position: relative;
overflow: hidden;
min-width: 0;
min-height: 44svh;
min-height: 44vh;
display: flex;
align-items: flex-end;
background: var(--obsidian);
}
@media (min-width: 900px) {
.receive-visual {
position: sticky;
top: 0;
height: 100vh;
min-height: 100vh;
}
}
.receive-visual-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
filter: saturate(0.78) brightness(0.94);
}
[data-theme="light"] .receive-visual-video {
filter: saturate(0.6) brightness(0.95) sepia(0.1);
}
/* Scrim only where type sits, so the picture keeps its presence */
.receive-visual-scrim {
position: absolute;
inset: 0;
z-index: 1;
/* darker at the very top so the centred wordmark stays legible where
the panel runs under the header on narrow screens */
background: linear-gradient(180deg,
rgba(28, 27, 25, 0.62) 0%,
rgba(28, 27, 25, 0.20) 16%,
rgba(28, 27, 25, 0.06) 34%,
rgba(28, 27, 25, 0.55) 72%,
rgba(28, 27, 25, 0.88) 100%);
}
/* above .hero-grain, which sits at z-index 2 */
.receive-visual-inner {
position: relative;
z-index: 3;
padding: var(--space-xl) clamp(1.5rem, 4vw, 3.25rem);
max-width: min(30rem, 100%);
}
.receive-visual-deva {
font-family: var(--font-deva);
font-size: clamp(1rem, 1.6vw, 1.35rem);
font-weight: 300;
color: var(--warm-gold);
opacity: 0.85;
letter-spacing: 0.04em;
margin-bottom: var(--space-sm);
}
.receive-visual-line {
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.9vw, 1.45rem);
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: var(--ivory);
}
.receive-visual-rule {
width: 3.25rem;
height: 1px;
background: var(--warm-gold);
opacity: 0.55;
margin: var(--space-md) 0 var(--space-sm);
}
.receive-visual-meta {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 300;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slate);
}
/* ── the letter ───────────────────────────────────────────────── */
.receive-inner {
width: 100%;
min-width: 0;
max-width: 34rem;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 6rem clamp(1.5rem, 5vw, 4rem) var(--space-xl);
align-self: center;
}
.receive-inner .receive-form,
.receive-inner .form-confirmation {
text-align: left;
}
.receive-heading {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.35;
margin-bottom: var(--space-sm);
}
.receive-sub {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--slate);
margin-bottom: var(--space-xl);
}
/* Inquiry form — max four fields per handbook */
.receive-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
border-bottom: 1px solid var(--gold-border);
padding-bottom: 0.75rem;
transition: border-color var(--duration);
}
.form-field:focus-within {
border-color: var(--warm-gold);
}
.form-label {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slate);
}
.form-input,
.form-textarea {
background: none;
border: none;
outline: none;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
color: var(--ivory);
line-height: 1.6;
resize: none;
width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(138, 138, 138, 0.4);
font-style: italic;
}
/* Form submit — brand kit v11 .btn-bronze */
.form-submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--paper);
background: var(--warm-gold);
border: 1px solid var(--warm-gold);
border-radius: 0;
cursor: pointer;
margin-top: var(--space-md);
transition: background 0.5s var(--ease-silk),
color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk),
letter-spacing 0.6s var(--ease-silk);
}
.form-submit:hover {
background: transparent;
color: var(--warm-gold);
letter-spacing: 0.42em;
}
/* Form confirmation message (shown via JS after submit) */
.form-confirmation {
display: none;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 300;
color: var(--ivory);
line-height: 1.7;
opacity: 0.85;
}
.form-confirmation.is-visible {
display: block;
animation: fadeUp 0.8s var(--ease) forwards;
}
/* ─── INTELLIGENCE PAGE — editorial dispatch ─────────────────────── */
.intelligence-grid {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.dispatch-article {
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--gold-border);
}
.dispatch-article:last-child {
border-bottom: none;
}
.dispatch-meta {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-xs);
}
.dispatch-title {
font-family: var(--font-serif);
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-weight: 400;
color: var(--ivory);
line-height: 1.3;
margin-bottom: var(--space-sm);
}
.dispatch-excerpt {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
line-height: 1.8;
color: var(--ivory);
opacity: 0.85;
margin-bottom: var(--space-sm);
}
/* Intelligence subscribe — single field, no pop-up, no lead magnet */
.intelligence-subscribe {
padding: var(--space-xl) var(--margin-h);
border-top: 1px solid var(--gold-border);
}
.subscribe-label {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 300;
color: var(--ivory);
margin-bottom: var(--space-sm);
max-width: 440px;
}
.subscribe-form {
display: flex;
gap: var(--space-sm);
max-width: 380px;
border-bottom: 1px solid var(--gold-border);
padding-bottom: 0.5rem;
}
.subscribe-input {
flex: 1;
background: none;
border: none;
outline: none;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
}
.subscribe-input::placeholder {
color: var(--slate);
}
.subscribe-btn {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm-gold);
transition: color var(--duration);
}
.subscribe-btn:hover {
color: var(--ivory);
}
/* ─── VERTICALS PAGE ─────────────────────────────────────────────── */
.verticals-list {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}
.vertical-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--space-md);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--gold-border);
align-items: start;
transition: background-color 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.vertical-item:hover {
background-color: var(--gold-faint);
padding-left: 1.25rem;
}
.vertical-number {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 300;
color: var(--slate);
letter-spacing: 0.1em;
padding-top: 0.25rem;
}
.vertical-name {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.4rem;
}
.vertical-note {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 300;
color: var(--slate);
line-height: 1.6;
}
/* ─── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(36px); filter: blur(8px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroGlow {
from { opacity: 0.5; transform: scale(1); }
to { opacity: 1; transform: scale(1.12); }
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.2; transform: translateY(0); }
50% { opacity: 0.85; transform: translateY(10px); }
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes veilLift {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes lineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes goldShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Scroll-reveal — v11 · ease-silk · scale + lift ─────────────── */
.reveal {
opacity: 0;
transform: translateY(40px) scale(.985);
transition: opacity 1.1s var(--ease-silk), transform 1.1s var(--ease-silk);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Staggered reveal — children animate in sequence ─────────────── */
.reveal-stagger > * {
opacity: 0;
transform: translateY(28px) scale(.988);
transition: opacity 0.95s var(--ease-silk), transform 0.95s var(--ease-silk);
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.30s; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.50s; }
.reveal-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.60s; }
.reveal-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.70s; }
.reveal-stagger.is-visible > *:nth-child(n+9) { opacity: 1; transform: none; transition-delay: 0.80s; }
/* ─── BRAND KIT COMPONENTS (v4 alignment) ───────────────────────── */
/* Mask/curtain reveal — sweeps a veil off content on scroll-in */
.mask-reveal {
position: relative;
overflow: hidden;
}
.mask-reveal::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg);
transform-origin: right;
transition: transform 1.2s var(--ease-io);
}
.mask-reveal.in::after {
transform: scaleX(0);
}
/* Brand card — left gold rule animates in on hover */
.brand-card {
background: var(--bg);
border: 1px solid var(--rule);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.brand-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(28, 28, 28, 0.08);
}
.card-rule {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.6s var(--ease);
}
.brand-card:hover .card-rule {
transform: scaleY(1);
}
.card-eyebrow {
font-size: 8.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 14px;
}
.card-title {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 300;
color: var(--text);
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: 0.005em;
}
.card-body {
font-family: var(--font-serif);
font-size: 14px;
color: var(--text-2);
line-height: 1.7;
margin-bottom: 22px;
font-style: italic;
}
.card-cta {
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent);
}
/* Button system — three variants */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
cursor: pointer;
border: none;
background: none;
position: relative;
overflow: hidden;
text-decoration: none;
}
/* Primary: border + fill-from-bottom */
.btn-primary {
padding: 16px 34px;
border: 1px solid var(--text);
color: var(--text);
transition: color 0.4s var(--ease);
}
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
background: var(--text);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.55s var(--ease);
z-index: -1;
}
.btn-primary:hover {
color: var(--bg);
}
.btn-primary:hover::after {
transform: scaleY(1);
}
/* Gold: solid fill, letter-spacing expands on hover */
.btn-gold {
padding: 16px 34px;
background: var(--accent);
color: var(--ivory);
transition: background 0.4s var(--ease), letter-spacing 0.5s var(--ease);
}
.btn-gold:hover {
background: var(--accent-2);
letter-spacing: 0.34em;
}
/* Quiet: gold text + bottom rule only */
.btn-quiet {
padding: 0 0 4px 0;
color: var(--accent);
border-bottom: 1px solid var(--rule-2);
transition: border-color 0.3s, letter-spacing 0.5s var(--ease);
}
.btn-quiet:hover {
border-color: var(--accent);
letter-spacing: 0.36em;
}
/* Link underline — scaleX from-left for horizontal nav contexts */
.link-underline {
position: relative;
color: var(--text-3);
text-decoration: none;
transition: color 0.3s;
}
.link-underline::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.link-underline:hover {
color: var(--accent);
}
.link-underline:hover::after {
transform: scaleX(1);
}
/* Hero wordmark — letter-by-letter entrance */
.hero-wordmark .ltr {
display: inline-block;
opacity: 0;
transform: translateY(20px);
filter: blur(4px);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.hero-wordmark .ltr.in {
opacity: 1;
transform: none;
filter: blur(0);
}
.hero-wordmark .ltr--sp {
width: 0.45em;
}
/* Footer — always deep obsidian regardless of theme */
.site-footer {
background-color: #141210 !important;
color: #a39477;
border-top: 1px solid rgba(184, 150, 90, 0.14);
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,150,90,0.5), transparent);
}
.site-footer .footer-wordmark {
color: #EFE3CC;
}
.site-footer .footer-tagline {
color: var(--gold-soft);
}
.site-footer .footer-col-label {
color: var(--gold-soft);
}
.site-footer .footer-address,
.site-footer .footer-offices {
color: rgba(212, 185, 137, 0.72);
}
.site-footer .footer-nav a {
color: rgba(212, 185, 137, 0.72);
}
.site-footer .footer-nav a:hover {
color: #EFE3CC;
}
.site-footer .footer-legal {
color: rgba(212, 185, 137, 0.62);
}
.site-footer .footer-legal a {
color: rgba(212, 185, 137, 0.62);
}
.site-footer .footer-legal a:hover {
color: rgba(212, 185, 137, 0.7);
}
.site-footer .footer-bottom {
border-top-color: rgba(212, 185, 137, 0.12);
}
/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
/* Tablet */
@media (max-width: 1024px) {
:root {
--margin-h: clamp(1.5rem, 5vw, 4rem);
}
.beat-inner--split {
grid-template-columns: 1fr 280px;
gap: var(--space-lg);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.footer-col--brand {
grid-column: 1 / -1;
border-bottom: 1px solid var(--gold-border);
padding-bottom: var(--space-md);
}
.footer-col--connect {
grid-column: 1 / -1;
}
}
/* Mobile — max 768px */
@media (max-width: 768px) {
:root {
--margin-h: 1.5rem;
--space-xl: 4.5rem;
--space-2xl: 6rem;
}
/* Stack split layout */
.beat-inner--split {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
/* Tiers: single column on mobile */
.tiers-grid {
grid-template-columns: 1fr;
}
.tier {
border-right: none;
border-bottom: 1px solid var(--gold-border);
}
.tier:last-child {
border-bottom: none;
}
/* Custodians: single column */
.custodians-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
/* Footer: stacked */
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.footer-bottom {
flex-direction: column;
gap: var(--space-xs);
}
/* Vertical items: overlap on small screens */
.vertical-item {
grid-template-columns: 36px 1fr;
gap: var(--space-sm);
}
/* Offer block: reduce font on small screens */
.offer-line {
font-size: 1rem;
padding: 0.75rem 0;
}
.hero-sentence {
font-size: 1.15rem;
}
}
/* Small mobile */
@media (max-width: 480px) {
.hero {
justify-content: center;
padding-bottom: 0;
}
.hero-inner {
padding-top: 0;
}
.gateway-form {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
border-bottom: none;
}
.gateway-input {
border-bottom: 1px solid var(--gold-mid);
padding-bottom: 0.4rem;
width: 100%;
}
.gateway-btn {
padding-left: 0;
}
}
/* ─── UTILITY ─────────────────────────────────────────────────────── */
/* Screen-reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Ivory-background interior pages */
.page--ivory {
background-color: var(--ivory);
color: var(--obsidian);
}
.page--ivory .site-nav {
background-color: rgba(250, 247, 242, 0.97);
}
.page--ivory .nav-devanagari {
color: var(--warm-gold);
}
.page--ivory .nav-roman,
.page--ivory .nav-links a,
.page--ivory .nav-toggle .nav-toggle-menu {
color: var(--obsidian);
}
.page--ivory .nav-links a:hover {
color: var(--warm-gold);
}
.page--ivory .site-nav.is-scrolled {
border-bottom-color: var(--gold-border);
}
/* ─── GOLD RULE LINE-DRAW ────────────────────────────────────────── */
.gold-rule--anim {
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.5s var(--ease);
}
.gold-rule--anim.is-drawn {
transform: scaleX(1);
}
/* ─── VISUAL RHYTHM — image-break · pull-quote · split-beat ──────── */
.image-break {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: var(--space-xl);
margin-bottom: var(--space-xl);
aspect-ratio: 21 / 9;
overflow: hidden;
background: var(--obsidian);
}
.image-break img,
.image-break video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) brightness(0.92);
transition: transform 1.6s var(--ease-silk);
}
.image-break.in-view img,
.image-break.in-view video {
transform: scale(1.04);
}
.image-break::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(28,27,25,0.10) 0%, rgba(28,27,25,0.35) 100%);
pointer-events: none;
}
.image-break-caption {
position: absolute;
left: var(--margin-h);
bottom: var(--space-md);
font-family: var(--font-sans);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ivory);
opacity: 0.78;
z-index: 2;
}
.pull-quote {
max-width: 920px;
margin: var(--space-xl) auto;
padding: var(--space-md) 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
line-height: 1.35;
color: var(--warm-gold);
position: relative;
}
.pull-quote::before,
.pull-quote::after {
content: '';
display: block;
width: 56px;
height: 1px;
background: var(--warm-gold);
opacity: 0.5;
margin: var(--space-md) auto;
}
.split-beat {
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
max-width: var(--max-width);
margin: var(--space-xl) auto;
padding: 0 var(--margin-h);
}
.split-beat--reverse { grid-template-columns: 7fr 5fr; }
.split-beat--reverse > .split-beat-media { order: 2; }
.split-beat-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--obsidian);
}
.split-beat-media img,
.split-beat-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.88);
}
.split-beat-text p {
font-family: var(--font-serif);
font-size: clamp(1rem, 1.4vw, 1.18rem);
font-weight: 300;
line-height: 1.7;
color: var(--ivory);
margin-bottom: var(--space-sm);
}
.split-beat-text .section-label {
margin-bottom: var(--space-sm);
}
@media (max-width: 768px) {
.split-beat,
.split-beat--reverse {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.split-beat--reverse > .split-beat-media { order: 0; }
.image-break { aspect-ratio: 4 / 5; }
}
/* ─── PAGE VEIL — incoming (page load) and outgoing (navigation) ──── */
.page-veil {
position: fixed;
inset: 0;
background: var(--obsidian);
z-index: 9997;
pointer-events: none;
animation: veilLift 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
/* Outgoing veil — scales up from bottom over 1.4s before navigation.
Brand kit v11 motion: "Veil Lift" 1.4s cubic-bezier(.7,0,.3,1). */
.page-veil-out {
position: fixed;
inset: 0;
background: var(--obsidian);
z-index: 9998;
pointer-events: all;
transform-origin: bottom;
transform: scaleY(0);
animation: veilFall 1.0s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes veilFall {
0% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
/* Body lock during outgoing transition so the user can't double-click */
body.is-leaving { overflow: hidden; cursor: progress; }
/* ─── MOBILE: NAV-CONTROLS ───────────────────────────────────────── */
@media (max-width: 768px) {
.nav-controls {
gap: var(--space-xs);
}
}
/* ─── CUSTODIAN CARD HOVER ───────────────────────────────────────── */
.custodian {
transition: opacity 0.4s var(--ease);
}
.custodians-grid:hover .custodian {
opacity: 0.5;
}
.custodians-grid:hover .custodian:hover {
opacity: 1;
}
/* ─── OFFER LINE REVEAL ──────────────────────────────────────────── */
.offer-block.reveal-stagger > .offer-line {
transform: translateX(-14px);
filter: blur(3px);
}
.offer-block.reveal-stagger.is-visible > .offer-line {
transform: none;
filter: blur(0);
}
/* ─── DISPATCH ARTICLE REVEAL ────────────────────────────────────── */
.dispatch-article {
transition: opacity 0.5s var(--ease);
}
.intelligence-grid:hover .dispatch-article {
opacity: 0.45;
}
.intelligence-grid:hover .dispatch-article:hover {
opacity: 1;
}
/* ─── SCROLL PROGRESS BAR ────────────────────────────────────────── */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 1px;
background: linear-gradient(to right, var(--warm-gold), rgba(184, 150, 90, 0.45));
z-index: 9999;
width: 0%;
pointer-events: none;
transition: width 0.08s linear;
}
/* ─── HERO SCROLL HINT ───────────────────────────────────────────── */
.hero-scroll-hint {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both;
}
.scroll-line {
width: 1px;
height: 56px;
background: linear-gradient(to bottom, var(--warm-gold), transparent);
animation: scrollPulse 2.5s ease-in-out infinite;
}
/* ─── MARQUEE STRIP ──────────────────────────────────────────────── */
.marquee-strip {
overflow: hidden;
border-top: 1px solid var(--gold-border);
border-bottom: 1px solid var(--gold-border);
padding: 0.9rem 0;
user-select: none;
}
.marquee-track {
display: flex;
width: max-content;
animation: marqueeScroll 40s linear infinite;
}
.marquee-strip:hover .marquee-track {
animation-play-state: paused;
}
.marquee-content {
display: flex;
align-items: center;
gap: 2.5rem;
padding-right: 2.5rem;
white-space: nowrap;
}
.marquee-word {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--slate);
}
.marquee-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--warm-gold);
opacity: 0.5;
flex-shrink: 0;
}
@media (max-width: 768px) {
.hero-scroll-hint { display: none; }
}
/* ─── INTERIOR PAGE HERO ─────────────────────────────────────────── */
/* Cinematic full-bleed image header used on sojourns, verticals,
custodians, intelligence pages. Same shape as .about-hero. */
.interior-hero {
position: relative;
min-height: 62vh;
min-height: 62svh;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 0 var(--margin-h) var(--space-xl);
}
.interior-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
filter: saturate(0.6) brightness(0.6);
mix-blend-mode: luminosity;
animation: heroSlowZoom 22s ease-out forwards;
}
[data-theme="light"] .interior-hero-img {
filter: saturate(0.5) brightness(0.92) sepia(0.15);
mix-blend-mode: multiply;
}
/* v11: Cinematic video heroes for interior pages */
.interior-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
filter: saturate(0.65) brightness(0.62) contrast(1.04);
z-index: 0;
animation: heroSlowZoom 22s ease-out forwards;
}
[data-theme="light"] .interior-hero-video {
filter: saturate(0.55) brightness(0.92) sepia(0.12);
mix-blend-mode: multiply;
opacity: 0.78;
}
/* Subtle grain layer for interior hero — same noise as homepage */
.interior-hero .hero-grain {
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.interior-hero-video { animation: none !important; }
}
.interior-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(28, 28, 28, 0.55) 0%,
rgba(28, 28, 28, 0.18) 35%,
rgba(28, 28, 28, 0.85) 100%);
z-index: 1;
pointer-events: none;
}
[data-theme="light"] .interior-hero::before {
background: linear-gradient(to bottom,
rgba(242, 237, 228, 0.45) 0%,
transparent 35%,
rgba(242, 237, 228, 0.75) 100%);
}
.interior-hero-inner {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.interior-hero-eyebrow {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: 1.25rem;
opacity: 0;
animation: heroFadeUp 1.1s var(--ease) 0.2s forwards;
}
.interior-hero-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.1;
letter-spacing: 0.01em;
margin-bottom: 1.25rem;
opacity: 0;
animation: heroFadeUp 1.3s var(--ease) 0.45s forwards;
}
.interior-hero-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.05rem, 2vw, 1.4rem);
font-weight: 300;
color: var(--ivory);
opacity: 0.85;
line-height: 1.55;
max-width: 580px;
margin: 0 auto;
opacity: 0;
animation: heroFadeUp 1.4s var(--ease) 0.7s forwards;
}
.interior-hero-rule {
width: 48px;
height: 1px;
background: var(--warm-gold);
margin: 1.5rem auto 0;
opacity: 0;
animation: heroFadeUp 0.9s var(--ease) 0.95s forwards;
}
@keyframes heroSlowZoom {
from { transform: scale(1.0); }
to { transform: scale(1.08); }
}
/* ─── FULL-BLEED IMAGE BREAK ─────────────────────────────────────── */
/* Used between text sections to give the page rhythm. */
.image-break {
position: relative;
width: 100%;
height: clamp(280px, 48vh, 540px);
overflow: hidden;
margin: var(--space-lg) 0;
}
.image-break img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.7) brightness(0.78);
transition: transform 1.6s var(--ease), filter 0.6s;
}
.image-break:hover img {
transform: scale(1.04);
filter: saturate(0.85) brightness(0.85);
}
[data-theme="light"] .image-break img {
filter: saturate(0.55) brightness(0.92) sepia(0.12);
mix-blend-mode: multiply;
}
.image-break::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(28, 28, 28, 0.20) 0%,
transparent 50%,
rgba(28, 28, 28, 0.30) 100%);
pointer-events: none;
}
/* Caption overlaid bottom-left */
.image-break-caption {
position: absolute;
bottom: var(--space-md);
left: var(--margin-h);
z-index: 2;
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ivory);
opacity: 0.7;
max-width: 380px;
}
/* ─── PULL QUOTE ─────────────────────────────────────────────────── */
/* Editorial quote used to break up text density. */
.pull-quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2.4rem);
line-height: 1.35;
color: var(--ivory);
text-align: center;
max-width: 760px;
margin: var(--space-xl) auto;
padding: 0 var(--margin-h);
position: relative;
}
.pull-quote::before,
.pull-quote::after {
content: '';
display: block;
width: 32px;
height: 1px;
background: var(--warm-gold);
margin: 1.5rem auto;
opacity: 0.7;
}
/* ─── VERTICAL ITEM IMAGES ───────────────────────────────────────── */
/* Adds image to each row in verticals.html */
.vertical-item {
grid-template-columns: 48px 1fr 200px !important;
align-items: center !important;
gap: var(--space-md) !important;
}
.vertical-thumb {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.vertical-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.65) brightness(0.78);
transition: transform 1.2s var(--ease), filter 0.5s;
}
.vertical-item:hover .vertical-thumb img {
transform: scale(1.06);
filter: saturate(0.85) brightness(0.88);
}
@media (max-width: 768px) {
.vertical-item {
grid-template-columns: 1fr !important;
gap: var(--space-sm) !important;
}
.vertical-thumb { display: none; }
}
/* ─── DISPATCH IMAGE ─────────────────────────────────────────────── */
.dispatch-image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
margin-bottom: var(--space-md);
}
.dispatch-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.65) brightness(0.78);
transition: transform 1.4s var(--ease);
}
.dispatch-article:hover .dispatch-image img {
transform: scale(1.04);
}
/* ─── TIER IMAGE BAND ────────────────────────────────────────────── */
.tier-image {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
margin-bottom: var(--space-md);
}
.tier-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.6) brightness(0.78);
transition: transform 1.6s var(--ease), filter 0.6s;
}
.tier:hover .tier-image img {
transform: scale(1.05);
filter: saturate(0.85) brightness(0.88);
}
/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
.hero-bg--fallback { opacity: 0.55 !important; }
.reveal, .reveal-stagger > * {
transition: opacity 0.3s !important;
filter: none !important;
transform: none !important;
}
.hero-wordmark .ltr {
filter: none !important;
transform: none !important;
transition: opacity 0.3s !important;
}
.interior-hero-img,
.image-break img,
.vertical-thumb img,
.dispatch-image img,
.tier-image img,
.custodian-portrait img {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* ===============================================================
SITEMAP v1.0 — NEW ARCHITECTURE STYLES
Three doorways: Sojourns · Destinations · The House
May 2026
=============================================================== */
/* --- DESKTOP NAV — inline 3-item bar ------------------------- */
@media (min-width: 900px) {
.nav-links {
position: static;
opacity: 1;
visibility: visible;
pointer-events: all;
width: auto;
height: auto;
background: none;
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
flex-direction: row;
gap: 2.5rem;
z-index: auto;
overflow: visible;
transition: none;
}
.nav-links::before { display: none; }
.nav-links a {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ivory);
opacity: 0.7;
transform: none;
filter: none;
padding: 0;
transition: color 0.3s, opacity 0.3s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
opacity: 1;
color: var(--warm-gold);
}
.nav-links a + a {
border-top: none;
width: auto;
text-align: left;
}
.nav-toggle { display: none; }
.site-nav.is-open .nav-toggle,
.site-nav.is-open .theme-toggle {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
}
@media (max-width: 899px) {
.nav-cta-persistent {
font-size: 0.52rem;
padding: 0.45rem 0.85rem;
}
}
/* --- IMAGE PLACEHOLDER --------------------------------------- */
.image-placeholder {
width: 100%;
background-color: rgba(28, 28, 28, 0.8);
border: 1px solid var(--gold-border);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.image-placeholder::after {
content: attr(data-spec);
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm-gold);
opacity: 0.5;
padding: var(--space-md);
}
.image-placeholder--hero { aspect-ratio: 16 / 9; min-height: 380px; }
.image-placeholder--port { aspect-ratio: 3 / 4; }
.image-placeholder--land { aspect-ratio: 4 / 3; }
.image-placeholder--sq { aspect-ratio: 1 / 1; }
/* When the slot holds a real photograph rather than the placeholder block,
crop it to the slot instead of stretching it. Without this an ![]()
is
squashed to the forced aspect-ratio, so any replacement photo whose
proportions differ from the slot would distort. See ASSETS.md. */
img.image-placeholder {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
}
/* --- SOJOURN GRID & CARDS ------------------------------------ */
.sojourn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 1024px) { .sojourn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sojourn-grid { grid-template-columns: 1fr; } }
/* --- SOJOURN CARDS — brand kit v11 .tile pattern ---------------- */
.sojourn-card {
position: relative;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 18px;
padding: 0;
overflow: hidden;
transition: transform 0.8s var(--ease-silk),
box-shadow 0.8s var(--ease-silk),
border-color 0.5s var(--ease-silk);
display: flex;
flex-direction: column;
}
.sojourn-card:hover {
transform: translateY(-3px);
border-color: var(--warm-gold);
box-shadow: 0 30px 70px rgba(31, 29, 24, 0.10);
}
[data-theme="dark"] .sojourn-card:hover {
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.sojourn-card-image {
width: 100%;
aspect-ratio: 4 / 5;
min-height: 280px;
overflow: hidden;
position: relative;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.sojourn-card-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(10, 9, 8, 0.55) 100%);
pointer-events: none;
transition: opacity 1s var(--ease-silk);
opacity: 0.6;
}
.sojourn-card-image .image-placeholder {
aspect-ratio: 4 / 5;
border: none;
width: 100%;
height: 100%;
transition: transform 8s var(--ease-silk),
filter 1s var(--ease-silk);
}
.sojourn-card-image img {
transition: transform 8s var(--ease-silk),
filter 1s var(--ease-silk);
}
.sojourn-card:hover .sojourn-card-image .image-placeholder,
.sojourn-card:hover .sojourn-card-image img {
transform: scale(1.04);
}
.sojourn-card-body {
padding: 32px;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.sojourn-card-region {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--text-3);
margin: 0;
}
.sojourn-card-name {
font-family: var(--font-serif);
font-size: 24px; /* kit .tile .ttl */
font-weight: 300;
color: var(--text);
line-height: 1.2;
letter-spacing: 0.005em;
margin: 0;
}
.sojourn-card-meta {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px; /* kit .tile .body */
font-weight: 300;
line-height: 1.6;
color: var(--text-2);
margin: 0 0 var(--space-sm);
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.sojourn-card-enter {
/* Composed inline with .btn .btn-quiet — keep this rule for any
legacy markup that still uses just .sojourn-card-enter. */
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid var(--rule-2);
padding: 14px 0;
margin-top: auto;
align-self: flex-start;
text-decoration: none;
transition: color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk),
letter-spacing 0.6s var(--ease-silk);
}
.sojourn-card-enter:hover {
color: var(--warm-gold);
border-color: var(--warm-gold);
letter-spacing: 0.42em;
}
.sojourn-card--forthcoming { opacity: 0.45; cursor: default; pointer-events: none; }
/* --- FILTER RAIL ----------------------------------------------------
Vertical sidebar that reveals taxonomies on hover (desktop) or
tap (mobile). Replaces the old horizontal filter-bar. -------------- */
.sojourn-layout {
display: flex;
gap: var(--space-md);
align-items: flex-start;
margin-bottom: var(--space-xl);
}
.sojourn-layout > .sojourn-grid {
flex: 1;
min-width: 0;
}
@media (max-width: 899px) {
.sojourn-layout {
flex-direction: column;
gap: 0;
}
}
.filter-rail {
position: relative;
display: flex;
align-items: stretch;
width: 56px;
flex-shrink: 0;
border-right: 1px solid var(--rule);
transition: width 0.6s var(--ease-silk);
background: transparent;
}
.filter-rail-trigger {
position: sticky;
top: 8rem;
align-self: flex-start;
height: 200px;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--text-3);
writing-mode: vertical-rl;
transform: rotate(180deg);
transition: color 0.4s var(--ease-silk);
z-index: 2;
}
.filter-rail-trigger:hover { color: var(--warm-gold); }
.filter-rail-panel {
position: absolute;
top: 0;
left: 56px;
width: 280px;
padding: 4rem 2rem 2rem;
background: var(--surface);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-8px);
transition: opacity 0.4s var(--ease-silk),
visibility 0s linear 0.4s,
transform 0.5s var(--ease-silk);
z-index: 1;
}
.filter-rail:hover .filter-rail-panel,
.filter-rail:focus-within .filter-rail-panel,
.filter-rail.is-pinned .filter-rail-panel {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(0);
transition: opacity 0.4s var(--ease-silk),
visibility 0s linear 0s,
transform 0.5s var(--ease-silk);
}
.filter-group {
margin-bottom: var(--space-md);
}
.filter-group:last-child { margin-bottom: 0; }
.filter-group-label {
display: block;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
}
.filter-btn {
display: block;
width: 100%;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 300;
letter-spacing: 0.005em;
text-transform: none;
text-align: left;
color: var(--text-2);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
padding: 0.55rem 0;
cursor: pointer;
text-decoration: none;
transition: color 0.4s var(--ease-silk),
border-color 0.4s var(--ease-silk),
padding-left 0.4s var(--ease-silk);
}
.filter-btn:hover {
color: var(--warm-gold);
padding-left: 0.4rem;
}
.filter-btn.is-active {
color: var(--warm-gold);
border-bottom-color: var(--warm-gold);
}
@media (max-width: 899px) {
/* Mobile: rail collapses to a single trigger above the grid */
.filter-rail {
width: 100%;
flex-direction: column;
border-right: none;
border-bottom: 1px solid var(--rule);
margin-bottom: var(--space-md);
}
.filter-rail-trigger {
position: static;
height: auto;
width: 100%;
writing-mode: horizontal-tb;
transform: none;
text-align: left;
justify-content: flex-start;
padding: 0.75rem 0;
}
.filter-rail-trigger::after {
content: '↓';
margin-left: 0.5em;
transition: transform 0.4s var(--ease-silk);
}
.filter-rail.is-pinned .filter-rail-trigger::after { transform: rotate(180deg); }
.filter-rail-panel {
position: static;
width: 100%;
padding: var(--space-md) 0 var(--space-lg);
border-right: none;
border-bottom: none;
transform: none;
}
.filter-rail:hover .filter-rail-panel,
.filter-rail:focus-within .filter-rail-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.filter-rail.is-pinned .filter-rail-panel {
opacity: 1; visibility: visible; pointer-events: all;
}
}
/* --- FORTHCOMING ROW ----------------------------------------- */
.forthcoming-row {
max-width: var(--max-width);
margin: var(--space-xl) auto 0;
padding-top: var(--space-lg);
border-top: 1px solid var(--gold-border);
}
.forthcoming-row-label {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-md);
}
.forthcoming-list { display: flex; flex-direction: column; gap: 0.75rem; }
.forthcoming-item {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-md);
padding: 0.75rem 0;
border-bottom: 1px solid rgba(184, 150, 90, 0.08);
opacity: 0.5;
transition: opacity 0.3s;
}
.forthcoming-item:hover { opacity: 0.75; }
.forthcoming-item span {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--slate);
}
.forthcoming-item .forthcoming-name {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
}
/* --- TRADITION GRID ------------------------------------------ */
.tradition-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 1024px) { .tradition-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tradition-grid { grid-template-columns: 1fr; } }
.tradition-card {
border: 1px solid var(--gold-border);
padding: var(--space-md);
transition: border-color 0.4s, transform 0.4s var(--ease);
}
.tradition-card:hover { border-color: var(--warm-gold); transform: translateY(-3px); }
.tradition-card-name {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.5rem;
}
.tradition-card-note {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 300;
color: var(--slate);
line-height: 1.65;
margin-bottom: var(--space-sm);
}
.tradition-card-sojourns {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--warm-gold);
}
/* --- SEASON SECTIONS ----------------------------------------- */
.season-section {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--gold-border);
}
.season-section:last-child { border-bottom: none; }
.season-heading {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 300;
color: var(--ivory);
margin-bottom: 0.5rem;
}
.season-note {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--slate);
line-height: 1.6;
margin-bottom: var(--space-md);
max-width: 520px;
}
.season-sojourn-link {
display: block;
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: 0.5rem;
transition: letter-spacing 0.4s var(--ease);
}
.season-sojourn-link:hover { letter-spacing: 0.22em; }
/* --- REGISTER CARDS ------------------------------------------ */
.register-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 900px) { .register-grid { grid-template-columns: 1fr; } }
.register-card {
border: 1px solid var(--gold-border);
padding: var(--space-lg) var(--space-md);
transition: border-color 0.4s;
}
.register-card:hover { border-color: var(--warm-gold); }
.register-card-deva {
font-family: var(--font-deva);
font-size: 2rem;
font-weight: 400;
color: var(--warm-gold);
line-height: 1.2;
margin-bottom: 0.25rem;
}
.register-card-name {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-md);
}
.register-card-desc {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
color: var(--ivory);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.register-card-sojourns {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: var(--space-sm);
border-top: 1px solid var(--gold-border);
}
.register-card-sojourns a {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--warm-gold);
transition: letter-spacing 0.4s;
}
.register-card-sojourns a:hover { letter-spacing: 0.2em; }
/* --- INDIVIDUAL SOJOURN PAGE --------------------------------- */
.sojourn-section-label {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: 1.25rem;
display: block;
}
.sojourn-section-heading {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.25;
margin-bottom: var(--space-sm);
}
.sojourn-field-note {
border-left: 1px solid var(--warm-gold);
padding-left: var(--space-md);
margin: var(--space-lg) 0;
}
.sojourn-field-note p {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
font-weight: 300;
color: var(--ivory);
line-height: 1.75;
opacity: 0.8;
}
.sojourn-cta-block {
text-align: center;
padding: var(--space-xl) 0;
border-top: 1px solid var(--gold-border);
margin-top: var(--space-xl);
}
.sojourn-cta-note {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
font-weight: 300;
color: var(--ivory);
opacity: 0.65;
margin-bottom: var(--space-md);
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.sojourn-cta-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm-gold);
border: 1px solid rgba(184, 150, 90, 0.45);
padding: 1rem 2.5rem;
transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.sojourn-cta-link:hover {
background-color: var(--warm-gold);
color: var(--obsidian);
border-color: var(--warm-gold);
}
/* --- DESTINATIONS — REGION GRID ------------------------------ */
.region-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 1100px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .region-grid { grid-template-columns: 1fr; } }
.region-card {
border: 1px solid var(--gold-border);
padding: var(--space-md);
transition: border-color 0.4s, transform 0.4s var(--ease);
}
.region-card:hover { border-color: var(--warm-gold); transform: translateY(-3px); }
.region-card--dormant { opacity: 0.55; }
.region-card--dormant:hover {
opacity: 0.85;
border-color: rgba(184, 150, 90, 0.45);
transform: translateY(-2px);
}
.region-card-name {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.region-card-desc {
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 300;
color: var(--slate);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.region-card-status {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--warm-gold);
}
.region-card--dormant .region-card-status { color: var(--slate); }
.world-map-placeholder {
width: 100%;
background: var(--recess);
border: 1px solid var(--gold-border);
aspect-ratio: 2 / 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-xl);
overflow: hidden;
}
.world-globe {
height: 80%;
width: auto;
stroke: var(--gold-mid);
stroke-width: 1;
}
.world-globe-nodes circle {
fill: var(--warm-gold);
stroke: none;
}
/* --- PLACE PAGES -------------------------------------------- */
.place-meta-bar {
display: flex;
gap: var(--space-lg);
padding: var(--space-md) 0;
border-top: 1px solid var(--gold-border);
border-bottom: 1px solid var(--gold-border);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}
.place-meta-label {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 0.25rem;
}
.place-meta-value {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
}
.region-sojourn-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: var(--space-xl) auto 0;
}
@media (max-width: 900px) { .region-sojourn-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .region-sojourn-cards { grid-template-columns: 1fr; } }
.region-place-links {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--gold-border);
}
.region-place-link {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 300;
color: var(--ivory);
transition: color 0.3s;
}
.region-place-link:hover { color: var(--warm-gold); }
.dormant-notice { text-align: center; padding: var(--space-2xl) 0; }
.dormant-notice p {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.15rem;
font-weight: 300;
color: var(--slate);
line-height: 1.65;
}
/* --- SECTION NAV (extends to all sub-pages: house, sojourns, destinations) -- */
.house-nav-links,
.section-nav-links {
display: flex;
flex-direction: column;
gap: 0.1rem;
max-width: var(--content-width);
margin: 0 auto;
}
.house-nav-link,
.section-nav-link {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--gold-border);
transition: padding-left 0.4s var(--ease), border-color 0.3s;
gap: var(--space-md);
}
.house-nav-link:hover,
.section-nav-link:hover { padding-left: 0.5rem; border-color: var(--warm-gold); }
.house-nav-link-name,
.section-nav-link-name {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: 300;
color: var(--ivory);
transition: color 0.3s;
}
.house-nav-link:hover .house-nav-link-name,
.section-nav-link:hover .section-nav-link-name { color: var(--warm-gold); }
.house-nav-link-desc,
.section-nav-link-desc {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 300;
color: var(--slate);
letter-spacing: 0.06em;
flex-shrink: 0;
max-width: 220px;
text-align: right;
}
/* Section-nav wrapper — sits at foot of every sub-page, holds Previous + 3 sibling links */
.section-nav {
max-width: var(--content-width);
margin: var(--space-xl) auto var(--space-lg);
padding: 0 var(--margin-h);
}
.section-nav-prev {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--slate);
padding-bottom: 0.6rem;
margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--gold-border);
transition: color 0.4s var(--ease-silk),
letter-spacing 0.5s var(--ease-silk),
border-color 0.4s var(--ease-silk);
}
.section-nav-prev:hover {
color: var(--warm-gold);
letter-spacing: 0.42em;
border-color: var(--warm-gold);
}
.section-nav-prev-arrow {
margin-right: 0.6em;
color: var(--warm-gold);
}
.section-nav-eyebrow {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
}
.process-steps {
display: flex;
flex-direction: column;
gap: var(--space-xl);
max-width: var(--content-width);
margin: 0 auto;
}
.process-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-md); align-items: start; }
.process-step-number {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 300;
letter-spacing: 0.12em;
color: var(--warm-gold);
padding-top: 0.35rem;
}
.process-step-name {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.75rem;
}
.process-step-body {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
color: var(--ivory);
opacity: 0.75;
line-height: 1.75;
}
.refusal-list { display: flex; flex-direction: column; gap: 0; max-width: var(--content-width); margin: 0 auto; }
.refusal-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--gold-border); }
.refusal-item:first-child { border-top: 1px solid var(--gold-border); }
.refusal-headline {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 400;
color: var(--ivory);
margin-bottom: 0.6rem;
line-height: 1.3;
}
.refusal-why {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 300;
color: var(--slate);
line-height: 1.7;
font-style: italic;
}
.anvaya-status {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--slate);
margin-top: var(--space-md);
}
.anvaya-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--warm-gold);
animation: dot-pulse 2.8s ease-in-out infinite;
}
/* --- FIELD NOTES (ambient) ----------------------------------- */
.field-note-index {
display: flex;
flex-direction: column;
gap: 0;
max-width: var(--content-width);
margin: 0 auto;
}
.field-note-entry {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--gold-border);
transition: opacity 0.4s;
}
.field-note-index:hover .field-note-entry { opacity: 0.45; }
.field-note-index:hover .field-note-entry:hover { opacity: 1; }
.field-note-place {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: 0.5rem;
}
.field-note-title {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: 300;
color: var(--ivory);
line-height: 1.25;
margin-bottom: 0.75rem;
}
.field-note-excerpt {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
opacity: 0.85;
line-height: 1.75;
margin-bottom: var(--space-sm);
}
.field-note-type {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate);
}
.field-note-subscribe {
padding: var(--space-xl) 0;
border-top: 1px solid var(--gold-border);
max-width: var(--content-width);
margin: var(--space-xl) auto 0;
}
/* --- THE LEDGER (ambient) ------------------------------------ */
.ledger-year {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 300;
color: var(--warm-gold);
margin-bottom: var(--space-md);
}
.ledger-section { margin-bottom: var(--space-xl); }
.ledger-section-label {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-md);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--gold-border);
}
.ledger-item {
padding: 0.65rem 0;
border-bottom: 1px solid rgba(184, 150, 90, 0.08);
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 300;
color: var(--ivory);
opacity: 0.9;
}
.ledger-archive-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate);
margin-top: var(--space-xs);
transition: color 0.3s;
}
.ledger-archive-link:hover { color: var(--warm-gold); }
/* --- ANTARANGA — AUDIO FRAGMENTS ----------------------------- */
.audio-fragment-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
max-width: var(--content-width);
margin: 0 auto;
}
.audio-fragment {
border: 1px solid var(--gold-border);
padding: var(--space-md);
transition: border-color 0.4s;
}
.audio-fragment:hover { border-color: var(--warm-gold); }
.audio-fragment-meta {
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
}
.audio-fragment audio { width: 100%; accent-color: var(--warm-gold); }
.audio-fragment-note {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 300;
color: var(--slate);
margin-top: var(--space-xs);
letter-spacing: 0.06em;
}
/* --- PRESS PAGE --------------------------------------------- */
.press-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
.press-mark {
border: 1px solid var(--gold-border);
padding: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-xs);
transition: border-color 0.4s, transform 0.4s var(--ease);
min-height: 110px;
}
.press-mark:hover { border-color: var(--warm-gold); transform: translateY(-3px); }
.press-mark-name {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 400;
color: var(--ivory);
}
.press-mark-date {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 300;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate);
}
/* --- UTILITY / LEGAL PAGES ---------------------------------- */
.legal-content { max-width: var(--content-width); margin: 0 auto; }
.legal-content h2 {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 400;
color: var(--ivory);
margin: var(--space-lg) 0 var(--space-sm);
}
.legal-content p {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 300;
color: var(--text-2);
line-height: 1.8;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}
.sitemap-section { margin-bottom: var(--space-xl); }
.sitemap-section-heading {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--warm-gold);
margin-bottom: var(--space-sm);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--gold-border);
}
.sitemap-links { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.5rem; }
.sitemap-links a {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 300;
color: var(--slate);
letter-spacing: 0.06em;
transition: color 0.3s;
}
.sitemap-links a:hover { color: var(--warm-gold); }
.sitemap-sub { margin-left: var(--space-md); opacity: 0.75; }
.contact-form-wrap { max-width: 520px; margin: 0 auto; }
.form-note {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
font-weight: 300;
color: var(--slate);
line-height: 1.65;
margin-bottom: var(--space-lg);
}
.patronage-list {
display: flex;
flex-direction: column;
gap: 0;
max-width: var(--content-width);
margin: var(--space-xl) auto 0;
}
.patronage-item {
padding: var(--space-md) 0;
border-bottom: 1px solid var(--gold-border);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: baseline;
}
.patronage-item:first-child { border-top: 1px solid var(--gold-border); }
.patronage-cause { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; color: var(--ivory); }
.patronage-amount { font-family: var(--font-sans); font-size: 0.55rem; font-weight: 300; letter-spacing: 0.12em; color: var(--slate); }
/* --- BREADCRUMB -------------------------------------------- */
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: 0.52rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--slate); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--warm-gold); }
.breadcrumb-sep { opacity: 0.4; font-size: 0.6rem; }
.breadcrumb-current { color: var(--warm-gold); }
/* --- RECEIVE / AN INTRODUCTION PAGE update ------------------- */
.receive-page .site-nav .nav-cta-persistent { display: none; }
/* ═══════════════════════════════════════════════════════════════════
MAYA SOJOURNS — Brand Kit v11 Motion & Component System
Applied: May 2026
═══════════════════════════════════════════════════════════════════ */
/* ─── MOTION PRIMITIVE 1: BREATHE ───────────────────────────────── */
/* Letter-spacing expands on hover — applied to nav wordmark */
.nav-roman {
transition: letter-spacing 1.2s var(--ease-silk), color 0.4s;
}
.nav-wordmark:hover .nav-roman {
letter-spacing: 0.42em;
}
/* ─── MOTION PRIMITIVE 2: SHIMMER ───────────────────────────────── */
/* Light streak sweeps across CTAs and primary buttons on hover */
.nav-cta-persistent,
.btn,
.btn-gold,
.btn-primary,
.btn-bronze,
.sojourn-card-enter,
.form-submit {
position: relative;
overflow: hidden;
}
.nav-cta-persistent::before,
.btn::before,
.btn-gold::before,
.btn-primary::before,
.btn-bronze::before,
.sojourn-card-enter::before,
.form-submit::before {
content: '';
position: absolute;
top: 0;
left: -70%;
width: 60%;
height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
transition: left 1.3s var(--ease-io);
pointer-events: none;
z-index: 1;
}
.nav-cta-persistent:hover::before,
.btn:hover::before,
.btn-gold:hover::before,
.btn-primary:hover::before,
.btn-bronze:hover::before,
.sojourn-card-enter:hover::before,
.form-submit:hover::before {
left: 130%;
}
/* ─── MOTION PRIMITIVE 3: VEIL REVEAL ───────────────────────────── */
/* A curtain lifts off image placeholders as they scroll into view */
.image-placeholder {
position: relative;
overflow: hidden;
}
.image-placeholder::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg);
transform-origin: top;
transition: transform 1.4s var(--ease-io);
pointer-events: none;
z-index: 2;
}
.reveal.is-visible .image-placeholder::after,
.reveal-stagger.is-visible .image-placeholder::after,
.image-placeholder.veil-lifted::after {
transform: scaleY(0);
}
/* ─── MOTION PRIMITIVE 4: HORIZON DRAW ──────────────────────────── */
/* Thin bronze rule draws across the section edge on load */
@keyframes horizonDraw {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* ─── BRONZE EMBER PULSE ─────────────────────────────────────────── */
@keyframes emberPulse {
0%, 100% {
transform: scale(1);
opacity: .55;
box-shadow: 0 0 0 0 rgba(184, 147, 112, 0.45);
}
50% {
transform: scale(1.5);
opacity: .95;
box-shadow: 0 0 0 8px rgba(184, 147, 112, 0);
}
}
/* ─── HOVER LIFT — all card types ────────────────────────────────── */
.sojourn-card,
.region-card,
.register-card,
.dl-card {
transition: transform 0.8s var(--ease-silk),
box-shadow 0.8s var(--ease-silk),
border-color 0.5s;
}
.sojourn-card:hover,
.region-card:hover,
.register-card:hover,
.dl-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 64px rgba(0, 0, 0, .4);
}
/* ─── HERO VIDEO STACK — index.html ─────────────────────────────── */
.hero-video-stack {
position: absolute;
inset: 0;
z-index: 0;
background: #0a0908;
overflow: hidden;
}
.hv-vid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 2.4s cubic-bezier(.4, 0, .2, 1);
transform: scale(1.04);
will-change: opacity, transform;
animation: heroPan 28s linear infinite alternate;
}
.hv-vid.active {
opacity: 1;
}
@keyframes heroPan {
0% { transform: scale(1.04) translate(0, 0); }
100% { transform: scale(1.10) translate(-1.5%, -.5%); }
}
/* Hero scrim — gradient overlay for text legibility */
.hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 100% 70% at 50% 60%, transparent 30%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 25%, transparent 50%, rgba(0,0,0,.60) 100%);
}
/* Hero grain layer — flicker for cinematic texture */
.hero-grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
mix-blend-mode: overlay;
opacity: .32;
background-image: url("data:image/svg+xml;utf8,");
animation: grainJitter .9s steps(4) infinite;
}
@keyframes grainJitter {
0% { transform: translate(0, 0); }
25% { transform: translate(-1%, 1%); }
50% { transform: translate(1%, -1%); }
75% { transform: translate(-1%, -1%); }
100% { transform: translate(1%, 1%); }
}
/* ─── HERO V11 — top tag, foot strip, dot rail, captions ───────── */
/* These complement the existing .hero / .hero-video-stack / .hero-scrim
block above. New v11 hero markup uses .hero-tag, .hero-foot, .hv-rail. */
.hero-tag {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: var(--tracking-cap);
text-transform: uppercase;
color: rgba(244, 239, 227, 0.7);
padding: 0 var(--margin-h);
margin-top: 120px;
opacity: 0;
animation: fadeUp 1.4s var(--ease-silk) 0.8s both;
}
.hero-tag::before {
content: '';
width: 36px;
height: 1px;
background: rgba(244, 239, 227, 0.5);
}
.hero-deva-sub {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(15px, 1.3vw, 20px);
color: rgba(244, 239, 227, 0.78);
opacity: 0;
animation: fadeUp 1.6s var(--ease-silk) 2.2s both;
}
.hero-deva-sub .hd-mark {
font-family: var(--font-deva);
font-style: normal;
color: var(--bronze-d-2);
font-size: 1.05em;
}
.hero-deva-sub .hd-em {
color: rgba(244, 239, 227, 0.5);
}
.hero-tagline {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(18px, 1.7vw, 24px);
color: rgba(244, 239, 227, 0.82);
max-width: 500px;
line-height: 1.5;
letter-spacing: 0.01em;
opacity: 0;
animation: fadeUp 1.6s var(--ease-silk) 2.9s both;
}
.hero-rule--v11 {
width: 1px;
height: 64px;
background: linear-gradient(to bottom, rgba(244, 239, 227, 0.6), transparent);
margin-top: 8px;
opacity: 0;
animation: fadeUp 1.4s var(--ease-silk) 2.6s both;
}
.hero-foot {
position: relative;
z-index: 5;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
padding: 0 var(--margin-h) 64px;
margin-top: auto;
opacity: 0;
animation: fadeUp 1.4s var(--ease-silk) 3.2s both;
}
.hero-foot-l {
display: flex;
flex-direction: column;
gap: 8px;
}
.hero-foot-l .label {
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: var(--tracking-nav);
text-transform: uppercase;
color: rgba(244, 239, 227, 0.55);
}
.hero-foot-l .val {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: rgba(244, 239, 227, 0.85);
}
.hero-foot-r {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: var(--tracking-cap);
text-transform: uppercase;
color: rgba(244, 239, 227, 0.6);
}
.hero-foot-r .arrow {
font-size: 13px;
letter-spacing: 0;
animation: handDown 2.4s var(--ease-silk) infinite;
}
.hv-rail {
display: flex;
gap: 8px;
align-items: center;
}
.hvr-tick {
display: block;
width: 28px;
height: 1px;
background: rgba(244, 239, 227, 0.3);
transition: background 0.6s var(--ease-silk), width 0.6s var(--ease-silk);
}
.hvr-tick.active {
background: var(--bronze-d-2);
width: 48px;
}
@keyframes handDown {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(8px); opacity: 1; }
}
/* When a hero uses the v11 layout, switch to vertical foot stack */
.hero--v11 {
justify-content: space-between;
align-items: stretch;
text-align: left;
padding: 0;
}
.hero--v11 .hero-center {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
padding: 0 var(--margin-h);
margin: auto 0;
}
@media (max-width: 680px) {
.hero-tag { margin-top: 96px; font-size: 8.5px; gap: 10px; }
.hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 32px; }
}
/* Honour reduced-motion across hero animations */
@media (prefers-reduced-motion: reduce) {
.hv-vid { animation: none !important; transition: none !important; }
.hero-grain { animation: none !important; }
.hero-wordmark { animation: none !important; opacity: 1 !important; }
.hero-tag, .hero-deva-sub, .hero-tagline, .hero-rule--v11, .hero-foot {
animation: none !important;
opacity: 1 !important;
}
}
/* ─── UI COMPONENTS — v11 button + field system ─────────────────── */
/* btn-bronze — filled bronze CTA */
.btn-bronze {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .34em;
text-transform: uppercase;
padding: 18px 28px;
cursor: pointer;
font-weight: 400;
display: inline-block;
background: var(--accent);
color: var(--parchment);
border: 1px solid var(--accent);
position: relative;
overflow: hidden;
transition: background 0.5s, color 0.5s, letter-spacing 0.6s var(--ease-silk), border-color 0.5s;
}
.btn-bronze:hover {
background: transparent;
color: var(--accent);
letter-spacing: .42em;
}
/* btn-ghost — outlined quiet */
.btn-ghost {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .34em;
text-transform: uppercase;
padding: 18px 28px;
cursor: pointer;
font-weight: 400;
display: inline-block;
background: transparent;
color: var(--text-3);
border: 1px solid var(--rule-2);
transition: background 0.5s, color 0.5s, letter-spacing 0.6s var(--ease-silk), border-color 0.5s;
}
.btn-ghost:hover {
color: var(--text);
border-color: var(--text);
letter-spacing: .42em;
}
/* Underline-only form field — v11 spec */
.field {
display: flex;
flex-direction: column;
gap: 6px;
border-bottom: 1px solid var(--rule-2);
padding-bottom: 10px;
transition: border-color 0.4s;
}
.field:focus-within {
border-color: var(--accent);
}
.field label {
font-family: var(--font-sans);
font-size: 8.5px;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--text-3);
}
.field input,
.field textarea {
border: none;
background: transparent;
outline: none;
font-family: var(--font-serif);
font-size: 18px;
font-weight: 300;
color: var(--text);
padding: 4px 0;
width: 100%;
resize: none;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--text-3);
font-style: italic;
}
/* ─── SOJOURN CARD — image zoom on hover ────────────────────────── */
.sojourn-card-image {
overflow: hidden;
}
.sojourn-card:hover .sojourn-card-image .image-placeholder {
transform: scale(1.04);
}
/* ─── REGION CARD — bronze rule draws on top edge on hover ──────── */
.region-card {
position: relative;
}
.region-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.8s var(--ease-silk);
z-index: 1;
}
.region-card:hover::before {
transform: scaleX(1);
}
/* ─── BACK LINK (sub-page eyebrow under nav) ─────────────────────── */
/* ─── RECEIVE RETURN (an-introduction.html footer block) ─────────── */
/* The .back-link rule was removed sitewide (item 1). The Introduction
page keeps its own quiet return — see .receive-return-link below. */
.receive-return {
display: flex;
justify-content: center;
margin: var(--space-2xl) 0 var(--space-lg);
padding-top: var(--space-md);
}
.receive-return-link {
display: inline-block;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--slate);
border-bottom: 1px solid var(--rule-2);
padding: 8px 0;
text-decoration: none;
transition: color 0.4s var(--ease-silk),
border-color 0.4s var(--ease-silk),
letter-spacing 0.5s var(--ease-silk);
}
.receive-return-link:hover {
color: var(--warm-gold);
border-color: var(--warm-gold);
letter-spacing: 0.42em;
}