/* ═══════════════════════════════════════════════════════════════════════════
   AI for Business 2026 — stylesheet
   ───────────────────────────────────────────────────────────────────────────
   Visual language mirrors dny.ai:
     · alternating sections — blue gradient ↔ white ↔ blue gradient
     · Archia (bold) for headings, Inter for body
     · minimal liquid glass: rgba(255,255,255,.1) + blur, 5px radius, hairline
     · soft blurred colour blobs on the white sections
     · orange gradient CTAs, black "dny AI" logo block, vertical labels, arrows
   Order: RESET · TOKENS · TYPE · LAYOUT · COMPONENTS · NAV · HERO · ABOUT ·
          PROGRAM · REGISTRATION · FOOTER · DIALOG · PRIVACY · MOTION · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }


/* ── TOKENS ─────────────────────────────────────────────────────────────── */
/* fonts/: Inter subset to Latin + Latin Extended-A (Czech) + punctuation
   and arrows; Archia SemiBold/Bold converted to woff2. Full originals are
   in Grafika/Písmo/web-sources (not deployed) — rebuild with fontTools'
   pyftsubset if a page ever needs characters outside those ranges. */
@font-face { font-family: Archia; src: url('fonts/archia-regular.woff2') format('woff2');  font-weight: 400; font-display: swap; }
@font-face { font-family: Archia; src: url('fonts/archia-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Archia; src: url('fonts/archia-bold.woff2')     format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter;  src: url('fonts/inter-var-latin.woff2') format('woff2');        font-weight: 100 900; font-display: swap; }

:root {
  /* surfaces */
  --grad-hero:   linear-gradient(198deg, #2b7fd0 0%, #0c519a 52%, #003e7d 100%);
  --grad-blue:   linear-gradient(210deg, #1b7bc0 6%, #0e4f8c 55%, #0a2f5d 100%);
  --grad-orange: linear-gradient(48deg, #a54200 0%, #f3801a 60%, #fa8200 100%);
  --white:  #ffffff;
  --black:  #000000;

  /* accents */
  --orange:      #f3801a;
  --orange-deep: #c96b18;
  --blue-accent: #0f86ef;
  --blue-text:   #0a6cc2;   /* the same blue, dark enough for text on white (5.3:1) */

  /* ink (on white) */
  --ink:      #1b2b3a;
  --ink-soft: #5d6c7b;

  /* glass */
  --glass:      rgba(255, 255, 255, .10);
  --glass-2:    rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .22);
  --glass-blur: blur(14px);

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --container: 1180px;
  --narrow: 860px;
  --gutter: 24px;
  --radius: 5px;
  /* snappy ease-out — critically-damped spring feel (Apple: response ~0.35, no overshoot) */
  --ease: cubic-bezier(.32, .72, 0, 1);
}


/* ── TYPE ───────────────────────────────────────────────────────────────── */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  color: var(--white);
  background: #0a2f5d;
  -webkit-font-smoothing: antialiased;
}

/* tracking is size-specific: tighten as display type grows, body stays at 0 */
h1, h2, h3, h4 { font-family: Archia, Inter, sans-serif; font-weight: 700; line-height: 1.04; }
h1 { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.022em; }
h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.016em; }
h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.15; letter-spacing: -.008em; }
strong, b { font-weight: 600; }
em { font-style: normal; }

.eyebrow {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent, var(--orange));
  margin-bottom: var(--s-4);
}
.accent { color: var(--accent, var(--blue-accent)); }


/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - (2 * var(--gutter)), var(--container)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (2 * var(--gutter)), var(--narrow)); margin-inline: auto; }

/* Every band carries a colour context. Components read --fg / --line / --accent
   so they adapt on the white sections without duplicate rules. */
.band {
  --fg: var(--white);
  --fg-dim: rgba(255, 255, 255, .74);
  --fg-mute: rgba(255, 255, 255, .55);
  --line: rgba(255, 255, 255, .18);
  --accent: var(--orange);
  position: relative;
  padding-block: var(--s-10);
  overflow: clip;
  isolation: isolate;
  color: var(--fg);
}
.band--blue   { background: var(--grad-blue); }
.band--orange { background: var(--grad-orange); }
.band--white  {
  --fg: var(--ink);
  --fg-dim: #40566a;
  --fg-mute: var(--ink-soft);
  --line: rgba(20, 40, 60, .14);
  --accent: var(--blue-text);
  background: var(--white);
}

/* soft blurred colour blobs — only meaningful on the white bands */
/* overflow-anchor: a blob pinned to a section's bottom moves whenever the
   section grows; left as a scroll anchor, the browser would scroll the page
   along with it (opening a workshop list then looks like it opens upwards) */
.blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(120px); pointer-events: none; overflow-anchor: none; }
.blob--blue   { width: 44vw; height: 44vw; background: rgba(31, 122, 214, .34);  top: -16vw; right: -12vw; }
.blob--orange { width: 40vw; height: 40vw; background: rgba(250, 130, 0, .26);   bottom: -18vw; left: -14vw; }
.band > .wrap, .band > .wrap--narrow { position: relative; z-index: 1; }

