@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable-latin-v1.woff2") format("woff2");
}

* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --background: #02070d;
  --foreground: rgba(244, 249, 255, 0.94);
  --text: rgba(244, 249, 255, 0.68);
  /* muted carries the eyebrows at 11px, the figure labels at 12px and the notes
     at 13px. At 0.42 it composited to 3.87:1 against the background, under the
     4.5:1 that small text needs; 0.50 is 5.08:1. */
  --muted: rgba(244, 249, 255, 0.5);
  --line: rgba(244, 249, 255, 0.12);
  --accent: #75aadf;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font);
  font-feature-settings: "cv01", "ss03";
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover {
  color: var(--foreground);
  text-decoration-color: currentColor;
}

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

.attractor-stage,
.background-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.attractor-stage {
  z-index: 0;
  overflow: hidden;
  contain: strict;
}

.attractor {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.96;
}

.attractor-stage.attractor-unavailable {
  display: none;
}

/* Two layers that between them cover where the text is rather than where the
   figure is. Measured off the canvas, the earlier pair left only 32% of the
   figure's ink standing on a desktop against about 49% on a phone, which is why
   the same drawing read faint there.

   The horizontal layer guards the reading column and then drops away, so the
   figure keeps its upper right. The vertical layer takes over below the middle,
   which is where the hero text sits and where the sections scroll through, and
   reaches the flat background by the fold. Behind the last words of the role line
   the two multiply to about 0.75; over the figure's core they reach 0.53, against
   0.77 before. */
.background-wash {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2, 7, 13, 0.99) 0%, rgba(2, 7, 13, 0.92) 40%, rgba(2, 7, 13, 0.45) 62%, rgba(2, 7, 13, 0.02) 100%),
    linear-gradient(180deg, rgba(2, 7, 13, 0.02) 0%, rgba(2, 7, 13, 0.1) 45%, rgba(2, 7, 13, 0.62) 72%, var(--background) 100%);
}

.page {
  position: relative;
  z-index: 2;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

.hero {
  position: relative;
  min-height: min(760px, 88vh);
  padding: clamp(72px, 14vh, 136px) 0 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

h1 {
  margin: 0;
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 470;
  letter-spacing: -0.075em;
  line-height: 0.95;
}

.role {
  max-width: 800px;
  margin: 34px 0 0;
  color: var(--text);
  font-size: clamp(27px, 3.6vw, 46px);
  font-weight: 350;
  letter-spacing: -0.048em;
  line-height: 1.12;
  text-wrap: balance;
}

.affiliations {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 17px);
  letter-spacing: -0.01em;
}

.affiliations span {
  padding: 0 0.5em;
  color: rgba(117, 170, 223, 0.65);
}

.affiliations a {
  text-decoration: underline;
  text-decoration-color: rgba(244, 249, 255, 0.18);
}

.primary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
}

.primary-links a {
  color: rgba(244, 249, 255, 0.78);
  font-size: 15px;
  font-weight: 520;
  text-decoration: underline;
  text-decoration-color: rgba(244, 249, 255, 0.24);
}

.section {
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--line);
}

/* an h2 that looks like a label: the sections need a real heading so the page
   has an outline for screen readers and reader mode, and the type is unchanged */
.eyebrow {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.project {
  max-width: 790px;
}

.project-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 18px;
  text-decoration: none;
}

.project-title h3 {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 430;
  letter-spacing: -0.052em;
  line-height: 1.08;
}

.project-title span {
  margin-top: 0.15em;
  color: var(--muted);
  font-size: 18px;
}

.project > p {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--text);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.58;
}


.interests > p:last-child {
  max-width: 850px;
  margin: 0;
  color: rgba(244, 249, 255, 0.78);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 360;
  letter-spacing: -0.04em;
  line-height: 1.3;
}

.interests {
  padding-bottom: clamp(72px, 10vw, 112px);
}

/* /tribe. Same column, same tokens, no attractor: the canvas belongs to the
   homepage, and a research page should not pay for WebGL to look related. The
   background wash is not here either, because measured against the flat body
   colour it moved the background by 2 of 255 with nothing behind it to reveal. */

/* the column itself is .page, unchanged, so this page's left edge lands exactly
   where the homepage's does on any viewport. Only the measures inside differ. */
.paper {
  padding-bottom: clamp(72px, 10vw, 112px);
}

