/* Making Sense: AAAI-27 workshop site */

:root {
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --tint: #EEF1F6;
  --ink: #15202E;
  --muted: #4B5767;
  --rule: #DCE1E8;
  --accent: #2446C7;
  --accent-soft: #E3E9FF;

  /* The dark program band */
  --band: #15202E;
  --band-ink: #F2F5F9;
  --band-muted: #A9B5C6;
  --band-rule: #2E3B4E;
  --band-accent: #8FA9FF;

  /* Sensor channels: raw traces start in --trace-idle and resolve into their own color */
  --trace-idle: #A7B0BC;
  --ppg: #C2255C;
  --ecg: #E8590C;
  --eeg: #2B8A3E;
  --acc: #0C8599;
  --mic: #1971C2;
  --touch: #6741D9;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1200px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1620;
    --surface: #16202C;
    --tint: #131C27;
    --ink: #E6EBF1;
    --muted: #A3AFBE;
    --rule: #2A3646;
    --accent: #8FA9FF;
    --accent-soft: #23325A;

    --band: #16202C;
    --band-ink: #E6EBF1;
    --band-muted: #A3AFBE;
    --band-rule: #2A3646;
    --band-accent: #8FA9FF;

    --trace-idle: #4A5667;
    --ppg: #F06595;
    --ecg: #FF8A3D;
    --eeg: #51CF66;
    --acc: #3BC9DB;
    --mic: #4DABF7;
    --touch: #9775FA;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
ul,
ol,
dl,
figure {
  margin: 0;
}

p + p {
  margin-top: 16px;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
}

h1 em,
h2 em,
.hero-subtitle em {
  font-style: italic;
  color: var(--accent);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 104px;
}

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

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

/* Small mono labels */

.eyebrow,
.section-index,
.wordmark-tag,
.track-label,
.badge,
.facts dt,
.date-list span,
.schedule caption,
.schedule td:first-child,
.group-label,
.communities-label,
.person-role {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.section-index {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--muted);
}

.section-index span {
  color: var(--accent);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 64px;
  margin-bottom: 56px;
}

.section-heading > p,
.section-heading > div + div {
  max-width: 400px;
  color: var(--muted);
}

.section-heading > div + div p {
  margin-top: 16px;
}

/* A short one-line note beside the heading. */
.section-heading > .heading-note {
  max-width: none;
  white-space: nowrap;
}

.dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ecg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ecg) 16%, transparent);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
  white-space: nowrap;
}

.wordmark-mark {
  flex: none;
  width: 28px;
  height: 28px;
}

.wordmark-mark rect {
  fill: var(--ink);
}

.wordmark-mark path {
  fill: none;
  stroke: var(--ppg);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wordmark-tag {
  align-self: flex-start;
  margin-top: -2px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 500;
}

.primary-nav a {
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s;
}

.primary-nav a:hover,
.primary-nav a[aria-current] {
  color: var(--ink);
}

.header-action {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
}

.header-action:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--accent));
}

.header-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.header-action-light {
  gap: 8px;
  background: var(--accent-soft);
  color: var(--ink);
}

.header-action-light:hover {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--accent));
}

.menu-toggle,
.primary-nav .nav-mobile-only {
  display: none;
}

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.2s;
}

.button-dark {
  background: var(--ink);
  color: var(--paper);
}

.button-dark:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--accent));
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-underline-offset: 5px;
}

.text-link:hover {
  text-decoration: underline;
}

/* Hero */

.hero-inner {
  padding-top: 64px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(3.8rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
}

.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  margin-top: 40px;
}

.hero-description {
  max-width: 460px;
  font-size: 1.125rem;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 28px;
}

