/* =========================================================
RegSymp — Production Stylesheet
UHNW Redesign — Institutional Finance Edition
========================================================= */
/* The user-agent rule for [hidden] is `display: none`, which any author rule
setting `display` outranks — so an element hidden from script stayed on
screen. The hero CTA did exactly that. */
[hidden] {
display: none !important;
}
:root {
--navy: #1C2B4A;
--navy-light: #2A3D60;
--navy-deep: #0D1322;
--blue: #6B7FA0;
--blue-light: #8B9BB4;
--blue-soft: #B0BCCC;
--white: #FFFFFF;
--off-white: #FAFAF8;
--off-white-2: #EDE8E0;
--text-dark: #2C2E3A;
--text-muted: #6B6E7A;
--border: #D8D3C8;
--gold: #B8963A;
--gold-soft: #F9F5EC;
--gold-text: #7A5E22;
--serif: "Playfair Display", Georgia, "Times New Roman", serif;
--display: "Cinzel", "Playfair Display", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--maxw: 1280px;
--gutter: clamp(20px, 4vw, 64px);
--section-py: clamp(72px, 9vw, 128px);
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--r-pill: 999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
color: var(--text-dark);
background: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
:focus-visible {
outline: 3px solid #4A5D7E;
outline-offset: 3px;
border-radius: 3px;
}
.skip-link {
position: absolute; top: -100%; left: 16px;
background: #1C2B4A; color: white;
padding: 8px 16px; border-radius: 0 0 8px 8px;
font-size: 14px; font-weight: 600; z-index: 10001;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.hero-video { display: none; }
.reveal { transition: none; opacity: 1; transform: none; }
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ------- Typography ------- */
.eyebrow {
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
display: inline-block;
margin: 0 0 20px;
}
.eyebrow.on-dark { color: var(--blue-light); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.h-display {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 6.4vw, 88px);
line-height: 1.06;
letter-spacing: 0.01em;
}
.h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.08;
letter-spacing: -0.015em;
}
.h3 {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: -0.01em;
}
.h4 {
font-family: var(--sans);
font-weight: 500;
font-size: 17px;
}
.lede { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.72; color: var(--text-muted); max-width: 62ch; }
.on-dark .lede, .lede.on-dark { color: rgba(246,242,235,0.58); }
/* ------- Layout ------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section.section { padding-top: var(--section-py); padding-bottom: var(--section-py); position: relative; }
.section.dark { background: var(--navy-deep); color: var(--white); }
.section.dark-deep { background: var(--navy-deep); color: var(--white); }
.section.light { background: var(--off-white); color: var(--text-dark); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: var(--white); }
.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .h2 { margin-bottom: 18px; }
/* ------- Buttons ------- */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 28px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 0;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
position: relative;
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-primary.on-light { background: var(--navy-deep); }
.btn-primary.on-light:hover { background: var(--navy); }
.btn-ghost {
color: var(--white);
border: 1px solid rgba(255,255,255,0.22);
background: transparent;
}
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }
.btn-link {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 2px;
border-bottom: 1px solid currentColor;
color: inherit;
}
.btn-link:hover { color: var(--blue-light); }
/* ------- Navigation ------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
padding: 22px 0;
background: transparent;
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(13,19,34,0.92);
-webkit-backdrop-filter: saturate(120%) blur(14px);
backdrop-filter: saturate(120%) blur(14px);
padding: 14px 0;
border-bottom-color: rgba(255,255,255,0.06);
}
.nav-inner { display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); flex: 0 0 auto; }
.brand.brand-hex { display: inline-flex; align-items: center; line-height: 0; gap: 0; }
.brand.brand-hex img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); }
.brand.brand-hex:hover img { transform: none; }
.nav.scrolled .brand.brand-hex img { height: 38px; }
.brand-wordmark { display: block; line-height: 0; }
.brand-wordmark img { height: 28px; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.nav .brand-wordmark img { height: 30px; }
.footer .brand-wordmark img { height: 36px; filter: brightness(0) invert(1); }
.city-pick { position: relative; margin-left: 4px; }
.city-pick-btn {
display: inline-flex; align-items: center; gap: 10px;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
color: rgba(255,255,255,0.72);
padding: 9px 14px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 0;
transition: border-color 0.2s ease, color 0.2s ease;
}
.city-pick-btn:hover { border-color: rgba(255,255,255,0.32); color: var(--white); }
.city-pick-btn .chev { transition: transform 0.2s ease; }
.city-pick.open .city-pick-btn .chev { transform: rotate(180deg); }
.city-menu {
position: absolute; top: calc(100% + 10px); left: 0;
min-width: 240px;
background: var(--white);
color: var(--text-dark);
border-radius: var(--r-md);
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.city-pick.open .city-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.city-menu-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.city-menu-item:hover,
.city-menu-item:focus-visible { background: var(--off-white); outline: none; }
.city-menu-item.active { background: var(--off-white); color: var(--navy); font-weight: 600; }
.city-menu-item.soon { color: var(--text-muted); cursor: not-allowed; }
.city-menu-item .tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); background: var(--off-white-2); color: var(--text-muted); }
.city-menu-item.active .tag { background: var(--navy); color: var(--white); }
/* Pushed to the right rather than centred: the city selector on the left
is wide enough that a centred set of links sits off-centre anyway. */
.nav-links { display: flex; gap: 28px; margin-left: auto; margin-right: 0; }
.nav-links a {
font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500;
position: relative; padding: 6px 0;
transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--white); }
.nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 1px; background: var(--gold);
}
.nav-intro-link {
color: var(--gold) !important;
border: 1px solid rgba(184,150,58,0.35);
padding: 5px 12px !important;
font-size: 11px !important;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: border-color 0.2s ease, color 0.2s ease !important;
}
.nav-intro-link:hover { border-color: var(--gold) !important; }
.drawer-intro-link { color: var(--gold) !important; }
.nav-cta {
display: flex; align-items: center; gap: 16px; flex: 0 0 auto;
margin-left: 28px; margin-right: auto;
}
.nav-write-link {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(184,150,58,0.85);
border-bottom: 1px solid rgba(184,150,58,0.28);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
text-decoration: none;
}
.nav-write-link:hover { color: var(--gold); border-color: rgba(184,150,58,0.55); }
.nav-burger {
display: none;
width: 40px; height: 40px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--r-sm);
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
}
.nav-burger span { width: 16px; height: 1.5px; background: var(--white); }
/* ------- Invitation signal ------- */
.invitation-signal {
font-size: 10px;
letter-spacing: 0.32em;
color: rgba(184,150,58,0.72);
text-transform: uppercase;
margin: 0 0 26px;
}
/* ------- Marquee ------- */
.marquee {
display: flex;
width: 100%;
overflow: hidden;
user-select: none;
position: relative;
z-index: 3;
}
.marquee-track {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 56px;
padding-right: 56px;
animation: marquee-scroll 55s linear infinite;
will-change: transform;
}
.marquee.fast .marquee-track { animation-duration: 40s; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee-item {
display: inline-flex;
align-items: center;
gap: 56px;
font-family: var(--display);
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--white);
}
.marquee-item .dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.2);
display: inline-block;
flex: 0 0 auto;
}
.marquee.meta .marquee-item {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.26em;
font-weight: 500;
color: rgba(246,242,235,0.65);
gap: 32px;
padding: 16px 0;
}
.marquee.meta .marquee-track { gap: 32px; padding-right: 32px; }
.marquee.meta .dot { width: 4px; height: 4px; }
.marquee-item .gold-item {
color: rgba(184,150,58,0.8);
letter-spacing: 0.34em;
}
.marquee-item .gold-dot {
background: rgba(184,150,58,0.45) !important;
}
@keyframes marquee-scroll {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation-duration: 180s; }
}
/* ------- Hero ------- */
.hero {
position: relative;
min-height: 100vh;
background: #000;
color: var(--white);
display: flex; flex-direction: column;
overflow: hidden;
padding-top: 110px;
padding-bottom: 0;
}
.hero-stage {
flex: 1;
display: flex;
align-items: center;
position: relative;
z-index: 3;
padding-bottom: 40px;
}
.hero-foot {
position: relative;
z-index: 3;
border-top: 1px solid rgba(255,255,255,0.07);
background: rgba(0,0,0,0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.65;
filter: brightness(0.6) saturate(0.8) contrast(1.05);
}
.hero-vignette {
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(0,0,0,0.82) 0%,
rgba(0,0,0,0.65) 30%,
rgba(0,0,0,0.30) 58%,
rgba(0,0,0,0.05) 78%,
rgba(0,0,0,0) 100%),
linear-gradient(180deg,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0.08) 22%,
rgba(0,0,0,0) 55%,
rgba(0,0,0,0.28) 85%,
rgba(0,0,0,0.78) 100%);
}
.hero .hex-bg { display: none; }
.hero-inner {
position: relative; z-index: 3; width: 100%;
max-width: var(--maxw); margin: 0 auto;
padding-left: var(--gutter); padding-right: var(--gutter);
}
.hero .eyebrow.on-dark { color: rgba(184,150,58,0.78); font-weight: 600; }
.hero-inner h1.h-display {
color: var(--white);
text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4);
-webkit-font-smoothing: antialiased;
}
.hero-body {
max-width: 620px; margin-top: 28px; font-size: 16px; line-height: 1.8;
color: rgba(255,255,255,0.82) !important;
text-shadow: 0 1px 10px rgba(0,0,0,0.55);
font-weight: 400;
}
.hero-body p + p { margin-top: 14px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 36px; }
.hero-inner .btn-ghost {
color: rgba(255,255,255,0.88);
border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.28);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero-inner .btn-ghost:hover {
background: rgba(255,255,255,0.92);
color: var(--navy-deep);
border-color: rgba(255,255,255,0.9);
}
/* Hero invite link */
.hero-invite-link {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(184,150,58,0.82);
border-bottom: 1px solid rgba(184,150,58,0.25);
padding-bottom: 2px;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-invite-link:hover { color: var(--gold); border-color: rgba(184,150,58,0.5); }
.hex-bg {
position: absolute; inset: 0; z-index: 1;
background-image:
radial-gradient(ellipse at top, rgba(28,43,74,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 90%, rgba(28,43,74,0.12) 0%, transparent 50%);
pointer-events: none;
}
.hex-bg::before {
content: "";
position: absolute; inset: 0;
opacity: 0.06;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 156px;
background-position: center;
mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
/* ------- Editorial Strip (replaces Stats Bar) ------- */
.editorial-strip {
background: var(--off-white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 18px 0;
}
.editorial-strip-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
row-gap: 8px;
}
.editorial-strip-inner .strip-item {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-muted);
margin-right: 20px;
}
.editorial-strip-inner .strip-sep {
width: 1px;
height: 10px;
background: var(--border);
margin-right: 20px;
flex-shrink: 0;
display: inline-block;
}
.editorial-strip-inner .strip-gold {
color: rgba(184,150,58,0.72);
}
/* ------- Countdown Strip ------- */
.countdown-strip {
background: var(--navy-deep);
color: var(--white);
padding: clamp(48px, 6vw, 80px) 0;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
.countdown-strip::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 15% 50%, rgba(28,43,74,0.3) 0%, transparent 55%),
radial-gradient(ellipse at 85% 50%, rgba(28,43,74,0.2) 0%, transparent 55%);
pointer-events: none;
}
.countdown-strip-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(32px, 5vw, 80px);
position: relative;
flex-wrap: wrap;
}
.countdown-strip-copy { flex: 0 1 auto; }
.countdown-strip-copy .h2 { color: var(--white); }
.cd-strip {
font-size: clamp(34px, 4.4vw, 64px);
gap: clamp(16px, 2.4vw, 32px);
align-items: baseline;
flex-wrap: wrap;
}
.cd-strip .seg { flex-direction: column; align-items: center; gap: 6px; }
.cd-strip .suf {
display: block;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: rgba(184,150,58,0.65);
margin-top: 2px;
}
.cd-strip .sep {
width: 1px;
height: clamp(40px, 4vw, 56px);
background: rgba(255,255,255,0.1);
align-self: center;
}
.cd-inline {
display: inline-flex;
align-items: baseline;
gap: 18px;
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 52px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--white);
font-variant-numeric: tabular-nums;
}
.cd-inline .seg { display: inline-flex; align-items: baseline; gap: 4px; }
.cd-inline .suf { font-family: var(--sans); font-size: 0.36em; letter-spacing: 0.12em; color: rgba(184,150,58,0.65); font-weight: 600; }
/* ------- About ------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.82; color: var(--text-muted); max-width: 56ch; }
.about-copy p strong { color: var(--text-dark); font-weight: 600; }
/* Centred variant — narrow column, used above a full-bleed gallery */
.about-copy--centered { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.about-copy--centered p { margin-left: auto; margin-right: auto; }
/* ------- About gallery — full-bleed horizontal scroller ------- */
.about-gallery { position: relative; width: 100%; margin-bottom: clamp(48px, 6vw, 80px); }
.gallery-track {
display: flex;
gap: 0.5cm;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
padding: 0 var(--gutter);
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 auto; width: clamp(240px, 26vw, 380px); margin: 0; }
.gallery-item-img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; }
.gallery-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
background: rgba(255,255,255,0.92);
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
transition: background 0.2s ease;
}
.gallery-arrow:hover { background: var(--white); }
.gallery-arrow-prev { left: clamp(12px, 2vw, 28px); }
.gallery-arrow-next { right: clamp(12px, 2vw, 28px); }
.gallery-arrow svg { display: block; }
@media (max-width: 640px) {
.gallery-arrow { display: none; }
}
/* Feature stack — editorial thin-rule list */
.feature-stack { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.feature-card {
background: transparent;
border: none;
border-radius: 0;
border-top: 1px solid var(--border);
padding: 20px 0;
display: grid;
grid-template-columns: 28px 1fr;
gap: 16px;
align-items: baseline;
position: relative;
transition: none;
}
.feature-card:hover { transform: none; box-shadow: none; }
.feature-card .num {
position: static;
font-family: var(--serif);
font-size: 11px;
font-weight: 400;
color: var(--gold);
letter-spacing: 0.06em;
}
.feature-card .h4 {
color: var(--text-dark);
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
grid-column: 2;
}
.feature-card p {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--text-muted);
grid-column: 2;
}
/* ------- Themes ------- */
.themes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.theme-card {
position: relative;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
border-right: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
padding: 32px 28px;
min-height: 220px;
overflow: hidden;
transition: background 0.25s ease;
}
.theme-card:nth-child(3n) { border-right: none; }
.theme-card:hover { background: rgba(255,255,255,0.025); }
.theme-card .num {
font-family: var(--serif);
font-size: 18px;
line-height: 1;
font-weight: 400;
color: rgba(184,150,58,0.5);
display: block;
margin-bottom: 16px;
}
.theme-card .h3 { margin-bottom: 10px; font-size: clamp(18px, 1.8vw, 22px); }
.theme-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.58); margin: 0; }
.theme-card .hex-mark {
position: absolute; right: -40px; bottom: -40px;
width: 160px; height: 160px;
opacity: 0.03;
pointer-events: none;
}
.attendee-block { margin-top: clamp(60px, 7vw, 100px); }
.attendee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
/* Role list — editorial italic prose (replaces pill tags) */
.role-list {
font-family: var(--serif);
font-size: 17px;
font-style: italic;
color: rgba(255,255,255,0.58);
line-height: 1.8;
max-width: 60ch;
margin: 20px 0 0;
}
/* Keep .role-tags and .role-tag as fallback if used elsewhere */
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.role-tag {
font-size: 11px;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 0;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
background: rgba(255,255,255,0.02);
}
/* ------- Speakers ------- */
.speakers-teaser {
background: var(--white);
border: 1px solid var(--border);
border-top: 2px solid var(--gold);
padding: clamp(56px, 7vw, 96px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.speakers-teaser .teaser-num {
font-family: var(--display);
font-size: clamp(80px, 11vw, 160px);
line-height: 1;
font-weight: 400;
color: var(--navy);
letter-spacing: -0.02em;
}
.speakers-teaser .teaser-num sup {
color: var(--navy-light);
font-size: 0.4em;
vertical-align: top;
margin-left: 6px;
}
.speakers-teaser .teaser-sub {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.speakers-teaser p { font-size: 16px; line-height: 1.78; color: var(--text-muted); margin: 0 0 28px; }
.speakers-teaser .h3 { margin-bottom: 16px; }
.speakers-teaser .btn-link { color: var(--navy); }
.speakers-teaser .btn-link:hover { color: var(--navy-light); border-bottom-color: var(--navy-light); }
/* ------- Speaker Cards ------- */
.speaker-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.speaker-card {
background: var(--navy-deep);
overflow: hidden;
display: flex;
flex-direction: column;
}
.speaker-card__photo {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center top;
display: block;
}
.speaker-card__body {
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.speaker-card__eyebrow {
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 16px;
}
.speaker-card__name {
font-family: var(--display);
font-size: clamp(24px, 2.8vw, 36px);
font-weight: 400;
line-height: 1.1;
color: var(--white);
margin: 0 0 20px;
letter-spacing: 0.01em;
}
.speaker-card__rule {
width: 40px;
height: 1px;
background: var(--gold);
border: none;
margin: 0 0 20px;
}
.speaker-card__title {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--white);
margin: 0 0 4px;
}
.speaker-card__org {
font-family: var(--sans);
font-size: 13px;
color: var(--blue-soft);
margin: 0 0 16px;
}
.speaker-card__bio {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
line-height: 1.7;
color: var(--blue-soft);
margin: 0 0 24px;
flex: 1;
}
.speaker-card__footer {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 16px;
}
.speaker-card__link {
display: inline-block;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
border-bottom: 1px solid rgba(184,150,58,0.4);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.speaker-card__link:hover { color: var(--white); border-bottom-color: var(--white); }
@media (max-width: 768px) {
.speaker-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.speaker-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ------- Agenda ------- */
.tabs {
display: inline-flex;
gap: 0;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 0;
margin-bottom: 48px;
flex-wrap: wrap;
}
.tab {
padding: 13px 24px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
border-radius: 0;
border-right: 1px solid rgba(255,255,255,0.12);
transition: background 0.2s ease, color 0.2s ease;
}
.tab:last-child { border-right: none; }
.tab.active { background: var(--navy); color: var(--white); }
.tab:hover:not(.active) { color: var(--white); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein 0.35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.agenda-row {
display: grid;
grid-template-columns: 100px 1fr 200px;
gap: 32px;
padding: 20px 22px;
border-radius: 0;
align-items: start;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.agenda-row:nth-child(odd) { background: rgba(255,255,255,0.015); }
.agenda-row.break { opacity: 0.45; }
.agenda-row .time { font-family: var(--serif); font-size: 20px; color: rgba(184,150,58,0.7); font-weight: 400; }
.agenda-row .title { color: var(--white); font-weight: 500; font-size: 16px; margin-bottom: 8px; line-height: 1.3; }
.agenda-row .format { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.58; margin-bottom: 12px; max-width: 56ch; }
.agenda-row .output {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 0.04em;
color: rgba(184,150,58,0.75);
padding: 5px 11px;
background: rgba(184,150,58,0.08);
border-radius: 0;
}
.agenda-row .spk-meta { font-size: 12px; color: rgba(255,255,255,0.55); text-align: right; letter-spacing: 0.04em; }
.agenda-row .spk-meta .badge {
display: inline-block;
padding: 5px 11px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
}
.dinner-summary {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-left: 2px solid var(--gold);
border-radius: 0;
padding: clamp(36px, 5vw, 64px);
}
.dinner-summary .h3 { color: var(--white); margin-bottom: 12px; }
.dinner-summary p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.7); max-width: 64ch; }
.dinner-summary .eyebrow.on-dark { color: var(--gold); }
/* ------- Sponsors ------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tier-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 0;
padding: 32px 28px;
position: relative;
overflow: hidden;
display: flex; flex-direction: column;
}
.tier-card.platinum {
background: var(--navy-deep); color: var(--white);
border-color: var(--navy-deep);
border-left: 3px solid var(--gold);
padding-left: 32px;
}
.tier-card.gold { border-top: 2px solid #B8963A; }
.tier-card.silver { border-top: 2px solid #9DA7B8; }
.tier-card.bronze { border-top: 2px solid #B97A4A; }
.tier-badge {
font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
margin-bottom: 16px; display: inline-block; padding: 5px 10px; border: 1px solid currentColor;
}
.tier-card.platinum .tier-badge { background: var(--gold); color: #1B1407; padding: 5px 12px; border: none; }
.tier-card.gold .tier-badge { color: #8A6B20; }
.tier-card.silver .tier-badge { color: #6C7589; }
.tier-card.bronze .tier-badge { color: #8A5A35; }
.tier-card .tier-name { font-family: var(--serif); font-size: 20px; margin-bottom: 6px; font-weight: 400; }
.tier-card .tier-price { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.tier-card.platinum .tier-price { color: rgba(255,255,255,0.55); }
.tier-card ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier-card li { font-size: 13px; line-height: 1.5; padding-left: 18px; position: relative; color: var(--text-muted); }
.tier-card.platinum li { color: rgba(255,255,255,0.68); }
.tier-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 1px; background: currentColor; opacity: 0.4; }
.sponsor-logos { margin-top: 0; display: flex; flex-direction: column; gap: 28px; }
.sponsor-row .label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.sponsor-row .label.platinum { color: var(--navy); }
.sponsor-row .label.gold { color: #8A6B20; }
.sponsor-row .label.silver { color: #6C7589; }
.sponsor-row .label.bronze { color: #8A5A35; }
.sponsor-row .slots { display: grid; gap: 14px; }
.sponsor-row.platinum .slots { grid-template-columns: 1fr; }
.sponsor-row.gold .slots { grid-template-columns: repeat(2, 1fr); }
.sponsor-row.silver .slots { grid-template-columns: repeat(3, 1fr); }
.sponsor-row.bronze .slots { grid-template-columns: repeat(4, 1fr); }
/* Partners section — public-facing logo grid (no tier labels shown) */
.sponsor-row.partner-primary .slots { grid-template-columns: repeat(4, 1fr); }
/* Founding / Strategic partner tiers — sized for up to 20 logos across both rows */
.sponsor-row.founding-partner .slots { grid-template-columns: repeat(4, 1fr); }
.sponsor-row.strategic-partner .slots { grid-template-columns: repeat(5, 1fr); }
.sponsor-row.founding-partner .label { color: var(--navy); }
.sponsor-row.strategic-partner .label { color: var(--text-muted); }
/* No box — logos placed directly, full colour */
.sponsor-row.founding-partner .logo-slot,
.sponsor-row.strategic-partner .logo-slot { border: none; background: none; height: auto; justify-content: flex-start; }
.sponsor-row.founding-partner .logo-slot img { max-height: 110px; max-width: 100%; filter: none; opacity: 1; }
.sponsor-row.strategic-partner .logo-slot img { max-height: 140px; max-width: 100%; filter: none; opacity: 1; }
.sponsor-row.founding-partner .logo-slot:hover img,
.sponsor-row.strategic-partner .logo-slot:hover img { filter: none; opacity: 1; }
.sponsor-row.session-partner .slots { grid-template-columns: repeat(5, 1fr); }
.sponsor-row.session-partner .label { color: var(--text-muted); }
.sponsor-row.session-partner .logo-slot { border: none; background: none; height: auto; justify-content: flex-start; }
.sponsor-row.session-partner .logo-slot img { max-height: 100px; max-width: 100%; filter: none; opacity: 1; }
.sponsor-row.session-partner .logo-slot:hover img { filter: none; opacity: 1; }
.logo-slot {
border: 1px solid var(--border);
border-radius: 0;
height: 100px;
display: flex; align-items: center; justify-content: center;
background: var(--white);
transition: border-color 0.2s ease;
}
.logo-slot img {
max-height: 48px;
max-width: 75%;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.65;
transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-slot:hover img { opacity: 1; filter: grayscale(0); }
.sponsor-row.platinum .logo-slot { height: 140px; font-size: 13px; }
.sponsor-row.bronze .logo-slot { height: 76px; }
/* Quiet partnership enquiry link */
.partners-enquiry {
margin-top: clamp(36px, 4vw, 52px);
font-size: 13px;
color: var(--text-muted);
letter-spacing: 0.01em;
}
.partners-enquiry a {
color: var(--navy);
border-bottom: 1px solid var(--border);
padding-bottom: 1px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.partners-enquiry a:hover { color: var(--gold); border-color: var(--gold); }
/* Legacy sponsor-cta (kept for potential internal use; fix contrast) */
.sponsor-cta {
background: var(--navy-deep);
color: var(--white);
padding: clamp(28px, 4vw, 44px) clamp(32px, 5vw, 56px);
border-radius: 0;
display: flex; align-items: center; justify-content: space-between; gap: 32px;
margin-top: clamp(48px, 5vw, 72px);
}
.sponsor-cta .h3 { color: var(--white); margin: 0 0 6px; }
.sponsor-cta p { margin: 0; color: rgba(255,255,255,0.80); font-size: 14px; max-width: 56ch; }
/* ------- Dinner ------- */
.dinner-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.dinner-text p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.7); }
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
width: 1px; background: rgba(255,255,255,0.12);
}
.timeline-item { position: relative; padding: 12px 0 12px 12px; }
.timeline-item::before {
content: ""; position: absolute; left: -28px; top: 18px;
width: 11px; height: 11px;
background: var(--gold);
border-radius: 50%;
opacity: 0.6;
}
.timeline-item .time { font-family: var(--serif); font-size: 17px; color: rgba(184,150,58,0.7); font-weight: 400; display: block; }
.timeline-item .title { font-size: 14px; color: var(--white); font-weight: 500; margin-top: 2px; display: block; }
.timeline-item .desc { font-size: 13px; color: rgba(255,255,255,0.52); margin-top: 4px; }
.dinner-spec {
margin: 32px 0 0; padding: 24px 0 0;
border-top: 1px solid rgba(184,150,58,0.14);
display: grid; gap: 14px;
}
.dinner-spec > div { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: baseline; }
.dinner-spec dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(184,150,58,0.55); font-weight: 600; }
.dinner-spec dd { margin: 0; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.55; }
/* ------- Venue ------- */
.venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.venue-card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: clamp(28px, 4vw, 44px); }
.venue-image, .venue-map {
background: var(--off-white);
border-radius: 0;
height: 360px; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
position: relative; overflow: hidden;
}
.venue-image::after, .venue-map::after {
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(27,45,74,0.03) 10px 11px);
}
.venue-image .lbl, .venue-map .lbl {
position: relative; display: inline-flex; align-items: center; gap: 8px;
font-family: monospace; font-size: 11px;
padding: 8px 14px; background: rgba(255,255,255,0.9);
border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-muted);
}
.placeholder {
border: 1px dashed var(--gold);
background: var(--gold-soft);
padding: 16px 20px; border-radius: 0;
color: var(--gold-text); font-style: italic; font-size: 13px; display: block; margin: 14px 0;
}
.placeholder strong { font-style: normal; color: var(--gold-text); }
/* ------- Tickets ------- */
.tickets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; }
.ticket-card {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
border-radius: 0; padding: 28px 24px; display: flex; flex-direction: column; position: relative;
}
.ticket-card.best { border-color: var(--gold); background: rgba(184,150,58,0.06); }
.ticket-card.best .best-badge {
position: absolute; top: -12px; left: 24px;
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
background: var(--gold); color: #1B1407;
padding: 5px 12px; border-radius: 0; font-weight: 700;
}
.ticket-card .t-name { font-size: 12px; color: rgba(184,150,58,0.75); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.ticket-card .t-price { font-family: var(--serif); font-size: 40px; font-weight: 400; color: var(--white); line-height: 1; }
.ticket-card .t-price .cur { font-size: 17px; color: rgba(184,150,58,0.7); vertical-align: top; margin-right: 4px; }
.ticket-card .t-meta { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 14px; line-height: 1.5; }
.ticket-card .t-cta { margin-top: auto; padding-top: 22px; }
.ticket-card .t-cta .btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 11px; }
.tickets-info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.info-card {
background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
border-radius: 0; padding: 28px 30px;
}
.info-card .h4 { color: var(--white); margin-bottom: 8px; }
.info-card p { color: rgba(255,255,255,0.62); font-size: 14px; margin: 0; line-height: 1.6; }
/* ------- Media & Press ------- */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.media-card { background: var(--white); border: 1px solid var(--border); border-radius: 0; padding: 36px 32px; }
.media-card .h3 { margin-bottom: 8px; }
.media-card p { color: var(--text-muted); margin: 0 0 22px; font-size: 14px; }
/* ------- About the Organiser ------- */
.organiser-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(56px, 7vw, 120px); align-items: start; }
.organiser-copy p { font-size: 16px; line-height: 1.82; color: var(--text-muted); margin: 0 0 22px; max-width: 58ch; }
.organiser-copy p strong { color: var(--text-dark); font-weight: 600; }
.organiser-aside {
background: var(--white);
border: 1px solid var(--border);
border-top: 2px solid var(--gold);
padding: clamp(36px, 4vw, 52px);
}
.organiser-aside .h3 { margin-bottom: 18px; }
.organiser-aside p { color: var(--text-muted); font-size: 14px; line-height: 1.72; margin: 0 0 18px; }
.organiser-aside .contact-row {
display: flex; flex-direction: column; gap: 14px;
margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);
}
.organiser-aside .contact-row a {
font-family: var(--display); font-size: 17px; letter-spacing: 0.04em;
color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 4px;
align-self: flex-start;
transition: color 0.2s ease, border-color 0.2s ease;
}
.organiser-aside .contact-row a:hover { color: var(--navy-light); border-color: var(--navy); }
.organiser-aside .contact-label { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
/* ------- Footer ------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,0.65); padding: 72px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(56px, 8vw, 120px); align-items: start; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-brand .footer-social { margin-top: 28px; }
.footer-brand p { font-size: 13px; line-height: 1.68; color: rgba(255,255,255,0.45); margin-top: 18px; max-width: 36ch; }
.footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 56px); }
.footer-nav h5 { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(184,150,58,0.65); margin: 0 0 14px; font-weight: 600; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,0.62); }
.footer-nav a:hover { color: var(--white); }
.footer-nav .footer-email a { color: rgba(255,255,255,0.8); }
.footer-nav .footer-email a:hover { color: var(--gold); }
.footer-nav .footer-email .em-label { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.65);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #1B1407; }
.footer-bot { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 28px; font-size: 12px; color: rgba(255,255,255,0.38); }
.footer-bot .links a { margin: 0; }
.footer-bot .links a + a { margin-left: 22px; }
.footer-bot .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
/* Inside a sentence the 22px gap between footer links reads as a mistake. */
.footer-credit a + a,
.footer-credit a { margin-left: 0; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--gold, #B8963A); }
/* ------- Reveal Animations ------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ------- Mobile Drawer ------- */
.drawer {
position: fixed; inset: 0; z-index: 60;
background: var(--navy-deep); color: var(--white);
padding: 24px var(--gutter);
transform: translateX(100%);
transition: transform 0.3s ease, visibility 0.3s ease;
display: flex; flex-direction: column;
pointer-events: none;
visibility: hidden;
}
.drawer.open { transform: translateX(0); pointer-events: auto; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.drawer-close { font-size: 24px; color: var(--white); padding: 8px; }
.drawer-links { display: flex; flex-direction: column; gap: 4px; }
.drawer-links a { font-family: var(--serif); font-size: 26px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--white); }
/* ------- Responsive ------- */
@media (max-width: 1080px) {
.nav-links { display: none; }
/* The text CTA is ~184px wide. On a 375px bar, alongside the logo and the
edition picker, it pushed the burger to x=434 — clean off the right edge,
where the nav clips it — leaving no way to open the drawer at all.
The drawer carries the same call to action, so hide it here. */
.nav-intro-link,
.nav-write-link { display: none; }
/* Never let the edition picker squeeze the burger out again. */
.nav-burger { flex: 0 0 auto; }
.city-pick { min-width: 0; }
.city-pick-btn { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.themes-grid { grid-template-columns: repeat(2, 1fr); }
.themes-grid .theme-card:nth-child(2n) { border-right: none; }
.themes-grid .theme-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.08); }
.tier-grid { grid-template-columns: repeat(2, 1fr); }
.tickets-grid { grid-template-columns: repeat(3, 1fr); }
.organiser-grid, .speakers-teaser { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
.nav-burger { display: flex; }
.city-pick { display: flex; }
.nav-cta .btn { padding: 8px 14px; font-size: 11px; }
.about-grid, .attendee-grid, .dinner-grid, .venue-grid, .media-grid, .tickets-info { grid-template-columns: 1fr; gap: 36px; }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.footer-nav { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.themes-grid { grid-template-columns: 1fr; }
.themes-grid .theme-card { border-right: none !important; }
.tier-grid, .tickets-grid { grid-template-columns: 1fr; }
.agenda-row { grid-template-columns: 72px 1fr; gap: 14px; }
.agenda-row .spk-meta { display: none; }
.sponsor-cta { flex-direction: column; align-items: flex-start; }
.sponsor-row.partner-primary .slots { grid-template-columns: repeat(2, 1fr); }
.footer-bot { flex-direction: column; align-items: flex-start; gap: 12px; }
.hero { padding-top: 110px; }
.hero-vignette {
background:
linear-gradient(180deg,
rgba(0,0,0,0.58) 0%,
rgba(0,0,0,0.28) 25%,
rgba(0,0,0,0.22) 55%,
rgba(0,0,0,0.55) 85%,
rgba(0,0,0,0.88) 100%);
}
.countdown-strip-inner { flex-direction: column; align-items: flex-start; }
.cd-strip .sep { display: none; }
.cd-strip { gap: 24px 20px; }
.dinner-spec > div { grid-template-columns: 1fr; gap: 4px; }
.editorial-strip-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.editorial-strip-inner .strip-sep { display: none; }
}
/* ------- Editorial Hero (UHNW direction) ------- */
.hero-editorial {
min-height: auto;
background: var(--navy-deep);
color: var(--white);
padding: clamp(140px, 14vw, 200px) 0 clamp(56px, 7vw, 96px);
display: block;
overflow: hidden;
}
.hero-editorial .hero-video,
.hero-editorial .hero-vignette,
.hero-editorial .hex-bg,
.hero-editorial .hero-foot { display: none; }
.hero-editorial .hero-stage {
flex: none;
display: block;
padding-bottom: 0;
background: transparent;
}
.hero-editorial .hero-inner {
max-width: 720px;
margin: 0;
padding-left: 0;
padding-right: 0;
}
.hero-editorial .invitation-signal { margin-bottom: 26px; }
.hero-editorial h1.h-display {
margin: 0 0 26px;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 5.2vw, 62px);
line-height: 1.08;
letter-spacing: -0.01em;
color: rgba(246,242,235,0.96);
text-shadow: none;
}
.hero-editorial .hero-body {
margin: 0 0 36px;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.78;
color: rgba(246,242,235,0.6) !important;
text-shadow: none;
max-width: 56ch;
font-weight: 400;
}
.hero-editorial .hero-ctas {
margin-top: 0;
display: flex;
align-items: center;
gap: 28px 36px;
flex-wrap: wrap;
}
.hero-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(246,242,235,0.7);
border-bottom: 1px solid rgba(246,242,235,0.2);
padding-bottom: 3px;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-link:hover { color: var(--white); border-color: rgba(246,242,235,0.55); }
.hero-link .arrow { transition: transform 0.2s ease; }
.hero-link:hover .arrow { transform: translateX(4px); }
.hero-link--gold {
color: rgba(184,150,58,0.82);
border-bottom-color: rgba(184,150,58,0.28);
}
.hero-link--gold:hover { color: var(--gold); border-color: rgba(184,150,58,0.6); }
.hero-detail-strip {
margin-top: clamp(48px, 6vw, 72px);
padding-top: 22px;
border-top: 1px solid rgba(246,242,235,0.08);
display: grid;
grid-template-columns: max-content 1px max-content 1px max-content;
column-gap: 18px;
row-gap: 10px;
align-items: center;
justify-content: start;
justify-items: start;
}
.hero-detail-row { display: contents; }
.hero-detail-row--meta > span:first-child,
.hero-detail-row--meta > .hero-sep {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(246,242,235,0.05);
}
.hero-detail-row--meta > span:last-child {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid rgba(246,242,235,0.05);
}
.hero-detail-strip > .hero-detail-row > span {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(246,242,235,0.4);
margin-right: 0;
}
.hero-detail-strip .hero-sep {
width: 1px;
height: 9px;
background: rgba(246,242,235,0.1);
margin-right: 0;
flex-shrink: 0;
display: inline-block;
padding: 0;
justify-self: center;
}
.hero-detail-strip .hero-gold { color: rgba(184,150,58,0.55); }
@media (max-width: 640px) {
.hero-detail-strip {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.hero-detail-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.hero-detail-row .hero-sep {
display: inline-block;
}
.hero-detail-row--meta {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(246,242,235,0.05);
}
.hero-detail-row--meta > span:first-child,
.hero-detail-row--meta > .hero-sep {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.hero-detail-row--meta > span:last-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
}
/* ------- Editorial Themes List (replaces 3-col card grid) ------- */
.themes-editorial {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: clamp(40px, 6vw, 88px);
align-items: start;
}
.themes-intro .eyebrow { color: var(--blue); }
.themes-intro .h2 {
margin: 12px 0 18px;
color: rgba(246,242,235,0.92);
}
.themes-intro .lede { font-size: 14px; color: rgba(246,242,235,0.5); }
.themes-list {
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid rgba(246,242,235,0.08);
}
.themes-list .theme-row {
border-top: 1px solid rgba(246,242,235,0.08);
padding: 18px 0;
display: grid;
grid-template-columns: 38px 1fr;
gap: 16px;
align-items: baseline;
}
.themes-list .theme-row .num {
font-family: var(--serif);
font-size: 18px;
font-weight: 400;
color: rgba(184,150,58,0.5);
letter-spacing: 0.04em;
}
.themes-list .theme-title {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: rgba(246,242,235,0.9);
margin: 0 0 6px;
letter-spacing: 0.01em;
line-height: 1.3;
}
.themes-list .theme-row p {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: rgba(246,242,235,0.46);
}
@media (max-width: 880px) {
.themes-editorial { grid-template-columns: 1fr; gap: 32px; }
}
/* ------- The Thirty-Three (dinner) ------- */
.thirty-three {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: clamp(48px, 7vw, 120px);
align-items: start;
padding-top: clamp(24px, 3vw, 48px);
border-top: 1px solid rgba(184,150,58,0.18);
}
.tt-mark {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.tt-mark .tt-roman {
font-family: var(--display);
font-weight: 400;
font-size: clamp(64px, 9vw, 120px);
line-height: 0.95;
letter-spacing: 0.04em;
color: var(--gold);
display: block;
}
.tt-mark .tt-rule {
width: 64px;
height: 1px;
background: rgba(184,150,58,0.55);
display: block;
}
.tt-mark .tt-label {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(184,150,58,0.78);
}
.tt-body .h2 {
color: var(--white);
font-family: var(--serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
.tt-body p {
margin: 22px 0 0;
font-size: 15.5px;
line-height: 1.78;
color: rgba(255,255,255,0.7);
max-width: 62ch;
}
.tt-body p + p { margin-top: 14px; }
.tt-body .dinner-spec {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid rgba(184,150,58,0.18);
}
.tt-body .dinner-spec > div { grid-template-columns: 130px 1fr; }
@media (max-width: 860px) {
.thirty-three { grid-template-columns: 1fr; gap: 32px; }
.tt-mark .tt-roman { font-size: 80px; }
}
/* ------- Hero detail row active/inactive (city switcher) ------- */
.hero-detail-row { transition: opacity 0.3s ease; }
.hero-detail-row.is-inactive { opacity: 0.38; }
.hero-detail-row.is-inactive .hero-sep { background: rgba(246,242,235,0.06); }
.hero-detail-row.is-active > span:not(.hero-sep) { color: rgba(246,242,235,0.78); }
/* ------- Why Attend grid ------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 40px; }
.why-card { padding: 28px; border: 1px solid rgba(13,19,34,0.08); border-radius: 0; }
.why-card .h4 { margin-bottom: 10px; }
.why-card p { font-size: 15px; line-height: 1.6; color: rgba(13,19,34,0.72); }
/* Three columns rather than three full-width rows: the same words in about a
third of the height, and no 900px of empty gutter beside every paragraph. */
.format-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: clamp(28px, 3vw, 40px);
}
.format-block {
padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 34px);
border-left: 1px solid var(--border);
}
.format-block:first-child {
border-left: 0;
padding-left: 0;
}
.format-block:last-child { padding-right: 0; }
.format-block .h4 {
color: var(--text-dark);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 14px;
}
.format-block p {
margin: 0;
font-size: 14.5px;
line-height: 1.72;
color: var(--text-muted);
max-width: 42ch;
}
/* Two across, with the third spanning underneath: three columns at this width
gives each paragraph about twenty characters a line. */
@media (max-width: 900px) {
.format-blocks { grid-template-columns: 1fr 1fr; }
.format-block:nth-child(3) {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid var(--border);
padding-left: 0;
}
}
@media (max-width: 640px) {
.format-blocks { grid-template-columns: 1fr; }
.format-block {
border-left: 0;
border-top: 1px solid var(--border);
padding: 22px 0;
}
.format-block:first-child { border-top: 0; padding-top: 18px; }
.format-block:nth-child(3) { padding-left: 0; }
}
/* ------- FAQ ------- */
.faq-list { max-width: 800px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.faq-q { cursor: pointer; font-size: 17px; font-weight: 500; color: var(--white); list-style: none; padding-right: 24px; position: relative; }
.faq-q::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 22px; line-height: 1; color: var(--gold); transition: transform 0.2s; }
details[open] .faq-q::after { content: '−'; }
.faq-q::-webkit-details-marker { display: none; }
.faq-a { margin-top: 12px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.75); }
.faq-a a { color: var(--gold); text-decoration: underline; }
/* ------- Organiser NAP ------- */
.organiser-nap { margin-top: 36px; }
.nap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.nap-grid div { display: flex; flex-direction: column; gap: 4px; }
.nap-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(13,19,34,0.5); }
.nap-grid dd { font-size: 15px; }
.nap-grid a { color: inherit; text-decoration: underline; }
/* ------- Email signup ------- */
.signup-block { text-align: center; max-width: 600px; margin: 0 auto; }
.signup-form { margin-top: 28px; }
.signup-field { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.signup-field input[type="email"] { flex: 1; min-width: 240px; padding: 14px 18px; border-radius: 0; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: var(--white); font-size: 15px; }
.signup-field input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.signup-field input[type="email"]:focus { outline: 2px solid var(--gold); border-color: transparent; }
.signup-privacy { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.5); }
.signup-success p { font-size: 17px; color: var(--gold); }
/* ------- Edition Colour System ------- */
/*
Each edition page adds a modifier class to the hero .
The gradient shifts the atmospheric temperature of the navy base —
barely perceptible as a colour, read as a mood.
All editions share the same gold texture overlay via ::before.
*/
/* ------- Fine grain — institutional material depth ------- */
/*
SVG feTurbulence noise tiled at 256px.
Renders as fine film grain at ~4% opacity — reads as paper/linen, not digital.
Uses ::after so it layers above the gradient but below hero content (z-index: 1 < content z-index).
*/
.hero-editorial::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.042;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 256px 256px;
background-repeat: repeat;
}
/* ------- Base atmospheric texture — all editions ------- */
.hero-editorial::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 80% 50% at 68% 0%, rgba(184,150,58,0.055) 0%, transparent 58%),
radial-gradient(ellipse 55% 45% at 8% 95%, rgba(0,0,0,0.38) 0%, transparent 65%);
}
/* Base gradient — replaces flat navy (fallback / default) */
.hero-editorial {
background: linear-gradient(
150deg,
#060c18 0%,
#0D1322 52%,
#111b30 100%
);
}
/* Palma de Mallorca — warm Mediterranean: amber-ochre undertone */
.hero-editorial.edition-palma {
background: linear-gradient(
150deg,
#0b0d09 0%,
#0e1216 35%,
#0D1322 62%,
#0e1428 100%
);
}
/* Luxembourg — cool institutional slate */
.hero-editorial.edition-luxembourg {
background: linear-gradient(
150deg,
#06091a 0%,
#0a1226 42%,
#0c1530 80%,
#08101e 100%
);
}
/* Merano — Alpine sage-grey: crisp, mineral */
.hero-editorial.edition-merano {
background: linear-gradient(
150deg,
#07100e 0%,
#0a1410 42%,
#0c1420 76%,
#091018 100%
);
}
/* Málaga — warm Andalusian terracotta */
.hero-editorial.edition-malaga {
background: linear-gradient(
150deg,
#150c06 0%,
#14100a 32%,
#101422 66%,
#0a0e1c 100%
);
}
/* Mexico City — deep volcanic warmth */
.hero-editorial.edition-mexico {
background: linear-gradient(
150deg,
#160d08 0%,
#13100b 30%,
#0f1220 66%,
#0a0c1a 100%
);
}
/* London — cool pewter, overcast grey-blue */
.hero-editorial.edition-london {
background: linear-gradient(
150deg,
#08090e 0%,
#0a1018 42%,
#0c1422 76%,
#090d18 100%
);
}
/* ------- The Setting + The Thirty-Three — immersive bg sections ------- */
@media (max-width: 768px) {
.setting-bg-img { object-position: center 40%; }
.tt-bg { object-position: 70% center; }
[data-screen-label="The Setting"] { padding: 80px 24px !important; min-height: 80vh !important; }
[data-screen-label="The Setting"] > div:last-child { padding: 80px 24px !important; }
[data-screen-label="07 Thirty-Three"] { padding: 80px 24px !important; }
.tt-details { flex-direction: column !important; align-items: center !important; gap: 32px !important; }
.tt-divider { display: none !important; }
}
/* ------- Print ------- */
@media print {
.nav, .drawer, .hex-bg, .footer-social { display: none !important; }
.section, .hero, .editorial-strip { padding: 24px !important; page-break-inside: avoid; }
body { color: #000; background: #fff; }
.section.dark, .editorial-strip, .hero, .countdown-strip { background: #fff !important; color: #000 !important; }
h1, h2, h3, h4 { color: #000 !important; }
}
/* ==========================================================
Ported from speakers.html
========================================================== */
/* =============================================
SPEAKERS PAGE — Additional Styles
============================================= */
/* ---- Page Hero ---- */
.speakers-hero {
background: var(--navy-deep);
padding: clamp(130px, 13vw, 190px) 0 clamp(48px, 6vw, 80px);
position: relative;
overflow: hidden;
}
.speakers-hero::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 55% at 72% -10%, rgba(184,150,58,0.06) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 5% 100%, rgba(0,0,0,0.42) 0%, transparent 65%);
}
.speakers-hero::after {
content: "";
position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: 0.038;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 256px 256px;
}
.speakers-hero .container { position: relative; z-index: 2; }
.speakers-hero-inner { max-width: 700px; }
.speakers-hero .invitation-signal { margin-bottom: 22px; color: rgba(184,150,58,0.72); font-size: 10px; letter-spacing: 0.32em; }
.speakers-hero h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 5.2vw, 62px);
line-height: 1.08;
letter-spacing: -0.01em;
color: rgba(246,242,235,0.96);
margin: 0 0 22px;
}
.speakers-hero p {
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.78;
color: rgba(246,242,235,0.58);
max-width: 54ch;
margin: 0 0 40px;
}
.speakers-hero-meta {
padding-top: 22px;
border-top: 1px solid rgba(246,242,235,0.08);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.speakers-hero-meta span {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(246,242,235,0.38);
}
.speakers-hero-meta .gold { color: rgba(184,150,58,0.6); }
.speakers-hero-meta .sep {
width: 1px; height: 9px;
background: rgba(246,242,235,0.1);
display: inline-block;
}
/* ---- Speakers Section ---- */
.speakers-page-section {
background: var(--white);
padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
}
/* ---- Result count ---- */
.speakers-result-bar {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.speakers-result-count {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.speakers-result-count em {
font-style: normal;
color: var(--navy);
}
/* ---- Speaker Grid (page version — portrait cards) ---- */
.speaker-page-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.speaker-page-card {
background: var(--white);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: background 0.22s ease;
cursor: default;
}
.speaker-page-card:hover { background: var(--off-white); }
.speaker-page-card__photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--off-white-2);
}
.speaker-page-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.5s ease;
}
.speaker-page-card:hover .speaker-page-card__photo {
transform: scale(1.03);
}
.speaker-page-card__photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #0D1322 0%, #1C2B4A 100%);
}
.speaker-page-card__photo-placeholder svg {
width: 56px;
height: 56px;
opacity: 0.12;
}
.speaker-page-card__body {
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
flex: 1;
border-top: 2px solid var(--gold);
}
.speaker-page-card__name {
font-family: var(--serif);
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
line-height: 1.2;
color: var(--navy-deep);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.speaker-page-card__title {
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
margin: 0 0 2px;
line-height: 1.4;
}
.speaker-page-card__org {
font-size: 12px;
color: var(--text-muted);
margin: 0 0 16px;
}
.speaker-page-card__bio {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 18px;
flex: 1;
}
.speaker-page-card__footer {
border-top: 1px solid var(--border);
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.speaker-page-card__linkedin {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--blue);
border-bottom: 1px solid rgba(107,127,160,0.28);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.speaker-page-card__linkedin:hover { color: var(--navy); border-color: var(--navy); }
/* Edition pill */
.edition-pill {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--text-muted);
background: var(--off-white-2);
padding: 4px 8px;
border: 1px solid var(--border);
}
/* ---- CTA Banner ---- */
.speakers-cta-banner {
background: var(--navy-deep);
padding: clamp(52px, 7vw, 88px) 0;
border-top: 1px solid rgba(255,255,255,0.04);
position: relative;
overflow: hidden;
}
.speakers-cta-banner::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(28,43,74,0.4) 0%, transparent 65%);
}
.speakers-cta-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(32px, 5vw, 80px);
flex-wrap: wrap;
}
.speakers-cta-copy .h2 { color: var(--white); margin-bottom: 12px; font-size: clamp(26px, 3vw, 38px); }
.speakers-cta-copy p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 52ch; margin: 0; line-height: 1.7; }
.speakers-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex-shrink: 0; }
/* ---- Responsive ---- */
@media (max-width: 1100px) {
.speaker-page-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.speaker-page-grid { grid-template-columns: repeat(2, 1fr); }
.speakers-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.speaker-page-grid { grid-template-columns: 1fr; }
}
/* ==========================================================
Ported from partners.html
========================================================== */
/* ---- Page Hero ---- */
.partners-hero {
background: var(--navy-deep);
padding: clamp(130px, 13vw, 190px) 0 clamp(48px, 6vw, 80px);
position: relative;
overflow: hidden;
}
.partners-hero::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 55% at 72% -10%, rgba(184,150,58,0.06) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 5% 100%, rgba(0,0,0,0.42) 0%, transparent 65%);
}
.partners-hero .container { position: relative; z-index: 2; }
.partners-hero-inner { max-width: 700px; }
.partners-hero .invitation-signal { color: rgba(184,150,58,0.72); font-size: 10px; letter-spacing: 0.32em; }
.partners-hero h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 5.2vw, 62px);
line-height: 1.08;
letter-spacing: -0.01em;
color: rgba(246,242,235,0.96);
margin: 0 0 22px;
}
.partners-hero p {
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.78;
color: rgba(246,242,235,0.58);
max-width: 54ch;
margin: 0 0 40px;
}
.partners-hero-meta {
padding-top: 22px;
border-top: 1px solid rgba(246,242,235,0.08);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.partners-hero-meta span {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(246,242,235,0.38);
}
.partners-hero-meta .gold { color: rgba(184,150,58,0.6); }
.partners-hero-meta .sep {
width: 1px; height: 9px;
background: rgba(246,242,235,0.1);
display: inline-block;
}
/* ---- Partners content ---- */
.partners-page-section {
background: var(--off-white);
padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
}
.partners-page-section .sponsor-logos {
margin-top: clamp(48px, 6vw, 80px);
}
.partners-page-section .sponsor-row {
margin-bottom: clamp(40px, 5vw, 64px);
}
/* ---- CTA Banner ---- */
.partners-cta-banner {
background: var(--navy-deep);
padding: clamp(52px, 7vw, 88px) 0;
border-top: 1px solid rgba(255,255,255,0.04);
position: relative;
overflow: hidden;
}
.partners-cta-banner::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(28,43,74,0.4) 0%, transparent 65%);
}
.partners-cta-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(32px, 5vw, 80px);
flex-wrap: wrap;
}
.partners-cta-copy .h2 { color: var(--white); margin-bottom: 12px; font-size: clamp(26px, 3vw, 38px); }
.partners-cta-copy p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 52ch; margin: 0; line-height: 1.7; }
.partners-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex-shrink: 0; }
@media (max-width: 760px) {
.partners-cta-inner { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================
Ported from pillars.html
========================================================== */
/* ========================================================
The Pillars — page-specific styles
======================================================== */
/* --- Hero --- */
.section.dark-deep.pillars-hero {
min-height: 80vh;
display: flex;
align-items: center;
padding-top: clamp(140px, 14vw, 200px);
padding-bottom: clamp(80px, 10vw, 128px);
text-align: center;
position: relative;
overflow: hidden;
background: linear-gradient(
150deg,
#060c18 0%,
#0D1322 52%,
#111b30 100%
);
}
/* Atmospheric gradient — gold warmth at top, shadow at base */
.section.dark-deep.pillars-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,150,58,0.055) 0%, transparent 58%),
radial-gradient(ellipse 55% 45% at 50% 100%, rgba(0,0,0,0.38) 0%, transparent 65%);
}
/* Fine grain — institutional paper texture */
.section.dark-deep.pillars-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.042;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 256px 256px;
background-repeat: repeat;
}
.pillars-hero .container {
position: relative;
z-index: 1;
}
.pillars-hero-inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.pillars-hero-inner .eyebrow {
color: rgba(184,150,58,0.78);
}
/* Headline — two-line h1 with decorative rule */
.pillars-headline {
display: flex;
flex-direction: column;
align-items: center;
margin: 16px 0 0;
}
.pillars-headline-main {
display: block;
color: rgba(246,242,235,0.96);
text-shadow: none;
}
.pillars-headline-rule {
display: block;
width: 40px;
height: 1px;
background: var(--gold);
margin: 20px auto;
opacity: 0.7;
}
/* "Plus Ultra" — Playfair Display italic, ~60% of h-display max */
.pillars-headline-sub {
display: block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(24px, 3.84vw, 53px);
line-height: 1.1;
letter-spacing: 0.005em;
color: rgba(246,242,235,0.72);
}
.pillars-hero-lede {
margin: 32px auto 36px;
max-width: 58ch;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.72;
color: rgba(246,242,235,0.58);
text-align: center;
}
.pillars-hero-inner .btn-ghost {
color: rgba(255,255,255,0.88);
border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.28);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.pillars-hero-inner .btn-ghost:hover {
background: rgba(255,255,255,0.92);
color: var(--navy-deep);
border-color: rgba(255,255,255,0.9);
}
/* --- Responsive --- */
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none; opacity: 1; transform: none; }
}
/* ==========================================================
Ported from legal.html
========================================================== */
body { background: var(--off-white); }
.legal-header {
background: var(--navy-deep);
color: var(--white);
padding: 140px 0 80px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.legal-header .back {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
color: var(--blue-light);
padding-bottom: 6px;
border-bottom: 1px solid var(--blue-light);
margin-bottom: 32px;
}
.legal-header .back:hover { color: var(--white); border-color: var(--white); }
.legal-header h1 {
font-family: var(--display);
font-size: clamp(48px, 6vw, 80px);
font-weight: 600;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--white);
text-transform: uppercase;
margin: 0;
}
.legal-header .meta {
margin-top: 24px;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.legal-main {
padding: clamp(64px, 7vw, 112px) 0 clamp(80px, 9vw, 140px);
}
.legal-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: clamp(40px, 5vw, 88px);
align-items: start;
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.legal-toc {
position: sticky;
top: 100px;
background: var(--white);
border: 1px solid var(--border);
padding: 28px 24px;
}
.legal-toc h2 {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 18px;
font-weight: 600;
}
.legal-toc ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
display: flex;
flex-direction: column;
gap: 4px;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
display: flex;
gap: 12px;
padding: 10px 0;
font-size: 14px;
color: var(--text-dark);
font-weight: 500;
border-bottom: 1px solid transparent;
transition: color 0.2s ease;
}
.legal-toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--display);
font-size: 12px;
color: var(--navy-light);
font-weight: 500;
letter-spacing: 0.06em;
width: 24px;
flex: 0 0 auto;
}
.legal-toc a:hover { color: var(--navy-light); }
.legal-toc a.active {
color: var(--navy);
border-bottom-color: var(--navy);
}
.legal-content { max-width: 760px; }
.legal-section { padding-bottom: clamp(56px, 6vw, 96px); }
.legal-section + .legal-section { padding-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--border); }
.legal-section h2.legal-h {
font-family: var(--display);
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
line-height: 1.1;
color: var(--navy);
letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0 0 24px;
scroll-margin-top: 100px;
}
.legal-section h3 {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy);
margin: 32px 0 12px;
}
.legal-section p {
font-size: 16px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 0 18px;
max-width: 64ch;
}
.legal-section p strong { color: var(--text-dark); font-weight: 600; }
.legal-section ul {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.legal-section li {
position: relative;
padding-left: 22px;
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
}
.legal-section li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 10px;
height: 1px;
background: var(--navy);
}
.legal-section a { color: var(--navy); border-bottom: 1px solid var(--navy); }
.legal-section a:hover { color: var(--navy-light); border-color: var(--navy-light); }
.legal-eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--navy-light);
font-weight: 600;
margin: 0 0 18px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.legal-eyebrow::before {
content: "";
width: 28px; height: 1px; background: var(--navy-light);
}
.legal-footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.7);
padding: 56px 0 32px;
}
.legal-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.legal-footer p { margin: 0; font-size: 13px; }
.legal-footer a { color: rgba(255,255,255,0.85); }
.legal-footer a:hover { color: var(--white); }
.legal-footer .links a { margin-left: 22px; font-size: 12.5px; }
@media (max-width: 900px) {
.legal-layout { grid-template-columns: 1fr; }
.legal-toc { position: static; }
.legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
}
@media (max-width: 600px) {
.legal-toc ol { grid-template-columns: 1fr; }
.legal-footer .container { flex-direction: column; align-items: flex-start; }
.legal-footer .links a { margin-left: 0; margin-right: 18px; }
}
/* ==========================================================
Rebuild additions
========================================================== */
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Session Partner tier */
.sponsor-row.session-partner .label { color: var(--text-muted); }
.sponsor-row.session-partner .logo-slot { border: none; background: none; height: auto; justify-content: flex-start; }
.sponsor-row.session-partner .logo-slot img { max-height: 100px; filter: none; opacity: 1; }
.sponsor-row.session-partner .logo-slot:hover img { filter: none; opacity: 1; }
/* A fixed column grid squeezes wide logos: a 6:1 logo in a 221px cell
letterboxes to ~29px tall regardless of max-height. Letting these rows
flow lets each logo take its natural width, so max-height actually
governs how large it renders. */
/* Applies to every tier, not an enumerated list: the admin can create new
tiers, and one added later must lay out correctly without a CSS change. */
.sponsor-row .slots {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(28px, 4vw, 56px);
grid-template-columns: none;
}
.sponsor-row .logo-slot {
width: auto;
max-width: 100%;
border: none;
background: none;
height: auto;
justify-content: flex-start;
}
/* Default logo size. Individual tiers override below. */
.sponsor-row .logo-slot img {
height: clamp(56px, 7vw, 100px);
width: auto;
max-width: 100%;
max-height: none;
filter: none;
opacity: 1;
}
.sponsor-row .logo-slot:hover img { filter: none; opacity: 1; }
.sponsor-row .label { color: var(--text-muted); }
.sponsor-row.founding-partner .label { color: var(--navy); }
.sponsor-row.founding-partner .logo-slot img {
height: clamp(60px, 8vw, 110px);
width: auto;
max-width: 100%;
max-height: none;
}
/* An explicit height, not max-height. With max-height the slot shrink-wraps
the image while the image sizes against the slot — a circular constraint
that settled at 300px and left wide logos far smaller than intended.
Fixing the height makes width follow from the aspect ratio.
The two clamps stay in an 80:100 ratio so the LMAX/Asensi letter match
holds at every viewport, not just on desktop. */
.sponsor-row.session-partner .logo-slot img {
height: clamp(56px, 7vw, 100px);
width: auto;
max-width: 100%;
max-height: none;
}
/* Optional per-logo size adjustments.
Logos differ in how much of their image the lettering actually fills, so
two logos at the same box height can look very different. These let one be
nudged without touching the tier.
logo-lmax is the original name for the smaller size, kept so existing data
keeps working; logo-smaller is the same thing, named for what it does. */
.sponsor-row .logo-slot.logo-lmax img,
.sponsor-row .logo-slot.logo-smaller img {
height: clamp(45px, 5.6vw, 80px);
max-height: none;
}
.sponsor-row .logo-slot.logo-larger img {
height: clamp(72px, 9vw, 130px);
max-height: none;
}
.sponsor-row .logo-slot.logo-largest img {
height: clamp(90px, 11vw, 165px);
max-height: none;
}
.sponsor-row.strategic-partner .logo-slot img {
height: clamp(70px, 9vw, 140px);
width: auto;
max-width: 100%;
max-height: none;
}
/* ---------- Invitation modal ---------- */
/* The Admin link, revealed by site.js only for a signed-in admin. Quieter
than the profile link beside it: it is a shortcut, not a call to action. */
.nav-admin-link {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
margin-right: 20px;
white-space: nowrap;
}
.nav-admin-link:hover { color: var(--gold-text); }
.invite-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.invite-modal[hidden] { display: none; }
.invite-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 10, 20, 0.78); backdrop-filter: blur(3px); }
.invite-modal__panel {
position: relative; z-index: 1;
width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
background: var(--navy-deep);
border: 1px solid rgba(184, 150, 58, 0.28);
padding: clamp(28px, 4vw, 44px);
color: #F6F3EC;
}
.invite-modal__close {
position: absolute; top: 14px; right: 18px;
font-size: 26px; line-height: 1; color: rgba(246, 243, 236, 0.55);
}
.invite-modal__close:hover { color: var(--gold); }
.invite-modal__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 34px); margin: 10px 0 14px; color: #F6F3EC; }
.invite-modal__lede { font-size: 14px; line-height: 1.7; color: rgba(246, 243, 236, 0.62); margin: 0 0 26px; }
.invite-field { margin-bottom: 16px; }
.invite-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .invite-row { grid-template-columns: 1fr; } }
.invite-modal label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(246, 243, 236, 0.72); margin-bottom: 7px; }
.invite-modal .req { color: var(--gold); }
.invite-modal .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(246, 243, 236, 0.38); }
.invite-modal input[type="text"],
.invite-modal input[type="email"],
.invite-modal input[type="tel"],
.invite-modal textarea {
width: 100%; padding: 11px 13px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(246, 243, 236, 0.16);
color: #F6F3EC; font-family: var(--sans); font-size: 15px;
}
.invite-modal input:focus, .invite-modal textarea:focus { border-color: var(--gold); outline: none; }
.invite-modal textarea { resize: vertical; }
.invite-consent { display: flex; gap: 11px; align-items: flex-start; margin: 20px 0 24px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; line-height: 1.6; color: rgba(246, 243, 236, 0.62); }
.invite-consent input { margin-top: 3px; flex-shrink: 0; }
.invite-consent a { color: var(--gold); text-decoration: underline; }
.invite-submit {
width: 100%; padding: 14px 20px;
background: var(--gold); color: var(--navy-deep);
font-family: var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
transition: opacity 0.2s ease;
}
.invite-submit:hover { opacity: 0.88; }
.invite-submit:disabled { opacity: 0.5; cursor: default; }
.invite-status { min-height: 20px; margin: 14px 0 0; font-size: 14px; color: var(--gold); text-align: center; }
.invite-status.is-error { color: #E4A0A0; }
/* Honeypot: off-screen rather than display:none, which some bots skip */
.invite-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ------- The 33: where we are going next -------
The words down the left, the places down the right, each photograph
feathering into the navy along a diagonal edge so the right-hand side reads
as one continuous strip.
That is the argument for it over the list this replaced: six lines of text
say "six dates"; a strip of six photographs says "one series, six places",
which is what The 33 is selling. The page with the detail is /next/, so
every row here is a way in rather than the end of the road. */
.upcoming {
position: relative;
overflow: hidden;
background: var(--navy-deep);
color: var(--white);
padding: clamp(80px, 12vh, 140px) 0 0;
}
/* The Earth's limb across the foot. A gradient rather than a photograph: it
is a lit curve and a horizon glow, and an image would be half a megabyte to
say the same thing on a page that already carries six. */
.upcoming::after {
content: "";
position: absolute;
left: -30%;
bottom: -70vw;
width: 150%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(
circle at 50% 50%,
#16233d 0%,
#101a2e 55%,
var(--navy-deep) 72%,
transparent 73%
);
box-shadow: 0 0 120px 10px rgba(120, 170, 235, 0.12);
pointer-events: none;
z-index: 0;
}
/* Not `.container`: the words keep the page's left margin, the photographs
run to the right edge of the window. */
.upcoming-spread {
position: relative;
z-index: 1;
padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.upcoming-head {
padding-right: var(--gutter);
margin: 0 0 clamp(36px, 6vh, 64px);
max-width: 46ch;
}
.upcoming .h2 {
color: var(--white);
margin: 0;
}
.upcoming-strip {
list-style: none;
margin: 0;
padding: 0;
}
.upcoming-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
align-items: center;
gap: 0 clamp(16px, 3vw, 48px);
/* Tall enough for a photograph to be a photograph rather than a band. */
min-height: clamp(190px, 20vw, 290px);
text-decoration: none;
color: inherit;
position: relative;
isolation: isolate;
}
.upcoming-row:focus-visible {
outline: 2px solid var(--gold);
outline-offset: -4px;
}
.upcoming-entry {
padding: clamp(20px, 2.4vw, 30px) 0;
position: relative;
z-index: 2;
}
/* One line, always. The place and the date belong to each other and a wrap
between them leaves the separator stranded at the end of a line, which
reads as a typo rather than a line break.
That makes the longest label set the size for all four rows. "The North
(Sweden / Finland) · February / March 2027" is fifty-odd tracked uppercase
characters, so the tracking comes in from .09em and the size follows the
column rather than the window -- the words keep the page's left margin
while the photographs run to the right edge, so the column grows at about
a fifth of the rate the viewport does. 23px is where it stops, which is
the size this line was drawn at before the places took their countries
on. */
.upcoming-where {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 0.42em;
margin: 0 0 10px;
font-family: var(--serif);
font-size: min(23px, calc(8.2px + 0.6vw));
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
color: var(--gold);
}
.upcoming-place { color: var(--gold); }
.upcoming-sep { color: rgba(184, 150, 58, 0.55); }
.upcoming-when { color: var(--gold); }
/* Below this the column is too narrow for the longest label to finish on one
line at any size worth reading -- around 1100px it would want twelve-pixel
type. So the date goes under the place, which is what the phone already
does, and all four rows do it together: two wrapping and two not is what
looked like a fault in the first place. */
@media (max-width: 1279px) {
.upcoming-where {
display: block;
white-space: normal;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.42;
}
.upcoming-when { display: block; }
.upcoming-sep { display: none; }
}
.upcoming-what {
margin: 0;
max-width: 42ch;
font-family: var(--serif);
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.6;
color: rgba(246, 242, 235, 0.88);
}
/* ---- the photographs
A single slanted ribbon down the right-hand side. Every edge of every
picture is diagonal — top, bottom and left — so consecutive pictures meet
on an angle instead of a horizontal line, which is what makes the stack
read as one continuous band. */
.upcoming-strip { position: relative; }
.upcoming-strip li { position: relative; }
.upcoming-strip li:nth-child(1) { z-index: 1; }
.upcoming-strip li:nth-child(2) { z-index: 2; }
.upcoming-strip li:nth-child(3) { z-index: 3; }
.upcoming-strip li:nth-child(4) { z-index: 4; }
.upcoming-strip li:nth-child(5) { z-index: 5; }
.upcoming-strip li:nth-child(6) { z-index: 6; }
.upcoming-row { overflow: visible; cursor: pointer; }
.upcoming-shot {
position: absolute;
cursor: pointer;
top: -16%;
bottom: -16%;
left: 0;
right: 0;
z-index: 0;
overflow: hidden;
/* the angled cut: top edge rises to the right, bottom edge follows it */
-webkit-clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
/* and a short feather on the left so the ribbon dissolves before the words */
-webkit-mask-image: linear-gradient(103deg, transparent 26%, rgba(0,0,0,0.6) 36%, #000 46%);
mask-image: linear-gradient(103deg, transparent 26%, rgba(0,0,0,0.6) 36%, #000 46%);
}
.upcoming-shot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.03);
filter: brightness(0.98) saturate(1.05) contrast(1.04);
transition: transform 0.9s ease, filter 0.6s ease;
}
/* only where the ribbon passes nearest the copy */
.upcoming-shot::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(103deg,
rgba(10, 15, 26, 0.45) 24%,
rgba(10, 15, 26, 0.10) 44%,
rgba(10, 15, 26, 0) 62%);
}
.upcoming-row:hover .upcoming-shot img { transform: scale(1.07); }
.upcoming-foot {
padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(72px, 10vh, 120px) 0;
}
.upcoming-note {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-size: clamp(18px, 2.2vw, 26px);
letter-spacing: 0.02em;
color: var(--white);
}
.upcoming-more { margin: 26px 0 0; }
@media (max-width: 900px) {
/* One column. A photograph beside three lines of text at this width is a
thumbnail beside a paragraph, which flatters neither, so the picture goes
behind the words instead. */
.upcoming { padding-bottom: clamp(56px, 9vh, 88px); }
.upcoming-spread { padding-left: 0; }
.upcoming-head,
.upcoming-foot { padding-left: var(--gutter); padding-right: var(--gutter); }
.upcoming-foot { padding-bottom: 0; }
.upcoming-strip { display: grid; gap: 14px; padding: 0 var(--gutter); }
.upcoming-row {
display: block;
position: relative;
min-height: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #0a0f1a;
}
.upcoming-shot {
position: absolute;
inset: 0;
z-index: 0;
/* No feather and no slant: at this size the picture is the card, and
either one across a small rectangle reads as a rendering fault. The
clip has to be reset as well as the mask -- left on, it cuts a navy
wedge out of the top-left and bottom-right of every card. */
-webkit-mask-image: none;
mask-image: none;
-webkit-clip-path: none;
clip-path: none;
}
/* Dark at the foot so the words hold against whatever the photograph does. */
.upcoming-shot::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(13, 19, 34, 0.25) 0%,
rgba(13, 19, 34, 0) 20%,
rgba(13, 19, 34, 0.6) 55%,
rgba(13, 19, 34, 0.95) 100%
);
}
.upcoming-entry::before { display: none; }
.upcoming-entry {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 0 22px 22px;
}
/* Stacked, and no separator. "THE NORTH · FEBRUARY / MARCH 2027" wraps at
this width and leaves the dot stranded at the end of a line, which reads
as a typo. Two lines say the same thing and always look deliberate. */
.upcoming-where {
display: block;
font-size: 15px;
line-height: 1.45;
}
.upcoming-when { display: block; }
.upcoming-sep { display: none; }
.upcoming-what { font-size: 15px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
/* The Earth would be a grey smear behind a column of photographs. */
.upcoming::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.upcoming-shot img { transition: none; }
.upcoming-row:hover .upcoming-shot img { transform: scale(1.02); }
}
/* ------- The 33, in full -------
Four cards, two up. The homepage carries the strip because it is a summary;
this page has a photograph of each place, and a photograph is the argument.
A card is a button: the editions have no pages of their own, and what
somebody looking at Lapland wants next is to put their name down. */
.the33-hero {
background: var(--navy-deep);
color: var(--white);
text-align: center;
padding-top: clamp(96px, 14vh, 150px);
padding-bottom: clamp(88px, 13vh, 140px);
overflow: hidden;
position: relative;
}
/* A light off to one side rather than a flat ground, so the squares below
read as the brightest thing on the page. */
.the33-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(70% 55% at 62% 38%, rgba(196, 164, 108, 0.16), transparent 62%),
linear-gradient(160deg, #1c2334 0%, #141b2b 45%, var(--navy-deep) 100%);
}
.the33-hero > * { position: relative; z-index: 1; }
/* Rules either side of the eyebrow. Only here: on a centred page they close
the line, and everywhere else the eyebrow sits against a left margin. */
.eyebrow--rule {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
white-space: nowrap;
color: var(--gold);
margin: 0 0 26px;
}
.eyebrow--rule::before,
.eyebrow--rule::after {
content: "";
width: 52px;
height: 1px;
background: rgba(184, 150, 58, 0.45);
}
.the33-display {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(28px, 4.4vw, 49px);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0;
color: var(--white);
}
/* One line per clause. The three of them are the proposition. */
.the33-display span { display: block; }
.the33-display em { font-style: italic; }
.the33-lede {
margin: 22px auto 0;
max-width: 58ch;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.7;
color: rgba(246, 242, 235, 0.66);
}
.the33-editions {
background: #111829;
color: var(--white);
border-top: 1px solid rgba(246, 242, 235, 0.1);
}
.the33-h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 3.7vw, 47px);
letter-spacing: -0.005em;
text-align: center;
margin: 0 0 18px;
color: var(--white);
}
.the33-standfirst {
text-align: center;
margin: 0 auto;
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.7;
color: rgba(246, 242, 235, 0.58);
}
.the33-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(18px, 2vw, 30px);
margin-top: clamp(44px, 7vh, 70px);
}
.the33-card {
position: relative;
/* A row on the homepage links straight to its card, and the nav is fixed:
without this the card arrives underneath it. 100px is what the legal
page's headings already use. */
scroll-margin-top: 100px;
/* Landscape, not square: these are photographs of places. */
aspect-ratio: 3 / 2;
overflow: hidden;
background: #0a0f1a;
/* So the scrim cannot escape the rounded corner of a neighbour. */
isolation: isolate;
cursor: pointer;
border: 1px solid rgba(237, 235, 230, 0.08);
transition: border-color 0.45s ease, transform 0.45s ease;
}
.the33-card:hover {
border-color: rgba(183, 154, 99, 0.45);
transform: translateY(-3px);
}
.the33-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform 0.8s ease;
}
.the33-card:hover img,
.the33-card:focus-visible img { transform: scale(1.06); }
.the33-card:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* Dark at the foot so the words hold against whatever the photograph does,
and a touch at the head so the cue does the same. */
.the33-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(13, 19, 34, 0.3) 0%,
rgba(13, 19, 34, 0) 16%,
rgba(13, 19, 34, 0.58) 52%,
rgba(13, 19, 34, 0.96) 100%
);
}
.the33-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 30px 30px;
}
.the33-when {
display: block;
margin-bottom: 10px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.the33-place {
margin: 0;
font-family: var(--serif);
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 400;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}
.the33-blurb {
margin: 14px 0 0;
max-width: 30ch;
font-size: 16px;
line-height: 1.68;
color: rgba(246, 242, 235, 0.86);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
/* What the card does, said only on hover: on every card at rest it would be
six identical labels competing with six place names. */
.the33-cue {
position: absolute;
top: 18px;
right: 18px;
z-index: 2;
padding: 7px 13px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--navy-deep);
background: var(--gold);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.the33-card:hover .the33-cue,
.the33-card:focus-visible .the33-cue {
opacity: 1;
transform: none;
}
.the33-closer {
margin: clamp(44px, 7vh, 70px) auto 0;
text-align: center;
font-family: var(--serif);
font-style: italic;
font-size: clamp(19px, 2vw, 22px);
color: var(--white);
opacity: 0.92;
}
.the33-credits {
margin: 52px auto 0;
font-size: 12px;
line-height: 1.7;
color: rgba(246, 242, 235, 0.32);
}
.the33-none {
text-align: center;
margin: 48px 0 0;
color: rgba(246, 242, 235, 0.58);
}
/* Only after a form post lands on #registered. No script involved, which is
the point: this is the acknowledgement for somebody who has none. */
.the33-thanks { display: none; }
.the33-thanks:target {
display: block;
background: var(--gold);
color: var(--navy-deep);
padding: 16px 0;
font-family: var(--sans);
font-size: 15px;
text-align: center;
}
.the33-thanks p { margin: 0; }
/* ------- The 33: registering interest -------
One dialog for all six editions, with the one you clicked already ticked.
The form is in the page and posts on its own, so this is a dialog on top of
something that already works rather than the only way in. */
.the33-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
background: rgba(7, 11, 20, 0.72);
backdrop-filter: blur(3px);
}
/* `hidden` on a flex container does nothing without this. */
.the33-overlay[hidden] { display: none; }
.the33-dialog {
position: relative;
width: 100%;
max-width: 560px;
margin: auto;
padding: clamp(28px, 4vw, 44px);
background: #141b2b;
color: var(--white);
border: 1px solid rgba(246, 242, 235, 0.12);
}
.the33-close {
position: absolute;
top: 10px;
right: 14px;
padding: 6px 10px;
font-size: 26px;
line-height: 1;
color: rgba(246, 242, 235, 0.6);
background: none;
border: 0;
cursor: pointer;
}
.the33-close:hover { color: var(--white); }
.the33-dialog h3 {
margin: 0 0 10px;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
color: var(--white);
}
.the33-dialog-lede {
margin: 0 0 26px;
font-size: 15px;
line-height: 1.7;
color: rgba(246, 242, 235, 0.62);
}
.the33-field { margin: 0 0 16px; }
.the33-field label {
display: block;
margin-bottom: 6px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(246, 242, 235, 0.55);
}
.the33-field input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-family: inherit;
font-size: 15px;
color: var(--white);
background: rgba(246, 242, 235, 0.05);
border: 1px solid rgba(246, 242, 235, 0.16);
border-radius: 2px;
}
.the33-field input:focus {
outline: none;
border-color: var(--gold);
background: rgba(246, 242, 235, 0.08);
}
.the33-picker {
margin: 26px 0 0;
padding: 0;
border: 0;
}
.the33-prompt {
padding: 0;
font-family: var(--sans);
font-size: 14px;
color: var(--white);
}
.the33-hint {
margin: 4px 0 14px;
font-size: 13px;
color: rgba(246, 242, 235, 0.45);
}
.the33-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.the33-chip {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
cursor: pointer;
border: 1px solid rgba(246, 242, 235, 0.16);
border-radius: 2px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.the33-chip:hover { border-color: rgba(246, 242, 235, 0.32); }
.the33-chip.is-on {
border-color: var(--gold);
background: rgba(184, 150, 58, 0.12);
}
/* The real checkbox stays in the page for the no-script form and for anybody
tabbing through; the square beside it is what is drawn. */
.the33-chip input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.the33-box {
flex: 0 0 auto;
width: 15px;
height: 15px;
border: 1px solid rgba(246, 242, 235, 0.4);
border-radius: 1px;
position: relative;
}
.the33-chip.is-on .the33-box {
border-color: var(--gold);
background: var(--gold);
}
.the33-chip.is-on .the33-box::after {
content: "";
position: absolute;
left: 4px;
top: 0;
width: 5px;
height: 10px;
border: solid var(--navy-deep);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.the33-chip input:focus-visible ~ .the33-box {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.the33-chip-text {
font-size: 14px;
line-height: 1.35;
color: var(--white);
}
.the33-chip-when {
display: block;
font-size: 12px;
color: rgba(246, 242, 235, 0.45);
}
.the33-submit {
width: 100%;
margin-top: 26px;
padding: 14px 20px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy-deep);
background: var(--gold);
border: 0;
border-radius: 2px;
cursor: pointer;
}
.the33-submit:hover { background: #c9ac74; }
.the33-submit:disabled { opacity: 0.6; cursor: default; }
.the33-err {
margin: 16px 0 0;
padding: 10px 13px;
font-size: 14px;
color: #ffb4a2;
border-left: 2px solid #a8432f;
background: rgba(168, 67, 47, 0.12);
}
.the33-err[hidden] { display: none; }
.the33-smallprint {
margin: 16px 0 0;
font-size: 12px;
line-height: 1.6;
color: rgba(246, 242, 235, 0.38);
}
.the33-done[hidden] { display: none; }
.the33-done p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: rgba(246, 242, 235, 0.72);
}
/* Off-screen rather than display:none: some bots skip hidden fields but
happily fill one they can compute a position for. */
.the33-trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 980px) {
.the33-cards { gap: 20px; }
}
@media (max-width: 640px) {
/* One column, and a little taller: a full-width 3:2 on a phone leaves the
words cramped against the foot of the picture. */
.the33-cards { grid-template-columns: 1fr; gap: 18px; }
.the33-card { aspect-ratio: 4 / 3; }
.the33-body { padding: 0 22px 22px; }
.the33-blurb { font-size: 15px; }
.the33-chips { grid-template-columns: 1fr; }
/* Always visible on a touch screen, where there is no hover to reveal it. */
.the33-cue { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.the33-card img,
.the33-cue { transition: none; }
.the33-card:hover img { transform: scale(1.02); }
}
/* ------- The hero accordion -------
Two panels, one per series: ninety-nine delegates over two days, and
thirty-three at one table the night before. A single headline could only
ever say one of them.
Kept close to the author's own rules rather than reformatted into this
file's usual expanded style — it is a tuned piece of motion design and the
timings, easings and breakpoints are the work. The only thing dropped on
the way in was a pair of `.reveal{opacity:1!important}` overrides, which
exist to stop the scroll animation hiding content in a saved static page
and would disable the animation everywhere here. */
/* ---------------- expanding hero accordion ---------------- */
.hero-acc{padding-top:0;min-height:100vh;background:#0D1322;overflow:hidden}
.acc{display:flex;height:100vh;width:100%}
.acc-panel{position:relative;overflow:hidden;cursor:pointer;flex:0 0 22%;
transition:flex-basis 1s cubic-bezier(.65,0,.2,1);isolation:isolate}
.acc-panel.is-open{flex-basis:78%;cursor:default}
.acc-panel.is-open .acc-content{cursor:default}
.acc-panel + .acc-panel{border-left:1px solid rgba(255,255,255,.12)}
.acc-bg{position:absolute;inset:0;background-size:cover;background-position:center;
filter:brightness(.34) saturate(.7);transform:scale(1.04);
transition:filter .9s ease,transform 1.2s cubic-bezier(.65,0,.2,1)}
.acc-panel.is-open .acc-bg{filter:brightness(.52) saturate(.85);transform:scale(1)}
.acc-panel:not(.is-open):hover .acc-bg{filter:brightness(.46) saturate(.8)}
.acc-veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(13,19,34,.70) 0%,rgba(13,19,34,.28) 40%,rgba(13,19,34,.92) 100%)}
/* timer line across the open panel */
.acc-progress{position:absolute;top:0;left:0;height:2px;width:0;z-index:4;
background:linear-gradient(90deg,rgba(184,150,58,.2),var(--gold,#B8963A))}
.acc-panel.is-open.ticking .acc-progress{width:100%;transition:width 10s linear}
/* collapsed rail */
.acc-rail{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:26px;padding:40px 0;
opacity:1;transition:opacity .45s ease .25s}
.acc-panel.is-open .acc-rail{opacity:0;transition-delay:0s;pointer-events:none}
.rail-num{font-family:"Cinzel",serif;font-size:clamp(46px,3.9vw,70px);line-height:1;
color:var(--gold,#B8963A);text-shadow:0 0 36px rgba(184,150,58,.3)}
.rail-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;letter-spacing:.3em;
text-transform:uppercase;color:rgba(255,255,255,.88);font-weight:600;white-space:nowrap}
.rail-dates{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.acc-panel:not(.is-open):hover .rail-name{color:#fff}
/* open content */
.acc-content{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
opacity:0;transition:opacity .5s ease;pointer-events:none}
.acc-panel.is-open .acc-content{opacity:1;transition-delay:.35s;pointer-events:auto}
.acc-inner{padding:0 clamp(32px,5vw,96px) clamp(64px,7vw,104px);min-width:560px;max-width:70ch}
.acc-eyebrow{font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#B8963A);margin:0 0 22px}
.acc-num{font-family:"Cinzel",serif;font-size:clamp(62px,6.6vw,104px);line-height:.95;margin:0 0 6px;
color:rgba(255,255,255,.28);letter-spacing:.02em}
.acc-title{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(40px,5vw,76px);
line-height:1.12;color:#fff;margin:0 0 20px;letter-spacing:-.01em}
.acc-text{font-size:21px;line-height:1.68;color:rgba(255,255,255,.8);margin:0 0 28px;max-width:44ch}
.acc-meta{font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 34px}
.acc-cta{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-size:14.5px;letter-spacing:.18em;
text-transform:uppercase;font-weight:600;color:var(--gold,#B8963A);
border-bottom:1px solid rgba(184,150,58,.45);padding-bottom:6px;transition:gap .3s ease}
.acc-panel.is-open:hover .acc-cta{gap:16px}
.acc-panel:focus-visible{outline:2px solid var(--gold,#B8963A);outline-offset:-5px}
.acc-cta:focus-visible{outline:2px solid var(--gold,#B8963A);outline-offset:6px}
@media (max-width:900px){
/* same sideways accordion as desktop, scaled down: the open panel takes
most of the width, the other stays as a narrow vertical rail */
.hero-acc{min-height:100vh;min-height:100svh}
.acc{flex-direction:row;height:100vh;height:100svh}
.acc-panel{flex:0 0 24%;transition:flex-basis .8s cubic-bezier(.65,0,.2,1)}
.acc-panel.is-open{flex-basis:76%}
.acc-panel + .acc-panel{border-left:1px solid rgba(255,255,255,.14)}
.acc-progress{top:0;bottom:auto}
/* rail stays vertical, just smaller */
.acc-rail{flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:90px 0 34px}
.rail-name,.rail-dates{writing-mode:vertical-rl;transform:rotate(180deg)}
.rail-num{font-size:30px;line-height:1}
.rail-name{font-size:11.5px;letter-spacing:.24em}
.rail-dates{font-size:10px;letter-spacing:.16em}
.acc-rail::after{content:none}
/* open panel: narrower column, so the type comes down a step */
.acc-content{align-items:flex-end}
/* Pinned to the width the panel has when it is open, not left to follow the
panel. The panel animates from 24% to 76% over .8s and the words fade in
a third of the way through, so a box that tracks the panel re-wraps on
every frame of that -- the paragraph visibly concertinas and the lines
under it jump. Fixed, the text is simply uncovered as the panel widens.
This is what min-width does for the desktop panel; the breakpoint had
turned it off without putting anything in its place. */
.acc-inner{width:76vw;min-width:76vw;max-width:76vw;padding:96px 20px 30px}
.acc-eyebrow{font-size:10.5px;letter-spacing:.16em;margin-bottom:14px}
.acc-num{font-size:40px;margin-bottom:2px}
.acc-title{font-size:30px;line-height:1.14;margin-bottom:12px}
.acc-text{font-size:15.5px;line-height:1.6;margin-bottom:16px}
.acc-meta{font-size:11.5px;letter-spacing:.1em;margin-bottom:18px}
.acc-next{margin:0 0 20px;font-size:10.5px;letter-spacing:.07em;line-height:1.7}
.acc-next span{display:block;margin:0 0 4px}
.acc-cta{font-size:12.5px;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){
.acc-panel,.acc-bg,.acc-content,.acc-rail{transition:none}
.acc-panel.is-open.ticking .acc-progress{transition:none;width:0}
}
.acc-next{
margin:0 0 32px;
font-size:12.5px;
letter-spacing:.11em;
text-transform:uppercase;
color:rgba(255,255,255,.44);
}
.acc-next span{
color:var(--gold,#B8963A);
margin-right:14px;
font-weight:600;
}
@media (max-width:900px){
.acc-next{margin:0 0 22px;font-size:11px;letter-spacing:.08em}
.acc-next span{display:block;margin:0 0 5px}
}