/* =====================================================
   AI and Science: Evolution or Extinction? — NeurIPS 2026
   Clean modern typography with quiet manuscript motifs
   (rubricated margins, drop caps, fleurons, title-page
   rules), set in a cool palette.

   Ground, navy, teal, orange and mustard are sampled from
   the reference posters. The two brightest samples sit at
   about 2:1 on the grey, so anything carrying text uses a
   deeper mix of the same hue; the source values are kept
   for the purely graphic marks.
   ===================================================== */

:root {
  --vellum: #F0F0F0;      /* the cool ground */
  --vellum-deep: #E3E8EB; /* panels and banded rows */
  --ink: #082C42;         /* navy */
  --ink-soft: #4C616E;    /* muted navy-grey */
  --rubric: #00705A;      /* teal, deepened to carry text */
  --gold: #8AA3B1;        /* steel, for the fine rules */
  --line: #CBD5DA;        /* hairlines */

  --steel-deep: #4F6B7B;  /* steel that carries text */
  --teal-bright: #00B090; /* the sampled teal, graphic marks only */
  --pop-orange: #FF7010;  /* used sparingly */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;

  /* The page band and the rail sit at their original positions. The text
     column's right edge mirrors its left inset about the page centre, so
     every section closes on the same imaginary line — set symmetrically
     against the title frame's edges. */
  --page: 72rem;          /* outer band */
  --page-pad: 1.25rem;    /* viewport gutter */
  --rail: 11rem;          /* rubricated margin rail */
  --col-gap: 2.5rem;      /* rail to body */
  --body-pad: 2.5rem;     /* body's own left inset, inside its border */
  --hero-w: 46rem;        /* the title frame */
  /* distance from the band's left edge in to the body's vertical rule */
  --body-inset: calc(var(--page-pad) + var(--rail) + var(--col-gap));
  /* mirror it on the right: the column is centred on the page */
  --body-w: calc(var(--page) - var(--body-inset) * 2);
  --nav-h: 3.5rem;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

a { color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 1px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0; }

img { max-width: 100%; height: auto; display: block; }

/* ---------------- Navigation ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--vellum) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-brand .amp { color: var(--rubric); font-style: italic; font-weight: 400; }

.nav-menu {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-menu a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a.active,
.nav-menu a[aria-current="page"] { color: var(--rubric); border-bottom-color: var(--rubric); }

/* The Submit call-to-action, boxed to stand apart from the plain links */
.nav-menu a.nav-cta {
  border: 1px solid var(--rubric);
  color: var(--rubric);
  padding: 0.4rem 0.9rem;
}
.nav-menu a.nav-cta:hover { background: var(--rubric); color: var(--vellum); }

.nav-toggle {
  display: none;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}
.nav-toggle-bar {
  width: 1rem;
  height: 2px;
  background: var(--rubric);
  box-shadow: 0 5px 0 var(--rubric), 0 -5px 0 var(--rubric);
}

/* ---------------- Hero: the title page ---------------- */

/* Full-bleed banner; the vertical padding is what lets the photograph
   show above and below the title frame. */
.hero {
  padding: clamp(2.75rem, 7vw, 6rem) var(--page-pad);
  background-color: var(--ink);
  background-image: url("../assets/atlanta-piedmont-park.jpg");
  background-size: cover;
  background-position: center;
}

.hero-frame {
  max-width: var(--hero-w);
  margin: 0 auto;
  text-align: center;
  /* opaque, so the frame keeps its own ground over the photograph */
  background: var(--vellum);
  border: 1px solid var(--gold);
  outline: 1px solid var(--line);
  outline-offset: 6px;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}

.hero-eyebrow {
  margin: 0 0 2.25rem;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rubric);
}

.hero-title { display: grid; gap: 0.75rem; }

.hero-title-main {
  font-size: clamp(2.6rem, 8vw, 4.75rem);
  font-weight: 560;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.015em;
}

.hero-title-sub {
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: 380;
  color: var(--ink-soft);
}
/* the two futures carry the accent; the words joining them stay in navy */
.hero-title-sub em { font-style: italic; color: var(--ink); }
.hero-title-sub .rubric { color: var(--ink); }

/* The two futures are set against each other: a written hand for the one
   we came from, a machined face for the one in question. Both are sized
   to sit on the same optical line as the roman text between them. */
.hero-title-sub .evolution {
  font-family: "Fleur De Leah", cursive;
  /* the palette's green against Extinction's orange */
  color: var(--rubric);
  /* the script's x-height is 34.5 per em against the machined face's 53.5,
     so this is the size at which the two words read as the same size */
  font-size: 1.28em;
  line-height: 0.6;
  /* the script's flourishes reach into its side bearings, so the normal
     word space reads as a collision */
  margin-right: 0.1em;
}
.hero-title-sub .extinction {
  font-family: "Asimovian", var(--font-display), sans-serif;
  color: var(--pop-orange);
  font-size: 0.82em;
  letter-spacing: 0.01em;
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2.25rem auto 1.75rem;
  max-width: 22rem;
  color: var(--gold);
}
.hero-rule::before,
.hero-rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  height: 3px;
}
.hero-rule span { font-size: 1.85rem; line-height: 1; color: var(--rubric); }