.hero-info {
  padding-left: 40px;
  border-left: 1px solid var(--rule);
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.hero-meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hero-meta small {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}

.hero-meta svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.hero-aaai {
  margin-top: 18px;
  font-size: 0.8125rem;
}

.scope {
  margin-top: 48px;
  min-height: 12rem;
}

.scope svg {
  display: block;
  width: 100%;
  height: auto;
}

.scope .baseline {
  stroke: var(--rule);
  stroke-width: 1;
}

.scope .trace {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.scope .channel-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.scope-controls {
  display: flex;
  justify-content: flex-end;
  min-height: 2.5rem;
  padding-block: 8px 24px;
}

.scope-toggle {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.scope-toggle:hover {
  color: var(--ink);
}

/* Overview: the communities block sits at the bottom of the left column, so
   both columns end on the same line. */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 96px;
  border-top: 1px solid var(--rule);
}

.overview-intro {
  display: flex;
  flex-direction: column;
}

.overview-intro h2 {
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
}

/* The communities list fills whatever height the text column leaves, so its
   rows stretch evenly and both columns end on the same line. */
.communities {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-top: 40px;
}

.communities-label {
  margin-bottom: 12px;
  color: var(--muted);
}

.communities ul {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.communities li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.swatch-ppg { background: var(--ppg); }
.swatch-ecg { background: var(--ecg); }
.swatch-eeg { background: var(--eeg); }
.swatch-acc { background: var(--acc); }
.swatch-mic { background: var(--mic); }
.swatch-touch { background: var(--touch); }

.overview-content {
  color: var(--muted);
}

.overview-content .lead {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Topics: two columns share rows, so the lines stay level. */

.tinted {
  background: var(--tint);
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  padding: 0;
  list-style: none;
  counter-reset: topic;
}

.topic-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  counter-increment: topic;
}

.topic-list li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--rule);
}

.topic-list li::before {
  content: counter(topic, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
}

/* Call for papers */

.tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}

.track {
  padding: 32px;
}

.track + .track {
  border-left: 1px solid var(--rule);
}

.track-label {
  color: var(--accent);
}

.track h3 {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.1;
}

.track p:last-child {
  margin-top: 12px;
  color: var(--muted);
}

.facts {
  margin-top: 32px;
}

.facts div {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 4px 32px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.facts div:first-child {
  border-top: 1px solid var(--rule);
}

.facts dt {
  padding-top: 3px;
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.dates {
  margin-top: 56px;
}

.dates h3 {
  margin-bottom: 16px;
}

.date-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--rule);
}

.date-list li {
  padding: 22px 24px;
  border-left: 1px solid var(--rule);
}

.date-list li:first-child {
  padding-left: 0;
  border-left: 0;
}

.date-list span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
}

.date-list strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;
}

.date-highlight strong {
  color: var(--accent);
}

.date-list small {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Submission block at the end of the call for papers. */
.submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 56px;
  align-items: center;
  margin-top: 56px;
  padding: 32px 36px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}

.submit .section-index {
  margin-bottom: 14px;
}

.submit h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;
}

.submit h3 + p {
  max-width: 56ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.submit-actions {
  display: flex;
  align-items: center;
}

/* Program (dark band) */

.band {
  background: var(--band);
  color: var(--band-ink);
}

.band .section-index,
.band .section-heading > div + div {
  color: var(--band-muted);
}

.band .section-index span,
.band h2 em {
  color: var(--band-accent);
}

.badge {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--band-rule);
  border-radius: 2px;
  color: var(--band-ink);
}

.schedule-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  align-items: start;
}

.schedule {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.schedule caption {
  padding-bottom: 14px;
  text-align: left;
  color: var(--band-accent);
}

.schedule td {
  padding: 14px 16px;
  border-top: 1px solid var(--band-rule);
  vertical-align: top;
}

.schedule tbody tr:last-child td {
  border-bottom: 1px solid var(--band-rule);
}

.schedule td:first-child {
  width: 140px;
  padding-top: 16px;
  white-space: nowrap;
  color: var(--band-muted);
  letter-spacing: 0.02em;
}

.schedule .session {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
}

.schedule .detail {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--band-muted);
}

.schedule .break td {
  background: color-mix(in srgb, var(--band-ink) 5%, transparent);
}

.schedule .break .session {
  font-weight: 400;
  color: var(--band-muted);
}

.footnote {
  margin-top: 24px;
  font-size: 0.8125rem;
  color: var(--band-muted);
}

.footnote + .footnote {
  margin-top: 8px;
}

/* Speakers and organizers */

.group-label {
  margin-bottom: 16px;
  color: var(--muted);
}

.people-grid + .group-label {
  margin-top: 48px;
}

.panel-topic {
  margin: -6px 0 18px;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.2;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Organizers: all six in one row of compact cards, as on the FinFM site. */
.people-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Each card spans four shared rows (photo, name, affiliation, role), so the
   lines stay level across the row even when a name wraps. */
.people-grid-6 .person {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 24px 18px 22px;
}

.people-grid-6 .avatar {
  width: 80px;
  height: 80px;
}

.people-grid-6 .person h3 {
  margin-top: 18px;
  font-size: 1rem;
}

.people-grid-6 .person-affiliation {
  font-size: 0.8125rem;
}

.person {
  min-width: 0;
  margin: 0 -1px -1px 0;
  padding: 28px 24px 26px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.9rem;
}

.avatar-tba {
  border: 1px dashed var(--rule);
  background: var(--paper);
}

.avatar-tba svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--trace-idle);
  stroke-width: 1.5;
}

.avatar-photo {
  object-fit: cover;
  background: var(--tint);
}

.person h3 {
  margin-top: 20px;
  font-size: 1.0625rem;
}

.person h3 a {
  transition: color 0.2s;
}

.person h3 a span {
  font-size: 0.875rem;
  color: var(--accent);
}

.person h3 a:hover {
  color: var(--accent);
}

.person-affiliation {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.person-role {
  margin-top: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: none;
}

.person-tba .person-role {
  margin-top: 20px;
}

.person-tba h3 {
  margin-top: 4px;
  color: var(--muted);
}

.organizers {
  border-top: 1px solid var(--rule);
}

/* Program committee: the button sits at the bottom of the left column and the
   rows on the right share the column height, so both columns end together. */

.committee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 96px;
  border-top: 1px solid var(--rule);
}

