/* Updated CSS with larger header and image */
:root{
--max-width: 980px;
--accent: #0b66d1;
--muted: #666;
--bg: #f7f9fb;
--card-bg: #fff;
--radius: 10px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;color:#111}
body{background:var(--bg);}
.container{width:clamp(320px,92%,var(--max-width));margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,var(--card-bg),#eef5ff);border-bottom:1px solid #e1e8f5;padding:1.5rem 0}
/* ===== Simple Header with Faint Background Image ===== */
.site-header {
  position: relative;
  background-image: url("https://images.pexels.com/photos/1796706/pexels-photo-1796706.jpeg"); /* or any URL */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  padding: 5rem 0 2rem;
}

/* subtle dark overlay to make image faint */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50); /* 65% dark overlay */
  z-index: 0;
}

/* make sure text stays above overlay */
.site-header * {
  position: relative;
  z-index: 1;
}

.logo {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.tagline {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 1rem;
}

.top-nav {
  margin-top: 1rem;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-list a {
  color: #fff;
  text-decoration: none;
}

.nav-list .cta {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .logo { font-size: 1.6rem; }
  .tagline { font-size: 0.9rem; }
}

.header-inner{display:flex;flex-direction:column;gap:1rem}
.brand{display:flex;align-items:center;gap:1.5rem}
.header-illustration{height:100px;width:auto;border-radius:10px}
.logo{margin:1;font-size:1.8rem}
.tagline{margin:1;font-size:1rem}

.top-nav{margin-top:.8rem}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.nav-list a{display:inline-block;padding:0rem 0rem;text-decoration:none;color:var(--accent)}
.nav-list .cta{background:var(--accent);color:#fff;border-radius:6px;padding:.5rem 1rem}

.card{background:var(--card-bg);padding:1rem;margin:1rem 0;border-radius:var(--radius);box-shadow:0 1px 2px rgba(10,20,40,0.04)}
.highlight{border-left:4px solid var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.schedule{padding-left:0;list-style:none}
.speakers{padding-left:0;list-style:none}
.speakers li{margin-bottom:.6rem}
.button{display:inline-block;padding:.6rem 1rem;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none}

.site-footer{padding:1rem 0;border-top:1px solid #e6edf7;background:transparent}

@media (min-width:720px){
.header-inner{flex-direction:row;justify-content:space-between;align-items:center}
}

@media print{
:root
body{color:#000}
.site-header, .site-footer {display:none}
.card{border:none;box-shadow:none}
}


/* ---- Make organiser cards align vertically and match heights ---- */
/* ensure group container stacks its row items from the top */
.organisers-group {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* allow children to control widths */
}

/* keep the row aligned at the top so items don't vertically center */
.organisers-row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;      /* keep side-by-side where possible */
  gap: 1.2rem;
  margin-top: 0.6rem;
  align-items: flex-start; /* << important: align children at top */
}

/* make each organiser a vertical flex column with consistent spacing */
.organiser {
  flex: 0 1 160px;
  min-width: 80px;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  /* set a min-height so the name+affiliation area is consistent */
  min-height: 180px; /* tweak this number if you want taller/shorter cards */
  text-align: center;
}

/* keep images identical size and visually consistent */
.organiser-photo {
  width: 100%;
  max-width: 150px;
  height: 150px;            /* force a fixed square area */
  border-radius: 50%;
  object-fit: cover;        /* crop to fill */
  display: block;
  margin: 0 auto 0.45rem;
}

/* ensure name + affiliation occupy consistent space */
.organiser .meta {
  /* create a small wrapper in HTML around name+aff to use this rule,
     or apply rules to h4 and p below if you don't want extra markup */
  min-height: 54px;
}

/* tighten up spacing for name and affiliation */
.organiser h4 { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.05; }
.organiser p { margin: 0; font-size: .85rem; color: var(--muted); }

/* Responsive: reduce min-height and image size on small screens */
@media (max-width: 700px) {
  .organiser { min-height: 140px; }
  .organiser-photo { max-width: 90px; height: 90px; }
  .organiser { flex: 0 1 110px; }
  .organisers-row { flex-wrap: wrap; gap: .9rem; justify-content: flex-start; }
}

.site-footer {
  text-align: center;
  font-size: 0.9em;
  color: #777;
  padding: 2em 0;
  border-top: 1px solid #eee;
  margin-top: 3em;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}