.hero-meta {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* Subpages open on a slimmer strip of the same banner: the frame keeps its
   double rule and the title steps down. The full hero (About) is unchanged. */
.hero--compact { padding: clamp(1.25rem, 3.5vw, 2.5rem) var(--page-pad); }
.hero--compact .hero-frame {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
}
.hero--compact .hero-eyebrow { margin-bottom: 1.1rem; font-size: 0.75rem; }
.hero--compact .hero-title { gap: 0.4rem; }
.hero--compact .hero-title-main { font-size: clamp(1.9rem, 5vw, 2.9rem); }
.hero--compact .hero-title-sub { font-size: clamp(1.05rem, 2.5vw, 1.35rem); }

/* ---------------- Sections & the rubricated margin ---------------- */

.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--page-pad);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--col-gap);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* Margin rail: red incipit like a manuscript rubric */
/* The rail carries the section title itself, hung in the margin under its
   numeral, so the body opens straight into its text. */
.section-rubric {
  text-align: right;
  padding-top: 0.1rem;
}
.section-rubric .rubric-no {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--steel-deep);
}
/* the label treatment the rail carried before it became the heading; the
   h2 it now sits in would otherwise hand it the display serif and its
   heading weight */
.section-rubric .rubric-word {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rubric);
  margin-top: 0.35rem;
  text-wrap: balance;
}

.section-body {
  max-width: var(--body-w);
  border-left: 1px solid var(--line);
  padding-left: var(--body-pad);
}

.section-body p { margin: 0 0 1.1rem; }
.section-body > :last-child { margin-bottom: 0; }

/* Subsection heading within a section body — the same letterspaced teal
   label the schedule and questions panel carry, given top room so it
   reads as a break in the prose above it. */
.subsection-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rubric);
  margin: 2rem 0 0.85rem;
}
/* when a subsection opens the section, sit it at the section's top edge
   rather than 2rem below the heading in the rail */
.section-body > .subsection-title:first-child { margin-top: 0; }

/* Drop cap on section openings */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--rubric);
}

/* Section divider */
.fleuron {
  text-align: center;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

/* ---------------- About: guiding questions ---------------- */

.questions {
  background: var(--vellum-deep);
  border: 1px solid var(--line);
  padding: 1.75rem 2rem;
  margin: 1.75rem 0;
}

.questions-heading {
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rubric);
  margin-bottom: 1rem;
}

.questions ol,
.question-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
  display: grid;
  gap: 1rem;
}

/* Same numbering, but set in the run of prose rather than in the panel */
.question-list { margin: 1.5rem 0 1.35rem; }

.questions li,
.question-list li {
  counter-increment: q;
  position: relative;
  padding-left: 2.4rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.5;
}
.questions li::before,
.question-list li::before {
  content: counter(q, lower-roman) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  color: var(--steel-deep);
}

/* ---------------- Lists: topics & guidelines ---------------- */

.topic-list, .guideline-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.topic-list li, .guideline-list li {
  padding-left: 1.4rem;
  position: relative;
}
.topic-list li::before, .guideline-list li::before {
  content: "❧";
  position: absolute;
  left: 0;
  color: var(--rubric);
  font-size: 0.85em;
  top: 0.15em;
}
.guideline-list strong { font-weight: 600; }

/* ---------------- Tracks ---------------- */

/* Three track boxes stacked in a column, each keyed to a palette accent
   carried on its left rule with a faint wash of the same hue behind it. */
.tracks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.track {
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--track-accent);
  background: color-mix(in srgb, var(--track-accent) 10%, var(--vellum));
}
.track h3 {
  font-size: 1.2rem;
  font-weight: 560;
  color: var(--ink);
}
/* Body copy inside a box: smaller and greyer than the running prose so the
   boxes read as supporting detail. Same 0.7rem rhythm; the nested list's
   fleurons pick up the box's own accent rather than the default teal. */
