/*!
 * ELS — European Leptospirosis Society
 * Design system + homepage component CSS.
 *
 * Ported from the approved prototype (els-homepage-v6.html, CSS lines 10–409)
 * with the `els-` class prefix and the §1.4 label-colour fix from the
 * design guidelines (small mono labels: --g500 → --ink-2; --g500 stays
 * for borders / rules / decorative strokes only).
 *
 * Inner-page-only layout lives in assets/css/templates.css.
 */

/* ============ TOKENS ============ */
:root {
  color-scheme: light dark;
  --paper: #F3F6F8;
  --surface: #FFFFFF;
  --ink: #0E1C28;
  --ink-2: #4B5B69;
  --accent: #0E5A6C;
  --accent-2: #187A8E;
  --warm: #E8702A;
  --warm-tint: #FDE9DC;
  --g100: #E7ECF0;
  --g300: #D3DBE1;
  --g500: #8794A0;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(14, 28, 40, 0.08);
  --shadow: 0 24px 64px -24px rgba(14, 28, 40, 0.18);
  /* Display face. The token keeps its historical name (--serif); the face is
     now Alexandria, a geometric sans with no italic of its own. */
  --serif: 'Alexandria', 'IBM Plex Sans', -apple-system, sans-serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A151D; --surface: #10202B; --ink: #E6EEF3; --ink-2: #9DB0BE;
    --accent: #4DB6CB; --accent-2: #6FCADB; --warm: #F5904F; --warm-tint: #1B3040;
    --g100: #172A36; --g300: #29404E; --g500: #6E8493;
    --glass: rgba(16, 32, 43, 0.72); --glass-border: rgba(230, 238, 243, 0.08);
    --shadow: 0 24px 64px -24px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper: #0A151D; --surface: #10202B; --ink: #E6EEF3; --ink-2: #9DB0BE;
  --accent: #4DB6CB; --accent-2: #6FCADB; --warm: #F5904F; --warm-tint: #1B3040;
  --g100: #172A36; --g300: #29404E; --g500: #6E8493;
  --glass: rgba(16, 32, 43, 0.72); --glass-border: rgba(230, 238, 243, 0.08);
  --shadow: 0 24px 64px -24px rgba(0,0,0,.6);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ============ RESET / BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.55; font-size: 15px; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; height: auto; }
sup { font-size: .6em; line-height: 0; } /* ordinal suffixes (guidelines §2.3: .5–.6em) */

.els-container { max-width: 1320px; margin: 0 auto; padding: 0 48px; position: relative; }

/* ============ ACCESSIBILITY ============ */
/* Visible focus ring on every interactive element (guidelines §8). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Skip link — visually hidden until focused. */
.els-skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(-300%);
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 8px 32px -12px rgba(14, 28, 40, .3);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.els-skip-link:focus { transform: none; }

/* WP-standard screen-reader-only utility. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ============ EYEBROW / DISPLAY / META ============ */
.els-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
  display: inline-flex; align-items: center; gap: 12px;
}
.els-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.els-eyebrow--warm,  .els-eyebrow.els-warm  { color: var(--warm); }
.els-eyebrow--light, .els-eyebrow.els-light { color: rgba(230,238,243,.6); }

.els-display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02; letter-spacing: -.025em;
}
.els-display em { font-style: italic; color: var(--accent); font-weight: 500; }

/* Small mono meta line (cards, ticket head). §1.4: text colour is --ink-2. */
.els-m {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ============ DARK SECTION HELPER (guidelines §1.3) ============ */
/* Always dark regardless of theme. Body text on it: rgba(230,238,243,.7),
   labels .55, hairline text .5. */
.els-section-dark {
  background:
    radial-gradient(1200px 800px at 82% 0%, #123E4C 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 100%, #3B2417 0%, transparent 55%),
    #0B1A25;
  color: #E6EEF3;
}

/* ============ REVEAL ============ */
.els-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.els-reveal.is-in { opacity: 1; transform: none; }
.els-reveal[data-delay="1"] { transition-delay: .1s; }
.els-reveal[data-delay="2"] { transition-delay: .2s; }
.els-reveal[data-delay="3"] { transition-delay: .3s; }
.els-reveal[data-delay="4"] { transition-delay: .4s; }

/* ============ SCROLL PROGRESS ============ */
.els-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); width: 0; z-index: 100; transition: width .1s linear; }

/* ============ NAV ============ */
/* Full-width sticky header bar: edge to edge, its row spanning the whole
   viewport rather than the 1320px container. */
.els-nav-wrap { position: sticky; top: 0; z-index: 60; padding: 0; }
.admin-bar .els-nav-wrap { top: 32px; }
.els-nav-wrap > .els-container { max-width: none; padding: 0; }
.els-nav {
  /* Near-opaque so link contrast never depends on what scrolls beneath
     the bar (dark congress section, photo heroes). */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--g300);
  padding: 14px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.els-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.els-brand-text { font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.05; }
.els-brand-text small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--ink-2); text-transform: uppercase; margin-top: 3px; font-weight: 400; }
.els-nav nav ul { display: flex; gap: 4px; list-style: none; }
.els-nav nav a {
  text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500;
  padding: 9px 15px; border-radius: 999px; transition: background .2s, color .2s;
  display: inline-block; white-space: nowrap;
}
.els-nav nav a:hover { background: var(--g100); color: var(--accent); }
.els-nav nav .current-menu-item > a,
.els-nav nav .current_page_item > a,
.els-nav nav .current-menu-ancestor > a { background: var(--g100); color: var(--accent); }
.els-nav-right { display: flex; align-items: center; gap: 8px; }
/* Keep the bar's buttons in step with the larger nav links. */
.els-nav-right .els-btn { font-size: 14px; }
.els-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--g300);
  background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
  font-family: inherit; font-size: 14px; transition: background .2s;
}
.els-icon-btn:hover { background: var(--g100); }

/* Burger — hidden on desktop, shown ≤1080px (see media query). */
.els-nav-burger { display: none; }

/* Mobile nav panel — drops straight out of the bar (≤1080px only). */
.els-mobile-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  padding: 12px 24px 20px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.els-mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.els-mobile-nav li a {
  display: block; text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 500;
  padding: 12px 16px; border-radius: 14px;
  transition: background .2s, color .2s;
}
.els-mobile-nav li a:hover { background: var(--g100); color: var(--accent); }
.els-mobile-nav .current-menu-item > a,
.els-mobile-nav .current_page_item > a { background: var(--g100); color: var(--accent); }
.els-mobile-nav .els-btn { width: 100%; justify-content: center; margin-top: 10px; }
.els-mobile-nav-actions { display: flex; flex-direction: column; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--g300); }

/* ---- Dropdown submenus (desktop). Parent items carry a disclosure
   button (.els-sub-toggle, added in inc/navigation.php); the panel opens
   on hover and on the button (.is-open, set by main.js). ---- */
.els-nav nav li { position: relative; display: flex; align-items: center; }
.els-nav nav .menu-item-has-children > a { padding-right: 6px; }
.els-sub-toggle {
  width: 24px; height: 28px; margin-left: -2px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: color .2s, background .2s;
}
.els-sub-toggle svg { transition: transform .2s; }
.els-sub-toggle:hover { color: var(--accent); background: var(--g100); }
.els-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.els-nav nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 80;
  min-width: 240px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--g300); border-radius: 16px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}
/* Hover bridge across the gap between the item and its panel. */
.els-nav nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.els-nav nav li:hover > .sub-menu,
.els-nav nav li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s, transform .18s, visibility 0s;
}
.els-nav nav .sub-menu li { width: 100%; }
.els-nav nav .sub-menu a {
  display: block; flex: 1; border-radius: 10px; padding: 10px 14px;
  font-size: 14.5px; white-space: normal;
}
/* A parent item and its chevron share one pill (hover and current state),
   instead of the pill ending before the chevron. */
.els-nav nav .els-nav-menu > .menu-item-has-children { border-radius: 999px; padding-right: 6px; transition: background .2s; }
.els-nav nav .els-nav-menu > .menu-item-has-children:hover,
.els-nav nav .els-nav-menu > .menu-item-has-children.is-open,
.els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-item,
.els-nav nav .els-nav-menu > .menu-item-has-children.current_page_item,
.els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-ancestor { background: var(--g100); }
.els-nav nav .els-nav-menu > .menu-item-has-children > a,
.els-nav nav .els-nav-menu > .menu-item-has-children > a:hover,
.els-nav nav .els-nav-menu > .menu-item-has-children > .els-sub-toggle:hover { background: transparent; }
.els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-item > .els-sub-toggle,
.els-nav nav .els-nav-menu > .menu-item-has-children.current_page_item > .els-sub-toggle,
.els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-ancestor > .els-sub-toggle { color: var(--accent); }
/* Third level flies out to the side. */
.els-nav nav .sub-menu .sub-menu { top: -9px; left: calc(100% + 8px); }
.els-nav nav .sub-menu .sub-menu::before { top: 0; bottom: 0; left: -12px; width: 12px; height: auto; right: auto; }
.els-nav nav .sub-menu .els-sub-toggle { margin-right: 4px; }
.els-nav nav .sub-menu .els-sub-toggle svg { transform: rotate(-90deg); }
/* Last top-level items open towards the left so panels stay on screen. */
.els-nav nav .els-nav-menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }

/* ---- Mobile panel: submenus are an accordion. ---- */
.els-mobile-nav li.menu-item-has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.els-mobile-nav .els-sub-toggle { width: 44px; height: 44px; border-radius: 14px; }
.els-mobile-nav .sub-menu { display: none; grid-column: 1 / -1; padding: 2px 0 6px 14px; margin-left: 16px; border-left: 1px solid var(--g300); }
.els-mobile-nav li.is-open > .sub-menu { display: flex; }
.els-mobile-nav .sub-menu a { font-size: 14.5px; padding: 10px 14px; }
.els-mobile-nav .current-menu-ancestor > a { color: var(--accent); }

/* ---- Congress mini-site: strip with the way back to the society site. ---- */
.els-site-strip {
  background: var(--ink); color: var(--paper);
  padding: 0 48px; height: 34px; display: flex; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.els-site-strip-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; opacity: .92; transition: opacity .2s; }
.els-site-strip-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.els-site-strip-sub { opacity: .6; letter-spacing: .08em; }
.els-site-strip-sub::before { content: "·"; margin-right: 10px; }
.els-nav-wrap--congress .els-nav nav a { padding: 9px 12px; font-size: 14.5px; }

