/* Global variables */
:root { --fg:#111; --muted:#666; --bg:#fff; --brand:#0a84ff; }

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 1rem}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg);
  border-bottom:1px solid #eee;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:auto;min-height:56px;padding:.5rem .75rem;
}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}

/* Navigation */
.nav{display:flex;flex-wrap:wrap;align-items:center;}
.nav a{margin-left:1rem;text-decoration:none;color:var(--fg)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:inherit}
.nav a.next-event{font-weight:inherit}
.nav a.next-event strong,
.nav a.next-event b{font-weight:inherit}
@media (max-width: 720px){
  .brand{flex-basis:100%;}
  .nav{flex-basis:100%;justify-content:flex-start;}
  .nav a{padding:.32rem .5rem;font-size:.95rem;}
}

/* Main spacing */
main{padding:2rem 0}
.hero + main{margin-top:50px; padding-bottom:50px;}

/* Typography & components */
h1{line-height:1.30}
h2{line-height:1.20}
h3{line-height:1.10}
table{width:100%;border-collapse:collapse;margin:1rem 0}
th,td{padding:.6rem;border-bottom:1px solid #eee;text-align:left}
tbody tr:hover{background:rgba(10,132,255,.06)}
a{color:var(--brand)}
.badge{
  display:inline-block;padding:.1rem .5rem;border-radius:.5rem;
  background:#f4f8ff;color:#245;font-size:.85rem
}
.card{border:1px solid #eee;border-radius:12px;padding:1rem;margin:1rem 0}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.section{margin:2rem 0}

/* Buttons */
.buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin:.5rem 0}
.btn{
  display:inline-block;padding:.65rem 1rem;border-radius:.6rem;
  text-decoration:none;font-weight:600;border:1px solid transparent;
  background:#f4f6f8;color:#223;border-color:#e5e8eb
}
.btn:not(.disabled):not([aria-disabled="true"]){background:var(--brand);color:#fff;border-color:transparent;}
.btn:not(.disabled):not([aria-disabled="true"]):hover{filter:brightness(0.97);}
.btn.disabled,
.btn[aria-disabled="true"]{background:#f4f6f8;color:#223;border-color:#e5e8eb;pointer-events:none;opacity:.55;filter:grayscale(0.3);}
.btn.small{font-size:.82rem;padding:.34rem .60rem;border-radius:.45rem;line-height:1.1;}
.btn:hover{filter:brightness(0.97)}
.btn.disabled{pointer-events:none;opacity:.55;filter:grayscale(0.3)}

/* Hero */
.hero{background:#f7faff;border-bottom:1px solid #eee}
.hero{position:relative;display:block;overflow:hidden}
.hero-media img{width:100%;height:380px;object-fit:cover;display:block}
@media (min-width:1000px){ .hero-media img{height:480px;} }
.hero-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem}
.hero-lines{max-width:1100px;margin:0 auto;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-line{margin:.4rem 0;font-weight:500}
.hero-line.overline{opacity:.9;font-size:1.05rem}
.hero-line.title{font-size:clamp(2rem,6vw,4.5rem);font-weight:800}
.hero-line.subtitle{font-size:clamp(1.25rem,3.2vw,2rem);font-weight:700}
.hero-line.text{font-size:clamp(0.75rem,2.7vw,1.25rem);font-weight:600}
.hero-line.note{opacity:.95}
.hero-line.italic{font-style:italic}

/* Poster */
img.poster{max-width:100%;height:auto;display:block;margin:0 auto;}

/* Organizers (*/
.organizers{
  list-style: none;
  margin: .5rem 0 0;
  padding-left: 0;
}
.organizers-item + .organizers-item{margin-top: .25rem;}

/* Embeds */
.embed{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border:1px solid #eee;border-radius:12px
}
.embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  position:static;width:auto;height:auto;margin:0.5rem;display:inline-block;
  background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem
}
a:focus{outline:2px solid var(--brand); outline-offset:2px}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root {--fg:#eaeaea; --muted:#aaa; --bg:#111; --brand:#4da3ff;}
  body{background:var(--bg); color:var(--fg)}
  .site-header{background:#1a1a1a;border-bottom:1px solid #222}
  .card{border-color:#222;background:#161616}
  .embed{border-color:#222}
  .hero{background:#101318;border-bottom:1px solid #222}
  a{color:var(--brand)}
}