.paper-head {
  padding: clamp(56px, 11vh, 104px) 0 clamp(40px, 6vw, 60px);
}

.back {
  display: inline-block;
  margin-bottom: clamp(40px, 7vh, 72px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(244, 249, 255, 0.18);
}

.paper h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  letter-spacing: -0.058em;
  line-height: 1.02;
}

/* "brain-response" is the one compound here, and left alone the line broke at
   its hyphen, which reads as two words */
.nowrap {
  white-space: nowrap;
}

.paper-sub {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--text);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 350;
  letter-spacing: -0.032em;
  line-height: 1.22;
  text-wrap: balance;
}

.paper-byline {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.6;
}

.paper .section p {
  max-width: 680px;
  margin: 0 0 1.15em;
  color: var(--text);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.62;
}

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

.paper .section p.paper-lede {
  max-width: 700px;
  color: rgba(244, 249, 255, 0.86);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 360;
  letter-spacing: -0.026em;
  line-height: 1.42;
}

.paper .section p.paper-note {
  color: var(--muted);
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.58;
}

/* inline links in running text need the affordance the nav links get: the
   contact address had none and read as plain grey type */
.paper .section p a {
  color: rgba(244, 249, 255, 0.86);
  text-decoration: underline;
  text-decoration-color: rgba(244, 249, 255, 0.24);
}

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
  margin: 32px 0;
}

.figures dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.figures dd {
  margin: 8px 0 0;
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 430;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}

.figures .tribe { color: var(--accent); }
.figures .input { color: rgba(244, 249, 255, 0.5); }
.figures .delta { color: var(--foreground); }

.paper-link {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 480;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-color: rgba(117, 170, 223, 0.5);
}

@media (max-width: 720px) {
  .page {
    padding-inline: 22px;
  }

  /* the homepage h1 rule scales with the viewport for a two-word name; this
     title is five words, so it needs its own ceiling on small screens */
  .paper h1 {
    font-size: clamp(31px, 8.6vw, 40px);
  }

  .paper-sub {
    font-size: clamp(19px, 5.4vw, 23px);
  }

  .paper-head {
    padding-top: 56px;
  }

  .figures {
    gap: 24px 40px;
  }

  .background-wash {
    background:
      linear-gradient(180deg, rgba(2, 7, 13, 0.12), rgba(2, 7, 13, 0.9) 38%, var(--background) 68%);
  }

  .hero {
    min-height: 720px;
    padding: 72px 0 68px;
    justify-content: flex-end;
  }

  h1 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .role {
    margin-top: 28px;
    font-size: clamp(26px, 8vw, 34px);
  }

  .affiliations {
    max-width: 310px;
    line-height: 1.55;
  }

  .primary-links {
    margin-top: 30px;
  }

  .section {
    padding: 54px 0 58px;
  }

  .eyebrow {
    margin-bottom: 26px;
  }

  .project-title {
    gap: 12px;
  }

  .project-title span {
    font-size: 16px;
  }

}

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

@media print {
  :root { color-scheme: light; }
  body { color: #111; background: #fff; }
  .attractor-stage, .background-wash { display: none; }
  .role, .affiliations, .eyebrow, .project > p,
  .project-title span { color: #444; }
  .interests > p:last-child, .primary-links a { color: #111; }
  .hero { min-height: auto; padding-top: 0; }

  /* /tribe names a colour on every element it owns, and each of those rules
     outranks the body rule above, so none of them inherited the print colour:
     the page printed as its title over four blank sections. It is the page the
     poster's QR code points at, so it is the one people will print.
     The selectors below repeat the originals so they win on document order. */
  .paper-sub, .paper .section p { color: #222; }
  .paper .section p.paper-lede { color: #111; }
  .paper-byline, .paper .section p.paper-note, .figures dt { color: #444; }
  .back, .paper-link, .paper .section p a { color: #111; }
  .figures dd, .figures .tribe, .figures .delta { color: #111; }
  .figures .input { color: #555; }
  .paper-head { padding-top: 0; }
  .back { margin-bottom: 28px; }

  /* the rules that vanish on white: hairlines and underlines are all drawn in a
     near-white tint of the foreground */
  .section { border-top-color: rgba(0, 0, 0, 0.2); }
  .primary-links a, .affiliations a, .back, .paper-link,
  .paper .section p a { text-decoration-color: rgba(0, 0, 0, 0.4); }
}