/* ============ BUTTONS ============ */
.els-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 13.5px; border-radius: 999px; transition: all .25s cubic-bezier(.2,.7,.2,1); white-space: nowrap; }
.els-btn-sm { padding: 9px 18px; }
.els-btn-md { padding: 14px 26px; }
.els-btn-lg { padding: 17px 32px; font-size: 14.5px; }
.els-btn-ink { background: var(--ink); color: var(--paper); }
.els-btn-ink:hover { background: var(--accent); transform: translateY(-1px); }
.els-btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px rgba(14,90,108,.45); }
.els-btn-accent:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(14,90,108,.5); }
.els-btn-outline { border: 1px solid var(--g300); color: var(--ink); background: var(--glass); backdrop-filter: blur(8px); }
.els-btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }
.els-btn-light { background: var(--paper); color: var(--ink); }
.els-btn-light:hover { background: var(--warm); transform: translateY(-2px); }
.els-btn-ghost-light { color: var(--paper); border: 1px solid rgba(230,238,243,.25); }
.els-btn-ghost-light:hover { border-color: var(--warm); color: var(--warm); }
.els-btn .els-arrow { transition: transform .25s; }
.els-btn:hover .els-arrow { transform: translateX(3px); }
/* On always-dark surfaces (§1.3) the on-dark button variants keep fixed
   colours in both themes — they must not invert with the tokens. */
.els-section-dark .els-btn-light,
.els-congress .els-btn-light,
.els-tile.els-dark .els-btn-light,
.els-price .els-btn-light { background: #F3F6F8; color: #0E1C28; }
.els-section-dark .els-btn-light:hover,
.els-congress .els-btn-light:hover,
.els-tile.els-dark .els-btn-light:hover,
.els-price .els-btn-light:hover { background: var(--warm); }
.els-section-dark .els-btn-ghost-light,
.els-congress .els-btn-ghost-light,
.els-tile.els-dark .els-btn-ghost-light,
.els-price .els-btn-ghost-light { color: #E6EEF3; }
.els-section-dark .els-btn-ghost-light:hover,
.els-congress .els-btn-ghost-light:hover,
.els-tile.els-dark .els-btn-ghost-light:hover,
.els-price .els-btn-ghost-light:hover { color: var(--warm); }

/* ============ HERO ============ */
.els-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 80px 0 100px;
  overflow: hidden;
}
.els-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  /* rgba fallbacks first — Safari < 16.2 has no color-mix() */
  background:
    radial-gradient(900px 700px at 78% 30%, rgba(14,90,108,.16), transparent 60%),
    radial-gradient(700px 600px at 90% 80%, rgba(232,112,42,.18), transparent 60%),
    radial-gradient(600px 500px at 10% 90%, rgba(232,112,42,.10), transparent 60%);
  background:
    radial-gradient(900px 700px at 78% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 600px at 90% 80%, color-mix(in srgb, var(--warm) 18%, transparent), transparent 60%),
    radial-gradient(600px 500px at 10% 90%, color-mix(in srgb, var(--warm) 10%, transparent), transparent 60%);
  filter: blur(8px);
  animation: els-mesh-move 24s ease-in-out infinite alternate;
}
@keyframes els-mesh-move { to { transform: translate(-3%, 2%) scale(1.04); } }
.els-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.els-hero-content .els-eyebrow { margin-bottom: 28px; }
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(60px, 7.6vw, 90px);
  line-height: .94; letter-spacing: -.035em; margin-bottom: 30px;
}
h1 em { font-style: italic; font-weight: 500; background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, var(--warm)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.els-hero-lead { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink-2); max-width: 520px; margin-bottom: 40px; }
.els-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Hero visual */
.els-hero-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin-left: auto; }
.els-hero-visual > svg { width: 100%; height: 100%; overflow: visible; position: absolute; inset: 0; }
.els-orbit { animation: els-orbit 60s linear infinite; transform-origin: 300px 300px; }
.els-orbit-r { animation: els-orbit 90s linear infinite reverse; transform-origin: 300px 300px; }
@keyframes els-orbit { to { transform: rotate(360deg); } }

/* 3D spirochete render — sits above the rings, drifts gently.
   The entrance fade belongs to .els-hero-visual's .els-reveal; this
   layer only handles placement and the float. */
.els-hero-spiro {
  position: absolute; top: 50%; left: 50%;
  width: 88%; max-width: 560px;
  transform: translate(-50%, -50%);
  z-index: 3; pointer-events: none;
}
.els-hero-spiro img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 46px rgba(14, 28, 40, .26));
  animation: els-hero-spiro-float 9s ease-in-out infinite;
}
:root[data-theme="dark"] .els-hero-spiro img { filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-hero-spiro img { filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55)); }
}
@keyframes els-hero-spiro-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}
.els-breathe { animation: els-breathe 6s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes els-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.els-particle { animation: els-twinkle 4s ease-in-out infinite; }
.els-particle:nth-child(2n) { animation-delay: -1.3s; }
.els-particle:nth-child(3n) { animation-delay: -2.6s; animation-duration: 5s; }
@keyframes els-twinkle { 0%,100% { opacity: .15; } 50% { opacity: .8; } }

.els-glass-card {
  position: absolute;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 16px 20px; box-shadow: var(--shadow);
  animation: els-float-y 7s ease-in-out infinite;
}
@keyframes els-float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.els-glass-card .els-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.els-glass-card .els-v { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.els-glass-card .els-v em { font-style: italic; color: var(--accent); }
.els-glass-card .els-s { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.els-gc-1 { top: 6%; left: -8%; animation-delay: 0s; }
.els-gc-2 { bottom: 14%; right: -4%; animation-delay: -2.5s; }
.els-gc-3 { bottom: 36%; left: -4%; animation-delay: -5s; }
.els-live { display: inline-flex; align-items: center; gap: 8px; }
.els-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 0 rgba(232,112,42,.6); box-shadow: 0 0 0 0 color-mix(in srgb, var(--warm) 60%, transparent); animation: els-ping 1.8s ease-out infinite; }
@keyframes els-ping { to { box-shadow: 0 0 0 10px transparent; } }

/* ============ TICKER ============ */
.els-ticker { border-top: 1px solid var(--g300); border-bottom: 1px solid var(--g300); background: var(--surface); overflow: hidden; padding: 16px 0; }
.els-ticker-track { display: flex; gap: 0; width: max-content; animation: els-ticker 40s linear infinite; }
.els-ticker:hover .els-ticker-track { animation-play-state: paused; }
@keyframes els-ticker { to { transform: translateX(-50%); } }
.els-ticker-item { display: inline-flex; align-items: center; gap: 24px; padding: 0 32px; font-family: var(--serif); font-size: 18px; white-space: nowrap; color: var(--ink); }
.els-ticker-item em { font-style: italic; color: var(--accent); }
.els-ticker-item .els-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); }
.els-ticker-item .els-m { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ============ CONGRESS ============ */
.els-congress {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 800px at 82% 0%, #123E4C 0%, transparent 55%), radial-gradient(900px 600px at 0% 100%, #3B2417 0%, transparent 55%), #0B1A25;
  /* §1.3: dark sections keep fixed text colours in both themes. */
  color: #E6EEF3; padding: 130px 0 0;
}
:root[data-theme="dark"] .els-congress { background: radial-gradient(1200px 800px at 82% 0%, #123E4C 0%, transparent 55%), radial-gradient(900px 600px at 0% 100%, #2E1C12 0%, transparent 55%), #06111A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-congress { background: radial-gradient(1200px 800px at 82% 0%, #123E4C 0%, transparent 55%), radial-gradient(900px 600px at 0% 100%, #2E1C12 0%, transparent 55%), #06111A; }
}

/* Congress background photograph (§5.2: imagery sits behind content,
   never competes with it) + the gradient overlay that carries contrast.
   Swap assets/img/congress-bg*.webp per congress edition. */
.els-congress-photo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url('../img/congress-bg.webp') center / cover no-repeat;
  opacity: 1;
  /* Darkened with a filter rather than an alpha wash: the pastel artwork
     keeps its colour relationships instead of turning to grey mud. */
  filter: brightness(.5) saturate(1.15) contrast(1.06);
}
/* The overlay carries all the contrast: near-opaque over the copy on the
   left, thinner on the right so the artwork stays readable as an image,
   and darker at the edges so the section blends into its neighbours. */
.els-congress-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,22,31,.9) 0%, rgba(9,22,31,.72) 40%, rgba(9,22,31,.34) 74%, rgba(9,22,31,.42) 100%),
    linear-gradient(180deg, rgba(9,22,31,.55) 0%, rgba(9,22,31,.12) 34%, rgba(9,22,31,.4) 76%, rgba(9,22,31,.88) 100%);
}
:root[data-theme="dark"] .els-congress-photo { filter: brightness(.4) saturate(1.1) contrast(1.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-congress-photo { filter: brightness(.4) saturate(1.1) contrast(1.06); }
}
@media (max-width: 900px) {
  .els-congress-photo { background-image: url('../img/congress-bg-sm.webp'); }
}
.els-congress-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; position: relative; z-index: 3; padding-bottom: 130px; }
.els-congress h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 6.4vw, 92px); line-height: .96; letter-spacing: -.03em; margin: 26px 0 22px; }
.els-congress h2 em { font-style: italic; font-weight: 500; color: var(--warm); }
.els-congress-desc { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: rgba(230,238,243,.7); max-width: 520px; margin-bottom: 40px; }
.els-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.els-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(230,238,243,.06); border: 1px solid rgba(230,238,243,.12);
  padding: 12px 18px; border-radius: 999px; backdrop-filter: blur(8px);
  font-size: 14px;
}
.els-pill .els-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(230,238,243,.5); }
.els-pill .els-v { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.els-pill svg { width: 16px; height: 16px; color: var(--warm); }

.els-ticket {
  background: rgba(230,238,243,.05); border: 1px solid rgba(230,238,243,.12);
  border-radius: 24px; padding: 36px; backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
}
.els-ticket::before { content: ''; position: absolute; inset: -1px; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(245,144,79,.55), transparent 40%, transparent 60%, rgba(77,182,203,.45)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.els-ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.els-ticket-head .els-m { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(230,238,243,.55); }
.els-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.els-cd--no-sec { grid-template-columns: repeat(3, 1fr); }
/* Days alone: one wide cell, the number set large. */
.els-cd--days { grid-template-columns: 1fr; }
.els-cd--days .els-cd-cell { padding: 34px 8px 26px; }
.els-cd--days .els-cd-cell .els-n { font-size: clamp(72px, 8vw, 108px); }
.els-cd--days .els-cd-cell .els-l { font-size: 11px; margin-top: 14px; }
.els-cd-cell { text-align: center; padding: 22px 8px 18px; border-radius: 14px; background: rgba(230,238,243,.04); border: 1px solid rgba(230,238,243,.06); }
.els-cd-cell .els-n { font-family: var(--serif); font-weight: 500; font-size: 52px; line-height: 1; color: var(--warm); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.els-cd-cell .els-l { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(230,238,243,.5); margin-top: 10px; }
.els-ticket-foot { margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(230,238,243,.15); display: flex; gap: 12px; flex-wrap: wrap; }

/* Amsterdam etching — NOT included by default any more (the congress
   section uses a photograph). Kept with template-parts/illustration-amsterdam.php
   so a future edition can swap the photo back for line art. */
.els-ams-bg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  z-index: 1; pointer-events: none; opacity: .13;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
.els-ams-bg svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max(100%, 1500px); height: auto; display: block; }
:root[data-theme="dark"] .els-ams-bg { opacity: .11; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-ams-bg { opacity: .11; }
}

/* ============ REGISTER YOUR INTEREST (front page) ============ */
/* Same Contact Form 7 form as the congress site's page, in a card. */
.els-interest { padding: 120px 0; background: var(--surface); border-bottom: 1px solid var(--g300); position: relative; overflow: hidden; scroll-margin-top: 70px; }
.els-interest .els-mesh-2 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 600px at 0% 0%, rgba(232,112,42,.12), transparent 60%); background: radial-gradient(800px 600px at 0% 0%, color-mix(in srgb, var(--warm) 12%, transparent), transparent 60%); filter: blur(10px); }
.els-interest-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; position: relative; z-index: 2; }
.els-interest h2 { margin: 24px 0 22px; }
.els-interest .els-lead { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); margin-bottom: 26px; max-width: 520px; }
.els-interest-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; }
.els-interest-meta::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); }
.els-interest-card { background: var(--paper); border: 1px solid var(--g300); border-radius: 24px; padding: 40px; box-shadow: var(--shadow); }
/* Name / surname and affiliation / country share a row. */
.els-interest-card .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.els-interest-card .wpcf7-form > * { grid-column: 1 / -1; margin: 0; }
.els-interest-card .wpcf7-form > p:nth-of-type(1),
.els-interest-card .wpcf7-form > p:nth-of-type(2),
.els-interest-card .wpcf7-form > p:nth-of-type(4),
.els-interest-card .wpcf7-form > p:nth-of-type(5) { grid-column: span 1; }
.els-interest-card .wpcf7-form label { display: block; }
@media (max-width: 1080px) {
  .els-interest { padding: 80px 0; }
  .els-interest-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .els-interest-card { padding: 24px; }
  .els-interest-card .wpcf7-form > p:nth-of-type(n) { grid-column: 1 / -1; }
}

