/* Layout: photo hero with the conference's violet veil, then a dated three-day strip, organiser block, symposia list, proceedings. Palette and Poppins taken from the original ESAFORM 2023 WordPress theme. */
:root {
  --violet: #463b87;
  --gold: #fcbe00;
  --gold-ink: #8a5a00;
  --bg: #ffffff;
  --surface: #f3f3f6;
  --fg: #161616;
  --muted: #5e5c6b;
  --line: #e2e0ea;
  --font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14121f; --surface: #1d1a2d; --fg: #eeedf4; --muted: #a9a6bd; --line: #2e2a45; --gold-ink: #fcbe00; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14121f; --surface: #1d1a2d; --fg: #eeedf4; --muted: #a9a6bd; --line: #2e2a45; --gold-ink: #fcbe00; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.6; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
section { padding-block: 72px; }
section.alt { background: var(--surface); }
.head { display: grid; gap: 10px; margin-bottom: 36px; max-width: 680px; }
.head p { margin: 0; color: var(--muted); }

/* hero */
.hero { position: relative; color: #fff; padding-block: 0; overflow: hidden; background: #2a2352; }
.hero .bg { position: absolute; inset: 0; background: url(../img/hero.jpg) center 40% / cover no-repeat; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(42,35,82,.94) 0%, rgba(70,59,135,.82) 48%, rgba(70,59,135,.25) 100%); }
.hero .wrap { position: relative; padding-block: 56px 72px; display: grid; gap: 28px; }
.hero-top { display: flex; align-items: center; gap: 16px; }
.hero-top img { height: 64px; width: auto; }
.hero-top span { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.edition { color: var(--gold); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; max-width: 14em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 500; }
.facts div { display: grid; }
.facts small { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.badge { justify-self: start; display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 14px; font-size: .85rem; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* days */
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.day { border-top: 4px solid var(--violet); background: var(--bg); padding: 22px 22px 24px; display: grid; gap: 14px; align-content: start; }
section:not(.alt) .day { background: var(--surface); }
.day-date { display: flex; align-items: baseline; gap: 10px; }
.day-date b { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--violet); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .day-date b { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .day-date b { color: var(--gold); } }
.day-date span { color: var(--muted); font-size: .9rem; line-height: 1.3; }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.day li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; font-size: .92rem; }
.day li time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.kn { font-weight: 600; }

/* organiser */
.org { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.org-photo img { width: 100%; height: auto; display: block; }
.org-text { display: grid; gap: 20px; min-width: 0; }
.inst { display: flex; gap: 16px; align-items: center; }
.inst img { width: 72px; height: 72px; flex: none; }
.inst h3 { font-size: 1.15rem; font-weight: 600; }
.inst p { margin: 0; color: var(--muted); font-size: .92rem; }
.addr { color: var(--muted); font-size: .92rem; margin: 0; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.person { display: grid; gap: 10px; }
.person img { width: 100%; aspect-ratio: 35 / 33; object-fit: cover; display: block; max-width: 100%; }
.person h3 { font-size: 1rem; font-weight: 600; }
.person p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.person.chair h3 { color: var(--violet); }
:root[data-theme="dark"] .person.chair h3 { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .person.chair h3 { color: var(--gold); } }
.role { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); }

/* symposia */
.ms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.ms li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding-block: 11px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.ms li span { font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.keynotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.keynotes div { display: grid; gap: 4px; }
.keynotes small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.keynotes b { font-weight: 600; }
.keynotes p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }

/* proceedings */
.proc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.proc .logo { width: 180px; padding: 20px; background: #fff; border: 1px solid var(--line); }
.proc .logo img { width: 100%; display: block; }
.proc p { margin: 0 0 10px; }
.proc a { color: var(--violet); font-weight: 600; }
:root[data-theme="dark"] .proc a { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proc a { color: var(--gold); } }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

footer { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: .8rem; color: var(--muted); }
footer .wrap { display: grid; gap: 8px; }
footer p { margin: 0; max-width: 820px; }

@media (max-width: 900px) {
  .days, .org, .ms { grid-template-columns: minmax(0, 1fr); }
  .team, .keynotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  section { padding-block: 52px; }
  .team { gap: 16px; }
}
body { margin: 0; }
img { max-width: 100%; }
.doc { color: var(--violet); font-weight: 600; }
:root[data-theme="dark"] .doc { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .doc { color: var(--gold); } }