/* ============================================================
Bangalore Leadership Circle — Redesign
Direction: Obsidian Editorial. Luxury-tech, membership-club,
editorial magazine energy. Deep obsidian ink, brass gold,
ivory type. Restrained motion. Hairline architecture.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
/* Surfaces — deep plum / aubergine base for a warm, salon-like community feel */
--ink: oklch(0.15 0.035 320); /* base — deep muted plum */
--ink-2: oklch(0.19 0.040 320); /* elevated (nav drawer, cards) */
--ink-3: oklch(0.23 0.045 320); /* card hover, journal, event card head */
--ink-4: oklch(0.30 0.050 320); /* border-glow surface */
/* Type on plum */
--ivory: oklch(0.96 0.010 340); /* soft ivory with faint lilac undertone */
--ivory-dim: oklch(0.80 0.030 335); /* body copy — dusty lilac-warm */
--stone: oklch(0.62 0.030 330); /* muted mono captions */
--stone-dim: oklch(0.48 0.030 328);
/* Accents — dusty rose / dark pink, warm & elegant */
--brass: oklch(0.72 0.16 12); /* primary — dusty rose */
--brass-dim: oklch(0.60 0.14 10); /* deeper rose */
--brass-deep: oklch(0.46 0.12 8); /* deepest rose */
--brass-glow: oklch(0.84 0.10 18); /* rose-blush hover */
/* Structural — lavender-tinted hairlines */
--line: rgba(240,220,235,0.08);
--line-strong: rgba(240,220,235,0.16);
--line-brass: rgba(230,140,160,0.30);
/* Ambient tints (rgb triplets used in radial gradients — retunable per theme) */
--ambient-a: 230,140,160; /* rose */
--ambient-b: 160,130,200; /* lilac */
--orb-rgb: 230,140,160; /* orbital ring tint */
--spotlight-rgb: 230,140,160; /* hero cursor spotlight */
--noise-blend: soft-light; /* how the noise film blends */
--noise-opacity: 0.28;
--marquee-stroke: rgba(240,220,235,0.08);
/* Type */
--serif: 'Fraunces', 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
--container: 1320px;
--pad: clamp(24px, 5vw, 72px);
--radius: 3px;
}
/* ============================================================
LIGHT MODE — cream salon
Applied via ``. Every surface, hairline,
and accent flips; the identity (plum + dusty rose) stays intact.
============================================================ */
html[data-theme="light"]{
/* Cream + alabaster surfaces */
--ink: oklch(0.97 0.008 60); /* warm cream paper */
--ink-2: oklch(0.94 0.010 340); /* alabaster with lilac undertone */
--ink-3: oklch(0.90 0.014 340); /* card hover / journal */
--ink-4: oklch(0.85 0.020 340); /* border-glow surface */
/* Plum-family type on cream */
--ivory: oklch(0.22 0.045 320); /* deep plum ink */
--ivory-dim: oklch(0.38 0.035 325); /* body copy — dusty plum */
--stone: oklch(0.52 0.028 328); /* mono captions */
--stone-dim: oklch(0.65 0.020 330); /* lightest muted */
/* Rose accent — deepened for cream contrast */
--brass: oklch(0.60 0.17 12); /* primary rose */
--brass-dim: oklch(0.48 0.15 10); /* deeper rose */
--brass-deep: oklch(0.38 0.13 8); /* deepest */
--brass-glow: oklch(0.52 0.19 14); /* hover — richer rose */
/* Hairlines — plum-tinted on cream */
--line: rgba(60,30,55,0.10);
--line-strong: rgba(60,30,55,0.20);
--line-brass: rgba(180,50,80,0.30);
/* Ambient / decorative */
--ambient-a: 210,120,140;
--ambient-b: 170,140,200;
--orb-rgb: 180,50,80;
--spotlight-rgb: 180,50,80;
--noise-blend: multiply;
--noise-opacity: 0.06;
--marquee-stroke: rgba(60,30,55,0.12);
color-scheme: light;
}
html[data-theme="light"] ::selection{
background: var(--brass);
color: #fff;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
font-family: var(--sans);
color: var(--ivory);
background: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
overflow-x: hidden;
min-height: 100vh;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
::selection{ background: var(--brass); color: var(--ink); }
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
:focus-visible{
outline: 1px solid var(--brass);
outline-offset: 3px;
}
.container{
max-width: var(--container);
margin: 0 auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
/* ============================================================
BACKGROUND ATMOSPHERE — subtle noise + ambient orb
============================================================ */
body::before{
content:"";
position: fixed; inset: 0;
background:
radial-gradient(ellipse 60% 40% at 80% 0%, rgba(var(--ambient-a), 0.10), transparent 60%),
radial-gradient(ellipse 55% 60% at 0% 100%, rgba(var(--ambient-b), 0.08), transparent 60%);
pointer-events: none;
z-index: 0;
}
body::after{
content:"";
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: var(--noise-opacity);
pointer-events: none;
z-index: 0;
mix-blend-mode: var(--noise-blend);
}
main, header.hero, section, footer, nav { position: relative; z-index: 1; }
/* ============================================================
TYPOGRAPHY
============================================================ */
h1,h2,h3,h4,h5{
font-family: var(--serif);
font-weight: 400;
font-variation-settings: "opsz" 100;
letter-spacing: -0.02em;
color: var(--ivory);
line-height: 1.05;
}
h1{ font-variation-settings: "opsz" 144; }
h2{ font-variation-settings: "opsz" 96; }
h3{ font-variation-settings: "opsz" 24; letter-spacing: -0.012em; }
em{ font-style: italic; font-family: var(--serif); }
.eyebrow{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
font-weight: 500;
}
.eyebrow::before{
content: "";
width: 32px;
height: 1px;
background: var(--brass);
display: inline-block;
opacity: 0.8;
}
.eyebrow-plain::before{ display:none; }
.chapter-mark{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass-dim);
}
.chev{
display:inline-block;
width: 0.55em;
height: 0.55em;
border-top: 1.5px solid var(--brass);
border-right: 1.5px solid var(--brass);
transform: rotate(-45deg) translateY(-1px);
margin-right: 0.5em;
flex-shrink: 0;
}
h2.section-title{
font-size: clamp(30px, 4vw, 52px);
margin-bottom: 18px;
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
}
h2.section-title em{
font-style: italic;
font-weight: 300;
color: var(--brass);
padding-right: 0.05em; /* keep italic tail from clipping neighbor */
}
p.section-lede{
font-size: 17px;
color: var(--ivory-dim);
max-width: 620px;
line-height: 1.7;
}
.section{
padding: clamp(72px, 10vw, 140px) 0;
position: relative;
}
.section-head{
display:flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.section-index{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 14px;
}
.section-index .idx-num{ color: var(--brass); }
.section-index::after{
content:"";
flex: 1;
height: 1px;
background: var(--line);
max-width: 400px;
}
/* ============================================================
BUTTONS
============================================================ */
.btn{
display: inline-flex;
align-items: center;
gap: 14px;
padding: 15px 28px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: var(--radius);
transition: all 0.35s cubic-bezier(.2,.6,.2,1);
white-space: nowrap;
border: 1px solid transparent;
font-weight: 500;
position: relative;
overflow: hidden;
}
.btn::after{
content:"";
position:absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.btn:hover::after{ transform: translateX(100%); }
.btn-primary,
a.btn-primary,
.nav-links a.btn-primary{
background: var(--brass);
color: var(--ink);
border-color: var(--brass);
}
.btn-primary:hover,
a.btn-primary:hover,
.nav-links a.btn-primary:hover{
background: var(--brass-glow);
border-color: var(--brass-glow);
color: var(--ink);
transform: translateY(-1px);
box-shadow: 0 12px 40px -12px rgba(230,140,160,0.5);
}
/* In light mode we want the button label to be cream on rose, not plum on rose */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] a.btn-primary,
html[data-theme="light"] .nav-links a.btn-primary{
color: oklch(0.97 0.008 60); /* explicit cream regardless of --ink override */
}
.btn-ghost{
background: transparent;
color: var(--ivory);
border-color: var(--line-strong);
}
.btn-ghost:hover{
border-color: var(--brass);
color: var(--brass-glow);
}
.btn-arrow{ transition: transform 0.35s ease; display:inline-block; }
.btn:hover .btn-arrow{ transform: translateX(5px); }
/* ============================================================
NAVIGATION
============================================================ */
.site-nav{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px 0;
transition: background 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
border-bottom: 1px solid transparent;
}
.site-nav .container{
display:flex;
align-items:center;
justify-content: space-between;
}
.site-nav.scrolled{
background: color-mix(in oklch, var(--ink) 78%, transparent);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
padding: 14px 0;
border-bottom-color: var(--line);
}
.nav-brand{
display:flex;
align-items:center;
gap: 14px;
color: var(--ivory);
}
.nav-brand .brand-mark{
width: 40px; height: 40px;
border-radius: 50%;
background: var(--ink-3);
border: 1px solid var(--line-brass);
display:flex; align-items:center; justify-content:center;
overflow: hidden;
position: relative;
}
.nav-brand .brand-mark img{
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.15);
}
.nav-brand .brand-lines{
display:flex; flex-direction:column; gap:2px; line-height:1.15;
font-family: var(--serif);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
}
.nav-brand .brand-lines span{
font-size: 9.5px;
font-family: var(--mono);
letter-spacing: 0.22em;
color: var(--brass-dim);
display:block;
text-transform: uppercase;
font-weight:400;
margin-top: 2px;
}
.nav-links{
display:flex;
align-items:center;
gap: 34px;
}
.nav-links > li > a{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ivory-dim);
position: relative;
padding: 6px 0;
transition: color 0.25s ease;
font-weight: 500;
}
.nav-links > li > a::after{
content:"";
position:absolute;
left: 0; bottom: -2px;
width: 0; height: 1px;
background: var(--brass);
transition: width 0.35s cubic-bezier(.2,.6,.2,1);
}
.nav-links > li > a:hover, .nav-links > li > a.active{ color: var(--brass-glow); }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after{ width: 100%; }
.nav-cta{ margin-left: 12px; }
.nav-cta .btn{ padding: 11px 22px; font-size: 10.5px; }
.nav-toggle{ display:none; }
/* Theme toggle */
.theme-toggle{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--ivory-dim);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
position: relative;
overflow: hidden;
flex-shrink: 0;
margin-left: 4px;
}
.theme-toggle:hover{
color: var(--brass);
border-color: var(--brass);
transform: rotate(-15deg);
}
.theme-toggle svg{
width: 16px;
height: 16px;
transition: transform 0.5s cubic-bezier(.2,.6,.2,1), opacity 0.3s ease;
position: absolute;
}
.theme-toggle .icon-sun{ opacity: 0; transform: rotate(-45deg) scale(0.6); }
.theme-toggle .icon-moon{ opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle .icon-sun{ opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle .icon-moon{ opacity: 0; transform: rotate(45deg) scale(0.6); }
@media (max-width: 960px){
.theme-toggle{ margin-left: auto; margin-right: 8px; order: -1; }
}
@media (max-width: 960px){
.nav-links{
position: fixed; inset: 0 0 0 auto;
width: min(340px, 88vw);
background: var(--ink-2);
border-left: 1px solid var(--line);
flex-direction: column;
align-items: flex-start;
padding: 110px 32px 40px;
gap: 26px;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(.6,0,.3,1);
}
.nav-links.open{ transform: translateX(0); }
.nav-cta{ margin: 8px 0 0; }
.nav-toggle{
display:flex; flex-direction:column; gap:5px;
padding: 10px; z-index: 110;
}
.nav-toggle span{ width: 24px; height: 1px; background: var(--ivory); transition: all 0.3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}
/* ============================================================
HERO
============================================================ */
.hero{
position: relative;
padding-top: clamp(140px, 16vw, 190px);
padding-bottom: clamp(60px, 8vw, 100px);
overflow: hidden;
min-height: auto;
display: block;
}
.hero .container{ position: relative; z-index: 4; }
/* Concentric orbital rings that echo the emblem */
.orbit-field{
position:absolute;
inset: 0;
z-index: 1;
pointer-events:none;
overflow: hidden;
}
.orbit{
position:absolute;
border-radius:50%;
border: 1px solid rgba(var(--orb-rgb), 0.14);
animation: orbit-rotate 60s linear infinite;
}
.orbit.o1{ width: 1200px; height:1200px; right: -420px; top: -280px;}
.orbit.o2{ width: 900px; height:900px; right: -260px; top: -140px; border-color: rgba(var(--orb-rgb), 0.20); animation-duration: 90s; animation-direction: reverse; }
.orbit.o3{ width: 640px; height:640px; right: -100px; top: 20px; border-color: rgba(var(--orb-rgb), 0.30); animation-duration: 120s; }
.orbit.o4{ width: 420px; height:420px; right: 60px; top: 160px; border-color: rgba(var(--orb-rgb), 0.42); animation-duration: 150s; animation-direction: reverse; }
/* Points of light along the orbit */
.orbit::before{
content:"";
position: absolute;
top: -3px; left: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--brass-glow);
box-shadow: 0 0 20px 3px rgba(var(--orb-rgb), 0.65);
}
.orbit.o1::before, .orbit.o3::before{ top: 50%; left: -3px; }
@keyframes orbit-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Cursor-following spotlight */
.hero-spotlight{
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle 500px at var(--mx, 70%) var(--my, 30%), rgba(var(--spotlight-rgb), 0.12), transparent 60%);
transition: background 0.4s ease;
}
/* Emblem glow behind headline */
.hero-emblem{
position: absolute;
right: 8%;
top: 22%;
width: 380px;
height: 380px;
z-index: 2;
opacity: 0.32;
filter: blur(0.4px);
}
.hero-emblem img{
width: 100%; height: 100%;
filter: drop-shadow(0 0 60px rgba(var(--orb-rgb), 0.40)) hue-rotate(280deg) saturate(0.7);
animation: emblem-breathe 8s ease-in-out infinite;
}
html[data-theme="light"] .hero-emblem{ opacity: 0.16; }
html[data-theme="light"] .hero-emblem img{
filter: drop-shadow(0 0 60px rgba(var(--orb-rgb), 0.30));
}
@keyframes emblem-breathe{
0%,100% { transform: scale(1); opacity: 0.32; }
50% { transform: scale(1.03); opacity: 0.4; }
}
.hero-topline{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: clamp(40px, 5vw, 60px);
gap: 20px;
flex-wrap: wrap;
}
.hero-topline .locale{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--stone);
display: flex;
align-items: center;
gap: 12px;
}
.hero-topline .locale .pulse{
width: 6px; height: 6px; border-radius: 50%;
background: var(--brass);
box-shadow: 0 0 12px 2px var(--brass);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{ opacity: 1; transform: scale(1); }
50%{ opacity: 0.4; transform: scale(0.9); }
}
.hero-eyebrow{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brass);
display:flex;
align-items:center;
gap:14px;
margin-bottom: 24px;
font-weight: 500;
}
.hero-eyebrow::before{
content:"";
width: 40px; height: 1px;
background: var(--brass);
opacity: 0.8;
}
.hero h1{
font-size: clamp(44px, 7.5vw, 108px);
color: var(--ivory);
max-width: 13ch;
margin-bottom: 32px;
font-weight: 300;
letter-spacing: -0.032em;
line-height: 0.98;
font-variation-settings: "opsz" 144;
}
.hero h1 em{
color: var(--brass);
font-style: italic;
font-weight: 300;
font-variation-settings: "opsz" 144, "wght" 300;
letter-spacing: -0.01em;
}
.hero .lede{
font-size: clamp(16px, 1.35vw, 18px);
color: var(--ivory-dim);
max-width: 540px;
margin-bottom: 40px;
line-height: 1.65;
font-weight: 300;
}
.hero-actions{ display:flex; gap:16px; flex-wrap: wrap; }
.subhero-bar{
position: relative;
z-index: 4;
border-top: 1px solid var(--line);
margin-top: clamp(56px, 7vw, 84px);
padding-top: 32px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.stat{
padding: 0 clamp(20px, 3vw, 40px);
border-right: 1px solid var(--line);
}
.stat:first-child{ padding-left: 0; }
.stat:last-child{ border-right: none; }
.stat b{
display:block;
font-family: var(--serif);
font-size: clamp(30px, 3.2vw, 42px);
color: var(--ivory);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 10px;
font-variation-settings: "opsz" 96;
}
.stat b .accent{ color: var(--brass); }
.stat span{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--stone);
display: block;
line-height: 1.5;
max-width: 20ch;
}
@media (max-width: 780px){
.subhero-bar{ grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
.stat{ border-right: none; padding-left: 0; }
.stat:nth-child(odd){ border-right: 1px solid var(--line); }
.hero-emblem{ display:none; }
}
/* Small page hero (interior pages) */
.page-hero{
padding-top: clamp(130px, 15vw, 180px);
padding-bottom: clamp(56px, 7vw, 84px);
min-height: auto;
display: block;
}
.page-hero h1{
font-size: clamp(38px, 6vw, 80px);
max-width: 18ch;
margin-bottom: 24px;
font-weight: 300;
line-height: 1.02;
}
.page-hero h1 em{ color: var(--brass); font-style: italic; font-weight: 300; }
.page-hero .lede{ margin-bottom: 20px; }
.page-hero-meta{
display:flex;
gap: 30px;
flex-wrap: wrap;
padding-top: 36px;
margin-top: 36px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
}
.page-hero-meta span b{ color: var(--brass); font-weight: 500; margin-right: 8px; }
/* ============================================================
MANIFESTO
============================================================ */
.manifesto{
padding: clamp(72px, 10vw, 130px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.manifesto-grid{
display:grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(50px, 8vw, 120px);
align-items: start;
}
.manifesto-left{
position: sticky;
top: 140px;
}
.manifesto-left .chapter-mark{ margin-bottom: 40px; display: block; }
.manifesto-left blockquote{
font-family: var(--serif);
font-size: clamp(24px, 2.8vw, 36px);
font-weight: 300;
color: var(--ivory);
line-height: 1.2;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 72;
}
.manifesto-left blockquote em{
color: var(--brass);
font-style: italic;
}
.manifesto-left blockquote::before{
content: "";
display: block;
width: 48px;
height: 1px;
background: var(--brass);
margin-bottom: 32px;
}
.manifesto-body p{
font-size: 18px;
color: var(--ivory-dim);
margin-bottom: 28px;
line-height: 1.7;
max-width: 620px;
font-weight: 300;
}
.manifesto-body p.lead{
font-family: var(--serif);
font-size: clamp(19px, 2vw, 24px);
color: var(--ivory);
line-height: 1.45;
font-weight: 400;
margin-bottom: 30px;
}
.manifesto-body p.lead::first-letter{
color: var(--brass);
}
.manifesto-body .closing-line{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass);
margin-top: 44px;
display:flex;
gap: 28px;
flex-wrap:wrap;
padding-top: 34px;
border-top: 1px solid var(--line);
}
@media (max-width: 900px){
.manifesto-grid{ grid-template-columns: 1fr; gap: 40px; }
.manifesto-left{ position: static; }
}
/* ============================================================
PILLARS — three-column values row
============================================================ */
.pillars{
display:grid;
grid-template-columns: repeat(3,1fr);
gap: 0;
margin-top: 56px;
border-top: 1px solid var(--line);
}
.pillar{
padding: 40px 32px 40px 0;
border-right: 1px solid var(--line);
position: relative;
}
.pillar:last-child{ border-right: none; padding-right: 0; }
.pillar-num{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--brass);
margin-bottom: 20px;
display:block;
}
.pillar h4{
font-family: var(--serif);
font-size: 22px;
margin: 0 0 14px;
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
}
.pillar p{
font-size: 14.5px;
color: var(--ivory-dim);
line-height: 1.65;
font-weight: 300;
}
@media (max-width: 860px){
.pillars{ grid-template-columns: 1fr; }
.pillar{ border-right: none; border-bottom: 1px solid var(--line); padding: 32px 0; }
.pillar:last-child{ border-bottom: none; }
}
/* ============================================================
GRID UTILITY
============================================================ */
.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px){
.grid-4{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px){
.grid-3{ grid-template-columns: repeat(2,1fr); }
.grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
.grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
}
/* ============================================================
EVENT CARDS — editorial row + card variants
============================================================ */
.event-list{
display: flex;
flex-direction: column;
border-top: 1px solid var(--line);
}
.event-row{
display: grid;
grid-template-columns: 100px 1fr 260px auto;
gap: 40px;
padding: 42px 0;
border-bottom: 1px solid var(--line);
align-items: center;
position: relative;
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
}
.event-row::before{
content:"";
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background: linear-gradient(90deg, rgba(230,140,160,0.03), transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.event-row:hover::before{ opacity: 1; }
.event-row:hover .event-row-title{ color: var(--brass-glow); }
.event-row:hover .event-row-arrow{ color: var(--brass); transform: translateX(6px); }
.event-row-date{
font-family: var(--serif);
color: var(--ivory);
}
.event-row-date .d{
font-size: 44px;
line-height: 1;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--brass);
display: block;
}
.event-row-date .m{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--stone);
margin-top: 8px;
display: block;
}
.event-row-main .kind{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 10px;
display: block;
}
.event-row-title{
font-family: var(--serif);
font-size: clamp(20px, 2vw, 26px);
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
margin-bottom: 10px;
transition: color 0.35s ease;
letter-spacing: -0.015em;
}
.event-row-desc{
font-size: 14.5px;
color: var(--ivory-dim);
line-height: 1.6;
max-width: 560px;
font-weight: 300;
}
.event-row-meta{
font-family: var(--mono);
font-size: 11px;
color: var(--stone);
line-height: 1.7;
letter-spacing: 0.06em;
}
.event-row-meta div{ display: flex; gap: 10px; align-items: baseline; }
.event-row-meta div::before{
content:"·"; color: var(--brass); font-size: 14px;
}
.event-row-arrow{
font-family: var(--mono);
font-size: 18px;
color: var(--stone);
transition: all 0.35s ease;
}
@media (max-width: 900px){
.event-row{ grid-template-columns: 80px 1fr; gap: 24px; }
.event-row-meta, .event-row-arrow{ grid-column: 2; }
}
/* Card variant (used on home preview) */
.event-card{
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
position: relative;
}
.event-card::before{
content:"";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brass), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.event-card:hover{
border-color: var(--line-brass);
transform: translateY(-4px);
background: var(--ink-3);
}
.event-card:hover::before{ opacity: 1; }
.event-card-head{
padding: 28px 28px 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid var(--line);
}
.event-card-head .date-block{
font-family: var(--serif);
}
.event-card-head .date-block .d{
font-size: 52px;
line-height: 1;
color: var(--brass);
font-weight: 300;
letter-spacing: -0.03em;
display: block;
}
.event-card-head .date-block .m{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--stone);
margin-top: 6px;
display: block;
}
.event-tag{
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass);
border: 1px solid var(--line-brass);
padding: 6px 10px;
border-radius: 2px;
}
.event-card-body{
padding: 24px 28px 30px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.event-card-body h3{
font-size: 22px;
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
}
.event-card-body p{
color: var(--ivory-dim);
font-size: 14px;
line-height: 1.65;
font-weight: 300;
flex: 1;
}
.event-card-meta{
font-family: var(--mono);
font-size: 11px;
color: var(--stone);
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.event-status{
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
}
.event-status.upcoming{ color: var(--brass); }
.event-status.past{ color: var(--stone); }
/* Feature (announcing soon) block on events page */
.feature-announce{
border: 1px dashed var(--line-brass);
border-radius: var(--radius);
padding: clamp(40px, 6vw, 72px);
background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 90px;
position: relative;
overflow: hidden;
}
.feature-announce::before{
content:"";
position: absolute;
right: -80px; top: -80px;
width: 300px; height: 300px;
border-radius: 50%;
border: 1px solid var(--line-brass);
opacity: 0.6;
}
.feature-announce::after{
content:"";
position: absolute;
right: -40px; top: -40px;
width: 220px; height: 220px;
border-radius: 50%;
border: 1px solid var(--line-brass);
opacity: 0.4;
}
.feature-announce h3{
font-family: var(--serif);
font-size: clamp(24px, 2.8vw, 32px);
margin: 14px 0 12px;
font-weight: 400;
color: var(--ivory);
max-width: 18ch;
}
.feature-announce p{
color: var(--ivory-dim);
max-width: 520px;
font-weight: 300;
}
.feature-announce > *{ position: relative; z-index: 2; }
/* ============================================================
PERSON CARDS (speakers / mentors)
============================================================ */
.person-card{
overflow: hidden;
position: relative;
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
}
.person-card:hover{
border-color: var(--line-brass);
transform: translateY(-4px);
}
.person-card:hover .person-portrait::after{ opacity: 0.7; }
.person-card:hover .person-num{ color: var(--brass-glow); }
.person-portrait{
aspect-ratio: 4/5;
background:
radial-gradient(circle at 30% 30%, rgba(230,140,160,0.14), transparent 60%),
linear-gradient(155deg, var(--ink-3), var(--ink));
position: relative;
display:flex;
align-items:center;
justify-content:center;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.person-portrait::before{
content:"";
position: absolute;
inset: 20px;
border: 1px solid var(--line);
border-radius: 2px;
pointer-events: none;
}
.person-portrait::after{
content:"";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(230,140,160,0.25), transparent 60%);
opacity: 0.3;
transition: opacity 0.5s ease;
}
.person-portrait .monogram{
font-family: var(--serif);
font-size: 78px;
color: var(--brass);
font-weight: 300;
letter-spacing: -0.04em;
opacity: 0.9;
font-variation-settings: "opsz" 144;
position: relative;
z-index: 2;
}
.person-num{
position: absolute;
top: 20px; left: 22px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--brass);
z-index: 3;
transition: color 0.35s ease;
}
.person-chev{
position: absolute;
bottom: 22px;
right: 22px;
width: 18px; height: 18px;
border-top: 1.5px solid var(--brass);
border-right: 1.5px solid var(--brass);
transform: rotate(-45deg);
opacity: 0.7;
z-index: 3;
}
.person-info{
padding: 22px 24px 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.person-tag{
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 4px;
}
.person-info h3{
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
letter-spacing: -0.015em;
}
.person-role{
font-size: 13px;
color: var(--ivory-dim);
line-height: 1.5;
font-weight: 300;
}
/* ============================================================
PARTNER CARDS
============================================================ */
.partner-card{
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 44px 40px;
display: flex;
flex-direction: column;
gap: 24px;
min-height: 260px;
justify-content: space-between;
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
position: relative;
overflow: hidden;
}
.partner-card::before{
content:"";
position: absolute;
top: 0; left: 0;
width: 40px; height: 40px;
border-top: 1px solid var(--brass);
border-left: 1px solid var(--brass);
opacity: 0;
transition: all 0.4s ease;
}
.partner-card::after{
content:"";
position: absolute;
bottom: 0; right: 0;
width: 40px; height: 40px;
border-bottom: 1px solid var(--brass);
border-right: 1px solid var(--brass);
opacity: 0;
transition: all 0.4s ease;
}
.partner-card:hover{
border-color: var(--line-brass);
background: var(--ink-3);
transform: translateY(-3px);
}
.partner-card:hover::before,
.partner-card:hover::after{
opacity: 1;
width: 60px; height: 60px;
}
.partner-num{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--stone);
}
.partner-num b{ color: var(--brass); font-weight: 500; }
.partner-mark{
display: flex;
align-items: center;
gap: 18px;
margin: 8px 0 6px;
}
.partner-mark .mark-icon{
width: 54px; height: 54px;
border-radius: 50%;
border: 1px solid var(--line-brass);
display:flex; align-items:center; justify-content:center;
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
color: var(--brass);
background: var(--ink);
flex-shrink: 0;
letter-spacing: -0.02em;
}
.partner-mark .mark-name{
font-family: var(--serif);
font-size: 24px;
color: var(--ivory);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
}
.partner-role{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
display: block;
margin-bottom: 12px;
}
.partner-desc{
font-size: 14.5px;
color: var(--ivory-dim);
line-height: 1.65;
font-weight: 300;
flex: 1;
}
/* Home partner strip (marquee-ish) */
.partner-strip{
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.partner-strip .p-item{
padding: 40px 30px;
border-right: 1px solid var(--line);
display: flex;
align-items: center;
gap: 16px;
transition: background 0.35s ease;
}
.partner-strip .p-item:last-child{ border-right: none; }
.partner-strip .p-item:hover{ background: var(--ink-2); }
.partner-strip .p-item .dot{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brass);
box-shadow: 0 0 10px 2px rgba(230,140,160,0.4);
flex-shrink: 0;
}
.partner-strip .p-item .p-name{
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
color: var(--ivory);
letter-spacing: -0.01em;
line-height: 1.2;
}
@media (max-width: 900px){
.partner-strip{ grid-template-columns: 1fr 1fr; }
.partner-strip .p-item:nth-child(2){ border-right: none; }
.partner-strip .p-item:nth-child(1), .partner-strip .p-item:nth-child(2){ border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px){
.partner-strip{ grid-template-columns: 1fr; }
.partner-strip .p-item{ border-right: none; border-bottom: 1px solid var(--line); }
.partner-strip .p-item:last-child{ border-bottom: none; }
}
/* ============================================================
NEWS / JOURNAL CARDS
============================================================ */
.journal-grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 28px;
}
@media (max-width: 900px){
.journal-grid{ grid-template-columns: 1fr; }
}
.journal-card{
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 34px 32px;
display: flex;
flex-direction: column;
gap: 18px;
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
position: relative;
overflow: hidden;
}
.journal-card:hover{
border-color: var(--line-brass);
background: var(--ink-3);
transform: translateY(-3px);
}
.journal-card:hover .journal-arrow{ color: var(--brass); transform: translateX(6px); }
.journal-card.feature{
grid-row: span 1;
min-height: 380px;
background:
radial-gradient(circle at 100% 0%, rgba(230,140,160,0.12), transparent 50%),
var(--ink-2);
}
.journal-card.feature h3{
font-size: clamp(22px, 2.4vw, 28px);
max-width: 14ch;
}
.journal-kind{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
}
.journal-card h3{
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
color: var(--ivory);
line-height: 1.25;
letter-spacing: -0.015em;
}
.journal-card p{
color: var(--ivory-dim);
font-size: 14px;
line-height: 1.65;
font-weight: 300;
flex: 1;
}
.journal-foot{
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--stone);
padding-top: 18px;
border-top: 1px solid var(--line);
text-transform: uppercase;
}
.journal-arrow{
color: var(--stone);
transition: all 0.35s ease;
}
/* ============================================================
GALLERY
============================================================ */
.gallery-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
gap: 12px;
}
.gallery-item{
position: relative;
overflow: hidden;
border-radius: var(--radius);
background:
radial-gradient(circle at 30% 30%, rgba(230,140,160,0.12), transparent 60%),
linear-gradient(155deg, var(--ink-3), var(--ink));
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(.2,.6,.2,1);
cursor: pointer;
}
.gallery-item::before{
content:"";
position: absolute;
inset: 14px;
border: 1px solid var(--line);
pointer-events: none;
transition: border-color 0.4s ease;
}
.gallery-item::after{
content:"";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(230,140,160,0.14), transparent 60%);
opacity: 0.5;
transition: opacity 0.4s ease;
}
.gallery-item:hover{ border-color: var(--line-brass); }
.gallery-item:hover::before{ border-color: var(--line-brass); }
.gallery-item:hover::after{ opacity: 1; }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.wide{ grid-column: span 2; }
.gallery-item .g-chev{
width: 28px; height: 28px;
border-top: 1.5px solid var(--brass);
border-right: 1.5px solid var(--brass);
transform: rotate(-45deg);
opacity: 0.5;
position: relative;
z-index: 2;
}
.gallery-item .g-label{
position: absolute;
left: 20px;
bottom: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ivory-dim);
z-index: 2;
}
.gallery-item .g-num{
position: absolute;
top: 20px;
right: 22px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--brass);
z-index: 2;
}
@media (max-width: 900px){
.gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px){
.gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.gallery-item.wide{ grid-column: span 2; }
.gallery-item.tall{ grid-row: span 1; }
}
/* ============================================================
FILTER TABS
============================================================ */
.filter-tabs{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 60px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line);
}
.filter-tab{
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 10px 20px;
border: 1px solid var(--line);
border-radius: 2px;
color: var(--ivory-dim);
background: transparent;
transition: all 0.25s ease;
font-weight: 500;
}
.filter-tab:hover{ color: var(--brass); border-color: var(--line-brass); }
.filter-tab.active{
color: var(--ink);
background: var(--brass);
border-color: var(--brass);
}
/* ============================================================
HOW IT WORKS (mentors page)
============================================================ */
.how-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.how-item{
padding: 48px 36px 48px 0;
border-right: 1px solid var(--line);
position: relative;
}
.how-item:last-child{ border-right: none; padding-right: 0; }
.how-item .num{
font-family: var(--serif);
font-size: 68px;
color: var(--brass);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
display: block;
margin-bottom: 24px;
opacity: 0.55;
font-variation-settings: "opsz" 144;
}
.how-item h4{
font-family: var(--serif);
font-size: 21px;
font-weight: 400;
color: var(--ivory);
margin-bottom: 14px;
line-height: 1.2;
letter-spacing: -0.015em;
}
.how-item p{
color: var(--ivory-dim);
font-size: 15px;
line-height: 1.7;
font-weight: 300;
max-width: 34ch;
}
@media (max-width: 860px){
.how-grid{ grid-template-columns: 1fr; }
.how-item{ border-right: none; border-bottom: 1px solid var(--line); padding: 40px 0; }
.how-item:last-child{ border-bottom: none; }
}
/* Split section (mentors page) */
.split-2{
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(50px, 8vw, 100px);
align-items: start;
}
@media (max-width: 900px){
.split-2{ grid-template-columns: 1fr; }
}
/* ============================================================
CTA BAND
============================================================ */
.cta-band{
padding: clamp(80px, 12vw, 140px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--ink);
position: relative;
overflow: hidden;
}
.cta-band::before{
content:"";
position: absolute;
right: -200px;
top: 50%;
transform: translateY(-50%);
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(230,140,160,0.14), transparent 70%);
pointer-events: none;
}
.cta-band::after{
content:"";
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
width: 400px; height: 400px;
border-radius: 50%;
border: 1px solid var(--line-brass);
pointer-events: none;
opacity: 0.5;
}
.cta-band .container{
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.cta-band .chapter-mark{
display: block;
margin-bottom: 20px;
}
.cta-band h2{
font-family: var(--serif);
font-size: clamp(28px, 3.8vw, 46px);
color: var(--ivory);
max-width: 16ch;
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.025em;
}
.cta-band h2 em{ color: var(--brass); font-style: italic; }
.cta-band p{
color: var(--ivory-dim);
margin-top: 20px;
max-width: 440px;
font-size: 16px;
line-height: 1.65;
font-weight: 300;
}
.subscribe-form{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 24px;
}
.subscribe-form input{
padding: 15px 20px;
border: 1px solid var(--line-strong);
background: color-mix(in oklch, var(--ink) 85%, transparent);
color: var(--ivory);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
min-width: 260px;
border-radius: 2px;
outline: none;
transition: border-color 0.25s ease, background 0.25s ease;
}
.subscribe-form input:focus{
border-color: var(--brass);
background: color-mix(in oklch, var(--brass) 5%, var(--ink));
}
.subscribe-form input::placeholder{ color: var(--stone); }
/* ============================================================
FOOTER
============================================================ */
.site-footer{
padding: clamp(80px, 10vw, 110px) 0 30px;
background: var(--ink);
position: relative;
}
.footer-marquee{
font-family: var(--serif);
font-size: clamp(60px, 11vw, 140px);
color: transparent;
-webkit-text-stroke: 1px var(--marquee-stroke);
font-weight: 300;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 60px;
white-space: nowrap;
overflow: hidden;
font-variation-settings: "opsz" 144;
}
.footer-marquee em{
color: transparent;
-webkit-text-stroke: 1px var(--brass);
font-style: italic;
font-weight: 300;
}
.footer-grid{
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 60px;
border-bottom: 1px solid var(--line);
}
.footer-brand{
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 22px;
}
.footer-brand img{
width: 52px; height: 52px;
border-radius: 50%;
border: 1px solid var(--line-brass);
object-fit: cover;
transform: scale(1.15);
}
.footer-brand-wrap{ overflow: hidden; border-radius: 50%; }
.footer-brand h4{
color: var(--ivory);
font-size: 17px;
margin-bottom: 8px;
font-family: var(--serif);
font-weight: 500;
}
.footer-brand p{
font-size: 13.5px;
color: var(--ivory-dim);
max-width: 320px;
line-height: 1.7;
font-weight: 300;
}
.footer-col h5{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 24px;
font-weight: 500;
}
.footer-col ul{
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-col a{
font-size: 14px;
color: var(--ivory-dim);
transition: color 0.25s ease;
font-weight: 300;
}
.footer-col a:hover{ color: var(--brass); }
.footer-bottom{
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--stone);
}
.footer-social{ display: flex; gap: 20px; }
.footer-social a{
color: var(--ivory-dim);
transition: color 0.25s ease;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
}
.footer-social a:hover{ color: var(--brass); }
/* Social channel strip — sits above the copyright bar on every page */
.social-strip{
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--line);
margin-bottom: 30px;
}
.social-strip .s-item{
padding: 26px 24px;
border-right: 1px solid var(--line);
display: flex;
align-items: center;
gap: 14px;
transition: background 0.35s ease;
color: var(--ivory-dim);
}
.social-strip .s-item:last-child{ border-right: none; }
.social-strip .s-item:hover{
background: var(--ink-2);
color: var(--brass);
}
.social-strip .s-item .s-icon{
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--line-brass);
display: flex;
align-items: center;
justify-content: center;
color: var(--brass);
flex-shrink: 0;
transition: all 0.3s ease;
}
.social-strip .s-item:hover .s-icon{
background: var(--brass);
color: var(--ink);
border-color: var(--brass);
}
.social-strip .s-item .s-icon svg{ width: 15px; height: 15px; }
.social-strip .s-item .s-name{
font-family: var(--serif);
font-size: 15px;
font-weight: 400;
color: inherit;
letter-spacing: -0.01em;
line-height: 1.2;
}
.social-strip .s-item .s-handle{
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--stone);
text-transform: uppercase;
margin-top: 2px;
display: block;
}
@media (max-width: 900px){
.social-strip{ grid-template-columns: 1fr 1fr; }
.social-strip .s-item:nth-child(2){ border-right: none; }
.social-strip .s-item:nth-child(1), .social-strip .s-item:nth-child(2){ border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px){
.social-strip{ grid-template-columns: 1fr; }
.social-strip .s-item{ border-right: none; border-bottom: 1px solid var(--line); }
.social-strip .s-item:last-child{ border-bottom: none; }
}
/* ============================================================
CONTACT PAGE
============================================================ */
.contact-grid{
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(48px, 6vw, 90px);
align-items: start;
}
@media (max-width: 960px){
.contact-grid{ grid-template-columns: 1fr; }
}
.contact-form{
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(32px, 4vw, 52px);
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow: hidden;
}
.contact-form::before{
content:"";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--brass), transparent);
opacity: 0.6;
}
.form-head .eyebrow{ margin-bottom: 12px; }
.form-head h3{
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 400;
color: var(--ivory);
line-height: 1.2;
letter-spacing: -0.015em;
}
.form-head p{
color: var(--ivory-dim);
font-size: 14.5px;
margin-top: 10px;
line-height: 1.65;
font-weight: 300;
}
.form-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 620px){
.form-row{ grid-template-columns: 1fr; }
}
.field{
display: flex;
flex-direction: column;
gap: 8px;
}
.field label{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.field label .req{ color: var(--brass-glow); font-size: 12px; }
.field input,
.field select,
.field textarea{
padding: 14px 16px;
border: 1px solid var(--line-strong);
background: color-mix(in oklch, var(--ink) 92%, transparent);
color: var(--ivory);
font-family: var(--sans);
font-size: 14.5px;
font-weight: 300;
border-radius: 2px;
outline: none;
transition: border-color 0.25s ease, background 0.25s ease;
width: 100%;
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--stone); font-family: var(--sans); font-weight: 300; }
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color: var(--brass);
background: color-mix(in oklch, var(--brass) 6%, var(--ink));
}
.field select{
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.field select option{
background: var(--ink-2);
color: var(--ivory);
}
.field textarea{
resize: vertical;
min-height: 140px;
font-family: var(--sans);
line-height: 1.6;
}
.field .field-hint{
font-family: var(--mono);
font-size: 10.5px;
color: var(--stone);
letter-spacing: 0.08em;
}
.form-consent{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 0;
border-top: 1px solid var(--line);
color: var(--ivory-dim);
font-size: 13px;
font-weight: 300;
line-height: 1.6;
}
.form-consent input[type="checkbox"]{
accent-color: var(--brass);
width: 16px; height: 16px;
margin-top: 3px;
flex-shrink: 0;
cursor: pointer;
}
.form-consent label{ cursor: pointer; }
.form-submit{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.form-submit .note{
font-family: var(--mono);
font-size: 10.5px;
color: var(--stone);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Contact side panel */
.contact-aside{
display: flex;
flex-direction: column;
gap: 30px;
position: sticky;
top: 130px;
}
@media (max-width: 960px){
.contact-aside{ position: static; }
}
.contact-block{
border-top: 1px solid var(--line);
padding-top: 26px;
}
.contact-block:first-child{ border-top: none; padding-top: 0; }
.contact-block .label{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 14px;
display: block;
}
.contact-block .value{
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
color: var(--ivory);
line-height: 1.35;
letter-spacing: -0.015em;
}
.contact-block .value a{
color: var(--ivory);
border-bottom: 1px solid var(--line-brass);
padding-bottom: 2px;
transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-block .value a:hover{
color: var(--brass);
border-color: var(--brass);
}
.contact-block .desc{
font-size: 13.5px;
color: var(--ivory-dim);
line-height: 1.6;
font-weight: 300;
margin-top: 8px;
}
.contact-social{
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.contact-social a{
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--line);
transition: color 0.25s ease, padding 0.25s ease;
color: var(--ivory);
}
.contact-social a:last-child{ border-bottom: none; }
.contact-social a:hover{ color: var(--brass); padding-left: 6px; }
.contact-social .name-line{
display: flex;
align-items: center;
gap: 14px;
}
.contact-social .s-icon{
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--line-brass);
display: flex;
align-items: center;
justify-content: center;
color: var(--brass);
transition: all 0.25s ease;
}
.contact-social .s-icon svg{ width: 13px; height: 13px; }
.contact-social a:hover .s-icon{ background: var(--brass); color: var(--ink); border-color: var(--brass); }
.contact-social .s-name{
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
letter-spacing: -0.01em;
}
.contact-social .s-handle{
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--stone);
text-transform: uppercase;
}
/* Success state after form submit */
.form-success{
display: none;
padding: 32px;
text-align: center;
border: 1px dashed var(--line-brass);
border-radius: var(--radius);
background: rgba(230,140,160,0.04);
}
.form-success.show{ display: block; }
.form-success .check{
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid var(--brass);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brass);
font-size: 22px;
margin-bottom: 18px;
}
.form-success h4{
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
color: var(--ivory);
margin-bottom: 10px;
letter-spacing: -0.015em;
}
.form-success p{
color: var(--ivory-dim);
font-size: 14px;
line-height: 1.6;
font-weight: 300;
max-width: 40ch;
margin: 0 auto;
}
@media (max-width: 900px){
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px){
.footer-grid{ grid-template-columns: 1fr; }
}
/* ============================================================
REVEAL-ON-SCROLL
============================================================ */
.reveal{
opacity: 0;
transform: translateY(32px);
transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: 0.08s; }
.reveal-delay-2{ transition-delay: 0.16s; }
.reveal-delay-3{ transition-delay: 0.24s; }
.reveal-delay-4{ transition-delay: 0.32s; }
.reveal-delay-5{ transition-delay: 0.40s; }
.reveal-delay-6{ transition-delay: 0.48s; }
.reveal-delay-7{ transition-delay: 0.56s; }
/* ============================================================
MISC UTILS
============================================================ */
.small-note{
font-family: var(--mono);
font-size: 11px;
color: var(--stone);
letter-spacing: 0.06em;
}
.side-rule{
padding-left: 20px;
border-left: 1px solid var(--line-brass);
}
.text-brass{ color: var(--brass); }