/* ============ WHO / BENTO ============ */
.els-who { padding: 140px 0; position: relative; }
.els-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(140px, auto); gap: 18px; margin-top: 56px; }
.els-tile {
  background: var(--surface); border: 1px solid var(--g300); border-radius: 20px;
  padding: 34px; position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.els-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--g300)); }
.els-t-1 { grid-column: span 7; grid-row: span 2; }
.els-t-2 { grid-column: span 5; grid-row: span 1; }
.els-t-3 { grid-column: span 5; grid-row: span 1; }
.els-t-4 { grid-column: span 4; }
.els-t-5 { grid-column: span 4; }
.els-t-6 { grid-column: span 4; }
.els-tile .els-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; display: block; }
.els-tile h3 { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 10px; }
.els-tile p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.els-tile .els-big { font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.els-tile .els-big em { font-style: italic; color: var(--accent); }
.els-tile.els-dark { background: #0E1C28; color: #F3F6F8; border-color: transparent; } /* always dark — fixed colours in both themes (§1.3) */
.els-tile.els-dark .els-k { color: rgba(230,238,243,.5); }
.els-tile.els-dark p { color: rgba(230,238,243,.7); }
.els-tile.els-warm { background: linear-gradient(135deg, var(--warm-tint), var(--surface)); }
.els-tile.els-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.els-tile.els-accent .els-k { color: rgba(255,255,255,.6); }
.els-tile.els-accent p { color: rgba(255,255,255,.8); }
.els-tile .els-quote { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); }
.els-chip { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--g300); background: var(--surface); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.els-chip:first-child { border-color: var(--accent); color: var(--accent); }
.els-t-1 .els-inner { position: relative; z-index: 2; max-width: 520px; }

/* ============ OBJECTIVES ============ */
.els-objectives { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--g300); border-bottom: 1px solid var(--g300); position: relative; overflow: hidden; }
.els-objectives .els-mesh-2 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 600px at 100% 0%, rgba(232,112,42,.14), transparent 60%); background: radial-gradient(800px 600px at 100% 0%, color-mix(in srgb, var(--warm) 14%, transparent), transparent 60%); filter: blur(10px); }
.els-obj-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; position: relative; z-index: 2; }
.els-obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
.els-obj {
  background: var(--paper); border: 1px solid var(--g300); border-radius: 20px; padding: 32px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  position: relative; overflow: hidden;
}
.els-obj::after { content: ''; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0%, rgba(14,90,108,.10), transparent 60%); background: radial-gradient(400px 200px at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; }
.els-obj:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.els-obj:hover::after { opacity: 1; }
.els-obj-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 26px; position: relative; z-index: 2; }
.els-obj-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--warm-tint), var(--g100)); background: linear-gradient(135deg, var(--warm-tint), color-mix(in srgb, var(--accent) 12%, var(--surface))); color: var(--accent); }
.els-obj-icon svg { width: 26px; height: 26px; }
.els-obj-num { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-2); }
.els-obj h3 { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; margin-bottom: 10px; letter-spacing: -.01em; position: relative; z-index: 2; }
.els-obj p { font-size: 14px; line-height: 1.6; color: var(--ink-2); position: relative; z-index: 2; }

/* ============ EVENTS ============ */
.els-events { padding: 130px 0; }
.els-events-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
.els-events-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.els-ev {
  /* Dark card base is fixed (§1.3) — so its text colour is fixed too. */
  position: relative; border-radius: 22px; overflow: hidden; text-decoration: none; color: #E6EEF3;
  min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--g300); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  --photo-opacity: .16; background: var(--ev-base, #0B1A25);
}
.els-ev:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* Photo layer — cover, barely visible; --photo set per card from the featured image
   (els_photo_style()); no photo → base colour only. */
.els-ev-photo {
  position: absolute; inset: 0;
  background-image: var(--photo, none); background-size: cover; background-position: center;
  opacity: var(--photo-opacity); filter: saturate(.75) contrast(1.05);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.35) 100%);
}
.els-ev:hover .els-ev-photo { transform: scale(1.05); opacity: calc(var(--photo-opacity) * 1.6); }
.els-ev-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11,26,37,.88)); }
.els-ev-body { position: relative; z-index: 2; padding: 30px; }
.els-ev-year { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; color: var(--warm); margin-bottom: 10px; }
.els-ev h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 10px; }
.els-ev .els-m { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(230,238,243,.6); }
.els-ev-badge { position: absolute; top: 20px; left: 20px; z-index: 3; background: var(--warm); color: #fff; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.els-ev.els-ev-light { color: var(--ink); --ev-base: var(--surface); --photo-opacity: .14; }
.els-ev.els-ev-light .els-ev-overlay { background: linear-gradient(180deg, transparent 30%, rgba(255,255,255,.94)); }
:root[data-theme="dark"] .els-ev.els-ev-light .els-ev-overlay { background: linear-gradient(180deg, transparent 30%, rgba(16,32,43,.94)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-ev.els-ev-light .els-ev-overlay { background: linear-gradient(180deg, transparent 30%, rgba(16,32,43,.94)); }
}
.els-ev.els-ev-light .els-ev-year { color: var(--accent); }
.els-ev.els-ev-light .els-m { color: var(--ink-2); }

/* ============ RESOURCES + MEMBERSHIP ============ */
.els-join { padding: 130px 0; background: var(--surface); border-top: 1px solid var(--g300); position: relative; overflow: hidden; }
.els-join .els-mesh-3 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 500px at 0% 100%, rgba(14,90,108,.12), transparent 60%); background: radial-gradient(700px 500px at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); filter: blur(10px); }
/* Both columns run the full height of the row so the card finishes level
   with the resource list instead of floating in the middle. */
.els-join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; position: relative; z-index: 2; }
.els-join h2 { margin: 24px 0 22px; }
.els-join .els-lead { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); margin-bottom: 30px; }
.els-res-list { display: flex; flex-direction: column; gap: 10px; }
.els-res {
  display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink);
  padding: 16px 20px; border-radius: 16px; border: 1px solid var(--g300); background: var(--paper);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.els-res:hover { transform: translateX(6px); border-color: var(--accent); box-shadow: var(--shadow); }
.els-res-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--warm-tint); color: var(--accent); flex-shrink: 0; }
.els-res-ic svg { width: 20px; height: 20px; }
.els-res b { font-family: var(--serif); font-size: 18px; font-weight: 500; display: block; }
.els-res span { font-size: 13px; color: var(--ink-2); }
.els-res .els-arr { margin-left: auto; color: var(--ink-2); font-family: var(--serif); font-size: 22px; }

.els-price {
  /* Membership price card is a dark section (§1.3) — fixed colours in both themes. */
  background: #0E1C28; color: #F3F6F8; border-radius: 26px; padding: 44px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.els-price::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 400px at 100% 0%, rgba(14,90,108,.45), transparent 60%); pointer-events: none; }
.els-price > * { position: relative; z-index: 2; }
.els-price .els-k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(230,238,243,.5); margin-bottom: 20px; display: block; }
/* The fee rows absorb any spare height, so the divider stays centred and
   the button stays anchored to the bottom of the card. */
.els-prow { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(230,238,243,.12); flex: 1 1 auto; min-height: 0; }
.els-prow:last-of-type { border-bottom: none; }
.els-prow .els-n { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.els-prow .els-n small { display: block; font-family: var(--sans); font-size: 12.5px; color: rgba(230,238,243,.55); font-weight: 400; margin-top: 4px; }
.els-prow .els-a { font-family: var(--serif); font-size: 40px; font-weight: 500; color: var(--warm); letter-spacing: -.02em; line-height: 1; }
.els-prow .els-a small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(230,238,243,.5); margin-left: 4px; }
.els-price .els-btn { width: 100%; justify-content: center; margin-top: 26px; }
.els-price-spiro { position: absolute; right: -60px; bottom: -40px; width: 320px; opacity: .1; }