.section-head { margin-bottom: var(--s-8); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head .lead { margin-top: var(--s-4); font-size: clamp(17px, 1.5vw, 20px); color: var(--fg-dim); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }


/* ── COMPONENTS ─────────────────────────────────────────────────────────── */

/* the one glass treatment (dny.ai style: translucent, blurred, hairline) */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.glass--2 { background: var(--glass-2); }

/* a solid card for the white sections — one elevation source (shadow, no border) */
.card {
  background: var(--white);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15, 45, 85, .05), 0 22px 50px rgba(15, 45, 85, .10);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), opacity .16s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
/* feedback on press-down, fast (Apple: respond on pointer-down, ~100ms) */
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--orange {
  /* longhands, not the `background` shorthand — the shorthand resets
     origin/repeat and the 1px transparent border on .btn then makes the
     tiled gradient wrap, leaving a light seam down the left edge */
  background-color: var(--orange);
  background-image: linear-gradient(90deg, var(--orange-deep), var(--orange));
  background-repeat: no-repeat;
  background-origin: border-box;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(197, 96, 0, .28);
}
.btn--light { background: var(--white); color: var(--ink); box-shadow: 0 12px 30px rgba(6, 26, 55, .22); }
.btn--outline { background: transparent; border-color: currentColor; color: var(--fg); }
.btn--outline:hover { background: rgba(255, 255, 255, .12); }
.btn--small { gap: var(--s-2); padding: 10px 16px; font-size: 11.5px; }
.band--white .btn--outline:hover { background: rgba(20, 40, 60, .06); }

/* track list — one clean editorial column, hairline separators */
.track-bullets {
  list-style: none;
  padding: 0;
  display: grid;
  margin: var(--s-6) auto;
  max-width: 460px;
  border-top: 1px solid var(--line);
}
.track-bullets li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  font-size: 15px;
}

/* vertical rotated label + corner arrow (poster identity) */
.vrail {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.corner-arrow { position: absolute; font-size: 24px; line-height: 1; color: rgba(255, 255, 255, .6); pointer-events: none; }

/* one authored entrance: the hero content settles in on load */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-inner > * { animation: hero-in .6s var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: .06s; }
.hero-inner > :nth-child(3) { animation-delay: .12s; }
.hero-inner > :nth-child(4) { animation-delay: .18s; }
.hero-inner > :nth-child(5) { animation-delay: .24s; }


/* ═══ NAV ═══════════════════════════════════════════════════════════════ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 30, 60, .4);
  /* translucent material: content scrolls underneath, a faint top edge catches light */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-nav.scrolled { background: rgba(6, 26, 52, .96); box-shadow: 0 8px 30px rgba(3, 14, 32, .3); }
.mega-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
}
.nav-logo { display: inline-flex; align-items: center; justify-content: center; padding: var(--s-2) var(--s-3); background: var(--black); border-radius: var(--radius); margin-right: auto; }
.event-logo { width: 84px; filter: invert(1); }
.mega-nav-links { display: flex; gap: var(--s-1); }
.mega-nav-links a {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;             /* vibrancy: heavier over the translucent bar */
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, .88);
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
}
.mega-nav-links a:hover { color: var(--white); background: var(--glass); }
.mega-nav-links a:active { transform: scale(.95); }
.mega-nav-links a.is-active { color: var(--white); background: var(--glass); }
.nav-registration {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--orange);
  background-image: linear-gradient(90deg, var(--orange-deep), var(--orange));
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .16s var(--ease);
}
.nav-registration:hover { transform: translateY(-1px); }
.mega-nav a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }


