/* ===========================================================================
   The Future of Science, TU Darmstadt 2026

   Colour
     The page uses the TU Darmstadt accent palette (1b blue, 2b light blue,
     3b green, 6b/7b yellow-orange, 9b red, 11b purple) plus the UKP Lab red.
     TUD blue carries links, buttons and headings; the rest of the palette is
     used to colour-code the programme and the section markers, which is what
     keeps the page bright rather than one flat blue.
   Radius rule
     Surfaces, buttons and inputs use --r (10px); the day switch, the logo
     plates and the portraits are the only full-round or pill shapes.
   Theme
     One theme for the whole page, following prefers-color-scheme.
   =========================================================================== */

:root {
  /* TU Darmstadt accent palette */
  --tud-blue:    #005AA9;  /* 1b */
  --tud-blue-lt: #0083CC;  /* 2b */
  --tud-cyan:    #009CDA;  /* 2a */
  --tud-teal:    #009D81;  /* 3b */
  --tud-lime:    #99C000;  /* 4b */
  --tud-yellow:  #FDCA00;  /* 6b */
  --tud-orange:  #F5A300;  /* 7b */
  --tud-red:     #E6001A;  /* 9b */
  --tud-purple:  #721085;  /* 11b */
  --ukp-red:     #B80D23;  /* UKP Lab logo red */

  --accent:        var(--tud-blue);
  --accent-strong: #004480;
  --accent-soft:   #e3f0fb;
  --accent-2:      var(--tud-blue-lt);

  --bg:        #ffffff;
  --bg-warm:   #f3f9fe;
  --surface:   #ffffff;
  --tint:      #eff7fe;
  --line:      #cfe2f2;
  --line-soft: #e4eff9;

  --ink:     #0b2033;
  --ink-mid: #3d5b74;
  --ink-dim: #64809a;
  --on-accent: #ffffff;

  /* Logo plates keep every partner logo on the background it was drawn for. */
  --plate:      #ffffff;
  --plate-line: #dbe7f2;
  --plate-ink:  #14212b;
  --logo-knockout: #ffffff;

  --r: 10px;
  --wrap: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow: 0 1px 2px rgba(11, 32, 51, 0.05), 0 12px 32px rgba(0, 90, 169, 0.10);
  --shadow-sm: 0 1px 2px rgba(11, 32, 51, 0.05), 0 4px 14px rgba(0, 90, 169, 0.07);
  color-scheme: light dark;
}

/* The page ships light; `data-theme` is authoritative once it is set. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tud-blue:    #5aa9e6;
    --tud-blue-lt: #4cbcf0;
    --tud-cyan:    #4cc4f0;
    --tud-teal:    #35c3a6;
    --tud-lime:    #b6da3a;
    --tud-yellow:  #ffd738;
    --tud-orange:  #ffb838;
    --tud-red:     #ff5a5a;
    --tud-purple:  #c07ad4;
    --ukp-red:     #ef5a6d;

    --accent:        #5aa9e6;
    --accent-strong: #8ecaf5;
    --accent-soft:   #12293a;
    --accent-2:      #4cbcf0;

    --bg:        #071520;
    --bg-warm:   #091b28;
    --surface:   #0e2231;
    --tint:      #0a1d2b;
    --line:      #1d3a4e;
    --line-soft: #16303f;

    --ink:     #e9f3fa;
    --ink-mid: #a9c3d6;
    --ink-dim: #7f9db3;
    --on-accent: #041220;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 34px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --tud-blue:    #5aa9e6;
  --tud-blue-lt: #4cbcf0;
  --tud-cyan:    #4cc4f0;
  --tud-teal:    #35c3a6;
  --tud-lime:    #b6da3a;
  --tud-yellow:  #ffd738;
  --tud-orange:  #ffb838;
  --tud-red:     #ff5a5a;
  --tud-purple:  #c07ad4;
  --ukp-red:     #ef5a6d;

  --accent:        #5aa9e6;
  --accent-strong: #8ecaf5;
  --accent-soft:   #12293a;
  --accent-2:      #4cbcf0;

  --bg:        #071520;
  --bg-warm:   #091b28;
  --surface:   #0e2231;
  --tint:      #0a1d2b;
  --line:      #1d3a4e;
  --line-soft: #16303f;

  --ink:     #e9f3fa;
  --ink-mid: #a9c3d6;
  --ink-dim: #7f9db3;
  --on-accent: #041220;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 34px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.14; }
p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r); font-weight: 500;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.ico { width: 20px; height: 20px; flex: none; }
.ico--sm { width: 15px; height: 15px; }
.ico--btn { width: 15px; height: 15px; margin-left: 2px; }

/* The TU Darmstadt accent palette as a thin rule. It sits under the header and
   above the footer, and is the one place the whole palette is shown at once. */