/* ============ META MODIFIERS (after components so ties resolve to the modifier) ============ */
.els-m--warm, .els-m.els-m--warm { color: var(--warm); }

/* ============ FOOTER ============ */
footer.els-footer { padding: 90px 0 40px; background: var(--surface); border-top: 1px solid var(--g300); }
/* Edge to edge like the header bar: the row spans the viewport, not the 1320px container. */
footer.els-footer > .els-container { max-width: none; }
.els-foot-cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 70px; margin-bottom: 60px; border-bottom: 1px solid var(--g300); }
.els-foot-cta h2 { max-width: 620px; }
.els-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 50px; margin-bottom: 60px; }
.els-logo-full { display: block; height: auto; max-width: 100%; }
.els-foot-brand p { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 320px; margin-top: 18px; }
.els-foot-col h4,
.els-foot-col .els-foot-col-h { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; font-weight: 500; }
.els-foot-col ul { list-style: none; }
.els-foot-col li { margin-bottom: 11px; font-size: 14px; }
.els-foot-col a { color: var(--ink); text-decoration: none; transition: color .2s; }
.els-foot-col a:hover { color: var(--accent); }
.els-foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--g300); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-2); flex-wrap: wrap; gap: 20px; }
.els-foot-social { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.els-foot-bottom a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.els-foot-bottom a:hover { color: var(--accent); }
/* Agency credit sits hard right, after the congress line. */
.els-foot-credit { margin-left: auto; }
.els-foot-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ FORMS (Contact Form 7 + theme forms) ============ */
.els-form label,
.wpcf7 form label {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.els-form p,
.wpcf7 form p { margin: 0 0 18px; }
.els-form p:last-child,
.wpcf7 form p:last-child { margin-bottom: 0; }
.els-form .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }

.els-form input[type="text"],
.els-form input[type="email"],
.els-form input[type="url"],
.els-form input[type="tel"],
.els-form input[type="number"],
.els-form input[type="date"],
.els-form input[type="datetime-local"],
.els-form input[type="search"],
.els-form input[type="password"],
.els-form textarea,
.els-form select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="search"],
.wpcf7 input[type="password"],
.wpcf7 textarea,
.wpcf7 select {
  display: block; width: 100%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--g300); border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.4;
  transition: border-color .2s, background .2s;
}
.els-form input:focus,
.els-form textarea:focus,
.els-form select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: var(--accent);
}
.els-form ::placeholder,
.wpcf7 ::placeholder { color: var(--ink-2); opacity: .7; }
.els-form textarea,
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.els-form input[type="file"],
.wpcf7 input[type="file"] { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); }

/* Consent / acceptance checkbox */
.els-form input[type="checkbox"],
.els-form input[type="radio"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin: 0 10px 0 0; vertical-align: -3px;
}
.els-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 4px 0 0; }
.els-form .wpcf7-acceptance label,
.wpcf7 .wpcf7-acceptance label {
  display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2);
}
.els-form .wpcf7-acceptance input[type="checkbox"],
.wpcf7 .wpcf7-acceptance input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; }

/* Submit — mirrors .els-btn els-btn-md els-btn-accent */
.els-form input[type="submit"],
.els-form button[type="submit"],
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 13.5px;
  border-radius: 999px; padding: 14px 26px;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(14,90,108,.45);
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}
.els-form input[type="submit"]:hover,
.els-form button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background: var(--accent-2); transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(14,90,108,.5);
}
.els-form input[type="submit"]:disabled,
.wpcf7 input[type="submit"]:disabled {
  opacity: .6; cursor: default; transform: none;
}

/* Validation + response (tokens only; ink on --warm-tint keeps AA contrast) */
.wpcf7 .wpcf7-not-valid { border-color: var(--warm); }
.wpcf7 .wpcf7-not-valid-tip {
  display: block; margin-top: 8px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: var(--warm-tint); border-radius: 8px;
}
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0; padding: 14px 18px;
  border: 1px solid var(--g300); border-radius: 12px;
  font-size: 13.5px; color: var(--ink);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--accent); color: var(--accent);
  background: var(--g100);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--warm); color: var(--ink); background: var(--warm-tint);
}
.wpcf7 .wpcf7-spinner { background-color: var(--accent-2); }

/* ============ COOKIE CONSENT ============ */
.els-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 24px 24px;
  pointer-events: none;
}
.els-cookie[hidden] { display: none; }
.els-cookie-inner {
  pointer-events: auto;
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  /* Entrance: the banner slides up once JS decides to show it. */
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.els-cookie.is-in .els-cookie-inner { opacity: 1; transform: none; }
.els-cookie-title {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: -.01em; margin-bottom: 5px;
}
.els-cookie-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.els-cookie-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.els-cookie-text a { color: var(--accent); }
.els-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Footer trigger that reopens the banner — a button that reads as the
   surrounding mono meta text. */
.els-foot-cookie {
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  background: none; border: 0; padding: 0; margin-left: 14px;
  color: var(--ink-2); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.els-foot-cookie:hover { color: var(--accent); }
/* In the footer's Legal list it reads as one more link. */
.els-foot-col .els-foot-cookie { margin: 0; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.els-foot-col .els-foot-cookie:hover { color: var(--accent); }

@media (max-width: 640px) {
  .els-cookie { padding: 0 16px 16px; }
  .els-cookie-inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .els-cookie-actions .els-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============ SAVE THE DATE / ADD TO CALENDAR ============ */
/* "Add to calendar": a <details> disclosure styled as a button, with the
   calendar choices in a small panel (inc/calendar.php). */
.els-atc { position: relative; z-index: 5; display: inline-block; }
.els-atc > summary { list-style: none; cursor: pointer; user-select: none; }
.els-atc > summary::-webkit-details-marker { display: none; }
.els-atc > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.els-atc[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.els-atc-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 260px; margin: 0; padding: 8px; list-style: none;
  background: var(--surface); border: 1px solid var(--g300); border-radius: 16px;
  box-shadow: var(--shadow);
}
/* The dark congress sections clip overflow and the button sits near their
   bottom edge, so there the panel opens upwards. */
.els-congress .els-atc-menu,
.els-congress-hero .els-atc-menu { top: auto; bottom: calc(100% + 8px); }
.els-atc-menu a {
  display: block; padding: 11px 14px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background .2s, color .2s;
}
.els-atc-menu a:hover { background: var(--g100); color: var(--accent); }

/* Front hero announcement: label + dates + add-to-calendar in one pill. */
.els-std {
  position: relative; z-index: 5;
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px; padding: 7px 7px 7px 20px;
  background: var(--surface); border: 1px solid var(--g300); border-radius: 999px;
  box-shadow: 0 14px 36px -18px rgba(14, 28, 40, .25);
}
.els-std-text { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--ink); }
.els-std-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm);
  /* Darkened for AA contrast at 11px on white; lighter on dark surfaces. */
  color: color-mix(in srgb, var(--warm) 72%, var(--ink));
  font-weight: 500; display: inline-flex; align-items: center; gap: 8px;
}
.els-std-k::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 22%, transparent);
}
.els-std-v { font-size: 15px; font-weight: 500; }
.els-std-text:hover .els-std-v { color: var(--accent); }
@media (max-width: 640px) {
  .els-std { border-radius: 20px; padding: 14px 16px; gap: 12px; }
  .els-std-text { flex-direction: column; gap: 6px; }
}

/* ============ MEDIA QUERIES ============ */
@media (max-width: 1080px) {
  .els-container { padding: 0 24px; }
  .els-nav nav { display: none; }
  .els-nav-burger { display: grid; }
  .els-mobile-nav { display: block; }
  .els-mobile-nav[hidden] { display: none; }
  .els-mobile-nav nav { display: block; }
  .els-hero { min-height: auto; padding: 70px 0 70px; }
  .els-nav { padding: 12px 24px; }
  .els-hero-grid, .els-congress-grid, .els-join-grid { grid-template-columns: 1fr; gap: 50px; }
  .els-hero-visual { max-width: 480px; margin: 0 auto; }
  .els-congress-grid { padding-bottom: 80px; }
  .els-bento { grid-template-columns: 1fr 1fr; }
  .els-t-1, .els-t-2, .els-t-3, .els-t-4, .els-t-5, .els-t-6 { grid-column: span 2; grid-row: auto; }
  .els-t-4, .els-t-5, .els-t-6 { grid-column: span 1; }
  .els-obj-grid { grid-template-columns: 1fr; }
  .els-events-grid { grid-template-columns: 1fr; }
  .els-ev { min-height: 320px; }
  .els-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .els-foot-cta, .els-obj-head, .els-events-head { flex-direction: column; align-items: start; }
  .els-who, .els-objectives, .els-events, .els-join { padding: 80px 0; }
  h1 { font-size: clamp(46px, 11vw, 76px); }
  .els-glass-card { display: none; }
  /* Bar keeps logo + Join + burger (guidelines §3.2); Log in moves into the panel */
  .els-nav-right .els-btn-outline { display: none; }
  .els-brand-text { white-space: nowrap; }
}
/* The congress menu is longer than the society one: burger earlier. */
@media (max-width: 1360px) {
  .els-nav-wrap--congress .els-nav nav { display: none; }
  .els-nav-wrap--congress .els-nav-burger { display: grid; }
  .els-nav-wrap--congress .els-mobile-nav { display: block; }
  .els-nav-wrap--congress .els-mobile-nav[hidden] { display: none; }
  .els-nav-wrap--congress .els-mobile-nav nav { display: block; }
  .els-site-strip { padding: 0 24px; }
}
@media (max-width: 782px) {
  .admin-bar .els-nav-wrap { top: 46px; }
}
@media (max-width: 640px) {
  .els-t-4, .els-t-5, .els-t-6 { grid-column: span 2; }
  .els-foot-grid { grid-template-columns: 1fr; }
  .els-cd-cell .els-n { font-size: 38px; }
  /* Below 640px only the mark, Join and burger fit in the bar */
  .els-nav .els-brand-text { display: none; }
  .els-nav { padding: 10px 16px; }
  .els-site-strip { padding: 0 16px; }
  .els-site-strip-sub { display: none; }
  .els-nav-wrap--congress .els-nav .els-brand-text { display: block; }
  .els-mobile-nav { padding: 10px 16px 16px; }
}

/* ============ REDUCED MOTION (guidelines §6 — mandatory) ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .els-reveal { opacity: 1; transform: none; }
  /* The hero render keeps its centred resting position (its entrance and
     float animations are the only things that move it). */
  .els-hero-spiro { opacity: 1; transform: translate(-50%, -50%); }
  /* The consent banner must still be visible without its slide-in. */
  .els-cookie-inner { opacity: 1; transform: none; }
}