.committee-intro {
  display: flex;
  flex-direction: column;
}

.committee-lead {
  max-width: 440px;
  margin-top: 24px;
  color: var(--muted);
}

.committee-action {
  margin-top: auto;
  padding-top: 28px;
}

.committee-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.committee-facts div {
  flex: 1 1 auto;
  align-items: center;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  padding: 18px 0;
}

/* Sponsors: intro on the left, opportunities on the right. The contact sits
   at the bottom of the intro and the list rows share the column height, so
   both columns start and end on the same lines. */

.sponsors-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 72px;
}

.sponsors-intro {
  display: flex;
  flex-direction: column;
}

.sponsors-intro > p:not(.section-index) {
  max-width: 440px;
  margin-top: 24px;
  color: var(--muted);
}

.sponsors-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: auto;
  padding-top: 32px;
}

.sponsor-email {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.sponsor-email:hover {
  text-decoration-color: currentColor;
}

.sponsor-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.sponsor-list li {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 36px 170px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.sponsor-number {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.sponsor-list h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.15;
}

.sponsor-list p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Footer */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 36px;
  border-top: 1px solid var(--rule);
}

.site-footer .wordmark {
  font-size: 1.25rem;
}

.site-footer p {
  font-size: 0.8125rem;
  line-height: 1.7;
}

.site-footer p span {
  color: var(--muted);
}

.site-footer .text-link {
  font-size: 0.8125rem;
}

/* Responsive */

@media (max-width: 1100px) {
  .section {
    padding-block: 88px;
  }

  .overview {
    gap: 56px;
  }

  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1260px) {
  .header-inner {
    min-height: 66px;
    gap: 10px;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-action {
    padding-inline: 12px;
    font-size: 0.75rem;
  }

  .menu-toggle {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 18px;
    height: 1px;
    background: var(--ink);
    transition: transform 0.2s;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px var(--gutter) 22px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: 0 18px 25px rgb(21 32 46 / 6%);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a {
    padding: 11px 0;
    font-size: 1rem;
  }

}

@media (max-width: 960px) {
  .submit {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-body,
  .overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-body {
    gap: 32px;
  }

  .hero-info {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .overview {
    gap: 32px;
  }

  .communities ul {
    grid-auto-rows: auto;
  }

  .section-heading {
    gap: 36px;
  }

  .topic-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-list li:nth-last-child(2) {
    border-bottom: 0;
  }

  .date-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .date-list li,
  .date-list li:first-child {
    padding: 20px 20px 20px 0;
    border-left: 0;
  }

  .date-list li:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--rule);
  }

  .date-list li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }

  .schedule-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .sponsors-layout,
  .committee {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: 64px;
  }

  h2 {
    font-size: 2.5rem;
  }

  .wordmark {
    font-size: 1.25rem;
  }

  /* On phones the Submit button moves into the menu; Join PC stays visible. */
  .header-action:not(.header-action-light) {
    display: none;
  }

  .primary-nav .nav-mobile-only {
    display: block;
  }

  .hero-inner {
    padding-top: 40px;
  }

  .section-heading {
    display: block;
    margin-bottom: 32px;
  }

  .section-heading > p,
  .section-heading > div + div {
    max-width: none;
    margin-top: 20px;
  }

  .section-heading > .heading-note {
    white-space: normal;
  }

  .tracks {
    grid-template-columns: minmax(0, 1fr);
  }

  .track {
    padding: 24px;
  }

  .track + .track {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .track h3 {
    font-size: 1.6rem;
  }

  .facts div {
    grid-template-columns: minmax(0, 1fr);
  }

  .sponsor-list li {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .sponsor-list p {
    grid-column: 2;
  }

  .date-list strong {
    font-size: 1.4rem;
  }

  .schedule td {
    padding: 14px 0;
  }

  .schedule td:first-child {
    width: 112px;
    padding-right: 14px;
  }

  .schedule .session {
    font-size: 1rem;
  }

  .people-grid,
  .people-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person {
    padding: 22px 16px;
  }

  .avatar {
    width: 72px;
    height: 72px;
    font-size: 1.6rem;
  }

  .site-footer {
    flex-wrap: wrap;
    gap: 20px;
  }

  .site-footer p {
    order: 3;
    width: 100%;
  }

  .site-footer .text-link {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .wordmark-tag {
    display: none;
  }

  .communities ul,
  .date-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .date-list li,
  .date-list li:nth-child(even) {
    padding: 18px 0;
    border-left: 0;
  }

  .date-list li + li {
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 360px) {
  .header-inner {
    gap: 8px;
  }

  .header-inner .wordmark-mark {
    display: none;
  }

  .header-inner .wordmark {
    font-size: 1.15rem;
  }

  .header-action {
    padding-inline: 10px;
  }

  .header-action span {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}