/* ═══ HERO ══════════════════════════════════════════════════════════════ */
.hero {
  --fg: var(--white);
  --accent: var(--orange);
  position: relative;
  display: flex;
  align-items: center;
  background: var(--grad-hero);
  overflow: clip;
  isolation: isolate;
  color: var(--white);
}
/* full-bleed title artwork — side-lit portrait + "AI" lockup, right-weighted */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url('Grafika_Fotky/title_image.webp') 78% center / cover no-repeat;
}
/* readability wash: deepen the left third under the copy, fade the base out */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(4, 30, 64, .82) 0%, rgba(6, 40, 82, .42) 38%, rgba(6, 40, 82, 0) 64%),
    linear-gradient(0deg, rgba(3, 22, 48, .5), transparent 46%);
}
.hero-inner { position: relative; z-index: 1; padding-block: 106px 74px; }
.hero .eyebrow { color: var(--white); margin-bottom: var(--s-6); }
.hero h1 { font-size: clamp(50px, 10vw, 122px); max-width: 15ch; margin-bottom: var(--s-5); }
.hero-subtitle { font-size: clamp(20px, 2.8vw, 32px); font-weight: 500; margin-bottom: 54px; color: rgba(255, 255, 255, .92); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* facts panel — dny.ai "v číslech" style: wide, bright frost, sharp corners */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  width: 100%;
  margin-bottom: 54px;
  padding: var(--s-6) var(--s-7);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.facts > div { border: 0; padding: 0; }
.facts strong { display: block; font-family: Archia, sans-serif; font-weight: 600; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -.01em; }
.facts small { display: block; margin-top: var(--s-2); font-size: 13px; font-weight: 500; letter-spacing: .005em; color: rgba(255, 255, 255, .82); }


/* ═══ ABOUT ("O akci") — white section ═════════════════════════════════ */
.about-lead {
  font-family: Archia, sans-serif;
  font-weight: 600;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.28;
  text-align: left;
  color: var(--ink);
  max-width: 100%;
  margin: 0 0 var(--s-7);
  text-wrap: balance;
}
.about-text { max-width: 100%; margin: 0; text-align: left; color: var(--fg-dim); }
.about-text p { max-width: none; margin-bottom: var(--s-4); font-size: clamp(16px, 1.4vw, 18px); }
.about-text p:last-child { margin-bottom: 0; }

/* five tracks — one editorial column, name + description per rule */
.about .track-bullets {
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: var(--s-6) 0 0;
  border-top: 0;
  text-align: left;
}
.about .track-bullets li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border-bottom: 0;
  padding-block: var(--s-4);
}
.about .track-bullets li:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 76%;
  height: 1px;
  background: var(--line);
}
.about .track-bullets .track-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: Archia, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.about .track-bullets .track-name::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.about .track-bullets .track-desc {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.about-text--closing { margin-top: var(--s-8); }
.about-closing { font-weight: 600; color: var(--ink); }

/* scrolling partner logos — dny.ai style */
.logo-marquee { margin-top: var(--s-9); }
.logo-marquee-label {
  text-align: left;
  width: min(100% - (2 * var(--gutter)), var(--container));
  max-width: none;
  margin: 0 auto var(--s-6);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.logo-marquee-viewport {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  padding-left: clamp(48px, 6vw, 88px);
  /* identical tracks (3 — enough to span past 4K) each slide one full
     width then restart; the next track has already taken their place,
     so the loop never breaks */
  animation: logo-scroll 60s linear infinite;   /* ~110 px/s on desktop */
  will-change: transform;
  backface-visibility: hidden;
  /* grayscale + opacity live here, on the one moving layer, instead of
     on each of the ~66 <img>s — one filter pass per frame instead of 66 */
  opacity: .62;
  filter: grayscale(1);
}
.logo-track img {
  height: 38px;
  width: auto;
  flex: none;
}
/* near-square stacked lockups — at the shared 38px height
   they read much smaller than the wordmarks around them, so give them
   more room to match the row's visual weight */
.logo-track img[src*="ey_grey"],
.logo-track img[src*="MamaAI_logo-grey"],
.logo-track img[src*="CSOB-grey"] {
  height: 58px;
}
.logo-track img[src*="o2_grey"] { height: 50px; }
.logo-track img[src*="czai_grey"],
.logo-track img[src*="pactusai_grey"] { height: 46px; }
@keyframes logo-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }


/* ═══ PROGRAM — blue section; full-width windowed table ═══════════════
   Open, like My programme and the mobile list: no frame, hairlines between
   time rows, cards on the section's own blue. The window scrolls both ways
   when the grid doesn't fit; the header row and TIME column stay pinned and
   only pick up a frosted backing once something scrolls underneath. */
.wrap--wide { width: min(100% - (2 * var(--gutter)), 2200px); margin-inline: auto; }
.schedule-window {
  --sched-backing: rgba(10, 52, 99, .94);
  --sched-time: 132px;
  --sched-col: 224px;
  position: relative;
  max-height: max(520px, calc(100vh - 120px));
  margin-block: var(--s-3) var(--s-5);
  overflow: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.schedule-grid {
  display: grid;
  grid-template-columns: var(--sched-time) repeat(7, minmax(var(--sched-col), 1fr));
  /* the grid box itself must be as wide as its columns: sticky cells (the
     TIME column) only stay pinned within it, so a box narrower than the
     overflowing columns would let them scroll away halfway across */
  min-width: calc(var(--sched-time) + 7 * var(--sched-col));
}

.sched-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-4) 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sched-cell > .slot, .sched-cell > .sched-marker { flex: 1; }
/* rows across all tracks (lightning-talk streams, breaks) stay within the
   visible part of the window while the tracks scroll sideways under them */
.sched-span > * {
  position: sticky;
  left: calc(var(--sched-time) + 6px);
  width: min(100%, calc(var(--sched-view, 100%) - var(--sched-time) - 12px));
}

/* header row: one continuous frosted band; every label starts on the
   same top line, one- and two-line track names alike */
.sched-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  padding: var(--s-2) 3px;
  background: rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .2s var(--ease);
}
.sched-head:nth-child(8) { border-top-right-radius: 8px; }
.sched-cas {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: calc(var(--s-4) + var(--s-3)) var(--s-3) var(--s-4) var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--orange);
  transition: background-color .2s var(--ease);
}
.sched-corner {
  left: 0;
  z-index: 4;
  padding: calc(var(--s-2) + 10px) var(--s-4) var(--s-2);
  border-top-left-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.schedule-window.is-scrolled-y .sched-head,
.schedule-window.is-scrolled-x .sched-cas,
.schedule-window.is-scrolled-x .sched-corner {
  background: var(--sched-backing);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* track names: buttons that highlight their track */
.sched-track {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  width: 100%;
  padding: 10px var(--s-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), opacity .2s var(--ease);
}
.sched-track::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  transition: background-color .16s var(--ease);
}
.sched-track:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.sched-track:active { transform: scale(.98); }
.sched-track:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.sched-track[aria-pressed="true"] { color: var(--white); background: rgba(243, 128, 26, .18); }
.sched-track[aria-pressed="true"]::before { background: var(--orange); }
.has-focus .sched-track[aria-pressed="false"] { opacity: .5; }
/* everything outside the highlighted track steps back */
.sched-cell > * { transition: opacity .2s var(--ease), filter .2s var(--ease); }
.sched-cell.is-dimmed > * { opacity: .3; filter: grayscale(1); }

.slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  color: var(--white);
  background: rgba(4, 16, 34, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.slot:hover { transform: translateY(-2px); border-color: var(--orange); }
.slot:active { transform: scale(.985); transition-duration: .1s; }
.slot:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.slot strong { font-family: Archia, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; }
.slot strong span { color: var(--orange); margin-left: var(--s-1); }
.slot small { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); margin-top: var(--s-1); }
.slot small b { font-weight: 600; }

.slot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px var(--s-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
/* "10:15–11:00 · Workshop": each piece carries its "·" in front, hung
   just outside the left edge and clipped there — so it shows between the
   pieces on one line and disappears when the second piece wraps */
.slot-when { min-width: 0; overflow: hidden; }
.slot-when > span { display: flex; flex-wrap: wrap; margin-left: -1em; }
.slot-when > span > span { margin-left: 1em; }
.slot-when > span > span:first-child { white-space: nowrap; }
.slot-when > span > span::before { content: '·'; display: inline-block; width: 1em; margin-left: -1em; text-align: center; }
.slot-lang {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .14);
}
.slot-lang--cz { background: rgba(255, 154, 60, .22); color: #ffb877; }
/* the same badge inline in the note that explains it */
.schedule-note .slot-lang { display: inline-block; margin-inline: 2px; vertical-align: 1px; }

.sched-stack { display: flex; flex-direction: column; gap: var(--s-2); }
.sched-plenary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2); align-content: start; }
.sched-streams { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sched-stream-head {
  margin-bottom: var(--s-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.sched-marker {
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

.schedule-hint { max-width: none; font-size: 13px; color: rgba(255, 255, 255, .78); }
.schedule-note { max-width: none; margin-top: var(--s-3); font-size: 13px; color: rgba(255, 255, 255, .78); }

/* mobile programme list — time down the page, parallel tracks/streams
   swiping sideways (see RESPONSIVE); shown in place of .schedule-window
   below 720px. Reuses .slot/.sched-stack/.sched-marker from the grid above. */
.schedule-mobile { display: none; }

/* Full programme / My programme switch in the section header */
.section-head--program { margin-bottom: var(--s-6); }
.day-cal { margin-top: var(--s-4); }
.day-cal .btn { color: var(--white); }
.program-tabs {
  display: inline-flex;
  gap: var(--s-1);
  margin-top: var(--s-5);
  padding: var(--s-1);
  border: 1px solid var(--glass-line);
  border-radius: calc(var(--radius) + 3px);
  background: rgba(4, 16, 34, .35);
}
.program-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.program-tab:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.program-tab[aria-selected="true"] { color: var(--ink); background: var(--white); }
.program-tab:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0;
  text-align: center;
}

/* saveable session card: the card + a heart in its top-right corner
   (siblings — buttons can't nest), lifted together on hover */
.slot-wrap { position: relative; transition: transform .16s var(--ease); }
.slot-wrap:hover { transform: translateY(-2px); }
.slot-wrap .slot:hover { transform: none; }
.slot-wrap .slot-meta { padding-right: 24px; }
.slot-wrap.is-saved .slot { border-color: rgba(243, 128, 26, .6); }
.slot-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: color .16s var(--ease);
}
.slot-fav svg { width: 17px; height: 17px; }
.slot-fav path, .dialog-fav path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill .16s var(--ease);
}
.slot-fav:hover, .slot-fav[aria-pressed="true"] { color: var(--orange); }
.slot-fav[aria-pressed="true"] path, .dialog-fav[aria-pressed="true"] path { fill: var(--orange); stroke: var(--orange); }
.slot-fav:focus-visible { outline: 2px solid var(--white); outline-offset: -3px; }
.slot-fav.is-popping svg, .dialog-fav.is-popping svg { animation: fav-pop .36s var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.35); } }