/* ============ PRINT ============ */
/* ============ CONGRESS MINI-SITE COLOUR SYSTEM ============ */
/* Congress pages (body.els-is-congress) run on their own palette:
   plum leads (--accent), the logo's orange wave is the highlight (--warm)
   and neutrals are warm lilac-greys. Same token names as the society site,
   so every component re-colours without extra rules. */
html:has(body.els-is-congress) { background: #F7F4F9; }
body.els-is-congress {
  --paper: #F7F4F9; --surface: #FFFFFF; --ink: #1E1427; --ink-2: #5E5169;
  --accent: #6A2C7F; --accent-2: #8A45A3; --warm: #D4501C; --warm-tint: #FCE6DA;
  --g100: #EDE7F1; --g300: #DCD3E3; --g500: #94879F;
  --glass-border: rgba(30, 20, 39, 0.08);
  --shadow: 0 24px 64px -24px rgba(30, 20, 39, 0.2);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):has(body.els-is-congress) { background: #140E1A; }
  :root:not([data-theme="light"]) body.els-is-congress {
    --paper: #140E1A; --surface: #1F1628; --ink: #EFE8F4; --ink-2: #B5A7C1;
    --accent: #CDA4E6; --accent-2: #DDBDF0; --warm: #F5904F; --warm-tint: #33201A;
    --g100: #281D33; --g300: #40314E; --g500: #85769A;
    --glass: rgba(31, 22, 40, 0.72); --glass-border: rgba(239, 232, 244, 0.08);
  }
}
html[data-theme="dark"]:has(body.els-is-congress) { background: #140E1A; }
:root[data-theme="dark"] body.els-is-congress {
  --paper: #140E1A; --surface: #1F1628; --ink: #EFE8F4; --ink-2: #B5A7C1;
  --accent: #CDA4E6; --accent-2: #DDBDF0; --warm: #F5904F; --warm-tint: #33201A;
  --g100: #281D33; --g300: #40314E; --g500: #85769A;
  --glass: rgba(31, 22, 40, 0.72); --glass-border: rgba(239, 232, 244, 0.08);
}
/* The "back to ELS" strip keeps the society colours on purpose. */
.els-is-congress .els-site-strip { background: #0E1C28; color: #E6EEF3; }
/* Always-dark sections: plum night with an orange glow; highlights use the
   brighter orange in both themes. */
.els-is-congress .els-section-dark {
  --warm: #F5904F;
  background:
    radial-gradient(1200px 800px at 82% 0%, #54236A 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 100%, #5A2613 0%, transparent 55%),
    #150C1D;
}
/* Dark theme: the accent is a light lilac, so accent buttons take dark text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .els-is-congress .els-btn-accent { color: #1E1427; }
}
:root[data-theme="dark"] .els-is-congress .els-btn-accent { color: #1E1427; }
.els-is-congress .els-btn-accent { box-shadow: 0 10px 30px -10px rgba(106, 44, 127, .45); }
.els-is-congress .els-btn-accent:hover { box-shadow: 0 16px 36px -10px rgba(106, 44, 127, .5); }

@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --ink-2: #333; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .els-progress, .els-nav-wrap, .els-mobile-nav, .els-ticker, .els-skip-link,
  .els-hero-visual, .els-glass-card, .els-mesh, .els-mesh-2, .els-mesh-3,
  .els-ams-bg, .els-congress-photo, .els-congress-overlay, .els-hero-spiro,
  .els-cookie, .els-foot-cookie, .els-page-hero::before, .els-interest,
  .els-foot-cta .els-btn, .els-hero-actions, .wpcf7 { display: none !important; }
  .els-reveal { opacity: 1 !important; transform: none !important; }
  .els-congress, .els-tile.els-dark, .els-price, .els-section-dark {
    background: #fff !important; color: #000 !important; border: 1px solid #ccc;
  }
  .els-congress h2 em, .els-cd-cell .els-n, .els-prow .els-a { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .els-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .els-ev, .els-tile, .els-obj { break-inside: avoid; box-shadow: none !important; }
  .els-ev-photo, .els-ev-overlay { display: none !important; }
  .els-ev { color: #000; background: #fff; }
  .els-ev .els-m, .els-ev-year { color: #333 !important; }
}

/* ============ MOTION & DEPTH (homepage) ============ */
/* Layered on top of the component CSS above. Everything here is
   transform / opacity / filter only, driven by a few custom properties
   that main.js writes (--mx/--my pointer spotlight, --px/--py hero
   pointer parallax, --sy hero scroll, --p congress scroll). States that
   only JS can undo are gated on html.els-js (set in theme-init.js). */
@property --els-angle { syntax: '<angle>'; initial-value: 135deg; inherits: false; }

/* ---- Reveal: settle state + variants ---- */
/* Cards carry their own hover transitions, which used to swallow the
   entrance (and inherit its stagger delay on hover). Until a card has
   settled (.is-done, set by main.js) the entrance timing wins. */
.els-tile.els-reveal:not(.is-done),
.els-obj.els-reveal:not(.is-done),
.els-ev.els-reveal:not(.is-done) {
  transition-property: opacity, transform;
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.els-reveal.is-done { transition-delay: 0s; }
.els-obj.els-reveal:not(.is-in),
.els-ev.els-reveal:not(.is-in),
.els-tile.els-reveal:not(.is-in) { transform: translateY(36px) scale(.975); }
.els-ticket.els-reveal:not(.is-in),
.els-price.els-reveal:not(.is-in) { transform: translateY(36px) scale(.96); }

/* Staggered children — chips, pills, resource rows. */
.els-js .els-stagger:not(.is-in) > * { opacity: 0; transform: translateY(16px) scale(.96); }
.els-stagger:not(.is-done) > * {
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms + .15s);
}

/* Headings: the block rises as before while its words sharpen in one
   after another (main.js wraps the words; spans stay inline, so line
   breaks are untouched). */
.els-reveal[data-delay="1"] { --d: .1s; }
.els-reveal[data-delay="2"] { --d: .2s; }
.els-reveal[data-delay="3"] { --d: .3s; }
.els-reveal.is-split { opacity: 1; }
.els-w {
  opacity: 0; filter: blur(10px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--w, 0) * 70ms + var(--d, 0s));
}
.is-in .els-w { opacity: 1; filter: none; }
/* The hero gradient moves onto the word spans (a clipped background does
   not survive a filtered child) and drifts slowly. */
h1.is-split em { background: none; }
h1.is-split em .els-w {
  background: linear-gradient(120deg, var(--accent), var(--accent-2) 30%, var(--warm) 50%, var(--accent-2) 70%, var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .06em; margin: 0 -.06em;
  animation: els-sheen 9s ease-in-out infinite alternate;
}
@keyframes els-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Eyebrow rule draws in with its block. */
.els-eyebrow::before { transition: width .8s cubic-bezier(.2,.7,.2,1) .25s; }
.els-js .els-reveal:not(.is-in) .els-eyebrow::before,
.els-js .els-eyebrow.els-reveal:not(.is-in)::before { width: 0; }

/* ---- Chrome ---- */
.els-progress { background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--warm)); }
.els-nav { transition: box-shadow .3s; }
.els-nav-wrap.is-scrolled .els-nav { box-shadow: 0 14px 40px -26px rgba(14, 28, 40, .45); }

/* Light sweep across solid buttons on hover. */
a.els-btn-accent, a.els-btn-light, a.els-btn-ink { position: relative; overflow: hidden; }
a.els-btn-accent::before, a.els-btn-light::before, a.els-btn-ink::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
a.els-btn-accent:hover::before, a.els-btn-light:hover::before, a.els-btn-ink:hover::before {
  left: 125%; transition: left .7s cubic-bezier(.2,.7,.2,1);
}

/* ---- Flowing wave lines ---- */
.els-waves { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.els-wave {
  position: absolute; left: 0; top: 0; height: 100%; width: max(200%, 2880px);
  animation: els-wave-flow 46s linear infinite; will-change: transform;
}
.els-wave path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.els-wave--b { animation-duration: 64s; animation-direction: reverse; }
.els-wave--c { animation-duration: 34s; }
@keyframes els-wave-flow { to { transform: translateX(-50%); } }

/* ---- Hero ---- */
/* Dotted field behind the illustration. */
.els-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--g500) 1px, transparent 1.6px);
  background-size: 30px 30px; opacity: .42;
  -webkit-mask-image: radial-gradient(52% 62% at 74% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(52% 62% at 74% 46%, #000 0%, transparent 78%);
}
/* ---- Footer CTA: an always-dark band (§1.3), so it reads as its own
   block above the footer; a sine line drifts along its foot. ---- */
.els-foot-cta {
  position: relative; overflow: hidden; border-bottom: 0; margin-bottom: 70px;
  padding: 72px 64px 104px; border-radius: 28px; color: #F3F6F8;
  background:
    radial-gradient(900px 600px at 88% 0%, #123E4C 0%, transparent 60%),
    radial-gradient(700px 500px at 0% 100%, #3B2417 0%, transparent 60%),
    #0B1A25;
}
.els-foot-cta > :not(.els-waves) { position: relative; z-index: 2; }
.els-foot-cta h2 em { color: #F5904F; }
.els-foot-cta .els-btn-accent { background: #F3F6F8; color: #0E1C28; box-shadow: none; }
.els-foot-cta .els-btn-accent:hover { background: #F5904F; }
.els-cta-waves {
  height: 110px; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.els-cta-waves .els-wave--b { color: #F5904F; opacity: .6; animation-duration: 120s; }

/* ---- Join: membership card ---- */
.els-price-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 26px; }
.els-price .els-k { margin-bottom: 14px; }
.els-price-rows { display: grid; gap: 10px; }
.els-price .els-prow {
  flex: 0 0 auto; padding: 20px 22px; border-radius: 16px;
  background: rgba(230,238,243,.05); border: 1px solid rgba(230,238,243,.1);
  transition: border-color .3s, background .3s;
}
.els-price .els-prow:last-of-type { border-bottom: 1px solid rgba(230,238,243,.1); }
.els-price .els-prow:hover { border-color: rgba(245,144,79,.45); background: rgba(230,238,243,.08); }
.els-price-perks { margin-top: 30px; }
.els-price-perks ul { list-style: none; display: grid; gap: 12px; }
.els-price-perks li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(230,238,243,.82); }
.els-price-perks li::before {
  content: ''; flex: 0 0 20px; height: 20px; border-radius: 50%;
  background: rgba(245,144,79,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23F5904F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.els-price .els-btn { margin-top: auto; }
.els-price-perks + .els-btn { margin-top: auto; }
.els-price-perks { margin-bottom: 30px; }

/* Depth: the copy and the illustration part ways on scroll, and the
   illustration's layers answer the pointer at different rates. The
   individual `translate` / `rotate` / `scale` properties compose with the
   float and orbit animations, which keep using `transform`. */
.els-hero-content { translate: 0 calc(var(--sy, 0) * -46px); }
.els-hero-visual { --px: 0; --py: 0; }
.els-hero-visual > svg { translate: calc(var(--px) * -10px) calc(var(--py) * -8px); }
.els-hero-spiro { translate: calc(var(--px) * 20px) calc(var(--py) * 14px + var(--sy, 0) * 70px); }
.els-hero-spiro img { rotate: calc(var(--sy, 0) * 16deg + var(--px) * 2.5deg); }
.els-gc-1 { translate: calc(var(--px) * -26px) calc(var(--py) * -18px + var(--sy, 0) * -30px); }
.els-gc-2 { translate: calc(var(--px) * 34px) calc(var(--py) * 24px + var(--sy, 0) * -60px); }
.els-gc-3 { translate: calc(var(--px) * -16px) calc(var(--py) * 28px + var(--sy, 0) * -90px); }

/* Stat cards pop in after the illustration has landed. */
.els-glass-card { transition: opacity .7s cubic-bezier(.2,.7,.2,1), scale .9s cubic-bezier(.3,1.5,.5,1); }
.els-js .els-hero-visual:not(.is-in) .els-glass-card { opacity: 0; scale: .82; }
.els-gc-1 { transition-delay: .55s; }
.els-gc-3 { transition-delay: .75s; }
.els-gc-2 { transition-delay: .95s; }
/* The render itself grows into place. */
.els-hero-spiro { transition: scale 1.4s cubic-bezier(.2,.7,.2,1) .15s; }
.els-js .els-hero-visual:not(.is-in) .els-hero-spiro { scale: .86; }

/* ---- Congress ---- */
.els-congress-photo { inset: -9% 0; translate: 0 calc(var(--p, 0) * -64px); will-change: translate; }
/* Ticket border: the two-tone hairline now circles the card. */
.els-ticket::before {
  background: conic-gradient(from var(--els-angle), rgba(245,144,79,.75), transparent 20%, transparent 46%, rgba(77,182,203,.6) 56%, transparent 76%, rgba(245,144,79,.75));
  animation: els-angle-spin 10s linear infinite;
}
@keyframes els-angle-spin { to { --els-angle: 495deg; } }
.els-cd-cell { transition: border-color .3s, background .3s; }
.els-ticket:hover .els-cd-cell { border-color: rgba(245,144,79,.22); }
.els-cd-cell .els-n.is-tick { animation: els-cd-tick .55s cubic-bezier(.2,.7,.2,1); }
@keyframes els-cd-tick { from { transform: translateY(-.2em); opacity: .15; filter: blur(4px); } }
.els-pill { transition: border-color .25s, background .25s, transform .25s cubic-bezier(.2,.7,.2,1); }
.els-pills .els-pill:hover { border-color: rgba(245,144,79,.5); background: rgba(230,238,243,.1); transform: translateY(-2px); }

/* Front-page congress section: the three facts and the three actions
   form one 3 × 2 set of equal tiles. */
.els-congress .els-pills,
.els-congress .els-hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 660px; }
.els-congress .els-pills { margin-bottom: 10px; }
.els-congress .els-pills .els-pill,
.els-congress .els-hero-actions > .els-btn,
.els-congress .els-hero-actions .els-atc > summary {
  min-height: 72px; border-radius: 18px; padding: 12px 16px;
}
.els-congress .els-pills .els-pill { align-items: center; }
.els-congress .els-pills .els-pill svg { flex-shrink: 0; }
.els-congress .els-pills .els-v { font-size: 16px; line-height: 1.2; }
.els-congress .els-hero-actions > .els-btn,
.els-congress .els-hero-actions .els-atc > summary {
  width: 100%; justify-content: center; text-align: center; white-space: normal; font-size: 14px;
}
.els-congress .els-hero-actions .els-atc { display: block; }
@media (max-width: 640px) {
  .els-congress .els-pills,
  .els-congress .els-hero-actions { grid-template-columns: 1fr; }
  .els-congress .els-pills .els-pill,
  .els-congress .els-hero-actions > .els-btn,
  .els-congress .els-hero-actions .els-atc > summary { min-height: 60px; }
}

/* ---- Pointer spotlight on cards ---- */
.els-tile::after, .els-ticket::after, .els-price::after, .els-ev::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(14,90,108,.11), transparent 62%);
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  opacity: 0; transition: opacity .45s;
}
.els-tile:hover::after, .els-ticket:hover::after, .els-price:hover::after, .els-ev:hover::after { opacity: 1; }
.els-tile.els-dark::after, .els-tile.els-accent::after, .els-price::after, .els-ev:not(.els-ev-light)::after {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.1), transparent 62%);
}
.els-ticket::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(245,144,79,.13), transparent 62%); }
.els-price::after { z-index: 1; }
.els-ev::after { z-index: 1; }
.els-obj::after {
  background: radial-gradient(420px circle at var(--mx, 100%) var(--my, 0%), rgba(14,90,108,.12), transparent 62%);
  background: radial-gradient(420px circle at var(--mx, 100%) var(--my, 0%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
}

/* ---- Bento ---- */
/* Member network (first tile). */
/* The map takes the right-hand third of the tile; the copy keeps clear of it. */
.els-net {
  position: absolute; right: 26px; top: 30px; width: 38%; height: calc(100% - 60px);
  z-index: 1; pointer-events: none; overflow: visible;
}
.els-t-1 .els-inner { max-width: 57%; }
.els-net-link {
  fill: none; stroke: var(--accent); stroke-width: 1; opacity: .38;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms + .45s);
}
.els-net-link--far { opacity: .2; }
.els-js .els-tile:not(.is-in) .els-net-link { stroke-dashoffset: 1; }
.els-net-pulse {
  fill: none; stroke: var(--warm); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: .07 .93;
  animation: els-net-flow 3.6s linear infinite; animation-delay: calc(var(--i, 0) * -.52s);
  transition: opacity .6s 1.6s;
}
@keyframes els-net-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.els-net-node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; transition: opacity .6s; transition-delay: calc(var(--i, 0) * 80ms + 1.1s); }
.els-js .els-tile:not(.is-in) .els-net-node,
.els-js .els-tile:not(.is-in) .els-net-pulse { opacity: 0; }
.els-net-hub { fill: var(--warm); }
.els-net-ring {
  fill: none; stroke: var(--warm); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: els-net-ring 2.8s ease-out infinite;
}
.els-net-ring--2 { animation-delay: -1.4s; }
@keyframes els-net-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(3); opacity: 0; } }