.ribbon {
  height: 4px;
  background: linear-gradient(90deg,
    var(--tud-blue)   0%,   var(--tud-blue)   16%,
    var(--tud-blue-lt) 16%, var(--tud-blue-lt) 32%,
    var(--tud-teal)   32%,  var(--tud-teal)   48%,
    var(--tud-lime)   48%,  var(--tud-lime)   60%,
    var(--tud-yellow) 60%,  var(--tud-yellow) 72%,
    var(--tud-orange) 72%,  var(--tud-orange) 84%,
    var(--ukp-red)    84%,  var(--ukp-red)   100%);
}

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.section { padding-block: clamp(60px, 7.5vw, 96px); }
.section--tint { background: var(--tint); }
.section--warm { background: var(--bg-warm); }
.section--compact { padding-block: clamp(48px, 5.5vw, 72px); }

/* Each section opens with a rule across the container, tipped with the colour
   that section uses, so the page reads as parts rather than one slab. */
.shead {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-bottom: 40px;
  position: relative;
}
.shead::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 84px; height: 3px; border-radius: 2px;
  background: var(--sec, var(--accent));
}
.shead__num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; color: var(--sec, var(--accent));
  display: block; margin-bottom: 14px; text-transform: uppercase;
}
.section__head { font-size: clamp(27px, 3.3vw, 38px); text-wrap: balance; }
.section__intro {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--ink-mid);
  font-size: 16.5px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  padding: 12px 22px;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 550;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 1px 2px rgba(0, 68, 128, 0.18), 0 6px 18px rgba(0, 90, 169, 0.18);
}
.btn:hover { background: var(--accent-strong); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.btn--onblue { background: #ffffff; color: #004480; box-shadow: none; }
.btn--onblue:hover { background: #ffffff; filter: brightness(0.95); }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 15px; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.link:hover { color: var(--accent-strong); }

/* ---------- logo plates ----------
   Partner logos are drawn for a light background, so each one sits on its own
   white plate. That keeps TU Darmstadt, UKP and ELIZA rendering correctly in
   both themes instead of half-disappearing in dark mode. */
.plate {
  display: grid; place-items: center;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--r);
  color: var(--plate-ink);
  padding: 12px 18px;
}
.plate img { display: block; width: auto; max-width: 100%; }

.lockup {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.lockup__label {
  width: 100%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 2px;
}
.lockup a.plate { text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.lockup a.plate:hover { border-color: var(--accent); transform: translateY(-2px); }
.lockup .plate { height: 58px; padding-inline: 16px; }
.lockup .plate img { height: 32px; }
.lockup .plate--tu img { height: 36px; }
.lockup .plate--eliza img { height: 24px; }
.lockup .plate--ellis img { height: 40px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(2px)) { .nav { background: var(--bg); } }

.nav__inner {
  height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; white-space: nowrap;
}
.nav__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r);
  background: linear-gradient(140deg, var(--tud-blue-lt), var(--tud-blue) 70%);
  color: #ffffff;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.nav__brandyear { color: var(--ink-dim); font-weight: 400; }

.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a {
  color: var(--ink-mid); text-decoration: none; font-size: 15px; font-weight: 450;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-current { color: var(--accent); font-weight: 550; }

/* The host mark in the header is what says, at a glance, whose event this is. */
.nav__host {
  display: flex; align-items: center; gap: 10px;
  padding-left: 18px; margin-left: auto;
  border-left: 1px solid var(--line);
}
.nav__host .plate { height: 40px; padding: 6px 10px; border-radius: 8px; }
.nav__host .plate img { height: 24px; }
.nav__host .plate--ukp img { height: 18px; }
.nav__host .plate--eliza img { height: 17px; }
@media (max-width: 1080px) { .nav__host { display: none; } }

.nav__theme {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; margin-left: 4px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; color: var(--ink-mid);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__theme:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.nav__theme .ico { grid-area: 1 / 1; }
/* Light theme shows the moon (what you would switch to), dark shows the sun. */
.nav__theme-sun { display: none; }
:root[data-theme="dark"] .nav__theme-sun { display: block; }
:root[data-theme="dark"] .nav__theme-moon { display: none; }

.nav__toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; color: var(--ink);
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 16px; height: 1.5px; background: currentColor; margin-inline: auto;
  content: ""; position: relative;
}
.nav__bars::before { top: -5px; }
.nav__bars::after  { top: 3.5px; }

.nav__mobile { display: none; border-top: 1px solid var(--line-soft); padding: 8px 20px 16px; }
.nav__mobile a {
  display: block; padding: 11px 0; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-soft); font-size: 16px;
}
.nav__mobile a:last-child { border-bottom: 0; }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__mobile:not([hidden]) { display: block; }
}

/* ---------- hero: asymmetric split on a bright wash ---------- */
.hero {
  position: relative;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 84px);
  background:
    radial-gradient(1100px 560px at 12% -10%, color-mix(in srgb, var(--tud-cyan) 16%, transparent), transparent 70%),
    radial-gradient(900px 520px at 92% 8%, color-mix(in srgb, var(--tud-teal) 13%, transparent), transparent 68%),
    linear-gradient(180deg, var(--bg-warm), var(--bg) 88%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.hero__title {
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -0.034em;
  max-width: 12ch;
}
/* The full theme sits inside the h1, set in the same family at a lighter
   weight, so the headline stays two lines at every width. */
.hero__theme {
  display: block;
  margin-top: 14px;
  max-width: 20ch;
  font-size: clamp(19px, 2.05vw, 25px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.28;
  background: linear-gradient(95deg, var(--tud-blue), var(--tud-teal) 58%, var(--tud-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .hero__theme { color: var(--accent); } }

.hero__sub {
  margin-top: 22px;
  max-width: 48ch;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  color: var(--ink-mid);
}
.hero__sub--ai100 { margin-top: 14px; font-size: clamp(15.5px, 1.35vw, 17px); }
.hero__sub a { color: var(--accent); font-weight: 500; }
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero__figure { margin: 0; }
.hero__frame { position: relative; margin: 0 18px 18px 0; }
/* A colour block offset behind the photo, in place of a plain drop shadow. */
.hero__frame::before {
  content: ""; position: absolute; inset: 22px -18px -18px 22px;
  border-radius: calc(var(--r) + 4px);
  background: linear-gradient(135deg, var(--tud-cyan), var(--tud-teal) 55%, var(--tud-lime));
  opacity: 0.85;
}
.hero__frame img {
  position: relative;
  width: 100%; height: clamp(300px, 42vw, 470px); object-fit: cover;
  border-radius: calc(var(--r) + 4px);
  box-shadow: var(--shadow);
}
.hero__credit {
  margin-top: 16px; font-size: 12px; color: var(--ink-dim); line-height: 1.5;
}
.hero__credit a { color: inherit; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: 20ch; }
  .hero__frame img { height: clamp(220px, 52vw, 330px); }
}

/* ---------- facts strip ---------- */
.facts { border-block: 1px solid var(--line-soft); background: var(--surface); }
.facts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 26px 26px 26px 0;
  border-left: 1px solid var(--line-soft);
  padding-left: 26px;
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact__ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
  color: var(--c, var(--accent));
}
.fact__k { font-weight: 550; font-size: 15.5px; letter-spacing: -0.01em; }
.fact__v { color: var(--ink-dim); font-size: 14.5px; margin-top: 3px; line-height: 1.5; }

@media (max-width: 820px) {
  .facts__grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding: 20px 0; border-top: 1px solid var(--line-soft); }
  .fact:first-child { border-top: 0; }
}

/* ---------- overview ---------- */
.overview__lede { max-width: 74ch; }
.overview__lede p { margin-top: 20px; color: var(--ink-mid); font-size: 17.5px; line-height: 1.7; }
.overview__lede p:first-child { margin-top: 0; color: var(--ink); font-size: 18.5px; }
.overview__lede em { font-style: normal; font-weight: 550; color: var(--accent); }

/* ---------- organisers (two merged cards under the About text) ---------- */
.hosts {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.host {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--c, var(--accent));
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.host__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.host .plate { height: 84px; }
.host .plate img { height: 46px; max-width: 100%; object-fit: contain; }
.host .plate--eliza img { height: 34px; }
.host .plate--ellis img { height: 60px; }
.host__name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.host__blurb { margin-top: 6px; font-size: 14.5px; color: var(--ink-mid); line-height: 1.55; }
@media (max-width: 860px) { .hosts { grid-template-columns: 1fr; } }

/* ---------- AI100: the Friday special ----------
   The one dark-on-colour band on the page, so the report presentation reads
   as the event inside the event. */
.ai100 {
  color: #ffffff;
  padding-block: clamp(56px, 7vw, 88px);
  background:
    radial-gradient(800px 420px at 85% 0%, rgba(255, 202, 0, 0.22), transparent 70%),
    linear-gradient(125deg, #00336a, #005AA9 48%, #00866f);
}
.ai100__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.ai100__eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #0b2033; background: #FDCA00;
  padding: 5px 11px; border-radius: 999px;
}
.ai100__head { margin-top: 20px; font-size: clamp(30px, 3.8vw, 44px); color: #ffffff; }
.ai100__title {
  margin-top: 16px; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.4;
  font-weight: 500; letter-spacing: -0.015em; color: #ffffff; max-width: 34ch;
}
.ai100__blurb { margin-top: 18px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.86); max-width: 56ch; }
.ai100__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ai100__link {
  display: inline-block;
  color: #ffffff; font-weight: 500; font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); text-decoration: none;
}
.ai100__link:hover { border-bottom-color: #ffffff; }
.ai100__sessions { display: grid; gap: 14px; }
.ai100__session {
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--r) + 2px);
  backdrop-filter: blur(4px);
}
.ai100__time { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #FDCA00; }
.ai100__kind { margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.ai100__people { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px 18px; }
.ai100__person { display: flex; align-items: center; gap: 10px; }
.ai100__face {
  width: 44px; height: 44px; flex: none; border-radius: 999px; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.18);
}
.ai100__face img { width: 100%; height: 100%; object-fit: cover; }
.ai100__face--mono {
  display: grid; place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #ffffff;
}
.ai100__name { font-size: 15px; font-weight: 500; }
.ai100__mod { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 880px) { .ai100__inner { grid-template-columns: 1fr; } }

/* ---------- speakers ---------- */
.speakers {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 30px 22px;
}
.speaker { min-width: 0; }
.speaker__portrait {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--tud-teal) 12%, var(--surface)));
  border: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
.speaker:hover .speaker__portrait { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.speaker__portrait--mono { display: grid; place-items: center; }
.speaker__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.speaker:hover .speaker__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .speaker:hover .speaker__img { transform: none; }
}
.speaker__mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.speaker__body { margin-top: 14px; }
.speaker__name {
  display: block; font-weight: 600; font-size: 15.5px; letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none;
}
a.speaker__name:hover { color: var(--accent); text-decoration: underline; }
.speaker__affil { margin-top: 3px; font-size: 13.5px; color: var(--accent); font-weight: 500; }
.speaker__role { margin-top: 4px; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.speaker__tag {
  margin-top: 8px; display: inline-block;
  font-size: 11px; letter-spacing: 0.04em; font-weight: 550; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding: 3px 9px; border-radius: 999px;
}
.speaker__tag--host {
  color: var(--ukp-red);
  background: color-mix(in srgb, var(--ukp-red) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ukp-red) 35%, transparent);
}
.empty { margin-top: 32px; color: var(--ink-dim); }

/* ---------- motion ----------
   One idea: content settles upward into place as it enters the viewport, and
   the hero plays that same move once on load. Everything is opacity and
   transform only, and all of it collapses to static under reduced motion. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--d, 0ms);
}

.hero__copy > * { opacity: 0; transform: translateY(14px); animation: rise 0.7s var(--ease) forwards; }
.hero__copy > :nth-child(1) { animation-delay: 0.05s; }
.hero__copy > :nth-child(2) { animation-delay: 0.13s; }
.hero__copy > :nth-child(3) { animation-delay: 0.21s; }
.hero__copy > :nth-child(4) { animation-delay: 0.29s; }
.hero__copy > :nth-child(5) { animation-delay: 0.37s; }
.hero__figure { opacity: 0; animation: fade 0.9s var(--ease) 0.18s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .hero__copy > *, .hero__figure { opacity: 1; transform: none; animation: none; }
}

/* ---------- program ---------- */
.dayswitch {
  margin-top: 34px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.dayswitch__btn {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 20px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--ink-mid);
  font: inherit; font-size: 15px; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.dayswitch__btn:hover { color: var(--ink); }
.dayswitch__btn.is-active {
  background: linear-gradient(135deg, var(--tud-blue-lt), var(--tud-blue));
  color: #ffffff;
}
.dayswitch__d { font-weight: 550; }
.dayswitch__date { font-size: 13.5px; opacity: 0.85; }

.agenda { margin-top: 28px; }
.agenda__date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--ink-dim);
  padding-bottom: 14px;
}
.agenda__list { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  padding: 16px 16px;
  margin-inline: -16px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r);
  border-left: 3px solid transparent;
  transition: background 0.25s var(--ease), border-left-color 0.25s var(--ease);
}
.row:hover {
  background: color-mix(in srgb, var(--c, var(--accent)) 7%, transparent);
  border-left-color: var(--c, var(--accent));
}
.row__time {
  display: flex; flex-direction: column;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.row__start { color: var(--ink); font-weight: 500; }
.row__end { color: var(--ink-dim); font-size: 12.5px; }
.row__title { font-size: 16.5px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.4; }
.row__meta {
  margin-top: 5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-mid);
}
.row__speaker { font-weight: 500; color: var(--ink-mid); }
.row__kind, .row__tag {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 550; padding: 2px 9px; border-radius: 999px;
}
.row__kind {
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 38%, transparent);
}
.row__tag { color: var(--ink-dim); border: 1px solid var(--line); }
.row__panel { margin-top: 8px; font-size: 14px; color: var(--ink-mid); }
.row__panel b { font-weight: 550; color: var(--ink); }

