/* Self-hosted so the fallback is identical everywhere and does not depend on
   a third-party font host, which is unreachable for some of our audience.
   Variable, weight axis 200-1000, latin subset, 30 KB. */
@font-face {
  font-family: "Nunito Sans";
  src: url("./fonts/nunito-sans-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #172033;
  --ink-soft: #586174;
  --paper: #ffffff;
  --muted: #f5f5f2;
  --line: #d9dce2;
  --accent: #243f73;
  --deadline: #a43b32;
  --container: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #dce5f5; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

h1,
h2,
h3,
p,
dl,
dd { margin-top: 0; }

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.nav-shell {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
}

.brand strong { font-size: 15px; }

.brand span {
  color: var(--ink-soft);
  font-size: 12px;
}

.desktop-nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
  font-weight: 600;
}

.desktop-nav a,
.mobile-nav a { text-decoration: none; }

.desktop-nav a:hover,
.mobile-nav a:hover { color: var(--accent); }

.mobile-nav { display: none; position: relative; }

.mobile-nav summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}

.mobile-nav summary::-webkit-details-marker { display: none; }

.mobile-nav nav {
  position: absolute;
  top: 42px;
  right: 0;
  display: grid;
  width: 230px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.mobile-nav nav a {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.mobile-nav nav a:last-child { border-bottom: 0; }

.hero {
  position: relative;
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(10, 20, 38, .9) 0%, rgba(10, 20, 38, .76) 52%, rgba(10, 20, 38, .66) 100%),
    url("./hero-montreal.jpg") center 54% / cover no-repeat;
  color: #fff;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  align-items: end;
  gap: 96px;
}

.hero h1 {
  max-width: 780px;
  margin-bottom: 16px;
  font-size: clamp(52px, 7vw, 84px);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.hero-subtitle {
  margin-bottom: 30px;
  color: #dce6f6;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
}

.hero-lede {
  max-width: 660px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
}

.hero .button {
  border-color: #fff;
  background: #fff;
  color: var(--accent);
}

.hero .button:hover { background: #edf2f8; }

.button {
  display: inline-block;
  padding: 12px 17px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.button:hover { background: #1a315d; }

/* Second hero action, linking the OpenReview portal. An outline on the dark
   hero keeps the call for papers as the primary action, and the focus ring
   turns white because the accent ring vanishes against the photograph.
   Added 2026-10-05. */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero .button-ghost {
  border-color: rgba(255, 255, 255, .72);
  background: transparent;
  color: #fff;
}

.hero .button-ghost:hover { background: rgba(255, 255, 255, .12); }

.hero .button:focus-visible { outline-color: #fff; }

.event-facts {
  margin: 0;
  border-top: 2px solid #fff;
}

.event-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
}

.event-facts dt {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.event-facts dd {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.event-facts small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 400;
}

/* The official listing links AAAI's page for the workshop. Its focus ring
   turns white for the same reason as the hero buttons'. Added 2026-10-16. */

.event-facts a:focus-visible { outline-color: #fff; }

.section { padding: 92px 0; }

.section-muted { background: var(--muted); }

.section h2,
.contact h2 {
  margin-bottom: 24px;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 650;
}

.two-column,
.dates-layout {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: 100px;
  align-items: start;
}

.prose,
.section-intro p,
.challenge-layout > div:first-child,
.submissions-layout > div:first-child { max-width: 720px; }

.prose p,
.section-intro p,
.challenge-layout p,
.submissions-layout p,
.dates-layout > div p { color: var(--ink-soft); }

.lead {
  color: var(--ink) !important;
  font-size: 21px;
  line-height: 1.5;
}

.section-intro {
  display: grid;
  max-width: 900px;
  margin-bottom: 48px;
  grid-template-columns: .7fr 1fr;
  gap: 70px;
  align-items: end;
}

.section-intro h2,
.section-intro p { margin-bottom: 0; }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 46px;
}

.topic {
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}

.topic h3 {
  margin-bottom: 8px;
  font-size: 22px;
}

.topic > p {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.topic ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
}

.topic li + li { margin-top: 5px; }

.scope-note {
  max-width: 830px;
  margin: 46px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
}

.challenge-layout,
.submissions-layout {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 96px;
  align-items: start;
}

.plain-status,
.portal-note {
  color: var(--accent) !important;
  font-size: 13px;
  font-weight: 650;
}

.tracks { border-top: 2px solid var(--ink); }

.tracks article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.tracks span,
.organizer > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tracks h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.tracks p {
  margin-bottom: 0;
  font-size: 14px;
}

.paper-types {
  margin-top: 42px;
  border-top: 1px solid var(--ink);
}

.paper-types article {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.paper-types h3 {
  margin-bottom: 8px;
  font-size: 19px;
}

.paper-types h3 span {
  margin-left: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.paper-types p {
  margin-bottom: 0;
  font-size: 14px;
}

.submission-details {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.submission-details h3 {
  margin-bottom: 18px;
  font-size: 21px;
}

.submission-details dl { margin-bottom: 22px; }

.submission-details dl > div {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.submission-details dt,
.submission-details dd { font-size: 13px; }

.submission-details dt { color: var(--ink-soft); }

.submission-details dd {
  margin-bottom: 0;
  font-weight: 650;
}

.submission-details p {
  margin-bottom: 16px;
  font-size: 13px;
}

.date-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.date-list li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.date-list time,
.date-list li > span {
  color: var(--ink-soft);
  font-size: 14px;
}

.date-list strong { font-size: 15px; }

.date-list .deadline time,
.date-list .deadline strong { color: var(--deadline); }

.organizer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
  row-gap: 44px;
}

.organizer {
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.organizer h3 {
  margin-bottom: 6px;
  font-size: 22px;
}

.organizer p {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.organizer a {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 13px;
}

.contact {
  padding: 58px 0;
  background: var(--accent);
  color: #fff;
}

.contact-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.contact h2 {
  margin-bottom: 6px;
  font-size: 32px;
}

.contact p {
  margin-bottom: 0;
  color: #dce4f1;
  font-size: 14px;
}

.contact a {
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

footer {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.footer-layout {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: var(--ink-soft);
  font-size: 12px;
}

.footer-layout p { margin: 0; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }

  .hero-grid,
  .two-column,
  .challenge-layout,
  .submissions-layout,
  .dates-layout {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .hero { padding: 72px 0; }
  .event-facts { max-width: 620px; }

  .section-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
  }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 32px), var(--container)); }

  .nav-shell { min-height: 64px; }

  .brand {
    display: grid;
    gap: 0;
    line-height: 1.25;
  }

  .brand strong { font-size: 13px; }
  .brand span { font-size: 11px; }

  .hero {
    padding: 56px 0;
    background-position: 56% center;
  }
  .hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .hero-lede { font-size: 16px; }

  .section { padding: 68px 0; }

  .topic-grid,
  .organizer-grid { grid-template-columns: 1fr; }

  .topic-grid { row-gap: 34px; }

  .date-list li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .contact-layout,
  .footer-layout {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Organizer role lines, senior advisors, and the supporting team. Added
   2026-08-25 to match the revised proposal. Weight 700 throughout, so the
   Avenir Next and Nunito Sans renderings stay identical. */

.organizer-roles {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 13px;
}

.people-block {
  margin-top: 62px;
  padding-top: 42px;
  border-top: 1px solid var(--line);
}

.people-block h3 {
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 700;
}

.people-block > p {
  max-width: 720px;
  margin-bottom: 34px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* A group with no intro paragraph, such as the speakers, keeps the 34px the
   paragraph's margin gives the others. Added 2026-10-14. */
.people-block > h3 + .people-grid { margin-top: 26px; }

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 36px;
}

.people-grid-wide {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
}

.person {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.person h4 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.person p {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 13px;
}

.person p:last-child { margin-bottom: 0; }

.person .person-affil {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .people-grid,
  .people-grid-wide {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }
}

@media (max-width: 640px) {
  .people-block {
    margin-top: 48px;
    padding-top: 34px;
  }

  .people-grid,
  .people-grid-wide {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}

/* Entrant notes sit under the two track cards, so the challenge column and
   the track column finish nearer the same depth. Added 2026-08-27. */

.track-note {
  margin: 22px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Person avatars. Each card carries initials by default. Dropping a file into
   people/ and uncommenting that person's rule below swaps in the photograph,
   so cards can gain photos one at a time without ever showing a broken image.
   Added 2026-08-27. */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #e7ecf5 center top / cover no-repeat;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  user-select: none;
}

.organizer .avatar {
  width: 62px;
  height: 62px;
  font-size: 18px;
}

/* A photograph covers the circle and hides the initials underneath it. If the
   file is missing the rule simply does nothing and the initials stay. */
.avatar[style*="people/"],
.avatar.has-photo { color: transparent; }

/* Live photographs. Source is each person's own official profile, recorded
   in people/README.md. */
.avatar-bang-liu              { background-image: url("./people/bang-liu.jpg"); color: transparent; }
.avatar-perouz-taslakian      { background-image: url("./people/perouz-taslakian.jpg"); color: transparent; }
.avatar-samira-ebrahimi-kahou { background-image: url("./people/samira-ebrahimi-kahou.jpg"); color: transparent; }
.avatar-irina-rish            { background-image: url("./people/irina-rish.jpg"); color: transparent; }
.avatar-aaron-tian            { background-image: url("./people/aaron-tian.jpg"); color: transparent; }
.avatar-steve-drew            { background-image: url("./people/steve-drew.jpg"); color: transparent; }
.avatar-yunkai-bao            { background-image: url("./people/yunkai-bao.jpg"); color: transparent; }
.avatar-tianyu-shi            { background-image: url("./people/tianyu-shi.jpg"); color: transparent; }
.avatar-fan-zhou              { background-image: url("./people/fan-zhou.jpg"); color: transparent; }
.avatar-haolun-wu             { background-image: url("./people/haolun-wu.jpg"); color: transparent; }
.avatar-hongtu-zhu            { background-image: url("./people/hongtu-zhu.jpg"); color: transparent; }
.avatar-peiyu-zhang           { background-image: url("./people/peiyu-zhang.jpg"); color: transparent; }
.avatar-xiaowu-dai            { background-image: url("./people/xiaowu-dai.jpg"); color: transparent; }
.avatar-zhijing-jin           { background-image: url("./people/zhijing-jin.jpg"); color: transparent; }
.avatar-meijia-chen           { background-image: url("./people/meijia-chen.jpg"); color: transparent; }
.avatar-jiajun-wu             { background-image: url("./people/jiajun-wu.jpg"); color: transparent; }
.avatar-yifan-hu              { background-image: url("./people/yifan-hu.jpg"); color: transparent; }
.avatar-phoenix-peng          { background-image: url("./people/phoenix-peng.jpg"); color: transparent; }
.avatar-zhenyu-wang           { background-image: url("./people/zhenyu-wang.jpg"); color: transparent; }