/* Dark tile: a slow glow keeps it from sitting flat. */
.els-tile.els-dark::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -160px; top: -200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(24,122,142,.5), transparent 68%);
  animation: els-glow-drift 14s ease-in-out infinite alternate;
}
.els-tile.els-dark > * { position: relative; z-index: 2; }
@keyframes els-glow-drift { to { transform: translate(-90px, 70px) scale(1.15); } }

/* Accent tile: wave lines run along its foot. */
.els-tile-waves { height: 70px; color: #fff; }
.els-tile-waves .els-wave { opacity: .4; animation-duration: 240s; }
.els-t-5 > :not(.els-waves) { position: relative; z-index: 2; }

.els-count { font-variant-numeric: tabular-nums; }
.els-chip { transition: border-color .2s, color .2s, transform .2s cubic-bezier(.2,.7,.2,1); }
.els-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---- Objectives ---- */
.els-obj-icon { transition: transform .4s cubic-bezier(.3,1.5,.5,1), background .3s, color .3s; }
.els-obj:hover .els-obj-icon { transform: scale(1.08) rotate(-6deg); background: var(--accent); color: #fff; }
:root[data-theme="dark"] .els-obj:hover .els-obj-icon { color: #0A151D; }
.els-obj-num { transition: color .3s, letter-spacing .3s; }
.els-obj:hover .els-obj-num { color: var(--accent); letter-spacing: .24em; }
/* Hairline that runs across the foot of the card on hover. */
.els-obj::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.els-obj:hover::before { transform: scaleX(1); }

/* ---- Events ---- */
/* Large faint year fills the empty upper half of a card; arrow appears on hover. */
.els-ev-ghost {
  position: absolute; top: 62px; right: 20px; z-index: 1; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(92px, 8.4vw, 124px); line-height: .8; letter-spacing: -.03em;
  color: rgba(230,238,243,.09);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), color .4s;
}
.els-ev-light .els-ev-ghost { color: var(--g100); }
.els-ev:hover .els-ev-ghost { transform: translate(-14px, 8px); color: rgba(245,144,79,.3); }
.els-ev-light:hover .els-ev-ghost { color: var(--g300); }
.els-ev-go {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--warm); color: #fff; font-family: var(--serif); font-size: 20px; line-height: 1;
  opacity: 0; transform: translate(-10px, 10px) rotate(-45deg) scale(.8);
  transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1);
}
.els-ev-light .els-ev-go { background: var(--accent); }
.els-ev:hover .els-ev-go, .els-ev:focus-visible .els-ev-go { opacity: 1; transform: rotate(-45deg); }

