/* ═══════════════════════════════════════════════════════════════════
SELF-HOSTED TYPEFACES
═══════════════════════════════════════════════════════════════════
These files used to be requested from fonts.googleapis.com and
fonts.gstatic.com on every page. That handed each visitor's IP
address, user agent and referring page to Google in the United
States before the site had asked them anything, which is the
transfer a German court found unlawful in LG Muenchen I,
3 O 17493/20.
Serving the same faces from our own origin removes the transfer
entirely, which is better than asking permission for it: there is
now nothing to consent to, and no visitor sees degraded typography
for having said no. It is also faster, because it costs no extra
DNS lookup, TLS handshake or round trip.
Do not reintroduce a Google Fonts link tag. If a weight is missing,
add the woff2 to assets/fonts/ and a face below. The fetch script
that produced these lives in the repo history.
unicode-range keeps this cheap: a reader in English pulls the latin
files only, and never touches the Devanagari.
─────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/inter-300-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/inter-300-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/inter-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/inter-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/inter-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/inter-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Noto Serif Devanagari';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/noto-serif-devanagari-300-devanagari.woff2') format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
font-family: 'Noto Serif Devanagari';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/noto-serif-devanagari-300-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Noto Serif Devanagari';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/noto-serif-devanagari-400-devanagari.woff2') format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
font-family: 'Noto Serif Devanagari';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/noto-serif-devanagari-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════════════════════════════════════════════════════════════
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.
The theme defaults to light; main.js only switches it on an explicit toggle. */
: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: 1.2rem; /* ~19px — kit nav wordmark is 20px serif .18em */
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: 11px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--warm-gold);
background: transparent;
border: 1px solid var(--warm-gold);
border-radius: 999px;
padding: 12px 22px;
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.34em;
}
/* "Enquire · " leads the label only where the bar has room for it */
.nav-cta-persistent .cta-verb { white-space: pre; }
@media (max-width: 1279px) {
.nav-cta-persistent .cta-verb { display: none; }
}
.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.95rem; letter-spacing: 0.16em; }
}
/* 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 */
/* Shown only when a submission could not be delivered. Quiet enough for
the house, clear enough that the visitor knows to write instead. */
.form-error {
display: none;
margin-top: var(--space-sm);
padding-left: 0.9rem;
border-left: 2px solid var(--gold-deep);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 300;
line-height: 1.7;
letter-spacing: 0.06em;
color: var(--gold-soft);
}
.form-submit:disabled {
opacity: 0.55;
cursor: default;
}
.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);
}
/* Company details under the wordmark: the legal entity, CIN,
registered office and direct lines. Sans note role, small. */
.footer-entity {
margin-top: var(--space-sm);
max-width: 40ch;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 300;
font-style: normal;
letter-spacing: 0.04em;
line-height: 1.75;
color: rgba(212, 185, 137, 0.62);
}
.footer-entity p,
.footer-entity address {
font: inherit;
font-style: normal;
color: inherit;
margin: 0;
}
.footer-entity p + p,
.footer-entity p + address,
.footer-entity address + p { margin-top: 0.15rem; }
.footer-entity p:last-child { margin-top: 0.6rem; }
.footer-entity a {
color: rgba(212, 185, 137, 0.8);
transition: color var(--duration);
}
.footer-entity a:hover { color: #EFE3CC; }
/* ─── 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: clamp(1.5rem, 2.4vw, 2.75rem);
z-index: auto;
overflow: visible;
transition: none;
}
.nav-links::before { display: none; }
.nav-links a {
font-family: var(--font-sans);
font-size: 0.8rem; /* 12.8px — was 0.58rem, too small to read */
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ivory);
opacity: 0.85;
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; } }
@media (min-width: 1200px) { .tradition-grid--four { grid-template-columns: repeat(4, 1fr); } }
.tradition-card { scroll-margin-top: 120px; }
.tradition-card-sojourns + .tradition-card-sojourns { margin-top: 0.4rem; }
.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-section { scroll-margin-top: 120px; }
.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;
}
.register-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .register-grid { grid-template-columns: 1fr; } }
.register-card { scroll-margin-top: 120px; }
.register-card-title {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 300;
color: var(--warm-gold);
line-height: 1.2;
margin-bottom: 0.4rem;
}
.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;
}
/* ═══════════════════════════════════════════════════════════════════
CONSENT UI — first-run notice, preference centre, embed placeholders
═══════════════════════════════════════════════════════════════════
The brand rule against pop-ups is deliberately overridden here, on
legal grounds. Consent must be an unambiguous affirmative act
(GDPR Art 4(11)), so the notice is modal and stays until the visitor
answers. A bar that can be scrolled past would leave people in an
undecided state that is easy to misread as agreement.
Accept and Reject share one class, .consent-btn--equal: identical
size, weight, colour and hover. Do not restyle one without the other.
Making acceptance the prettier button is the exact dark pattern the
regulators look for.
─────────────────────────────────────────────────────────────────── */
/* ─── CONSENT BAND ───────────────────────────────────────────────────
A quiet band along the foot of the window. It does not cover the page,
does not lock scrolling, and puts no scrim over the work.
The unobtrusiveness is only defensible because the gate behind it is
absolute: nothing optional loads while this is up, and scrolling past
it changes nothing. Silence is never a yes. */
.consent-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
border-top: 1px solid var(--gold-border);
box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.14);
transform: translateY(101%);
transition: transform 0.85s var(--ease-silk);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.consent-bar { background: var(--bg); }
}
[data-theme="dark"] .consent-bar {
box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.55);
}
.consent-bar.is-visible {
transform: translateY(0);
}
/* A hairline of bronze along the very top edge, the same gesture the
site uses for its section rules. */
.consent-bar::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent, var(--accent) 22%, var(--accent) 78%, transparent);
opacity: 0.55;
}
.consent-bar-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 1.6rem var(--margin-h) 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.consent-bar-copy {
max-width: 68ch;
}
.consent-bar-title {
font-family: var(--font-sans);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.5rem;
}
.consent-bar-text {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 300;
line-height: 1.7;
letter-spacing: var(--tracking-body);
color: var(--text-2);
}
.consent-bar-actions {
display: flex;
align-items: center;
gap: 0.7rem;
flex-shrink: 0;
}
.consent-bar-links {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--margin-h) 1.5rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
}
.consent-bar-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.64rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--text-3);
text-decoration: none;
border-bottom: 1px solid var(--rule-2);
transition: color 0.4s var(--ease-silk), border-color 0.4s var(--ease-silk);
}
.consent-bar-link:hover {
color: var(--accent);
border-color: var(--accent);
}
.consent-bar-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
body.has-consent-bar {
padding-bottom: var(--consent-bar-h, 0px);
transition: padding-bottom 0.85s var(--ease-silk);
}
/* ─── LINKS ──────────────────────────────────────────────────────── */
.consent-links {
margin-top: var(--space-sm);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 300;
letter-spacing: 0.08em;
}
.consent-links a {
color: var(--text-3);
text-decoration: none;
border-bottom: 1px solid var(--rule-2);
padding-bottom: 1px;
transition: color 0.4s var(--ease-silk), border-color 0.4s var(--ease-silk);
}
.consent-links a:hover {
color: var(--accent);
border-color: var(--accent);
}
.consent-sep {
color: var(--text-3);
margin: 0 0.6rem;
}
/* ─── BUTTONS ────────────────────────────────────────────────────────
--equal is Accept All and Reject Non-Essential, indistinguishable by
design. --quiet is the lower-stakes secondary action. */
.consent-btn {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 400;
letter-spacing: var(--tracking-nav);
text-transform: uppercase;
line-height: 1;
padding: 16px 22px;
border-radius: 0;
cursor: pointer;
transition: background 0.5s var(--ease-silk),
color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk);
}
.consent-btn--equal {
background: transparent;
color: var(--text);
border: 1px solid var(--rule-2);
flex: 0 0 auto;
text-align: center;
white-space: nowrap;
}
/* Only in the preference centre do the two stretch to fill the row. */
.consent-dialog-foot .consent-btn--equal {
flex: 1 1 auto;
min-width: 11rem;
}
.consent-btn--equal:hover {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
}
.consent-btn--quiet {
background: transparent;
color: var(--text-3);
border: 1px solid transparent;
border-bottom-color: var(--rule-2);
padding: 16px 4px;
flex: 0 1 auto;
}
.consent-btn--quiet:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
.consent-btn:focus-visible,
.consent-switch:focus-visible,
.consent-dialog-close:focus-visible,
.consent-links a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ─── PREFERENCE CENTRE ──────────────────────────────────────────── */
/* Closed by default. Visibility is carried by .is-open, never by the
[hidden] attribute: [hidden] only sets display:none via the UA
stylesheet, so the `display: flex` below silently cancelled it and the
panel could never be dismissed. */
.consent-dialog-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9996;
background: rgba(28, 27, 25, 0.62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: var(--space-sm);
overflow-y: auto;
}
.consent-dialog-overlay.is-open {
display: flex;
}
body.consent-dialog-open {
overflow: hidden;
}
.consent-dialog {
background: var(--bg);
border: 1px solid var(--gold-border);
width: 100%;
max-width: 660px;
max-height: calc(100vh - 3rem);
overflow-y: auto;
padding: var(--space-md);
}
.consent-dialog-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--gold-border);
}
.consent-dialog-title {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 300;
color: var(--text);
letter-spacing: 0.01em;
}
.consent-dialog-close {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 400;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--text-3);
padding: 6px 2px;
transition: color 0.4s var(--ease-silk);
}
.consent-dialog-close:hover {
color: var(--accent);
}
.consent-dialog-intro {
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 300;
line-height: 1.8;
color: var(--text-2);
margin: var(--space-sm) 0;
}
/* ─── CATEGORY ROWS ──────────────────────────────────────────────── */
.consent-cat-list {
border-top: 1px solid var(--rule);
}
.consent-cat {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--rule);
}
.consent-cat-copy { flex: 1; }
.consent-cat-name {
font-family: var(--font-sans);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--text);
margin-bottom: 0.4rem;
}
.consent-cat-desc {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
line-height: 1.7;
color: var(--text-3);
}
.consent-cat-control {
flex-shrink: 0;
padding-top: 0.15rem;
}
.consent-cat-always {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--text-3);
}
/* Switch — same 46x24 pill geometry as the header theme toggle, so the
control reads as part of the same system. Off is the shipped state. */
.consent-switch {
width: 46px;
height: 24px;
border: 1px solid var(--rule-2);
border-radius: 12px;
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
flex-shrink: 0;
transition: border-color 0.4s var(--ease-silk);
}
.consent-switch:hover { border-color: var(--accent); }
.consent-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--rule-2);
transition: transform 0.55s var(--ease-silk), background 0.4s var(--ease-silk);
}
.consent-switch.is-on { border-color: var(--accent); }
.consent-switch.is-on::after {
transform: translateX(22px);
background: var(--accent);
}
.consent-dialog-foot {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--space-sm);
}
/* ─── EMBED PLACEHOLDER ──────────────────────────────────────────── */
.consent-embed-block {
border: 1px solid var(--gold-border);
background: var(--recess);
padding: var(--space-sm);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.consent-embed-title {
font-family: var(--font-sans);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--accent);
}
.consent-embed-text {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 300;
line-height: 1.75;
color: var(--text-2);
max-width: 58ch;
}
.consent-embed-block .consent-btn--equal {
flex: 0 0 auto;
min-width: 0;
}
/* ─── PRIVACY SETTINGS FOOTER LINK ───────────────────────────────── */
/* Rendered as a button so it is a real control for assistive tech, but
sits in the footer legal row looking like its neighbouring links. */
.footer-privacy-settings {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: inherit;
transition: color 0.4s var(--ease-silk);
}
.footer-privacy-settings:hover {
color: var(--accent);
}
.footer-privacy-settings:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
.consent-dialog {
padding: var(--space-sm);
max-height: calc(100vh - 1.5rem);
}
.consent-dialog-title { font-size: 1.3rem; }
.consent-bar-inner {
flex-direction: column;
align-items: stretch;
gap: var(--space-xs);
padding: 1.3rem var(--margin-h) 0.7rem;
max-height: 62vh;
overflow-y: auto;
}
.consent-bar-text { font-size: 0.75rem; }
.consent-bar-links { padding: 0 var(--margin-h) 1.2rem; }
.consent-bar-actions,
.consent-dialog-foot {
flex-direction: column;
align-items: stretch;
}
.consent-btn--equal {
width: 100%;
min-width: 0;
padding: 15px 14px;
}
.consent-btn--quiet {
text-align: center;
padding: 13px 4px;
}
.consent-cat { gap: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
.consent-bar,
.consent-switch,
.consent-switch::after {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════════
LEGAL PAGE COMPONENTS — privacy, cookies, data requests
═══════════════════════════════════════════════════════════════════
Extends .legal-content, which already carries the h2 and p rules.
Nothing here uses font-weight for emphasis; hierarchy stays on the
size scale, per the house rules.
─────────────────────────────────────────────────────────────────── */
.legal-content h3 {
font-family: var(--font-sans);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--accent);
margin: var(--space-md) 0 0.6rem;
}
.legal-lede {
font-family: var(--font-serif);
font-size: var(--type-lede);
font-weight: 300;
line-height: 1.7;
color: var(--text);
margin-bottom: var(--space-md);
}
.legal-meta {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 300;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--space-md);
}
/* A value the house still has to supply. Visible on purpose: an unfilled
legal fact should be obvious to whoever reads the page, not buried in
a source comment where it can ship unnoticed. */
.legal-config {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
line-height: 1.7;
color: var(--text-3);
font-style: italic;
border-left: 2px solid var(--gold-mid);
padding: 0.35rem 0 0.35rem 0.9rem;
margin-bottom: 1rem;
}
.legal-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85em;
color: var(--accent);
word-break: break-all;
}
/* Opens the preference centre from inside a sentence. Looks like the
links around it, but is a real button so assistive tech announces it
as the control it is. */
.legal-inline-button {
background: none;
border: none;
border-bottom: 1px solid var(--rule-2);
padding: 0 0 1px;
margin: 0;
cursor: pointer;
font: inherit;
color: var(--accent);
transition: border-color 0.4s var(--ease-silk), color 0.4s var(--ease-silk);
}
.legal-inline-button:hover {
border-color: var(--accent);
}
.legal-inline-button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ─── TABLES ──────────────────────────────────────────────────────────
Wrapped in their own horizontal scroll on small screens so the page
body never scrolls sideways. */
.legal-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-sm) 0 var(--space-md);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
line-height: 1.65;
color: var(--text-2);
display: block;
overflow-x: auto;
white-space: normal;
}
.legal-table-caption,
.legal-table caption {
caption-side: top;
text-align: left;
font-size: 0.62rem;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--text-3);
padding-bottom: 0.7rem;
}
.legal-table th,
.legal-table td {
text-align: left;
vertical-align: top;
padding: 0.85rem 1rem 0.85rem 0;
border-bottom: 1px solid var(--rule);
}
.legal-table thead th {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: var(--tracking-meta);
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--gold-border);
white-space: nowrap;
}
.legal-table tbody th {
font-weight: 400;
color: var(--text);
padding-right: 1.5rem;
}
/* ─── FORM ADDITIONS ─────────────────────────────────────────────── */
/* Select, matched to .form-input so the request form reads as one piece. */
.form-select {
background: none;
border: none;
outline: none;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 400;
color: var(--text);
line-height: 1.6;
width: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
padding-right: 1.5rem;
background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
linear-gradient(135deg, var(--accent) 50%, transparent 50%);
background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.form-select option {
background: var(--bg);
color: var(--text);
}
/* The notice that sits with a form. Not a field, so it does not count
against the four-field rule; it is the Art 13 information being given
at the moment of collection, which is when it actually helps. */
.form-consent {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 300;
line-height: 1.75;
color: var(--text-3);
margin-top: var(--space-xs);
padding-left: 0.9rem;
border-left: 1px solid var(--gold-border);
max-width: 60ch;
}
.form-consent a {
color: var(--text-3);
border-bottom: 1px solid var(--rule-2);
text-decoration: none;
transition: color 0.4s var(--ease-silk), border-color 0.4s var(--ease-silk);
}
.form-consent a:hover {
color: var(--accent);
border-color: var(--accent);
}
/* Optional marketing opt-in. Never pre-checked, never bundled with a
submit action that does something else. */
.form-optin {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-top: var(--space-xs);
cursor: pointer;
}
.form-optin input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 2px 0 0;
flex-shrink: 0;
border: 1px solid var(--rule-2);
background: transparent;
cursor: pointer;
position: relative;
transition: border-color 0.4s var(--ease-silk);
}
.form-optin input[type="checkbox"]:hover {
border-color: var(--accent);
}
.form-optin input[type="checkbox"]:checked {
border-color: var(--accent);
}
.form-optin input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid var(--accent);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.form-optin input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.form-optin-label {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
line-height: 1.7;
color: var(--text-2);
max-width: 58ch;
}
.form-optin-label a {
color: var(--text-2);
border-bottom: 1px solid var(--rule-2);
text-decoration: none;
}
.form-optin-label a:hover {
color: var(--accent);
border-color: var(--accent);
}
/* One-line variant. Used on the introduction page, where the letter is
already long and a paragraph of notice under it would read as a
second form to fill in. */
.form-optin--inline {
align-items: center;
margin-top: var(--space-sm);
}
.form-optin--inline .form-optin-label {
font-size: 0.78rem;
line-height: 1.5;
white-space: normal;
}
.form-optin--inline input[type="checkbox"] {
margin-top: 0;
}
.form-confirmation-text {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 300;
color: var(--text);
line-height: 1.75;
}
@media (max-width: 640px) {
.legal-table { font-size: 0.72rem; }
.legal-table th,
.legal-table td { padding: 0.7rem 0.8rem 0.7rem 0; }
}
/* A closing aside. Same register as .legal-meta but set as prose, because
a full sentence in letterspaced uppercase is a headache to read. */
.legal-note {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 300;
line-height: 1.75;
color: var(--text-3);
margin-top: var(--space-md);
padding-top: var(--space-sm);
border-top: 1px solid var(--rule);
}
/* Tables carry more columns than 640px of prose can hold, so on a wide
screen they break out of the reading column rather than squeezing. */
@media (min-width: 1100px) {
.legal-table {
width: calc(100% + 11rem);
margin-left: -5.5rem;
margin-right: -5.5rem;
}
}
/* The introduction page has no footer, so its privacy links sit in the
.receive-return block instead. The Privacy Settings control is a real