/* Machine Intelligence Summit — shared chrome (tokens, frame, header, footer, rules) */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #6b6b68;
  --body: #4a4a48;
  --faint: #9a9a96;
  --hair: #e3e3e1;
  --panel: #f6f6f4;
  --pad: 20px;
  --gut: 36px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.005em;
  padding: var(--pad);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.frame {
  max-width: 1340px;
  margin: 0 auto;
  border: 1px solid var(--ink);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 50;
}
.skip:focus { left: 0; }

/* 1px grid gap over a black backdrop draws the hairlines at any column count */
.rule-grid {
  display: grid;
  gap: 1px;
  background: var(--ink);
}
.rule-grid > * { background: var(--paper); }

/* ---------- header ---------- */

.hdr {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
}

.hdr-brand {
  padding: 12px 16px;
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  background: var(--ink);
  display: block;
  flex: 0 0 auto;
}

.hdr-meta {
  padding: 12px 16px;
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: center;
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hdr-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hdr-nav::-webkit-scrollbar { display: none; }

.hdr-nav a {
  padding: 12px 16px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hdr-nav a:hover { background: var(--ink); color: var(--paper); }

/* non-interactive label occupying the nav slot (apply page) */
.hdr-static {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--muted);
  letter-spacing: 0.06em;
  min-width: 0;
}

.hdr-apply {
  padding: 12px 20px;
  border-left: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hdr-apply:hover { background: var(--paper); color: var(--ink); }

.hdr-back {
  padding: 12px 20px;
  border-left: 1px solid var(--ink);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.hdr-back:hover { background: var(--ink); color: var(--paper); }

/* ---------- section headings ---------- */

.sec { border-bottom: 1px solid var(--ink); }

.sec-head {
  padding: 32px var(--gut) 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: baseline;
}

.kicker {
  color: var(--muted);
  letter-spacing: 0.14em;
  font-size: 11px;
}

.sec-note {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.lead {
  margin: 0 0 22px;
  font-size: 21px;
  line-height: 1.32;
  letter-spacing: -0.035em;
  max-width: 30ch;
  font-weight: 500;
}

.prose {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---------- partners ---------- */

/* A credit line, not a sponsor wall — but given its own breathing room and
   centred in the band rather than tucked into the left gutter. Sits between
   the last content block and the footer on both pages. */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
  padding: 44px var(--gut) 48px;
  border-bottom: 1px solid var(--ink);
}

.partners-k {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex: 0 0 auto;
}

.partners-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.partner { display: flex; align-items: center; opacity: 0.85; }
.partner:hover { opacity: 1; }

.partner-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ellipsis is already a flat black wordmark; the Switzerland Innovation mark
   is a multi-colour faceted crystal whose white Swiss cross is negative
   space, so brightness(0) would fill it in. Grayscale keeps the cross
   legible while still reading as monochrome next to the rest of the page. */
.partner-logo--ellipsis { height: 30px; }
.partner-logo--ipz { height: 54px; filter: grayscale(1); }

.partner-sep {
  width: 1px;
  align-self: stretch;
  min-height: 40px;
  background: var(--hair);
}

/* ---------- footer ---------- */

.ftr {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.ftr > * {
  padding: 14px 16px;
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ftr > *:last-child { border-right: 0; }

.ftr-brand {
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.ftr-mail { color: var(--ink); }
.ftr-mail:hover { opacity: 0.55; }

/* ---------- responsive chrome ---------- */

/* zero-height full-width flex item: forces the wrap point in the header */
.hdr-break { display: none; }

@media (max-width: 980px) {
  .hdr { flex-wrap: wrap; }

  /* row 1 is always brand + CTA; the break pushes everything else below */
  .hdr-brand { order: 1; flex: 1 1 auto; }
  .hdr-apply, .hdr-back { order: 2; }
  .hdr-break {
    display: block;
    order: 3;
    flex: 1 1 100%;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
  }
  .hdr-meta { order: 4; flex: 0 0 auto; border-top: 1px solid var(--ink); }
  .hdr-nav { order: 5; flex: 1 1 240px; border-top: 1px solid var(--ink); }
  .hdr-static { order: 5; flex: 1 1 240px; border-top: 1px solid var(--ink); }
}

@media (max-width: 860px) {
  :root { --gut: 24px; }
}

@media (max-width: 640px) {
  :root { --pad: 12px; --gut: 20px; }

  body { font-size: 12.5px; }

  .hdr-meta { flex: 1 1 100%; border-right: 0; }
  .hdr-nav { flex: 1 1 100%; }
  .hdr-nav a { flex: 1 1 auto; justify-content: center; }
  .hdr-static { flex: 1 1 100%; border-right: 0; }

  .lead { font-size: 19px; }

  .ftr > * {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .ftr > *:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .partners { gap: 16px 22px; padding: 32px var(--gut) 34px; }
  .partners-marks { gap: 22px; }
  .partner-logo--ellipsis { height: 24px; }
  .partner-logo--ipz { height: 42px; }
}

@media (max-width: 420px) {
  /* "MACHINE INTELLIGENCE SUMMIT" no longer fits on one line beside the CTA.
     flex-basis 0 stops the brand from claiming its max-content width, so it
     wraps to two lines inside its own cell and the CTA stays on row 1
     instead of being pushed onto a row of its own. */
  .hdr-brand {
    font-size: 12px;
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }
  .hdr-apply, .hdr-back { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}