/* ---- Join ---- */
.els-res-ic { transition: background .3s, color .3s, transform .4s cubic-bezier(.3,1.5,.5,1); }
.els-res:hover .els-res-ic { background: var(--accent); color: #fff; transform: scale(1.06) rotate(-6deg); }
:root[data-theme="dark"] .els-res:hover .els-res-ic { color: #0A151D; }
.els-res .els-arr { transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s; }
.els-res:hover .els-arr { transform: translateX(6px); color: var(--accent); }
.els-price::before { animation: els-glow-breathe 9s ease-in-out infinite alternate; }
@keyframes els-glow-breathe { to { transform: scale(1.35) translate(-6%, 8%); opacity: .7; } }
.els-price-spiro { animation: els-spiro-drift 12s ease-in-out infinite alternate; }
@keyframes els-spiro-drift { to { transform: translate(-34px, -10px) rotate(-3deg); } }
.els-prow .els-a { transition: transform .4s cubic-bezier(.3,1.5,.5,1); transform-origin: 100% 50%; }
.els-prow:hover .els-a { transform: scale(1.08); }

/* ---- Hero: on a laptop screen the calls to action stay on the first screen ---- */
@media (min-width: 1081px) {
  .els-hero { padding: 52px 0 96px; }
  .els-hero .els-std { margin-bottom: 22px; }
  .els-hero-content .els-eyebrow { margin-bottom: 22px; }
  .els-hero h1 { font-size: clamp(56px, 6.5vw, 80px); margin-bottom: 24px; }
  .els-hero-lead { font-size: 20px; margin-bottom: 30px; }
}

/* ---- Countdown card: key dates ---- */
.els-ticket-dates { list-style: none; margin-top: 28px; padding-top: 22px; border-top: 1px dashed rgba(230,238,243,.15); display: grid; gap: 12px; }
.els-ticket-dates li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.els-ticket-dates .els-v { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.els-ticket-dates .els-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--warm); white-space: nowrap; }
.els-ticket-dates .is-past { opacity: .5; }
.els-ticket-dates .is-past .els-v { text-decoration: line-through; }

/* ---- Officers (inside Who We Are) ---- */
.els-board { margin-top: 72px; }
.els-board-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.els-board-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.els-board-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.els-board-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--g300); border-radius: 20px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.els-board-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-2); }
.els-board-photo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.els-board-photo--initials {
  display: grid; place-items: center; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--accent);
  background: linear-gradient(135deg, var(--warm-tint), var(--g100));
  background: linear-gradient(135deg, var(--warm-tint), color-mix(in srgb, var(--accent) 14%, var(--surface)));
}
.els-board-card b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; margin: 5px 0 3px; }
.els-board-meta { display: block; font-size: 13px; color: var(--ink-2); }

/* ---- Timeline of meetings (inside Events) ---- */
.els-timeline { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); position: relative; margin-bottom: 56px; }
.els-timeline::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: linear-gradient(90deg, var(--g300), var(--accent-2) 70%, var(--warm));
  transform-origin: 0 50%; transition: transform 1.8s cubic-bezier(.2,.7,.2,1) .2s;
}
.els-js .els-timeline:not(.is-in)::before { transform: scaleX(0); }
.els-timeline-item { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 180ms + .3s); }
.els-js .els-timeline:not(.is-in) .els-timeline-item { opacity: 0; transform: translateY(12px); }
.els-timeline a { display: block; position: relative; text-decoration: none; color: var(--ink); padding-right: 12px; }
.els-timeline-dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); transition: transform .3s cubic-bezier(.3,1.5,.5,1), background .3s; }
.els-timeline a:hover .els-timeline-dot { transform: scale(1.35); background: var(--accent); }
.els-timeline-year { display: block; margin-top: 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1; color: var(--accent); }
.els-timeline-city { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.els-timeline .is-upcoming .els-timeline-dot { background: var(--warm); border-color: var(--warm); box-shadow: 0 0 0 0 rgba(232,112,42,.6); animation: els-ping 1.8s ease-out infinite; }
.els-timeline .is-upcoming .els-timeline-year { color: var(--warm); }

/* ---- Gallery mosaic ---- */
.els-shots { padding: 0 0 130px; }
.els-shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.els-shot { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--g300); aspect-ratio: 4 / 3; }
.els-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.els-shot:hover img { transform: scale(1.05); }
.els-shot figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); }

/* ---- News + publications ---- */
/* Two columns of equal height: news (a dark lead card, then compact rows)
   and one publications panel whose rows share hairlines instead of boxes. */
.els-latest { padding: 130px 0; background: var(--surface); border-top: 1px solid var(--g300); }
.els-latest-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: stretch; }
.els-latest-grid--single { grid-template-columns: 1fr; }
.els-latest-col { display: flex; flex-direction: column; min-width: 0; }
.els-latest-head { margin-bottom: 30px; }
.els-latest-head h2 { margin-top: 20px; font-size: clamp(30px, 3vw, 42px); }
/* The button sits at the foot of its column, so both columns end level. */
.els-latest-foot { margin-top: auto; padding-top: 28px; }