/* Per-kind colour. Every row takes --c and the hover, rule and badge follow. */
.row--talk     { --c: var(--tud-blue-lt); }
.row--panel    { --c: var(--tud-orange); }
.row--open     { --c: var(--tud-purple); }
.row--report   { --c: var(--tud-teal); }
.row--fireside { --c: var(--ukp-red); }
.row--break    { --c: var(--tud-lime); }

/* Breaks recede; panels and the AI100 block carry the page. */
.row--break { padding-block: 11px; }
.row--break .row__title { font-size: 14.5px; font-weight: 450; color: var(--ink-dim); }
.row--break .row__start { color: var(--ink-dim); font-weight: 400; }
.row--panel, .row--fireside {
  background: color-mix(in srgb, var(--c) 9%, var(--surface));
  border-left-color: var(--c);
}
.row--panel .row__title, .row--fireside .row__title { font-weight: 600; }
.row--open .row__title { font-weight: 450; }

/* Half-day header naming the session chair. */
.chairrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 22px -16px 4px; padding: 10px 16px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--tud-purple) 9%, var(--surface));
  border-left: 3px solid var(--tud-purple);
}
.agenda__list > .chairrow:first-child { margin-top: 10px; }
.chairrow__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tud-purple);
}
.chairrow__who { font-size: 14.5px; color: var(--ink-mid); }
.chairrow__who b { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .chairrow { margin-inline: 0; } }