.track p { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.track .topic-list { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.track .topic-list li::before { color: var(--track-accent); }
/* Small label for a subsection inside a box (e.g. Example Works), tinted
   to the box's own accent. */
.track-subhead {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--track-accent);
}
.track-research     { --track-accent: var(--rubric); }
.track-datasets     { --track-accent: var(--steel-deep); }
.track-perspectives { --track-accent: var(--pop-orange); }

/* ---------------- Topics ---------------- */

/* A numbered list of topic clusters: each carries a display-serif title
   with its number hung in the margin, an italic one-line gloss, and the
   ❧ bullets of a nested topic list — title, gloss and bullets share one
   left edge, the numeral hangs to its left like the question list. */
.topics-list {
  list-style: none;
  counter-reset: topic;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.topics-list > li { counter-increment: topic; }
.topics-list > li > h3 {
  position: relative;
  padding-left: 2.4rem;
  font-size: 1.2rem;
  font-weight: 560;
  line-height: 1.3;
}
.topics-list > li > h3::before {
  content: counter(topic) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--steel-deep);
}
.topic-desc {
  margin: 0.45rem 0 0.85rem;
  padding-left: 2.4rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
}
.topics-list .topic-list { margin: 0; padding-left: 2.4rem; }

/* ---------------- FAQ ---------------- */

/* Each entry is a serif question with its answer set beneath in the body
   face; the grid gap keeps the pairs apart. */
.faq { display: grid; gap: 1.75rem; }
.faq-q {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 550;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}
.faq-item p { margin: 0; }

/* ---------------- Submit button ---------------- */

.submit-row { margin-top: 1.75rem; }

.button {
  display: inline-block;
  background: var(--rubric);
  color: var(--vellum);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--rubric);
  transition: background 0.15s ease, color 0.15s ease;
}
.button:hover { background: transparent; color: var(--rubric); }
.button[aria-disabled="true"] { opacity: 0.85; cursor: default; }

/* ---------------- Important dates ---------------- */

.dates-list { margin: 0 0 1rem; }

.dates-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.dates-row:first-child { border-top: 1px solid var(--line); }

.dates-row dt { font-weight: 600; margin: 0; }
/* set as the term it answers, distinguished by colour alone */
.dates-row dd {
  margin: 0 0 0 auto;
  color: var(--rubric);
  white-space: nowrap;
}

.footnote { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------------- Schedule ---------------- */

/* The day runs in three named sessions */
.session { margin-top: 2.25rem; }
.session-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rubric);
  margin-bottom: 0.85rem;
}

.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slot {
  display: grid;
  /* wide enough for a full range, e.g. 10:15–10:45 */
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.slot:first-child { border-top: 1px solid var(--line); }

.slot-time {
  /* set exactly as the entry beside it: only the colour differs */
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  /* centred in the row rather than sat on the first line's baseline */
  align-self: center;
}
.slot-talk .slot-time { color: var(--rubric); }

/* the entry sits centred against its time, rather than filling the row */
.slot-info { align-self: center; }

.slot-info h4 {
  /* set as the times are, so the whole programme reads in one voice */
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
}
.slot-info p { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }

.slot-break { background: linear-gradient(to right, transparent, var(--vellum-deep) 12%, var(--vellum-deep) 88%, transparent); }
/* breaks read as the other entries do, set apart by the italic alone */
.slot-break .slot-info h4 { font-style: italic; color: var(--ink-soft); }

.slot-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.slot-speaker:hover { color: var(--rubric); }
.slot-speaker img { width: 28px; height: 34px; flex: none; }

/* ---------------- People grids ---------------- */

.people-grid {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 2.25rem 1.5rem;
}

/* Speakers are grouped by the session they appear in */
.speaker-group { margin-top: 2.5rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.group-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rubric);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

/* the schedule entry carries you down to the people in it */
.slot-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.slot-link:hover { color: var(--rubric); border-bottom-color: currentColor; }

/* the Program page's schedule links land on individual cards here, so they
   need the same sticky-header clearance the speaker groups have */
.person { max-width: 14rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
/* aspect-ratio + cover so a real photo of any shape fills the slot to the
   same proportions as the placeholders, keeping the grid even */
.person img {
  width: 100%;
  max-width: 11rem;
  margin-bottom: 0.9rem;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  /* the niche arch the placeholder frames draw, so photographs share it
     (a no-op on the SVGs, whose corners are already transparent) */
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}
.person h3 { font-size: 1.15rem; font-weight: 550; }
/* The role held, set apart from the institution beneath it */
.person-title {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.person-affil { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.person-role {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rubric);
}

/* highlight a speaker card when jumped to from the schedule */
.person:target img { outline: 2px solid var(--rubric); outline-offset: 4px; }

/* Speakers land 3×2 and organizers 3+2 inside the shared column; both
   drop to two columns on narrow screens via the auto-fill above. */

/* ---------------- Footer ---------------- */

.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.5rem var(--page-pad) 3.5rem;
  text-align: center;
}
.site-footer .hero-rule { margin-bottom: 2rem; }
.site-footer p { margin: 0.4rem 0; }

/* ---------------- Responsive ---------------- */

@media (max-width: 56rem) {
  .section {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .section-rubric {
    text-align: left;
    padding: 0 0 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }
  .section-rubric .rubric-no { font-size: 1.15rem; }
  .section-body { border-left: 0; padding-left: 0; }
}

@media (max-width: 44rem) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--vellum);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.25rem 1rem;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { display: block; padding: 0.55rem 0; border-bottom: 0; }
  .nav-menu a.active,
  .nav-menu a[aria-current="page"] { border-bottom: 0; }

  .slot { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.9rem; }
  .slot-speaker { display: flex; margin: 0.4rem 0 0; }

  .hero-frame { outline-offset: 4px; }
}