/* Lead story — always dark (§1.3: fixed colours in both themes). */
.els-news-lead {
  position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 34px 36px; border-radius: 24px; text-decoration: none;
  background: #0E1C28; color: #F3F6F8;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.els-news-lead::before {
  content: ''; position: absolute; width: 460px; height: 460px; right: -170px; top: -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24,122,142,.55), transparent 68%); pointer-events: none;
  animation: els-glow-drift 14s ease-in-out infinite alternate;
}
.els-news-lead > * { position: relative; }
.els-news-lead:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.els-news-lead .els-m { color: #F5904F; margin-bottom: 16px; }
.els-news-lead b { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.18; letter-spacing: -.015em; margin-bottom: 14px; max-width: 520px; }
.els-news-lead-text { font-size: 15px; line-height: 1.6; color: rgba(230,238,243,.72); max-width: 500px; margin-bottom: 26px; }
.els-news-more { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: #F3F6F8; }
.els-news-more .els-arr { font-family: var(--serif); font-size: 20px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.els-news-lead:hover .els-news-more { color: #F5904F; }
.els-news-lead:hover .els-news-more .els-arr { transform: translateX(5px); }

/* Earlier stories — one line each. */
.els-news-list { display: flex; flex-direction: column; margin-top: 8px; }
.els-news {
  display: flex; align-items: center; gap: 22px; padding: 18px 6px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--g300); transition: padding .3s cubic-bezier(.2,.7,.2,1), color .3s;
}
.els-news b { flex: 1; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.25; }
.els-news-date { flex: 0 0 96px; display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.els-news-date span { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--accent); }
.els-news:hover { padding-left: 14px; color: var(--accent); }

/* Publications panel. */
.els-latest-panel { background: var(--paper); border: 1px solid var(--g300); border-radius: 24px; padding: 36px 36px 32px; }
.els-latest .els-pub-list { display: flex; flex-direction: column; }
.els-latest .els-pub {
  display: flex; align-items: flex-start; gap: 22px; padding: 20px 0; text-decoration: none; color: var(--ink);
  border-top: 1px solid var(--g300);
}
.els-latest .els-pub-year { flex: 0 0 54px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--accent); }
.els-latest .els-pub div { flex: 1; min-width: 0; }
.els-latest .els-pub b { display: block; font-family: var(--serif); font-size: 17.5px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; transition: color .3s; }
.els-latest .els-pub div > span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.els-latest a.els-pub:hover b { color: var(--accent); }
.els-news .els-arr, .els-latest .els-pub .els-arr { color: var(--ink-2); font-family: var(--serif); font-size: 20px; line-height: 1.2; transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s; }
.els-news:hover .els-arr { transform: translateX(4px); color: var(--accent); }
.els-latest a.els-pub:hover .els-arr { transform: translate(3px, -3px); color: var(--accent); }

/* ---- Partners ---- */
.els-partners { padding: 64px 0; background: var(--paper); border-top: 1px solid var(--g300); }
.els-partners-title { text-align: center; margin-bottom: 30px; font-weight: 500; }
.els-partners-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.els-partners-list a { display: block; text-decoration: none; color: var(--ink-2); }
.els-partners-list img { display: block; max-height: 54px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.els-partners-list li:hover img { filter: none; opacity: 1; }
.els-partners-list span { font-family: var(--serif); font-size: 19px; color: var(--ink-2); }

@media (max-width: 1080px) {
  .els-board-list { grid-template-columns: 1fr 1fr; }
  .els-board-head { flex-direction: column; align-items: start; }
  .els-latest { padding: 80px 0; }
  .els-latest-grid { grid-template-columns: 1fr; gap: 56px; }
  .els-shots { padding-bottom: 80px; }
  .els-shots-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .els-board-list { grid-template-columns: 1fr; }
  .els-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .els-timeline::before { display: none; }
  .els-news-lead { padding: 26px 24px; }
  .els-latest-panel { padding: 26px 22px; }
  .els-news { gap: 14px; }
  .els-news-date { flex-basis: 84px; }
  .els-latest .els-pub { gap: 14px; }
  .els-latest .els-pub-year { flex-basis: 46px; }
  .els-latest .els-pub .els-arr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .els-js .els-timeline:not(.is-in)::before { transform: none; }
  .els-js .els-timeline:not(.is-in) .els-timeline-item { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .els-foot-cta { padding: 48px 32px 96px; }
}
@media (max-width: 640px) {
  .els-foot-cta { padding: 40px 24px 92px; border-radius: 22px; }
  .els-logo-full { width: 190px; }
  .els-net { display: none; }
  .els-t-1 .els-inner { max-width: none; }
  .els-hero::before { display: none; }
  .els-ev-ghost { font-size: 96px; top: 54px; }
}
/* Touch screens have no hover: keep the card arrow visible instead. */
@media (hover: none) {
  .els-ev-go { opacity: 1; transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .els-w { opacity: 1; filter: none; }
  .els-js .els-stagger:not(.is-in) > *,
  .els-js .els-hero-visual:not(.is-in) .els-glass-card { opacity: 1; transform: none; scale: 1; }
  .els-js .els-hero-visual:not(.is-in) .els-hero-spiro { scale: 1; }
  .els-js .els-tile:not(.is-in) .els-net-link { stroke-dashoffset: 0; }
  .els-js .els-tile:not(.is-in) .els-net-node, .els-js .els-tile:not(.is-in) .els-net-pulse { opacity: 1; }
  .els-js .els-reveal:not(.is-in) .els-eyebrow::before,
  .els-js .els-eyebrow.els-reveal:not(.is-in)::before { width: 28px; }
  .els-reveal:not(.is-in) { transform: none !important; }
  .els-hero-content, .els-hero-visual > svg, .els-hero-spiro, .els-glass-card, .els-congress-photo { translate: none; }
  .els-hero-spiro img { rotate: none; }
  .els-net-ring, .els-net-pulse { display: none; }
}
@media print {
  .els-waves, .els-net, .els-ev-ghost, .els-ev-go, .els-hero::before, .els-partners, .els-shots { display: none !important; }
  .els-w { opacity: 1 !important; filter: none !important; }
  .els-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============ CONGRESS BAR: dark plum gradient ============ */
/* The congress mini-site's header is always dark (fixed colours in both
   themes), so it reads as a different place from the white society bar.
   Dropdown panels and the mobile panel stay on the light surface. */
.els-nav-wrap--congress .els-nav {
  background: linear-gradient(100deg, #170D20 0%, #34183F 48%, #5A2670 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(239, 232, 244, .12);
  color: #EFE8F4;
}
.els-nav-wrap--congress .els-brand { color: #F6F1FA; }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li > a { color: #EFE8F4; }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li > .els-sub-toggle { color: rgba(239, 232, 244, .7); }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li > a:hover,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li:not(.menu-item-has-children).current-menu-item > a,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li:not(.menu-item-has-children).current_page_item > a,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children:hover,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.is-open,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-item,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current_page_item,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-ancestor { background: rgba(255, 255, 255, .12); color: #fff; }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children > a,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children > a:hover { background: transparent; color: #fff; }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li.current-menu-item > a,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li.current_page_item > a,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > li.current-menu-ancestor > a { color: #fff; }
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children:hover > .els-sub-toggle,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-item > .els-sub-toggle,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current_page_item > .els-sub-toggle,
.els-nav-wrap--congress .els-nav nav .els-nav-menu > .menu-item-has-children.current-menu-ancestor > .els-sub-toggle { color: #F5904F; background: transparent; }
/* Call to action and burger, on dark. */
.els-nav-wrap--congress .els-nav-right .els-btn-ink { background: #F6F1FA; color: #1E1427; }
.els-nav-wrap--congress .els-nav-right .els-btn-ink:hover { background: #F5904F; color: #1E1427; }
.els-nav-wrap--congress .els-nav .els-icon-btn { border-color: rgba(239, 232, 244, .28); color: #EFE8F4; }
.els-nav-wrap--congress .els-nav .els-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.els-nav-wrap--congress.is-scrolled .els-nav { box-shadow: 0 14px 40px -22px rgba(20, 10, 30, .7); }
/* The strip above it joins the same night-plum instead of navy. */
.els-is-congress .els-site-strip { background: #120A19; color: #E9E0F0; }
:focus-visible { outline-offset: 3px; }
.els-nav-wrap--congress .els-nav :focus-visible { outline-color: #F5904F; }
/* On a phone the congress bar keeps the logo, the congress name and the
   burger; "Register interest" is the first action inside the menu panel.
   (With the button in the bar the row was wider than the screen.) */
@media (max-width: 640px) {
  .els-nav-wrap--congress .els-nav-right .els-btn { display: none; }
  .els-nav-wrap--congress .els-nav { gap: 14px; }
}

/* Countdown card: its three chips share one row (label above the note). */
.els-ticket-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.els-ticket-foot .els-pill { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 16px; min-width: 0; }

/* ============ DISPLAY FACE: ALEXANDRIA ============ */
/* Alexandria runs wider and taller than the serif it replaced, so the big
   sizes come down a step and running text set in it uses the light weight.
   It has no italic: emphasised words are slanted by the browser. */
h1 { font-size: clamp(46px, 5.4vw, 70px); line-height: 1; letter-spacing: -.04em; font-weight: 400; }
@media (min-width: 1081px) { .els-hero h1 { font-size: clamp(46px, 5.2vw, 68px); } }
.els-display { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.035em; }
.els-congress h2 { font-size: clamp(42px, 4.8vw, 68px); line-height: 1; letter-spacing: -.04em; }
h1 em, .els-display em, .els-congress h2 em { font-weight: 400; }
.els-hero-lead, .els-congress-desc, .els-join .els-lead, .els-interest .els-lead { font-size: 17px; line-height: 1.6; font-weight: 300; }
.els-hero-lead { font-size: 18px; }
.els-tile .els-quote { font-size: 20px; line-height: 1.45; font-weight: 300; }
.els-tile h3, .els-obj h3, .els-ev h3 { font-weight: 400; letter-spacing: -.02em; }
.els-tile h3 { font-size: 23px; }
.els-obj h3 { font-size: 20px; }
.els-ev h3 { font-size: 21px; line-height: 1.25; }
.els-tile .els-big { font-size: 56px; letter-spacing: -.04em; }
.els-cd-cell .els-n { letter-spacing: -.04em; }
.els-cd--days .els-cd-cell .els-n { font-size: clamp(64px, 7vw, 96px); }
.els-brand-text { font-weight: 400; letter-spacing: -.01em; font-size: 14.5px; }
.els-res b, .els-news b, .els-latest .els-pub b, .els-board-card b { font-weight: 400; font-size: 16.5px; letter-spacing: -.01em; }
.els-news-lead b { font-size: clamp(21px, 2vw, 26px); font-weight: 400; letter-spacing: -.02em; }
.els-prow .els-n { font-size: 19px; font-weight: 400; }
.els-prow .els-a { font-size: 34px; letter-spacing: -.04em; }
.els-price-title, .els-board-title { letter-spacing: -.03em; }
.els-pill .els-v, .els-glass-card .els-v { letter-spacing: -.02em; }
.els-congress .els-pills .els-v { font-size: 14.5px; }
.els-ticket-foot .els-pill .els-v { font-size: 13.5px !important; }
.els-timeline-year, .els-ev-year, .els-latest .els-pub-year { letter-spacing: -.03em; }
.els-ticker-item { font-size: 16px; }
@media (max-width: 1080px) { h1 { font-size: clamp(38px, 9vw, 60px); } }

/* ---- Logo hover: the mark lifts a little and its wave ripples ---- */
.els-brand .els-logo { overflow: visible; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.els-brand:hover .els-logo, .els-brand:focus-visible .els-logo { transform: translateY(-2px) scale(1.05); }
.els-mark-wave { transform-box: fill-box; transform-origin: 50% 50%; }
.els-brand:hover .els-mark-wave, .els-brand:focus-visible .els-mark-wave { animation: els-logo-ripple 1.1s cubic-bezier(.4,0,.2,1); }
@keyframes els-logo-ripple {
  0%   { transform: none; }
  25%  { transform: translateX(-4%) scaleY(1.35); }
  55%  { transform: translateX(4%) scaleY(.8); }
  80%  { transform: translateX(-1.5%) scaleY(1.1); }
  100% { transform: none; }
}
.els-brand-text { transition: color .25s; }
.els-brand:hover .els-brand-text { color: var(--accent); }
.els-nav-wrap--congress .els-brand:hover .els-brand-text { color: #F5904F; }
.els-foot-brand .els-logo-full { transition: transform .45s cubic-bezier(.3,1.5,.5,1); transform-origin: 30% 60%; }
.els-foot-brand .els-brand:hover .els-logo-full { transform: scale(1.03); }

/* ---- Footer, rebalanced: brand + three link columns; legal links sit in the bottom bar ---- */
.els-foot-grid { grid-template-columns: 1.5fr repeat(3, 1fr); align-items: start; }
.els-foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.els-foot-legal .els-foot-cookie { margin: 0; text-decoration: none; }
.els-foot-bottom { gap: 14px 32px; }
@media (max-width: 1080px) { .els-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .els-foot-grid { grid-template-columns: 1fr; }
  .els-foot-credit { margin-left: 0; }
}

/* ---- Objectives, round 2: larger icon tiles and a big light numeral ---- */
.els-obj { padding: 36px 34px 38px; background: var(--paper); }
.els-obj-top { align-items: flex-start; margin-bottom: 32px; }
.els-obj-icon {
  width: 80px; height: 80px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 30px -16px rgba(14, 90, 108, .55);
}
.els-obj-icon svg { width: 38px; height: 38px; stroke-width: 1.4; }
.els-obj:hover .els-obj-icon { background: linear-gradient(135deg, var(--warm), #F5904F); color: #fff; transform: scale(1.06) rotate(-6deg); box-shadow: 0 16px 30px -16px rgba(232, 112, 42, .6); }
.els-obj-num {
  font-family: var(--serif); font-size: 46px; font-weight: 300; line-height: .9; letter-spacing: -.05em;
  color: var(--g300); transition: color .3s;
}
.els-obj:hover .els-obj-num { color: var(--accent); letter-spacing: -.05em; }
.els-obj h3 { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }
.els-obj p { font-size: 14.5px; line-height: 1.65; }
:root[data-theme="dark"] .els-obj-icon, :root[data-theme="dark"] .els-obj:hover .els-obj-icon { color: #0A151D; }
@media (max-width: 640px) {
  .els-obj { padding: 28px 24px 30px; }
  .els-obj-icon { width: 68px; height: 68px; border-radius: 20px; }
  .els-obj-icon svg { width: 32px; height: 32px; }
  .els-obj-num { font-size: 38px; }
}

/* ============ LIGHTBOX (gallery photographs) ============ */
.els-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center;
  background: rgba(7, 15, 22, .97); color: #F3F6F8;
  animation: els-lightbox-in .25s ease-out;
}
.els-lightbox[hidden] { display: none; }
@keyframes els-lightbox-in { from { opacity: 0; } }
.els-lightbox-open { overflow: hidden; }
.els-lightbox-figure { grid-column: 2; margin: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 0 26px; }
.els-lightbox-figure img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); transition: opacity .2s; }
.els-lightbox.is-loading img { opacity: .35; }
.els-lightbox-figure figcaption { display: flex; gap: 18px; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(230,238,243,.7); text-align: center; }
.els-lightbox-counter { color: #F5904F; white-space: nowrap; }
.els-lightbox-btn {
  width: 48px; height: 48px; border-radius: 50%; justify-self: center;
  border: 1px solid rgba(230,238,243,.25); background: rgba(230,238,243,.06); color: #F3F6F8;
  font-family: var(--sans); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s;
}
.els-lightbox-btn:hover { background: #F5904F; border-color: #F5904F; color: #0E1C28; transform: scale(1.06); }
.els-lightbox-btn:focus-visible { outline: 2px solid #F5904F; outline-offset: 3px; }
.els-lightbox-btn[hidden] { display: none; }
.els-lightbox-prev { grid-column: 1; grid-row: 1; }
.els-lightbox-next { grid-column: 3; grid-row: 1; }
.els-lightbox-close { position: absolute; top: 16px; right: 16px; font-size: 26px; z-index: 2; }
.els-gallery a, [data-els-lightbox] a { cursor: zoom-in; }
.els-shot a { display: block; height: 100%; }
@media (max-width: 640px) {
  .els-lightbox { grid-template-columns: minmax(0, 1fr); }
  .els-lightbox-figure { grid-column: 1; padding: 64px 12px 84px; }
  .els-lightbox-figure img { max-height: calc(100vh - 190px); }
  .els-lightbox-prev, .els-lightbox-next { position: absolute; bottom: 18px; }
  .els-lightbox-prev { left: calc(50% - 60px); }
  .els-lightbox-next { right: calc(50% - 60px); }
}
@media print { .els-lightbox { display: none !important; } }

/* Front page officers: a slightly larger portrait now that there are photographs. */
.els-board-photo { width: 72px; height: 72px; }