/* AI100 rows: the special inside the program. */
.row--special {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--tud-yellow) 22%, var(--surface)),
    color-mix(in srgb, var(--tud-teal) 12%, var(--surface)));
  border-left-color: var(--tud-yellow);
  border-bottom-color: transparent;
}
.row--special + .row--special { margin-top: 4px; }
.row--special .row__title { font-weight: 600; }
.row__kind--special {
  color: #0b2033; background: var(--tud-yellow); border-color: var(--tud-yellow);
}

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 6px; padding-inline: 12px; }
  .row__time { flex-direction: row; gap: 8px; align-items: baseline; }
  .row__end::before { content: "to "; }
  .dayswitch { width: 100%; }
  .dayswitch__btn { flex: 1; justify-content: center; padding-inline: 10px; }
}

/* ---------- venue ---------- */
.venue {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.venue__figure { margin: 0; }
.venue__figure img {
  width: 100%; height: clamp(280px, 38vw, 420px); object-fit: cover;
  border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow);
}
.venue__addr { margin-top: 0; color: var(--ink-mid); font-size: 16px; line-height: 1.65; }
@media (max-width: 880px) {
  .venue { grid-template-columns: 1fr; }
  .venue__figure { order: 2; }
}

/* ---------- footer: photo credits only ---------- */
.foot { padding-block: 22px 26px; background: var(--bg); }
.foot__legal p { font-size: 12.5px; color: var(--ink-dim); }
.foot__legal a { color: var(--ink-dim); }