/*!
 * 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);
  --serif: 'Newsreader', Georgia, 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); }

/* ============ 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-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; }
}

/* ============ 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(--paper); border-top: 1px solid var(--g300); }
.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 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
.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); }

@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; }
}

/* ============ 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; }
}
@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-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 ============ */
@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-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; }
}