/* mini timeline under a session: the whole block dashed, the session's
   own stretch solid orange (--from/--to are 0–1, set from app.js) */
.slot-timeline {
  position: relative;
  display: block;
  height: 2px;
  margin-top: var(--s-2);
  background: repeating-linear-gradient(90deg, rgba(255, 184, 119, .42) 0 3px, transparent 3px 6px);
}
.slot-timeline::after {
  content: '';
  position: absolute;
  top: -.5px;
  bottom: -.5px;
  left: calc(var(--from) * 100%);
  right: calc((1 - var(--to)) * 100%);
  border-radius: 2px;
  background: var(--orange);
}
/* desktop: the card's own bottom edge is the block, and the session's
   stretch of it shows as a solid 4px orange segment along that edge */
@media (min-width: 721px) {
  .slot-wrap .slot { position: relative; overflow: hidden; }
  .slot-timeline { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; margin: 0; background: none; }
  .slot-timeline::after { top: 0; bottom: 0; border-radius: 0; }
}

/* My programme tab */
.my-programme { margin-block: var(--s-5) var(--s-4); }
.my-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* "Add to calendar": the button opens a row of calendar services under it */
.cal-toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease), margin .2s var(--ease);
}
.cal-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
.cal-panel {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: rgba(4, 16, 34, .35);
  animation: cal-in .22s var(--ease) both;
}
@keyframes cal-in { from { opacity: 0; transform: translateY(-4px); } }
.cal-panel-note { margin-bottom: var(--s-3); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.cal-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cal-panel-local { margin: var(--s-3) 0 0; color: #ffb877; }
.cal-option {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--white);
  transition: background-color .16s var(--ease), border-color .16s var(--ease), transform .1s var(--ease);
}
.cal-option:hover { background: rgba(255, 255, 255, .1); border-color: var(--orange); }
.cal-option:active { transform: scale(.97); }
.cal-option:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.cal-option[target="_blank"]::after { content: '↗'; margin-left: 6px; color: var(--orange); }
.my-status { margin-top: var(--s-3); font-size: 13px; color: #a9d8ff; overflow-wrap: anywhere; }
.my-status:empty { display: none; }
.my-shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(243, 128, 26, .5);
  border-radius: var(--radius);
  background: rgba(243, 128, 26, .12);
  font-size: 14px;
}
.my-list:not(:empty) { margin-top: var(--s-5); border-top: 1px solid var(--glass-line); }
.my-block {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.my-time { padding-top: var(--s-3); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--orange); }
.my-items { display: flex; flex-direction: column; gap: var(--s-4); }
.my-label {
  margin-bottom: var(--s-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
/* overlapping saved sessions: dashed orange edge + a note naming the clash */
.my-item.has-clash .slot { border-color: var(--orange); border-style: dashed; }
.my-clash { position: relative; margin-top: var(--s-2); padding-left: 20px; font-size: 12px; line-height: 1.45; color: #ffb877; }
.my-clash::before {
  content: '!';
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.my-empty {
  margin-top: var(--s-5);
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--glass-line);
  border-radius: var(--radius);
  text-align: center;
}
.my-empty p { margin: 0 auto var(--s-4); font-size: 15px; color: var(--fg-dim); }
.my-empty strong { color: var(--white); }


/* ═══ REGISTRATION — white section ════════════════════════════════════ */
.registration-layout {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(460px, 1.55fr);
  gap: var(--s-7);
  align-items: start;
}
/* the two contact cards keep their own fixed height — equal to each other
   (the taller one sets it), independent of how long the form grows */
.registration-side { display: grid; grid-auto-rows: 1fr; gap: var(--s-5); }
/* after ticket sales close the form is gone: the two cards sit side by side */
.registration-layout:has(> form[hidden]) { grid-template-columns: 1fr; }
.registration-layout:has(> form[hidden]) .registration-side { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .registration-layout:has(> form[hidden]) .registration-side { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s-7) var(--s-6);
}
.contact-card .eyebrow { margin-bottom: var(--s-3); color: var(--ink-soft); }
.contact-card h3 { font-weight: 600; margin-bottom: var(--s-2); }
.contact-card p { font-size: 15px; color: var(--fg-dim); margin-bottom: var(--s-3); }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card a { display: inline-block; color: var(--blue-text); font-weight: 600; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-card a + p { margin-top: var(--s-3); }
.contact-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue-accent); margin-bottom: var(--s-5); }
.contact-card img:not(.contact-photo) { width: 148px; margin-top: var(--s-5); }

.registration-form { min-width: 0; padding: var(--s-7); }   /* min-width: a long workshop summary must not widen the grid column */
.registration-form label:not(.check):not(.ws-option) { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--s-5); color: var(--ink); }
.field-hint { display: block; margin-top: var(--s-2); font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.registration-form input[type="text"],
.registration-form input[type="email"] {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-3);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: #f5f8fb;
  border: 1px solid rgba(20, 40, 60, .16);
  border-radius: var(--radius);
}
.registration-form input:focus-visible {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(15, 134, 239, .16);
  background: var(--white);
}
/* tickets: a quantity stepper per ticket type, the total underneath */
.tickets { min-width: 0; margin: 0 0 var(--s-5); padding: 0; border: 0; }
.tickets legend { margin-bottom: var(--s-1); padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.ticket-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.ticket-loading { font-size: 14px; color: var(--ink-soft); }
.ticket-error {
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(243, 128, 26, .4);
  border-radius: var(--radius);
  background: rgba(243, 128, 26, .08);
  font-size: 14px;
  color: #a64d00;
}
.ticket-error a { color: inherit; font-weight: 600; }
.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border: 1px solid rgba(20, 40, 60, .16);
  border-radius: var(--radius);
  background: #f5f8fb;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.ticket-row.is-chosen { background: rgba(15, 134, 239, .06); border-color: rgba(15, 134, 239, .45); }
.ticket-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-info strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.ticket-info small { font-size: 13px; color: var(--ink-soft); }
.qty { display: flex; flex: none; align-items: center; gap: var(--s-1); }
.qty-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(20, 40, 60, .2);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), transform .1s var(--ease);
}
.qty-btn:hover:not(:disabled) { border-color: var(--blue-text); color: var(--blue-text); }
.qty-btn:active:not(:disabled) { transform: scale(.94); }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 134, 239, .25); }
.registration-form .qty input {
  width: 52px;
  height: 36px;
  margin: 0;
  padding: 0 var(--s-1);
  border: 1px solid rgba(20, 40, 60, .16);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.registration-form .qty input::-webkit-inner-spin-button,
.registration-form .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.registration-form .qty input:focus-visible { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(15, 134, 239, .16); }
.ticket-total { max-width: none; margin-top: var(--s-3); font-size: 14px; color: var(--ink-soft); }
.ticket-total strong { font-size: 16px; color: var(--ink); }
.ticket-total.is-empty { color: #a64d00; }

/* workshops: one collapsible checklist per Parallel Sessions block */
.workshops { min-width: 0; margin: 0 0 var(--s-5); padding: 0; border: 0; }
.workshops legend { margin-bottom: var(--s-1); padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.workshops .field-hint { margin-top: var(--s-1); }
.workshops .field-hint a { color: var(--blue-text); }
.ws-blocks { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.ws-block { border: 1px solid rgba(20, 40, 60, .16); border-radius: var(--radius); background: #f5f8fb; }
.ws-block[open] { background: var(--white); }
.ws-block summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-7) var(--s-3) var(--s-3);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
}
.ws-block summary::-webkit-details-marker { display: none; }
.ws-block summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--s-4);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.ws-block[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.ws-block summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 134, 239, .25); }
.ws-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ws-nowrap, .ws-time { white-space: nowrap; }
.ws-picked { overflow: hidden; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.ws-block.has-picks .ws-picked { color: var(--blue-text); }
.ws-list { border-top: 1px solid rgba(20, 40, 60, .1); }
.ws-option {
  display: grid;
  grid-template-columns: 18px 84px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border-bottom: 1px solid rgba(20, 40, 60, .06);
  cursor: pointer;
  transition: background-color .16s var(--ease);
}
.ws-option:last-child { border-bottom: 0; }
.ws-option:hover { background: rgba(15, 134, 239, .05); }
.ws-option:has(input:checked) { background: rgba(15, 134, 239, .08); }
.ws-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue-accent); }
.ws-time { padding-top: 2px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ws-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-text strong { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ws-text small { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.ws-text .slot-lang--cz { display: inline-block; vertical-align: 1px; background: rgba(243, 128, 26, .14); color: #a64d00; }
/* a session that runs alongside a ticked one: greyed, with the reason */
.ws-option.is-clash { cursor: not-allowed; }
.ws-option.is-clash .ws-time,
.ws-option.is-clash strong,
.ws-option.is-clash small:not(.ws-clash) { opacity: .45; }
.ws-clash { display: none; color: #a64d00 !important; }
.ws-option.is-clash .ws-clash { display: block; }
.ws-block .error { padding: 0 var(--s-3) var(--s-2); }
.ws-block .error:empty { display: none; }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 13px; line-height: 1.5; margin-bottom: var(--s-3); color: var(--fg-dim); }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue-accent); }
.check a { color: var(--blue-text); }
.error { display: block; min-height: 15px; margin-top: var(--s-1); font-size: 12px; color: #d33; }
.submit-button { width: 100%; justify-content: center; margin-top: var(--s-4); }
.form-status { margin-top: var(--s-3); font-size: 14px; color: var(--blue-text); }

/* shown after returning from Stripe Checkout */
.registration-notice {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(15, 134, 239, .08);
  border: 1px solid rgba(15, 134, 239, .3);
}
.registration-notice a { color: var(--blue-text); font-weight: 600; }
.registration-notice[data-state="cancelled"] {
  background: rgba(243, 128, 26, .1);
  border-color: rgba(243, 128, 26, .4);
}


/* ═══ FOOTER — blue section ═══════════════════════════════════════════ */
.footer { padding-bottom: var(--s-7); }
.footer-nav { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-8); padding-bottom: var(--s-8); align-items: stretch; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-label { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: var(--s-4); }
.footer-nav h2 { font-family: Archia, sans-serif; font-size: clamp(24px, 2.8vw, 34px); margin: var(--s-2) 0 var(--s-5); line-height: 1.08; }
.footer-nav nav, .footer-connect { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.footer-nav a { font-size: 15px; font-weight: 400; text-decoration: none; color: rgba(255, 255, 255, .82); }
.footer-nav nav a:hover, .footer-connect a:hover { color: var(--white); text-decoration: underline; }
.footer-home { margin-top: auto; font-size: 13px; font-weight: 500; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  color: rgba(255, 255, 255, .66);
}


/* ═══ DIALOG ════════════════════════════════════════════════════════════ */
.session-dialog {
  width: min(560px, calc(100% - (2 * var(--gutter))));
  margin: auto;
  padding: var(--s-7);
  color: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, #0d3a70, #06274d);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}
.session-dialog[open] { animation: dialog-in .34s var(--ease) both; }
/* the scrim materialises with the sheet, not a hard cut */
.session-dialog::backdrop { background: rgba(4, 16, 34, .68); backdrop-filter: blur(6px); animation: scrim-in .34s var(--ease) both; }
.session-dialog .eyebrow { margin-bottom: var(--s-3); color: var(--orange); }
.session-dialog h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin-bottom: var(--s-4); }
.dialog-speaker { color: #7cc0ff; font-weight: 600; margin-bottom: var(--s-2); }
.dialog-meta {
  margin-bottom: var(--s-5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.dialog-meta:empty { display: none; }
.dialog-description { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.dialog-details {
  display: grid;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  line-height: 1.5;
}
.dialog-details[hidden] { display: none; }
.dialog-details dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.dialog-details dd { margin: 0 0 var(--s-3); color: rgba(255, 255, 255, .84); }
.dialog-details dd:last-child { margin-bottom: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.dialog-actions .btn { color: var(--white); }
.dialog-fav { color: var(--white); }
.dialog-fav svg { width: 15px; height: 15px; }
.dialog-fav[aria-pressed="true"] { border-color: var(--orange); }
.dialog-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius);
}
.dialog-close:hover { color: var(--orange); }
.dialog-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* materialize: blur + scale together on enter, so it reads as glass arriving */
@keyframes dialog-in {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.4); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }


/* ═══ PRIVACY PAGE ══════════════════════════════════════════════════════ */
.privacy-page { min-height: 100vh; background: var(--grad-blue); }
.privacy-content { width: min(100% - (2 * var(--gutter)), 780px); margin-inline: auto; padding-block: var(--s-9); }
.back-link { font-size: 13px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.privacy-content .eyebrow { margin-top: var(--s-8); color: rgba(255, 255, 255, .7); }
.privacy-content h1 { font-size: clamp(38px, 6vw, 64px); margin-bottom: var(--s-6); }
.privacy-content p { color: rgba(255, 255, 255, .85); }
.privacy-content p a, .privacy-content li a { color: #7cc0ff; }
.privacy-content h2 { margin: var(--s-7) 0 var(--s-3); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; }
.privacy-content h3 { margin: var(--s-5) 0 var(--s-2); font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.privacy-content p + p { margin-top: var(--s-3); }
.privacy-content ul { margin: var(--s-3) 0 0; padding-left: 1.2em; color: rgba(255, 255, 255, .85); }
.privacy-content li + li { margin-top: var(--s-2); }
.privacy-content ul + p { margin-top: var(--s-4); }
/* thank-you page (after Stripe Checkout) — same frame as the privacy page */
.thanks-page .privacy-content h1 { margin-bottom: var(--s-4); font-size: clamp(30px, 4.2vw, 46px); }
.privacy-content .thanks-lead { font-size: 16px; line-height: 1.6; }
.thanks-facts {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: rgba(4, 16, 34, .35);
}
.thanks-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); }
.thanks-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); padding-top: 3px; }
.thanks-facts dd { margin: 0; color: rgba(255, 255, 255, .9); }
.privacy-content .thanks-list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.thanks-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
.thanks-time { padding-top: 2px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(255, 255, 255, .78); }
.thanks-list strong { display: block; font-weight: 600; line-height: 1.35; color: var(--white); }
.thanks-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.privacy-content .thanks-note { font-size: 13px; color: rgba(255, 255, 255, .75); }
.thanks-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.thanks-actions .btn--outline { color: var(--white); }
.thanks-page .cal-panel { margin-top: var(--s-4); }
.privacy-content .thanks-contact { margin-top: var(--s-7); font-size: 14px; color: rgba(255, 255, 255, .78); }
.privacy-content .thanks-contact a { color: #7cc0ff; }
@media (max-width: 720px) {
  .thanks-facts { padding: var(--s-4); }
  .thanks-facts div { grid-template-columns: 1fr; gap: var(--s-1); }
  .thanks-list li { grid-template-columns: 1fr; gap: 0; }
}
.privacy-content .privacy-updated { margin-top: var(--s-8); font-size: 13px; color: rgba(255, 255, 255, .75); }


/* ═══ COOKIE BANNER (analytics.js) ═════════════════════════════════════ */
.consent {
  position: fixed;
  z-index: 300;
  right: var(--s-4);
  bottom: var(--s-4);
  left: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  width: min(1000px, calc(100% - 2 * var(--s-4)));
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  color: var(--white);
  background: rgba(6, 26, 52, .97);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  animation: consent-in .3s var(--ease) both;
}
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
.consent-text { flex: 1 1 420px; max-width: none; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.consent-text strong { color: var(--white); }
.consent-text a { color: #7cc0ff; }
.consent-actions { display: flex; gap: var(--s-2); }
.consent .btn--outline { color: var(--white); }
.footer-nav nav a[data-cookie-settings] { cursor: pointer; }
@media (max-width: 720px) {
  .consent { padding: var(--s-4); }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}


/* ═══ MOTION & ACCESSIBILITY ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-inner > * { animation: none; opacity: 1; transform: none; }
  .logo-track { animation: none; transform: none; }
  .session-dialog[open] { animation: none; }
}
/* reduced transparency: frost the glass solid, drop the blur */
@media (prefers-reduced-transparency: reduce) {
  .site-nav { background: #0a2f5d; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav.scrolled { background: #072140; }
  .facts { background: #1d5aa0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { background: rgba(255, 255, 255, .95); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); }
  .session-dialog::backdrop { backdrop-filter: none; background: rgba(4, 16, 34, .9); }
}
/* higher contrast: near-solid surfaces with a defined border */
@media (prefers-contrast: more) {
  .facts { border-color: rgba(255, 255, 255, .55); }
  .btn--outline { border-width: 2px; }
  .mega-nav-links a { color: #fff; }
  .about-text, .contact-card p { color: var(--ink); }
  .facts small { color: rgba(255, 255, 255, .92); }
}
@media (hover: none) {
  .btn:hover, .slot:hover, .slot-wrap:hover { transform: none; }
}


/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .band { padding-block: var(--s-9); }
  /* copy spans the width here — bias the artwork to its plain-blue side
     and lift the wash so text stays legible over it */
  .hero::before { background-position: 88% center; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(4, 30, 64, .58), rgba(4, 30, 64, .58)),
      linear-gradient(0deg, rgba(3, 22, 48, .5), transparent 46%);
  }
  .registration-layout { grid-template-columns: 1fr; gap: var(--s-7); }
  .registration-form { order: -1; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .band { padding-block: var(--s-8); }
  .hero-inner { padding-block: var(--s-8); }
  .mega-nav { flex-wrap: wrap; row-gap: var(--s-2); }
  .nav-logo { order: 1; }
  .event-logo { width: 36px; }
  .nav-registration { order: 2; margin-left: auto; padding: var(--s-2) var(--s-4); font-size: 11px; }
  .mega-nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 2px; margin-left: calc(-1 * var(--s-2)); }
  .mega-nav-links a { padding: var(--s-1) var(--s-2); font-size: 11px; letter-spacing: .04em; }
  .facts { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .about-text { text-align: left; }
  .about-lead { max-width: none; }

  /* programme: swap the two-axis grid for the single-column, Y-only list */
  .schedule-window, .schedule-hint { display: none; }
  .schedule-mobile { display: block; margin-block: var(--s-5) var(--s-4); }
  .sched-mobile-block { padding-block: var(--s-5); border-top: 1px solid var(--glass-line); }
  .sched-mobile-block:first-child { padding-top: 0; border-top: 0; }
  .sched-mobile-time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    max-width: none;
    margin-bottom: var(--s-3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--orange);
  }
  .sched-swipe-hint { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
  .sched-swipe-hint::after { content: ' →'; color: var(--orange); }
  /* parallel tracks/streams: one column each, snapping sideways, bleeding
     to the screen edge so the next column peeks in */
  .sched-swipe {
    display: flex;
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sched-swipe::-webkit-scrollbar { display: none; }
  .sched-swipe:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
  .sched-swipe-col { flex: 0 0 calc(100% - 52px); min-width: 0; scroll-snap-align: start; }
  .sched-swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-3); }
  .sched-swipe-dots span {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .28);
    transition: width .2s var(--ease), background-color .2s var(--ease);
  }
  .sched-swipe-dots .is-active { width: 14px; background: var(--orange); }
  .sched-mobile-group-label {
    margin-bottom: var(--s-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
  }

  .program-tabs { display: flex; }
  .program-tab { flex: 1; padding-inline: var(--s-2); }
  .my-block { grid-template-columns: 1fr; gap: var(--s-2); }
  .my-time { padding-top: 0; }
  .my-shared { padding: var(--s-4); }
  .registration-form { padding: var(--s-5); }
  /* workshop rows: time above the title instead of beside it */
  .ws-option { grid-template-columns: 18px minmax(0, 1fr); row-gap: 2px; }
  .ws-time, .ws-text { grid-column: 2; }
  .footer-nav { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-bottom { flex-direction: column; }
}